Sample Usability Guidelines

For the Web
Guideline: INFORMATION ARCHITECTURE: Construct an Information Architecture that supports the users' main information needs and tasks.   Guideline: CONCEPTUAL MODEL: Make the Information Architecture obvious and always apparent to the user.
The Information Architecture (i.e., the abstract navigational structure and resulting workflow) of a Web site should be premised on a deep understanding of users' workflow, on their mental models of the information space or tasks that the site supports, and on business rules and goals, if relevant.   The Information Architecture of a site should be easy to discern immediately when arriving at the site, and should be persistently visible, so that users immediately understand the scope of information or functionality of the site on the Home page, and can keep track of where they are in it at all times. There is little that is less user friendly than losing navigational controls when scrolling through the content of a page.
Example: DJMA Web Site   Example: DJMA Web Site

On this Web site, the main Information Architecture consists of a simple hierarchy of topics of likely interest to the audience. At the top level are categories of the main types of information a user might wish to find on a service vendor's site: a resume ("EXPERIENCE"), a list of past clients ("CLIENTS"), types of services offered ("SERVICES"), etc., listed in the order users are likely to want to access the information. For some of these categories, there is then a second level representing subcategories within these main categories of information. Each subcategory then has its own content. For example, within the main category "BOOKS" is a list of books authored, co-edited or contributed to by Dr. Mayhew. Each of these subcategories has its own content, describing the details of each publication.

In addition, there is content that represents interesting and useful information related to the vendor's business, but that does not fall into the main categories and subcategories of the primary Information Architecture. Links to pages containing these topics are found on the Home and other pages, embedded in the high level content provided there (e.g., these guidelines).

Finally, there are links to other sites. Some are all gathered together in one top level category within the primary Information Architecture ("LINKS"). These are a collection of links to other sites likely to be useful to and of interest to the audience for this site. Others are related to very specific content offered in this site, and these are not a part of the main navigational structure, but are embedded within other content, as relevant. For example, links to external sites allowing users to order Dr. Mayhew's books are offered within pages describing these books.

 

On this site, the primary Information Architecture is made easily and always visible through the use of fixed frames of navigational links. The top frame contains the primary categories of information offered on the site, and the bottom frame presents some generic categories common to many sites. A left frame presents subcategories of top level categories when relevant. No matter where the user navigates to on the site, these three frames representing the primary site Information Architecture are always visible and available.

This site is very simple, involving few graphics or images. Thus, the type of link is indicated by location and text style, rather than by any graphical design. That is, top level categories appear in the top and bottom frames in bold upper case text, and subcategories appear in the left frame in mixed case, normal intensity text, context-dependent on which top level category is selected.

While frames do have some drawbacks and are being phased out, this site was built with frame sets under the assumption that most members of the key audience would have browsers that would support them. In the future, when Cascading Style Sheets (CSS) are supported by more browsers, we plan to rebuild the site using CSS's to get the frame effect yet avoid the pitfalls of frames. Meanwhile, we address one of the pitfalls of frames - inefficient and poorly formatted printing - by providing a downloadable, formatted document containing the content of the entire site.

Guideline: INFORMATION ARCHITECTURE: Provide a clear "Mission Statement" on the Home page summarizing the content of the site.   Guideline: CONCEPTUAL MODEL: Provide a persistent and consistent "sense of place" within the Information Architecture.
Users stumble upon Web sites in all kinds of ways. They do not necessarily know what a Web site they arrive on has to offer. They do not want to waste time navigating all through a Web site just to understand what is there. Every Home page should clearly define who the site is sponsored by, who it is intended for, and what sort content it contains. In addition, visitors should be able to have a basic understanding of the site on any initial landing page, even if that is not the Home page.   Not only should the overall Information Architecture be easy to discern and always visible, but one's current place in it, how one got there, and where one can go from there should also be persistently visible through a set of consistently applied visual cues.
Example: DJMA Web Site   Example: DJMA Web Site
On the DJMA site Home page, the phrases "Software and Web Usability Engineering Consulting " and "Achieving Business Goals by Optimizing the User Experience", along with the company name, clearly establish that this site represents a consultancy in the area of usability engineering. A quick look at the links across the top also helps clarify the overall content of the site. Also, the content in the center of the Home page provide a high level picture of the nature of the consultancy, and the content of the site. Finally, the window title on any page across the whole site reiterates the company name and type of business.  

Within the two-level navigational hierarchy of this site, which is always visible, the cue for "You are Here" is for the links representing the current page in the navigational frames to become inactive, gray or "dim" and lose their underline. Links directly available from a page are always presented in teal underlined text, and links already visited are always represented as red underlined text.

Additional consistently applied cues contributing to clear navigation include the cue of yellow for links currently being pointed at , and black for links currently being clicked.

In addition, if the user rests their pointer over a link, in most cases a pop up description of where the link will take you appears.

All these cues, consistently applied, help users keep track of their whereabouts within the site, and help them find their way to other content of interest, and find their way back to content during the current or later visits.
Guideline: PAGE DESIGN STANDARDS: Follow consistent rules for the layout of page content.  
Guideline: PAGE DESIGN STANDARDS: Communicate function through form.
Page content should adhere to consistent rules of layout and presentation for common elements such as titles, embedded links, instructions, fill in forms, transaction buttons, etc.   Clickable links should always have good "affordances", that is, it should be visually obvious that they are interactive - rather than static - elements.

In addition, elements that behave the same should look the same, and elements that behave differently should look different. For example, links that navigate within a site should have one consistent look, and links that navigate outside a site should have another consistent look.
Example: DJMA Web Site   Example: DJMA Web Site
The DJMA site contains very simple, read-only (non-interactive, non-transactional) content. The primary layout convention is to present the page title in large upper case red text, centered at the top, and the subtitle in slightly smaller mixed case yellow text, left justified under the main title. The title represents the top level in the Information Architecture, and the subtitle represents the subcategory in the Information Architecture. The page title and subtitle are always worded exactly as the links that represent the navigational pathway to the page. That is, for example, if you first clicked the "CLIENTS" link in the top frame, then clicked the "Professional Societies" link in the left frame, you would get to a page with a title of "CLIENTS" and a subtitle of "Professional Societies, in the visual formats just described.  

All links on the DJMA site are identifiable as clickable links through the highly familiar visual presentation of underlined text. Conversely, no underlining is used on any element that is not a clickable link.

Links that take the user outside the DJMA site in a separate browser window are tagged with a preceding asterisk. In addition, the links themselves are in the form of a URL. Thus, external links have a unique and consistent look, distinguishing them from internal links.