information architecture: core concepts and best practices
TRANSCRIPT
Information Architecture: Core Concepts and Best Practices
Francis Zablocki, StrategistmStoner
INFORMATION ARCHITECTURE
mStoner
CORE CONCEPTS
USER EXPERIENCE
BEST PRACTICES
23 February 2016Fran Zablocki
m
Fran Zablocki
Strategist at mStoner
@Zablocki
ABOUT ME
mStoner
INFORMATION ARCHITECTURE
DEFINITION
ELEMENTS
IA PRACTICE ON CAMPUS
DEFINITION
ELEMENTS
IA PRACTICE ON CAMPUS
CONTEXT
USER EXPERIENCE
DISCIPLINES
m
CONTEXT The structured design of shared information environments.
Source: IA for the WWW, Morville & Rosenfeld, 2006
INFORMATION ARCHITECTURE IS:
m
CONTEXTThe combination of organization, labeling, search, and navigation systems within web sites and intranets.
Source: IA for the WWW, Morville & Rosenfeld, 2006
INFORMATION ARCHITECTURE IS:
m
CONTEXTThe art and science of shaping information products and experiences to support usability and findability.
Source: IA for the WWW, Morville & Rosenfeld, 2006
INFORMATION ARCHITECTURE 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, Information Architecture for the World Wide Web, 2006
m
How do we make sense of all of this?CONTEXT
m
Planned Structure
Form & Function
Designated Pathways
But the analogy only gets so far...
INFORMATION VS. PHYSICAL ARCHITECTURE
CONTEXT
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
DEFINITION
ELEMENTS
CONTEXT
USER EXPERIENCE
DISCIPLINES
m
The Elements of User Experience
Jesse James Garrett
A Visual Model to Make Sense of a Rapidly Evolving Field
Because IA is a piece of a much bigger puzzle, we need to understand how all the pieces fit together.
USER EXPERIENCE
OUR MODEL
Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf
m
StrategyUSER EXPERIENCE
m
What do your visitors need to do?
Research
Compare
Apply
Donate
Contact
USER EXPERIENCE
STRATEGY: USER NEEDS
m
What do your visitors need to know?
Why is your school is a good fit for me?
Who teaches and learns at your school?
How can I apply? When should I apply?
What’s the latest news?
Where are you located?
USER EXPERIENCE
STRATEGY: USER NEEDS
m
What purpose does this site serve?
To sell your institution to prospective students.
To encourage alumni engagement.
To provide employees with resources.
USER EXPERIENCE
STRATEGY: SITE OBJECTIVES
m
What business objective does the site meet?
Increase applications.
Increase donations.
Decrease time spent on information requests.
STRATEGY: SITE OBJECTIVES
USER EXPERIENCE
m
ScopeUSER EXPERIENCE
Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf
m
What features will the site need to include?
Search
Social Media
Video
Forms
Logins
USER EXPERIENCE
SCOPE: FUNCTIONAL SPECIFICATIONS
m
What content will the site need to include?
Notifications
Events
News
Testimonials
Reference
SCOPE: CONTENT SPECIFICATIONS
USER EXPERIENCE
m
StructureUSER EXPERIENCE
Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf
m
Information architecture is the structure of content. It is the structure, order, and hierarchy of content labels and categories.
STRUCTURE: INFORMATION ARCHITECTURE
Source: http://www.jjg.net/elements/pdf/elements.pdf
USER EXPERIENCE
m
Interaction design is the structure of experience. It’s the hover state, slide out effect and behavior of that structure.
STRUCTURE: INTERACTION DESIGN
Source: http://www.jjg.net/elements/pdf/elements.pdf
USER EXPERIENCE
m
SkeletonUSER EXPERIENCE
Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf
m
Decisions:
What font will we use for the navigation?
How much space (kerning) between the navigation items?
How will different navigation elements be placed in relation to one another (alignment)?
SKELETON: INFORMATION DESIGN
USER EXPERIENCE
m
Decisions:
Carets or Bullets or Arrows to represent child links?
Bold or Underline to represent what page people are on?
SKELETON: NAVIGATION DESIGN
USER EXPERIENCE
m
Decisions:
Does the navigation expand on hover or click?
Does the navigation slide out sideways, or down?
How many levels are shown at once?
SKELETON: INTERFACE DESIGN
USER EXPERIENCE
m
m
SurfaceUSER EXPERIENCE
Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf
m
Every layer below contributes to visual design.
Each layer is invisible to the visitor - they just see ‘the design’.
Even as site creators, we don’t typically think of each of these components in isolation.
SURFACE: VISUAL DESIGN
USER EXPERIENCE
Visual Design
Everything Else
m
mStoner
DEFINITION
INFORMATION ARCHITECTURE ELEMENTS
IA PRACTICE ON CAMPUS
ELEMENTS
IA PRACTIVE ON CAMPUS
DEFINITION
SCHEMES & STRUCTURES
TAXONOMY & VOCABULARY
m
SCHEMES & STRUCTURES
Alphabetical
Chronological
Procedural
EXACT ORGANIZATIONAL SCHEMES
m
Topical
Tells the visitor what the most important categories of information are.
AMBIGUOUS ORGANIZATIONAL SCHEMES
SCHEMES & STRUCTURES
m
Audience
Asks the user ‘Who are you?’, ‘How do you identify yourself?’
AMBIGUOUS ORGANIZATIONAL SCHEMES
SCHEMES & STRUCTURES
m
Task
Designed to allow someone to accomplish something.
Uses action verbs in labels.
AMBIGUOUS ORGANIZATIONAL SCHEMES
SCHEMES & STRUCTURES
m
Global
Local
Hybrid (MegaMenu)
DEPTH OF STRUCTURE
SCHEMES & STRUCTURES
GlobalNavigation
LocalNavigation
Hybrid Mega-Menu Navigation
m
Contextual
Supplementary
Convenience
Site Map
BREADTH OF STRUCTURE
SCHEMES & STRUCTURES
ContextualNavigation
SupplementalNavigation
Convenience Navigation
Site Map
ELEMENTS
IA PRACTICE ON CAMPUS
DEFINITION
SCHEMES & STRUCTURES
TAXONOMY & VOCABULARY
m
Know Your Audience
Be Efficient
Anticipate what the user will expect to see
TAXONOMY TIPS
TAXONOMY & VOCABULARY
The label says research - where does it lead?
m
Uniform method of describing things
Provides quality and consistency
Consistency means predictability
‘About’ or ‘About Us’?
‘Admission’ or ‘Admissions’
CONTROLLED VOCABULARY
TAXONOMY & VOCABULARY
mStoner
INFORMATION ARCHITECTURE
DEFINITION
ELEMENTS
IA PRACTICE ON CAMPUS
IA PRACTICE ON CAMPUS
STAFFING
EVANGELISM
PROFESSIONAL DEVELOPMENT
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?
STAFFING You are ALL information architects!
WHO SHOULD DO IT?
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
EVANGELISM
PROFESSIONAL DEVELOPMENT
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
Information Architecture for the World Wide Web (Book):http://amzn.to/3RqL7y
Elements of User Experience (Book) http://amzn.to/18Q4fA4
Jesse James Garretthttp://www.jjg.net
Karen McGranehttp://karenmcgrane.com
RESOURCES
PROFESSIONAL DEVELOPMENT
Adaptive Path adaptivepath.com/events-training
Smashing Magazinesmashingmagazine.com
A List Apart’s UX sectionalistapart.com/topics/user-experience
mStoner Blogmstoner.com/team/fran-zablocki/
RESOURCES
PROFESSIONAL DEVELOPMENT
THANK YOU!
QUESTIONS?
HELP US
HELP YOU
WITH IA
@MSTONERINC | 773.305.0537
mStoner
Strategy. Research. Branding. User Experience. Content Strategy. Digital and Print Design. User Testing. Technical Execution.
www.mstoner.com
773.305.0537 [email protected] @mStonerInc