O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

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

  • Entre para ver os comentários

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

  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/

×