The internet in your pants

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

description

*Based on "The web you were used to is gone" — delivered at General Assembly as part of Mike Atherton's UXDI course, in London, UK on 1/15/2014* Information architecture and content strategy are the foundation of any website but, when it comes to mobile, they can literally mean the life or death of a product. The truth is that even the best-designed and well-engineered mobile products can still fail if their IA is not sound, and that’s because mobile information architecture doesn’t only define the structure of content, but also determines how users will interact with it. And speaking of content, do you know what content should go on your mobile sites and apps? Are your users finding what they came for? In this talk we will take a look at the thought process that drives mobile content strategy, the specific challenges and opportunities of the mobile space and how information architecture and content strategy contribute to the creation of outstanding cross-channel experiences.

Transcript of The internet in your pants

Page 1: The internet in your pants

image: flickr.com/photos/gregoryjordan

the internet in your pants trousers

THE INTERNET IN YOUR PANTS TROUSERSArchitecture and strategy for your mobile content

alberta soranzo | @albertatrebla

Page 2: The internet in your pants

the internet in your pants trousers

REMEMBER THE INTERNET?

image: wtfjeans.com

Page 3: The internet in your pants

the internet in your pants trousers

THE INTERNET IS IN YOUR PANTS

image: wtfjeans.com

Page 4: The internet in your pants

the internet in your pants trousers

WHAT IS MOBILE?

image: huffingtonpost.com (Alamy)

Page 5: The internet in your pants

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

Page 6: The internet in your pants

the internet in your pants trousers

MOBILE ONLY PAGEVIEWS

Page 7: The internet in your pants

the internet in your pants trousers

image: flickr.com/photos/guidedbycthulhu

WHAT IS MOBILE?

Page 8: The internet in your pants

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

Page 9: The internet in your pants

the internet in your pants trousers

MOBILE ONLY USERS

source: mobithinking.com

Page 10: The internet in your pants

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

Page 11: The internet in your pants

the internet in your pants trousers

DIRECTV

Page 12: The internet in your pants

the internet in your pants trousers

DIRECTV

Page 13: The internet in your pants

the internet in your pants trousers

DO YOU HAVE A WEBSITE?

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

Page 14: The internet in your pants

the internet in your pants trousers

WHO DECIDES WHAT MATTERS?

image: flickr.com/photos/d_space

Page 15: The internet in your pants

the internet in your pants trousers

MOBILE IS SOCIAL

image: flickr.com/photos/strandloper/

Page 16: The internet in your pants

the internet in your pants trousers

MOBILE ONLY FACEBOOK

source: allfacebook.com

Page 17: The internet in your pants

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

Page 18: The internet in your pants

the internet in your pants trousers

WHAT ABOUT CONTEXT?

image: flickr.com/photos/kattebelletje/

Page 19: The internet in your pants

the internet in your pants trousers

WHAT ABOUT CONTEXT?

image: flickr.com/photos/piblet

Page 20: The internet in your pants

the internet in your pants trousers

ONE SITE

Page 21: The internet in your pants

the internet in your pants trousers

MANY DEVICES

Page 22: The internet in your pants

the internet in your pants trousers

image: flickr.com/photos/cannedtuna

THERE IS NO SUCH A THING AS MOBILE IA

Page 23: The internet in your pants

the internet in your pants trousers

WHAT IS IA?

The structural design of shared information environments.

source: en.wikipedia.org/wiki/Information_architecture

Page 24: The internet in your pants

the internet in your pants trousers

CROSS-CHANNEL IA BLUEPRINT

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

Page 25: The internet in your pants

the internet in your pants trousers

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

TOUCHPOINTS MATRIX

Page 26: The internet in your pants

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

Page 27: The internet in your pants

the internet in your pants trousers

DESKTOP

Page 28: The internet in your pants

the internet in your pants trousers

TABLET

Page 29: The internet in your pants

the internet in your pants trousers

MOBILE

Page 30: The internet in your pants

the internet in your pants trousers

image: Android Design Patterns

STRUCTURE AS DESIGN PATTERNSWAYFINDING

Page 31: The internet in your pants

the internet in your pants trousers

MOBILE PATTERNS - HYERARCHY

source: uxbooth.com

Page 32: The internet in your pants

the internet in your pants trousers

MOBILE PATTERNS - HYERARCHY

Page 33: The internet in your pants

the internet in your pants trousers

