“Our site needs to be easier to use.” “I just want to be able to get to the things that are most important to me.” “It’s so hard to find anything on our site, and I’ve worked here for 15 years. I can’t imagine how someone who is just looking at it for the first time would find anything.” Sound familiar? These statements highlight just some of the common problems related to a website’s information architecture (IA). The way you organize, label, sequence, and group elements on your site — from the smallest files and paragraphs to pages and entire microsites — all of it is managed through information architecture. The better your site IA, the easier it is for visitors to find information and engage with your institution. What You’ll Learn: You will gain a comprehensive understanding of information architecture best practices in higher education. We will answer questions that cover a range of topics, including user behavior, labeling, user experience, training, governance, top-down IA, bottom-up IA, and staff and professional development. What is information architecture? What isn’t information architecture? Why can’t visitors find anything on my site? What are some common mistakes and solutions? What paths do people commonly take to find information? What should I call this link? Where does IA fit into user experience (UX) and how can it improve overall UX? How can I educate people on my campus about what IA is? What does a professional IA practice look like? Which staff positions should be responsible for IA? What do I do beyond the first level of navigation? How do I turn this wall of text into something usable? What skills are required for working on information architecture? What are some good resources for IA? Where do I start? Presenter: Fran Zablocki has worked with information architecture in some capacity for his entire career. He revamped the IA for Nazareth College’s entire website in 2008, and reimagined the IA for SUNY Geneseo’s alumni website and online community in 2011. He currently works on IA with schools nationwide as part of his role at mStoner, including Miami University in Ohio, Whittier College, Webster University, the American University of Paris, Salem State University, and the State University of New York. Fran holds a bachelor’s degree in business with a specialization in technical writing and information design, and an MBA in marketing and information systems.

1. THE JOURNEY
INFORMATION
ARCHITECTURE
THE DESTINATION
THE RETURN TRIP
Fran Zablocki • November 20, 2013
Friday, November 22, 13
mStoner

2. INTRODUCTION
WHAT IS IA?
INFORMATION
ARCHITECTURE
ELEMENTS OF IA
FUTURE OF IA
IA AS PRACTICE
Friday, November 22, 13

3. INTRODUCTION
WHAT IS IA?
IA
ELEMENTS OF IA
THE FUTURE OF IA
THE IA PRACTICE
Friday, November 22, 13

4. ABOUT ME
INTRODUCTION
ABOUT THIS
PRESENTATION
WHAT IS IA?
ELEMENTS OF IA
Friday, November 22, 13

5. ABOUT ME
Fran Zablocki
Strategist at mStoner
@Zablocki
Friday, November 22, 13

6. ABOUT THIS
PRESENTATION
Friday, November 22, 13
@Zablocki
#mstonernow

7. INTRODUCTION
HISTORY
DEFINING IA
WHAT IS IA?
USER EXPERIENCE
ARE YOU AN
INFORMATION ARCHITECT?
ELEMENTS OF IA
THE FUTURE OF IA
Friday, November 22, 13

8. LIBRARY & INFORMATION
SCIENCE
HISTORY
Source: http://www.flickr.com/photos/thomashawk/85441961/
Friday, November 22, 13

9. •
Pic of DDS
Source: http://1y4o79syc6g4difua2cvof9qco.wpengine.netdna-cdn.com/wp-content/uploads/2013/09/library-card-catalogs.jpg
Friday, November 22, 13

10. LIBRARY & INFORMATION
SCIENCE
•
Labeling | Taxonomy
Browsing| Reference
•
Friday, November 22, 13
•
•
HISTORY
Organization | Classification
Navigation | Guidance

11. THE EARLY WEB
Friday, November 22, 13
Styling? What’s Styling?
•
HISTORY
•
Pure Information Architecture

12. Source: Internet Wayback Machine - www.harvard.edu, 1997
Friday, November 22, 13

13. ALL GROWN UP
•
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
HISTORY
Friday, November 22, 13

14. Parallax IA
Friday, November 22, 13

15. Responsive IA
Mobile
Desktop
Friday, November 22, 13

16. DEFINITION
•
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.
DEFINING IA
Source: IA for the WWW,
Morville & Rosenfeld, 2006
Friday, November 22, 13

17. WHAT IA ISN’T
•
•
•
Usability Engineering
Information Design
•
Friday, November 22, 13
Software Development
•
DEFINING IA
Graphic Design
Interaction Design

18. WHAT IA IS
•
Friday, November 22, 13
•
Mostly invisible
•
DEFINING IA
Ambiguous
Hard to define

19. “The work we do involves high levels
of abstraction, ambiguity, and
occasionally ! bsurdity, and to some
a
degree we’re all still making it up as
we go along.”
— Peter Morville & Louis Rosenfeld, 2006
Friday, November 22, 13

