Web Page Design Facts

Web Page Design Facts

by Dr. Bob Bailey

May, 2000

Introduction

What do we really know about designing high quality, professional screens, windows or web pages? What research-based facts are available? Good facts are painfully slow in coming.

A few years ago, Tom Tullis (The formatting of alphanumeric displays: a review and analysis, Tullis, T.S., Human Factors, 25(6), 657-682, 1983) showed that human performance can be substantially improved with better screen design. Since then, only a few others have tried to identify the factors that make the most difference in screen, window or page design. Even though we have many ‘guidelines,' few have been validated. Thus we have very few facts available as to ‘what works' and ‘what does not work.' Two recent studies attempted to shed some light on this area.

Web Page Design Facts 1: Good grouping and good alignment make a difference.

IAvraham Parush, Ronen Nadir, Avraham Shtub (1998) at the Tel Aviv University in Israel evaluated four factors to determine their impact on the design of dialog boxes in graphical user interfaces. They considered:

Alignment -- laying-out elements according to their alignment within and between groups. For example, dialog boxes with poor alignment of elements were considered to be more poorly designed.
Grouping -- providing reasonable groups and good titles for groups of elements. For example, dialog boxes with no group indicators were considered to be poorly designed.
Size -- having a variety of different sized elements. For example, dialog boxes containing different sizes of widgets were considered to be more poorly designed.
Local density -- having a variety of different sized elements within smaller areas of the entire window. For example, dialog boxes with much empty space (white space) were considered as being more poorly designed.

Each factor had a well-designed and poorly designed condition. A combination of either the well-designed or poorly designed conditions were shown on each screen. Seventy-five participants perform several tasks using the different screens.

They reported that good ‘grouping' and good ‘alignment' were related to having both shorter search times and higher preferences for screens. The ‘local density' and ‘size' variables had little or no effect. In addition, they found that user performance was worse when several guidelines were violated simultaneously. Also, the effects of poor design may be only temporary. The screens with the worst designs initially produced very long search times, but the search times shortened considerably as the subjects gained experience.

Web Page Design Facts 2: Pictures and words on buttons improve usability.

In a second study, Misha Vaughan (1998) at Indiana University attempted to determine:

if an interface uses pictures and words on buttons, is it more usable than an interface that uses only pictures,
if an interface uses familiar metaphors, will it be more usable than one that uses system metaphors,
if an interface uses the user's natural language, will it be more usable than an one that uses system language,
if an interface uses simple metaphors, is it more usable than one that uses complex metaphors, and
if an interface uses shorter names for tasks and functions, is it more usable than one that uses longer names.

Participants were 108 experienced computer users. The results indicated that only when an interface ‘used pictures and words on buttons' did the usability reliably improve.

References

Grose, E., Parush, A., Nadir, R. and Shtub, A., Evaluating the layout of graphical user interface screens: validation of a numerical computerized model, International Journal of Human-Computer Interaction, 10(4), 343-360 (1998).

Vaughan, M.W., Testing the boundaries of two user-centered design principles: metaphors and memory load, International Journal of Human-Computer Interaction, 10(3), 265-282 (1998).