Does information architecture have a set of universal principles we can draw from to facilitate the design process? Beats me, but these are eight that I use.
For more information, see my article in the ASIS&T August 2010 Bulletin: http://asis.org/Bulletin/Aug-10/AugSep10_Brown.pdf
21. Subscriptions
Search
Inspiring people to care about the planet since 1888 Learn More »
HOME PHOTOGRAPHY ANIMALS ENVIRONMENT TRAVEL ADVENTURE NATGEOTV KIDS SHOP
Daily News The Magazine Maps Video Science Education Games Music Blogs Movies In the Field Site Index
Home Animals Ancient World Energy Environment Cultures Space/Tech Weird News Photos News Video News Blogs
"Roaming" Magnetic Fields Found
Weak "seed fields" may solve galaxy mystery
Most Popular News
"Terrifying Sea Beast" Hauled Up
See photos of Bathynomus giganteus, a
giant crustacean recently brought to the
surface during a deep-sea survey.
Facts Behind April Fool's Day
Learn how this bizarre holiday got started,
and how straight-faced scientific research
can be sillier than the wackiest pranks.
Sky Show: Venus, Mercury to Meet
Normally elusive, Mercury will be shining
brightly near Venus for most of this month—
with a close conjunction on April 3 and 4.
22. shortage of candidates. Save Earth
If you've had a Coke, You've helped
(Related: "Earliest Known Galaxies Spied in Deep Hubble Picture.") support global recycling services.
LivePositively.com/JoinUs
It's also unclear whether the roaming seed fields played a role in the subsequent
formation of galaxies and galaxy clusters, since the fields' exact intensities have
Image Earth
yet to be measured. ClipArt - Pictures Image Earth
www.Bing.com
"In general, I tend to think that they do not play a significant role in the formation
of the galaxies, because they are too weak" at the low levels the Fermi team
observed, Neronov said.
The new Fermi data on blazars are published in this week's issue of the journal
Science.
Latest News
"Supertaskers" Can Frozen Fish Reel in New Blind Snakes Photos: Braving the
Phone and Drive Wind Power Discovered Iceland Volcano
More From National Geographic
Water Pressure Life in Color: Purple Photo of the Day: Maya Rise and Fall Lost Tribes of the Wind Power Mountain Gorilla
Best of May 2009 Green Sahara
25. THE WHITEBOARD
Search:
PLAY BALL: President Obama
tossed the first pitch at
Nationals Park Monday
afternoon, throwing high and
wide to start the Washington
team's opener against the
Philadelphia Phillies.
Obama drew cheers and boos
from the crowd as he strolled
onto the field wearing a Chicago
White Sox cap, in a nod to his
hometown team.
Continue Reading
All of today's posts
Your afternoon speed-read Specter sport
'Room' for discussion on yuan
Reuters | YAO & BUCKLEY Monday Apr. 5, 2010
All Times Eastern
Pressure mounts on USDA claims
The Hill | KEVIN BOGARDUS
7:00 AM
Jobless benefits expire for thousands
CNN | BRIANNA KEILAR
8:00 AM
Do voters care about unemployment?
Atlantic | DEREK THOMPSON 9:00 AM
Service sector gauge grows faster
AP | TALI ARBEL 9:30 AM Obama receives the
26. In demand
Celgarded
'Bloody triage' for WHCA dinner
By KENDRA MARR | 04/02/10 2:13 PM Tight access at Obama's speech
By GLENN THRUSH | 04/02/10 3:16 PM
The WHCA is flooded with record-breaking
demand for 300 tables, at $2,250 a pop, just The Charlotte company hosting Obama says
one week after sending invites ... reporters can talk with employees only about
how they "felt" after the speech ...
Continue Reading
Continue Reading
Velvet carpet
Overplayed
Europe leaders dining with Obama
31. 8
Navigation
by function
http://www.flickr.com/photos/mvjantzen/377111497/sizes/o/
32. Hanley-Wood CMS Information Architecture 10
Version 1.2 published October 22, 2007 by Dan Brown (dan@eightshapes.com)
4.0 Dynamic Navigation
To respond to breaking news or to escalate crucial
categories, the global navigation includes a space
to highlight lower-level topics. Hanley-Wood CMS Information Architecture Version 1.2 published October 22, 2007 by Dan Brown (dan@eightshapes.com)
8
[MagazineTitle] Current Issue • Archive • Subscriptions Default View
[CategoryName]
[topic] [topic] [topic]
2.0 Magazine Navigation links toarea contains three
[topic]
The hot topics
Search
or four
[topic] lower-level topics.
[topic] Products
& Reviews
Hot Topics: [topic], [topic], [topic] [Service] • [Service] • [Service] • [Service] • more...
These topics should be consistent
The web site and the print version of the site, and should
throughout the
change:
magazines are distinct entities but must reflect
When there’s breaking news in a
and support each other. new category
At a predetermined interval CMS Information Architecture
Hanley-Wood to
Version 1.2 published October 22, 2007 by Dan Brown (dan@eightshapes.com)
9
reflect the topics with the latest Default View
[MagazineTitle]
stories Issue • Archive • Subscriptions
Current
[CategoryName] Search These links take users to a table of
[topic] [topic]
Hot Topics: [topic], [topic], [topic]
[topic] [topic]
Service Navigation
[topic] [topic] Products
& Reviews
3.0 [Service] • [Service] • [Service] • [Service] • more...
contents for the current issue of the
print magazine, a list of every issue,
and a page of subscriptions options.
Hanley Wood’s sites offer more than just article-
based content. Services provide useful tools and
data to the building industry.
Hanley-Wood CMS Information Architecture 7
Version 1.2 published October 22, 2007 by Dan Brown (dan@eightshapes.com)
[MagazineTitle] Current Issue • Archive • Subscriptions Default View Why No Categories?
[CategoryName] Search Every site has a set of 3-4 primary Leaving services uncategorized
Products services, drawn by the editors from affords Hanley Wood several
[topic] [topic]
Hot Topics: [topic], [topic], [topic]
[topic] [topic] [topic]
Topical Navigation
[topic] & Reviews
1.0[Service] • [Service] • [Service] • [Service] • more... the master list of services. By varying
the exposed services by site, editors
advantages:
Scalability: When it comes time
can meet the needs of individual
The primary navigation element across all Hanley to addbe hamstrung Hanleyexisting
won’t
new services, Wood
audiences. The “more...” link provides
by an
Wood sites is topical navigation, which allows set of categories.
access to a comprehensive list of
services.
Junk-Drawer Syndrome:
quick access to specific topics.
Awards Inevitably, some services will be
orphaned, forcing the need for a
Books catch-all group.
[MagazineTitle] Building Code Information Current Issue • Archive • Subscriptions Default View Top-Level Topics
[CategoryName] Quick Access: Without an
Cost vs. Value Search
additional layer of navigation, appears
Primary topical navigation To balance user needs with the
Courses [topic] Products as a horizontal row in the global operational issues surrounding
[topic] [topic] [topic] [topic] [topic] & Reviews users can quickly access these
Hot Topics: [topic], [topic], [topic] Events navigation area. The current topic
[Service] • [Service] • [Service] • [Service] • more... useful tools.
content management, every Hanley
is highlighted, if relevant. Every Wood site should draw top-level
Forms
story should appear in one of the topics from this list:
House Plans top-level topics. If a story appears in
Jobs more than one topic, and there is no Operations and Finance
Products pre-determined context, the story’s Construction and Installation
primary topic is highlighted. Materials
Project Galleries
Sales and Marketing
Research Reports Technology
Subcontractors Trends
Top Companies Design and Planning
[MagazineTitle] Current Issue • Archive • Subscriptions Expanded View
Videos Economics and Business
[CategoryName] Search As users roll over each topic, an
Weather By using the same top-level topics
[topic] [topic] [topic] [topic] [topic] [topic] Products expanded menu appears to show
Yellow Pages & Reviews across all sites, Hanley Wood also
sub-topics. Given the flat hierarchy of
Hot Topics: [topic], [topic], [topic] •
•
[subtopic001]
[subtopic002]
• [subtopic005]
• [subtopic006]
[Service] • [Service] • [Service] • [Service] • more...
Hanley Wood’s contolled vocabulary, facilitated content syndication and
• [subtopic003] • [subtopic007]
these subtopics should be chosen by sharing between them.
• [subtopic004] • [subtopic008]
an editor.
33. Hanley-Wood CMS Information Architecture 10
Version 1.2 published October 22, 2007 by Dan Brown (dan@eightshapes.com)
4.0 Dynamic Navigation
To respond to breaking news or to escalate crucial
categories, the global navigation includes a space
to highlight lower-level topics. Hanley-Wood CMS Information Architecture Version 1.2 published October 22, 2007 by Dan Brown (dan@eightshapes.com)
8
[MagazineTitle] Current Issue • Archive • Subscriptions Default View
[CategoryName]
[topic] [topic] [topic]
2.0 Magazine Navigation links toarea contains three
[topic]
The hot topics
Search
or four
[topic] lower-level topics.
[topic] Products
& Reviews
Hot Topics: [topic], [topic], [topic] [Service] • [Service] • [Service] • [Service] • more...
These topics should be consistent
The web site and the print version of the throughout the site, and should
change:
magazines are distinct entities but must breaking news in a
When there’s
reflect
and support each other. new category
At a predetermined interval CMS Information Architecture
Hanley-Wood to
Version 1.2 published October 22, 2007 by Dan Brown (dan@eightshapes.com)
reflect the topics with the latest
[MagazineTitle]
stories
Current Issue • Archive • Subscriptions Default View
[CategoryName] Search These links take users to a table of
contents for the current issue of the
[topic] [topic]
Hot Topics: [topic], [topic], [topic]
[topic] [topic]
Service Navigation
[topic] [topic] Products
& Reviews
3.0 [Service] • [Service] • [Service] • [Service] • more... print magazine, a list of every issue,
and a page of subscriptions options.
Hanley Wood’s sites offer more than just article-
based content. Services provide useful tools and
data to the building industry.
Hanley-Wood CMS Information Architecture
Version 1.2 published October 22, 2007 by Dan Brown (dan@eightshapes.com)
[MagazineTitle] Current Issue • Archive • Subscriptions Default View
[CategoryName] Search Every site has a set of 3-4 primary
Products services, drawn by the editors from
[topic] [topic]
Hot Topics: [topic], [topic], [topic]
[topic] [topic] [topic]
Topical Navigation
[topic] & Reviews
1.0[Service] • [Service] • [Service] • [Service] • more... the master list of services. By varyi
the exposed services by site, editor
can meet the needs of individual
The primary navigation element across all H audiences. The “more...” link prov
Wood sites is topical navigation, which al access to a comprehensive list of
services.
quick access to specific topics.
Awards
Books
[MagazineTitle] Building Code InformationArchive
Current Issue •
[CategoryName] Cost vs. Value
Search
[topic] [topic] [topic] Courses [topic]
[topic] [topic]
Hot Topics: [topic], [topic], [topic] Events [Service] • [Service] • [Service]
Forms
Slot
To be clear: Stephen and I are each doing a separate but coincidentally related talk.
How many of you have been practicing IA or something like it for more than 3 years?
How many of you have been practicing IA or something like it for 3 years or less?
This is for everyone raising their hand right now.
I’m Dan. I work at EightShapes.
On a project a couple years ago, a client asked me, “What did you base these design decisions on?”
I provided a rationale that referenced user research, objectives, and the requirements analysis process we had just been through.
“But how do you know these decisions are right?”
I understood that she was asking for some underlying theory, some cohesive set of guidelines. So I rattled a few off the top of my head.
“I need you to put that in your document.”
Which I did, and it’s stuck with me ever since. Beyond design themes that we extract at the project level, are there more universal notions of IA. These are those principles and a couple more.
Let’s set up our principles by providing a bit of context.
WHAT we design can help us figure out what guidelines would be useful.
You're at a conference full of IAs, so it would be interesting to ask this question of other people.
2IAs create structures.
•Structures are the set of relationships between concepts.
3Our role is to make those structures meaningful, useful, explicit.
•We need to make decisions about which concepts are most important and which relationships users would be most interested in.
•We need to decide how to express those relationships.
•We need to decide how those relationships grow and flex to accommodate new variations of the concepts.
•These guiding principles provide a sense of what makes structures work.
No particular order, but this first one is pretty abstract.
Content...
•May be classified in terms of its function, purpose or structure
•Exhibits behaviors related to aging, popularity, prominence
•Is subject to rules
•Whenever people talk about a content type, they have expectations on:
•kinds of information it will include
•the way it relates to other content of the same or different types
•the ways in which it can be classified
CLICK
•Describe it in terms of properties that it has in common with other content.
Implication: Objects are structured in and of themselves. Those structures face inward and outward. We must design the structures of content objects as well as the structures in which they thrive.
From Epicurious
Elements that structure the recipe
Elements that allow me to make connections to other recipes
With more options, it can be harder for people to make a choice.
Based on the book CLICK
•To be clear: big menus of options will be challenging for users to find what they want.
•Exception: known item searches by experts
•Implication: structures should provide digestible groups without losing coherence or meaning
Gradually revealing information, as requested by the user
Providing a means for accessing additional information
Netflix was the original, the canonical example for AJAX technology, too
Hulu provides a reasonable facsimile
Roll over an episode and get more details of the episode
Corollary: A piece of content should come in multiple configurations to allow different ways of providing access
Hulu episodes can be represented in a single line of a table, an entry in a gallery, or in a hover balloon.
Implication: structures should compartmentalize content types, giving a single piece of content multiple "guises" or views, such that it has flexibility to be displayed in a variety of contexts
Category names don't necessarily speak for themselves
Providing an example of what appears in the category can help users triangulate its content
Was having a hard time finding a good example on the web, but then I found this in the App store for iPad.
Point to GAMES
Implication: Structures should include a rule for selecting and highlighting exemplars in the absence of other human-supplied direction.
Structures should permit pieces of content to be escalated to provide good examples. They might be chosen by a human or by rule.
Went to iTunes since they tend to be light on explicit categorization. Wanted to see what they came up with and I see exemplars going horribly wrong.
When good exemplars go bad.
Do these exemplars help me distinguish the categories?
Do I have confidence that I’m going to see successfully segmented categories?
Perhaps the best example online.
Look at these categories!
Categories we know you like. Here are some examples.
Also implied: hierarchy of video-watching decision-making in the Brown house.
In recent years, this principle is becoming more self-evident.
Could I say: Powerful search has rendered home pages useless. Perhaps that’s taking it too far.
In short: users don’t always start their experience on your home page.
From a UI perspective, the challenge here is to make the inside pages navigationally useful without obscuring the content
Structures must be flexible enough such that they don’t depend on a single starting point.
When designing interior pages, the use of exemplars is crucial: pick examples of categories to expose them, but choose them in such a way to make them plausibly relevant to the content.
Implication: Structures should de-emphasize a particular starting point (though marketing might say otherwise) and should provide mechanisms for exposing a range of content using the current context as a starting point
Suppose you arrived at this Nat Geo news story through some syndicated source.
The question we need to ask ourselves as designers is what parts of the structure do I need to expose?
How can I use the current content here as a bridge to get from this to other parts of the site?
So, can they use this news story as a mechanism for reasonably exposing other areas of the site? Should they?
Structures must accommodate new content and new concepts
Navigation mechanisms that allow for an expanding middle: interface elements
Personalized content categories. Structure of Netflix expands to accommodate new ways of classifying videos.
BUT does the navigation? Not really. Netflix elegantly includes new (seemingly customized) categories. Because of this content area, they can recede the other navigation mechanisms of the site.
Politico 44, a subsection of Politico.com doesn’t have any discernible sub-categories, another way of dealing with scale.
CLICK
Instead, they offer some catchy box headers that help users understand content by scanning.
This is something I did for a large content site designed a couple years ago. Ripped off from an old version of CNN.com
CLICK
Here, Builder Magazine’s navigation includes a mechanism for escalating key sub-topics.
This is something I did for a large content site designed a couple years ago. Ripped off from an old version of CNN.com
CLICK
Here, Builder Magazine’s navigation includes a mechanism for escalating key sub-topics.
Content doesn’t live in one taxonomy of categories.
Any site must have more than one way to categorize content.
EA exposes their polyhierarchy through this faceted navigation scheme: I can add “filters” by clicking on the terms that help find the game I want.
In this context, however, I suspect people may use one or two facets to narrow the list to answer simple questions like “What’s coming out for XBox?”
Perhaps my most controversial principle.
Navigation mechanisms should be defined by what they do, not where they are.
Say good-bye to the following terms: left nav, global nav, header nav, footer nav
Purposes: exploring related topics, digging deeper into the current topic, escaping from the current topic, filtering a collection
This was the documentation for the project we saw earlier... CLICK
Implication: Give your navigation a purpose, treat it like a toolbar
Navigation tools with a purpose have a unifying theme and provide a structure for moderating growth and scaling appropriately
1IAs create structures
2Is there a single unified theory to drive that process? I have no idea.
3There are, however, at least eight principles we can consider in designing our structures
Break? Ignore? Sure.
But they provide a useful starting point.
Besides these universal principles, I often rely on project-specific principles. Guidelines that drive the design efforts that are derived during the project itself. Stephen’s going to talk about that next.
Before we go there, though, let me leave you a thought about what makes a good principle. And maybe something a little more.
What makes the principles meaningful?
Agreement: We all agree with the principle’s underlying concept.
CLICK
Interpretation: We understand that the principle leaves room for interpretation, but that our design decisions should be traceable to it.
CLICK
Internalization: Principles are most useful when we’ve internalized them, when our design work is driven by the principle ALMOST on an unconscious level. We can internalize something when it makes sense to us inherently.
As a field, we are creating a language to talk about novel problems and old problems in a new way.
Every person in this room contributes to that language.
Don’t let grumpy old men tell you that your contributions aren’t worthwhile. Or are only worthwhile if they happen at a certain level.
If you have a tool that works for the job at hand, use it.
If it doesn’t work, design a better one.
What makes the principles meaningful?
Agreement: We all agree with the principle’s underlying concept.
CLICK
Interpretation: We understand that the principle leaves room for interpretation, but that our design decisions should be traceable to it.
CLICK
Internalization: Principles are most useful when we’ve internalized them, when our design work is driven by the principle ALMOST on an unconscious level. We can internalize something when it makes sense to us inherently.
As a field, we are creating a language to talk about novel problems and old problems in a new way.
Every person in this room contributes to that language.
Don’t let grumpy old men tell you that your contributions aren’t worthwhile. Or are only worthwhile if they happen at a certain level.
If you have a tool that works for the job at hand, use it.
If it doesn’t work, design a better one.
What makes the principles meaningful?
Agreement: We all agree with the principle’s underlying concept.
CLICK
Interpretation: We understand that the principle leaves room for interpretation, but that our design decisions should be traceable to it.
CLICK
Internalization: Principles are most useful when we’ve internalized them, when our design work is driven by the principle ALMOST on an unconscious level. We can internalize something when it makes sense to us inherently.
As a field, we are creating a language to talk about novel problems and old problems in a new way.
Every person in this room contributes to that language.
Don’t let grumpy old men tell you that your contributions aren’t worthwhile. Or are only worthwhile if they happen at a certain level.
If you have a tool that works for the job at hand, use it.
If it doesn’t work, design a better one.