Your SlideShare is downloading. ×
The web you were used to is gone - UX Australia 2014
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

The web you were used to is gone - UX Australia 2014

6,164
views

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 …

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.

--

UX Australia 2014
Sydney, 25-29 August 2014

Published in: Internet

3 Comments
157 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,164
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
271
Comments
3
Likes
157
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. THE WEB YOU WERE USED TO IS GONE Architecture and strategy for your mobile content ! ! ! ! ! UX Australia — Sydney, August 25-29 alberta soranzo | @albertatrebla | wearefriday.com CC image: wikipedia.org/wiki/Interface_Message_Processor
  • 2. REMEMBER THE INTERNET? CC image: http://en.wikipedia.org/wiki/Modem
  • 3. THE INTERNET IS IN YOUR POCKET image: http://gizmodo.com/5918418/giant-smartphones-in-skinny-jeans-a-photoshoot
  • 4. WHAT IS MOBILE? image: huffingtonpost.com (Alamy) image: flickr.com/photos/justard/12300416746/
  • 5. SO, WHAT IS MOBILE AGAIN? image: flickr.com/photos/guidedbycthulhu
  • 6. image: huffpost.com
  • 7. image: kellianderson.com/
  • 8. Internet Users (MM) 2000 1500 1000 500 0 Mobile Desktop 2007 2009 2011 2013 2015E source: pocketyourshop.wordpress.com
  • 9. MOBILE VS DESKTOP source: pocketyourshop.wordpress.com USA 18% 82% Africa 24% 76% Asia 30% 70%
  • 10. This is up 192.5% since 2011. source: pocketyourshop.wordpress.com
  • 11. MOBILE ONLY PAGEVIEWS 2010 2013 3.7% 12.7% North America 1.5% 8.1% Europe 4.5% 22.9% Asia .9% 5.3% South America 4.8% 16.6% Africa 2.8% 12.8% Oceania
  • 12. source: mobithinking.com Country % mobile-only users Egypt 70% India 59% South Africa 57% Ghana 55% Kenya 54% Nigeria 50% Indonesia 44% Thailand 32% China 30% US 25% UK 22% Russia 19%
  • 13. 60% 95% 90% SEARCH LOCAL SEARCH VISIT OR PURCHASE source: pocketyourshop.wordpress.com
  • 14. 74% 46% 39% WAIT 5 SEC WILL NOT RETURN DOES NOTHING source: pocketyourshop.wordpress.com
  • 15. DO YOU HAVE A WEBSITE? “You need to get your content onto mobile devices. Period.” — Karen McGrane
  • 16. WHO DECIDES WHAT MATTERS? image: flickr.com/photos/d_space
  • 17. MOBILE IS SOCIAL image: hercampus.com
  • 18. source: allfacebook.com
  • 19. source: allfacebook.com
  • 20. “If people want to do something on the internet, they will want to do it using their mobile device. Period.” — Karen McGrane
  • 21. WHAT ABOUT CONTEXT? image: flickr.com/photos/kattebelletje/
  • 22. WHAT ABOUT CONTEXT? image: flickr.com/photos/piblet image: https://www.flickr.com/photos/robef/8091483876
  • 23. ONE SITE
  • 24. image: flickr.com/photos/cannedtuna INFORMATION ARCHITECTURE
  • 25. WHAT IS INFORMATION ARCHITECTURE? The structural design of shared information environments. source: en.wikipedia.org/wiki/Information_architecture
  • 26. image: tylertate.com/blog/2012/02/21/cross-channel-ia-blueprint.html
  • 27. image: journalofia.org/volume1/issue1/02-brugnoli/jofia-0101-02-brugnoli.pdf
  • 28. 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
  • 29. DESKTOP
  • 30. MOBILE PATTERNS image: Android Design Patterns STRUCTURE AS DESIGN PATTERNS WAYFINDING
  • 31. MOBILE PATTERNS - HIERARCHY
  • 32. MOBILE PATTERNS - HUB & SPOKE
  • 33. MOBILE PATTERNS - NESTED DOLL
  • 34. MOBILE PATTERNS - TABBED VIEW
  • 35. MOBILE PATTERNS - BENTO BOX
  • 36. Filter Filter MOBILE PATTERNS - FILTERED VIEW
  • 37. image: flickr.com/photos/10ch MANAGING INFORMATION TO CREATE MEANING SENSE-MAKING
  • 38. “Typically information foraging must be analysed as decision making under uncertainty” — Peter Pirolli
  • 39. CC image: flickr.com/photos/cafnr/14352437798
  • 40. PROGRESSIVE DISCLOSURE
  • 41. THE HOMEPAGE IS DEAD
  • 42. image: martinbelam.com
  • 43. image: martinbelam.com
  • 44. image: martinbelam.com
  • 45. ACTUALLY, NOT DEAD YET
  • 46. image: abookapart.com image: sarawb.com CONTENT STRATEGY
  • 47. ADAPTIVE CONTENT • Reusable • Strong structure • Independent of presentation layer • Metadata • Content Management System (CMS)
  • 48. ADAPTIVE
  • 49. STRONG STRUCTURE
  • 50. INDEPENDENT GLOBAL NAVIGATION AND SERVICE LINKS SEARCH NEWSLETTER SIGNUP SLIDE TITLE (10 WORDS MAX) CAROUSEL PHOTO SLIDE TEASER (50 WORDS MAX) FEATURED THING (3 WORDS MAX) THING YOU WANT TO SHOW (3 WORDS MAX) SECONDARY SEARCH 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) CAROUSEL PHOTO THUMB THING YOU WANT TO SHOW (3 WORDS MAX) THING YOU WANT TO SHOW LIST OF OTHER THINGS (5 LINKS x 4 WORDS MAX) NEWS (5 LINKS x 10 WORDS MAX) (3 WORDS MAX) GLOBAL NAVIGATION AND SERVICE LINKS SEARCH NEWSLETTER SIGNUP OTHER THING (50 WORDS MAX) OTHER THING (50 WORDS MAX) OTHER THING (50 WORDS MAX) 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)
  • 51. INDEPENDENT GLOBAL NAVIGATION AND SERVICE LINKS SEARCH NEWSLETTER SIGNUP SLIDE TITLE (10 WORDS MAX) CAROUSEL PHOTO SLIDE TEASER (50 WORDS MAX) FEATURED THING (3 WORDS MAX) THING YOU WANT TO SHOW (3 WORDS MAX) SECONDARY SEARCH 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) CAROUSEL PHOTO THUMB THING YOU WANT TO SHOW (3 WORDS MAX) THING YOU WANT TO SHOW LIST OF OTHER THINGS (5 LINKS x 4 WORDS MAX) NEWS (5 LINKS x 10 WORDS MAX) (3 WORDS MAX) GLOBAL NAVIGATION AND SERVICE LINKS SEARCH NEWSLETTER SIGNUP OTHER THING (50 WORDS MAX) OTHER THING (50 WORDS MAX) OTHER THING (50 WORDS MAX) 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)
  • 52. INDEPENDENT GLOBAL NAVIGATION AND SERVICE LINKS SEARCH NEWSLETTER SIGNUP SLIDE TITLE (10 WORDS MAX) CAROUSEL PHOTO SLIDE TEASER (50 WORDS MAX) FEATURED THING (3 WORDS MAX) THING YOU WANT TO SHOW (3 WORDS MAX) SECONDARY SEARCH 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) CAROUSEL PHOTO THUMB THING YOU WANT TO SHOW (3 WORDS MAX) THING YOU WANT TO SHOW LIST OF OTHER THINGS (5 LINKS x 4 WORDS MAX) NEWS (5 LINKS x 10 WORDS MAX) (3 WORDS MAX) GLOBAL NAVIGATION AND SERVICE LINKS SEARCH NEWSLETTER SIGNUP OTHER THING (50 WORDS MAX) OTHER THING (50 WORDS MAX) OTHER THING (50 WORDS MAX) 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)
  • 53. REUSABLE
  • 54. METADATA image: http://dev.npr.org/#station-finder-api-examples
  • 55. image: techpinions.com
  • 56. BTW image: flickr.com/photos/gregoryjordan
  • 57. thank you alberta soranzo | @albertatrebla | wearefriday.com
  • 58. 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/