0
THE WEB YOU WERE USED TO IS GONE
Architecture and strategy for your mobile content

alberta soranzo | @albertatrebla

imag...
REMEMBER THE INTERNET?

image: wtfjeans.com

the web you were used to is gone

@albertatrebla
THE INTERNET IS IN YOUR PANTS

image: wtfjeans.com

the web you were used to is gone

@albertatrebla
WHAT IS MOBILE?

image: huffingtonpost.com (Alamy)

the web you were used to is gone

@albertatrebla
MOBILE USAGE STATISTICS

• 86% of mobile internet users use their device while
watching TV. 

• By 2014, mobile internet u...
MOBILE ONLY PAGEVIEWS

the web you were used to is gone

@albertatrebla
WHAT IS MOBILE?

image: flickr.com/photos/guidedbycthulhu

the web you were used to is gone

@albertatrebla
MOBILE WEB STATISTICS
•

99% of smartphone owners use their mobile browser at least
once a day. 

•

46% of consumers will...
MOBILE ONLY USERS

source: mobithinking.com

the web you were used to is gone

@albertatrebla
MOBILE SEARCH STATISTICS

• 95% of mobile users use their devices for local search. 
• 52% of all local searches are done ...
DIRECTV

the web you were used to is gone

@albertatrebla
DIRECTV

the web you were used to is gone

@albertatrebla
DO YOU HAVE A WEBSITE?

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

the web you were used...
WHO DECIDES WHAT MATTERS?

image: flickr.com/photos/d_space

the web you were used to is gone

@albertatrebla
MOBILE IS SOCIAL

image: flickr.com/photos/strandloper/

the web you were used to is gone

@albertatrebla
MOBILE ONLY FACEBOOK

source: allfacebook.com

the web you were used to is gone

@albertatrebla
HOW WE USE THE INTERNET

“If people want to do something on the
internet, they will want to do it using their
mobile devic...
WHAT ABOUT CONTEXT?

image: flickr.com/photos/kattebelletje/

the web you were used to is gone

@albertatrebla
WHAT ABOUT CONTEXT?

image: flickr.com/photos/piblet

the web you were used to is gone

@albertatrebla
ONE SITE

the web you were used to is gone

@albertatrebla
MANY DEVICES

the web you were used to is gone

@albertatrebla
THERE IS NO SUCH A THING AS
MOBILE IA
image: flickr.com/photos/cannedtuna

the web you were used to is gone

@albertatrebl...
WHAT IS IA?

The structural design of shared information environments.

source: en.wikipedia.org/wiki/Information_architec...
CROSS-CHANNEL IA BLUEPRINT

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

the web you were used to...
TOUCHPOINTS MATRIX

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

the web you were used to...
WHAT DOES IA DO?

IA interprets information and expresses distinctions
between signs and systems of signs and involves the...
DESKTOP

the web you were used to is gone

@albertatrebla
TABLET

the web you were used to is gone

@albertatrebla
MOBILE

the web you were used to is gone

@albertatrebla
WAYFINDING

STRUCTURE AS DESIGN PATTERNS

image: Android Design Patterns

the web you were used to is gone

@albertatrebla
MOBILE PATTERNS - HYERARCHY

source: uxbooth.com

the web you were used to is gone

@albertatrebla
MOBILE PATTERNS - HYERARCHY

the web you were used to is gone

@albertatrebla
MOBILE PATTERNS - HUB & SPOKE

source: uxbooth.com

the web you were used to is gone

@albertatrebla
MOBILE PATTERNS - HUB & SPOKE

the web you were used to is gone

@albertatrebla
MOBILE PATTERNS - NESTED DOLL

source: uxbooth.com

the web you were used to is gone

@albertatrebla
MOBILE PATTERNS - NESTED DOLL

the web you were used to is gone

@albertatrebla
MOBILE PATTERNS - TABBED VIEW

source: uxbooth.com

the web you were used to is gone

@albertatrebla
MOBILE PATTERNS - TABBED VIEW

the web you were used to is gone

@albertatrebla
MOBILE PATTERNS - BENTO BOX

source: uxbooth.com

