• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 6. Web Page Navigation > Lab 6.2 Exercises

Lab 6.2 Exercises

6.2.1. Understand the Main Requirements of Navigation Links

a) Describe several means of showing the location of a page within a Web site.




Answer: The simplest form is on a single line, showing the names of the levels where this page is located within the current Web site. Include the name of this page at the end of the list. Alternatively, you could have a menu on each page listing all of the entries and the entry for the current page has a different appearance (color, font, is not a hyperlink, and so forth.). Using Web scripting languages like JavaScript, you can create a menu that expands as you go deeper into the hierarchary. You not only have an indication of where you are located, but you have access to the other areas as well.

One of the advantages of the first choice is that is very straightforward to develop, particularly if your directory structure matches the structure of your site (which is a good idea, anyway). When you create the pages, you just include the paths to the file (preferably in a human-readable form).

Server-side scripting languages can actually automate the process for you. Such scripts can determine the directory path on the file system (among other things) and automatically generate the menu for you, including links back up to the previous levels. Such a scheme generally requires that you have a default page (i.e., index.html), so the script simply provides a link to the directory and the server handles the issue of the default page or it tacks on the name of the default page to the end of the link in generates.

You can take this mechanism one step further by using the ability of most Web servers (e.g., Apache) to automatically include files at particular locations. The file you include can be a script that creates the line. When you want to change the layout, all you need to do is change a single file and not on every page.

Both the useit.com and Yahoo sites have navigation markers like this, where the individual entries are links back up the hierarchy.

The Web site for the Hewlett-Packard product OpenView is a great example of a menu that expands out to show you where you are located in the hierarchy. (OpenView is an outstanding system monitoring and administration tool.) In addition, the menu entry for your current location appears a different color, making it easy to zero in on where you are.

Each of these methods has its own shortcomings. On relatively small sites like useit.com, a single line list is not a problem. However, on the Yahoo site with millions of entries, you end up with some very long lines, for example:

Error! Bookmark not defined. > Error! Bookmark not defined. > Error! Bookmark not defined. > Error! Bookmark not defined. > Error! Bookmark not defined. > Error! Bookmark not defined. > Error! Bookmark not defined. >

This may become a problem on systems using a lower resolution and larger fonts. However, in the case of Yahoo, it is necessary in order to provide the level of service they want. That is, they sacrifice appearance for usability and consistency.

b) Visit the Yahoo.com site. You will see that it uses the table-of-contents-plus-pages model of navigation. Why is it so effective?




Answer: Most users are familiar with reading printed books that universally employ this model. Adopting the model for a Web site provides users with a familiar structure and gives them confidence to navigate within the site. Each general area of information available is grouped together, with just a few of the more important areas listed at the second level. As we discussed in the previous exercise, such “shortcomings” are necessary for sites with so much information. However, each time you go deeper, you still have the same table of contents (only that it applies just to the current section).

6.2.2. Apply Solutions to Meet the Main Navigation Requirements

a) An example of a site that gives a sense of location is Jakob Nielsen's useit.com site. Visit this site and discuss the technique.




Answer: The top of each page tells you in which section you are located. This gives you a sense of how deep in the hierarchy you are.

At his top-level Web site, the top of the page is as shown in Figure 6.2.

Figure 6.2. Top-level Location

When links are followed to take the user to pages in a sub-site, the top of the page is as shown in Figure 6.3.

Figure 6.3. Location Indicator Two Levels Down

Note that this is a very compact method of conveying the location within a Web site.

b) Visit the Yahoo site and discuss it in terms of the link choices.




Answer: Let us consider some examples from the Yahoo site. The top portion of a page at one of the major subsites of the Yahoo portal is shown in Figure 6.4.

Figure 6.4. Page at Yahoo Portal Site

First, notice how the sense of location, discussed under the previous heading, is used to show we are located at Home > Computers and Internet > Internet > World Wide Web. For the many links that necessarily must appear on this page, the designer has used three main groupings. Along the top of this page, and on virtually every page on the Yahoo Web site, appear the links to the main Yahoo subsites. Down the right-hand side of the page are displayed the links to the top level of the News subsite. Note once again how Yahoo shows the location within the directory structure by removing the link from the words “World Wide Web.”

Yahoo is essentially a set of directory and subdirectory pages. The main content of the example page contains links to the next levels of subdirectories. Note that particularly important subdirectories merit their own list of links, separated from the rest by a horizontal line.

Finally, note the powerful search feature at the top of the page for the serious reader.

When the user follows a link to one of the news articles and descends a level in the subsite, a new link design problem appears (see Figure 6.5).

Figure 6.5. Fragment of a News Item Page within Yahoo News Site

Major changes to link arrangements have been made. The presentation of the sense of place shows all places from “Home” to “Health” and highlights the current location, “Tech.” A second level of location is required on this page, using the “>” method as already described.

The links down the left side of the page show other headings and news articles to be read. This is a clever device to save the user having to return the main list of articles before selecting another one to read.

Furthermore, this page is a collection of other articles about the topic of the headline, so a further article list of links is presented. Note that four different types of navigation links are presented in this small page fragment.

In the examples shown so far, the link text has been grouped in horizontal and vertical lists. This draws the user's attention to the link category. Links were originally designed so they could appear within the text and image content of the Web page itself. Thus, links can appear within the body of sentences and be distinguished from other words by markup in blue and underlined weight. These links are referred to as embedded links.

Again using a Yahoo news article as an example, we see the use of embedded links in Figure 6.6.

Figure 6.6. Part of Yahoo News Item Page

Where a whole line forms a link, such as the headlines Figure 6.6, this is not a problem and stands out well within the article text as a whole. The links for “microsoft.com” and “yahoo.com” are more problematic, particularly if several links are included in the same sentence. Recent research into the use of embedded links is showing that users tend to miss these links when intent on reading the words of the text.

More modern thinking dictates that the embedded links should at the least be repeated at the end of the article, so that all links that relate to the text appear in one place. A second benefit of this approach is that suitable meaningful text can be used for the links themselves, rather than twisting the words of a sentence to act as link text. Many embedded links in a sentence also detracts from reading, and in this case the embedded links should be abandoned in favor of a list of links at the end of the article.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint