the web you were used to is gone - ux australia 2014

Architecture and strategy for your mobile content !

!

!!!

UX Australia — Sydney, August 25-29 alberta soranzo | @albertatrebla | wearefriday.com

THE WEB YOU WERE USED TO IS GONE

CC image: wikipedia.org/wiki/Interface_Message_Processor

REMEMBER THE INTERNET?

CC image: http://en.wikipedia.org/wiki/Modem

THE INTERNET IS IN YOUR POCKET

image: http://gizmodo.com/5918418/giant-smartphones-in-skinny-jeans-a-photoshoot

image: huffingtonpost.com (Alamy)

WHAT IS MOBILE?

image: flickr.com/photos/justard/12300416746/

SO, WHAT IS MOBILE AGAIN?

image: flickr.com/photos/guidedbycthulhu

image: huffpost.com

image: kellianderson.com/

Inte

rnet

Use

rs (M

M)

0

500

1000

1500

2000

2007 2009 2011 2013 2015E

Mobile Desktop

source: pocketyourshop.wordpress.com

source: pocketyourshop.wordpress.com

USA

18%

82%

Africa

24%

76%

Asia

30%

70%

MOBILE VS DESKTOP

This is up 192.5% since 2011.

source: pocketyourshop.wordpress.com

MOBILE ONLY PAGEVIEWS

2010 2013

12.7%3.7%

North America

8.1%1.5%

Europe

22.9%4.5%

Asia

5.3%.9%

South America

16.6%4.8%

Africa

12.8%2.8%

Oceania

source: mobithinking.com

Country % mobile-only usersEgypt 70%

India 59%

South Africa 57%

Ghana 55%

Kenya 54%

Nigeria 50%

Indonesia 44%

Thailand 32%

China 30%

US 25%

UK 22%

Russia 19%

60% 95% 90%SEARCH LOCAL SEARCH VISIT OR PURCHASE

source: pocketyourshop.wordpress.com

46%74% 39%WILL NOT RETURNWAIT 5 SEC DOES NOTHING

source: pocketyourshop.wordpress.com

DO YOU HAVE A WEBSITE?

“You need to get your content onto mobile devices. Period.” — Karen McGrane

WHO DECIDES WHAT MATTERS?

image: flickr.com/photos/d_space

MOBILE IS SOCIAL

image: hercampus.com

source: allfacebook.com

source: allfacebook.com

“If people want to do something on the internet, they will want to do it using their mobile device. Period.” — Karen McGrane

WHAT ABOUT CONTEXT?

image: flickr.com/photos/kattebelletje/

image: flickr.com/photos/piblet

WHAT ABOUT CONTEXT?

image: https://www.flickr.com/photos/robef/8091483876

ONE SITE

image: flickr.com/photos/cannedtuna

INFORMATION ARCHITECTURE

WHAT IS INFORMATION ARCHITECTURE?

The structural design of shared information environments.

source: en.wikipedia.org/wiki/Information_architecture

image: tylertate.com/blog/2012/02/21/cross-channel-ia-blueprint.html

image: journalofia.org/volume1/issue1/02-brugnoli/jofia-0101-02-brugnoli.pdf

WHAT DOES IA DO?

IA interprets information and expresses distinctions between signs and systems of signs and involves the categorization of information into a coherent structure.

source: en.wikipedia.org/wiki/Information_architecture

DESKTOP

MOBILE PATTERNS

image: Android Design Patterns

STRUCTURE AS DESIGN PATTERNSWAYFINDING

MOBILE PATTERNS - HIERARCHY

MOBILE PATTERNS - HUB & SPOKE

MOBILE PATTERNS - NESTED DOLL

MOBILE PATTERNS - TABBED VIEW

MOBILE PATTERNS - BENTO BOX

Filter Filter

MOBILE PATTERNS - FILTERED VIEW

image: flickr.com/photos/10ch

