The A to Z of UX - F is for Forms: 16 tips for how to design a great form

Updated: Dec 16, 2019

Darren Wilson

Forms are a core part of our digital life. Whether it’s registering for an account, buying a present or making an appointment, we will need to fill a form to do so.

It’s very easy to annoy the user with requests for unnecessary information, difficult questions [1], a convoluted workflow or unintuitive ways to provide their data.

They can have very serious consequences when done poorly. A study found that of people completing a ‘living wills’ form to indicate what to do if they were left in a persistent vegetative state, 41% gave contradictory instructions. A similar number said their response did not correlate with what they intended [2].

Here are some tips to make sure you avoid those mistakes, to present a seamless experience for your users and prevent them from abandoning part way through.

1. Understand your users

Think about who is going to be responding to the form and what they are trying to achieve by doing so.

If there is a reward or positive experience in completing the task, users are much more likely to do so.

Take into account any physical abilities and differences that users may experience: [2]

  • Vision problems affecting readability

  • Motor control limitations affecting ability to use a mouse, keyboard and/or touchscreen device

  • Cognitive issues affecting a person's capacity to understand the form

2. Refine your layout

Forms should be simple. Use clear headings to provide direction of what is required of the user.

Use of white space reinforces the sense of simplicity.

Using one column of content is preferable. Having more increases the risk of interrupting the users workflow.

Amazon account sign-up with fields displayed in a single column
Figure 2: Amazon Account sign-up single column

IF using more than one column, then the content MUST be strongly related information.

Facebook applying multiple fields, but in the same column
Figure 3: Facebook Account sign-up page with a multiple columns for strongly associated information i.e. First name and surname

Demonstrate progress throughout a long task to equip the user with information to evaluate how much time and effort is required to complete the task.

This can be represented by showing each stage, or a percentage completion rate. Either will help reduce abandonment.

Amazon checkout process illustrating each stage and which is active
Figure 4: Amazon checkout - process stages

Organise radio buttons and checkboxes vertically and not horizontally, or in grid format. It is easier for the user to browse them in this structure and make decisions faster [3].

Amazon delivery options - Radio buttons listed vertically to ease readability and decision making
Figure 5: Amazon delivery options - Radio buttons

Provide the user with affordances for how much information is required. For example adjust the size of the field to indicate the number of number of characters.

John Lewis checkout using varying field length to indicate number of characters required
Figure 6: John Lewis checkout - Varying field length

3. Apply auto-focus

Using auto focus on to the first item allows the user can get on with completing the form almost immediately.

As well as saving time and reducing steps, it relaxes the user and encourages them to continue.

Place extra visual emphasis on the active field. Using stronger colours and increasing border line weight are common strategies. Use the same technique to be consistent throughout the rest of the form.

Google account creation, with focus on the first field to be completed
Figure 7: Google account creation - auto focus

4. Create logical grouping

Users can be overwhelmed at the sight of a long form, requiring lots of detailed information.

Define logical groups of fields and create shorter sections or subsections. This simplifies a perceivable large task into a manageable exercise for the user.

Use logical groups to enable the user to discern what is required and support faster completion.

Aim to have sections that have no more than 6 separate items, making each section clearly identifiable with headings and space.

Consider how you order content also. It should flow seamlessly, almost like a conversation. Think about:

  • As users think

  • Most important first

  • Easiest first to make users feel comfortable

5. Position labels correctly using concise copy

A label informs the user what the field relates to. Position them outside a field, ideally top aligned or floating. Users are more able to quickly finish forms when compared to left aligned labelling.

Top aligned labelling also maps well to mobile implementation.

The exception to this rule is to left align when there is an extremely large data set, represented on a large screen.

Locate labels in close proximity to the field it relates to. This pair should have distance to adjacent pair to prevent confusion.

Be concise with label copy to enable easier scanning. One or two words should be sufficient, while the use of complete sentences is to be avoided.

Avoid block capitals as the readability is more difficult.

Top aligned labels above fields in LinkedIn sign up form
Figure 9: LinkedIn account creation - Top aligned labels

6. Use placeholder text to add contextual information

Placeholder text provides additional information on information required, such as format and character limit. Position placeholder text inside a field.

Choose a different style for placeholder text such that it is easily distinguishable from text entered by the user. This eliminates confusion that a field has already been completed.

Placeholder text should disappear when a field is active, hence why it is preferred that any hints are located outside.

Avoid block capitals as the readability is more difficult.

Placeholder text inside the field to help with format at Tesco sign up
Figure 10: Tesco account creation - Placeholder text

Do not use placeholder text as labels as users can forget what the field is needed for.

At the very least consider moving the placeholder field text to become a label once active.

Dynamic field and label text, which modified when active or not
Figure 11: Gmail account creation -dynamic field label / placeholder text

7. Create clear, concise and prominent call to actions

Make call to action buttons descriptive, stating the intent or action. Users seek clarity on what will happen when pressed. This increases trust and confidence.

Clear, concise CTA on trainline app to let user know what is going to happen when pressed
Figure 12: Trainline ticket purchase account creation - Clear CTA

Where forms have a primary and secondary action - typically proceed and cancel - create visual differentiation. Place emphasis on the primary action by using stronger colours.