image: flickr.com/photos/gregoryjordan Architecture and strategy
for your mobile content ! ! ! ! ! UX Scotland — Edinburgh, June 19-20 alberta soranzo | @albertatrebla THE WEB YOU WERE USED TO IS GONE

image: flickr.com/photos/gregoryjordan

REMEMBER THE INTERNET?
image: wtfjeans.com

THE INTERNET IS IN YOUR
POCKET image: wtfjeans.com

WHAT IS MOBILE? image: huffingtonpost.com
(Alamy)

USE

86% of mobile internet users use
their device while watching TV. source: pocketyourshop.wordpress.com

By end of 2014, mobile
internet usage will overtake desktop internet usage. source: pocketyourshop.wordpress.com

InternetUsers(MM) 0 500 1000 1500
2000 2007 2009 2011 2013 2015E Mobile Desktop

Adults spend more time on mobile
media than they do on newspapers and magazines combined. source: pocketyourshop.wordpress.com

what is mobile? What is
mobile? image: flickr.com/photos/guidedbycthulhu SO, WHAT IS MOBILE AGAIN?

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
12.7%3.7% North America 8.1%1.5% Europe 22.9%4.5% Asia 14.2%2.9% Worldwide 5.3%.9% South America 16.6%4.8% Africa 12.8%2.8% Oceania

99% of smartphone owners use their
mobile browser at least once a day. source: pocketyourshop.wordpress.com

46% of consumers will NOT return to a
mobile site that is not working properly. source: pocketyourshop.wordpress.com

74% of consumers will wait 5
seconds for a web page to load on their mobile device before abandoning the site. source: pocketyourshop.wordpress.com

39% of business do nothing to
make their site mobile-ready. source: pocketyourshop.wordpress.com

MOBILE ONLY USERS source: mobithinking.com
Country % mobile-only Country % mobile-only Egypt 70% Indonesia 44% India 59% Thailand 32% South Africa 57% China 30% Ghana 55% US 25% Kenya 54% UK 22% Nigeria 50% Russia 19

SEARCH

95% of mobile users use
their devices for local search. source: pocketyourshop.wordpress.com

52% of all local searches
are done from a mobile device. source: pocketyourshop.wordpress.com

source: pocketyourshop.wordpress.com 3 out of
every 5 searches are conducted on a mobile device.

source: pocketyourshop.wordpress.com 9 out of
every 10 searches mobile phone searches result in a purchase or visit.

DIRECTV

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: flickr.com/photos/strandloper/

source: allfacebook.com

source: allfacebook.com

Users(MM) 0 250 500 750
1000 Q4 12 Q1 13 Q2 13 Q3 13 Q4 13 296 254 219 189 157 945 874 819 751 680 Mobile Mobile Only FACEBOOK

NO MORE BOUNDARIES “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

ONE SITE Examples of diffent
sites on different platform

MANY DEVICES

image: flickr.com/photos/cannedtuna THERE IS NO
SUCH A THING AS MOBILE INFORMATION ARCHITECTURE

WHAT IS IA? The structural
design of shared information environments. source: en.wikipedia.org/wiki/Information_architecture

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

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

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

TABLET

MOBILE

MOBILE PATTERNS The organization structure
is usually hierarchical, but can have other structures, such as concentric or even chaotic. image: Android Design Patterns STRUCTURE AS DESIGN PATTERNS WAYFINDING

MOBILE PATTERNS - HIERARCHY source:
uxbooth.com

MOBILE PATTERNS - HIERARCHY

MOBILE PATTERNS - HUB &
SPOKE source: uxbooth.com

MOBILE PATTERNS - HUB &
SPOKE

MOBILE PATTERNS - NESTED DOLL
source: uxbooth.com

MOBILE PATTERNS - NESTED DOLL

MOBILE PATTERNS - TABBED VIEW
source: uxbooth.com

MOBILE PATTERNS - TABBED VIEW

MOBILE PATTERNS - BENTO BOX
source: uxbooth.com

MOBILE PATTERNS - BENTO BOX

MOBILE PATTERNS - FILTERED VIEW
source: uxbooth.com

MOBILE PATTERNS - FILTERED VIEW
Filter Filter

image: flickr.com/photos/10ch MANAGING INFORMATION TO
CREATE MEANING SENSE-MAKING

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

PROGRESSIVE DISCLOSURE

WAYFINDING FOR SENSEMAKING

THE HOMEPAGE IS DEAD

image: martinbelam.com
THE BUZZFEED ARTICLE

image: martinbelam.com
THE NYTIMES REPORT

image: martinbelam.com

ACTUALLY, NOT YET

THERE IS NO SUCH A
THING AS MOBILE CONTENT STRATEGY image: abookapart.com

THE CHALLENGE Adaptive content is
more than just “mobile.” It means getting your content into a format so you can share and distribute it to any platform you want. It means you can get your content onto platforms you control—and platforms you don’t. It even means you’ll have a fighting shot at getting your content onto platforms that haven’t been invented yet.

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

ADAPTIVE CONTENT Adaptive content is
more than just “mobile.” It means getting your content into a format so you can share and distribute it to any platform you want. It means you can get your content onto platforms you control—and platforms you don’t. It even means you’ll have a fighting shot at getting your content onto platforms that haven’t been invented yet.

REUSABLE CONTENT
Find examples

CONTENT MODEL

NEWSLETTER SIGNUP PROGRAM 1 (50
WORDS MAX) PROGRAM 2 (50 WORDS MAX) PROGRAM 2 (50 WORDS MAX) GLOBAL NAVIGATION AND SERVICE LINKS SEARCH LOGO AND SLOGAN MAIN NAVIGATION CAROUSEL PHOTO FEATURED PRODUCT 1 (3 WORDS MAX) FEATURED PRODUCT 2 (3 WORDS MAX) PUB SEARCH SLIDE TITLE (10 WORDS MAX) SLIDE TEASER (50 WORDS MAX) ASK THE EXPERT (100 WORDS MAX) TOPIC CENTER (10 LINKS x 4 WORDS MAX) HEALTH CARE REFORM (100 WORDS MAX) SPOTLIGHT (100 WORDS MAX) PROGRAM 1 (50 WORDS MAX) PROGRAM 2 (50 WORDS MAX) PROGRAM 2 (50 WORDS MAX) NEWS (5 LINKS x 10 WORDS MAX) STRUCTURED CONTENT

STRUCTURED CONTENT NEWSLETTER SIGNUP GLOBAL
NAVIGATION AND SERVICE LINKS SEARCH CAROUSEL PHOTO FEATURED PRODUCT 1 (3 WORDS MAX) FEATURED PRODUCT 2 (3 WORDS MAX) PUB SEARCH SLIDE TITLE (10 WORDS MAX) SLIDE TEASER (50 WORDS MAX) TOPIC CENTER (10 LINKS x 4 WORDS MAX) NEWS (5 LINKS x 10 WORDS MAX) NAV SEARCH (SITE AND PUBS) SLIDE TEASER SHORT (10 WORDS MAX) FEATURED PRODUCT 1 (3 WORDS MAX) TOPIC CENTER (5 LINKS x 4 WORDS MAX) NEWS (5 LINKS x 10 WORDS MAX) CAROUSEL PHOTO THUMB FEATURED PRODUCT 2 (3 WORDS MAX)

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

THE INTERNET IN YOUR POCKET
image: techpinions.com

THE FUTURE WAS YESTERDAY

THE FUTURE IS YESTERDAY image:
slashgear.com

BTW
image: flickr.com/photos/gregoryjordan

STEPHEN HAY

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/