HTML and CSS Reference
In-Depth Information
Figure 5.11
Random site
organization
FAQ
Where do I begin?
Sometimes it is difficult to begin creating a site map for a Web site. Some design teams meet
in a room with a blank wall and a package of large Post-it ® Notes. They write the titles of
topics and subtopics needed on the site on the Post-it ® Notes. They arrange the notes on
the wall and discuss until the site structure becomes clear and there is consensus within the
group. If you are not working in a group, you can try this on your own and then discuss the
way you have chosen to organize the Web site with a friend or fellow student.
5.2 Web Site Navigation—Best Practices
Ease of Navigation
Sometimes Web developers are so close to their sites that they can't see the forest for the
trees. A new visitor will wander on to the site and not know what to click or how to
find out what it offers. Clearly labeled navigation on each page is helpful—it should be
in the same location on each page for maximum usability. A visitor should not feel lost
in the site. Jakob Nielsen, a well-known Web usability and Web design professional,
favors what he calls breadcrumb trails for larger sites. Figure 5.12 shows a page from
http://www.cabq.gov, a site that has a well-organized main navigation area below
the logo area in addition to personalized breadcrumb trails for each visitor. To access
the What is Global Warming page currently displayed, the visitor has already viewed
the Home, Albuquerque Green, and Stop Global Warming pages. Note the breadcrumb
navigation at the top of the main content area: Home > Albuquerque Green > Stop
Global Warming > What is Global Warming? Visitors can easily retrace their steps or
jump back to a previously viewed page. The left side of this page also contains a vertical
navigation bar with links for the Albuquerque Green section.
Navigation Bars
Clear navigation bars, either graphic- or text-based, make it obvious to Web site users
where they are and where they can go next. The site shown in Figure 5.13 includes a
vertical text navigation bar down the left side of the page.
 
Search WWH ::




Custom Search