Yes Virginia, there is a perfect web page

Last night I attended a talk by Steve Krug (Don’t Make me THINK) hosted by the Puget Sound SigCHI group. Krug’s talk, a new one, was titled, “Yes, Virginia, there is a perfect web page”

He focused on 2 design conventions that he believes make web pages inherently better. And while both are pretty easy to get right, he believed that designers rarely do.

These two things break down (he wasn’t as clear as one would have thought since he was pretty adament that there were really only two) into:

  • “You are here” indicators
  • Clear page titles

The you are here indicators closely relate to good global navigation.
Ways to indicate “you are here” something is in the global navigation to show you where you are.

  • Bolder
  • Larger
  • Point at it
  • Different Color
  • Background color
  • Reverse text/background color
  • Indent
  • Borders/rules
  • Combination of the above

On average, users miss most design subtleties most of the time. However designers love subtle visual effects and consider them to be hallmarks of sophisticated design. If it is important for users to notice distinctions in order to successfully use the site, the design indicators cannot be subtle. These design elements have to be “louder” than you would think or would like.

“You are here” indicators are important and even good designers forget to put them in, or don’t put them in because they think they will clutter, or they put them in and make them subtle, but users miss subtle destinctions.

Tabs make good “you are here indicators” especially when the active tab bleeds into content space. Krug believes that this is the “right way” to do tabs. Currently selected tab have a white background or bleed to white (or the color of the main content area).

Regarding good global navigation, Krug says he now blieves that it is crucial to have a top level navigation for “Home” for 2 reasons:

  • allows you to generate a “you are here” indicator that is global
  • People do not come in through home pages anymore, rather google takes them in deep and then the user pops back up to the home page

Pitfalls with top level horizontal global navigation: if it is too subtle, people will not notice it. Often it is too pale, too low contrast, too small. Active tab should be highlighted and bleed into the rest of the page. Active tab should be high contrast, often designers will grey it out, or make it opaque to signal that it cannot be clicked. This defeats the purpose.
If there is a secondary row of horizontal global nav, it should be centered, not justified.

The other major element that makes for good web pages is prominent well placed page titles

  • prominent
  • bigger
  • not necessarily biggest
  • well placed = at the top of the page, over the content area
  • it is a combination of prominence and position that identifies it as the page title
  • BONUS: what you click is what you get
    • page title maps closely to what the person clicked on

If all sites followed these rules would they all look the same? No. You can still be innovative, but not for innovation sake, keep usability in mind, and keep these rules in mind. Usability is not the enemy of good design. But web pages should be designed to be used, not just to be “highly designed”.