Information Architecture: The Journey, The Destination, The Return Trip

INFORMATION
ARCHITECTURE
THE JOURNEY
THE DESTINATION
THE RETURN TRIP
Fran Zablocki • April 23, 2014 mStoner
Tuesday, September 16, 14

INFORMATION
ARCHITECTURE
INTRODUCTION
DEFINITION
ELEMENTS
PROCESS
IA PRACTICE ON CAMPUS
mStoner

INTRODUCTION
DEFINITION
ELEMENTS
PROCESS
mStoner
INFORMATION
ARCHITECTURE

INTRODUCTION
ABOUT ME
ABOUT THIS
PRESENTATION
DEFINITION
DEFINITION mStoner

m
Fran Zablocki
Strategist at mStoner
ABOUT ME

m
Twitter: @Zablocki
Hashtag: #CSUC14
ABOUT THIS
PRESENTATION

mStoner
INFORMATION
ARCHITECTURE
INTRODUCTION
DEFINITION
ELEMENTS
PROCESS

INTRODUCTION
DEFINITION
ELEMENTS
PROCESS
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
CONTEXT
The combination of organization,
labeling, search, and navigation
systems within web sites and
intranets.

m
CONTEXT
The art and science of shaping
information products and
experiences to support usability and
findability.

“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

CONTEXT How do we make sense of all of this?
m

INFORMATION VS. PHYSICAL
m
ARCHITECTURE
Planned Structure
Form & Function
Designated Pathways
But the analogy only gets so far...
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

HISTORY
DEFINITION
ELEMENTS
PROCESS
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

Source: http://www.jjg.net/elements/pdf/elements.pdf

m
USER Strategy
EXPERIENCE

What do your visitors need to do?
Research
Compare
Apply
Donate
Contact
m
USER
EXPERIENCE
STRATEGY: USER NEEDS

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?
m
USER
EXPERIENCE
STRATEGY: USER NEEDS

What purpose does this site serve?
To sell your institution to prospective
students.
To encourage alumni engagement.
To provide employees with resources.
m
USER
EXPERIENCE
STRATEGY: SITE OBJECTIVES

STRATEGY: SITE OBJECTIVES
What business objective does the
site meet?
Increase applications.
Increase donations.
Decrease time spent on information
requests.
m
USER
EXPERIENCE

m
USER Scope
EXPERIENCE

m
What features will the site need
to include?
Search
Social Media
Video
Forms
Logins
USER
EXPERIENCE
SCOPE: FUNCTIONAL
SPECIFICATIONS

m
SCOPE: CONTENT
SPECIFICATIONS
What content will the site need to
include?
Notifications
Events
News
Testimonials
Reference
USER
EXPERIENCE

m
USER Structure
EXPERIENCE

Information architecture is
the structure of content. It is
the structure, order, and
hierarchy of content labels
and categories.
m
STRUCTURE:
INFORMATION ARCHITECTURE
USER
EXPERIENCE

m
STRUCTURE:
INTERACTION DESIGN
Interaction design is the
structure of experience. It’s
the hover state, slide out
effect and behavior of that
structure.
USER
EXPERIENCE

m
USER Skeleton
EXPERIENCE

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)?
m
SKELETON:
INFORMATION DESIGN
USER
EXPERIENCE

m
SKELETON:
NAVIGATION DESIGN
Decisions:
Carets or Bullets or Arrows to
represent child links?
Bold or Underline to represent what
page people are on?
USER
EXPERIENCE

Decisions:
Does the navigation expand on hover
or click?
Does the navigation slide out
sideways, or down?
How many levels are shown at once?
m
SKELETON:
INTERFACE DESIGN
USER
EXPERIENCE

m
USER Surface
EXPERIENCE

m
SURFACE: VISUAL DESIGN
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.
USER
EXPERIENCE

Visual Design
Everything Else

INTRODUCTION
DEFINITION
INFORMATION
ARCHITECTURE ELEMENTS
PROCESS
mStoner

