Steve Krug on creating usable web pages

Steve Krug on creating usable web pages

Rate This
  • Comments 4

A few of us from the Expression Web team attended a talk by Steve Krug, usability consultant and author of Don't Make Me Think, at an event hosted by the Puget Sound Special Interest Group on Computer-Human Interaction (SIGCHI) in Seattle.

Steve believes there is a short list of design conventions that make some web pages inherently more usable than others, and his talk presented two of these conventions:

  1. Effective "You Are Here" indicators
  2. Prominent and well-placed page titles

Effective "You Are Here" indicators

Steve suggests that subtle design distinctions that some designers love to craft simply don't work in practice and are less effective than "louder" design choices that clearly establish where you are in a website. To demonstrate how quickly website visitors can plow through a website and overlook subtle design elements, he showed an interesting video of software that tracked his eye movements as he navigated a website in search of information. The software drew red lines all over the web pages, showing the paths of his eye movements, how fast his eyes scanned the page and where his eyes dwelled.

Steve is a big fan of tab-based site navigation, especially when the tab color blends into the page color. For good examples, he pulled up http://www.stumbleupon.com/ with this tabbed navigation:

Stumble Upon website's tabbed navigation

and http://www.cnet.com/ with this navigation:

Based on usability studies he's reviewed, Steve contends that subtler global navigation menus that are placed on the edge of a web page, such as this:

horizontal navigation bar

are often overlooked by users, who will click around within the main content area of the page and not discover the main navigation menu until some time later.

Prominent and well-placed page titles

Steve's second recommendation to help improve the usability of your websites is to simply ensure each page has a primary heading that is bigger (although not necessarily the biggest) and bolder than other headings in the page, and clearly identifies the title or content of the page. He'll give you bonus usability points if your website supports "WYCIWYG" or "what you click is what you get" which means a hyperlink's label and the title of the destination page are the same or virtually the same.

-  Anna

Leave a Comment
  • Please add 3 and 8 and type the answer here:
  • Post
  • PingBack from http://internet.blogfeedsworld.com/?p=22198

  • Many website include a horizontal separation bar between the tab and the tab container, which defeats the purpose. Many others actually merge the button and tab concepts into a sort of clickable hybrid, which doesn't much for web usability either...

    Glad to see the xWeb team blog about web usability!

  • Hey this was very informative in fact Steve Krug's book - Don't Make Me Think' is a very comprehensive guide for designing a good site or application.

    It helped me quiet a bit in understanding how to design web based stuff. Especially understanding how the user would view a page is very crucial. In fact while doing a user test we realized the ways people use a certain site/ app is even majorly governed by the cultural influence on that individual.

  • Hey this was very informative in fact Steve Krug's book - Don't Make Me Think' is a very comprehensive guide for designing a good site or application.

    It helped me quiet a bit in understanding how to design web based stuff. Especially understanding how the user would view a page is very crucial. In fact while doing a user test we realized the ways people use a certain site/ app is even majorly governed by the cultural influence on that individual.

Page 1 of 1 (4 items)