Chapter 3 - Organization and Navigation
Site
Organization: Information Architecture
Site Organization and Navigation Schemes are at the heart of the
usable web. Information Architecture is the term used to describe the way
content is organized, and an entire industry has grown up to research and
apply the ideas of Information Architecture.
Much of what is included in the term "Information Architecture" may also be described as "Project Management," and includes goal-setting and requirements gathering.
But a lot of it is taking masses of information and organizing it and labeling it so that people can find what they need.
- Elements of User Experience - (pdf) Jesse James Garrett
- "Don't Make Me Think" Chapter 6 - Street Signs and Breadcrumbs
- Designing Big Sites from Design Interact
- Introduction to Information Architecture - Chapater 2 from the O'Reilly book Information Architecture for the World Wide Web by Louis Rosenfeld & Peter Morville
Multi-tiered Navigation Schemes
 David Siegel's Urban Diary |
If all web sites had ten or fewer pages, the navigation schemes we employ could be a lot more creative. My earliest moment of sheer web design delight came when David Siegel put out his page "Urban Diary." In 1996 it was shocking to see this free-form page with hand-written bits and items taped to the page. That the taped-on parts were clickable put it way over the top.
Here are a couple of navigation schemes for small sites:
These are fine in their way, but they all suffer from a major flaw: they're not expandable. Even a small site is probably going to grow, and redoing a fixed graphic is a lot of work when all you want to do is add a single new page.
No, we need to do better than that.
The classic navigation scheme has left-side
links:
This one has right-side
links because the client wanted the links close to the scroll bar to limit
mouse movement.
A big danger with this method is that the list of links can grow out
of control.
These are still just 2-dimensional. Let us move to schemes with greater flexibility.
This one has expandable
left-side links.
Here is one with many different
navigation schemes:
- big picture links across the top (2-D)
- medium picture links in the content area (3-D)
- local links on the left side (4-D)
- local links open to reveal another tier (5-D!)
A popular scheme, and one of my favorites, is the fly-out or pull-down menu, made popular by PC applications:
Finally, a couple of voices from the other side: an excellent, non-classic scheme from the Rhode Island School of Design, and an extraordinary site which showcases the work of designers.
Discussion Challenge: Suggest a non-classic navigation scheme
==>Next