Check List

Usability Checklist

Web Site Review ChecklistAspects to Check:Page Layout, Utilisation of Space, Scrolling, Visual Separation of functionally distinct portions, Appropriate emphasis on key elements, Affordance of interactive elements, Mapping of interactive elements

Text Readability : How to make letters easy to rea
Comprehensibility : How to make text understandable
Visibility : How to make information easy to see
Visualization : How to make graphics more usable
Forms & Commands : How to make interaction easier
Animation : How to make animtion more usable
Navigability : How to make it easy to move through a site
Internet Issues : How to design for the Internet
Scanability : How to Write for the Internet
Locatability : How to make the site easy to reach.
InteroperabilityText Readability

Is the correct font size used?

The correct font size depends on the screen resolution that is being used. The selected font used to present text paragraphs should have the following properties:
The following pairs should be easily distinguishable

X and K
l and L
O and Q
u and v
t and y
S and 5
l and 1

Are fonts other than Times Roman, Century Series, New Gothic or Helvetica used?

The selected font used to present text paragraphs should have the following properties:

The following pairs should be easily distinguishable

X and K
l and L
O and Q
u and v
t and y
S and 5
l and 1


The selected font should have the following properties:

- relatively large height

- moderately expanded (Sample Fonts to avoid – Impact, fonts from the narrow families)

- solid rather than expanded (Sample Fonts to avoid: Script)

- fairly uniform type color (Sample Font forms to avoid: shadowed or embossed)

Is the Font Type Set used consistently? Fonts must be used consistently. For example, a font that is used in one place in the document to differentiate a heading from the text, should not be used in the body text at another point in the document.Inconsistent use of fonts lead to a cluttered look and to confusion about the inherent sturucture and organization of the document.
Are less than four fonts used in the text? Using more than four fonts in a text document can make the document look very cluttered. If more than four fonts are being used to distinguish or emphasize certain parts of the text, other methods or emphasis like boldface, italics, font size, font color etc. may be used in combination with the font type.
Is the text Left Justified? Text that is not Left Justified reduces reading speed. Centered, Right Jusified and Double Justified text takes longer to read than Left Justified text does.
Is the spacing between the lines 1 to 1.5 times that of the font size? The recommended line spacing for text is 1 to 1.5 times the font size. Line spacing between 4 to 6 mm or between 12 – 18 point size (Times Roman) should be used.
Is the text in regular Upper and Lower case? Text that is more than a few words long must not be displayed using all upper case or all lower case letters. Lower case letters have characteristic shapes that can be easily identified. This increases reading speed. Detailed or long (more than two lines) text should always be presented in the standard mixed case format. This paragraph is an example of mixed case format.
Are Labels and Warnings in UPPER CASE? The use of all capitals is recommended for CAUTIONS and WARNINGS, because they are easily visible and are highly salient (eye-catching)
Are Arabic Numerals used? The use of Arabic numerals (1, 2, 3…) is recommended. Roman Numerals are usualy found to decrease reading speed. Some users may not be familiar with the usage of numerals other than Arabic numerals.
Is the use of emphasis consistent within a text? Lack of consistency can lead to clutter and confusion.
For emphasizing a single word, is boldface or italics used? To empahsise a word the use of boldface or italics. Undeline is not recommended as it can be confused with a link.
For emphasizing a paragraph, are CAPITALS or italics used? To emphasize a paragraph the use of CAPITALS or ITALICS is recommended.
Is emphasis over used? The over use of emphasis causes the document to look cluttered. Try to design the document with minimum use of emphasis. If the need for emhasising various parts still remains, try to reorganize the material. Look up the section on document scannability.

Comprehensibility

