Criteria for optimal web design (designing for usability)

By Michael L Bernard

Much has been said about the design process of websites, such as establishing the proper mood or "feel" to create user interest or even excitement with the site. This is a very important concern, but ultimately users tend to be far more satisfied and stay with websites that are designed for their use in mind (see Tedeschi, 1999). Considering this, three core principles concerning interface design are presented:

1) Keep the interface simple - To quote Mies van der Rohe, "less is more." Organize the interface by reducing un-needed visual elements as much as possible. That is, remove all unnecessary visual "noise." This will make the important objects that are there stand out even more. Moreover, as Edward Tufte stated, "it is not how much space there is, but rather how it is used. It is not how much information there is, but rather how effectively it is organized" (Tufte, 1990, p. 50). The use of open space is generally more effective in organizing and grouping information than using imposed, artificial structures such as visually nested frames or bars. It is also more aesthetically pleasing. In fact, we found empirical support for the notion that the proper use of open space can increase satisfaction with a website (Bernard, Chaparro, & Thomasson, 2000).

2) Make action-objects visible - According to Donald Norman, a design should a) make it easy to determine what actions are possible at any moment, b) make things visible, including the conceptual model of the system, the alternative actions, and the results of actions, and c) make it easy to evaluate the current state of the system. On a web interface, one of the chief mechanisms to do this is the proper use of perceived affordances (Norman, 1988). 

An affordance refers to the "properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used" (p. 9). Affordance provides us with clues as to the operations of things. More importantly for interfaces, however, are the perceived affordances which provide visual feedback that advertise affordances. For example, a link button may be perceived to afford clicking because of its '3-D' or 'raised' appearance. Consequently, it is often helpful to give link buttons the physical appearance of a button, or any object that affords clicking, in order for them to be seen as a button to be clicked (Norman, 1988). Thus, it is  important to make navigation buttons look like they should be clicked as well as follow the convention of underlining links when they are text-based links. Conversely, non-navigation objects should not look like they could be clicked in order not to 'trick' the user into thinking they are links.

Generally, buttons serve as primary object for initiating actions, such as submitting or confirming information. Buttons also can act as the primary link for movement to other web pages, usually within the same website. When this occurs, text-based links often serve as a less important, secondary or supplemental link for the buttons. Normally, however, text-based links are the primary link to other internal web pages.

Moreover, physical appearance of objects such as icons can significantly affect navigational performance. For example, Rogers (1987) found that icons with abstract but simple symbols that represented concrete objects resulted in the fewest number of errors and requests for help. In addition, Byrne (1993) found that large and simple icons outperformed complex ones by a significant margin. Byrne suggests that icons need to be simple, large, and easy to discriminate in order to be effective. Complex icons tend to clutter the screen with unnecessary information. Moreover, Norman (1985) suggests that icons are best used to represent graphic tools and objects. Verbal labels, such as "to save" are best for formal commands (for a checklist on designing effective icons, see Horton, 1997).

3)  Balance and unify the interface - Balance and unity has always been a key component in good design. Humans on a preconscious level seek structure in the things they see. If there is no intentional structure, we will impose our own. Seeking the appropriate balance among things, as well as unifying those things that are related will generate structures that are not only pleasing to the eye, but will make the interface more understandable (see Mullet & Sano, 1995, for an excellent discussion on design and visual interfaces). Empirical studies have supported this claim by finding that the position within a plane (as well as size and contrast) to be one of the most perceptually important variables in visual search tasks (Cleveland, 1985).

One of the fundamental concepts of balance is the notion of the Golden Section. The Golden Section is a ratio of a rectangle in which the smaller side to the larger is the same as that of the larger to the sum of both -which is a ratio of approximately 0.618 to 1.000 or a standard 8.5 x 11 page. Examples of the Golden Section are almost ubiquitous in art as well as in nature (from the Parthenon to a nautilus shell). A web page that structures its graphical layout according to this ratio will look more appealing and will have a greater impact than other ratios, such as a ratio of 1 to 1.

Also, when placing several objects on a web page, one should take into account the "visual mass" of these objects (its size and presence). For example, ideally the placement of objects should be positioned in the same way as you would balance solid objects on a fulcrum. That is, a larger object should be placed closer to the center of the screen to offset the smaller object(s). This will create an equilibrium between the objects, and will be more appealing (see Tufte, 1990).

The unity of the interface is important because it has the potential to link concepts and objects together that belong together. For example, Wickens' (1986) compatibility of proximity principle states that tasks that necessitate mental integration of information should be in close proximity. However, tasks that require focused attention on specific variables will be harmed by this close proximity. This can be applied to things such as the organization of links. For instance, care should be made to group links that belong together, as well as separate those that do not belong.

Ngo and Byrne (2001) have taken this notion several steps further by identifying characteristics that define an aesthetically appealing interface. Of the 14 characteristics identified, balance, equilibrium stability, and sequence (shown in Figures 1 - 3) scored high in aesthetic correspondence.

Figure 1a.	Figure 1b.
Figure 1 is an example of a well balanced (a) and poorly balanced (b) interface.
Figure 2a.	Figure 2b.
Figure 2 is an example of a interface with stable (a) and unstable (b) screen. Equilibrium consists of the general centering of the interface itself to make it a stable arrangement.
Figure 3a.	Figure 3b.
Figure 3 is an example of a interface with a sequential (a) and non-sequential (b) screen.

 
Measuring subjective differences between well and poorly balanced interfaces, Brady and Phillips (2002) found no statistical differences in user satisfaction, suggesting that user satisfaction is related more to successful navigation than aesthetic appearance. However, both Brady and Phillips, and Tractinsky (1997) indicated that participants did perceived aesthetically pleasing sites as having a higher degree of usability.

4)  Be aware of Fitt's Law - Formally, it states that pointing time is a function of the distance and the width of a target (Fitts, 1954). Generally speaking, it states that the smaller and farther away an object is, the longer it will take to reach that object. Several researchers have argued that important buttons should be placed on the right side of the screen because the mouse arrow pointer is usually resting next to the scroll box, and thus it would take less time to click the object. However, what is important here is that knowledge that if there are several different buttons that need to be clicked in succession, the smaller and the farther apart they are, the longer it will take to click them. (For more information related to this topic see, Plamondon & Alimi, 1996).

References

Optimal web Home |Usability News | WSU HCI Lab | WSU Human Factors | WSU Psychology