By: Sandra Thwaites
Cognitive Systems Engineering
This is the second of three articles on usability. The current article reviews the usability exercise presented in Part 1 of this series from the September issue of FormsTalk. Part of this review will reiterate and elaborate on the importance of usability heuristics, or “rules of thumb,” as the guideposts of “good” design. The remainder of the article will touch upon some recent electronic forms revamping done in Norway on the ELMER project and in Australia with CentreLink. One key take-away point from this article is that design heuristics may be used to help structure and stimulate discussion among the various members of a (re)design team, regardless of the product being developed.
Exercise Review of GroceriesOnline.com
In Part 1, readers were invited to try to complete an informal usability test of an initial screen design for OnlineGroceries.com. That screen design is reproduced in Figure 1. With this screen, prospective users of the site were to be asked how they think they would go about purchasing three (3) items: bananas, bar-b-q tongs, and a large watermelon.
The reader was asked to play the role of usability tester. This required them to specify one or more usability goals for the site, develop and administer a test protocol to prospective users (subjects), record and analyze the data or Subject’s behaviour when trying to complete the buying tasks, and finally, at least two key recommendations were to be made in order to create a better design for the website.

Figure 1: Material for Usability testing (kindly provided by Lise Whitewolf and Hilary Little, User Interface Designers, CBSA, as part of a lunch-and-learn exercise Summer, 2009)
As far as site goals for GroceriesOnline.com, the following list contains some possible goals that might be of interest to the owner and other stakeholders.
-
(Potential) Customers should find the site visually appealing,
-
(Potential) Customers should rate the user experience of the site higher than the experience of shopping in a grocery store,
-
(Potential) Customers should be able to order 10 grocery items in three minutes or less, making no more than two errors from which they can quickly recover
-
(Potential) Customers must rate their nth time usage of the site as a 6 or 7 on a 7 point satisfaction scale which is as good as or better than the rating they gave after their first time usage. In other words, the site must be designed for the expert user given that one business goal is to have repeat customers.
Anyone who took the time to complete the exercise, with only themselves or with a sample of other individuals, should have noted many, many diverse and serious usability issues with the initial screen design. Those issues include:
-
How to see what one is currently putting in their cart versus what is already in their cart
-
A way to delete an item from the order
-
A way to save the order in case they want another exact one in the future
-
No apparent way to purchase multiples of an item (e.g. 1 banana versus 5 bananas)
-
Confusion over the information on the Details screen (e.g. number of bananas in a “bunch”); watermelon, oranges and bananas being on the Vegetables tab
-
Confusion regarding the categorization of items at GroceriesOnline.com as seen on the left and right tabs: why is there a tab for “Desserts” on both the left and right hand sides of the screen?
-
Difficulty or length of time to find items listed by adjectives (e.g., “seedless mini watermelon” versus “watermelon – seedless mini”)
-
What is the meaning of the link Save to my shopping list?
-
Is the ON SALE! link the same as the Specials link?
These are just some of the many critical and major problems with this first design of a website page for the GroceriesOnline.com. For those readers who took the time to test multiple “prospective” users, you should have noted a pattern or repetition in the types of errors after about the first four (4) Subjects.
Your redesign recommendations should have been based on your findings. While the author cannot predict all of your recommendations, some of your top recommendations might be:
-
Include actual pictures of the products in the design to facilitate locating items to purchase and to inform users as to the quality of product they can expect to receive.
-
Have people on the project team play the role of information architects to take another look at the categorization labels being used on the tabs.
-
List items by noun first (e.g., “watermelon – seedless mini” versus “seedless mini watermelon”).
-
Invite the owners to reconsider whether they want to sell more than groceries and/or change the name of the website to better reflect its offerings.
While common sense, your online experiences, grocery shopping in a store, and your expectations were probably used during this exercise, there is a more scientifically established way to complete a product review when there are insufficient resources to undertake a usability test. Specifically, use Jacob Nielsen’s (1994) 10 heuristics of good user interface design to review a product.
As mentioned, Neilsen’s heuristics can be used to subjectively but rigorously review an application when resources preclude the testing of Subjects. While a heuristic review is better than no review, it is rarely as good as an actual usability test wherein at least 5 to 7 Subjects are tested with a design. Simply put, no matter how skilled an individual reviewer is, he or she can rarely predict with 100% accuracy what different users will do when faced with a given design.
Nielsen calls the 10 items “"heuristics" because they are more in the nature of rules of thumb than specific usability guidelines.” In alphabetical order the heuristics are:
1. Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
2. Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
3. Error prevention
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
4. Flexibility and efficiency of use
Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
5. Help and documentation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.
6. Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
7. Match between system and the real world
The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
8. Recognition rather than recall
Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
9. User control and freedom
Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
10. Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
The skill of the interface designer is partly in coming up with designs that balance out these ten heuristics to create the most usable interface design. More often than not however, the final design solution will be biased towards one or more specific heuristics, possibly differing across application features. For example, the interface design for feature x might be weighted towards heuristics #1 and #9, while the interface for feature y might be weighted towards heuristics #2 and #7.
The author has recently and successfully used a mapping of tasks by the 10 heuristics for interface design. Table 1 presents an example of such a mapping, using hypothetical high level tasks. Early in the development process when only vague product requirements and high level tasks are known, this mapping can be done to serve as a:
-
high level roadmap for the interface design process, and
-
checklist" against which design options can be assessed.
10 HEURISTICS OF GOOD INTERFACE DESIGN

