The web you were used to is gone - UX Australia 2014

THE WEB YOU WERE USED TO IS GONE Architecture and strategy for your mobile content ! ! ! ! ! UX Australia — Sydney, August 25-29 alberta soranzo | @albertatrebla | wearefriday.com 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

WHAT IS MOBILE? image: huffingtonpost.com (Alamy) image: flickr.com/photos/justard/12300416746/

SO, WHAT IS MOBILE AGAIN? image: flickr.com/photos/guidedbycthulhu

image: huffpost.com

image: kellianderson.com/

Internet Users (MM) 2000 1500 1000 500 0 Mobile Desktop 2007 2009 2011 2013 2015E source: pocketyourshop.wordpress.com

MOBILE VS DESKTOP source: pocketyourshop.wordpress.com USA 18% 82% Africa 24% 76% Asia 30% 70%

This is up 192.5% since 2011. source: pocketyourshop.wordpress.com

MOBILE ONLY PAGEVIEWS 2010 2013 3.7% 12.7% North America 1.5% 8.1% Europe 4.5% 22.9% Asia .9% 5.3% South America 4.8% 16.6% Africa 2.8% 12.8% Oceania

source: mobithinking.com Country % mobile-only users Egypt 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

74% 46% 39% WAIT 5 SEC WILL NOT RETURN 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

“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/

WHAT ABOUT CONTEXT? image: flickr.com/photos/piblet 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 PATTERNS WAYFINDING

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 MEANING SENSE-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

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 GLOBAL NAVIGATION AND SERVICE LINKS SEARCH NEWSLETTER SIGNUP SLIDE TITLE (10 WORDS MAX) CAROUSEL PHOTO SLIDE TEASER (50 WORDS MAX) FEATURED THING (3 WORDS MAX) THING YOU WANT TO SHOW (3 WORDS MAX) SECONDARY SEARCH 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) CAROUSEL PHOTO THUMB THING YOU WANT TO SHOW (3 WORDS MAX) THING YOU WANT TO SHOW LIST OF OTHER THINGS (5 LINKS x 4 WORDS MAX) NEWS (5 LINKS x 10 WORDS MAX) (3 WORDS MAX) GLOBAL NAVIGATION AND SERVICE LINKS SEARCH NEWSLETTER SIGNUP OTHER THING (50 WORDS MAX) OTHER THING (50 WORDS MAX) OTHER THING (50 WORDS MAX) 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 you alberta 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/

The web you were used to is gone - UX Australia 2014

You are reading a preview.

Check these out next

The web you were used to is gone - UX Australia 2014

More Related Content

Viewers also liked (14)

Similar to The web you were used to is gone - UX Australia 2014 (20)

More from Alberta Soranzo (20)

Recently uploaded (20)