Examples of Web Navigation

In ETCV 622 - Interface Design, we were asked to review specific website elements based on Steve Krug's Needs and Objectives from Don't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition.

Homepage

Site Identity and Mission / Show me what I am looking for / Show me where to start

what is this site and what is it for. Why should I be here and not some other site

the home page needs to make it obvious how to get to whatever I want

the home page needs to show me where to begin

URL: http://cssgrid.net/

CSS Grid

This is a classic example of Web2.0 design. It has a large banner than spans the entire width of the window and is used to identify the site. Going down the left side is further explanation that this site is about a cascading style sheet framework, that uses a 1140 pixel grid. Admittedly, if you don't work with CSS, you might not get that. Further identifying the mission are the large icons on the left showing that this framework is released under a creative commons license (with attribution). The visitor is nicely drawn to the green box in the lower left which allows for the download of the framework - a nice example of Show me what I am looking for and Show me where to start.

Site Hierarchy / Timely content / Establish credibility and trust / Shortcuts

the site needs to give an overview of content and features available

URL: http://www.ncef.org/index.cfm

National Clearinghouse for Educational Facilities

The National Clearinghouse for Educational Facilities is a repository of articles and information on the design of schools. The homepage features timely content in the form of news and recent additions to the site. The main navigation is in a bar at the very top of the page (and all pages on the site) that allows users to jump to the most common topics including focuses on building safe and green schools. The core of the site's worth is in the database of books, studies and reports. The links to Safe and Green schools in the main navigation are really shortcuts to information also accessible through a normal database search on those topics. In the right column is a callout for About the Clearinghouse that establishes trust by defining itself as a non-governmental, non-profit organization authorized by Congress to serve as the an authoritative source of innovative solutions for the built environment.

Taglines

Come for the software, stay for the community

Just Long Enough / Clear Benefit / Personable

URL: http://drupal.org

Drupal Tagline

Drupal is the content management framework that is used by hundreds of websites at the UA. It is extremely configurable, allowing a site meet the needs of the designers and visitors without a lot of extra stuff they don't need. The power of Drupal comes from the wealth of modules and themes that have been contributed by the open-source software community. The tagline is perfect for conveying why users come, and return, to this site. You need to visit to download the software but you return so that you can interact with the community of developers through the forums and issue tracking systems.

Navigation

URL: http://api.drupal.org

Drupal's API Documentation

I spend a lot of my day in the documentation for Drupal's API. This site gives the definition and code samples that allow my team to extend Drupal to meet our client's needs. In order to be effective, the site needs to keep a bunch of information in my face including the version of Drupal's documentation I am looking at and where the code that I am trying to modify exists. Check out the screen shot for where I see each of the elements Krug talked about for Navigation exists.