Forum Moderators: open

Message Too Old, No Replies

Usability question: Whether to highlight navigation links:

1) just for index pages of sections, 2) for any page in a section

         

zollerwagner

4:44 am on Feb 14, 2005 (gmt 0)

10+ Year Member



Imagine a site with a horizontal navigation bar at the top of the page. Each link in the navigation bar represents one of the main sections of the site.

If a visitor is viewing one of the index pages for one of those main sections of the site, the text of the link becomes bold and a brighter color and the background color for that link changes.

Shouldn't the navigation link and background also change for the subpages of a section, not just its index page?

CON:
Users might be confused by what the link means if it is highlighted for all pages in a section but the link only takes the user to the index page.

PRO:
If the navigation links don't change for all pages in a section, the viewer would lose a good clue about where they are in the site.

Also, highlighting (or using tabs) seems to be standard on sites like Amazon.

What do you think?

mcibor

11:05 am on Feb 14, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I usually do this:

Imagine you have two colours on your page. One for menu, other for the text. If you're on the selected page, the corresponding link in menu is now not link, but normal text and it's colour is the colour of the text, not the menu:

A short example
en.html:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hello World</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" >
<meta name="keywords" content="hello, world" >
<style type="text/css">
.menu {background-color: rgb(100, 200, 255);}
.text {background-color: rgb(255, 200, 100);}
</style>
</head>
<body>
<div class="menu"><a href="pl.html">Witaj Świecie</a>
<span class="text">Hello World</span>
<a href="de.html">Wilkommen Welt</a></div>
<div class="text"><br>This is a simple hello World page</div>
</body>
</html>

pl.html:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hello World</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" >
<meta name="keywords" content="hello, world" >
<style type="text/css">
.menu {background-color: rgb(100, 200, 255);}
.text {background-color: rgb(255, 200, 100);}
</style>
</head>
<body>
<div class="menu"><span class="text">Witaj Świecie</span>
<a href="en.html">Hello World</a>
<a href="de.html">Wilkommen Welt</a></div>
<div class="text"><br>This is a simple hello World page</div>
</body>
</html>

What else you could do is write where you are, eg:
job offer -> engineers -> electronics

etc.

Hope this helps.
Best regards
Michal Cibor

zollerwagner

3:18 pm on Feb 14, 2005 (gmt 0)

10+ Year Member



Thanks for the quick response, Michal.

It seems from everything I'm finding in books like Design of Sites, Don't Make Me Think that having the primary navigation reflect the SECTION, rather than just the PAGE is standard. That would mean, then, that the confusion I was worried about is less likely because most users will be accustomed to this.