MOBILE PATTERNS - HUB & SPOKE

source: uxbooth.com

Page 34: The internet in your pants

the internet in your pants trousers

MOBILE PATTERNS - HUB & SPOKE

Page 35: The internet in your pants

the internet in your pants trousers

MOBILE PATTERNS - NESTED DOLL

source: uxbooth.com

Page 36: The internet in your pants

the internet in your pants trousers

MOBILE PATTERNS - NESTED DOLL

Page 37: The internet in your pants

the internet in your pants trousers

MOBILE PATTERNS - TABBED VIEW

source: uxbooth.com

Page 38: The internet in your pants

the internet in your pants trousers

MOBILE PATTERNS - TABBED VIEW

Page 39: The internet in your pants

the internet in your pants trousers

MOBILE PATTERNS - BENTO BOX

source: uxbooth.com

Page 40: The internet in your pants

the internet in your pants trousers

MOBILE PATTERNS - BENTO BOX

Page 41: The internet in your pants

the internet in your pants trousers

MOBILE PATTERNS - FILTERED VIEW

source: uxbooth.com

Page 42: The internet in your pants

the internet in your pants trousers

MOBILE PATTERNS - FILTERED VIEW

Filter Filter

Page 43: The internet in your pants

the internet in your pants trousers

image: flickr.com/photos/10ch

MANAGING INFORMATION TO CREATE MEANINGSENSEMAKING

Page 44: The internet in your pants

the internet in your pants trousers

CONTENT = INFORMATION

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

— Peter Pirolli

Page 45: The internet in your pants

the internet in your pants trousers

CONTENT = INFORMATION

“A strong information layer is the key to cross-channel success”

— Andrea Resmini and Luca Rosati

Page 46: The internet in your pants

the internet in your pants trousers

WAYFINDING FOR SENSEMAKING

Page 47: The internet in your pants

the internet in your pants trousers

PROGRESSIVE DISCLOSURE

Page 48: The internet in your pants

the internet in your pants trousers

THERE IS NO SUCH A THING AS MOBILE CONTENT STRATEGY

image: abookapart.com

Page 49: The internet in your pants

the internet in your pants trousers

THE CHALLENGE

Page 50: The internet in your pants

the internet in your pants trousers

ADAPTIVE CONTENT

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

Page 51: The internet in your pants

the internet in your pants trousers

ADAPTIVE CONTENT

Page 52: The internet in your pants

the internet in your pants trousers

REUSABLE CONTENT

Page 53: The internet in your pants

the internet in your pants trousers

CONTENT MODEL

Page 54: The internet in your pants

the internet in your pants trousers

Variable LabelCHIS Data Source(s)

Age Groups

Levels

Description

Restrictions

Year

STRUCTURED CONTENT

Page 55: The internet in your pants

NEWSLETTERSIGNUP

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)

the internet in your pants trousers

STRUCTURED CONTENT

Page 56: The internet in your pants

the internet in your pants trousers

STRUCTURED CONTENT

NEWSLETTERSIGNUP

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)

CAROUSELPHOTOTHUMB

FEATURED PRODUCT 2 (3 WORDS MAX)

Page 57: The internet in your pants

the internet in your pants trousers

THE INTERNET IN YOUR PANTS

image: techpinions.com

Page 58: The internet in your pants

the internet in your pants trousers

THE FUTURE WAS YESTERDAY

Page 59: The internet in your pants

the internet in your pants trousers

THE FUTURE IS YESTERDAY

image: slashgear.com

Page 60: The internet in your pants

the internet in your pants trousers

BTW

image: flickr.com/photos/gregoryjordan

Page 61: The internet in your pants

the internet in your pants trousers

STEPHEN HAY

Page 62: The internet in your pants

the internet in your pants trousers

thank you@albertatrebla

[email protected] Center for Health Policy Research

Illustration: Dan Willis

Page 63: The internet in your pants

the internet in your pants trousers

RESOURCES

Content Strategy for MobileKaren McGraneA Book Apart, 2011

Pervasive Information ArchitectureAndrea Resmini, Luca RosatiMorgan Kaufman, 2012

Android Design PatternsGreg NudelmanWiley, 2013

Information Foraging Theory: Adaptive Interaction with InformationPeter TirolliOxford 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 HollywoodAlexis Madrigal - The Atlantictheatlantic.com/technology/archive/2014/01/how-netflix-reverse-engineered-hollywood/282679/