2. Offer Informative Feedback

Create indicators on your Web pages that make the status of the Web site visible and that keep your customers informed about what is currently happening. For example, when customers are performing an e-commerce transaction, use a pattern that includes a progress bar to indicate the current state of the process. This type of element provides assurance to the customer that the Web site is functioning properly. The following figure provides an example:

Using a progress bar conveys process status to a user

Another important form of feedback is to let customers know when they are entering a secure area. You can do this by providing an action button that makes it clear that the Web site is using a secure connection, as in the following figure. This type of feedback lets your customers know that the information they are sending over the Internet is safe and secure.

Promoting secure transactions builds credibility with customers

3. Rely on Recognition over Recall

The key limitation in human cognition is short-term memory. Visual aids, such as the buttons and icons on a Web site, help to reduce the load on short-term memory by making it easier for customers to understand what they need to know to use the site. This explains why computers did not become the ubiquitous tools they are today until graphical user interfaces appeared on the scene. It is much more difficult for people to remember command line syntax for a character-based interface (such as DOS) than it is to recognize buttons or icons and associate them with their functions.

For example, there are currently two types of action buttons on the Web: graphical and HTML. The way in which you design the buttons for a site will affect the customer's ability to recognize their functions.

·          Graphical action buttons are made from images that you modify to look like three-dimensional buttons that the customer can press. You can make these buttons look three-dimensional by adding shadows or slight lighting touches around the border of the image, as in the example below. This technique gives the impression that the image is raised, which provides a visual clue to the customer that the button is clickable. Web users do not perceive a flat image as a clickable button, and might ignore it. You should provide textual labels with the graphical action button images to explain their purpose. In addition, don't make the buttons too small. At Naviscent, we recommend a minimum size of 20 x 20 pixels.

·          HTML action buttons are commonly rendered by browsers as rectangular gray buttons and are encoded directly in HTML. Because of their nature, you have less control over the layout and appearance of these buttons. HTML buttons that contain a large amount of text are visually unattractive due to their width. The best practice for HTML action buttons is to keep the text short, so that the button will be small enough for you to place it where you want it.

          Examples of graphical and HTML action buttons

When you provide visual aids like these in your site, you reduce the memory load and the frustration level that might otherwise cause your customers to leave tasks incomplete.

4. Help Customers Avoid and Recover from Errors

When customers experience errors while working with a Web site, due to their own fault or that of the site designers, the result is frustration, lack of trust in the Web site, and poor performance. Engineer your site to minimize the number of errors that can occur, and try to anticipate potential errors, so that you can provide meaningful help when errors do occur.

For example, errors commonly occur when customers fill out online forms for an e-commerce transaction, such as shipping and delivery forms. When input fields require a specific type of data structure (such as telephone number fields that require the area code to be in parentheses, followed by groups of three and four digits, separated by a hyphen), be sure to clarify the required format by demonstrating the data structure in some way. You can do this by adding a note next to the field, as in the first example below, or you can provide separate fields for the area code, exchange, and number, as in the second example.

 Formatting techniques to assist users and avoid frustration

No matter how error-proof you believe your Web site to be, customer input will cause errors occasionally. By anticipating user errors, you can provide help by presenting meaningful error messages that instruct the customer how to recover from the error. An incorrectly formatted phone number, for example, should generate an error message that specifically identifies the phone number field as the cause of the problem and reiterates the correct format. It would be better yet if you can design the site so that it automatically recovers from the error by reformatting the phone number, or offers to carry out the steps to help the customer recover from the error.

Reference: Van Duyne, , D.K, Landay, J.A, and Hong, J.I. (2003) The Design of Sites. Boston: Addison-Wesley.

The next blog entry will continue our discussion with the remaining principles.