MANAGING INFORMATION TO CREATE MEANINGSENSE-MAKING

“Typically information foraging must be analysed as decision making under uncertainty” — Peter Pirolli

CC image: flickr.com/photos/cafnr/14352437798

PROGRESSIVE DISCLOSURE

THE HOMEPAGE IS DEAD

image: martinbelam.com

image: martinbelam.com

image: martinbelam.com

ACTUALLY, NOT DEAD YET

image: abookapart.com image: sarawb.com

CONTENT STRATEGY

ADAPTIVE CONTENT

• Reusable • Strong structure • Independent of presentation layer • Metadata • Content Management System (CMS)

ADAPTIVE

STRONG STRUCTURE

INDEPENDENT

NEWSLETTER SIGNUP

GLOBAL NAVIGATION AND SERVICE LINKS SEARCH

CAROUSEL PHOTO

FEATURED THING (3 WORDS MAX)

THING YOU WANT TO SHOW (3 WORDS MAX)

SECONDARY SEARCH

SLIDE TITLE (10 WORDS MAX)

SLIDE TEASER (50 WORDS MAX)

LIST OF OTHER THINGS (10 LINKS x 4 WORDS MAX)

NEWS (5 LINKS x 10 WORDS MAX)

NAV SEARCH (SITE AND PUBS)

SLIDE TEASER SHORT(10 WORDS MAX)

THING YOU WANT TO SHOW (3 WORDS MAX)

LIST OF OTHER THINGS

(5 LINKS x 4 WORDS MAX)

NEWS (5 LINKS x 10 WORDS

MAX)

CAROUSEL PHOTO THUMB

THING YOU WANT TO SHOW (3 WORDS MAX)

NEWSLETTER SIGNUP

OTHER THING (50 WORDS MAX)

OTHER THING (50 WORDS MAX)

OTHER THING (50 WORDS MAX)

GLOBAL NAVIGATION AND SERVICE LINKS SEARCH

LOGO AND SLOGAN

MAIN NAVIGATION

CAROUSEL PHOTO

FEATURED THING (3 WORDS MAX)

FEATURED THING (3 WORDS MAX)

SECONDARY SEARCH

SLIDE TITLE (10 WORDS MAX)

SLIDE TEASER (50 WORDS MAX)

THING YOU WANT TO SHOW (100 WORDS MAX)

THING YOU WANT TO SHOW (10 LINKS x 4 WORDS MAX)

THING YOU WANT TO SHOW (100 WORDS MAX)

THING YOU WANT TO SHOW (100 WORDS MAX)

OTHER THING (50 WORDS MAX)

OTHER THING (50 WORDS MAX)

OTHER THING (50 WORDS MAX)

NEWS (5 LINKS x 10 WORDS MAX)

INDEPENDENT

NEWSLETTER SIGNUP

GLOBAL NAVIGATION AND SERVICE LINKS SEARCH

CAROUSEL PHOTO

FEATURED THING (3 WORDS MAX)

THING YOU WANT TO SHOW (3 WORDS MAX)

SECONDARY SEARCH

SLIDE TITLE (10 WORDS MAX)

SLIDE TEASER (50 WORDS MAX)

LIST OF OTHER THINGS (10 LINKS x 4 WORDS MAX)

NEWS (5 LINKS x 10 WORDS MAX)

NAV SEARCH (SITE AND PUBS)

SLIDE TEASER SHORT(10 WORDS MAX)

THING YOU WANT TO SHOW (3 WORDS MAX)

LIST OF OTHER THINGS

(5 LINKS x 4 WORDS MAX)

NEWS (5 LINKS x 10 WORDS

MAX)

CAROUSEL PHOTO THUMB

THING YOU WANT TO SHOW (3 WORDS MAX)

NEWSLETTER SIGNUP

OTHER THING (50 WORDS MAX)

OTHER THING (50 WORDS MAX)

