Key usability guidelines for academic websites

Guidelines home
Draft version 0.6

Design Process Page Design Text appearance Writing web content
Accessibility Navigation Lists Content organisation
Hardware Scrolling Data entry and forms Search
The Homepage Links Graphics, images & multimedia  

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

 

 

Design Process

 

1:1

**

Set and state goals: 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.

 

1:3

**

Evaluate websites before and after making changes to determine if changes improved the usability of the site.

 

1:4

**

Provide useful content that is engaging, relevant, and appropriate to the audience.

 

1:5

*

Understand and meet users' expectations by using familiar formatting and navigation schemes.

 

1:6

*

Establish user requirements: through surveys, interviews, focus groups, support lines, user groups, etc.

 

1:8

*

Consider many user interface issues, e.g. the users' experience and reason for visiting the site; usability results.

 

1:9

*

Focus on performance before preference: Make decisions about content, format, interaction & navigation before deciding colours and graphics.

 
2.10

-

Provide feedback when users must wait.  
    Accessibility Top

3:1

-

Comply with Disabilities Discrimination Act: this means implementing the W3C guidelines at level 2.

 

 

 

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.

 

The Homepage

Top

5:3

**

Show all major options on the homepage (such as topic areas and categories).

 

5:4

*

Enable access to the homepage by providing a link to home on all other pages.

 

5:7

-

Communicate the website's purpose: What is this? What does it have? What can I do?

 

 

 

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.

 

6:2

**

Use frames when functions must remain visible to enable immediate changes to be made to information displayed in another frame.

 

6:3

**

Establish level of importance  by putting important information at the top of the page and less important at the bottom.

 

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.

 

 

-

Avoid PDF for on-screen reading Only use pdf format if the text is intended to be printed and read offline.

 

Navigation

Top

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.

 

7:4

*

Differentiate and group navigation elements. Break up pages into clearly defined areas.

 

7:5

*

Use descriptive tab labels: When using tabs for navigation, make sure the labels are self-explanatory.

 
7.7

-

Use site maps for websites that have many pages.  

 

-

Provide a list of the contents of each part of the site as a list of links to the final information, in meaningful groups

 

 

-

Customise the 'page not found' error message to offer suggested solutions.

 

 

 

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: preferably use the browser default.

 

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.3

*

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

 

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:7

*

Repeat important links: Ensure that important content can be accessed in different ways.

 

10:8

*

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

 

10:9

*

Link to related content: Use links to cross-reference other pages in the site with related content.

 

10:12

-

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

 

10:14

-

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

 

 

 

Text Appearance

Top

11.1

**

Use black text on plain, high-contrast backgrounds

 

11.2

**

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

 

11:3

*

Format common items consistently across pages (such as date or time).

 

11:4

*

Use at least 12-point font. Preferably use the browser default size.

 
11.7

-

Use attention-attracting features such as animation with caution and only when they are highly relevant.  

 

 

Lists

Top

12.1

*

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

 

12.2

*

Display related items in lists vertically, rather than as text in a paragraph.

 

12:3

*

Introduce each list: Provide an introductory heading (i.e. word or phrase) at the top of each list.

 

12:4

*

Format lists to ease scanning by use of meaningful labels, effective background colours, borders and white spaces.

 

12:5

*

Start numbered items at one rather than zero.

 

12:6

-

Place any important items at the top of a selection list, and the remainder alphabetically or numerically.

 

 

 

Data entry and forms

Top

13:1

**

Distinguish required and optional data entry fields.

 

13:2

**

Detect data entry errors automatically (when possible).

 

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 typical entries 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:2

*

Include the logo of the organisation in a consistent place on every page.

 

14:3

*

Limit large images above the fold: Do not fill the entire first screenful with one if there are screensful of text information below the fold.

 

14:4

-

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

 

14:5

-

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

 

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.

 

14:9

-

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

 

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:3

*

Use familiar words: Avoid jargon.

 

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

16:1

**

Organize information clearly: Structure the site to be meaningful to the user (not the information providers)

 

16:2

**

Put critical information near the top of the hierarchy of a website to make it easy to find.

 

9:1

**

Use clear labels for categories of information that summarise the items within the category.

 

9:2

**

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

 

2:1

**

Display information in a format and in units that are immediately useful and understandable.

 

2:5

*

Standardise task sequences : Allow users to perform tasks in the same sequence  and manner across similar conditions.

 

16:3

*

Facilitate scanning: Design navigation pages for scanning, not reading.

 

16:4

*

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

 

16:5

*

Display only necessary  information: Remove extraneous  information to allow users to remain focused on the desired task .

 

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.

 

2:3

*

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

 

16:8

-

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

 

 

 

Search

Top

17:1

**

Provide a search box in the same place on each page of content-rich web sites

 

17:2

**

Ensure usable search  results that give the information needed in a format that matches users' expectations.

 

17:3

**

Allow simple searches: Structure the search engine to provide appropriate results for users who enter of one or two words.

 

17:4

*

Make upper- and lowercase search terms equivalent

 

17:5

*

Design search engines to search the entire site, or clearly communicate which part of the site will be searched.

 

17.6

*

Design search around users' terms: Refine the search engine to respond to the words most frequently entered by users.

 

 

-

Default search should work like Google (look for the phrase then individual words), or be labeled (e.g. 'phrase')

 

 

-

State how many results have been found

 

 

-

Display the search criteria on the results page, either as a separate page heading or display it in the search box

 

 

-

Ensure a search box is provided for repeat searches, both at the top and especially at the bottom of the page

Top

Also see additional guidance on portals and personalisation.

This list includes all the Research-Based Web Design & Usability Guidelines that are categorised as extremely or very important and that are appropriate for academic web sites, plus additional guidelines selected as most relevant taking account of feedback from academic webmasters.

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.