perceptionDesigners Sourcebook

Usability Checklist

The term usability describes how easy it is for someone to use your product in the way it was intended. It should be:

Usability for web sites means that they must serve the purpose for which they were designed. To determine how usable a site is, we must be clear about:

Knowledge of the intended user is not enough. The site must also conform to principles of usability.

 

Principles of Usability

User-Centred

Error prevention

Strong navigational support

Consistency

Aesthetic Design

These Principles of Usability are incorporated into usability testing, in the Usability Checklist.

Usability testing at Bratch Innovation covers:

Accessibility:

 

Organisation:

 

Navigation:

 

Aesthetics:

 

Feedback:

 

Usability Checklist

Client: Date:

Attribute

Yes

No

N/A

Comments

User-Centred

  1. Warnings tell the user that following the link will take them out of the current site

  • There is a site map
    		•

  • The user's position in the site is clear
    		•

  • There is an opportunity for user feedback
    		•

  • Information be reached within a minimum number of clicks
    		•

  • The site be used by all the browsers that were specified
    		•

    1. There a search engine for the site

    Error prevention

    1. Field labels on forms indicate what data should be entered

  • The size of the field is large enough for the data to be entered
    		•

  • The order of the data entries follow a logical sequence
    		•

  • Forms have clearly marked 'Send', 'Clear' and 'Cancel' buttons
    		•

  • Helpful default values are provided
    		•

    1. It is easy to select links or commands

    Strong Navigational Support

    1. Every page has identification information

  • The material organised into meaningful sections
    		•

  • The headings and subheadings have a clear meaning
    		•

  • The sections make sense and do they contain the expected material
    		•

  • Labels are appropriate and have a clear meaning
    		•

  • The user does not have to scroll through large amounts of text
    		•

  • 'Back to Top' buttons are used where appropriate
    		•

  • The links have unique names that clearly indicate the nature and purpose of the linked document
    		•

  • The user can tell what links have been visited
    		•

    1. Links have a destination

    Consistency

    1. Navigation icons always available

  • The site has a consistent and recognisable look and feel
    		•

  • The content is up-to-date
    		•

    1. The font is consistent

     

    Aesthetic Design

    1. The site feels unified

  • Labels are close to text or graphics
    		•

  • The text is easy to read on the background
    		•

  • Text is left justified
    		•

  • The text is in regular Upper and Lower case
    		•

  • Groups in a table or list are separated by a line
    		•

  • Colour and shading is used only when needed and when it has a function
    		•

  • Graphics are used to attract attention to target areas
    		•

  • The pictures are appropriate and have a clear meaning
    		•

    1. Bold text used sparingly

     

    Navigation

    People look for routes to get them where they want to go and in the shortest time. Navigation is about knowing where you are, knowing where you want to go, knowing how to get there and how long the journey will take you. Providing people with clear 'landmarks' and reference points enables them to arrive at their destination easily without the frustration of dead ends or wrong turns. This is true whether you are talking about driving, shopping or websites.

    The users' experience of a website is inevitably determined by how easily they can move through it. People's motivation for moving through a site is to reach a final destination or goal. What is the user's end goal? Good navigation is designed to get them there. It predicts the actions of users and supports them. To do this, you need to know their goals and needs.

    There are different types of navigation systems. Hierarchical systems allow the user to move from high-level categories, down into more specific content areas, and back up again. Global navigation systems usually complement hierarchical systems. They enable lateral and vertical movement throughout the site. For example, links back to the home page or a contact page are always available to the user, no matter where they are in the site. Local navigation systems are used within sub-sites and only relate to that content. The user should still be able to navigate using the global navigation of the whole site, however. Local navigation should complement the global navigation. Ad hoc navigation describes the use of embedded links. Embedded links are problematic since users often miss them in the text when they are scanning pages. This can be overcome by separating the links from the text in paragraphs, by placing them in bulleted lists or by creating a menu of links at the top or bottom of the page.

    Navigation can be passive or directed. Passive navigation offers the person a set of options and allows them to choose the route to their goal. Directed navigation guides the person on a specific path through the hierarchy.

    Navigational items can be textual or graphical. Section heads and subheads help to highlight the person's current location. Changing the appearance of a navigation item when the person is on that page is another indicator of location. Directional buttons such as 'Back' can lead to unexpected results for users. Will they go to the sequential page or to the previous page they visited? By adding some explanatory text such as 'Back to X page', the user can more accurately determine their position in the site. Showing the path the person used to reach their current location, as Yahoo! does, is another useful navigational aid. Visual metaphors that reflect the real world and how people approach it, offer users a familiar and easily-learned method of navigation.

    It is important to allow users to move up as well as down the site. All pages should offer a path back to the higher levels of the site.

    While some users will browse through a site with no specific purpose, most tend to have specific goals and want to reach them in as quick a time as possible. Shortcuts through the site such as tables of contents, site maps and search options allow users to get to where they want to go rapidly. These tools should be clear, convenient and constantly available.

    Good navigation has the following characteristics:

    1. It is easily learned.
    2. It is consistent in appearance, placement and structure.
    3. It gives feedback on location.
    4. It gives users a context and explanation.
    5. It offers alternative routes to information.
    6. It needs a minimum amount of time and action.
    7. It sends clear visual messages through hierarchy, colour, position, size etc.
    8. It has clear labels that have unambiguous meanings.
    9. It is appropriate to the site's purpose and reinforces it.
    10. It supports users' goals and behaviors.

     

    Download Time

    The majority of people use the Internet to retrieve information. Users want fast access to large amounts of information from different sources. They do not like to wait. Users become annoyed, frustrated and impatient when they feel the system does not respond quickly enough. The perception of a delay in system response times to an action, rather than the actual cause, creaetes stress for users.

    User surveys consistently show that loading time is the main issue for users. One survey concluded that over 80% of users think loading time is the biggest problem for the web. The seventh Georgia Tech web use survey (GVU) showed that for 76.55% of users, speed is main complaint.

    Loading times are slower for more people despite increasing availability of high-speed connections. According to the GVU 7, more than 70% of users log on at 28.8K or less. The majority of these respondents are home users. Corporate users usually have higher bandwidth. The table below shows the typical connection speeds and the main audience.

    Speed

    Audience

    14.4 modem (14,400 bps)

    Home users

    28.8 modem (28,800 bps)

    Home users

    ISDN connection (128,000 bps)

    Business, some home users

    T1 connection (1.5 mbps)

    Corporations, universities

    T3 connection (45 mbps)

    High-end corporation

    Cable line (10 mbps)

    Home users

    It is likely that as more home users have access to cable line connection, the dissatisfaction with speed will decrease. Despite this, speed or the perception of speed, is an important factor in user satisfaction. People perceive actions as fluid if there is a response within 0.2 sections after an action. Any greater time lag and things will appear disjointed. In addition, people need to see some indication of activity from the system or they will give up and move on. One study on the time users were willing to wait showed that users left after 8.5 seconds with no feedback from the system. A change in the cursor increased the time to 20 seconds and a progress bar extended the time people were willing to wait to over a minute.

    Long load times also have a negative impact on the user's perception of the organization of site and quality of its content. Sears, Jacko & Borella studied how delays affected users perceptions of how easy it was to find information, the quality of the information and the information's organization in text-only and text and graphic sites. In text and graphics sites, people were less tolerant of delays. The sites with no or short delays were judged to be better. In text only sites however, a shorter response time was seen to indicate that the information was of poorer quality.

    Because people will not wait for a site, speed should be an overriding design consideration. Steps should be taken to reduce page sizes and to keep the users from leaving the site. Connection speeds are low for the majority of users. They need to see some information quickly so that they can start using the site.

    Graphics-heavy sites are contributing to an increase in slower loading times despite higher connection speeds. According to the GVU 8 survey, about 5% of users disable images by default. Other statistics suggest that between 12 - 30 % of users disable images for faster connections. If the site is aimed at home users, large images should not be included because most home users are likely to use 14.4 or 28.8 modems. They are also likely to pay for their own connection and often disable images because they don't want to wait for them to load.

    To account for these factors, the top of the page should be meaningful without the images. Navigation elements should be near the top of the page so that they are visible quickly. ALT tags on images allow users to see what they are. Provide a textual link as an alternative for a graphic link that may be turned off. Background images should be kept small so that users are not staring at a blank screen. Including width and height attributes for images and tables means that users do not have to wait for image to load before being able to navigate the page. Large tables should be split to reduce load time. Several small tables will appear to load quicker that one large table. The start of a site should be a fast, well-optimized page. Pages may increase in size and loading time gradually as the user moves deeper into the site if you warn them of increasing load times. It is wise to keep users informed by giving them the size and approximate load time of images before they load.

    According to All Things Web, graphics optimization is second only to basic legibility when designing a site. Every kilobyte removed from the page size saves at least 1 second in load time for 14.4k users. They gave the example of a corporate site with splash screen that took 90 seconds to load at 14.4kbps. 25% of visitors did not move passed the splash screen. When the splash screen was removed and the graphics were optimized, there was a 35% increase in traffic.

    Reducing the colours of an image is another way to decrease its size. A 5 x 3 photograph is 88K when saved at 8-bit, 256 colours, 72 dpi, 66K saved at 5-bit and 32 colour and when saved as a jpeg it is 33K.

    ATW published guidelines for page sizes as follows:

    0 - 10K exemplary

    10 - 20K well-optimized

    20 - 40K adequate

    40 - 60K dubious

    60K+ unacceptable

    One of their surveys of 213 randomly selected pages concluded that the average page size was 61K while half of the sample was 32K or less. Human factors research suggests that page sizes should be kept under 30K. Remembering that the main complaint users have is long download times, the aim of web site designers should be to reduce page size as much as is practical.

     

    Legibility and Font Size

    Legibility describes how easy the text is to read and is based on the reader's familiarity with the typeface. Legibility depends on letter shapes, type size, contrast and layout. Character recognition depends on the size and design. All capital letters are harder to recognize, take longer to read. Lower case letters have a more distinctive shape.

    Line spacing has an affect on character recognition. If the line spacing is too small, it crowds the reader's central vision, causing the reader to miss the beginning of the next line. Increasing the line spacing will increase reading speed but too much space will make the text disjointed. The length of a line also affects legibility. Long lines are harder to read because they require more eye movement. They tire the reader's eyes and make it harder for the reader to find the beginning of the next line. Line lengths should be limited to 40 to 60 characters.

    Margins and white space improve readability. They make paragraphs and line beginnings standout against the background. White space is also used to indicate the hierarchy of sections along with different type weights for headings. Text should be left justified. Justified text can have rivers of white through it which reduces reading rates.

    Text is most readable when it is upper and lower case, left-justified, serif type, with 10-12 words/line, leaded 2 points, surrounded by white space and margins, on a good contrasting background.

    Displayed text less legible than printed. Screen reading is 20 - 30% slower and is slightly less accurate. It has a more varied speed than printed text and is more tiring for the reader. Using anti-aliased fonts increases reading speed on screen. Anti-aliasing blends the edges of type to give it a smoother look, making it easier to read. It is not effective on small type because thin serifs become too blurred, making the letters hard to distinguish. On the screen, 12pt is smallest size that maintains good legibility in most serif fonts. In sans serif fonts, it is 10pt.

    According to a study on the readability of fonts in a Windows environment conducted by T. Tullis, J.L. Boynton & H. Hersh, which looked at Arial, MS Sans Serif, MS Serif and Small Fonts, sizes 6.0 to 9.75, the most preferred fonts were Arial and MS Sans Serif 9.75. Fonts between 8.25 and 9.75 were good for reading accuracy and speed except 8.25 MS Serif. Arial 7.5 and Small Fonts were no legible to the participants.

    There are two types of typefaces used on screen: those designed specifically for screen and those produced by calculations from a basic font. In screen fonts, each character is pixel-based and works within the grid. The sizes follow the range of 8, 9, 10, 12, 14 and so on. Sizes like 11 or 13 are calculated to visually approximate the size but do not have the design subtleties of screen fonts. Bold types are calculated; extra pixels are added around the edges of designed fonts. This causes the type to loose the character shape, tracking and kerning. Italics are hard to reconcile with square pixel grid and should be avoided. Upper case letters need a minimum of 7 pixels, while lower case letters need 9 pixels for ascenders and decenders.

    Type displays differently on Macintoshes and PCs. On a Macintosh, the pixel height is equal to the point size. The display is based on 72 pixels per inch; therefore, each pixel is equal to a point. (A pica is 72 points in type and type size is measured in points.) If the screen is changed from 640 x 480 on a 14" monitor to 800 x 600, the pixels are correspondingly smaller. On a PC, the display is based on 96 pixels to the inch, making an inch equivalent to about 1.3 inches on screen. On a 640 x 480, 14" monitor, the pixels are not smaller, but the inch is larger. A screen running at 800 x 600 has smaller pixels so the virtual inch is closer to the real one. The result is, therefore, that PC fonts are about 3/4 the size of those on a Macintosh: on the screen, 9pt on a PC is physically the same as 12pt on a Mac. This means that the smallest fully-formed type is 7 or 8 pt on a PC and 9pt on a Mac. The type is the same size on the screen at the same resolution, but will be their true size when printed out.

    The choice of font is another area of concern. Users may not have same fonts as the designer. Therefore, default fonts should be used for text blocks. In addition, PC users may have the option to use Large or Small Fonts. Large compensates for difficulty in reading small type at high resolution. In small type sizes, sans serif fonts or slab serif fonts that have serifs that are at least 1 pixel high and wide, are best. Smaller serifs may display irregularly or not at all. Thin characters are hard to read. The stroke width should be at least 1/12 the character height. Well-proportioned fonts with simple characters are more legible on screen. ANSI specifies a width to height ratios of .7 to .9 for fixed-width fonts and an M width to height ratio of 1 for proportional fonts. Proportional fonts are faster and easier to read, have higher visibility and contrast.

    Determining the correct type size depends on a number of factors: reading distance, screen resolution, contrast, the reader's eyesight, whether text is scanned, read word-by-word, read character-by-character. It needs to be large enough so that the reader can recognize the characters but small enough so they can see entire words and phrases at once. This is the zone of optimal legibility. The required reading distance for screen less adjustable than paper. Doubling the reading distance reduces the size of the type by half. As well, the visual angle to the type is important. The type size can be determined by the equation:

    Screen size = viewing distance x visual angle

    The ANSI Standard recommends the following sizes for viewing distances:

    Viewing distance (inches)

    reading text in points

    scanning targets in points

    12

    5

    8

    14

    6

    9

    16

    7

    10

    18

    8

    11

    20

    9

    13

    22

    10

    14

    24

    11

    15

    30

    13

    19

    36

    16

    23

    42

    18

    26

    48

    21

    30

    60

    26

    38

     

    The contrast between the text and background affect legibility. Increasing the contrast improves reader response time and accuracy. Brightly-coloured backgrounds compete with text and graphics, affecting legibility.

    Line length is harder to control on web pages. Resizing the window can distort the line length. If the browser window is widened too much, the line length will be too long. The text will be harder to read because the reader will not be able to find the line's beginning. Longer line lengths need space to make them easier to read but there is no leading in HTML and you can't easily control the spacing between lines. The line length can be restricted using 'Block Quote' to create a wider left margin. Tables can be used to control the line length by placing text within cells, so that the text is restricted within a predetermined area. Hard breaks can be used to keep lines short and to control shape of a ragged-right edge and indenting the first line of all paragraphs after the first one will make the text easier to read.

     

    Shortcuts

    Web sites require some method of searching to enable users to find the information they are looking for quickly. Some of the tools that enable users to do this are:

    Search

    Usability studies show that more than half of users are search oriented, one fifth use links mainly and the rest use a mixture of methods. Search-oriented users go to the search facility first. They don't want to look around the site but want specific information. Link-oriented users follow links to find information and only use Search when they are lost. The users who employ a mixture of methods switch between both methods, depending on what seems appropriate to them at the time.

    Some, such as Nielsen suggest that sites with over 200 pages should have a Search function, others say 100 pages. It is more likely that the need for a Search function depends on the content of the site. A 50-page site may have a Search if the content warrants it while 200 page site may not need it.

    A keyword search may not always be the best option. Some sites want users to follow a certain path to information so a Search would not be appropriate. For Search to be effective, the site must have a well-indexed database of terms and categories.

    If a Search function is provided to users, it should be as part of the global navigation, available on every page. It is not possible to predict when users will want to use it. It must be remembered, however, that a Search function is a supplement to a well-organised site structure and strong navigation.

    There are different types of searches: global, scoped and advanced. Global searches cover the entire site. A scoped search is limited to a sub-site. They can be problematic because users don't always understand the site structure and don't realise where they are. They may think they are searching the entire site instead of a limited area. If a scoped search is used, the area that is being searched should be explicitly stated at the top of every query and results page. A link to the global site search should be provided if no results found.

    Advanced searches need to be on a different page from the global search. These searches include Boolean searches and searching within parameters. Boolean searches should be avoided because most people cannot use them correctly. When presented with 'no hits', users tend to interpret this message as meaning there is no information available on the topic. It may be that they have not searched correctly, however.

    Navigational support is necessary once search results are given, to allow the user see clearly where the resulting pages of the search fit in the site and how to reach any related pages.

    Tables of Contents

    A Table of Contents for a web site operates the same way it does in print. It shows the structure of a site in an organised way, with an expandable, clickable list of categories and sub-sections. At least two levels of the hierarchy are shown. Tables of Contents support both random and linear access to information. They are a quick, accessible, familiar structure for most people and give users clear understanding of the site structure.

    Indexes

    Indexes are similar to Tables of Contents. They provide an A to Z list of the site content areas by topic. They have the advantage of being familiar to users but problems can arise with the terminology and categories that are used. Providing a thesaurus of terms can help overcome this limitation.

    Site Maps

    Site maps are predominantly graphical representations of a site's structure, however, the are text maps that display the structure in a tree diagram. They provide a metaphorical description of where the user is and where they want to go. Site maps are good for visually-oriented people and for international sites because they reduce the dependence on language. They are useful for conveying a high-level overview of the organisation of the site and allow users to leap to areas of the site. Site maps may be slow to download because they are graphics-based.

    Pull-down Menus

    Pull-down menus are hidden menus that can be clicked on. They are useful shortcuts but are often used as a dumping ground for long lists of items that have little connection between them. If the menu offers too many choices, the user may be overwhelmed, so care must be taken to ensure that the content is appropriate.

     

    Banner Ads

    Banner ads can be an effective marketing tool if they are properly used. Establish the purpose of the ad. Is it name branding, producing qualified leads, increasing awareness of a site or product? Who will be interested in the banner? Once these questions are answered, consider how the ad will be integrated into the site. Will it be at the top, bottom or somewhere else? Badly-placed ads can disrupt the navigation of a web page. It is important to point the banner to the relevant page. This is not necessarily the home page but may be a product page or form. The banner size is important. Wider banners are clicked more often than smaller ones. The common banner sizes are shown in the table below.

    Common Banner Sizes

    Size in pixels

    Banner Type

    468 x 60

    Full banner

    234 x 60

    Half banner

    392 x 72

    Full banner with vertical navigation

    120 x 125

    Vertical banner

    125 x 125

    Square button

    120 x 90

    Button #1

    120 x 60

    Button #2

    88 x 31

    Micro Button

    Source: IAB Standards and Practices Committee

     

    Effective banner design does not necessarily mean flashy graphics. Users respond better to bright colours such as blue, green and yellow, as well as to certain combinations like yellow on blue. To some extent, however, colour choice depends on the intended audience. Fonts should be simple, for example Futura, Swiss or Helvetica.

    According to ZD Net, animated ads have 15% more click-throughs than static ones. Animation makes banners more visible. Animation can increase the click-through rate but if it is too fast, bright or repetitive it will drive people from the page. Endless looping of an animation can cause eyestrain. As a result, people will leave. Sound should be used sparingly as most users find it disruptive. Pop-up ads interrupt users and irritate them.

    The faster an ad loads, the more likely it will be seen and read. People are not willing to wait more than 10 seconds for some kind of response from their actions so efforts should be made to minimise the size of banner ads to between 8 and 15K. GIF or JPEG files should be optimised to reduce their size. Animation increases size of the banner. Animated GIFs should be kept around 12K in size and should not loop more than three times. Creative looping allows time for other frames to load but can be annoying for users. Reducing the number of colours in ad will help to reduce its size.

    Design Guidelines

     

    imedia.ca integrated communication consulting for business
    home | services | about | team | our work | contact | variety blog | perception designers sourcebook
    © 1996-2010 imedia solutions inc. toronto, canada. all rights reserved. Privacy | Guarantee | Terms |