Are small words used? Small words make it easy to read and understand the document. If it is necessary to include technical terms in the document, it may be useful to specify the type of reader the document designer had in mind.
Are the sentences short? Short sentences are easy to read and understand. Reword long sentences and split them into two or more parts.
Is the writing concise? Documents on the web must be very conscise. Unnecessary words can cause the users to loose interest in the site or page and move to other links. A well written document is the best defense against the museum effect
Are ideas expressed in positive terms? Ideas expressed in positive terms are easier to understand. For example it is better to say “Use small words” rather than saying “Do not use long words”
Is the third person used for directions? Directions are better understood when they are conveyed using the third person. It is better to say “The user must then press the enter key” rather than saying “You must then press the enter key”
Are lists presented as vertical coloumns? Lists should be presented as vertical coloumns. It is better to present a list of more than three items vertical list –

apple
grapes
mango
banana
peach
strawberry
blueberry

This is better than presenting the information as a horizontal list
apple, grapes, mango, banana, peach, strawberry, blueberry

If two dimensional comparisons are required, is data presented in tables?

If numbers have to be comapred it is better to use a table format. The reader is required to comapre the rainfall (in cm) for the months from Jan. to July in two cities. It is better to present this data in a tabular format as follows:

Example Table

JAN

2

3

FEB

4

3

MAR

5

2

APR

2

1

MAY

3

3

JUN

2

7


A two list presentation shown below is not as effective:
The rainfall (in cm) for Jan. to Jun. was 2,4,5,2,3,2, while the rainfall for town B was 3,3,2,1,3,7. Except the months of Jan. and Jun. the rainfall at twon B was more than that at town A…….etc.

Are the groups in a table or list separated visually?

If there are natural groupings in the data presented in a list or a table, these must be made obvious by the effective use of visual seperation (e.g. blank lines )

Is the heading of the table distinguished by color or shading? The heading of the table should be easily distinguishable from the remainder of the table.
Is color or shading used only when it is required and when it serves a functional purpose like seperating two groups in the table? Do not use shading and other methods of emphasis if they are not needed. If alternate lines of a table are shaded in different patterns, it causes the document to look cluttered, and could cause the user to look for non-existent groupings in the tabular data.
Are vertical lines used to seperate table coloumns?

In general, it is better to present tables without vertical lines, as vertical lines are known to distract the eye from the normal horizontal flow of reading.

Example

MON

A

B

JAN 2 3
FEB 4 3
MAR 5 2
APR 2 1
MAY 3 3
JUN 2 7


Visibility

