Information architecture 101

915 views

Published on

Information Architecture is the backbone of your website, and needs to be considered strategically in the context of design, user experience, interaction design and more. Get a crash course in IA from Fran Zablocki, digital strategist at mStoner.

Published in: Internet, Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
915
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Information architecture 101

  1. 1. INFORMATION ARCHITECTURE THE JOURNEY THE DESTINATION THE RETURN TRIP Fran Zablocki • November 20, 2013 mStoner
  2. 2. INFORMATION ARCHITECTURE INTRODUCTION WHAT IS IA? ELEMENTS OF IA FUTURE OF IA IA AS PRACTICE
  3. 3. IA INTRODUCTION WHAT IS IA? ELEMENTS OF IA THE FUTURE OF IA THE IA PRACTICE
  4. 4. INTRODUCTION ABOUT ME ABOUT THIS
 
 PRESENTATION WHAT IS IA? ELEMENTS OF IA
  5. 5. ABOUT ME Fran Zablocki! Strategist at mStoner! @Zablocki
  6. 6. ABOUT THIS PRESENTATION @Zablocki! #mstonernow
  7. 7. WHAT IS IA? ELEMENTS OF IA THE FUTURE OF IA INTRODUCTION HISTORY DEFINING IA USER EXPERIENCE ARE YOU AN
 INFORMATION ARCHITECT?
  8. 8. HISTORY LIBRARY & INFORMATION SCIENCE Source: http://www.flickr.com/photos/thomashawk/85441961/
  9. 9. • Pic of DDS Source: http://1y4o79syc6g4difua2cvof9qco.wpengine.netdna-cdn.com/wp-content/uploads/2013/09/library-card-catalogs.jpg
  10. 10. HISTORY • Organization | Classification! • Labeling | Taxonomy! • Browsing| Reference! • Navigation | Guidance LIBRARY & INFORMATION SCIENCE
  11. 11. HISTORY • Styling? What’s Styling?! • Pure Information Architecture THE EARLY WEB
  12. 12. Source: Internet Wayback Machine - www.harvard.edu, 1997
  13. 13. HISTORY • 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 ALL GROWN UP
  14. 14. Parallax IA
  15. 15. Responsive IA! Mobile Desktop
  16. 16. DEFINING IA • 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. DEFINITION Source: IA for the WWW, 
 Morville & Rosenfeld, 2006
  17. 17. DEFINING IA • Graphic Design! • Software Development! • Usability Engineering! • Information Design! • Interaction Design WHAT IA ISN’T
  18. 18. DEFINING IA • Ambiguous! • Mostly invisible! • Hard to define WHAT IA IS
  19. 19. “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, 2006
  20. 20. DEFINING IA • Planned Structure! • Form and Function! • Designated Pathways! • But the analogy only gets so far... ANALOGY: PHYSICAL ARCHITECTURE
  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
  22. 22. USER EXPERIENCE The Elements of User Experience A VISUAL DEFINITION
  23. 23. USER EXPERIENCE • Jesse James Garrett! • 2000! • A Visual Model to Make Sense of a Rapidly Evolving Field THE ELEMENTS OF UX
  24. 24. Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf
  25. 25. Source: http://www.jjg.net/elements/pdf/elements.pdf
  26. 26. USER EXPERIENCE • IA is right smack in the middle, on the structure plane with interaction design.! ! • IA is the structure of content, while interaction design is the structure of experience! ! • IA is the structure / order / heirarchy of labels, while information design is the hover state, slide out effect and behavior of that structure.! THE ELEMENTS OF UX Source: http://www.jjg.net/elements/pdf/elements.pdf
  27. 27. ARE YOU AN INFORMATION ARCHITECT? • You are all Information Architects! • IA draws from many disciplines WHAT DOES AN INFORMATION ARCHITECT LOOK LIKE?
  28. 28. ARE YOU AN INFORMATION ARCHITECT? • Information & Library Science! • Journalism! • Marketing! • Graphic and Information Design WHAT DOES AN INFORMATION ARCHITECT LOOK LIKE?
  29. 29. ARE YOU AN INFORMATION ARCHITECT? • Content Strategy ! • Technical Writing! • Content Management WHAT DOES AN INFORMATION ARCHITECT LOOK LIKE?
  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
  31. 31. ELEMENTS OF IA THE FUTURE OF IA THE IA PRACTICE WHAT IS IA? STRATEGY USER BROWSING
 BEHAVIOR ORGANIZATIONAL
 SCHEMES & STRUCTURES LABELING PROCESS
  32. 32. STRATEGY • Your IA should reinforce the strategic goals of your site:! • Sell your institution to users! • Provide relevant, timely information to users! • Transact - apply, donate, contact STRATEGY FIRST
  33. 33. STRATEGY • Users - prospectives first, but many more! • Context - higher education, marketing and awareness- building! • Content - words and images CORE ELEMENTS OF IA
  34. 34. USER BROWSING BEHAVIOR • Home > ! • Academics > ! • Majors > ! • English > ! • Degree Requirements > ! • Apply > ! • PROFIT WHAT WE THINK USERS DO
  35. 35. USER BROWSING BEHAVIOR Session 1 (mobile phone):! • Google ‘English Degrees’ > ! • Your English Dept. > ! • English > ! • English Major in your academics section > ! • Information for Future Students >! • Contact Us > OH THE VOICE IS ON! > Bookmark. WHAT USERS ACTUALLY DO
  36. 36. USER BROWSING BEHAVIOR Session 2 (tablet):! • Use bookmarked degree page >! • Read everything you’ve ever written on the English major > ! • Click Apply Now >! • OMG A CAT WITH BACON ON ITS HEAD WHAT USERS ACTUALLY DO
  37. 37. USER BROWSING BEHAVIOR Session 3 (laptop):! • Google ‘Apply to Your English Program > ! • Get lost browsing the admissions site full of student videos > ! • Click Apply Now > ! • Complete application process > ! • (Choose another school anyway) or PROFIT WHAT USERS ACTUALLY DO
  38. 38. USER BROWSING BEHAVIOR • Known-Item Seeking! • Searching for something you know is there! • This is why faculty and staff are terrible testers for sites dedicated to students! • “Just give me my quicklinks! NYAH!” TYPES OF BEHAVIOR
  39. 39. USER BROWSING BEHAVIOR • Exploratory Seeking! • Browsing for the unknown! • Most helped by topical and audience navigation TYPES OF BEHAVIOR
  40. 40. USER BROWSING BEHAVIOR • Exhaustive Research! • Finding everything there is to know! • Most helped by search TYPES OF BEHAVIOR
  41. 41. USER BROWSING BEHAVIOR • 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). TYPES OF BEHAVIOR
  42. 42. USER BROWSING BEHAVIOR ! • Move from one form of behavior to another, fluidly, over several sessions. ONE JOURNEY,
 MANY PATHS
  43. 43. USER BROWSING BEHAVIOR • The ‘Three Click Rule’! • One path to rule them all! • Projecting your behavior onto others MYTHBUSTERS
  44. 44. “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!
  45. 45. ORGANIZATIONAL SCHEMES & STRUCTURES • Alphabetical! • Chronological EXACT ORGANIZATIONAL SCHEMES
  46. 46. ORGANIZATIONAL SCHEMES & STRUCTURES • Topic Based AMBIGUOUS ORGANIZATIONAL SCHEMES
  47. 47. ORGANIZATIONAL SCHEMES & STRUCTURES • Audience Based! • Asks the user ‘Who are you?’, ‘How do you identify yourself?’ AMBIGUOUS ORGANIZATIONAL SCHEMES
  48. 48. ORGANIZATIONAL SCHEMES & STRUCTURES • Task Based! • Designed to allow someone to accomplish something! • Use action verbs in labels AMBIGUOUS ORGANIZATIONAL SCHEMES
  49. 49. ORGANIZATIONAL SCHEMES & STRUCTURES • Global! • Local! • Hybrid (MegaMenu) DEPTH OF SCHEME
  50. 50. Global
 Navigation
  51. 51. Local
 Navigation
  52. 52. Mega-Menu Navigation
  53. 53. ORGANIZATIONAL SCHEMES & STRUCTURES • Contextual! • Supplementary! • Convenience! • Site Map BREADTH OF SCHEME
  54. 54. Contextual
 Navigation
  55. 55. Supplemental
 Navigation
  56. 56. Convenience Navigation
  57. 57. Site Map
  58. 58. ORGANIZATIONAL SCHEMES & STRUCTURES • Hierarchical! • Topical! • Audience! • Global! • Local! • Site Map TOP-DOWN: ORGANIZATIONAL STRUCTURE
  59. 59. ORGANIZATIONAL SCHEMES & STRUCTURES • How you organize, label and sequence the information inside the WYSIWYG:! • Content Structure! • Contextual navigation! • Supplementary navigation BOTTOM-UP: 
 CONTENT STRUCTURE
  60. 60. Content Structure
  61. 61. ORGANIZATIONAL SCHEMES & STRUCTURES • Standardized organizational schemes for particular content! • Consistency of content hierarchy from page to page! • For example, a standard Majors and Minors page applied across the site BOTTOM-UP: 
 CONTENT TEMPLATES
  62. 62. Content Templates
  63. 63. Content Templates Source: http://www.wofford.edu/biology/
  64. 64. ORGANIZATIONAL SCHEMES & STRUCTURES • How you organize and label the information about the information inside the WYSIWYG:! • Metadata! • Tagging BOTTOM-UP: 
 DATA STRUCTURE
  65. 65. Webster Program Finder
  66. 66. LABELING • Know Your Audience! • Be Efficient! • Anticipate what the user will expect to see LABELING TIPS
  67. 67. Source: http://theludlowgroup.com/advertising/inspired-packaging-design-furthers-successful-branding/
  68. 68. The label says research - where does it lead?
  69. 69. LABELING • Uniform method of describing things! • Provides quality and consistency! • Consistency means predictability CONTROLLED VOCABULARY
  70. 70. LABELING 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! CONTROLLED VOCABULARY
  71. 71. PROCESS • Easy to read! • Easier to modify / maintain! • A good way to represent the depth of the site.! • Organized by numerical, legal structure TOP - DOWN: IA LIST
  72. 72. PROCESS • 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 TOP-DOWN: IA DIAGRAM / SITEMAP
  73. 73. Admissions Why Attend University of Idaho? Undergraduate Admissions Graduate Admissions Law School Admissions Contact Us Visit Us Transfer Admissions 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
  74. 74. PROCESS • Produced in parallel with Top- Down IA documents! • Define the content structure BOTTOM-UP: CONTENT TEMPLATES
  75. 75. Content Templates
  76. 76. PROCESS • IA + Content Hybrid Model! • Evolutionary, shared document! • Allows content creation to remain cohesive with the IA and content templates all in the same place COMBINING TOP-DOWN AND BOTTOM-UP

  77. 77. IA serves as table of contents
  78. 78. Example of IA + Content
  79. 79. PROCESS • Card Sorting for:! • Labeling! • Organization Schemes! • Tree Path Testing for:! • Hierarchy / Navigation paths! • Dead ends TESTING
  80. 80. PROCESS ! • OptimalSort: Online card sorting! ! • TreeJack: IA pathing! OPTIMAL WORKSHOP
  81. 81. THE FUTURE OF IA THE IA PRACTICE ELEMENTS OF IA EXTENDING GARRETT’S
 MODEL DATA-BASED WEBSITES RESPONSIVE DESIGN MULTI-PLATFORM
 BROWSING ADAPTIVE CONTENT
  82. 82. EXTENDING GARRETT’S MODEL • Across multiple platforms! • Across multiple sessions! • With exponential information growth MORE AND MORE COMPLEX
  83. 83. DATA-BASED WEBSITES • Bottom-Up IA is going to become more and more important as data, not hierarchy, drives content. DATA IS GETTING BIGGER
  84. 84. MULTI- PLATFORM BROWSING • Mobile! • Tablet! • Laptop! • Desktop! • Television ONE SESSION, 
 MANY PLATFORMS
  85. 85. Source: http://www.apple.com/apps/remote/
  86. 86. RESPONSIVE DESIGN
  87. 87. ADAPTIVE CONTENT • Karen McGrane! • NPR - COPE (Create Once, Publish Everywhere)! • Making content agnostic from style, layout, or device! • Uses metadata and XML heavily! • Watch the presentation: 
 http://vimeo.com/45965788 CHUNKS NOT BLOBS
  88. 88. THE IA PRACTICE THE FUTURE OF IA PERMANENT PRACTICE STAFFING PROFESSIONAL
 DEVELOPMENT EVANGELISM
  89. 89. PERMANENT PRACTICE • 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) IA AT YOUR SCHOOL
  90. 90. STAFFING • Ideal: Dedicated Information Architect on staff! • Reality: Key point person for IA! • Goal: All staff associated with the web need to be versed WHO SHOULD DO IT?
  91. 91. EVANGELISM • Demand that IA be taken seriously! • Use the tools at your disposal! • Read, watch, listen, learn - there is an entire IA community out there BE A CHAMPION
  92. 92. PROFESSIONAL DEVELOPMENT • IA for the WWW (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
 BOOKS & SITES
  93. 93. THANK YOU! QUESTIONS? HELP US HELP YOU WITH IA WWW .MSTONER.COM FRAN.ZABLOCKI@MSTONER.COM mStoner

×