Information architecture 101
•
1 j'aime•1,130 vues
This document discusses information architecture (IA). It begins with defining IA and its key elements. IA is the structured design of shared information environments, combining organization, labeling, search, and navigation to support usability and findability. The document then covers the history of IA in library science and the early web. It discusses user behavior in browsing like known-item seeking. Organizational schemes and structures are explained like topic-based and audience-based. Labeling, content structure, and metadata are also important elements. The future of IA is discussed in relation to responsive design, multi-platform browsing, and adaptive content. IA practice is also summarized, focusing on staffing, testing, professional development, and advocacy.
Recommandé
Recommandé
Contenu connexe
En vedette
En vedette (20)
Similaire à Information architecture 101
Similaire à Information architecture 101 (20)
Plus de Francis Zablocki
Plus de Francis Zablocki (7)
Dernier
Dernier (11)
Information architecture 101
- 1. INFORMATION ARCHITECTURE THE JOURNEY THE DESTINATION THE RETURN TRIP Fran Zablocki • November 20, 2013 mStoner
- 2. INFORMATION ARCHITECTURE INTRODUCTION WHAT IS IA? ELEMENTS OF IA FUTURE OF IA IA AS PRACTICE
- 3. IA INTRODUCTION WHAT IS IA? ELEMENTS OF IA THE FUTURE OF IA THE IA PRACTICE
- 4. INTRODUCTION ABOUT ME ABOUT THIS PRESENTATION WHAT IS IA? ELEMENTS OF IA
- 5. ABOUT ME Fran Zablocki! Strategist at mStoner! @Zablocki
- 7. WHAT IS IA? ELEMENTS OF IA THE FUTURE OF IA INTRODUCTION HISTORY DEFINING IA USER EXPERIENCE ARE YOU AN INFORMATION ARCHITECT?
- 8. HISTORY LIBRARY & INFORMATION SCIENCE Source: http://www.flickr.com/photos/thomashawk/85441961/
- 9. • Pic of DDS Source: http://1y4o79syc6g4difua2cvof9qco.wpengine.netdna-cdn.com/wp-content/uploads/2013/09/library-card-catalogs.jpg
- 10. HISTORY • Organization | Classification! • Labeling | Taxonomy! • Browsing| Reference! • Navigation | Guidance LIBRARY & INFORMATION SCIENCE
- 11. HISTORY • Styling? What’s Styling?! • Pure Information Architecture THE EARLY WEB
- 12. Source: Internet Wayback Machine - www.harvard.edu, 1997
- 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. Parallax IA
- 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. DEFINING IA • Graphic Design! • Software Development! • Usability Engineering! • Information Design! • Interaction Design WHAT IA ISN’T
- 18. DEFINING IA • Ambiguous! • Mostly invisible! • Hard to define WHAT IA IS
- 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. DEFINING IA • Planned Structure! • Form and Function! • Designated Pathways! • But the analogy only gets so far... ANALOGY: PHYSICAL ARCHITECTURE
- 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. USER EXPERIENCE The Elements of User Experience A VISUAL DEFINITION
- 23. USER EXPERIENCE • Jesse James Garrett! • 2000! • A Visual Model to Make Sense of a Rapidly Evolving Field THE ELEMENTS OF UX
- 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. ARE YOU AN INFORMATION ARCHITECT? • You are all Information Architects! • IA draws from many disciplines WHAT DOES AN INFORMATION ARCHITECT LOOK LIKE?
- 28. ARE YOU AN INFORMATION ARCHITECT? • Information & Library Science! • Journalism! • Marketing! • Graphic and Information Design WHAT DOES AN INFORMATION ARCHITECT LOOK LIKE?
- 29. ARE YOU AN INFORMATION ARCHITECT? • Content Strategy ! • Technical Writing! • Content Management WHAT DOES AN INFORMATION ARCHITECT LOOK LIKE?
- 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. ELEMENTS OF IA THE FUTURE OF IA THE IA PRACTICE WHAT IS IA? STRATEGY USER BROWSING BEHAVIOR ORGANIZATIONAL SCHEMES & STRUCTURES LABELING PROCESS
- 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. STRATEGY • Users - prospectives first, but many more! • Context - higher education, marketing and awareness- building! • Content - words and images CORE ELEMENTS OF IA
- 34. USER BROWSING BEHAVIOR • Home > ! • Academics > ! • Majors > ! • English > ! • Degree Requirements > ! • Apply > ! • PROFIT WHAT WE THINK USERS DO
- 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. 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. 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. 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. USER BROWSING BEHAVIOR • Exploratory Seeking! • Browsing for the unknown! • Most helped by topical and audience navigation TYPES OF BEHAVIOR
- 40. USER BROWSING BEHAVIOR • Exhaustive Research! • Finding everything there is to know! • Most helped by search TYPES OF BEHAVIOR
- 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. USER BROWSING BEHAVIOR ! • Move from one form of behavior to another, fluidly, over several sessions. ONE JOURNEY, MANY PATHS
- 44. USER BROWSING BEHAVIOR • The ‘Three Click Rule’! • One path to rule them all! • Projecting your behavior onto others MYTHBUSTERS
- 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!
- 46. ORGANIZATIONAL SCHEMES & STRUCTURES • Alphabetical! • Chronological EXACT ORGANIZATIONAL SCHEMES
- 49. ORGANIZATIONAL SCHEMES & STRUCTURES • Topic Based AMBIGUOUS ORGANIZATIONAL SCHEMES
- 51. ORGANIZATIONAL SCHEMES & STRUCTURES • Audience Based! • Asks the user ‘Who are you?’, ‘How do you identify yourself?’ AMBIGUOUS ORGANIZATIONAL SCHEMES
- 53. ORGANIZATIONAL SCHEMES & STRUCTURES • Task Based! • Designed to allow someone to accomplish something! • Use action verbs in labels AMBIGUOUS ORGANIZATIONAL SCHEMES
- 55. ORGANIZATIONAL SCHEMES & STRUCTURES • Global! • Local! • Hybrid (MegaMenu) DEPTH OF SCHEME
- 57. Local Navigation
- 59. ORGANIZATIONAL SCHEMES & STRUCTURES • Contextual! • Supplementary! • Convenience! • Site Map BREADTH OF SCHEME
- 63. Site Map
- 64. ORGANIZATIONAL SCHEMES & STRUCTURES • Hierarchical! • Topical! • Audience! • Global! • Local! • Site Map TOP-DOWN: ORGANIZATIONAL STRUCTURE
- 65. ORGANIZATIONAL SCHEMES & STRUCTURES • How you organize, label and sequence the information inside the WYSIWYG:! • Content Structure! • Contextual navigation! • Supplementary navigation BOTTOM-UP: CONTENT STRUCTURE
- 67. 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
- 70. ORGANIZATIONAL SCHEMES & STRUCTURES • How you organize and label the information about the information inside the WYSIWYG:! • Metadata! • Tagging BOTTOM-UP: DATA STRUCTURE
- 72. LABELING • Know Your Audience! • Be Efficient! • Anticipate what the user will expect to see LABELING TIPS
- 74. The label says research - where does it lead?
- 76. LABELING • Uniform method of describing things! • Provides quality and consistency! • Consistency means predictability CONTROLLED VOCABULARY
- 77. 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
- 78. 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
- 80. 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
- 81. 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
- 82. PROCESS • Produced in parallel with Top- Down IA documents! • Define the content structure BOTTOM-UP: CONTENT TEMPLATES
- 84. 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
- 85. IA serves as table of contents
- 86. Example of IA + Content
- 87. PROCESS • Card Sorting for:! • Labeling! • Organization Schemes! • Tree Path Testing for:! • Hierarchy / Navigation paths! • Dead ends TESTING
- 88. PROCESS ! • OptimalSort: Online card sorting! ! • TreeJack: IA pathing! OPTIMAL WORKSHOP
- 91. THE FUTURE OF IA THE IA PRACTICE ELEMENTS OF IA EXTENDING GARRETT’S MODEL DATA-BASED WEBSITES RESPONSIVE DESIGN MULTI-PLATFORM BROWSING ADAPTIVE CONTENT
- 92. EXTENDING GARRETT’S MODEL • Across multiple platforms! • Across multiple sessions! • With exponential information growth MORE AND MORE COMPLEX
- 94. DATA-BASED WEBSITES • Bottom-Up IA is going to become more and more important as data, not hierarchy, drives content. DATA IS GETTING BIGGER
- 96. MULTI- PLATFORM BROWSING • Mobile! • Tablet! • Laptop! • Desktop! • Television ONE SESSION, MANY PLATFORMS
- 99. 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
- 100. THE IA PRACTICE THE FUTURE OF IA PERMANENT PRACTICE STAFFING PROFESSIONAL DEVELOPMENT EVANGELISM
- 101. 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
- 102. 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?
- 103. 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
- 104. 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
- 105. THANK YOU! QUESTIONS? HELP US HELP YOU WITH IA WWW .MSTONER.COM FRAN.ZABLOCKI@MSTONER.COM mStoner