If colors are used to code information or if not standard link colors are used – is a legend provided? When colors are used to code information, a legend describing the code should be provided. In internet sites, the default coding for links is visited links are less saturated blues and links that have not been visited are brighter blues. If any other color coding scheme is choosen a small legend should be made visible to the users of the site. The legend should describe the coding scheme used. If color is used to code any other information, a legend should be made available. The legend should be easily accessible and visible.
Are several highly saturated colors, opposing colors (like yellow and blue or red and green, or spectral extreme colors (yellow and purple) displayed simultaneously The presence of highly saturated opposing colors like
blue and yellow or
red and green
spectral extreme colors like
yellow and purple
is undesirable. Such combinations cause eye fatigue. Little amounts of these colors on the sames screens, perhaps as a part of an icon, is acceptable. However combining such colors in large amounts could lead to fatigue and is not visually appealing. While selecting colors for presenting long text the following guidelines should be kept in mind:

Choosing white or black as one color in the background, foreground pair is desirable.
Black and cyan are good choices for background colors where a lot of multi colored text is likely to be presented.
Brown and Green are not good choices for background colors where a lot of multi colored text is likely to be presented.
Foreground colors should contrast in both hue and brightness with background colors. Hue is related to the wavelength light corresponding to a color, and is very similar to the conventional or intutive understanding of the word color. Brightness is related to the amount of light illuminating the object.
Bright forgroung colors are desirable

Several studies have been conducted to determine the relationship between the visibility of symbols and the background and foreground color combinations used. The recommended foreground and background combinations for presenting symbols include:

ISO 1988: Recommendations for color combinations for high contrast

SYMBOL BACKGROUND

white black
green
black
cyan
black
yellow
black
blue
black
black
white
yellow
blue
red
cyan
magenta
green


To present text the following combinations of colors can be used

ISO 1988: Recommendations for color combinations for high contrast

TEXT BACKGROUND

black cyan
black
magenta
black
white
blue
cyan
blue
white
green
black
green
blue
green
cyan
cyan
black
white
black
yellow
black
yellow
blue
yellow
cyan
white
cyan
white
black
white
green

Are more than four colors used? If there are more than four salient colors present the document could look cluttered. If the extra colors are parts of an image or an icon, they can be used with very little detrimental effect. However if the four colors are prominently visible throughout the page, the effect could be asthetically unappealing and lead to fatigue.
Are users required to discriminate between colors in a small area Users should not be asked to discriminate between colors or shades of colors in a small area. Other forms of coding should be used. If color coding must be used, the designer may consider separating the objects using white space.
Is saturated blue used for text and other thin line segments This conforms to the prescribed norms
Are adjacent colors differenced in the amount of blue used? The human eye is not well adapted to seeing small blue objects. Conventionally, visited and unvisited links are coded using differences in the amount of blue. The website designer has to decide if the convention will be upheld at the cost of this principle or if a new visited or non visited link color will be used. If a new visited or non visited link color is used the site should have a color legend and the color coding of the links should be consistent for the entire site. The designer can also choose to place the separate the links using white space, so that discriminations in the amount of blue in a very small area are not called for.
Is the contrast between the background and foreground color high If the contrast between the foreground and background colors is not high reading information will be very difficult.
Example of low contrast selection

Textured backgrounds can also result in lowering the contrast between the foreground and background
Example of bad texture selection

Is a monochromatic background used to display a color image If a textured background is used to display am image, the page can look clutted and the visibility of the image can be impaired.
Are light, bright and saturated colors used to emphasise data and darker, duller and desturated colors used to de emphasize data The human eye is not well adapted to seeing small blue objects. Conventionally, visited and unvisited links are coded using differnces in the amount of blue. The website designer has to decide if the convention will be upheld at the cost of this principle or if a new visited or non visited link color will be used. If a new visited or non visited link color is used the site should have a color legens and the color coding of the links should be consistent for the entire site. The designer can also choose to place the seperate the links using white space, so that discriminations in the amount of blue in a very small area are not called for.
Are any common cultural color associations violated, or implicitly assumed

Visualization

Are graphics used to represent quantitaive trends, overall patterns and shapes? Graphs and Charts should be used to convey quantitative patterns, shapes and trends. Using words to convey such information will be ineffecient or ineffective.
Are graphics used to represent spatial relationships? Graphics should be used to represent spatial information. For instance, instead of describing an office layout, it should be presented as a picture or a diagram. This will facilitate the transfer of information.
Are Graphics used to attract attention to target areas? Graphics can be used to highlight certain areas of a document. For instance, a “new” icon can be used to indicate that some information has been placed online recently. This will help attract the attention of routine visitors to new material. It is possible to guide the attention of “site-scanners” though a skillful combination of graphics type and placement.

After a peliminary design of the web-site, ask a few users to browse through it and ask them a few questions that cover the material that the web site seeks to convey. The responses to this quiz will provide guidelines for reorganization of the material and highlighting some material by using graphics.

Is text used to convey precise information or data? Precise information should be stated clearly in words.
Is text used to convey abstract notions? Abstract Notions are best conveyed using words.
Are photographs used when everything in the image is relevant? When every aspect of an image is relevant, pictures should be used. For instance, when trying to communicate the appearance of objects, photographic images should be used.
Are drawings used when selective parts need to be emphasized or represented? If only certain parts of an image are of relevance, drawings should be used. For instance, if the the working of a certain widget is to be described, a diagramatic representaion of the relevant parts should be useg. A complete photographic image is likely to be less effective as it contains information that is not pertinant, and lacks clarity.
Are diagrams used when structural relationships need to be described? When structural relationships need to be explained, diagrams should be used. For instance, when trying to convey the structure of an organization, an organizational chart should be used.
Are charts used to represent trends? Bar graphs and Line graphs are good ways of representing trend data.
Are pie charts used to represent proportions? Pie charts should be used to represent proportions.
Are there clear and well labeled legends for each bar, axis, line or sector? Each bar or axis should have a legend of its own.
Are the legends short, unambiguous and distinguishable from other text? Legends should be simple and clear. They should be placed so that it is easy to seperate them from other text. They should be clearly worded and should leave little room for mis-interpretation. After drafting a perliminary version, it is advisable to find a user from the target user population, and have them read it, to ensure that the legends are comprehensible.
Do the labels clearly indicate the status and are they close to the relevant text or diagram? Labels should be simple and clear. They should be placed so that it is easy to link them to the part they describe. They should be clearly worded and should leave little room for mis-interpretation. After drafting a perliminary version, it is advisable to find a user from the target user population, and have them read it, to ensure that the legends are comprehensible.
Do the X-axis values increase from left to right? Do the Y-axis values increase from bottom to top? The increase and decreas of values should not be counter to users expectations.
Does the grouping of the graphs reflect the inherent grouping of data? If multiple graphs are being presented, they should be grouped in a meaningful way. If some information is to be extracted by considering a subgroup of the graphs, they should be positioned in a manner that facilitates this.
Do the icons have explanatory text labels? Icons must have explanatory text labels. This makes it easier for users to understand the function for which the icon stands.

Forms and Commands

Are command buttons visible when needed? Command Buttons should be visible when the user is likely to need them. A portion of the screen should be set apart for displaying commond buttons. This principle is somewhat difficult to adhere to, especially in the presence of variable text lenghts. But there are design techniques like frames that can be used to place command buttons in a zone that is always visible.
Is it easy to select commands or hyperlinks? If the command buttons are placed too close to each other, or are too small in size, they may be difficult to access, without accidentally clicking on something else. Therefore command buttons and hyperlinks should not be too small and must not be placed too close together.
Can users change information they have entered in a form, before they have submitted it? After the user has entered data in the form, he or she should be able to make changes to the information before submitting it.
If delimeters are used to separate different fields, is the a standard delimiter selected and used? If delimiters are used to seperate data items, standard delimiters like (semicolons or commas or slashes) should be used. Non standard delimiters like “)” or “^” could lead to more confusion and difficulty in data entry.
Do field labels indicate what data should be entered? If data is to be entered into fields, the field labels must make it clear what data items must be entered into the field.
Does the field label look different from the data field? Field labels should look different from the fields into which the user has to type in data.
Does the ordering of data entries follow the logical sequence in which the user is expected to think of them. The data entry form must use the expected pattern of ordering.
Are familiar units used? If quantitaive data is to be provided by the user, they should be able to enter the information in a system of units that is logical and that they are used to.
Are helpful default values provided? When possible, data entry fields should contain meaningful defaults.

