Steve Krug on creating usable web pages
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:
- Effective "You Are Here" indicators
- 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 https://www.stumbleupon.com/ with this tabbed navigation:
and https://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:
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