Sunday, September 26, 2010

Designating Required vs. Optional Input Fields

This week's blog will be a little bit different from what I've done so far.  Instead of talking about the design of an item, I will be discussing an article from sigchii.org regarding input and output methods.  This particular article, entitled "Designating Required vs. Optional Input Fields," discusses ways to make it easy to differentiate between required input fields and optional input fields when filling out online forms.

Fig.1 -- Various methods for indicating required fields are shown above.
Methods include bold type, chevrons, checks, colored fields, separate
areas, and status bars.
Source: http://www.sigchi.org/chi97/proceedings/poster/tst1.htm

A study of 18 people was performed to determine the preferred method out of 6 (see Fig. 1).  Most methods did not show much difference in time to completion -- the two exceptions were None (no differentiation between required and optional fields) and Status Bar (a status bar at the bottom of the page showing if the highlighted field is required or optional).  Both methods would require you to select each field individually to determine whether or not it was required.

I expected the colored field to outperform the others.  This might be because the colored fields are much more visually appealing than the other options.  Apparently, however, visual appeal does not directly correlate to significantly higher performance.  Out of the four options that all did relatively well, the separate fields option had the fastest performance for filling out forms, most likely because it would be readily obvious which fields to fill out, and they would all be back-to-back.  Perhaps the best solution would be to combine visual appeal with pragmatism and have all required texts next to each other, in color.

No comments:

Post a Comment