20. ANALOGY: PHYSICAL
ARCHITECTURE
•
Planned Structure
•
Form and Function
•
Designated Pathways
•
But the analogy only gets so far...
DEFINING IA
Friday, November 22, 13

21. 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

22. A VISUAL DEFINITION
USER
EXPERIENCE
Friday, November 22, 13
The Elements of User Experience

23. THE ELEMENTS OF UX
•
Friday, November 22, 13
•
2000
•
USER
EXPERIENCE
Jesse James Garrett
A Visual Model to Make Sense of
a Rapidly Evolving Field

24. Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf
Friday, November 22, 13

25. Source: http://www.jjg.net/elements/pdf/elements.pdf
Friday, November 22, 13

26. THE ELEMENTS OF UX
•
Source: http://www.jjg.net/elements/pdf/elements.pdf
Friday, November 22, 13
•
IA is the structure of content, while
interaction design is the structure of
experience
•
USER
EXPERIENCE
IA is right smack in the middle, on the
structure plane with interaction
design.
IA is the structure / order / heirarchy
of labels, while information design is
the hover state, slide out effect and
behavior of that structure.

27. WHAT DOES AN INFORMATION
ARCHITECT LOOK LIKE?
ARE YOU AN
INFORMATION
ARCHITECT?
Friday, November 22, 13
•
You are all Information Architects
•
IA draws from many disciplines

28. WHAT DOES AN INFORMATION
ARCHITECT LOOK LIKE?
•
Journalism
Marketing
•
Friday, November 22, 13
•
•
ARE YOU AN
INFORMATION
ARCHITECT?
Information & Library Science
Graphic and Information Design

29. WHAT DOES AN INFORMATION
ARCHITECT LOOK LIKE?
•
Friday, November 22, 13
•
Technical Writing
•
ARE YOU AN
INFORMATION
ARCHITECT?
Content Strategy
Content Management

30. “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

31. WHAT IS IA?
STRATEGY
USER BROWSING
BEHAVIOR
ELEMENTS OF IA
ORGANIZATIONAL
SCHEMES & STRUCTURES
LABELING
THE FUTURE OF IA
THE IA PRACTICE
Friday, November 22, 13
PROCESS

32. STRATEGY FIRST
•
Your IA should reinforce the
strategic goals of your site:
•
Friday, November 22, 13
•
Provide relevant, timely
information to users
•
STRATEGY
Sell your institution to users
Transact - apply, donate,
contact

33. CORE ELEMENTS OF IA
•
Friday, November 22, 13
•
Context - higher education,
marketing and awarenessbuilding
•
STRATEGY
Users - prospectives first, but
many more
Content - words and images

34. WHAT WE THINK USERS DO
•
Home >
•
USER
BROWSING
BEHAVIOR
Academics >
•
Majors >
•
English >
•
Degree Requirements >
•
Apply >
•
Friday, November 22, 13
PROFIT

35. WHAT USERS ACTUALLY DO
Session 1 (mobile phone):
•
USER
BROWSING
BEHAVIOR
Google ‘English Degrees’ >
•
Your English Dept. >
•
English >
•
English Major in your
academics section >
•
Information for Future
Students >
•
Friday, November 22, 13
Contact Us > OH
THE VOICE IS ON!
> Bookmark.

36. WHAT USERS ACTUALLY DO
Session 2 (tablet):
•
USER
BROWSING
BEHAVIOR
Use bookmarked degree page >
•
Read everything you’ve ever written on the
English major >
•
Click Apply Now >
•
Friday, November 22, 13
OMG A CAT WITH BACON ON
ITS HEAD

37. WHAT USERS ACTUALLY DO
Session 3 (laptop):
•
USER
BROWSING
BEHAVIOR
Google ‘Apply to Your English Program >
•
Get lost browsing the admissions site full of
student videos >
•
Click Apply Now >
•
Complete application process >
•
Friday, November 22, 13
(Choose another school
anyway) or PROFIT

38. TYPES OF BEHAVIOR
•
•
Friday, November 22, 13
Searching for something you
know is there
•
This is why faculty and staff are
terrible testers for sites dedicated
to students
•
USER
BROWSING
BEHAVIOR
Known-Item Seeking
“Just give me my quicklinks!
NYAH!”

39. TYPES OF BEHAVIOR
•
USER
BROWSING
BEHAVIOR
Friday, November 22, 13
Exploratory Seeking
•
Browsing for the unknown
•
Most helped by topical and
audience navigation

40. TYPES OF BEHAVIOR
•
Friday, November 22, 13
•
Finding everything there is to
know
•
USER
BROWSING
BEHAVIOR
Exhaustive Research
Most helped by search

