Information Architecture: The Journey, Destination, and Return Trip

1,391 views

Published on

“Our site needs to be easier to use.”
“I just want to be able to get to the things that are most important to me.”
“It’s so hard to find anything on our site, and I’ve worked here for 15 years. I can’t imagine how someone who is just looking at it for the first time would find anything.”
Sound familiar?
These statements highlight just some of the common problems related to a website’s information architecture (IA). The way you organize, label, sequence, and group elements on your site — from the smallest files and paragraphs to pages and entire microsites — all of it is managed through information architecture. The better your site IA, the easier it is for visitors to find information and engage with your institution.
What You’ll Learn:
You will gain a comprehensive understanding of information architecture best practices in higher education. We will answer questions that cover a range of topics, including user behavior, labeling, user experience, training, governance, top-down IA, bottom-up IA, and staff and professional development.
What is information architecture? What isn’t information architecture?
Why can’t visitors find anything on my site?
What are some common mistakes and solutions?
What paths do people commonly take to find information?
What should I call this link?
Where does IA fit into user experience (UX) and how can it improve overall UX?
How can I educate people on my campus about what IA is?
What does a professional IA practice look like? Which staff positions should be responsible for IA?
What do I do beyond the first level of navigation?
How do I turn this wall of text into something usable?
What skills are required for working on information architecture?
What are some good resources for IA? Where do I start?

Presenter:
Fran Zablocki has worked with information architecture in some capacity for his entire career. He revamped the IA for Nazareth College’s entire website in 2008, and reimagined the IA for SUNY Geneseo’s alumni website and online community in 2011. He currently works on IA with schools nationwide as part of his role at mStoner, including Miami University in Ohio, Whittier College, Webster University, the American University of Paris, Salem State University, and the State University of New York. Fran holds a bachelor’s degree in business with a specialization in technical writing and information design, and an MBA in marketing and information systems.

Published in: Technology, Education

