THE INTERNET IN YOUR PANTS
TROUSERS Architecture and strategy for your mobile content alberta soranzo | @albertatrebla image: flickr.com/photos/gregoryjordan the internet in your pants trousers

REMEMBER THE INTERNET? image: wtfjeans.com
the internet in your pants trousers

THE INTERNET IS IN YOUR
PANTS image: wtfjeans.com the internet in your pants trousers

WHAT IS MOBILE? image: huffingtonpost.com
(Alamy) the internet in your pants trousers

MOBILE USAGE STATISTICS • 86% of
mobile internet users use their device while watching TV. • By 2014, mobile internet usage will overtake desktop internet usage. • Adults spend more time on mobile media than they do on newspapers and magazines combined. source: pocketyourshop.wordpress.com the internet in your pants trousers

MOBILE ONLY PAGEVIEWS the internet
in your pants trousers

WHAT IS MOBILE? image: flickr.com/photos/guidedbycthulhu
the internet in your pants trousers

MOBILE WEB STATISTICS • 99% of
smartphone owners use their mobile browser at least once a day. • 46% of consumers will NOT return to a mobile site that is not working properly. • 39% of business do nothing to make site mobile-ready. • 74% of consumers will wait 5 seconds for a web page to load on their mobile device before abandoning the site. • 18% of all web traffic in the U.S. is mobile traffic. That number skyrockets to 24% in Africa, and 30% in Asia. This is up 192.5% since 2011. source: pocketyourshop.wordpress.com the internet in your pants trousers

MOBILE ONLY USERS source: mobithinking.com
the internet in your pants trousers

MOBILE SEARCH STATISTICS • 95% of
mobile users use their devices for local search. • 52% of all local searches are done from a mobile device. • 9 out of 10 mobile phone searches result in a purchase or visit. • 3 out of every 5 searches are conducted on a mobile device. source: pocketyourshop.wordpress.com the internet in your pants trousers

DIRECTV the internet in your
pants trousers

DIRECTV the internet in your
pants trousers

DO YOU HAVE A WEBSITE?
“You need to get your content onto mobile devices. Period.” — Karen McGrane the internet in your pants trousers

WHO DECIDES WHAT MATTERS? image:
flickr.com/photos/d_space the internet in your pants trousers

MOBILE IS SOCIAL image: flickr.com/photos/strandloper/
the internet in your pants trousers

MOBILE ONLY FACEBOOK source: allfacebook.com
the internet in your pants trousers

HOW WE USE THE INTERNET
“If people want to do something on the internet, they will want to do it using their mobile device. Period.” — Karen McGrane the internet in your pants trousers

WHAT ABOUT CONTEXT? image: flickr.com/photos/kattebelletje/
the internet in your pants trousers

WHAT ABOUT CONTEXT? image: flickr.com/photos/piblet
the internet in your pants trousers

ONE SITE the internet in
your pants trousers

MANY DEVICES the internet in
your pants trousers

THERE IS NO SUCH A
THING AS MOBILE IA image: flickr.com/photos/cannedtuna the internet in your pants trousers

WHAT IS IA? The structural
design of shared information environments. source: en.wikipedia.org/wiki/Information_architecture the internet in your pants trousers

CROSS-CHANNEL IA BLUEPRINT image: tylertate.com/blog/2012/02/21/cross-channel-ia-blueprint.html
the internet in your pants trousers

TOUCHPOINTS MATRIX image: journalofia.org/volume1/issue1/02-brugnoli/jofia-0101-02-brugnoli.pdf the
internet in your pants trousers

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 the internet in your pants trousers

DESKTOP the internet in your
pants trousers

TABLET the internet in your
pants trousers

MOBILE the internet in your
pants trousers

WAYFINDING STRUCTURE AS DESIGN PATTERNS
image: Android Design Patterns the internet in your pants trousers

MOBILE PATTERNS - HYERARCHY source:
uxbooth.com the internet in your pants trousers

MOBILE PATTERNS - HYERARCHY the
internet in your pants trousers

MOBILE PATTERNS - HUB &
SPOKE source: uxbooth.com the internet in your pants trousers

MOBILE PATTERNS - HUB &
SPOKE the internet in your pants trousers

MOBILE PATTERNS - NESTED DOLL
source: uxbooth.com the internet in your pants trousers

MOBILE PATTERNS - NESTED DOLL
the internet in your pants trousers

MOBILE PATTERNS - TABBED VIEW
source: uxbooth.com the internet in your pants trousers

MOBILE PATTERNS - TABBED VIEW
the internet in your pants trousers

MOBILE PATTERNS - BENTO BOX
source: uxbooth.com the internet in your pants trousers

MOBILE PATTERNS - BENTO BOX
the internet in your pants trousers

MOBILE PATTERNS - FILTERED VIEW
source: uxbooth.com the internet in your pants trousers

MOBILE PATTERNS - FILTERED VIEW
Filter the internet in your pants trousers Filter

SENSEMAKING MANAGING INFORMATION TO CREATE
MEANING image: flickr.com/photos/10ch the internet in your pants trousers

CONTENT = INFORMATION “Typically information
foraging must be analysed as decision making under uncertainty” — Peter Pirolli the internet in your pants trousers

CONTENT = INFORMATION “A strong
information layer is the key to crosschannel success” — Andrea Resmini and Luca Rosati the internet in your pants trousers

WAYFINDING FOR SENSEMAKING the internet
in your pants trousers

PROGRESSIVE DISCLOSURE the internet in
your pants trousers

THERE IS NO SUCH A
THING AS MOBILE CONTENT STRATEGY image: abookapart.com the internet in your pants trousers

THE CHALLENGE the internet in
your pants trousers

ADAPTIVE CONTENT • • •
• • Reusable Strong structure Independent of presentation layer Metadata Content Management System (CMS) the internet in your pants trousers

ADAPTIVE CONTENT the internet in
your pants trousers

REUSABLE CONTENT the internet in
your pants trousers

CONTENT MODEL the internet in
your pants trousers

STRUCTURED CONTENT Variable Label CHIS
Data Source(s) Age Groups Levels Year Description Restrictions the internet in your pants trousers

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

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

THE INTERNET IN YOUR PANTS
image: techpinions.com the internet in your pants trousers

THE FUTURE WAS YESTERDAY the
internet in your pants trousers

THE FUTURE IS YESTERDAY image:
slashgear.com the internet in your pants trousers

BTW image: flickr.com/photos/gregoryjordan the internet
in your pants trousers

STEPHEN HAY the internet in
your pants trousers

thank you @albertatrebla albertasoranzo@gmail.com UCLA
Center for Health Policy Research Illustration: Dan Willis the internet in your pants trousers

RESOURCES Content Strategy for Mobile
Karen McGrane A Book Apart, 2011 Pervasive Information Architecture Andrea Resmini, Luca Rosati Morgan Kaufman, 2012 Android Design Patterns Greg Nudelman Wiley, 2013 Information Foraging Theory: Adaptive Interaction with Information Peter Tirolli Oxford University Press (USA), 2009 Sense-making in Cross-channel Design. Fisher, J., Norris, S., & E. Buie (2012). Journal of Information Architecture. Vol. 4, No. 1-2. journalofia.org/volume4/issue2/02-fisher/ How Netflix Reverse Engineered Hollywood Alexis Madrigal - The Atlantic theatlantic.com/technology/archive/2014/01/how-netflix-reverse-engineered-hollywood/282679/ the internet in your pants trousers