OTHER THING (50 WORDS MAX)

GLOBAL NAVIGATION AND SERVICE LINKS SEARCH

LOGO AND SLOGAN

MAIN NAVIGATION

CAROUSEL PHOTO

FEATURED THING (3 WORDS MAX)

FEATURED THING (3 WORDS MAX)

SECONDARY SEARCH

SLIDE TITLE (10 WORDS MAX)

SLIDE TEASER (50 WORDS MAX)

THING YOU WANT TO SHOW (100 WORDS MAX)

THING YOU WANT TO SHOW (10 LINKS x 4 WORDS MAX)

THING YOU WANT TO SHOW (100 WORDS MAX)

THING YOU WANT TO SHOW (100 WORDS MAX)

OTHER THING (50 WORDS MAX)

OTHER THING (50 WORDS MAX)

OTHER THING (50 WORDS MAX)

NEWS (5 LINKS x 10 WORDS MAX)

INDEPENDENT

NEWSLETTER SIGNUP

GLOBAL NAVIGATION AND SERVICE LINKS SEARCH

CAROUSEL PHOTO

FEATURED THING (3 WORDS MAX)

THING YOU WANT TO SHOW (3 WORDS MAX)

SECONDARY SEARCH

SLIDE TITLE (10 WORDS MAX)

SLIDE TEASER (50 WORDS MAX)

LIST OF OTHER THINGS (10 LINKS x 4 WORDS MAX)

NEWS (5 LINKS x 10 WORDS MAX)

NAV SEARCH (SITE AND PUBS)

SLIDE TEASER SHORT(10 WORDS MAX)

THING YOU WANT TO SHOW (3 WORDS MAX)

LIST OF OTHER THINGS

(5 LINKS x 4 WORDS MAX)

NEWS (5 LINKS x 10 WORDS

MAX)

CAROUSEL PHOTO THUMB

THING YOU WANT TO SHOW (3 WORDS MAX)

NEWSLETTER SIGNUP

OTHER THING (50 WORDS MAX)

OTHER THING (50 WORDS MAX)

OTHER THING (50 WORDS MAX)

GLOBAL NAVIGATION AND SERVICE LINKS SEARCH

LOGO AND SLOGAN

MAIN NAVIGATION

CAROUSEL PHOTO

FEATURED THING (3 WORDS MAX)

FEATURED THING (3 WORDS MAX)

SECONDARY SEARCH

SLIDE TITLE (10 WORDS MAX)

SLIDE TEASER (50 WORDS MAX)

THING YOU WANT TO SHOW (100 WORDS MAX)

THING YOU WANT TO SHOW (10 LINKS x 4 WORDS MAX)

THING YOU WANT TO SHOW (100 WORDS MAX)

THING YOU WANT TO SHOW (100 WORDS MAX)

OTHER THING (50 WORDS MAX)

OTHER THING (50 WORDS MAX)

OTHER THING (50 WORDS MAX)

NEWS (5 LINKS x 10 WORDS MAX)

REUSABLE

METADATA

image: http://dev.npr.org/#station-finder-api-examples

image: techpinions.com

BTW

image: flickr.com/photos/gregoryjordan

thank youalberta soranzo | @albertatrebla | wearefriday.com

RESOURCES

Content Strategy for Mobile Karen McGrane A Book Apart, 2011 !Pervasive Information Architecture Andrea Resmini, Luca Rosati Morgan Kaufman, 2012 !Content Everywhere Sara Wachter-Boettcher Rosenfeld Media, 2012 !Android Design Patterns Greg Nudelman Wiley, 2013 !Information Foraging Theory: Adaptive Interaction with Information Peter Tirolli Oxford University Press (USA), 2009 !Fisher, J., Norris, S., & E. Buie (2012). Sense-making in Cross-channel Design Journal of Information Architecture. Vol. 4, No. 1-2. journalofia.org/volume4/issue2/02-fisher/