Research-based web design and usability guidelines: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
Line 14: Line 14:


The guidelines we present below are chosen (a) by their importance and (b) for various other reasons :)
The guidelines we present below are chosen (a) by their importance and (b) for various other reasons :)
Look at the [http://usability.gov/guidelines/index.html original if you want to real thing ! Also, on the website, the authors promised a database-base solution at some point.
 
Look at the [http://usability.gov/guidelines/index.html 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 ====
==== 1:1 Provide Useful Content ====
Line 26: Line 33:
Guideline: Use all available resources to better understand users’ 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. [....]
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.
 
==== 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 - [[User:Daniel K. Schneider|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.
 
==== ====
 
==== ====


==== ====


==== ====
==== ====

Revision as of 23:02, 15 March 2011

Draft

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 [http://usability.gov/guidelines/index.html 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.

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.

Links