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
Comments
Anonymous
October 26, 2007
PingBack from http://internet.blogfeedsworld.com/?p=22198Anonymous
February 06, 2008
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!Anonymous
March 01, 2010
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.Anonymous
March 01, 2010
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.