Research-based web design and usability guidelines
This page contains excerpts of the Research-Based Web Design & Usability Guidelines at http://usability.gov. It is a shame that this really nice guide doesn't exist in HTML format. Since US goverment materials may be reproduced freely, I decided to copy/paste some of it.
Introduction
“The Research-Based Web Design & Usability Guidelines (Guidelines) were developed by the U.S. Department of Health and Human Services (HHS), in partnership with the U.S. General Services Administration. This new edition of the Guidelines updates the original set of 187 guidelines, and adds 22 new ones. Many of the guidelines were edited, and numerous new references have been added. There are now 209 guidelines. [..] The primary audiences for the Guidelines are Web site managers, designers, and others involved in the creation or maintenance of Web sites. A secondary audience is researchers who investigate Web design issues.” (p. XV)
Each guideline is rankend in importance and scientific evidence. One foreword is written by Ben Shneiderman and we suspect that he played an important role in the design of this document. Authors were supported by a large panel of respected researchers and practitioners.
“This newest set of guidelines from the prestigious team assembled by the Department of Health and Human Services makes important contributions that will benefit practitioners and researchers. They have done the meticulous job of scouring the research literature to find support for design guidelines, thereby clarifying the message, resolving inconsistencies, and providing sources for further reading. Researchers will also benefit by this impressive compilation that will help them understand the current state of the art and see what problems are unresolved. Another impact will be on epistemologists and philosophers of science who argue about the relevance of research to practice. It is hard to recall a project that has generated as clear a demonstration of the payoff of research for practice.” (Ben Shneiderman, Introduction, p IV)
The purpose of this page is to present some of these guidelines in a single page for teaching purposes. (I hate dealing with 20MB PDF file for display in a classroom ....)
Important guidelines
The guidelines we present below are chosen (a) by their importance and (b) for various other reasons :)
Look at the original if you want to real thing ! Also, its the authors promised a database-base solution at some point. Contents below are (unless otherwise indicated) just copy/paste.
Design Process and Evaluation
There are several usability-related issues,methods, and procedures that require careful consideration when designing and developing Web sites. The most important of these are presented in this chapter, including ’up-front’ issues such as setting clear and concise goals for a Web site, determining a correct and exhaustive set of user requirements, ensuring that the Web site meets user’s expectations, setting usability goals, and providing useful content.
To ensure the best possible outcome, designers should consider a full range of user-interface issues, and work to create a Web site that enables the best possible human performance. The current research suggests that the best way to begin the construction of a Web site is to have many different people propose design solutions (i.e., parallel design), and then to follow up using an iterative design approach. This requires conducting the appropriate usability tests and using the findings to make changes to the Web site.
- 1:1 Provide Useful Content
Guideline: Provide content that is engaging, relevant, and appropriate to the audience.
Comments:: Content is the information provided on a Web site. Do not waste resources providing easy access and good usability to the wrong content. One study found that content is the most critical element of a Web site. Other studies have reported that content is more important than navigation, visual design, functionality, and interactivity.
- 1:2 Establish User Requirements
Guideline: Use all available resources to better understand users’ requirements.
Comments:: The greater the number of exchanges of information with potential users, the better the developers’ understanding of the users’ requirements. The more information that can be exchanged between developers and users, the higher the probability of having a successful Web site. These could include customer support lines, customer surveys and interviews, bulletin boards, sales people, user groups, trade show experiences, focus groups, etc. Successful projects require at least four (and average five) different sources of information. Do not rely too heavily on user intermediaries. [...]
- 1:3 Understand and Meet User’s Expectations
Guideline: Ensure that the Web site format meets user expectations, especially related to navigation, content, and organization.
Comments:: One study found that users define 'usability' as their perception of how consistent, efficient, productive, organized, easy to use, intuitive, and straightforward it is to accomplish tasks within a system. [...]
- 1:4 Involve Users in Establishing User Requirements
Guideline: Involve users to improve the completeness and accuracy of user requirements.
Comments:: One of the basic principles of user-centered design is the early and continual focus on users. For this reason, user involvement has become a widely accepted principle in the development of usable systems. Involving users has the most value when trying to improve the completeness and accuracy of user requirements. [...] Users are most valuable in helping designers know what a system should do, but not in helping designers determine how best to have the system do it
Optimizing the User Experience
Web sites should be designed to facilitate and encourage efficient and effective human-computer interactions. Designers should make every attempt to reduce the user’s workload by taking advantage of the computer’s capabilities. Users will make the best use of Web sites when information is displayed in a directly usable format and content organization is highly intuitive. Users also benefit from task sequences that are consistent with how they typically do their work, that do not require them to remember information for more than a few seconds, that have terminology that is readily understandable, and that do not overload them with information.
Users should not be required to wait for more than a few seconds for a page to load, and while waiting, users should be supplied with appropriate feedback. Users should be easily able to print information. Designers should never ‘push’ unsolicited windows or graphics to users.
- 2:1 Do Not Display Unsolicited Windows or Graphics
Guideline: Do not have unsolicited windows or graphics ‘pop-up’ to users.
Comments:: Users have commented that unsolicited windows or graphics that ‘pop up’ are annoying and distracting when they are focusing on completing their original activity.
- 2:2 Increase Web Site Credibility
Guideline: Optimize the credibility of information-oriented Web sites.
Comments:: Based on the results of two large surveys, the most important Web site-related actions that organizations can do to help ensure high Web site credibility are to:
- Provide a useful set of frequently asked questions (FAQ) and answers;
- Ensure the Web site is arranged in a logical way;
- Provide articles containing citations and references;
- Show author’s credentials;
- Ensure the site looks professionally designed;
- Provide an archive of past content (where appropriate);
- Ensure the site is as up-to-date as possible;
- Provide links to outside sources and materials; and
- Ensure the site is frequently linked to by other credible sites.
- 2:3 Standardize Task Sequences
Guideline: Allow users to perform tasks in the same sequence and manner across similar conditions.
Comments:: Users learn certain sequences of behaviors and perform best when they can be reliably repeated. For example, users become accustomed to looking in either the left or right panels for additional information. Also, users become familiar with the steps in a search or checkout process.
- 2:4 Reduce the User’s Workload
Guideline: Allocate functions to take advantage of the inherent respective strengths of computers and users.
Comments:: Let the computer perform as many tasks as possible, so that users can concentrate on performing tasks that actually require human processing and input. Ensure that the activities performed by the human and the computer take full advantage of the strengths of each. For example, calculating body mass indexes, remembering user IDs, and mortgage payments are best performed by computers.
- 2:5 Design for Working Memory Limitations
Comments:: Users can remember relatively few items of information for a relatively short period of time. This ’working memory’ capacity tends to lessen even more as people become older. One study compared the working memory performance of age groups 23-44 years and 61-68 years. The younger group performed reliably better than the older group.
When users must remember information on one Web page for use on another page or another location on the same page, they can only remember about three or four items for a few seconds. If users must make comparisons, it is best to have the items being compared side-by-side so that users do not have to remember information—even for a short period of time.
- 2:8 Display Information in a Directly Usable Format
Guideline: Display data and information in a format that does not require conversion by the user.
Comments:: Present information to users in the most useful and usable format possible. Do not require users to convert or summarize information in order for it to be immediately useful. It is best to display data in a manner that is consistent with the standards and conventions most familiar to users.
- 2:9 Format Information for Reading and Printing
Guideline: Prepare information with the expectation that it will either be read online or printed.
Comments:: Documents should be prepared that are consistent with whether users can be expected to read the document online or printed. One study found that the major reason participants gave for deciding to read a document from print or to read it online was the size of the document. Long documents (over five pages) were printed, and short documents were read online. In addition, users preferred to print information that was related to research, presentations, or supporting a point. They favored reading it online if for entertainment. Users generally favored reading documents online because they could do it from anywhere at anytime with 24/7 access. Users were inclined to print (a) if the online document required too much scrolling, (b) if they needed to refer to the document at a later time, or (c) the complexity of the document required them to highlight and write comments.
[Like: Do not use PDF for a guide such as this one, couldn't resist - 22:02, 15 March 2011 (CET)]
- 2:10 Provide Feedback when Users Must Wait
Guideline: Provide users with appropriate feedback while they are waiting.
Comments:: If processing will take less than 10 seconds, use an hourglass to indicate status. If processing will take up to sixty seconds or longer, use a process indicator that shows progress toward completion, [etc....]
- 2:13 Do Not Require Users to Multitask While Reading
Guideline: If reading speed is important, do not require users to perform other tasks while reading from the monitor.
Comments:: Generally, users can read from a monitor as fast as they can from paper, unless they are required to perform other tasks that require human ’working memory’ resources while reading. For example, do not require users to look at the information on one page and remember it while reading the information on a second page. This can reliably slow their reading performance.
- 2:16 Provide Assistance to Users
Guideline: Provide assistance for users who need additional help with the Web site.
Comments:: Users sometimes require special assistance. This is particularly important if the site was designed for inexperienced users or has many first time users
Acessibility
See Acessibility
Hardware and Software
Just as designers consider their users’ needs for specific information, they must also consider any constraints imposed on them by their users’ hardware, software, and speed of connection to the Internet. Today, a single operating system (Microsoft’s XP) dominates personal computer market.
Similarly, only two Web site browsers are favored by the vast majority of users. More than ninety percent of users have their monitors set to 1024x768, 800x600 or 1280x1024 pixel resolution. And while most users at work have high-speed Internet access, many home users still connect using dial-up.
- 4:1 Design for Common Browsers
Guideline: Design, develop and test for the most common browsers.
Comments:: Designers should attempt to accommodate ninety-five percent of all users. Ensure that all testing of a Web site is done using the most popular browsers.
- 4:2 Account for Browser Differences
Guideline: Do not assume that all users will have the same browser features, and will have set the same defaults.
Comments:: Users with visual impairments tend to select larger fonts, and some users may turn off backgrounds, use fewer colors, or overrides font. The designer should find out what settings most users are using, and specify on the Web site exactly what assumptions were made about the browser settings.
- 4:4 Design for User’s Typical Connection Speed
Guideline: Design for the connection speed of most users.
Comments:: [...] Designers should consult one of the several sources that maintain current figures.
- 4:5 Design for Commonly Used Screen Resolutions
Guideline: Design for monitors with the screen resolution set at 1024x768 pixels.
Comments:: Designers should attempt to accommodate ninety-five percent of all users. As of June 2006, 56% of users have their screen resolution set at 1024x768.
[I can't agree with this. Cellphones have lower resolution, and normal workstations of laptops got more. Therefore go for fluid designs - Daniel K. Schneider 22:02, 15 March 2011 (CET)]
The Homepage
The homepage is different from all other Web site pages. A well-constructed homepage will project a good first impression to all who visit the site.
It is important to ensure that the homepage has all of the features expected of a homepage and looks like a homepage to users. A homepage should clearly communicate the site's purpose, and show all major options available on the Web site. Generally, the majority of the homepage should be visible ’above the fold,’ and should contain a limited amount of prose text. Designers should provide easy access to the homepage from every page in the site.
- 5:1 Enable Access to the Homepage
Guideline: Enable users to access the homepage from any other page on the Web site.
Comments:: Many users return to the homepage to begin a new task or to start a task over again. Create an easy and obvious way for users to quickly return to the homepage of the Web site from any point in the site. Many sites place the organization’s logo on the top of every page and link it to the homepage. While many users expect that a logo will be clickable, many other users will not realize that it is a link to the homepage. Therefore, include a link labeled ‘Home’ near the top of the page to help those users.
- 5:2 Show All Major Options on the Homepage
Guideline: Present all major options on the homepage.
Comments:: Users should not be required to click down to the second or third level to discover the full breadth of options on a Web site. Be selective about what is placed on the homepage, and make sure the options and links presented there are the most important ones on the site.
- 5:3 Create a Positive First Impression of Your Site
Guideline: Treat your homepage as the key to conveying the quality of your site.
Comments:: In terms of conveying quality, the homepage is probably the most important page on a Web site. One study found that when asked to find high quality Web sites, about half of the time participants looked only at the homepage. You will not get a second chance to make a good first impression on a user.
- 5:4 Communicate the Web Site’s Value and Purpose
Guideline: Clearly and prominently communicate the purpose and value of the Web site on the homepage.
Comments:: Most people browsing or searching the Web will spend very little time on each site. Emphasize what the site offers that is of value to users, and how the site differs from key competitors. Many users waste time because they misunderstand the purpose of a Web site. In one study, most users expected that a site would show the results of research projects, not merely descriptions of project methodology.
In some cases the purpose of a Web site is easily inferred. In other cases, it may need to be explicitly stated through the use of brief text or a tagline. Do not expect users to read a lot of text or to click into the Site to determine a Site’s purpose. Indicating what the Site offers that is of value to users, and how the Site differs from key competitors is important because most people will spend little time on each Site.
- 5:5 Limit Prose Text on the Homepage
Guideline: Limit the amount of prose text on the homepage.
Comments:: The first action of most users is to scan the homepage for link titles and major headings. Requiring users to read large amounts of prose text can slow them considerably, or they may avoid reading it altogether.
- 5:6 Ensure the Homepage Looks like a Homepage
Guideline: Ensure that the homepage has the necessary characteristics to be easily perceived as a homepage.
Comments:: It is important that pages ’lower’ in a site are not confused with the homepage. Users have come to expect that certain actions are possible from the homepage. These actions include, among others, finding important links, accessing a site map or index, and conducting a search.
- 5:7 Limit Homepage Length
Guideline: Limit the homepage to one screenful of information, if at all possible.
Comments:: Any element on the homepage that must immediately attract the attention of users should be placed ’above the fold.’ Information that cannot be seen in the first screenful may be missed altogether—this can negatively impact the effectiveness of the Web site. If users conclude that what they see on the visible portion of the page is not of interest, they may not bother scrolling to see the rest of the page.
Some users take a long time to scroll down ’below the fold,’ indicating a reluctance to move from the first screenful to subsequent information. Older users and novices are more likely to miss information that is placed below the fold.
[This is true for most web sites. Users are used to scroll down on blogs and other text-based sites - 22:29, 15 March 2011 (CET)]
- 5:8 Announce Changes to a Web Site
Guideline: Announce major changes to a Web site on the homepage—do not surprise users.
Comments:: Introducing users to a redesigned Web site can require some preparation of expectations. Users may not know what to do when they are suddenly confronted with a new look or navigation structure.
Page Layout
All Web pages should be structured for ease of comprehension. This includes putting items on the page in an order that reflects their relative importance. Designers should place important items consistently, usually toward the top and center of the page. All items should be appropriately aligned on the pages. It is usually a good idea to ensure that the pages show a moderate amount of white space—too much can require considerable scrolling, while too little may provide a display that looks too ‘busy.’ It is also important to ensure that page layout does not falsely convey the top or bottom of the page, such that users stop scrolling prematurely.
When a Web page contains prose text, choose appropriate line lengths. Longer line lengths usually will elicit faster reading speed, but users tend to prefer shorter line lengths. There are also important decisions that need to be made regarding page length. Pages should be long enough to adequately convey the information, but not so long that excessive scrolling becomes a problem. If page content or length dictates scrolling, but the page's table of contents needs to be accessible, then it is usually a good idea to use frames to keep the table of contents readily accessible and visible in the left panel.
- 6:1 Avoid Cluttered Displays
Guideline: Create pages that are not considered cluttered by users.
Comments:: Clutter is when excess items on a page lead to a degradation of performance when trying to find certain information. On an uncluttered display, all important search targets are highly salient, i.e., clearly available. One study found that test participants tended to agree on which displays were least cluttered and those that were most cluttered.
- 6:2 Place Important Items Consistently
Guideline: Put important, clickable items in the same locations, and closer to the top of the page, where their location can be better estimated.
Comments:: Users will try to anticipate where items will appear on their screen. They will start ’searching’ a page before the layout appears on their screen. When screen items remain constant, users learn their location on a page, and use this knowledge to improve task performance. Experienced users will begin moving their mouse to the area of the target before the eye detects the item. Users can anticipate the location of items near the top much better than those farther down the page.
- 6:3 Place Important Items at Top Center
Guideline: Put the most important items at the top center of the Web page to facilitate users’ finding the information.
Comments:: Users generally look at the top center of a page first, then look left, then right, and finally begin systematically moving down the total Web page. All critical content and navigation options should be toward the top of the page. Particularly on navigation pages, most major choices should be visible with no, or a minimum of, scrolling.
- 6:4 Structure for Easy Comparison
Guideline: Structure pages so that items can be easily compared when users must analyze those items to discern similarities, differences, trends, and relationships.
Comments:: Users should be able to compare two or more items without having to remember one while going to another page or another place on the same page to view a different item.
- 6:5 Establish Level of Importance
Guideline: Establish a high-to-low level of importance for information and infuse this approach throughout each page on the Web site.
Comments:: The page layout should help users find and use the most important information. Important information should appear higher on the page so users can locate it quickly. The least used information should appear toward the bottom of the page. Information should be presented in the order that is most useful to users. People prefer hierarchies, and tend to focus their attention on one level of the hierarchy at a time. This enables them to adopt a more systematic strategy when scanning a page, which results in fewer revisits.
- 6:6 Optimize Display Density
Guideline: To facilitate finding target information on a page, create pages that are not too crowded with items of information.
Comments:: Density can be defined as the number of items per degree of visual angle within a visually distinct group. This density either can be crowded with many items, or sparse with few items. One study found that locating a target in a crowded area took longer than when the target was in a sparse area. Also, participants searched and found items in the sparse areas faster than those in the crowded areas. Participants used fewer fixations per word in the crowded areas, but their fixations were much longer when viewing items in the crowded areas. Finally, participants tended to visit sparse areas before dense groups. To summarize, targets in sparse areas of the display (versus crowded areas) tended to be searched earlier and found faster.
- 6:7 Align Items on a Page
Guideline: Visually align page elements, either vertically or horizontally.
Comments:: Users prefer consistent alignments for items such as text blocks, rows, columns, checkboxes, radio buttons, data entry fields, etc. Use consistent alignments across all Web pages.
- 6:8 Use Fluid Layouts
Guideline: Use a fluid layout that automatically adjusts the page size to monitor resolution settings that are 1024x768 pixels or higher.
Comments:: When web page layouts are fixed either to the left or centered, much of the available screen space is not used. It is best to take advantage of as much of the screen space as possible because this will help move more information above the fold. There has been no degradation in user performance when using the non-fluid layouts. However, most users prefer the fluid layout. One 2003 study reported a compliance rate for this guideline of twenty-eight percent, and a 2001 study found that only twenty-three percent of top Web sites used a fluid layout. Keep in mind that large monitors and higher pixel resolutions allow viewing of more than one window at a time.
- 6:10 Set Appropriate Page Lengths
Guideline: Make page-length decisions that support the primary use of the Web page.
Comments:: In general, use shorter pages for homepages and navigation pages, and pages that need to be quickly browsed and/or read online. Use longer pages to (1) facilitate uninterrupted reading, especially on content pages; (2) match the structure of a paper counterpart; (3) simplify page maintenance (fewer Web page files to maintain); and, (4) make pages more convenient to download and print.
Navigation refers to the method used to find information within a Web site. A navigation page is used primarily to help users locate and link to destination pages. A Web site’s navigation scheme and features should allow users to find and access information effectively and efficiently. When possible, this means designers should keep navigation-only pages short. Designers should include site maps, and provide effective feedback on the user’s location within the site.
To facilitate navigation, designers should differentiate and group navigation elements and use appropriate menu types. It is also important to use descriptive tab labels, provide a clickable list of page contents on long pages, and add ‘glosses’ where they will help users select the correct link. In well-designed sites, users do not get trapped in dead-end pages.
Guideline: Do not create or direct users into pages that have no navigational options.
Comments:: Many Web pages contain links that open new browser windows. When these browser windows open, the Back button is disabled (in essence, the new browser window knows nothing of the user’s past navigation, and thus is disabled). If the new window opens full-screen, users may not realize that they have been redirected to another window, and may become frustrated because they cannot press Back to return to the previous page. If such links are incorporated into a Web site, the newly-opened window should contain a prominent action control that will close the window and return the user to the original browser window.
In addition, designers should not create Web pages that disable the browser’s Back button. Disabling the Back button can result in confusion and frustration for users, and drastically inhibits their navigation.
Guideline: Clearly differentiate navigation elements from one another, but group and place them in a consistent and easy to find place on each page.
Comments:: Create a common, Web site-wide navigational scheme to help users learn and understand the structure of your Web site. Use the same navigation scheme on all pages by consistently locating tabs, headings, lists, search, site map, etc. Locate critical navigation elements in places that will suggest clickability (e.g., lists of words in the left or right panels are generally assumed to be links).
Make navigational elements different enough from one another so that users will be able to understand the difference in their meaning and destination. Grouping reduces the amount of time that users need to locate and identify navigation elements.
Do not make users infer the label by studying a few items in the group. Finally, make it easy for users to move from label to label (link to link) with a single eye movement. This best can be done by positioning relevant options close together and to using vertical lists.
- 7:3 Use a Clickable ‘List of Contents’ on Long Pages
Guideline: On long pages, provide a ’list of contents’ with links that take users to the corresponding content farther down the page.
Comments:: For long pages with several distinct sections that are not visible from the first screenful, add a short, clickable list of the sections (sometimes called ’anchor’ or ’within-page’ links) at the top of the page. ’Anchor links’ can serve two purposes: they provide an outline of the page so users can quickly determine if it contains the desired information, and they allow users to quickly navigate to specific information.
Since ’anchor links’ enable a direct link to content below the first screenful, they are also useful for getting users to specific information quickly when they arrive from a completely different page.
- 7:4 Provide Feedback on Users’ Location
Guideline: Provide feedback to let users know where they are in the Web site.
Comments:: Feedback provides users with the information they need to understand where they are within the Web site, and for proceeding to the next activity. Examples of feedback include providing path and hierarchy information (i.e., ’breadcrumbs’), matching link text to the destination page’s heading, and creating URLs that relate to the user’s location on the site. Other forms of feedback include changing the color of a link that has been clicked (suggesting that destination has been visited), and using other visual cues to indicate the active portion of the screen.
Guideline: Place the primary navigation menus in the left panel, and the secondary and tertiary menus together.
Comments:: One study found that navigation times were faster when the primary menu was located in the left panel. Also, navigation performance was best when the secondary and tertiary menus were placed together. Placing a navigation menu in the right panel was supported as a viable design option by both performance and preference measures. Users preferred having the primary menu in the left panel, and grouping secondary and tertiary menus together, or grouping all three menu levels together. The best performance and preference was achieved when all three menus were placed in the left panel (placing them all in the right panel achieved close to the same performance level).
- 7:6 Use Descriptive Tab Labels
Guideline: Ensure that tab labels are clearly descriptive of their function or destination.
Comments:: Users like tabs when they have labels that are descriptive enough to allow error-free selections. When tab labels cannot be made clear because of the lack of space, do not use tabs.
Guideline: Do not require users to scroll purely navigational pages.
Comments:: Ideally, navigation-only pages should contain no more than one screenful of information. Users should not need to scroll the page, even a small distance. One study showed that users considered the bottom of one screenful as the end of a page, and they did not scroll further to find additional navigational options.
Guideline: Do not expect users to use breadcrumbs effectively.
Comments:: One study reported no difference in task completion times and total pages visited between groups that had breadcrumbs and those that did not. Participants could have used breadcrumbs thirty-two percent of the time, but only did so six percent of the time. It is probably not worth the effort to include breadcrumbs unless you can show that your Web site’s users use them frequently, either to navigate the site, or to understand the site’s hierarchy. One study found that test participants who received instruction on the use of breadcrumbs completed tasks much faster than those who did not. This time savings could result in increased productivity for users that search Web sites on a daily basis.
[Ha tell Nielen ! - 22:29, 15 March 2011 (CET)]
Scrolling and Paging
Designers must decide, early in the design process, whether to create long pages that require extensive scrolling or shorter pages that will require users to move frequently from page to page (an activity referred to as paging). This decision will be based on considerations of the primary users and the type of tasks being performed. For example, older users tend to scroll more slowly than younger users; therefore, long scrolling pages may slow them down considerably. As another example, some tasks that require users to remember where information is located on a page may benefit from paging, while many reading tasks benefit from scrolling.
Generally, designers should ensure that users can move from page to page as efficiently as possible. If designers are unable to decide between paging and scrolling, it is usually better to provide several shorter pages rather than one or two longer pages. The findings of usability testing should help confirm or negate that decision.
When scrolling is used, a Web site should be designed to allow the fastest possible scrolling. Users only should have to scroll through a few screenfuls, and not lengthy pages. Designers should never require users to scroll horizontally.
- 8:1 Eliminate Horizontal Scrolling
Guideline: Use an appropriate page layout to eliminate the need for users to scroll horizontally.
Comments:: Horizontal scrolling is a slow and tedious way to view an entire screen. Common page layouts including fluid and left-justified may require some users to scroll horizontally if their monitor resolution or size is smaller than that used by designers.
- 8:3 Use Scrolling Pages For Reading Comprehension
Guideline: Use longer, scrolling pages when users are reading for comprehension.
Comments:: Make the trade-off between paging and scrolling by taking into consideration that retrieving new linked pages introduces a delay that can interrupt users’ thought processes. Scrolling allows readers to advance in the text without losing the context of the message as may occur when they are required to follow links. [...]
Headings, Titles, and Labels
Most users spend a considerable amount of time scanning rather than reading information on Web sites. Well-designed headings help to facilitate both scanning and reading written material. Designers should strive to use unique and descriptive headings, and to use as many headings as necessary to enable users to find what they are looking for—it is usually better to use more rather than fewer headings. Headings should be used in their appropriate HTML order, and it is generally a good idea not to skip heading levels.
Designers should ensure that each page has a unique and descriptive page title. When tables are used, designers should make sure that descriptive row and column headings are included that enable users to clearly understand the information in the table. It is occasionally important to highlight certain critical information.
- 9:1 Use Clear Category Labels
Guideline: Ensure that category labels, including links, clearly reflect the information and items contained within the category.
Comments:: Category titles must be understood by typical users. Users will likely have difficulty understanding vague, generalized link labels, but will find specific, detailed links, and descriptors easier to use.
- 9:2 Provide Descriptive Page Titles
Guideline: Put a descriptive, unique, concise, and meaningfully different title on each Web page.
Comments:: Title refers to the text that is in the browser title bar (this is the bar found at the very top of the browser screen). Titles are used by search engines to identify pages. If two or more pages have the same title, they cannot be differentiated by users or the Favorites capability of the browser. If users bookmark a page, they should not have to edit the title to meet the characteristics mentioned above.
Remember that some search engines only list the titles in their search results page. Using concise and meaningful titles on all pages can help orient users as they browse a page or scan hot lists and history lists for particular URLs. They can also help others as they compile links to your pages.
To avoid confusing users, make the title that appears in the heading of the browser consistent with the title in the content area of the pages.
- 9:3 Use Descriptive Headings Liberally
Guideline: Use descriptive headings liberally throughout a Web site.
Comments:: Well-written headings are an important tool for helping users scan quickly. Headings should conceptually relate to the information or functions that follow them. Headings should provide strong cues that orient users and inform them about page organization and structure. Headings also help classify information on a page. Each heading should be helpful in finding the desired target.
The ability to scan quickly is particularly important for older adults because they tend to stop scanning and start reading more frequently. If headings are not descriptive or plentiful enough, the user may start reading in places that do not offer the information they are seeking, thereby slowing them down unnecessarily.
- 9:4 Use Unique and Descriptive Headings
Guideline: Use headings that are unique from one another and conceptually related to the content they describe.
Comments:: Using poor headings (mismatches between what users were expecting and what they find) is a common problem with Web sites. Ensure that headings are descriptive and relate to the content they introduce.
If headings are too similar to one another, users may have to hesitate and re-read to decipher the difference. Identifying the best headings may require extensive usability testing and other methods.
- 9:5 Highlight Critical Data
Guideline: Visually distinguish (i.e., highlight) important page items that require user attention, particularly when those items are displayed infrequently.
Comments:: Items to highlight might include recently changed data, data exceeding acceptable limits, or data failing to meet some other defined criteria. Highlight is used here in its general sense, meaning to emphasize or make prominent. Highlighting is most effective when used sparingly, i.e., highlighting just a few items on a page that is otherwise relatively uniform in appearance.
- 9:7 Use Headings in the Appropriate HTML Order
Guideline: Use headings in the appropriate HTML order.
Comments:: Using the appropriate HTML heading order helps users get a sense of the hierarchy of information on the page. The appropriate use of H1-H3 heading tags also allows users of assistive technologies to understand the hierarchy of information.
Links
Linking means that users will select and click on a hypertext link on a starting page (usually the homepage), which then causes a new page to load. Users continue toward their goal by finding and clicking on subsequent links.
To ensure that links are effectively used, designers should use meaningful link labels (making sure that link names are consistent with their targets), provide consistent clickability cues (avoiding misleading cues), and designate when links have been clicked.
Whenever possible, designers should use text for links rather than graphics. Text links usually provide much better information about the target than do graphics.
- 10:1 Use Meaningful Link Labels
Guideline: Use link labels and concepts that are meaningful, understandable, and easily differentiated by users rather than designers.
Comments:: To avoid user confusion, use link labels that clearly differentiate one link from another. Users should be able to look at each link and learn something about the link’s destination. Using terms like ’Click Here’ can be counterproductive. Clear labeling is especially important as users navigate down through the available links. The more decisions that users are required to make concerning links, the more opportunities they have to make a wrong decision.
- 10:2 Link to Related Content
Guideline: Provide links to other pages in the Web site with related content.
Comments:: Users expect designers to know their Web sites well enough to provide a full list of options to related content.
- 10:3 Match Link Names with Their Destination Pages
Guideline: Make the link text consistent with the title or headings on the destination (i.e., target) page.
Comments:: Closely matched links and destination targets help provide the necessary feedback to users that they have reached the intended page.
If users will have to click more than once to get to a specific target destination, avoid repeating the exact same link wording over and over because users can be confused if the links at each level are identical or even very similar. In one study, after users clicked on a link entitled ’First Aid,’ the next page had three options. One of them was again titled ’First Aid.’ The two ’First Aid’ links went to different places. Users tended to click on another option on the second page because they thought that they had already reached ’First Aid.’
- 10:4 Avoid Misleading Cues to Click
Guideline: Ensure that items that are not clickable do not have characteristics that suggest that they are clickable.
Comments:: Symbols usually must be combined with at least one other cue that suggests clickability. In one study, users were observed to click on a major heading with some link characteristics, but the heading was not actually a link.
However, to some users bullets and arrows may suggest clickability, even when they contain no other clickability cues (underlining, blue coloration, etc.). This slows users as they debate whether the items are links.
- 10:5 Repeat Important Links
Guideline: Ensure that important content can be accessed from more than one link.
Comments:: Establishing more than one way to access the same information can help some users find what they need. When certain information is critical to the success of the Web site, provide more than one link to the information. Different users may try different ways to find information, depending on their own interpretations of a problem and the layout of a page. Some users find important links easily when they have a certain label, while others may recognize the link best with an alternative name.
- 10:6 Use Text for Links
Guideline: Use text links rather than image links.
Comments:: In general, text links are more easily recognized as clickable. Text links usually download faster, are preferred by users, and should change colors after being selected. It is usually easier to convey a link’s destination in text, rather than with the use of an image.
In one study, users showed considerable confusion regarding whether or not certain images were clickable. This was true even for images that contained words. Users could not tell if the images were clickable without placing their cursor over them (’minesweeping’). Requiring users to ’minesweep’ to determine what is clickable slows them down.
Another benefit to using text links is that users with text-only and deactivated graphical browsers can see the navigation options.
- 10:7 Designate Used Links
Guideline: Use color changes to indicate to users when a link has been visited.
Comments:: Generally, it is best to use the default text link colors (blue as an unvisited location/link and purple as a visited location/link). Link colors help users understand which parts of a Web site they have visited. In one study, providing this type of feedback was the only variable found to improve the user’s speed of finding information. If a user selects one link, and there are other links to the same target, make sure all links to that target change color.
- 10:9 Ensure that Embedded Links are Descriptive
Guideline: When using embedded links, the link text should accurately describe the link’s destination.
Comments:: Users tend to ignore the text that surrounds each embedded link; therefore, do not create embedded links that use the surrounding text to add clues about the link’s destination.
- 10:12 Indicate Internal vs. External Links
Guideline: Indicate to users when a link will move them to a different location on the same page or to a new page on a different Web site.
Comments:: One study showed that users tend to assume that links will take them to another page within the same Web site. When this assumption is not true, users can become confused. Designers should try to notify users when they are simply moving down a page, or leaving the site altogether.
- 10:14 Link to Supportive Information
Guideline: Provide links to supportive information.
Comments:: Use links to provide definitions and descriptions to clarify technical concepts or jargon, so that less knowledgeable users can successfully use the Web site. For example, provide links to a dictionary, glossary definitions, and sections dedicated to providing more information.
Text Appearence
There are several issues related to text characteristics that can help ensure a Web site communicates effectively with users:
- Use familiar fonts that are at least 12-points;
- Use black text on plain, high-contrast backgrounds; and
- Use background colors to help users understand the grouping of related information.
Even though it is important to ensure visual consistency, steps should be taken to emphasize important text. Commonly used headings should be formatted consistently, and attention-attracting features, such as animation, should only be used when appropriate.
- 11:1 Use Black Text on Plain, High-Contrast Backgrounds
Guideline: When users are expected to rapidly read and understand prose text, use black text on a plain, high-contrast, non-patterned background.
Comments:: Black text on a plain background elicited reliably faster reading performance than on a medium-textured background. When compared to reading light text on a dark background, people read black text on a white background up to thirty-two percent faster. In general, the greater the contrast between the text and background, the easier the text is to read.
- 11:2 Format Common Items Consistently
Guideline: Ensure that the format of common items is consistent from one page to another.
Comments:: The formatting convention chosen should be familiar to users. For example, telephone numbers should be consistently punctuated (800-555-1212), and time records might be consistently punctuated with colons (HH:MM:SS).
- 11:4 Ensure Visual Consistency
Guideline: Ensure visual consistency of Web site elements within and between Web pages.
Comments:: Two studies found that the number of errors made using visually inconsistent displays is reliably higher than when using visually consistent displays. Visual consistency includes the size and spacing of characters; the colors used for labels, fonts and backgrounds; and the locations of labels, text and pictures. Earlier studies found that tasks performed on more consistent interfaces resulted in (1) a reduction in task completion times; (2) a reduction in errors; (3) an increase in user satisfaction; and (4) a reduction in learning time. [...]
- 11:5 Use Bold Text Sparingly
Guideline: Use bold text only when it is important to draw the user’s attention to a specific piece of information.
- 11:6 Use Attention-Attracting Features when Appropriate
Guideline: Use attention-attracting features with caution and only when they are highly relevant.
Comments:: Draw attention to specific parts of a Web page with the appropriate (but limited) use of moving or animated objects, size differential between items, images, brightly-colored items, and varying font characteristics.
Not all features of a Web site will attract a user’s attention equally. The following features are presented in order of the impact they have on users:
- Movement (e.g., animation or ’reveals’) is the most effective attention-getting item. Research suggests that people cannot stop themselves from initially looking at moving items on a page. However, if the movement is not relevant or useful, it may annoy the user. If movement continues after attracting attention, it may distract from the information on the Web site.
- Larger objects, particularly images, will draw users’ attention before smaller ones. Users fixate on larger items first, and for longer periods of time. However, users will tend to skip certain kinds of images that they believe to be ads or decoration.
- Users look at images for one or two seconds, and then look at the associated text caption. In many situations, reading a text caption to understand the meaning of an image is a last resort. Parts of images or text that have brighter colors seem to gain focus first.
- Having some text and graphic items in brighter colors, and others in darker colors, helps users determine the relative importance of elements. Important attention-attracting font characteristics can include all uppercase, bolding, italics, underlining, and increased font size.
Lists
Lists are commonly found on Web sites. These may be lists of, for example, people, drugs, theaters, or restaurants. Each list should be clearly introduced and have a descriptive title. A list should be formatted so that it can be easily scanned. The order of items in the list should be done to maximize user performance, which usually means that the most important items are placed toward the top of the list. If a numbered list is used, start the numbering at ‘one,’ not ‘zero.’ Generally only the first letter of the first word is capitalized, unless a word that is usually capitalized is shown in the list.
- 12:1 Order Elements to Maximize User Performance
Guideline: Arrange lists and tasks in an order that best facilitates efficient and successful user performance.
Comments:: Designers should determine if there is an order for items that will facilitate use of the Web site. If there is, ensure that the site is formatted to support that order, and that all pages follow the same order. For example, ensure that lists of items, sets of links, and a series of tabs are in a meaningful order.
Where no obvious order applies, organize lists alphabetically or numerically. Keep in mind that it is the user’s logic that should prevail rather than the designer’s logic.
- 12:2 Place Important Items at Top of the List
Guideline: Place a list’s most important items at the top.
Comments:: Experienced users usually look first at the top item in a menu or list, and almost always look at one of the top three items before looking at those farther down the list. Research indicates that users tend to stop scanning a list as soon as they see something relevant, thus illustrating the reason to place important items at the beginning of lists.
- 12:3 Format Lists to Ease Scanning
Guideline: Make lists easy to scan and understand.
Comments:: The use of meaningful labels, effective background colors, borders, and white space allow users to identify a set of items as a discrete list.
- 12:4 Display Related Items in Lists
Guideline: Display a series of related items in a vertical list rather than as continuous text.
Comments:: A well-organized list format tends to facilitate rapid and accurate scanning. One study indicated that users scan vertical lists more rapidly than horizontal lists. Scanning a horizontal list takes users twenty percent longer than scanning a vertical list.
- 12:5 Introduce Each List
Guideline: Provide an introductory heading (i.e., word or phrase) at the top of each list.
Comments:: Providing a descriptive heading allows users to readily understand the reason for having a list of items, and how the items relate to each other. The heading helps to inform users how items are categorized, or any prevailing principle or theme. Users are able to use lists better when they include headings.
- 12:6 Use Static Menus
Guideline: Use static menus to elicit the fastest possible speed when accessing menu items.
Comments:: To elicit the fastest possible human performance, designers should put the most frequently used menus times in the first few positions of a menu. Designers should determine the location of items within a menu based on the frequency of use of each item. Adaptable menus, where users are allowed to change the order of menu items, elicits reasonably fast performance as well. The slowest performance is achieved when an adaptive menu, where the computer automatically changes the position of menu items, is used. One study found that users prefer having static menus, rather than adaptive menus.
Screen-Based Controls (Widgets)
In order to interact with a Web site, users usually require the use of screen-based controls (sometimes known as ’widgets’). Besides the pervasive link, commonly used screen-based controls include pushbuttons, radio buttons, check boxes, drop-down lists and entry fields. Designers should ensure that they use familiar widgets in a conventional or commonly-used manner.
When pushbuttons are used, ensure that they look like pushbuttons and that they are clearly labeled. In some cases, the pushbuttons will need to be prioritized to facilitate their proper use.
Radio buttons are used to select from among two or more mutually-exclusive selections. Check boxes should be used to make binary choices, e.g., ’yes’ or ’no.’ Drop-down lists are generally used to select one item from among many. To speed user performance, show default values when appropriate, and do not limit the number of viewable list box options.
Entry fields are used when completing forms and entering text into search boxes. Designers should try to minimize the amount of information entered by users. Each entry field should be clearly and consistently labeled, with the labels placed close to the entry fields. Designers should also clearly distinguish between ‘required’ and ‘optional’ data entry fields, and attempt to minimize the use of the Shift key.
To facilitate fast entry of information, designers should automatically place the cursor in the first data entry field, provide labels for each field (e.g., pounds, miles, etc.), and provide auto-tabbing functionality. In order to increase accuracy of data entry, partition long data items into smaller units, enable the software to automatically detect errors, and do not require case-sensitive data entries. Showing users their data entries can increase accuracy. For experienced users, the fastest possible entry of information will come from allowing users to use entry fields instead of selecting from list boxes.
- 13:1 Distinguish Required and Optional Data Entry Fields
Guideline: Distinguish clearly and consistently between required and optional data entry fields.
Comments:: Users should be able to easily determine which data entry fields are required and which are optional. Many Web sites are currently using an asterisk in front of the label for required fields. Other sites are adding the word ’required’ near the label. One study found that bolded text is preferred when compared to the use of chevrons (>>>), checkmarks, or color to indicate required fields.
- 13:2 Label Pushbuttons Clearly
Guideline: Ensure that a pushbutton’s label clearly indicates its action.
Comments:: The label of a pushbutton should clearly indicate the action that will be applied when the pushbutton is clicked. Common pushbutton labels include ’Update,’ ’Go,’ ’Submit,’ ’Cancel,’ ’Enter,’ ’Home,’ ’Next,’ and ’Previous.’
Graphics, Images, and Multimedia
Graphics are used on many, if not most, Web pages. When used appropriately, graphics can facilitate learning. An important image to show on most pages of a site is the organization’s logo. When used appropriately, images, animation, video, and audio can add tremendous value to a Web site. When animation is used appropriately, it is a good idea to introduce the animation before it begins.
Many images require a large number of bytes that can take a long time to download, especially at slower connection speeds. When images must be used, designers should ensure that the graphics do not substantially slow page download times. Thumbnail versions of larger images allow users to preview images without having to download them.
Sometimes it is necessary to label images to help users understand them. Usability testing should be used to help ensure that Web site images convey the intended message. In many cases, the actual data should be included with charts and graphs to facilitate fast and accurate understanding.
It is usually not a good idea to use images as the entire background of a page. Complex background images tend to slow down page loading, and can interfere with reading the foreground text.
Experienced users tend to ignore graphics that they consider to be advertising. Designers should ensure that they do not create images that look like banner ads. Also, they should be careful about placing images in locations that are generally used for advertisements.
- 14:1 Use Simple Background Images
Guideline: Use background images sparingly and make sure they are simple, especially if they are used behind text.
Comments:: Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates. If background images must be employed, use small, simple images with ’tiling,’ and/or keep the image resolution as low as possible.
- 14:2 Label Clickable Images
Guideline: Ensure that all clickable images are either labeled or readily understood by typical users.
Comments:: Occasional or infrequent users may not use an image enough to understand or remember its meaning. Ensure that images and their associated text are close together so that users can integrate and effectively use them together. Additionally, alt text should accompany every clickable image.
- 14:3 Ensure that Images Do Not Slow Downloads
Guideline: Take steps to ensure that images on the Web site do not slow page download times unnecessarily.
Comments:: User frustration increases as the length of time spent interacting with a system increases. Users tolerate less delay if they believe the task should be easy for the computer. One study reported that users rated latencies of up to five seconds as ’good.’ Delays over ten seconds were rated as ’poor.’ Users rate pages with long delays as being less interesting and more difficult to scan. One study reported no relationship between slow page download times and users giving up. [...]
- 14:4 Use Video, Animation, and Audio Meaningfully
Guideline: Use video, animation, and audio only when they help to convey, or are supportive of, the Web site’s message or other content.
Comments:: Multimedia elements (such as video, animation, and audio) can easily capture the attention of users; therefore, it is important to have clear and useful reasons for using multimedia to avoid unnecessarily distracting users. Some multimedia elements may take a long time to download, so it is important that they be worth the wait.
Used productively, multimedia can add great value to a site’s content and help direct users’ attention to the most important information and in the order that it is most useful.
- 14:5 Include Logos
Guideline: Place your organization’s logo in a consistent place on every page.
Comments:: Users are frequently unaware when they click through to a different Web site. Having a logo on each page provides a frame of reference throughout a Web site so that users can easily confirm that they have not left the site. Ideally, the logo should be in the same location on each page: many designers place the logo in the top left corner.
- 14:6 Graphics Should Not Look like Banner Ads
Guideline: Do not make important images look like banner advertisements or gratuitous decorations.
Comments:: In a recent study, a graphic developed to inform users about access to live help was not clicked because many users thought it was an advertisement. Even though the graphic was larger than most other graphics on the page, some users missed the item completely because the graphic looked too much like a decoration or a banner advertisement.
- 14:8 Ensure Web Site Images Convey Intended Messages
Guideline: Ensure that Web site images convey the intended message to users, not just to designers.
Comments:: Users and designers tend to differ in what they think is appropriate to convey a message. When attempting to select the best graphic from a set of graphics, users tend to select those that most other users would have selected (i.e., those that look familiar), while most developers favor graphics that look more artistic. One study found that seventy-five percent of users are able to find information on a content and link-rich site, whereas only seventeen percent could find the same information on a graphic-intensive site.
- 14:9 Limit the Use of Images
Guideline: Use images only when they are critical to the success of a Web site.
Comments:: Ensure that a Web site’s graphics add value and increase the clarity of the information on the site. Certain graphics can make some Web sites much more interesting for users, and users may be willing to wait a few extra seconds for them to load. Users tend to be most frustrated if they wait several seconds for a graphic to download, and then find that the image does not add any value. Some decorative graphics are acceptable when they do not distract the user.
- 14:10 Include Actual Data with Data Graphics
Guideline: Include actual data values with graphical displays of data when precise reading of the data is required.
Comments:: Adjacent numeric annotation might be added to the ends of displayed bars on a bar graph, or to mark the points of a plotted curve. Some displays may require complete data annotation while others may require annotation only for selected data elements.
Writing Web Content
Content is the most important part of a Web site. If the content does not provide the information needed by users, the Web site will provide little value no matter how easy it is to use the site.
When preparing prose content for a Web site, use familiar words and avoid the use of jargon. If acronyms and abbreviations must be used, ensure that they are clearly understood by typical users and defined on the page.
Minimize the number of words in a sentence and sentences in a paragraph. Make the first sentence (the topic sentence) of each paragraph descriptive of the remainder of the paragraph. Clearly state the temporal sequence of instructions. Also, use upper- and lowercase letters appropriately, write in an affirmative, active voice, and limit prose text on navigation pages.
- 15:1 Make Action Sequences Clear
Guideline: When describing an action or task that has a natural order or sequence (assembly instructions, troubleshooting, etc.), structure the content so that the sequence is obvious and consistent.
Comments:: Time-based sequences are easily understood by users. Do not force users to perform or learn tasks in a sequence that is unusual or awkward.
- 15:2 Avoid Jargon
Guideline: Do not use words that typical users may not understand.
Comments:: Terminology plays a large role in the user’s ability to find and understand information. Many terms are familiar to designers and content writers, but not to users. In one study, some users did not understand the term ’cancer screening.’ Changing the text to ’testing for cancer’ substantially improved users’ understanding.
To improve understanding among users who are accustomed to using the jargon term, it may be helpful to put that term in parentheses. A dictionary or glossary may be helpful to users who are new to a topic, but should not be considered a license to frequently use terms typical users do not understand.
- 15:7 Limit the Number of Words and Sentences
Guideline: To optimize reading comprehension, minimize the number of words in sentences, and the number of sentences in paragraphs.
Comments:: To enhance the readability of prose text, a sentence should not contain more than twenty words. A paragraph should not contain more than six sentences.
Content Organization
After ensuring that content is useful, well-written, and in a format that is suitable for the Web, it is important to ensure that the information is clearly organized. In some cases, the content on a site can be organized in multiple ways to accommodate multiple audiences.
Organizing content includes putting critical information near the top of the site, grouping related elements, and ensuring that all necessary information is available without slowing the user with unneeded information. Content should be formatted to facilitate scanning, and to enable quick understanding.
- 16:1 Organize Information Clearly
Guideline: Organize information at each level of the Web site so that it shows a clear and logical structure to typical users.
Comments:: Designers should present information in a structure that reflects user needs and the site’s goals. Information should be well-organized at the Web site level, page level, and paragraph or list level. Good Web site and page design enables users to understand the nature of the site’s organizational relationships and will support users in locating information efficiently. A clear, logical structure will reduce the chances of users becoming bored, disinterested, or frustrated
- 16:2 Facilitate Scanning
Guideline: Structure each content page to facilitate scanning: use clear, well-located headings; short phrases and sentences; and small readable paragraphs.
Comments:: Web sites that are optimized for scanning can help users find desired information. Users that scan generally read headings, but do not read full text prose–this results in users missing information when a page contains dense text.
Studies report that about eighty percent of users scan any new page. Only sixteen percent read each word. Users spend about twelve percent of their time trying to locate desired information on a page. To facilitate the finding of information, place important headings high in the center section of a page. Users tend to scan until they find something interesting and then they read. Designers should help users ignore large chunks of the page in a single glance
- 16:3 Ensure that Necessary Information is Displayed
Guideline: Ensure that all needed information is available and displayed on the page where and when it is needed.
Comments:: Users should not have to remember data from one page to the next or when scrolling from one screenful to the next. Heading information should be retained when users scroll data tables, or repeated often enough so that header information can be seen on each screenful.
- 16:4 Group Related Elements
Guideline: Group all related information and functions in order to decrease time spent searching or scanning.
Comments:: All information related to one topic should be grouped together. This minimizes the need for users to search or scan the site for related information. Users will consider items that are placed in close spatial proximity to belong together conceptually. Text items that share the same background color typically will be seen as being related to each other.
- 16:5 Minimize the Number of Clicks or Pages
Guideline: To allow users to efficiently find what they want, design so that the most common tasks can be successfully completed in the fewest number of clicks.
Comments:: Critical information should be provided as close to the homepage as possible. This reduces the need for users to click deep into the site and make additional decisions on intervening pages. The more steps (or clicks) users must take to find the desired information, the greater the likelihood they will make an incorrect choice. Important information should be available within two or three clicks of the homepage. [...]
Search
Many Web sites allow users to search for information contained in the site. Users access the search capability by entering one or more keywords into an entry field—usually termed a ’search box.’ When there are words in the Web site that match the words entered by users, users are shown where in the Web site those words can be found.
Each page of a Web site should allow users to conduct a search. Usually it is adequate to allow simple searches without providing for the use of more advanced features. Users should be able to assume that both upper- and lowercase letters will be considered as equivalent when searching. The site’s search capability should be designed to respond to terms typically entered by users. Users should be notified when multiple search capabilities exist.
Where many users tend to conduct similar searches, sometimes it works best to provide search templates. Users tend to assume that any search they conduct will cover the entire site and not a subsite. The results presented to users as a result of searching should be useful and usable.
- 17:1 Ensure Usable Search Results
Guideline: Ensure that the results of user searches provide the precise information being sought, and in a format that matches users’ expectations.
Comments:: Users want to be able to use the results of a search to continue solving their problem. When users are confused by the search results, or do not immediately find what they are searching for, they become frustrated.
- 17:2 Design Search Engines to Search the Entire Site
Guideline: Design search engines to search the entire site, or clearly communicate which part of the site will be searched.
Comments:: Designers may want to allow users to control the range of their searches. However, users tend to believe that a search engine will search the entire Web site. Do not have search engines search only a portion of the site without clearly informing users which parts of the site are being searched. [...]
- 17:4 Provide a Search Option on Each Page
Guideline: Provide a search option on each page of a content-rich Web site.
Comments:: A search option should be provided on all pages where it may be useful–users should not have to return to the homepage to conduct a search. Search engines can be helpful on content-rich Web sites, but do not add value on other types of sites. [...]
- 17:5 Design Search Around Users’ Terms
Guideline: Construct a Web site’s search engine to respond to users’ terminology.
Comments:: Users seem to rely on certain preferred keywords when searching. They will generally conduct one or two searches before trying another site or search engine (or abandoning the search altogether). Therefore, it is important that users succeed on their first try.
- 17:6 Allow Simple Searches
Guideline: Structure the search engine to accommodate users who enter a small number of words.
Comments:: The search function should be easy to use and allow for users to be successful when searching. Most users tend to employ simple search strategies. They rarely use advanced search features (such as Boolean operators), so it is important not to rely on those to improve the effectiveness of the site’s search engine. If most of the site’s users are inexperienced Web searchers, provide simple instructions and examples to help guide users’ searching and use of the search results.
Provide a box (entry field) for entering search terms that is at least 35 to 40 characters wide. Users will self-detect more errors when they see what they have entered.
Further information
- Research-Based Web Design & Usability Guidelines homepage at usability.gov