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

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

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

18. MOBILE IS SOCIAL image: hercampus.com

19. source: allfacebook.com

20. source: allfacebook.com

21. “If people want to do something on the internet, they will want to do it using their mobile device. Period.” — Karen McGrane

22. WHAT ABOUT CONTEXT? image: flickr.com/photos/kattebelletje/

23. WHAT ABOUT CONTEXT? image: flickr.com/photos/piblet image: https://www.flickr.com/photos/robef/8091483876

24. ONE SITE

26. image: flickr.com/photos/cannedtuna INFORMATION ARCHITECTURE

27. WHAT IS INFORMATION ARCHITECTURE? The structural design of shared information environments. source: en.wikipedia.org/wiki/Information_architecture

28. image: tylertate.com/blog/2012/02/21/cross-channel-ia-blueprint.html

29. image: journalofia.org/volume1/issue1/02-brugnoli/jofia-0101-02-brugnoli.pdf

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

31. DESKTOP

34. MOBILE PATTERNS image: Android Design Patterns STRUCTURE AS DESIGN PATTERNS WAYFINDING

35. MOBILE PATTERNS - HIERARCHY

36. MOBILE PATTERNS - HUB & SPOKE

37. MOBILE PATTERNS - NESTED DOLL

38. MOBILE PATTERNS - TABBED VIEW

39. MOBILE PATTERNS - BENTO BOX

40. Filter Filter MOBILE PATTERNS - FILTERED VIEW

41. image: flickr.com/photos/10ch MANAGING INFORMATION TO CREATE MEANING SENSE-MAKING

42. “Typically information foraging must be analysed as decision making under uncertainty” — Peter Pirolli

43. CC image: flickr.com/photos/cafnr/14352437798

44. PROGRESSIVE DISCLOSURE

45. THE HOMEPAGE IS DEAD

46. image: martinbelam.com

49. ACTUALLY, NOT DEAD YET

54. image: abookapart.com image: sarawb.com CONTENT STRATEGY

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

57. ADAPTIVE

58. STRONG STRUCTURE

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

62. REUSABLE

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

65. image: techpinions.com

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

69. thank you alberta soranzo | @albertatrebla | wearefriday.com

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

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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (14)

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

Similar to The web you were used to is gone - UX Australia 2014 (20)

More from Alberta Soranzo

More from Alberta Soranzo (20)

Recently uploaded

Recently uploaded (20)

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