Animation

Is Animation used only when necessary? Animations consume resources and are distracting. Therefore they must be used only when there is a considerable need to use them.
Does the speed of an animated line graph fall within the range 7.28 mm/sec and 295 mm/s (0.29 in/s and 11.8 in. / s) It is easier for people to perceive information that is presented within these parameters.
Is the rate of motion below 60 degrees/sec of visual angle? It is easier for people to perceive information that is presented within these parameters.
Are the graphics that will be used to identify the rate of change or to read off values, updates faster than 2 seconds or slower than 5 secs. ? It is easier for people to perceive information that is presented within these parameters.
When the user is expected to use the site to read numerals consecutively (say a ticker tape), is the speed of the display below 2 (numbers) per second? It is easier for people to perceive information that is presented within these parameters.
Is a freeze frame mode provided where the user will be able to select a frame and freeze it, in order to study it in greater detail? For certain tasks like scientific data visualization freeze frames canbe very useful. The animation is frozen at a point and studied in greater detail.


Navigability

Are there several embedded links? The presence of too many hyper-links can make a document difficult to read. In case many relevant hyperlinks have to be presented in a page, it may be better to seperate the text and the list of hyperlinks.
Do the links have unique names? The links must have unique names. Using same or similar names could cause confusion.
Do the links have an obvious ordering scheme? The links should be ordered using some familiar or meaningful ordering scheme.
If the breadth of a site is larger than the depth, are the links listed as opposed to being embedded? If the site is designed so that a single page contains many links, the links should be presented as a list rather than as a links embedded in text.
Is a one or three column listing used as opposed to a two column format? Some studies have found that a one or three coloumn format is preferrable to a two coloumn format when preseting a list of links.
Do the labels clearly indicate the nature and purpose of the linked document? The link names or lables should clearly indicate what a link leads to.
Is the material organized in meaningful sections? The material must be organized in a meaning full format and skillfully dived into different pages, sections and subsections. Users are likely to loose patience if the material is presented as text that requires excessive reading, they also likely to get bored if the information they want is burried within many layers and they have to hop through many pages to reach it.
Is the material organized in a manner that prevents the “museum effect”? It is important to contain the interest of the user within the site, till the relevent information is communicated to them . Users are likely to follow interesting sounding links out of a site. External links should, therefore be used judiciously and placed carefully.
Are there warnings about the linked file size? Where applicable, there should be an indicator warning that the file that a link connects to is large and is likely to take long to load.
Are there warnings that tell the user that following a link will take them outside the current site? Where applicable, there should be warnings that tell a user that following a link is likely to take a user outside the present site.
Do larger site have local search facilities? Large sites with more than a hundred pages, should have a local search facility.
Do larger sites have well designed site maps? Large site should provide site maps with indications of where the user is currently positioned in that map.
Does every page have identification information? Every page should have information about the site it belongs to.
Are navigation icons always available? Navigational icons or command buttons that allow the user to navigate up and down a menu structure should always be available.


