Key usability guidelines for online courses

Guidelines home
Draft version 0.6

Meet user needs

Navigation

Graphics, images & multimedia

Accessibility

Hardware and software

Links

Writing web content

 

Page titles and length

Text

Content organisation

 

Key
0:0 guideline number in Research-Based Web Design & Usability Guidelines
** extremely important for the success of the web site
* very important for the success of the web site

 

Focus on meeting the users' needs

 

1:1

**

Set and state goals for the site. Obtain consensus on the main purposes of the site before starting development.

 

1:2

**

Use an iterative design approach: create and evaluate paper and software prototypes to obtain design feedback. See the SAP Quick Guide to Creating Information-Oriented Web Sites.

 
 

 

Design for commonly-used hardware and software

Top

4:1

**

Design for common browsers: design for all browsers that have a significant number of users.

 

4:3

*

Design for popular operating systems: design for all operating systems that have a significant number of users.

 

4:4

*

Design for the user's typical connection speed. Restrict page size for dial-up users.

 

4:5

-

Design for commonly used screen resolutions (currently 800x600 upwards): eliminate horizontal scrolling for expected window sizes.

 
 

 

Page Design

Top

6:1

**

Set appropriate page lengths: Use shorter pages for navigation and pages that need to be quickly browsed. Use longer pages to facilitate uninterrupted reading and to make pages easier to print.

 

2:4

*

Provide printing options: Format the page for easy printing by allowing it to adjust to the width of the window, or use CSS to provide a printable version.

 

9:5

-

Provide descriptive page titles that are unique, concise and meaningful when used by bookmarks and search engines.

 

 

Navigation

Top

5:3

**

Show all major options on the course homepage including a contents list of the topic areas.

 

7:1

**

Provide feedback on the users's location to let users know where they are: e.g. highlight the menu location and show navigation path as a breadcrumb.

 

7:2

*

Use a clickable 'List of Contents' on long pages: to provide a quick overview and enables users to easily reach specific items.

 

7:3

*

Do not create pages with no navigational options. Newly opened windows should have a prominent control to close the window.

 

-

Use site maps to help users understand the structure of the site.

 
 

 

Scrolling and Paging

Top

8:2

-

Use longer, scrolling pages when users are reading for comprehension.

 

8:4

-

Scroll fewer screenfuls: If users are looking for specific information, break up the information into shorter pages.

 
 

 

Links

Top

10:1

**

Provide consistent clickability cues: Make it obvious what is clickable: use a unique colour or style (e.g. underlining).

 

10:2

*

Avoid misleading cues to click: Ensure that items that are not clickable do not look clickable (e.g. avoid underlining or blue items).

 

10:4

*

Use meaningful link labels so that users can find the right link first time.  Do not use 'click here'.

 

10:5

*

Match the link names with the destination page headings, so that users know they have reached the right page.

 

10:6

*

Ensure that embedded links are descriptive: The wording should help users scan the contents of a page.

 

10:8

*

Designate used links: Use colour changes to indicate to users when a link has been visited.

 

10:12

-

Indicate internal v. external links: differentiate internal page links and external links from links to other pages in the site.

 
 

-

Check linked sites for content and authenticity. Check for broken links.  
 

-

On long pages put links at the end of each section and at the bottom to return to the top.  
 

-

For a sequence of pages include next and previous links so that the pages can be accessed in logical order.  

2:3

*

Provide assistance to users through links to additional help, for example for first time users.

 

 

Text

Top

11.1

**

Use black text on plain, high-contrast backgrounds

 

14:9

-

Use simple background images: Use background images sparingly, and avoid using images behind text

 

11.2

**

Ensure visual consistency of website elements within and between web pages.

 

11:4

*

Use at least 12-point font. Use relative, not absolute font sizes.

 

12.1

*

Order elements to maximise user performance (e.g. lists should read down columns, not across).

 

 

Data entry and forms

Top

13:1

**

Distinguish required and optional data entry fields.

 

13:2

**

Detect data entry errors automatically.

 

13:3

**

Minimize user data entry. Do not require users to enter the same information more than once.

 

13:4

**

Label data entry fields clearly.

 

13:5

**

Put labels close to data entry fields.

 