41. TYPES OF BEHAVIOR
•
•
USER
BROWSING
BEHAVIOR
Friday, November 22, 13
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).

42. ONE JOURNEY,
MANY PATHS
USER
BROWSING
BEHAVIOR
Friday, November 22, 13
•
Move from one form of behavior
to another, fluidly, over several
sessions.

43. Friday, November 22, 13

44. MYTHBUSTERS
•
USER
BROWSING
BEHAVIOR
Friday, November 22, 13
The ‘Three Click Rule’
•
One path to rule them all
•
Projecting your behavior onto
others

45. “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

46. EXACT ORGANIZATIONAL
SCHEMES
ORGANIZATIONAL
SCHEMES &
STRUCTURES
Friday, November 22, 13
•
Alphabetical
•
Chronological

47. Friday, November 22, 13

48. Friday, November 22, 13

49. AMBIGUOUS
ORGANIZATIONAL SCHEMES
ORGANIZATIONAL
SCHEMES &
STRUCTURES
Friday, November 22, 13
•
Topic Based

50. Friday, November 22, 13

51. AMBIGUOUS
ORGANIZATIONAL SCHEMES
ORGANIZATIONAL
SCHEMES &
STRUCTURES
Friday, November 22, 13
•
Audience Based
•
Asks the user ‘Who are you?’,
‘How do you identify yourself?’

52. Friday, November 22, 13

53. AMBIGUOUS
ORGANIZATIONAL SCHEMES
•
Friday, November 22, 13
•
Designed to allow someone to
accomplish something
•
ORGANIZATIONAL
SCHEMES &
STRUCTURES
Task Based
Use action verbs in labels

54. Friday, November 22, 13

55. DEPTH OF SCHEME
•
Friday, November 22, 13
•
Local
•
ORGANIZATIONAL
SCHEMES &
STRUCTURES
Global
Hybrid (MegaMenu)

56. Global
Navigation
Friday, November 22, 13

57. Local
Navigation
Friday, November 22, 13

58. Mega-Menu
Navigation
Friday, November 22, 13

59. BREADTH OF SCHEME
•
Friday, November 22, 13
•
Supplementary
•
Convenience
•
ORGANIZATIONAL
SCHEMES &
STRUCTURES
Contextual
Site Map

60. Contextual
Navigation
Friday, November 22, 13

61. Supplemental
Navigation
Friday, November 22, 13

62. Convenience
Navigation
Friday, November 22, 13

63. Site Map
Friday, November 22, 13

64. TOP-DOWN: ORGANIZATIONAL
STRUCTURE
•
Hierarchical
•
Audience
Global
•
Local
•
Friday, November 22, 13
•
•
ORGANIZATIONAL
SCHEMES &
STRUCTURES
Topical
Site Map

65. BOTTOM-UP:
CONTENT STRUCTURE
•
ORGANIZATIONAL
SCHEMES &
STRUCTURES
How you organize, label and
sequence the information inside
the WYSIWYG:
Content Structure
•
Contextual navigation
•
Friday, November 22, 13
•
Supplementary navigation

66. Content
Structure
Friday, November 22, 13

67. BOTTOM-UP:
CONTENT TEMPLATES
•
Friday, November 22, 13
•
Consistency of content
hierarchy from page to page
•
ORGANIZATIONAL
SCHEMES &
STRUCTURES
Standardized organizational
schemes for particular content
For example, a standard Majors
and Minors page applied across
the site

68. Content
Templates
Friday, November 22, 13

69. Content
Templates
Source: http://www.wofford.edu/biology/
Friday, November 22, 13

70. BOTTOM-UP:
DATA STRUCTURE
•
ORGANIZATIONAL
SCHEMES &
STRUCTURES
How you organize and label the
information about the information
inside the WYSIWYG:
Metadata
•
Friday, November 22, 13
•
Tagging

71. Webster Program Finder
Friday, November 22, 13

72. LABELING TIPS
•
Friday, November 22, 13
•
Be Efficient
•
LABELING
Know Your Audience
Anticipate what the user will
expect to see

73. Source: http://theludlowgroup.com/advertising/inspired-packaging-design-furthers-successful-branding/
Friday, November 22, 13

74. The label says
research where does it
lead?
Friday, November 22, 13

75. Friday, November 22, 13

76. CONTROLLED
VOCABULARY
•
Uniform method of describing things
•
Provides quality and consistency
•
Consistency means predictability
LABELING
Friday, November 22, 13

77. CONTROLLED
VOCABULARY
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!
LABELING
Friday, November 22, 13

