Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Information Architecture: The Journey, The Destination, The Return Trip

621 views

Published on

Slides from the 2014 Cascade User Conference.

  • Be the first to comment

Information Architecture: The Journey, The Destination, The Return Trip

  1. 1. INFORMATION ARCHITECTURE THE JOURNEY THE DESTINATION THE RETURN TRIP Fran Zablocki • April 23, 2014 mStoner Tuesday, September 16, 14
  2. 2. INFORMATION ARCHITECTURE INTRODUCTION DEFINITION ELEMENTS PROCESS IA PRACTICE ON CAMPUS mStoner Tuesday, September 16, 14
  3. 3. INTRODUCTION DEFINITION ELEMENTS PROCESS IA PRACTICE ON CAMPUS mStoner INFORMATION ARCHITECTURE Tuesday, September 16, 14
  4. 4. INTRODUCTION ABOUT ME ABOUT THIS PRESENTATION DEFINITION DEFINITION mStoner Tuesday, September 16, 14
  5. 5. m Fran Zablocki Strategist at mStoner ABOUT ME Tuesday, September 16, 14
  6. 6. m Twitter: @Zablocki Hashtag: #CSUC14 ABOUT THIS PRESENTATION Tuesday, September 16, 14
  7. 7. mStoner INFORMATION ARCHITECTURE INTRODUCTION DEFINITION ELEMENTS PROCESS IA PRACTICE ON CAMPUS Tuesday, September 16, 14
  8. 8. INTRODUCTION DEFINITION ELEMENTS PROCESS CONTEXT USER EXPERIENCE DISCIPLINES Tuesday, September 16, 14
  9. 9. m CONTEXT The structured design of shared information environments. Source: IA for the WWW, Morville & Rosenfeld, 2006 INFORMATION ARCHITECTURE IS: Tuesday, September 16, 14
  10. 10. m CONTEXT The combination of organization, labeling, search, and navigation systems within web sites and intranets. Source: IA for the WWW, Morville & Rosenfeld, 2006 INFORMATION ARCHITECTURE IS: Tuesday, September 16, 14
  11. 11. m CONTEXT The art and science of shaping information products and experiences to support usability and findability. Source: IA for the WWW, Morville & Rosenfeld, 2006 INFORMATION ARCHITECTURE IS: Tuesday, September 16, 14
  12. 12. “The work we do involves high levels of abstraction, ambiguity, and occasionally !absurdity, and to some degree we’re all still making it up as we go along.” — Peter Morville & Louis Rosenfeld, Information Architecture for the World Wide Web, 2006 Tuesday, September 16, 14
  13. 13. CONTEXT How do we make sense of all of this? m Tuesday, September 16, 14
  14. 14. INFORMATION VS. PHYSICAL m ARCHITECTURE Planned Structure Form & Function Designated Pathways But the analogy only gets so far... CONTEXT Tuesday, September 16, 14
  15. 15. Most buildings aren’t designed to be entered via: • The window • The ceiling • The plumbing But most websites have to be. http://farm5.staticflickr.com/4019/4684666416_1750a85773.jpg Tuesday, September 16, 14
  16. 16. HISTORY DEFINITION ELEMENTS PROCESS CONTEXT USER EXPERIENCE DISCIPLINES Tuesday, September 16, 14
  17. 17. m The Elements of User Experience Jesse James Garrett A Visual Model to Make Sense of a Rapidly Evolving Field Because IA is a piece of a much bigger puzzle, we need to understand how all the pieces fit together. USER EXPERIENCE OUR MODEL Tuesday, September 16, 14
  18. 18. Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf Tuesday, September 16, 14
  19. 19. Source: http://www.jjg.net/elements/pdf/elements.pdf Tuesday, September 16, 14
  20. 20. Source: http://www.jjg.net/elements/pdf/elements.pdf Tuesday, September 16, 14
  21. 21. m USER Strategy EXPERIENCE Tuesday, September 16, 14
  22. 22. What do your visitors need to do? Research Compare Apply Donate Contact m USER EXPERIENCE STRATEGY: USER NEEDS Tuesday, September 16, 14
  23. 23. What do your visitors need to know? Why is your school is a good fit for me? Who teaches and learns at your school? How can I apply? When should I apply? What’s the latest news? Where are you located? m USER EXPERIENCE STRATEGY: USER NEEDS Tuesday, September 16, 14
  24. 24. What purpose does this site serve? To sell your institution to prospective students. To encourage alumni engagement. To provide employees with resources. m USER EXPERIENCE STRATEGY: SITE OBJECTIVES Tuesday, September 16, 14
  25. 25. STRATEGY: SITE OBJECTIVES What business objective does the site meet? Increase applications. Increase donations. Decrease time spent on information requests. m USER EXPERIENCE Tuesday, September 16, 14
  26. 26. Tuesday, September 16, 14
  27. 27. Tuesday, September 16, 14
  28. 28. Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf Tuesday, September 16, 14
  29. 29. Source: http://www.jjg.net/elements/pdf/elements.pdf Tuesday, September 16, 14
  30. 30. m USER Scope EXPERIENCE Tuesday, September 16, 14
  31. 31. m What features will the site need to include? Search Social Media Video Forms Logins USER EXPERIENCE SCOPE: FUNCTIONAL SPECIFICATIONS Tuesday, September 16, 14
  32. 32. m SCOPE: CONTENT SPECIFICATIONS What content will the site need to include? Notifications Events News Testimonials Reference USER EXPERIENCE Tuesday, September 16, 14
  33. 33. Tuesday, September 16, 14
  34. 34. Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf Tuesday, September 16, 14
  35. 35. Source: http://www.jjg.net/elements/pdf/elements.pdf Tuesday, September 16, 14
  36. 36. m USER Structure EXPERIENCE Tuesday, September 16, 14
  37. 37. Information architecture is the structure of content. It is the structure, order, and hierarchy of content labels and categories. m STRUCTURE: INFORMATION ARCHITECTURE USER EXPERIENCE Source: http://www.jjg.net/elements/pdf/elements.pdf Tuesday, September 16, 14
  38. 38. m STRUCTURE: INTERACTION DESIGN Interaction design is the structure of experience. It’s the hover state, slide out effect and behavior of that structure. USER EXPERIENCE Source: http://www.jjg.net/elements/pdf/elements.pdf Tuesday, September 16, 14
  39. 39. Tuesday, September 16, 14
  40. 40. Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf Tuesday, September 16, 14
  41. 41. Source: http://www.jjg.net/elements/pdf/elements.pdf Tuesday, September 16, 14
  42. 42. m USER Skeleton EXPERIENCE Tuesday, September 16, 14
  43. 43. Decisions: What font will we use for the navigation? How much space (kerning) between the navigation items? How will different navigation elements be placed in relation to one another (alignment)? m SKELETON: INFORMATION DESIGN USER EXPERIENCE Tuesday, September 16, 14
  44. 44. m SKELETON: NAVIGATION DESIGN Decisions: Carets or Bullets or Arrows to represent child links? Bold or Underline to represent what page people are on? USER EXPERIENCE Tuesday, September 16, 14
  45. 45. Decisions: Does the navigation expand on hover or click? Does the navigation slide out sideways, or down? How many levels are shown at once? m SKELETON: INTERFACE DESIGN USER EXPERIENCE Tuesday, September 16, 14
  46. 46. Tuesday, September 16, 14
  47. 47. Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf Tuesday, September 16, 14
  48. 48. Source: http://www.jjg.net/elements/pdf/elements.pdf Tuesday, September 16, 14
  49. 49. m USER Surface EXPERIENCE Tuesday, September 16, 14
  50. 50. m SURFACE: VISUAL DESIGN Every layer below contributes to visual design. Each layer is invisible to the visitor - they just see ‘the design’. Even as site creators, we don’t typically think of each of these components in isolation. USER EXPERIENCE Tuesday, September 16, 14
  51. 51. Visual Design Everything Else Tuesday, September 16, 14
  52. 52. Tuesday, September 16, 14
  53. 53. INTRODUCTION DEFINITION INFORMATION ARCHITECTURE ELEMENTS PROCESS IA PRACTICE ON CAMPUS mStoner Tuesday, September 16, 14
  54. 54. DEFINITION ELEMENTS PROCESS SCHEMES & STRUCTURES TAXONOMY & VOCABULARY Tuesday, September 16, 14
  55. 55. m SCHEMES & STRUCTURES EXACT ORGANIZATIONAL SCHEMES Alphabetical Chronological Procedural Tuesday, September 16, 14
  56. 56. Tuesday, September 16, 14
  57. 57. Tuesday, September 16, 14
  58. 58. Tuesday, September 16, 14
  59. 59. m AMBIGUOUS ORGANIZATIONAL SCHEMES Topical Tells the visitor what the most important categories of information are. SCHEMES & STRUCTURES Tuesday, September 16, 14
  60. 60. Tuesday, September 16, 14
  61. 61. m AMBIGUOUS ORGANIZATIONAL SCHEMES Audience Asks the user ‘Who are you?’, ‘How do you identify yourself?’ SCHEMES & STRUCTURES Tuesday, September 16, 14
  62. 62. Tuesday, September 16, 14
  63. 63. m AMBIGUOUS ORGANIZATIONAL SCHEMES Task Designed to allow someone to accomplish something. Uses action verbs in labels. SCHEMES & STRUCTURES Tuesday, September 16, 14
  64. 64. Tuesday, September 16, 14
  65. 65. m DEPTH OF STRUCTURE Global Local Hybrid (MegaMenu) SCHEMES & STRUCTURES Tuesday, September 16, 14
  66. 66. Global Navigation Tuesday, September 16, 14
  67. 67. Local Navigation Tuesday, September 16, 14
  68. 68. Hybrid Mega-Menu Navigation Tuesday, September 16, 14
  69. 69. m BREADTH OF STRUCTURE Contextual Supplementary Convenience Site Map SCHEMES & STRUCTURES Tuesday, September 16, 14
  70. 70. Contextual Navigation Tuesday, September 16, 14
  71. 71. Supplemental Navigation Tuesday, September 16, 14
  72. 72. Convenience Navigation Tuesday, September 16, 14
  73. 73. Site Map Tuesday, September 16, 14
  74. 74. DEFINITION ELEMENTS PROCESS SCHEMES & STRUCTURES TAXONOMY & VOCABULARY Tuesday, September 16, 14
  75. 75. m TAXONOMY TIPS Know Your Audience Be Efficient Anticipate what the user will expect to see TAXONOMY & VOCABULARY Tuesday, September 16, 14
  76. 76. The label says research - where does it lead? Tuesday, September 16, 14
  77. 77. Tuesday, September 16, 14
  78. 78. CONTROLLED VOCABULARY m Uniform method of describing things Provides quality and consistency Consistency means predictability ‘About’ or ‘About Us’? ‘Admission’ or ‘Admissions’ TAXONOMY & VOCABULARY Tuesday, September 16, 14
  79. 79. mStoner INFORMATION ARCHITECTURE INTRODUCTION DEFINITION ELEMENTS PROCESS IA PRACTICE ON CAMPUS Tuesday, September 16, 14
  80. 80. ELEMENTS PROCESS DOCUMENTATION TOOLS Tuesday, September 16, 14
  81. 81. m IA LISTING Easy to read Easier to modify / maintain A good for representing the depth of the site. Organized by numerical, legal structure DOCUMENTATION Tuesday, September 16, 14
  82. 82. Tuesday, September 16, 14
  83. 83. m IA DIAGRAM / SITEMAP A way to visually represent the IA. A good way to represent the breadth of the site. Good at showing peer relationships such as related pages. More work to maintain. DOCUMENTATION Tuesday, September 16, 14
  84. 84. Admissions Why Attend University of Idaho? Undergraduate Admissions Graduate Admissions Law School Admissions Transfer Admissions Contact Us Visit Us How to Apply Dates & Deadlines Admission Requirements Cost & Financial Aid Majors & Minors Frequently Asked Questions Visit Us Information for: > Accepted Students > First Year Students > Transfer Students > International Students > Non-degree Students Non-degree Admissions Tuesday, September 16, 14
  85. 85. ELEMENTS PROCESS DOCUMENTATION TOOLS Tuesday, September 16, 14
  86. 86. m OmniOutliner Google Docs UXPin Any Word Processor or Spreadsheet TOOLS Tuesday, September 16, 14
  87. 87. Tuesday, September 16, 14
  88. 88. Tuesday, September 16, 14
  89. 89. Tuesday, September 16, 14
  90. 90. mStoner INFORMATION ARCHITECTURE INTRODUCTION DEFINITION ELEMENTS PROCESS IA PRACTICE ON CAMPUS Tuesday, September 16, 14
  91. 91. PROCESS IA PRACTICE ON CAMPUS STAFFING EVANGELISM PROFESSIONAL DEVELOPMENT Tuesday, September 16, 14
  92. 92. STAFFING WHO SHOULD DO IT? Ideal: Dedicated Information Architect on staff Reality: Key point person for IA Goal: All staff associated with the web need to be versed Tuesday, September 16, 14
  93. 93. BE A CHAMPION Demand that IA be taken seriously Use the tools at your disposal Read, watch, listen, learn - there is an entire IA community out there EVANGELISM Tuesday, September 16, 14
  94. 94. PROFESSIONAL DEVELOPMENT IA AT YOUR SCHOOL Establish IA as a real thing, just like design, development, and content Use case studies from industry Insert IA into your training regimen Build up expertise among staff who work in the UX family (hint: that’s everybody) Tuesday, September 16, 14
  95. 95. RESOURCES Information Architecture for the World Wide Web (Book): http://amzn.to/3RqL7y Elements of User Experience (Book) http://amzn.to/18Q4fA4 Jesse James Garrett http://www.jjg.net Karen McGrane http://karenmcgrane.com PROFESSIONAL DEVELOPMENT Tuesday, September 16, 14
  96. 96. RESOURCES Adaptive Path adaptivepath.com/events-training Smashing Magazine smashingmagazine.com A List Apart’s UX section alistapart.com/topics/user-experience mStoner Blog mstoner.com/team/fran-zablocki/ PROFESSIONAL DEVELOPMENT Tuesday, September 16, 14
  97. 97. THANK YOU! QUESTIONS? HELP US HELP YOU WITH IA WWW.MSTONER.COM FRAN.ZABLOCKI@MSTONER.COM mStoner Tuesday, September 16, 14

×