Developer

Orient visitors with You Are Here button styling

In order to navigate your Web site efficiently, visitors need to know where they are at all times. That's why providing visual feedback to indicate the current page's position in the site navigation scheme is such an important usability issue.

In order to navigate your Web site efficiently, visitors need to know where they are at all times. That's why providing visual feedback to indicate the current page's position in the site navigation scheme is such an important usability issue.

For visitors who enter your Web site through the home page, providing feedback as they move from page to page through your navigation structure is a convenience and a confirmation that they have arrived at their intended destination. However, those visitors could use their memory (and the Back button in their browsers) to retrace their steps if they become disoriented.

Visitors who enter your site at some other page via links from a search engine or other site can't retrace their steps to a known starting point. Instead, they must rely solely on the clues you give them to navigate your site. Your site's navigation bar is like a map to your site, but even the best maps can be hard to use if visitors can't find their current location. That's why you need to provide your visitors with the visual feedback they need to orient themselves in your site.

Orientation tools

To address this need to orient visitors in your site, some Web builders use breadcrumbs, which are a string of links that show the path through the site's navigation structure to the current page. Breadcrumbs are a good solution for large sites with complex navigation schemes, but they can be overkill for many smaller sites.

One of the simplest, and most effective, tools for orienting the visitor to the current page location is to highlight the button for the current page in the navigation bar, as shown in Figure A. The highlighted button serves the same purpose as the You Are Here pointer on the store directory/map at the mall.

One of the advantages of a You Are Here button treatment is that it's very efficient. Since it's part of the navigation bar that's already an integral part of your Web page, you don't need to devote any additional page space to an orientation tool, and visitors are already accustomed to looking at a navigation bar for information about the site's navigational structure.

Styling a You Are Here button with CSS

Perhaps the most common approach to styling a You Are Here button with CSS is to create a separate class rule for that button and apply it to the link for the current page's button in your navigation bar.

I've covered how to create a CSS navigation bar in a previous column. The following code example shows how you might start with that same basic technique and add highlighting to the button for the current page.

div#menu {
    height: auto;
    width: 150px;
    color: #FFFFFF;
}
div#menu li {
    height: 40px;
    width: 125px;
    margin: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    text-align: center;
    line-height: 250%;
    list-style-type: none;
    background-color: #003399;
    border: 1px solid #000000;
}
div#menu li a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
div#menu li a:link, div#menu li a:visited {
    font-weight: normal;
    color: #FFFFFF;
}
div#menu li a:hover {
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: underline;
}
div#menu li.youarehere {
    color: #000099;
    background-color: #66CCFF;
}

Here's the markup for three stacked buttons. In this case, the current page corresponds to Button 2.

<div id="menu">
<ul>
<li><a href="link1.html">Button 1</a></li>
<li class="youarehere">Button 2</li>
<li><a href="link3.html">Button 3</a></li>
</ul>
</div>

Note that the div#menu li.youarehere rule changes the text and background colors originally set in the div#menu li rule. This effectively highlights the button for the current page and visually differentiates it from the other buttons in the navigation bar.

In the markup, adding class="youarehere" to the <li> tag for the appropriate button designates that button to receive the You Are Here treatment. Also, note that there is no link in the markup for that button. There's no point in having a link to the current page, and removing the link code from the markup simplifies the CSS by eliminating the need to define rules for the <a> tag and its various pseudoclasses under the youarehere class.

Editor's Picks