CHI 97 Electronic Publications: Late-Breaking/Interactive Posters
Designating Required vs. Optional Input Fields
Thomas S. Tullis and Ana Pons
Human Interface Design
Fidelity Investments
82 Devonshire St., V9C
Boston, MA 02109 USA
+1 617-563-8795
TomTullis@aol.com
ABSTRACT
This paper describes a study comparing different techniques for visually distinguishing required from
optional input fields in a form-filling application. Seven techniques were studied: no indication, bold
field labels, chevrons in front of the labels, check marks to the right of the input fields, a different
background color, grouping them separately, and a status bar indication. Performance and preference
data were collected. In general, we found that the two worst methods were no indication and the status
bar. The best method was separate groups.
Keywords
Required fields, optional fields, visual design, data input.
© 1997 Copyright on this material is held by the authors.
INTRODUCTION
Many forms-based applications include the concept of input fields where the user is required to make an
entry vs. fields that are optional. Traditionally, in mainframe applications, these two types of fields have
been visually distinguished from each other. On the other hand, that tradition has not universally carried
over to GUI applications. For example, The Windows Interface Guidelines for Software Design, by
Microsoft (1995), do not address this issue. Consequently, a wide variety of techniques have arisen in
GUI applications for making this visual distinction (including not making a distinction).
The purpose of this study was to evaluate a variety of techniques for visually distinguishing between
required and optional input fields. We wanted to determine if there were differences in user
performance and preference for the various techniques. We studied the following techniques, as
illustrated in Figure 1:
-
None: No visual distinction between required and optional fields.
-
Bold: Labels for required fields were bold while optional fields were non-bold.
Chevrons: Required fields had chevrons (>>>) in front of the label for the field.
-
Check: Required fields had an iconic check-mark just to the right of the field.
-
Color: Required fields had a yellow background while optional fields had a white background.
-
Separated: Required and optional fields were arranged in two separate group boxes labeled
Required and Optional.
-
Status Bar: When the user tabbed to a field, a status bar at the bottom of the window indicated
Required or Optional.
All of these are techniques that we have seen used in various Windows applications.
Figure 1. Examples of the techniques for indicating required fields.
METHOD
Eighteen employees of Fidelity Investments participated in the study. All were experienced Windows
users. Each user was asked to fill out a hypothetical computer-based survey containing a total of 40
questions. All questions were designed to be ones that anyone could answer (e.g., "How many VCRs do
you own?"). The questions were evenly split across four windows. After answering the questions on
one window, the user clicked on a "Continue" button to go on to the next window. In all conditions, the
"Continue" button was not enabled until the user had made an entry in all required fields.
The first time the user filled out the survey was basically a practice round. In this round, all fields were
required. This forced the user to decide on answers for all the questions. The user then filled out the
same survey seven more times--once using each of the seven designation methods. On each window,
half of the fields were randomly selected to be required. The seven methods were presented in a random
order to each user.
Time to complete the survey was automatically recorded for each method. At the end of the session, the
user was asked to rate each of the methods on scales of "visual appearance" and "overall effectiveness".
RESULTS
Time Data
Analysis of the survey completion times, as shown in Figure 2, revealed a significant main effect of
designation method, F(6,102) = 11.13, p < .01. As one might expect, "None" was among the worst
methods. But surprisingly, the "Status Bar" method was just as bad. Both were significantly worse than
all the other methods. On the other hand, "Separated" was significantly better than all of the others,
except "Bold" and "Check".
Figure 2. Average completion times by technique.
Preference Data
The ratings of "Visual Appearance" and "Overall Effectiveness" were combined into one measure of
overall preference. Analysis of these combined ratings, as shown in Figure 3, revealed a significant
main effect of designation method, F(5,85) = 4.74, p < .01. Note that the "None" case was not included
in the subjective ratings. The "Status Bar" method was significantly worse than all of the others except
the "Chevrons" method. "Bold" and "Separated" were significantly better than "Chevrons".
Figure 3. Overall preference ratings (Higher = Better).
CONCLUSIONS
The most obvious conclusions from this study are as follows:
-
At least for the task we presented to the users, it was beneficial to have some type of visual
indication of required vs. optional fields.
-
The "Status Bar" technique is clearly a bad technique. The obvious problems with it are that the user
does not get the indication until the specific field has focus, and that the visual indication is
potentially very far removed (at the bottom of the window) from the field involved.
-
There are some indications that the best method of designating required vs. optional fields may be to
visually separate them into two separate groups. However, we also recognize that this is not always
practical, because of logical groupings of input fields.
-
For the most part, there do not appear to be significant differences between the other techniques,
except that the "Chevrons" technique may be slightly less preferred.
REFERENCES
-
Microsoft (1995). The Windows Interface Guidelines for Software Design. Redmond, WA: Microsoft
Press.
CHI 97 Electronic Publications: Late-Breaking/Interactive Posters
