- Write a Heading as an Object You Will Reuse Many Times
- Offer Multiple Routes to the Same Information
- Write and Display Several Levels at Once
- When Users Arrive at the Target, Make Success Obvious
- Confirm the Location by Showing the Position of This Informative Object in the Hierarchy
This chapter is from the book
This chapter is from the book
This chapter is from the book
Confirm the Location by Showing the Position of This Informative Object in the Hierarchy
){kind=link}
Background: You are here
What's the most smudged, worn, stared-at part of the maps displayed in museums, subways, or parks? Right—You are here!
Reading anything goes better when you know where you are in the larger framework—deep in the book, say, or just starting the introduction, or glancing at an appendix way at the back. From that context, you know how to interpret the material. You can fit it into your mental model of the document.
Online, of course, you see no front and back covers, and you do not know how far "in" you are. When most users dive into a site, they lose their bearings quickly, and even a carefully built hierarchy is, in their minds, a mess. Don't assume that users perceive the way a site is organized or the place a particular page has within that organization.
Start your design with a good understanding of the structure of the information space and communicate this structure explicitly to the user. (Nielsen, 1996)
Tell people what branch of the hierarchy they have landed in. Yes, they may have navigated down the menu system to this page, in which case they really ought to know (but they don't). Or they jumped in from Mars, in which case they have no way to know what area this page lives in.
And within that branch, give people a clue how far down they have gone.
Another reason people want to know where they are is to return later. Without a fairly clear picture of the place this page occupies in the structure of the site, people fear they may never see it again. Yes, they can always bookmark the page, but, hey, that requires an effort on their part, and they may still not be sure the page is worth "bookmarking" when their attention is being drawn away to another page, and another.
Leave a trail of breadcrumbs
Show the path that leads from the home page down your primary menu system to this page. Show at least the first dozen characters of the title of each page beginning with Home, coming all the way down here. Each higher-level title should be hot, so a user can jump back.
Home/Gourmet/Trufes/French Specialties
Home/Beauty/Skincare/Moisturizers
The trail of breadcrumbs can help users understand where they are in the structure, if they care to figure it out. (Not everyone cares).
A breadcrumb navigation list has the benefit of being extremely simple and taking up minimal space on the page, leaving most of the precious pixels for content. (Nielsen, 1999f)
When you show the choices made, from the top level to this level, users know at a glance how they got here—or how they would have gotten here if they had walked down the staircases from the top level, rather than making a hyper-jump here. That list reinforces their sense of knowing where they are, of navigating through a stable structure.
Highlight the page within a table of contents
If your design always shows a table of contents at the top or side of the page, negotiate to have each page highlighted in the table of contents. Perhaps the table of contents expands a section containing the page and boldfaces the page title. Argue for any device that reveals the main levels of the site.
Show users where they are. Provide users with a way to know where they are in the context of your site. (Apple, 1999)
Headers help
In a book, a header is the text that appears at the top of every page, indicating the chapter you are in. To programmers, a header is the information at the front of an electronic file, with information such as date, author, and file format; and to HTML jockeys, a header is the HEAD area containing information for programs such as the browser and search engines' spiders. To users of a Web site, though, a header is that thing that appears at the top of every page, along with the main menu and logo.
Headers tell users what the section is about. Appearing on several pages in the same section, they reinforce the title and the major headings, orienting users.
Use highly visible page headers to provide location feedback. (Microsoft, 2000)
Button bars can also display location information much the way running chapter headers do in printed books. (Lynch and Horton, 1997)
Remember that moving through hyperspace is like walking through a foreign town peeking through a bandanna over the eyes. Peripheral vision is limited, so users rely heavily on text in breadcrumbs, tables of contents, or headers for orientation.
Going down any path involves uncertainty. It's important to have road signs along the way to let people know when they're on the right track and when they need to change paths. (Keeker, 1997)
Examples
|
Before |
|
|
Home Search Buy |
|
|
|
Departments: |
|
Breakout Product Wins Big |
|
Geneva |
|
Agriculture |
|
Open Docs |
|
Standard |
|
Our People |
| After | |
|
HOME | MAP | INDEX | SEARCH | BUY
|
|
|
WHAT'S NEW | PRODUCTS | SOLUTIONS | ALLIANCES |
SUPPORT | ABOUT US
|
|
|
SOLUTIONS Agriculture... |
|
audience fit
|
If visitors want this... |
How well does this guideline apply? |
|
To have fun |
Only the programmer and game player enjoy the complex challenge of getting lost. |
|
To learn |
Knowing where you are in an intellectual structure helps you learn. |
|
To act |
To move the world, we need a place to put our feet. In your writing, clear the ground and put up a signpost, welcoming visitors. |
|
To be aware |
The mind uses the experience of the body moving through space as a model for even the most intellectual activities. Forgive the senses and cater to them by telling people where they are. |
|
To get close to people |
If you forget to show people where they are in your structure, they consider you thoughtless or rude. |
|
|
Post
){kind=link}
Express your own idea on:
Subscribe:
HotText-subscribe@yahoogroups.com
Unsubscribe:
HotText-unsubscribe@yahoogroups.com