the web you were used to is gone

@albertatrebla
MOBILE PATTERNS - BENTO BOX

the web you were used to is gone

@albertatrebla
MOBILE PATTERNS - FILTERED VIEW

source: uxbooth.com

the web you were used to is gone

@albertatrebla
MOBILE PATTERNS - FILTERED VIEW

Filter

the web you were used to is gone

Filter

@albertatrebla
SENSEMAKING

MANAGING INFORMATION TO CREATE MEANING

image: flickr.com/photos/10ch

the web you were used to is gone

@alb...
CONTENT = INFORMATION

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

“A strong information layer is the key to crosschannel success”
— Andrea Resmini and Luca Rosati

t...
WAYFINDING FOR SENSEMAKING

the web you were used to is gone

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

the web you were used to is gone

@albertatrebl...
THE CHALLENGE

the web you were used to is gone

@albertatrebla
ADAPTIVE CONTENT

•
•
•
•
•

Reusable
Strong structure
Independent of presentation layer
Metadata
Content Management Syste...
ADAPTIVE CONTENT

the web you were used to is gone

@albertatrebla
REUSABLE CONTENT

the web you were used to is gone

@albertatrebla
STRUCTURED CONTENT

the web you were used to is gone

@albertatrebla
STRUCTURED CONTENT
GLOBAL NAVIGATION AND SERVICE LINKS

SEARCH

LOGO AND SLOGAN

MAIN NAVIGATION

