INFORMATION ARCHITECTURE THE JOURNEY THE DESTINATION THE RETURN TRIP Fran Zablocki • November 20, 2013 mStoner
Information architecture 101
Aug 23, 2014
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.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
INFORMATION ARCHITECTURE
THE JOURNEY
THE DESTINATION
THE RETURN TRIP
Fran Zablocki • November 20, 2013 mStoner
INFORMATION ARCHITECTURE
INTRODUCTION
WHAT IS IA?
ELEMENTS OF IA
FUTURE OF IA
IA AS PRACTICE
IA
INTRODUCTION
WHAT IS IA?
ELEMENTS OF IA
THE FUTURE OF IA
THE IA PRACTICE
INTRODUCTION
ABOUT ME
ABOUT THIS PRESENTATION
WHAT IS IA?
ELEMENTS OF IA
ABOUT ME
Fran Zablocki!
Strategist at mStoner!
@Zablocki
ABOUT THIS PRESENTATION
@Zablocki!
#mstonernow
WHAT IS IA?
ELEMENTS OF IA
THE FUTURE OF IA
INTRODUCTIONHISTORY
DEFINING IA
USER EXPERIENCE
ARE YOU AN INFORMATION ARCHITECT?
HISTORY
LIBRARY & INFORMATION SCIENCE
Source: http://www.flickr.com/photos/thomashawk/85441961/
• Pic of DDS
Source: http://1y4o79syc6g4difua2cvof9qco.wpengine.netdna-cdn.com/wp-content/uploads/2013/09/library-card-catalogs.jpg
HISTORY
• Organization | Classification!
• Labeling | Taxonomy!
• Browsing| Reference!
• Navigation | Guidance
LIBRARY & INFORMATION SCIENCE
HISTORY• Styling? What’s Styling?!
• Pure Information Architecture
THE EARLY WEB
Source: Internet Wayback Machine - www.harvard.edu, 1997
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
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
DEFINING IA
• Graphic Design!
• Software Development!
• Usability Engineering!
• Information Design!
• Interaction Design
WHAT IA ISN’T
DEFINING IA
• Ambiguous!
• Mostly invisible!
• Hard to define
WHAT IA IS
“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
DEFINING IA
• Planned Structure!
• Form and Function!
• Designated Pathways!
• But the analogy only gets so far...
ANALOGY: PHYSICAL ARCHITECTURE
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
USER EXPERIENCE The Elements of User Experience
A VISUAL DEFINITION
USER EXPERIENCE
• Jesse James Garrett!
• 2000!
• A Visual Model to Make Sense of a Rapidly Evolving Field
THE ELEMENTS OF UX
Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf
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
ARE YOU AN INFORMATION ARCHITECT?
• You are all Information Architects!
• IA draws from many disciplines
WHAT DOES AN INFORMATION ARCHITECT LOOK LIKE?
ARE YOU AN INFORMATION ARCHITECT?
• Information & Library Science!
• Journalism!
• Marketing!
• Graphic and Information Design
WHAT DOES AN INFORMATION ARCHITECT LOOK LIKE?
ARE YOU AN INFORMATION ARCHITECT?
• Content Strategy !
• Technical Writing!
• Content Management
WHAT DOES AN INFORMATION ARCHITECT LOOK LIKE?
“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
ELEMENTS OF IA
THE FUTURE OF IA
THE IA PRACTICE
WHAT IS IA? STRATEGY
USER BROWSING BEHAVIOR
ORGANIZATIONAL SCHEMES & STRUCTURES
LABELING
PROCESS
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
STRATEGY
• Users - prospectives first, but many more!
• Context - higher education, marketing and awareness-building!
• Content - words and images
CORE ELEMENTS OF IA
USER BROWSING BEHAVIOR
• Home > !
• Academics > !
• Majors > !
• English > !
• Degree Requirements > !
• Apply > !
• PROFIT
WHAT WE THINK USERS DO
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
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
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
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
USER BROWSING BEHAVIOR
• Exploratory Seeking!
• Browsing for the unknown!
• Most helped by topical and audience navigation
TYPES OF BEHAVIOR
USER BROWSING BEHAVIOR
• Exhaustive Research!
• Finding everything there is to know!
• Most helped by search
TYPES OF BEHAVIOR
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
USER BROWSING BEHAVIOR
!
• Move from one form of behavior to another, fluidly, over several sessions.
ONE JOURNEY, MANY PATHS
USER BROWSING BEHAVIOR
• The ‘Three Click Rule’!
• One path to rule them all!
• Projecting your behavior onto others
MYTHBUSTERS
“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!
ORGANIZATIONAL SCHEMES & STRUCTURES
• Alphabetical!
• Chronological
EXACT ORGANIZATIONAL SCHEMES
ORGANIZATIONAL SCHEMES & STRUCTURES
• Topic Based
AMBIGUOUS ORGANIZATIONAL SCHEMES
ORGANIZATIONAL SCHEMES & STRUCTURES
• Audience Based!
• Asks the user ‘Who are you?’, ‘How do you identify yourself?’
AMBIGUOUS ORGANIZATIONAL SCHEMES
ORGANIZATIONAL SCHEMES & STRUCTURES
• Task Based!
• Designed to allow someone to accomplish something!
• Use action verbs in labels
AMBIGUOUS ORGANIZATIONAL SCHEMES
ORGANIZATIONAL SCHEMES & STRUCTURES
• Global!
• Local!
• Hybrid (MegaMenu)
DEPTH OF SCHEME
Global Navigation
Local Navigation
Mega-Menu Navigation
ORGANIZATIONAL SCHEMES & STRUCTURES
• Contextual!
• Supplementary!
• Convenience!
• Site Map
BREADTH OF SCHEME
Contextual Navigation
Supplemental Navigation
Convenience Navigation
Site Map
ORGANIZATIONAL SCHEMES & STRUCTURES
• Hierarchical!
• Topical!
• Audience!
• Global!
• Local!
• Site Map
TOP-DOWN: ORGANIZATIONAL STRUCTURE
ORGANIZATIONAL SCHEMES & STRUCTURES
• How you organize, label and sequence the information inside the WYSIWYG:!
• Content Structure!
• Contextual navigation!
• Supplementary navigation
BOTTOM-UP: CONTENT STRUCTURE
Content Structure
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
Content Templates
ORGANIZATIONAL SCHEMES & STRUCTURES
• How you organize and label the information about the information inside the WYSIWYG:!
• Metadata!
• Tagging
BOTTOM-UP: DATA STRUCTURE
LABELING
• Know Your Audience!
• Be Efficient!
• Anticipate what the user will expect to see
LABELING TIPS
Source: http://theludlowgroup.com/advertising/inspired-packaging-design-furthers-successful-branding/
The label says research - where does it lead?
LABELING• Uniform method of describing things!
• Provides quality and consistency!
• Consistency means predictability
CONTROLLED VOCABULARY
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
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
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
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
PROCESS • Produced in parallel with Top-Down IA documents!
• Define the content structure
BOTTOM-UP: CONTENT TEMPLATES
Content Templates
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
IA serves as table of contents
Example of IA + Content
PROCESS
• Card Sorting for:!
• Labeling!
• Organization Schemes!
• Tree Path Testing for:!
• Hierarchy / Navigation paths!
• Dead ends
TESTING
PROCESS
!
• OptimalSort: Online card sorting!!
• TreeJack: IA pathing!
OPTIMAL WORKSHOP
THE FUTURE OF IA
THE IA PRACTICE
ELEMENTS OF IA EXTENDING GARRETT’S MODEL
DATA-BASED WEBSITES
RESPONSIVE DESIGN
MULTI-PLATFORM BROWSING
ADAPTIVE CONTENT
EXTENDING GARRETT’S MODEL
• Across multiple platforms!
• Across multiple sessions!
• With exponential information growth
MORE AND MORE COMPLEX
DATA-BASED WEBSITES
• Bottom-Up IA is going to become more and more important as data, not hierarchy, drives content.
DATA IS GETTING BIGGER
MULTI-PLATFORM BROWSING
• Mobile!
• Tablet!
• Laptop!
• Desktop!
• Television
ONE SESSION, MANY PLATFORMS
RESPONSIVE DESIGN
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
THE IA PRACTICE
THE FUTURE OF IAPERMANENT PRACTICE
STAFFING
PROFESSIONAL DEVELOPMENT
EVANGELISM
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
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?
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
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
THANK YOU! QUESTIONS?
HELP US
HELP YOU
WITH IA
WWW .MSTONER.COM
mStoner
Related Documents
