Steve Krug

Yes, Virginia, There is a Perfect Web Page

Steve Krug is the author of Don’t Make Me Think: A Common Sense Approach to Web Usability. He had prepared a talk for a conference put on by his publisher, New Riders, and gave that talk to the Puget Sound SIGCHI.

Steve’s talk concentrated on two things designers can do to help make their pages more usable, have effective “You are here” indicators, and have prominent, well-placed page titles.

Effective “You are here” Indicators

Page navigation needs a way to indicate where the user is on a site. There are several ways to indicate the current location, including making things bolder, larger, a different color (either the text or the background), adding a marker, or a combination. Many sites are designed to make this location indicator rather subtle (since designers see subtle visual effects as the hallmarks of sophisticated design), but they need to be very obvious.

Tabs are a good method to represent top-level navigation, as long as they’re done well. The best ones have color for the non-current tabs, then white for the current one, and that tab shouldn’t have a line at the bottom so the color of the tab flows into the rest of the page.

One of the navigation tabs should be a “Home” link, so people can easily go to the top of the site. A good reason to do this is many times people don’t enter your site at the top level, since they’re just following a link from a search engine to somewhere deeper in the page hierarchy. In addition, if people don’t find what they’re seeking on that page, many times they will try to go to the top of your site and start drilling down through your pages.

Prominent, well-placed page titles

Having prominent page titles also helps with navigation. They need to be large, bold, and near the top of the page. They don’t necessarily need to be the largest thing on the page, but there shouldn’t be any doubt that it’s the title.

When you follow a link, the target page title should match the link text. It doesn’t have to exactly match, but it should be close enough that there won’t be any confusion.

Are there exceptions?

Even though it sounds as if Steve thinks all pages should look the same, that’s not the case. There are times when innovative navigation works well, but it’s hard to achieve.

Entertainment sites (such as for a movie) don’t have as much need for rock-solid navigation, since there aren’t many areas of content, and the point of the site is to be engaging.

One site with inventive navigation was harlem.org, which has navigation that centers around an old photo with jazz musicians standing on a set of steps. You can zoom in on different parts of the photo to get information on the musicians in that section.

Another interesting site was scottmccloud.com, the site for the artist. He has relatively standard top-level navigation, but the second-level navigation changes depending on the current section, and each of them is very creative, yet is easy to use.

Stump the Chump

Although he used the same name as a Car Talk segment, what he did was have people suggest web sites and he commented on whether it followed his recommendations about navigation. For several sites, he found there was no “Home” tab or link, and sometimes the title wasn’t as obvious as he would like.

Steve brought up several interesting points during this segment:

  • He’s not sold on whether drop-down or flyout menus improve efficiency for navigation, but he does see how the help make a design more compact. For the most part, I got the feeling he prefers seeing the links expanded out where possible.
  • If your navigation is more than three levels deep, breadcrumbs work better. However, for up to three levels, using tabs or other similar navigation works better.
  • The top-right corner of a page is a good place to put utility links, such as “My Account”, “Shopping Cart”, “Search”, etc.
  • There was one site where if you hovered over a link, it would bring up a drop-down menu. However, that one link couldn’t be clicked – you had to click on the first menu item. He said that in the larger scheme of things, that’s a relatively small problem, since users would pretty quickly figure out where to click.
  • Sites should be able to resize text. He does prefer the multiple sizes of “A” on the page which let you scale text size, but it’s also not difficult to do that with just CSS (not using absolutely-sized text).
  • Once you’ve designed a site, it’s much better to do small tweaks to improve usability, rather than to try to do a complete redesign.

Site Navigation Identification Chart

Steve would like to design a tool that can be used to help designers easily generate effective site navigation. His vision is it would be like the current tools which would generate CSS navigation, but restrict choices to ones which have high usability. It’s still a work in progress.

Q&A

One person asked Steve about the positioning of various navigation components. He said that a study done by the Wichita State University Software Usability Research Lab indicated that, given a relatively blank page, users said that they would look for navigation on the top and left, which matches current standard practices.

For pages with multiple parents, Steve’s opinion is that it’s best to pick one location in the navigation tree where that page best fits, and then have links to it in other trees. He feels users won’t get too confused by going to a different part of the site hierarchy, especially if the site navigation is strong enough to indicate there was a change.

Leave a Reply