skip to content

Perception and the design of forms – Part 2: Size

29 June 2010
Photo of a large goldfish in a small bowl facing a small goldfish in a large bowl.

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)
  • Figure/ground
  • Proximity
  • Similarity

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.

Part of online book purchasing form showing a large box for a gift card message.
Figure 1: This part of a form for ordering a book online gives the user a lot of space to write their gift message...but there's a limit of 120 characters.

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.

Part of online product registration form where all fields are the same length.
Figure 2: In this form, the fields have been made the same length, regardless of what amount of data they are actually likely to contain.

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.

Part of an online form with fields of varying length according to the data they are collecting.
Figure 3: The length of fields on this form is proportional to the typical entry that users will provide, yet it is still aesthetically pleasing.

References

1 Denham, P. (2004) “The impact of space and survey format on open ended responses”. Published in Australasian Journal of Market & Social Research. Volume 12, No. 2, November 2004. 

2 Jarrett, C. & Gaffney, G. (2008) Forms that Work: Designing Web Forms for Usability. Morgan Kaufmann.