78. TOP - DOWN: IA LIST
•
Easy to read
•
Easier to modify / maintain
•
A good way to represent the depth of
the site.
•
Organized by numerical, legal
structure
PROCESS
Friday, November 22, 13

79. Friday, November 22, 13

80. TOP-DOWN: IA DIAGRAM /
SITEMAP
•
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
PROCESS
Friday, November 22, 13

81. Why Attend
University of Idaho?
Undergraduate Admissions
Dates & Deadlines
Graduate Admissions
Admission Requirements
Law School Admissions
Cost & Financial Aid
Transfer Admissions
Majors & Minors
Non-degree Admissions
Frequently Asked Questions
Contact Us
Admissions
How to Apply
Visit Us
Visit Us
Friday, November 22, 13
Information for:
> Accepted Students
> First Year Students
> Transfer Students
> International Students
> Non-degree Students

82. BOTTOM-UP: CONTENT
TEMPLATES
Friday, November 22, 13
Produced in parallel with TopDown IA documents
•
PROCESS
•
Define the content structure

83. Content
Templates
Friday, November 22, 13

84. COMBINING TOP-DOWN
AND BOTTOM-UP
•
Friday, November 22, 13
•
Evolutionary, shared document
•
PROCESS
IA + Content Hybrid Model
Allows content creation to remain
cohesive with the IA and content
templates all in the same place

85. IA serves as table of contents
Friday, November 22, 13

86. Example of IA + Content
Friday, November 22, 13

87. TESTING
•
Card Sorting for:
•
•
PROCESS
•
Labeling
Organization Schemes
Tree Path Testing for:
•
•
Friday, November 22, 13
Hierarchy / Navigation paths
Dead ends

88. OPTIMAL WORKSHOP
•
OptimalSort: Online card
sorting
•
TreeJack: IA pathing
PROCESS
Friday, November 22, 13

89. Friday, November 22, 13

90. Friday, November 22, 13

91. ELEMENTS OF IA
EXTENDING GARRETT’S
MODEL
DATA-BASED WEBSITES
THE FUTURE OF IA
MULTI-PLATFORM
BROWSING
RESPONSIVE DESIGN
THE IA PRACTICE
Friday, November 22, 13
ADAPTIVE CONTENT

92. MORE AND MORE COMPLEX
•
EXTENDING
GARRETT’S
MODEL
Friday, November 22, 13
Across multiple platforms
•
Across multiple sessions
•
With exponential information
growth

93. Friday, November 22, 13

94. DATA IS GETTING BIGGER
DATA-BASED
WEBSITES
Friday, November 22, 13
•
Bottom-Up IA is going to become
more and more important as data,
not hierarchy, drives content.

95. Friday, November 22, 13

96. ONE SESSION,
MANY PLATFORMS
•
•
•
Laptop
Desktop
•
Friday, November 22, 13
Tablet
•
MULTIPLATFORM
BROWSING
Mobile
Television

97. Source: http://www.apple.com/apps/remote/
Friday, November 22, 13

98. RESPONSIVE
DESIGN
Friday, November 22, 13

99. CHUNKS NOT BLOBS
•
•
•
Making content agnostic from
style, layout, or device
Uses metadata and XML heavily
•
Friday, November 22, 13
NPR - COPE (Create Once,
Publish Everywhere)
•
ADAPTIVE
CONTENT
Karen McGrane
Watch the presentation:
http://vimeo.com/45965788

100. THE FUTURE OF IA
PERMANENT PRACTICE
STAFFING
THE IA PRACTICE
EVANGELISM
PROFESSIONAL
DEVELOPMENT
Friday, November 22, 13

101. IA AT YOUR SCHOOL
•
Use case studies from industry
Insert IA into your training
regimen
•
Friday, November 22, 13
•
•
PERMANENT
PRACTICE
Establish IA as a real thing, just
like design, development, and
content
Build up expertise among staff
who work in the UX family (hint:
that’s everybody)

102. WHO SHOULD DO IT?
•
Friday, November 22, 13
•
Reality: Key point person for IA
•
STAFFING
Ideal: Dedicated Information
Architect on staff
Goal: All staff associated with the
web need to be versed

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

104. BOOKS & SITES
•
•
Friday, November 22, 13
Elements of User Experience
(Book) http://amzn.to/18Q4fA4
•
Jesse James Garrett:
http://www.jjg.net
•
PROFESSIONAL
DEVELOPMENT
IA for the WWW (Book):
http://amzn.to/3RqL7y
Karen McGrane
http://karenmcgrane.com

105. HELP US
HELP YOU
THANK YOU!
QUESTIONS?
WITH IA
WWW .MSTONER.COM
FRAN.ZABLOCKI@MSTONER.COM
mStoner
Friday, November 22, 13