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