Internet Issues

Is the information on the pages updated regularly? The information on the pages of the site should be updated regularly. The frequency of the update depends of the contents of the site. The site manager must discuss the update rate with other relevant people and decide on a meaningful update schedule.
Is the use of frames likely to be confusing? This conforms to the prescribed norms.
Are multimedia, animation and graphics used only when necessary? Multimedia, graphics and animation should be used only when necessary.
Are alternate sites with fewer graphics and animations made available? Non – graphics sites should be offered as an option for users who want to load the site quickly.
Can a usable form of the site be accessed by all the browseres that the intended users are likey to use? The site must be accessable to all the possible browsers that the users of a site might use.

Scalability

Is the text conscise, with about half the number of words that would be used for conventional text? Recent studies have shown that the text on the web should have about half the number of words that would be used in conventional text. Readers on the web tend to scan the page for information and conscise presentations are more likely to sustain interest and put across all the point of interest.
Is the text written “objectively”? A recent study has shown that material that is presented objectively is found more “readable”. This could be because text that has some spin or “marketese” places a higher cognitive load on the reader who now has to assess the text and separate the information from the marketese. It is better to write clearly and objectively, and simply state the facts.
Does each paragraph contain only one idea? If a paragraph contains more than one idea, users are likely to miss them. Only one idea should be presented in one paragraph.
Does the write up start with an overview and then present more information? The writeup should present the readers with an overview of what is to come. Details should be presented later.
Do the paragraphs have meaningful headings or subheadings?
Is the information presented as bullet-ed lists whenever possible? Whenever possible infomration should be presented as bulleted lists. This makes it easier for the user to scan the site and easily extract information.
Are important concepts and key words highlighted because they are presented at hyperlinks or by using type face or color variations?


Locatability

Was the site submitted to various search engines? Although some search engines send out “softbots” to collect information on new sites, many of them rely on submissions.
Does the site title have all the meaningful keywords that apply to the site?
Does the text in the beginning of the site contain all the keywords relevant to the site?
Are all the keywords repeated frequently throughout the text?
Are meta tags used to describe the site to a search engine?
Are meta tags used to present relevant keywords to search engines?
Have efforts been made to link the site to other related sites?
Have non-web promotional methods like advertisements in other media and postings to news groups and moderated listserves been considered?


  • Share/Bookmark
blog comments powered by Disqus