SLIDE TITLE (10 WORDS MA...
STRUCTURED CONTENT
GLOBAL NAVIGATION AND SERVICE LINKS

SEARCH

LOGO AND SLOGAN

MAIN NAVIGATION

SLIDE TITLE (10 WORDS MA...
STRUCTURED CONTENT

GLOBAL NAVIGATION AND SERVICE LINKS

SEARCH

SLIDE TITLE (10 WORDS MAX)

NAV

CAROUSEL PHOTO

SEARCH (...
STRUCTURED CONTENT

GLOBAL NAVIGATION AND SERVICE LINKS

SEARCH

SLIDE TITLE (10 WORDS MAX)

NAV

CAROUSEL PHOTO

SEARCH (...
STRUCTURED CONTENT

GLOBAL NAVIGATION AND SERVICE LINKS

SEARCH

SLIDE TITLE (10 WORDS MAX)

NAV

CAROUSEL PHOTO

SEARCH (...
STRUCTURED CONTENT

GLOBAL NAVIGATION AND SERVICE LINKS

SEARCH

SLIDE TITLE (10 WORDS MAX)

NAV

CAROUSEL PHOTO

SEARCH (...
METADATA

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

the web you were used to is gone

@albertatrebla
PROGRESSIVE DISCLOSURE

the web you were used to is gone

@albertatrebla
THE INTERNET IN YOUR PANTS

image: techpinions.com

the web you were used to is gone

@albertatrebla
THE FUTURE WAS YESTERDAY

the web you were used to is gone

@albertatrebla
THE FUTURE IS YESTERDAY

image: slashgear.com

the web you were used to is gone

@albertatrebla
BTW

image: flickr.com/photos/gregoryjordan

the web you were used to is gone

@albertatrebla
STEPHEN HAY

the web you were used to is gone

@albertatrebla
thank you.
@albertatrebla
albertasoranzo@gmail.com
albertasoranzo.com

Illustration: Dan Willis

the web you were used to ...
RESOURCES
Content Strategy for Mobile
Karen McGrane
A Book Apart, 2011
Pervasive Information Architecture
Andrea Resmini, ...
Upcoming SlideShare
Loading in...5
×

The web you were used to is gone. Architecture and strategy for your mobile content. (v2)

1,858

Published on

*Updated version—delivered as in-agency talk on 9/24 in Bristol, UK*

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 mobile experiences.

Published in: Technology, Design
4 Comments
10 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,858
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
56
Comments
4
Likes
10
Embeds 0
No embeds

No notes for slide

Transcript of "The web you were used to is gone. Architecture and strategy for your mobile content. (v2)"

  1. 1. THE WEB YOU WERE USED TO IS GONE Architecture and strategy for your mobile content alberta soranzo | @albertatrebla image: flickr.com/photos/gregoryjordan the web you were used to is gone @albertatrebla
  2. 2. REMEMBER THE INTERNET? image: wtfjeans.com the web you were used to is gone @albertatrebla
  3. 3. THE INTERNET IS IN YOUR PANTS image: wtfjeans.com the web you were used to is gone @albertatrebla
  4. 4. WHAT IS MOBILE? image: huffingtonpost.com (Alamy) the web you were used to is gone @albertatrebla
  5. 5. 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 web you were used to is gone @albertatrebla
  6. 6. MOBILE ONLY PAGEVIEWS the web you were used to is gone @albertatrebla
  7. 7. WHAT IS MOBILE? image: flickr.com/photos/guidedbycthulhu the web you were used to is gone @albertatrebla
  8. 8. 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 web you were used to is gone @albertatrebla
  9. 9. MOBILE ONLY USERS source: mobithinking.com the web you were used to is gone @albertatrebla
  10. 10. 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 web you were used to is gone @albertatrebla
  11. 11. DIRECTV the web you were used to is gone @albertatrebla
  12. 12. DIRECTV the web you were used to is gone @albertatrebla
  13. 13. DO YOU HAVE A WEBSITE? “You need to get your content onto mobile devices. Period.” — Karen McGrane the web you were used to is gone @albertatrebla
  14. 14. WHO DECIDES WHAT MATTERS? image: flickr.com/photos/d_space the web you were used to is gone @albertatrebla
  15. 15. MOBILE IS SOCIAL image: flickr.com/photos/strandloper/ the web you were used to is gone @albertatrebla
  16. 16. MOBILE ONLY FACEBOOK source: allfacebook.com the web you were used to is gone @albertatrebla
  17. 17. 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 web you were used to is gone @albertatrebla
  18. 18. WHAT ABOUT CONTEXT? image: flickr.com/photos/kattebelletje/ the web you were used to is gone @albertatrebla
  19. 19. WHAT ABOUT CONTEXT? image: flickr.com/photos/piblet the web you were used to is gone @albertatrebla
  20. 20. ONE SITE the web you were used to is gone @albertatrebla
  21. 21. MANY DEVICES the web you were used to is gone @albertatrebla
  22. 22. THERE IS NO SUCH A THING AS MOBILE IA image: flickr.com/photos/cannedtuna the web you were used to is gone @albertatrebla
  23. 23. WHAT IS IA? The structural design of shared information environments. source: en.wikipedia.org/wiki/Information_architecture the web you were used to is gone @albertatrebla
  24. 24. CROSS-CHANNEL IA BLUEPRINT image: tylertate.com/blog/2012/02/21/cross-channel-ia-blueprint.html the web you were used to is gone @albertatrebla
  25. 25. TOUCHPOINTS MATRIX image: journalofia.org/volume1/issue1/02-brugnoli/jofia-0101-02-brugnoli.pdf the web you were used to is gone @albertatrebla
  26. 26. 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 web you were used to is gone @albertatrebla
  27. 27. DESKTOP the web you were used to is gone @albertatrebla
  28. 28. TABLET the web you were used to is gone @albertatrebla
  29. 29. MOBILE the web you were used to is gone @albertatrebla
  30. 30. WAYFINDING STRUCTURE AS DESIGN PATTERNS image: Android Design Patterns the web you were used to is gone @albertatrebla
  31. 31. MOBILE PATTERNS - HYERARCHY source: uxbooth.com the web you were used to is gone @albertatrebla
  32. 32. MOBILE PATTERNS - HYERARCHY the web you were used to is gone @albertatrebla
  33. 33. MOBILE PATTERNS - HUB & SPOKE source: uxbooth.com the web you were used to is gone @albertatrebla
  34. 34. MOBILE PATTERNS - HUB & SPOKE the web you were used to is gone @albertatrebla
  35. 35. MOBILE PATTERNS - NESTED DOLL source: uxbooth.com the web you were used to is gone @albertatrebla
  36. 36. MOBILE PATTERNS - NESTED DOLL the web you were used to is gone @albertatrebla
  37. 37. MOBILE PATTERNS - TABBED VIEW source: uxbooth.com the web you were used to is gone @albertatrebla
  38. 38. MOBILE PATTERNS - TABBED VIEW the web you were used to is gone @albertatrebla
  39. 39. MOBILE PATTERNS - BENTO BOX source: uxbooth.com the web you were used to is gone @albertatrebla
  40. 40. MOBILE PATTERNS - BENTO BOX the web you were used to is gone @albertatrebla
  41. 41. MOBILE PATTERNS - FILTERED VIEW source: uxbooth.com the web you were used to is gone @albertatrebla
  42. 42. MOBILE PATTERNS - FILTERED VIEW Filter the web you were used to is gone Filter @albertatrebla
  43. 43. SENSEMAKING MANAGING INFORMATION TO CREATE MEANING image: flickr.com/photos/10ch the web you were used to is gone @albertatrebla
  44. 44. CONTENT = INFORMATION “Typically information foraging must be analysed as decision making under uncertainty” — Peter Pirolli the web you were used to is gone @albertatrebla
  45. 45. CONTENT = INFORMATION “A strong information layer is the key to crosschannel success” — Andrea Resmini and Luca Rosati the web you were used to is gone @albertatrebla
  46. 46. WAYFINDING FOR SENSEMAKING the web you were used to is gone @albertatrebla
  47. 47. THERE IS NO SUCH A THING AS MOBILE CONTENT STRATEGY image: abookapart.com the web you were used to is gone @albertatrebla
  48. 48. THE CHALLENGE the web you were used to is gone @albertatrebla
  49. 49. ADAPTIVE CONTENT • • • • • Reusable Strong structure Independent of presentation layer Metadata Content Management System (CMS) the web you were used to is gone @albertatrebla
  50. 50. ADAPTIVE CONTENT the web you were used to is gone @albertatrebla
  51. 51. REUSABLE CONTENT the web you were used to is gone @albertatrebla
  52. 52. STRUCTURED CONTENT the web you were used to is gone @albertatrebla
  53. 53. 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 web you were used to is gone 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 @albertatrebla
  54. 54. 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 web you were used to is gone 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 @albertatrebla
  55. 55. 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) TOPIC CENTER (5 LINKS x 4 WORDS MAX) NEWS (5 LINKS x 10 WORDS MAX) NEWSLETTER SIGNUP the web you were used to is gone @albertatrebla
  56. 56. 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) TOPIC CENTER (5 LINKS x 4 WORDS MAX) NEWS (5 LINKS x 10 WORDS MAX) NEWSLETTER SIGNUP the web you were used to is gone @albertatrebla
  57. 57. 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) TOPIC CENTER (5 LINKS x 4 WORDS MAX) NEWS (5 LINKS x 10 WORDS MAX) NEWSLETTER SIGNUP the web you were used to is gone @albertatrebla
  58. 58. 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) TOPIC CENTER (5 LINKS x 4 WORDS MAX) NEWS (5 LINKS x 10 WORDS MAX) NEWSLETTER SIGNUP the web you were used to is gone @albertatrebla
  59. 59. METADATA image: http://dev.npr.org/#station-finder-api-examples the web you were used to is gone @albertatrebla
  60. 60. PROGRESSIVE DISCLOSURE the web you were used to is gone @albertatrebla
  61. 61. THE INTERNET IN YOUR PANTS image: techpinions.com the web you were used to is gone @albertatrebla
  62. 62. THE FUTURE WAS YESTERDAY the web you were used to is gone @albertatrebla
  63. 63. THE FUTURE IS YESTERDAY image: slashgear.com the web you were used to is gone @albertatrebla
  64. 64. BTW image: flickr.com/photos/gregoryjordan the web you were used to is gone @albertatrebla
  65. 65. STEPHEN HAY the web you were used to is gone @albertatrebla
  66. 66. thank you. @albertatrebla albertasoranzo@gmail.com albertasoranzo.com Illustration: Dan Willis the web you were used to is gone @albertatrebla
  67. 67. 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 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 @albertatrebla
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×