Information Architecture: The Journey, Destination, and Return Trip

  1. 1. THE JOURNEY INFORMATION ARCHITECTURE THE DESTINATION THE RETURN TRIP Fran Zablocki • November 20, 2013 Friday, November 22, 13 mStoner
  2. 2. INTRODUCTION WHAT IS IA? INFORMATION ARCHITECTURE ELEMENTS OF IA FUTURE OF IA IA AS PRACTICE Friday, November 22, 13
  3. 3. INTRODUCTION WHAT IS IA? IA ELEMENTS OF IA THE FUTURE OF IA THE IA PRACTICE Friday, November 22, 13
  4. 4. ABOUT ME INTRODUCTION ABOUT THIS PRESENTATION WHAT IS IA? ELEMENTS OF IA Friday, November 22, 13
  5. 5. ABOUT ME Fran Zablocki Strategist at mStoner @Zablocki Friday, November 22, 13
  6. 6. ABOUT THIS PRESENTATION Friday, November 22, 13 @Zablocki #mstonernow
  7. 7. INTRODUCTION HISTORY DEFINING IA WHAT IS IA? USER EXPERIENCE ARE YOU AN INFORMATION ARCHITECT? ELEMENTS OF IA THE FUTURE OF IA Friday, November 22, 13
  8. 8. LIBRARY & INFORMATION SCIENCE HISTORY Source: http://www.flickr.com/photos/thomashawk/85441961/ Friday, November 22, 13
  9. 9. • Pic of DDS Source: http://1y4o79syc6g4difua2cvof9qco.wpengine.netdna-cdn.com/wp-content/uploads/2013/09/library-card-catalogs.jpg Friday, November 22, 13
  10. 10. LIBRARY & INFORMATION SCIENCE • Labeling | Taxonomy Browsing| Reference • Friday, November 22, 13 • • HISTORY Organization | Classification Navigation | Guidance
  11. 11. THE EARLY WEB Friday, November 22, 13 Styling? What’s Styling? • HISTORY • Pure Information Architecture
  12. 12. Source: Internet Wayback Machine - www.harvard.edu, 1997 Friday, November 22, 13
  13. 13. ALL GROWN UP • Websites have come a long way • They have become much, much more complex • They have become much more interactive • But IA is still the backbone HISTORY Friday, November 22, 13
  14. 14. Parallax IA Friday, November 22, 13
  15. 15. Responsive IA Mobile Desktop Friday, November 22, 13
  16. 16. DEFINITION • The structured design of shared information environments • The combination of organization, labeling, search, and navigation systems within web sites and intranets. • The art and science of shaping information products and experiences to support usability and findability. DEFINING IA Source: IA for the WWW, Morville & Rosenfeld, 2006 Friday, November 22, 13
  17. 17. WHAT IA ISN’T • • • Usability Engineering Information Design • Friday, November 22, 13 Software Development • DEFINING IA Graphic Design Interaction Design
  18. 18. WHAT IA IS • Friday, November 22, 13 • Mostly invisible • DEFINING IA Ambiguous Hard to define
  19. 19. “The work we do involves high levels of abstraction, ambiguity, and occasionally ! bsurdity, and to some a degree we’re all still making it up as we go along.” — Peter Morville & Louis Rosenfeld, 2006 Friday, November 22, 13
  20. 20. ANALOGY: PHYSICAL ARCHITECTURE • Planned Structure • Form and Function • Designated Pathways • But the analogy only gets so far... DEFINING IA Friday, November 22, 13
  21. 21. 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 Friday, November 22, 13
  22. 22. A VISUAL DEFINITION USER EXPERIENCE Friday, November 22, 13 The Elements of User Experience
  23. 23. THE ELEMENTS OF UX • Friday, November 22, 13 • 2000 • USER EXPERIENCE Jesse James Garrett A Visual Model to Make Sense of a Rapidly Evolving Field
  24. 24. Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf Friday, November 22, 13
  25. 25. Source: http://www.jjg.net/elements/pdf/elements.pdf Friday, November 22, 13
  26. 26. THE ELEMENTS OF UX • Source: http://www.jjg.net/elements/pdf/elements.pdf Friday, November 22, 13 • IA is the structure of content, while interaction design is the structure of experience • USER EXPERIENCE IA is right smack in the middle, on the structure plane with interaction design. IA is the structure / order / heirarchy of labels, while information design is the hover state, slide out effect and behavior of that structure.
  27. 27. WHAT DOES AN INFORMATION ARCHITECT LOOK LIKE? ARE YOU AN INFORMATION ARCHITECT? Friday, November 22, 13 • You are all Information Architects • IA draws from many disciplines
  28. 28. WHAT DOES AN INFORMATION ARCHITECT LOOK LIKE? • Journalism Marketing • Friday, November 22, 13 • • ARE YOU AN INFORMATION ARCHITECT? Information & Library Science Graphic and Information Design
  29. 29. WHAT DOES AN INFORMATION ARCHITECT LOOK LIKE? • Friday, November 22, 13 • Technical Writing • ARE YOU AN INFORMATION ARCHITECT? Content Strategy Content Management
  30. 30. “Content management and information architecture are really two sides of the same coin. IA portrays a ‘snapshot’ or spatial view of an information system, chile CM describes a temporal view by showing how information should flow into, around, and out of that same system over time.” — Peter Morville & Louis Rosenfeld, 2006 Friday, November 22, 13
  31. 31. WHAT IS IA? STRATEGY USER BROWSING BEHAVIOR ELEMENTS OF IA ORGANIZATIONAL SCHEMES & STRUCTURES LABELING THE FUTURE OF IA THE IA PRACTICE Friday, November 22, 13 PROCESS
  32. 32. STRATEGY FIRST • Your IA should reinforce the strategic goals of your site: • Friday, November 22, 13 • Provide relevant, timely information to users • STRATEGY Sell your institution to users Transact - apply, donate, contact
  33. 33. CORE ELEMENTS OF IA • Friday, November 22, 13 • Context - higher education, marketing and awarenessbuilding • STRATEGY Users - prospectives first, but many more Content - words and images
  34. 34. WHAT WE THINK USERS DO • Home > • USER BROWSING BEHAVIOR Academics > • Majors > • English > • Degree Requirements > • Apply > • Friday, November 22, 13 PROFIT
  35. 35. WHAT USERS ACTUALLY DO Session 1 (mobile phone): • USER BROWSING BEHAVIOR Google ‘English Degrees’ > • Your English Dept. > • English > • English Major in your academics section > • Information for Future Students > • Friday, November 22, 13 Contact Us > OH THE VOICE IS ON! > Bookmark.
  36. 36. WHAT USERS ACTUALLY DO Session 2 (tablet): • USER BROWSING BEHAVIOR Use bookmarked degree page > • Read everything you’ve ever written on the English major > • Click Apply Now > • Friday, November 22, 13 OMG A CAT WITH BACON ON ITS HEAD
  37. 37. WHAT USERS ACTUALLY DO Session 3 (laptop): • USER BROWSING BEHAVIOR Google ‘Apply to Your English Program > • Get lost browsing the admissions site full of student videos > • Click Apply Now > • Complete application process > • Friday, November 22, 13 (Choose another school anyway) or PROFIT
  38. 38. TYPES OF BEHAVIOR • • Friday, November 22, 13 Searching for something you know is there • This is why faculty and staff are terrible testers for sites dedicated to students • USER BROWSING BEHAVIOR Known-Item Seeking “Just give me my quicklinks! NYAH!”
  39. 39. TYPES OF BEHAVIOR • USER BROWSING BEHAVIOR Friday, November 22, 13 Exploratory Seeking • Browsing for the unknown • Most helped by topical and audience navigation
  40. 40. TYPES OF BEHAVIOR • Friday, November 22, 13 • Finding everything there is to know • USER BROWSING BEHAVIOR Exhaustive Research Most helped by search
  41. 41. TYPES OF BEHAVIOR • • USER BROWSING BEHAVIOR Friday, November 22, 13 Re-Finding Finding again • Done through bookmarking (if they are on the ball) or browsing history (if they are not so much) or trying a dozen searches before remembering the right term (if they are like most of us).
  42. 42. ONE JOURNEY, MANY PATHS USER BROWSING BEHAVIOR Friday, November 22, 13 • Move from one form of behavior to another, fluidly, over several sessions.
  43. 43. Friday, November 22, 13
  44. 44. MYTHBUSTERS • USER BROWSING BEHAVIOR Friday, November 22, 13 The ‘Three Click Rule’ • One path to rule them all • Projecting your behavior onto others
  45. 45. “We think we can measure the experience of finding by how long it takes, or how many mouse clicks it takes, or how many viewed pages it takes to find the ‘right’ answer, when often there is no right answer.” — Peter Morville & Louis Rosenfeld Friday, November 22, 13
  46. 46. EXACT ORGANIZATIONAL SCHEMES ORGANIZATIONAL SCHEMES & STRUCTURES Friday, November 22, 13 • Alphabetical • Chronological
  47. 47. Friday, November 22, 13
  48. 48. Friday, November 22, 13
  49. 49. AMBIGUOUS ORGANIZATIONAL SCHEMES ORGANIZATIONAL SCHEMES & STRUCTURES Friday, November 22, 13 • Topic Based
  50. 50. Friday, November 22, 13
  51. 51. AMBIGUOUS ORGANIZATIONAL SCHEMES ORGANIZATIONAL SCHEMES & STRUCTURES Friday, November 22, 13 • Audience Based • Asks the user ‘Who are you?’, ‘How do you identify yourself?’
  52. 52. Friday, November 22, 13
  53. 53. AMBIGUOUS ORGANIZATIONAL SCHEMES • Friday, November 22, 13 • Designed to allow someone to accomplish something • ORGANIZATIONAL SCHEMES & STRUCTURES Task Based Use action verbs in labels
  54. 54. Friday, November 22, 13
  55. 55. DEPTH OF SCHEME • Friday, November 22, 13 • Local • ORGANIZATIONAL SCHEMES & STRUCTURES Global Hybrid (MegaMenu)
  56. 56. Global Navigation Friday, November 22, 13
  57. 57. Local Navigation Friday, November 22, 13
  58. 58. Mega-Menu Navigation Friday, November 22, 13
  59. 59. BREADTH OF SCHEME • Friday, November 22, 13 • Supplementary • Convenience • ORGANIZATIONAL SCHEMES & STRUCTURES Contextual Site Map
  60. 60. Contextual Navigation Friday, November 22, 13
  61. 61. Supplemental Navigation Friday, November 22, 13
  62. 62. Convenience Navigation Friday, November 22, 13
  63. 63. Site Map Friday, November 22, 13
  64. 64. TOP-DOWN: ORGANIZATIONAL STRUCTURE • Hierarchical • Audience Global • Local • Friday, November 22, 13 • • ORGANIZATIONAL SCHEMES & STRUCTURES Topical Site Map
  65. 65. BOTTOM-UP: CONTENT STRUCTURE • ORGANIZATIONAL SCHEMES & STRUCTURES How you organize, label and sequence the information inside the WYSIWYG: Content Structure • Contextual navigation • Friday, November 22, 13 • Supplementary navigation
  66. 66. Content Structure Friday, November 22, 13
  67. 67. BOTTOM-UP: CONTENT TEMPLATES • Friday, November 22, 13 • Consistency of content hierarchy from page to page • ORGANIZATIONAL SCHEMES & STRUCTURES Standardized organizational schemes for particular content For example, a standard Majors and Minors page applied across the site
  68. 68. Content Templates Friday, November 22, 13
  69. 69. Content Templates Source: http://www.wofford.edu/biology/ Friday, November 22, 13
  70. 70. BOTTOM-UP: DATA STRUCTURE • ORGANIZATIONAL SCHEMES & STRUCTURES How you organize and label the information about the information inside the WYSIWYG: Metadata • Friday, November 22, 13 • Tagging
  71. 71. Webster Program Finder Friday, November 22, 13
  72. 72. LABELING TIPS • Friday, November 22, 13 • Be Efficient • LABELING Know Your Audience Anticipate what the user will expect to see
  73. 73. Source: http://theludlowgroup.com/advertising/inspired-packaging-design-furthers-successful-branding/ Friday, November 22, 13
  74. 74. The label says research where does it lead? Friday, November 22, 13
  75. 75. Friday, November 22, 13
  76. 76. CONTROLLED VOCABULARY • Uniform method of describing things • Provides quality and consistency • Consistency means predictability LABELING Friday, November 22, 13
  77. 77. CONTROLLED VOCABULARY Because: • Labeling is more of an art than a science • Ask 10 people what they would call something, get 10 different answers. • Having a standard makes it easier for everyone, so follow the standard! LABELING Friday, November 22, 13
  78. 78. TOP - DOWN: IA LIST • Easy to read • Easier to modify / maintain • A good way to represent the depth of the site. • Organized by numerical, legal structure PROCESS Friday, November 22, 13
  79. 79. Friday, November 22, 13
  80. 80. TOP-DOWN: IA DIAGRAM / SITEMAP • A way to visually represent the IA • A good way to represent the breadth of the site. • Good at showing tangential relationship (related sites, references) • More work to maintain PROCESS Friday, November 22, 13
  81. 81. Why Attend University of Idaho? Undergraduate Admissions Dates & Deadlines Graduate Admissions Admission Requirements Law School Admissions Cost & Financial Aid Transfer Admissions Majors & Minors Non-degree Admissions Frequently Asked Questions Contact Us Admissions How to Apply Visit Us Visit Us Friday, November 22, 13 Information for: > Accepted Students > First Year Students > Transfer Students > International Students > Non-degree Students
  82. 82. BOTTOM-UP: CONTENT TEMPLATES Friday, November 22, 13 Produced in parallel with TopDown IA documents • PROCESS • Define the content structure
  83. 83. Content Templates Friday, November 22, 13
  84. 84. COMBINING TOP-DOWN AND BOTTOM-UP • Friday, November 22, 13 • Evolutionary, shared document • PROCESS IA + Content Hybrid Model Allows content creation to remain cohesive with the IA and content templates all in the same place
  85. 85. IA serves as table of contents Friday, November 22, 13
  86. 86. Example of IA + Content Friday, November 22, 13
  87. 87. TESTING • Card Sorting for: • • PROCESS • Labeling Organization Schemes Tree Path Testing for: • • Friday, November 22, 13 Hierarchy / Navigation paths Dead ends
  88. 88. OPTIMAL WORKSHOP • OptimalSort: Online card sorting • TreeJack: IA pathing PROCESS Friday, November 22, 13
  89. 89. Friday, November 22, 13
  90. 90. Friday, November 22, 13
  91. 91. ELEMENTS OF IA EXTENDING GARRETT’S MODEL DATA-BASED WEBSITES THE FUTURE OF IA MULTI-PLATFORM BROWSING RESPONSIVE DESIGN THE IA PRACTICE Friday, November 22, 13 ADAPTIVE CONTENT
  92. 92. MORE AND MORE COMPLEX • EXTENDING GARRETT’S MODEL Friday, November 22, 13 Across multiple platforms • Across multiple sessions • With exponential information growth
  93. 93. Friday, November 22, 13
  94. 94. DATA IS GETTING BIGGER DATA-BASED WEBSITES Friday, November 22, 13 • Bottom-Up IA is going to become more and more important as data, not hierarchy, drives content.
  95. 95. Friday, November 22, 13
  96. 96. ONE SESSION, MANY PLATFORMS • • • Laptop Desktop • Friday, November 22, 13 Tablet • MULTIPLATFORM BROWSING Mobile Television
  97. 97. Source: http://www.apple.com/apps/remote/ Friday, November 22, 13
  98. 98. RESPONSIVE DESIGN Friday, November 22, 13
  99. 99. CHUNKS NOT BLOBS • • • Making content agnostic from style, layout, or device Uses metadata and XML heavily • Friday, November 22, 13 NPR - COPE (Create Once, Publish Everywhere) • ADAPTIVE CONTENT Karen McGrane Watch the presentation: http://vimeo.com/45965788
  100. 100. THE FUTURE OF IA PERMANENT PRACTICE STAFFING THE IA PRACTICE EVANGELISM PROFESSIONAL DEVELOPMENT Friday, November 22, 13
  101. 101. IA AT YOUR SCHOOL • Use case studies from industry Insert IA into your training regimen • Friday, November 22, 13 • • PERMANENT PRACTICE Establish IA as a real thing, just like design, development, and content Build up expertise among staff who work in the UX family (hint: that’s everybody)
  102. 102. WHO SHOULD DO IT? • Friday, November 22, 13 • Reality: Key point person for IA • STAFFING Ideal: Dedicated Information Architect on staff Goal: All staff associated with the web need to be versed
  103. 103. BE A CHAMPION • Friday, November 22, 13 • Use the tools at your disposal • EVANGELISM Demand that IA be taken seriously Read, watch, listen, learn - there is an entire IA community out there
  104. 104. BOOKS & SITES • • Friday, November 22, 13 Elements of User Experience (Book) http://amzn.to/18Q4fA4 • Jesse James Garrett: http://www.jjg.net • PROFESSIONAL DEVELOPMENT IA for the WWW (Book): http://amzn.to/3RqL7y Karen McGrane http://karenmcgrane.com
  105. 105. HELP US HELP YOU THANK YOU! QUESTIONS? WITH IA WWW .MSTONER.COM FRAN.ZABLOCKI@MSTONER.COM mStoner Friday, November 22, 13

×