13:6

*

Label pushbuttons clearly.

 

13:7

*

Label data entry fields consistently across pages.

 

13:8

*

Allow users to see their entered data Create data entry fields that are large enough to show the data without scrolling.

 

13:9

*

Display default values whenever a likely default choice can be defined

 

13:10

*

Use a minimum of two radio buttons: if necessary provide a separate choice labeled 'none'

 

13:11

-

Use radio buttons for mutually exclusive selections

 

13:12

-

Use check boxes to enable multiple selections

 

13:16

-

Do not make user-entered codes case sensitive

 

13:17

-

Place the cursor in the first data entry field

 

13:20

-

Ensure that double-clicking will not cause problems (many users double-click when only one click is needed).

 

13:21

-

Do not limit viewable list box options: When using a lists box, show as many items as possible.

 

13:23

-

Prioritise pushbuttons: Put the button that is used most frequently in the 1st position & make it the default when users press Enter.

 

13:24

-

Minimise use of the Shift key for data entry .

 

 

Graphics, Images, and Multimedia

Top

14:1

*

Use video, animation, and audio only when they help to convey the website's message or other content.

 

14:4

-

Limit the use of images to when they are critical for the success of a website.

 

10.3

*

Use text for links: images alone may not look clickable and can be difficult to understand .

 

14:5

-

Label clickable images (unless they are readily understood by typical users).

 

10:14

-

Clarify clickable regions of images: Ensure that the entire image is clickable or that the clickable areas are obvious.

 

14:6

-

Ensure that images do not significantly slow page download time, particularly for users with slow connections. Using the same graphic repeatedly saves time as browsers only download them once.

 

16:8

-

Design quantitative content for quick understanding by  use of tables and graphics .

 

14:10

-

Include actual data values with graphical displays of data when precise reading of the data is required.

 

 

Writing Web Content

Top

15:1

*

Define acronyms and abbreviations: Do not use unfamiliar or undefined acronyms or abbreviations  on websites.

 

15:2

*

Use abbreviations sparingly: Show complete words rather than abbreviations (except for well-known abbreviations).

 

15:6

-

Make first sentence descriptive: Include the primary theme of each paragraph in the first sentence.

 

15:7

-

Use active rather than passive sentences for instructions

 

15:9

-

Limit the number of words in sentences, and the number of sentences in paragraphs.

 

 

Content Organisation

Top

9:2

**

Use unique headings that clearly describe and differentiate the different categories of material.

 

16:4

*

Group related elements: Group all related information and functions in order to decrease time spent searching or scanning.

 

16:6

*

Ensure that all necessary information is available and displayed on the page where and when it is needed.

 

16:7

*

Format information for multiple audiences: Use multiple formats if the website has distinct audiences with different needs.

 

16:8

-

Design quantitative content for quick understanding by  use of tables and graphics.

 

 

Accessibility

Top

3:1

-

Comply with Disabilities Discrimination Act: this means implementing at least priority level 1 of the W3C guidelines.

 

3.2

*

Design forms for users using assistive technology

 

3.3

*

Provide text equivalents (alt text) for non-text elements such as images, symbols and maps

 

3.4

**

Do not use colour alone to convey information

 

3:5

-

Provide equivalent text-only pages if there is no other way to comply with accessibility requirements.

 
9:8

-

Use headings in the appropriate HTML order: to allow assistive technology to understand the hierarchy.

 

3.8

-

Enable users to skip repetitive navigation links when using assistive technology

 

3.9

-

Provide frame titles when frames are used.

 

3.10

-

Test any plug-ins and applets for accessibility

 

3.12

-

Do not require style sheets: organise documents so they are readable without requiring an associated style sheet (CSS).

 

This list includes the Research-Based Web Design & Usability Guidelines that are most important when developing online courses.

The links are to pdf files as the Research-Based Web Design & Usability Guidelines are not currently available as web pages. To enable the links to display specific pdf pages, configure your browser to display in line pdf files (Mac OS X users should install PDF Browser Plugin for use with Safari or Netscape).

Produced by Nigel Bevan and Sara Kincla, Serco Usability Services
for the JISC HCI Design Foundation Study, 23 December 2003.