This is the second of six articles we plan to publish on how the visual design of forms should be influenced by the way humans see.
Each article in the series will look at one of the 6 Gestalt Laws of Perception that relate directly to forms. These 6 laws are:
- Characteristics (things that are an aspect of a single object)
- Relationships (things that are about how multiple objects relate)
The first article in the series also provides an introduction to visual perception and forms design.
Size is a cue for what is wanted
Size has a fairly simple impact on the user's experience when filling out a form: people interpret the size of a form widget as an indication of the amount of information required.
Have a text field with room for only 4 characters? Form-fillers will assume that the typical response is 4 characters long and are very unlikely to enter much more than this. Conversely, providing a text field long enough for a high school essay will lead form-fillers to believe they are meant to enter a considerable amount of information and thus shy away from providing just one or two words.
This influence of size was illustrated in a 2004 study by Philip Derham of Derham Marketing Research1. The study found that the amount of space available influenced the number of words people wrote or typed, regardless of whether the survey was paper-based or on the web.
Size has an assumed meaning
We should not be surprised that form-fillers use the size of a field to indicate how much information is needed. As Jarrett & Gaffney explain, a form is a
conversation between the user and an organisation, but this conversation takes place remotely, without … opportunities for clarification2. It therefore makes sense that people will take what they can from the way the form is designed, clutching for clues as to how it should be filled in.
If the form designer did it that way, there must be a reason.
Communicate what you want through size
As form designers, we can use this influence of size to our advantage. For example, if we want people to go into detail about something, we should provide plenty of space.
All too often, however, form designers are sending exactly the wrong ideas through size. In the example in Figure 1 below, there's a box for a gift card message with a tip at the bottom indicating the maximum number of characters allowed is 120.
Yet the space given is bigger than 120 characters are ever likely to need, given that the sentence you're reading now has 137 characters. Having such a large box — with the tip located below it and therefore probably beyond the user's line of sight — is likely to create a poor experience as the customer merrily types a long message, only to fail at validation.
Don't sacrifice communication for aesthetics
Another common trap with field size on forms is the temptation to make all fields the same length, so that the form “looks neat”, as in Figure 2.
Having just the one field size not only robs the form-filler of a valuable cue about what information is required, it also makes it harder form them to visually find and keep their place in the form.
So what about aesthetics? Well when was the last time you saw a form framed and decorating a loungeroom wall? Forms are there to be used, and simplifying that task must be our primary goal.
Having fields of representative length makes forms easier to fill out, plus the overall aesthetic is barely impacted by having fields of varying size. A clean, professional and friendly design can still be achieved, as the screenshot in Figure 3 shows.
2 Jarrett, C. & Gaffney, G. (2008) Forms that Work: Designing Web Forms for Usability. Morgan Kaufmann. ↩