Table 1: Sample mapping of fictitious High Level tasks to the 10 Heuristics of Good Interface Design
Note: Black fill denotes the critical importance of that heuristic in the final design solution for the corresponding feature. Gray fill denotes importance.
Table1 is essentially showing where the risk is in failing to design usability into features that support the various high level tasks. While such a table is of great importance to the user interface designer and usability specialist, it can also benefit other players in a large project, such as the business team. The mapping, combined with a discussion of the value and risks of failing to consider usability, provide a good basis for discussion between the various groups involved in product development.
In the case of forms design, ELMER and Centrelink are two projects that have spawned guidelines and principles for forms development.
Guidelines & Principles for Forms Design: The ELMER & Centrelink Projects
The ELMER (Nygaard, 2009) and Centrelink (Barnett, 2009) projects are two examples of Governments spending significant resources to develop principles to significantly improve the usability of their internet forms.
ELMER (a Norwegian acronym for “easier and more efficient reporting”) is a set of principles and specifications for web forms now at Version 2. Like most Government agencies in the world, Norway was spending “huge amounts of money to explain questions on forms to users and to fix the mistakes they make” (Nygaard, 2009). Many varied professionals worked together to develop the ELMER guidelines, found at www.brreg.no/elmer/elmer2-english. These guidelines deal with layout specifications as well as the user interface. An example of the latter is, “The choices available for checkboxes, radio buttons and pull-down lists must use a wording that is meaningful for the user”. The application of the ELMER guidelines within Norwegian Government agencies has resulted in an impressive 90% of important business-related forms now being submitted through the web rather than their paper-based alternatives.
In 2006, the Australian Minister for Human Services, Joe Hockey, declared that something had to be done with forms, as their typical error rates of 80-100% were costing millions of dollars per year to correct (Barnett, 2009). Centrelink is an agency handling social security, veteran, and similar types of payments in Australia.
A set of principles for forms design were developed through the Centrelink project by relying on, in part, error analysis and usability research. Centrelink principles deal with proven design and language techniques. The use of usability testing was deemed most positive as it helped to provide objective data on the goodness of design options thus reducing the opinion fighting around changing someone else’s design.
Both Nygaard (2009) and Barnett (2009) suggest that principles or guidelines can provide a cohesive focus for all involved in the (re)design of forms. Similarly, usability heuristics help with discussion when the various stakeholders within a project are considering design options.
The final paper in this usability series will discuss some of the pitfalls of usability as well as some thoughts on where usability is heading.
REFERENCES
Barnett, Robert, “Redesigning Centrelink Forms; A Case Study of Government Forms”, User Experience, Vol. 8 (2), 2nd Quarter 2009, www.UsabilityProfessionals.org
Nygaard, Tor, “The ELMER Experience: A standard for Government Forms”, User Experience, Vol. 8 (2), 2nd Quarter 2009, www.UsabilityProfessionals.org
Neilsen, Jakob 10 Heuristics of Good User Interface Design, http://www.useit.com/papers/heuristic/heuristic_list.html, 1994
Recent Comments