the web you were used to is gone - ux australia 2014
Post on 15-Jan-2015
6.080 Views
Preview:
DESCRIPTION
TRANSCRIPT
Architecture and strategy for your mobile content !
!
!!!
UX Australia — Sydney, August 25-29 alberta soranzo | @albertatrebla | wearefriday.com
THE WEB YOU WERE USED TO IS GONE
CC image: wikipedia.org/wiki/Interface_Message_Processor
REMEMBER THE INTERNET?
CC image: http://en.wikipedia.org/wiki/Modem
THE INTERNET IS IN YOUR POCKET
image: http://gizmodo.com/5918418/giant-smartphones-in-skinny-jeans-a-photoshoot
image: huffingtonpost.com (Alamy)
WHAT IS MOBILE?
image: flickr.com/photos/justard/12300416746/
SO, WHAT IS MOBILE AGAIN?
image: flickr.com/photos/guidedbycthulhu
image: huffpost.com
image: kellianderson.com/
Inte
rnet
Use
rs (M
M)
0
500
1000
1500
2000
2007 2009 2011 2013 2015E
Mobile Desktop
source: pocketyourshop.wordpress.com
source: pocketyourshop.wordpress.com
USA
18%
82%
Africa
24%
76%
Asia
30%
70%
MOBILE VS DESKTOP
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
5.3%.9%
South America
16.6%4.8%
Africa
12.8%2.8%
Oceania
source: mobithinking.com
Country % mobile-only usersEgypt 70%
India 59%
South Africa 57%
Ghana 55%
Kenya 54%
Nigeria 50%
Indonesia 44%
Thailand 32%
China 30%
US 25%
UK 22%
Russia 19%
60% 95% 90%SEARCH LOCAL SEARCH VISIT OR PURCHASE
source: pocketyourshop.wordpress.com
46%74% 39%WILL NOT RETURNWAIT 5 SEC DOES NOTHING
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: hercampus.com
source: allfacebook.com
source: allfacebook.com
“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/
image: flickr.com/photos/piblet
WHAT ABOUT CONTEXT?
image: https://www.flickr.com/photos/robef/8091483876
ONE SITE
image: flickr.com/photos/cannedtuna
INFORMATION ARCHITECTURE
WHAT IS INFORMATION ARCHITECTURE?
The structural design of shared information environments.
source: en.wikipedia.org/wiki/Information_architecture
image: tylertate.com/blog/2012/02/21/cross-channel-ia-blueprint.html
image: journalofia.org/volume1/issue1/02-brugnoli/jofia-0101-02-brugnoli.pdf
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
MOBILE PATTERNS
image: Android Design Patterns
STRUCTURE AS DESIGN PATTERNSWAYFINDING
MOBILE PATTERNS - HIERARCHY
MOBILE PATTERNS - HUB & SPOKE
MOBILE PATTERNS - NESTED DOLL
MOBILE PATTERNS - TABBED VIEW
MOBILE PATTERNS - BENTO BOX
Filter Filter
MOBILE PATTERNS - FILTERED VIEW
image: flickr.com/photos/10ch
MANAGING INFORMATION TO CREATE MEANINGSENSE-MAKING
“Typically information foraging must be analysed as decision making under uncertainty” — Peter Pirolli
CC image: flickr.com/photos/cafnr/14352437798
PROGRESSIVE DISCLOSURE
THE HOMEPAGE IS DEAD
image: martinbelam.com
image: martinbelam.com
image: martinbelam.com
ACTUALLY, NOT DEAD YET
ADAPTIVE CONTENT
• Reusable • Strong structure • Independent of presentation layer • Metadata • Content Management System (CMS)
ADAPTIVE
STRONG STRUCTURE
INDEPENDENT
NEWSLETTER SIGNUP
GLOBAL NAVIGATION AND SERVICE LINKS SEARCH
CAROUSEL PHOTO
FEATURED THING (3 WORDS MAX)
THING YOU WANT TO SHOW (3 WORDS MAX)
SECONDARY SEARCH
SLIDE TITLE (10 WORDS MAX)
SLIDE TEASER (50 WORDS MAX)
LIST OF OTHER THINGS (10 LINKS x 4 WORDS MAX)
NEWS (5 LINKS x 10 WORDS MAX)
NAV SEARCH (SITE AND PUBS)
SLIDE TEASER SHORT(10 WORDS MAX)
THING YOU WANT TO SHOW (3 WORDS MAX)
LIST OF OTHER THINGS
(5 LINKS x 4 WORDS MAX)
NEWS (5 LINKS x 10 WORDS
MAX)
CAROUSEL PHOTO THUMB
THING YOU WANT TO SHOW (3 WORDS MAX)
NEWSLETTER SIGNUP
OTHER THING (50 WORDS MAX)
OTHER THING (50 WORDS MAX)
OTHER THING (50 WORDS MAX)
GLOBAL NAVIGATION AND SERVICE LINKS SEARCH
LOGO AND SLOGAN
MAIN NAVIGATION
CAROUSEL PHOTO
FEATURED THING (3 WORDS MAX)
FEATURED THING (3 WORDS MAX)
SECONDARY SEARCH
SLIDE TITLE (10 WORDS MAX)
SLIDE TEASER (50 WORDS MAX)
THING YOU WANT TO SHOW (100 WORDS MAX)
THING YOU WANT TO SHOW (10 LINKS x 4 WORDS MAX)
THING YOU WANT TO SHOW (100 WORDS MAX)
THING YOU WANT TO SHOW (100 WORDS MAX)
OTHER THING (50 WORDS MAX)
OTHER THING (50 WORDS MAX)
OTHER THING (50 WORDS MAX)
NEWS (5 LINKS x 10 WORDS MAX)
INDEPENDENT
NEWSLETTER SIGNUP
GLOBAL NAVIGATION AND SERVICE LINKS SEARCH
CAROUSEL PHOTO
FEATURED THING (3 WORDS MAX)
THING YOU WANT TO SHOW (3 WORDS MAX)
SECONDARY SEARCH
SLIDE TITLE (10 WORDS MAX)
SLIDE TEASER (50 WORDS MAX)
LIST OF OTHER THINGS (10 LINKS x 4 WORDS MAX)
NEWS (5 LINKS x 10 WORDS MAX)
NAV SEARCH (SITE AND PUBS)
SLIDE TEASER SHORT(10 WORDS MAX)
THING YOU WANT TO SHOW (3 WORDS MAX)
LIST OF OTHER THINGS
(5 LINKS x 4 WORDS MAX)
NEWS (5 LINKS x 10 WORDS
MAX)
CAROUSEL PHOTO THUMB
THING YOU WANT TO SHOW (3 WORDS MAX)
NEWSLETTER SIGNUP
OTHER THING (50 WORDS MAX)
OTHER THING (50 WORDS MAX)
OTHER THING (50 WORDS MAX)
GLOBAL NAVIGATION AND SERVICE LINKS SEARCH
LOGO AND SLOGAN
MAIN NAVIGATION
CAROUSEL PHOTO
FEATURED THING (3 WORDS MAX)
FEATURED THING (3 WORDS MAX)
SECONDARY SEARCH
SLIDE TITLE (10 WORDS MAX)
SLIDE TEASER (50 WORDS MAX)
THING YOU WANT TO SHOW (100 WORDS MAX)
THING YOU WANT TO SHOW (10 LINKS x 4 WORDS MAX)
THING YOU WANT TO SHOW (100 WORDS MAX)
THING YOU WANT TO SHOW (100 WORDS MAX)
OTHER THING (50 WORDS MAX)
OTHER THING (50 WORDS MAX)
OTHER THING (50 WORDS MAX)
NEWS (5 LINKS x 10 WORDS MAX)
INDEPENDENT
NEWSLETTER SIGNUP
GLOBAL NAVIGATION AND SERVICE LINKS SEARCH
CAROUSEL PHOTO
FEATURED THING (3 WORDS MAX)
THING YOU WANT TO SHOW (3 WORDS MAX)
SECONDARY SEARCH
SLIDE TITLE (10 WORDS MAX)
SLIDE TEASER (50 WORDS MAX)
LIST OF OTHER THINGS (10 LINKS x 4 WORDS MAX)
NEWS (5 LINKS x 10 WORDS MAX)
NAV SEARCH (SITE AND PUBS)
SLIDE TEASER SHORT(10 WORDS MAX)
THING YOU WANT TO SHOW (3 WORDS MAX)
LIST OF OTHER THINGS
(5 LINKS x 4 WORDS MAX)
NEWS (5 LINKS x 10 WORDS
MAX)
CAROUSEL PHOTO THUMB
THING YOU WANT TO SHOW (3 WORDS MAX)
NEWSLETTER SIGNUP
OTHER THING (50 WORDS MAX)
OTHER THING (50 WORDS MAX)
OTHER THING (50 WORDS MAX)
GLOBAL NAVIGATION AND SERVICE LINKS SEARCH
LOGO AND SLOGAN
MAIN NAVIGATION
CAROUSEL PHOTO
FEATURED THING (3 WORDS MAX)
FEATURED THING (3 WORDS MAX)
SECONDARY SEARCH
SLIDE TITLE (10 WORDS MAX)
SLIDE TEASER (50 WORDS MAX)
THING YOU WANT TO SHOW (100 WORDS MAX)
THING YOU WANT TO SHOW (10 LINKS x 4 WORDS MAX)
THING YOU WANT TO SHOW (100 WORDS MAX)
THING YOU WANT TO SHOW (100 WORDS MAX)
OTHER THING (50 WORDS MAX)
OTHER THING (50 WORDS MAX)
OTHER THING (50 WORDS MAX)
NEWS (5 LINKS x 10 WORDS MAX)
REUSABLE
METADATA
image: http://dev.npr.org/#station-finder-api-examples
image: techpinions.com
BTW
image: flickr.com/photos/gregoryjordan
thank youalberta 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 !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/
top related