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. Webinar — May 28th, 2014 http://www.architecta.it/imparare/internet-in-tasca/

1. image: flickr.com/photos/gregoryjordan
Architecture and strategy for your mobile content
!
!
!
!
!
!
alberta soranzo | @albertatrebla
THE INTERNET IN YOUR POCKET

2. REMEMBER THE INTERNET?
image: wtfjeans.com

3. THE INTERNET IS IN YOUR POCKET
image: wtfjeans.com

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

5. USE

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

7. source: pocketyourshop.wordpress.com
14%
86%

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

9. InternetUsers(MM)
0
500
1000
1500
2000
2007 2009 2011 2013 2015E

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

11. what is mobile?
What is mobile?
image: flickr.com/photos/guidedbycthulhu
HOW DO WE USE THE INTERNET?

12. 18% of all web traffic in the U.S. is mobile
traffic. That number skyrockets to 24% in Africa,
and 30% in Asia.
source: pocketyourshop.wordpress.com

13. This is up 192.5%since 2011.
source: pocketyourshop.wordpress.com

14. MOBILE ONLY PAGEVIEWS
12.7%3.7% 8.1%1.5% 22.9%4.5%
12.8%2.8%16.6%4.8%5.3%.9%
14.2%2.9%
2010 2013
North America Europe
Asia
Worldwide
South America
Africa Oceania

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

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

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. 39% of business do nothing to make
their site mobile-ready.
source: pocketyourshop.wordpress.com

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. SEARCH

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

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

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

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

26. DO YOU HAVE A WEBSITE?
“You need to get your content onto mobile
devices. Period.”
— Karen McGrane

27. WHO DECIDES WHAT MATTERS?
image: flickr.com/photos/d_space

28. MOBILE IS SOCIAL
image: flickr.com/photos/strandloper/

29. source: allfacebook.com

30. source: allfacebook.com

31. Users(MM)
0
250
500
750
1000
Q4 12 Q1 13 Q2 13 Q3 13 Q4 13
Mobile Mobile Only
FACEBOOK

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. WHAT ABOUT CONTEXT?
image: flickr.com/photos/kattebelletje/

34. WHAT ABOUT CONTEXT?
image: flickr.com/photos/piblet

35. ONE SITE
Examples of diffent sites on different platform

36. MANY DEVICES

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

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

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

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

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. DESKTOP

43. TABLET

44. MOBILE

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. MOBILE PATTERNS - HIERARCHY
source: uxbooth.com

47. MOBILE PATTERNS - HIERARCHY

48. MOBILE PATTERNS - HUB & SPOKE
source: uxbooth.com

49. MOBILE PATTERNS - HUB & SPOKE

50. MOBILE PATTERNS - NESTED DOLL
source: uxbooth.com

51. MOBILE PATTERNS - NESTED DOLL

52. MOBILE PATTERNS - TABBED VIEW
source: uxbooth.com

53. MOBILE PATTERNS - TABBED VIEW

54. MOBILE PATTERNS - BENTO BOX
source: uxbooth.com

55. MOBILE PATTERNS - BENTO BOX

56. MOBILE PATTERNS - FILTERED VIEW
source: uxbooth.com

57. MOBILE PATTERNS - FILTERED VIEW
Filter Filter

58. image: flickr.com/photos/10ch
MANAGING INFORMATION TO CREATE MEANING
SENSEMAKING

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

60. WAYFINDING FOR SENSEMAKING

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

62. 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.

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

64. 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.

65. REUSABLE CONTENT
Find examples

66. 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

67. 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)

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

69. PROGRESSIVE DISCLOSURE

70. THE HOMEPAGE IS DEAD

71. image: martinbelam.com
THE BUZZFEED ARTICLE

72. image: martinbelam.com
THE NYTIMES REPORT

73. image: martinbelam.com

74. ACTUALLY, NOT YET

79. THE INTERNET IN YOUR POCKET
image: techpinions.com

80. THE FUTURE WAS YESTERDAY

81. THE FUTURE IS YESTERDAY
image: slashgear.com

82. BTW
image: flickr.com/photos/gregoryjordan

83. STEPHEN HAY

84. thank you.
Illustration: Dan Willis
alberta soranzo | @albertatrebla | wearefriday.com

85. 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/