Internet in your pocket
85
image: flickr.com/photos/gregoryjordan Architecture and strategy for your mobile content alberta soranzo | @albertatrebla THE INTERNET IN YOUR POCKET
-
Upload
alberta-soranzo -
Category
Mobile
-
view
13 -
download
1
description
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/
Transcript of Internet in your pocket
image: flickr.com/photos/gregoryjordan
Architecture and strategy for your mobile content !
!
!!!!
alberta soranzo | @albertatrebla
THE INTERNET IN YOUR POCKET
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
source: pocketyourshop.wordpress.com
14%
86%
By 2014, mobile internet usage will overtake desktop internet usage.
source: pocketyourshop.wordpress.com
Inte
rnet
Use
rs (M
M)
0
500
1000
1500
2000
2007 2009 2011 2013 2015E
Adults spend more time on mobile media than they do on newspapers and magazines combined.
source: pocketyourshop.wordpress.com
what is mobile?
What is mobile?
image: flickr.com/photos/guidedbycthulhu
HOW DO WE USE THE INTERNET?
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
This is up 192.5% since 2011.
source: pocketyourshop.wordpress.com
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 EuropeAsia
Worldwide
South America
Africa Oceania
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: pocketyourshop.wordpress.com
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% Thailand 32%
South Africa 57% China 30%
Ghana 55% US 25%
Kenya 54% UK 22%
Nigeria 50% Russia 19
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
3 out of every 5 searches are conducted on a mobile device.
source: pocketyourshop.wordpress.com
9 out of every 10 mobile phone searches result in a purchase or visit.
source: pocketyourshop.wordpress.com
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
Use
rs (M
M)
0
250
500
750
1000
Q4 12 Q1 13 Q2 13 Q3 13 Q4 13
Mobile Mobile Only
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
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 IA
WHAT IS IA?
The structural design of shared information environments.
source: en.wikipedia.org/wiki/Information_architecture
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 categorization of information into a coherent structure.
source: en.wikipedia.org/wiki/Information_architecture
DESKTOP
TABLET
MOBILE
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 PATTERNSWAYFINDING
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 MEANINGSENSEMAKING
CONTENT = INFORMATION
“Typically information foraging must be analysed as decision making under uncertainty” — Peter Pirolli
WAYFINDING FOR SENSEMAKING
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 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.
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 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.
REUSABLE CONTENT
Find examples
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
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)
METADATA
image: http://dev.npr.org/#station-finder-api-examples
PROGRESSIVE DISCLOSURE
THE HOMEPAGE IS DEAD
image: martinbelam.com
THE BUZZFEED ARTICLE
image: martinbelam.com
THE NYTIMES REPORT
image: martinbelam.com
ACTUALLY, NOT YET
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.
Illustration: Dan Willis
alberta soranzo | @albertatrebla | wearefriday.com
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/