DEFINITION
ELEMENTS
PROCESS
SCHEMES &
STRUCTURES
TAXONOMY &
VOCABULARY

m
SCHEMES &
STRUCTURES
EXACT ORGANIZATIONAL
SCHEMES
Alphabetical
Chronological
Procedural

m
AMBIGUOUS ORGANIZATIONAL
SCHEMES
Topical
Tells the visitor what the most
important categories of information
are.
SCHEMES &
STRUCTURES

m
SCHEMES
Audience
Asks the user ‘Who are you?’, ‘How
do you identify yourself?’
SCHEMES &
STRUCTURES

m
SCHEMES
Task
Designed to allow someone to
accomplish something.
Uses action verbs in labels.
SCHEMES &
STRUCTURES

m
DEPTH OF STRUCTURE
Global
Local
Hybrid (MegaMenu)
SCHEMES &
STRUCTURES

Global
Navigation

Local
Navigation

Hybrid Mega-Menu
Navigation

m
BREADTH OF STRUCTURE
Contextual
Supplementary
Convenience
Site Map
SCHEMES &
STRUCTURES

Contextual
Navigation

Supplemental
Navigation

Convenience
Navigation

Site Map

m
TAXONOMY TIPS
Know Your Audience
Be Efficient
Anticipate what the user will expect
to see
TAXONOMY &
VOCABULARY

The label says
research -
where does it
lead?

CONTROLLED VOCABULARY
m
Uniform method of describing things
Provides quality and consistency
Consistency means predictability
‘About’ or ‘About Us’?
‘Admission’ or ‘Admissions’
TAXONOMY &
VOCABULARY

ELEMENTS
PROCESS
DOCUMENTATION
TOOLS

m
IA LISTING
Easy to read
Easier to modify / maintain
A good for representing the depth of the
site.
Organized by numerical, legal structure
DOCUMENTATION

m
IA DIAGRAM / SITEMAP
A way to visually represent the IA.
A good way to represent the breadth of
the site.
Good at showing peer relationships such
as related pages.
More work to maintain.
DOCUMENTATION

Admissions
Why Attend
University of Idaho?
Undergraduate Admissions
Graduate Admissions
Law School Admissions
Transfer Admissions
Contact Us
Visit Us
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

m
OmniOutliner
Google Docs
UXPin
Any Word Processor or Spreadsheet
TOOLS

PROCESS
IA PRACTICE
ON CAMPUS
STAFFING
EVANGELISM
PROFESSIONAL
DEVELOPMENT

STAFFING
WHO SHOULD DO IT?
Ideal: Dedicated Information
Architect on staff
Reality: Key point person for IA
Goal: All staff associated with the
web need to be versed

BE A CHAMPION
Demand that IA be taken seriously
Use the tools at your disposal
Read, watch, listen, learn - there is
an entire IA community out there
EVANGELISM

PROFESSIONAL
DEVELOPMENT
IA AT YOUR SCHOOL
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)

RESOURCES
Information Architecture for the
World Wide Web (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
PROFESSIONAL
DEVELOPMENT

RESOURCES
Adaptive Path
adaptivepath.com/events-training
Smashing Magazine
smashingmagazine.com
A List Apart’s UX section
alistapart.com/topics/user-experience
mStoner Blog
mstoner.com/team/fran-zablocki/
PROFESSIONAL
DEVELOPMENT

THANK YOU!
QUESTIONS?
HELP US
HELP YOU
WITH IA
WWW.MSTONER.COM
FRAN.ZABLOCKI@MSTONER.COM
mStoner

Information Architecture: The Journey, The Destination, The Return Trip

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (7)

Similar to Information Architecture: The Journey, The Destination, The Return Trip

Similar to Information Architecture: The Journey, The Destination, The Return Trip (20)

More from Francis Zablocki

More from Francis Zablocki (9)

Information Architecture: The Journey, The Destination, The Return Trip