Key usability guidelines for academic websites

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.

-

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

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

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

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.

-

-

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

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

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

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.

-

Lists

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

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

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

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

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

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