Your SlideShare is downloading. ×
0
image: flickr.com/photos/gregoryjordan
Architecture and strategy for your mobile content
!
!
!
!
!
UX Scotland — Edinburgh,...
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.wordpre...
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 A...
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: poc...
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% T...
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
FACE...
NO MORE BOUNDARIES
“If people want to do something on the
internet, they will want to do it using their
mobile device. Per...
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_architectu...
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 ...
DESKTOP
TABLET
MOBILE
MOBILE PATTERNS
The organization structure is usually hierarchical, but
can have other structures, such as concentric or e...
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 Pirol...
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 an...
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...
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...
STRUCTURED CONTENT
NEWSLETTER
SIGNUP
GLOBAL NAVIGATION AND SERVICE LINKS SEARCH
CAROUSEL PHOTO
FEATURED PRODUCT 1
(3 WORDS...
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...
The web you were used to is gone. Architecture and strategy for your content.
The web you were used to is gone. Architecture and strategy for your content.
The web you were used to is gone. Architecture and strategy for your content.
The web you were used to is gone. Architecture and strategy for your content.
The web you were used to is gone. Architecture and strategy for your content.
Upcoming SlideShare
Loading in...5
×

The web you were used to is gone. Architecture and strategy for your content.

6,393

Published on

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.

75 Tutorial presented at UX Scotland 2014

Published in: Mobile, Technology
4 Comments
140 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,393
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
284
Comments
4
Likes
140
Embeds 0
No embeds

No notes for slide

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

  1. 1. 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
  2. 2. image: flickr.com/photos/gregoryjordan
  3. 3. REMEMBER THE INTERNET? image: wtfjeans.com
  4. 4. THE INTERNET IS IN YOUR POCKET image: wtfjeans.com
  5. 5. WHAT IS MOBILE? image: huffingtonpost.com (Alamy)
  6. 6. USE
  7. 7. 86% of mobile internet users use their device while watching TV. source: pocketyourshop.wordpress.com
  8. 8. By end of 2014, mobile internet usage will overtake desktop internet usage. source: pocketyourshop.wordpress.com
  9. 9. InternetUsers(MM) 0 500 1000 1500 2000 2007 2009 2011 2013 2015E Mobile Desktop
  10. 10. Adults spend more time on mobile media than they do on newspapers and magazines combined.   source: pocketyourshop.wordpress.com
  11. 11. what is mobile? What is mobile? image: flickr.com/photos/guidedbycthulhu SO, WHAT IS MOBILE AGAIN?
  12. 12. source: pocketyourshop.wordpress.com USA 18% 82% Africa 24% 76% Asia 30% 70%
  13. 13. This is up 192.5%since 2011. source: pocketyourshop.wordpress.com
  14. 14. 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
  15. 15. 99% of smartphone owners use their mobile browser at least once a day.  source: pocketyourshop.wordpress.com
  16. 16. 46% of consumers will NOT return to a mobile site that is not working properly. source: pocketyourshop.wordpress.com
  17. 17. 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
  18. 18. 39% of business do nothing to make their site mobile-ready. source: pocketyourshop.wordpress.com
  19. 19. 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
  20. 20. SEARCH
  21. 21. 95% of mobile users use their devices for local search.  source: pocketyourshop.wordpress.com
  22. 22. 52% of all local searches are done from a mobile device. source: pocketyourshop.wordpress.com
  23. 23. source: pocketyourshop.wordpress.com 3 out of every 5 searches are conducted on a mobile device. 
  24. 24. source: pocketyourshop.wordpress.com 9 out of every 10 searches mobile phone searches result in a purchase or visit. 
  25. 25. DIRECTV
  26. 26. DO YOU HAVE A WEBSITE? “You need to get your content onto mobile devices. Period.” — Karen McGrane
  27. 27. WHO DECIDES WHAT MATTERS? image: flickr.com/photos/d_space
  28. 28. MOBILE IS SOCIAL image: flickr.com/photos/strandloper/
  29. 29. source: allfacebook.com
  30. 30. source: allfacebook.com
  31. 31. 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
  32. 32. 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
  33. 33. WHAT ABOUT CONTEXT? image: flickr.com/photos/kattebelletje/
  34. 34. WHAT ABOUT CONTEXT? image: flickr.com/photos/piblet
  35. 35. ONE SITE Examples of diffent sites on different platform
  36. 36. MANY DEVICES
  37. 37. image: flickr.com/photos/cannedtuna THERE IS NO SUCH A THING AS MOBILE INFORMATION ARCHITECTURE
  38. 38. WHAT IS IA? The structural design of shared information environments. source: en.wikipedia.org/wiki/Information_architecture
  39. 39. CROSS-CHANNEL IA BLUEPRINT image: tylertate.com/blog/2012/02/21/cross-channel-ia-blueprint.html
  40. 40. image: journalofia.org/volume1/issue1/02-brugnoli/jofia-0101-02-brugnoli.pdf TOUCHPOINTS MATRIX
  41. 41. 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
  42. 42. DESKTOP
  43. 43. TABLET
  44. 44. MOBILE
  45. 45. 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
  46. 46. MOBILE PATTERNS - HIERARCHY source: uxbooth.com
  47. 47. MOBILE PATTERNS - HIERARCHY
  48. 48. MOBILE PATTERNS - HUB & SPOKE source: uxbooth.com
  49. 49. MOBILE PATTERNS - HUB & SPOKE
  50. 50. MOBILE PATTERNS - NESTED DOLL source: uxbooth.com
  51. 51. MOBILE PATTERNS - NESTED DOLL
  52. 52. MOBILE PATTERNS - TABBED VIEW source: uxbooth.com
  53. 53. MOBILE PATTERNS - TABBED VIEW
  54. 54. MOBILE PATTERNS - BENTO BOX source: uxbooth.com
  55. 55. MOBILE PATTERNS - BENTO BOX
  56. 56. MOBILE PATTERNS - FILTERED VIEW source: uxbooth.com
  57. 57. MOBILE PATTERNS - FILTERED VIEW Filter Filter
  58. 58. image: flickr.com/photos/10ch MANAGING INFORMATION TO CREATE MEANING SENSE-MAKING
  59. 59. CONTENT = INFORMATION “Typically information foraging must be analysed as decision making under uncertainty” — Peter Pirolli
  60. 60. PROGRESSIVE DISCLOSURE
  61. 61. WAYFINDING FOR SENSEMAKING
  62. 62. THE HOMEPAGE IS DEAD
  63. 63. image: martinbelam.com THE BUZZFEED ARTICLE
  64. 64. image: martinbelam.com THE NYTIMES REPORT
  65. 65. image: martinbelam.com
  66. 66. ACTUALLY, NOT YET
  67. 67. THERE IS NO SUCH A THING AS MOBILE CONTENT STRATEGY image: abookapart.com
  68. 68. 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.
  69. 69. ADAPTIVE CONTENT Reusable Strong structure Independent of presentation layer Metadata Content Management System (CMS)
  70. 70. 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.
  71. 71. REUSABLE CONTENT Find examples
  72. 72. CONTENT MODEL
  73. 73. 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
  74. 74. 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)
  75. 75. METADATA image: http://dev.npr.org/#station-finder-api-examples
  76. 76. THE INTERNET IN YOUR POCKET image: techpinions.com
  77. 77. THE FUTURE WAS YESTERDAY
  78. 78. THE FUTURE IS YESTERDAY image: slashgear.com
  79. 79. BTW image: flickr.com/photos/gregoryjordan
  80. 80. STEPHEN HAY
  81. 81. thank you alberta soranzo | @albertatrebla | wearefriday.com
  82. 82. 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/
  1. A particular slide catching your eye?

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

×