information architecture: core concepts and best practices
TRANSCRIPT
![Page 1: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/1.jpg)
Information Architecture: Core Concepts and Best Practices
Francis Zablocki, StrategistmStoner
![Page 2: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/2.jpg)
INFORMATION ARCHITECTURE
mStoner
CORE CONCEPTS
USER EXPERIENCE
BEST PRACTICES
23 February 2016Fran Zablocki
![Page 3: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/3.jpg)
m
Fran Zablocki
Strategist at mStoner
@Zablocki
ABOUT ME
![Page 4: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/4.jpg)
mStoner
INFORMATION ARCHITECTURE
DEFINITION
ELEMENTS
IA PRACTICE ON CAMPUS
![Page 5: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/5.jpg)
DEFINITION
ELEMENTS
IA PRACTICE ON CAMPUS
CONTEXT
USER EXPERIENCE
DISCIPLINES
![Page 6: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/6.jpg)
m
CONTEXT The structured design of shared information environments.
Source: IA for the WWW, Morville & Rosenfeld, 2006
INFORMATION ARCHITECTURE IS:
![Page 7: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/7.jpg)
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:
![Page 8: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/8.jpg)
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:
![Page 9: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/9.jpg)
“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
![Page 10: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/10.jpg)
m
How do we make sense of all of this?CONTEXT
![Page 11: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/11.jpg)
m
Planned Structure
Form & Function
Designated Pathways
But the analogy only gets so far...
INFORMATION VS. PHYSICAL ARCHITECTURE
CONTEXT
![Page 12: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/12.jpg)
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
![Page 13: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/13.jpg)
DEFINITION
ELEMENTS
CONTEXT
USER EXPERIENCE
DISCIPLINES
![Page 14: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/14.jpg)
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
![Page 15: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/15.jpg)
Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf
![Page 18: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/18.jpg)
m
StrategyUSER EXPERIENCE
![Page 19: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/19.jpg)
m
What do your visitors need to do?
Research
Compare
Apply
Donate
Contact
USER EXPERIENCE
STRATEGY: USER NEEDS
![Page 20: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/20.jpg)
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
![Page 21: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/21.jpg)
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
![Page 22: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/22.jpg)
m
What business objective does the site meet?
Increase applications.
Increase donations.
Decrease time spent on information requests.
STRATEGY: SITE OBJECTIVES
USER EXPERIENCE
![Page 25: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/25.jpg)
m
ScopeUSER EXPERIENCE
![Page 26: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/26.jpg)
Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf
![Page 28: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/28.jpg)
m
What features will the site need to include?
Search
Social Media
Video
Forms
Logins
USER EXPERIENCE
SCOPE: FUNCTIONAL SPECIFICATIONS
![Page 29: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/29.jpg)
m
What content will the site need to include?
Notifications
Events
News
Testimonials
Reference
SCOPE: CONTENT SPECIFICATIONS
USER EXPERIENCE
![Page 31: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/31.jpg)
m
StructureUSER EXPERIENCE
![Page 32: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/32.jpg)
Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf
![Page 34: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/34.jpg)
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
![Page 35: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/35.jpg)
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
![Page 36: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/36.jpg)
![Page 37: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/37.jpg)
m
SkeletonUSER EXPERIENCE
![Page 38: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/38.jpg)
Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf
![Page 40: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/40.jpg)
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
![Page 41: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/41.jpg)
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
![Page 42: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/42.jpg)
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
![Page 43: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/43.jpg)
m
![Page 44: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/44.jpg)
m
SurfaceUSER EXPERIENCE
![Page 45: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/45.jpg)
Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf
![Page 47: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/47.jpg)
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
![Page 48: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/48.jpg)
Visual Design
Everything Else
![Page 49: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/49.jpg)
m
![Page 50: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/50.jpg)
mStoner
DEFINITION
INFORMATION ARCHITECTURE ELEMENTS
IA PRACTICE ON CAMPUS
![Page 51: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/51.jpg)
ELEMENTS
IA PRACTIVE ON CAMPUS
DEFINITION
SCHEMES & STRUCTURES
TAXONOMY & VOCABULARY
![Page 52: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/52.jpg)
m
SCHEMES & STRUCTURES
Alphabetical
Chronological
Procedural
EXACT ORGANIZATIONAL SCHEMES
![Page 53: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/53.jpg)
![Page 54: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/54.jpg)
![Page 55: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/55.jpg)
![Page 56: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/56.jpg)
m
Topical
Tells the visitor what the most important categories of information are.
AMBIGUOUS ORGANIZATIONAL SCHEMES
SCHEMES & STRUCTURES
![Page 57: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/57.jpg)
![Page 58: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/58.jpg)
m
Audience
Asks the user ‘Who are you?’, ‘How do you identify yourself?’
AMBIGUOUS ORGANIZATIONAL SCHEMES
SCHEMES & STRUCTURES
![Page 59: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/59.jpg)
![Page 60: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/60.jpg)
m
Task
Designed to allow someone to accomplish something.
Uses action verbs in labels.
AMBIGUOUS ORGANIZATIONAL SCHEMES
SCHEMES & STRUCTURES
![Page 61: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/61.jpg)
![Page 62: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/62.jpg)
m
Global
Local
Hybrid (MegaMenu)
DEPTH OF STRUCTURE
SCHEMES & STRUCTURES
![Page 63: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/63.jpg)
GlobalNavigation
![Page 64: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/64.jpg)
LocalNavigation
![Page 65: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/65.jpg)
Hybrid Mega-Menu Navigation
![Page 66: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/66.jpg)
m
Contextual
Supplementary
Convenience
Site Map
BREADTH OF STRUCTURE
SCHEMES & STRUCTURES
![Page 67: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/67.jpg)
ContextualNavigation
![Page 68: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/68.jpg)
SupplementalNavigation
![Page 69: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/69.jpg)
Convenience Navigation
![Page 70: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/70.jpg)
Site Map
![Page 71: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/71.jpg)
ELEMENTS
IA PRACTICE ON CAMPUS
DEFINITION
SCHEMES & STRUCTURES
TAXONOMY & VOCABULARY
![Page 72: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/72.jpg)
m
Know Your Audience
Be Efficient
Anticipate what the user will expect to see
TAXONOMY TIPS
TAXONOMY & VOCABULARY
![Page 73: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/73.jpg)
The label says research - where does it lead?
![Page 74: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/74.jpg)
![Page 75: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/75.jpg)
m
Uniform method of describing things
Provides quality and consistency
Consistency means predictability
‘About’ or ‘About Us’?
‘Admission’ or ‘Admissions’
CONTROLLED VOCABULARY
TAXONOMY & VOCABULARY
![Page 76: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/76.jpg)
mStoner
INFORMATION ARCHITECTURE
DEFINITION
ELEMENTS
IA PRACTICE ON CAMPUS
![Page 77: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/77.jpg)
IA PRACTICE ON CAMPUS
STAFFING
EVANGELISM
PROFESSIONAL DEVELOPMENT
![Page 78: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/78.jpg)
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?
![Page 79: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/79.jpg)
STAFFING You are ALL information architects!
WHO SHOULD DO IT?
![Page 80: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/80.jpg)
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
![Page 81: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/81.jpg)
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
![Page 82: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/82.jpg)
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
![Page 83: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/83.jpg)
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
![Page 84: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/84.jpg)
THANK YOU!
QUESTIONS?
HELP US
HELP YOU
WITH IA
@MSTONERINC | 773.305.0537
mStoner
![Page 85: Information Architecture: Core Concepts and Best Practices](https://reader034.vdocuments.site/reader034/viewer/2022042706/58aa48d01a28ab4c348b681f/html5/thumbnails/85.jpg)
Strategy. Research. Branding. User Experience. Content Strategy. Digital and Print Design. User Testing. Technical Execution.
www.mstoner.com
773.305.0537 [email protected] @mStonerInc