Multi-step form design part one: progress indicators and field labels

Throughout this article series we will be exploring the importance of multi-step forms and various key design elements that help provide a painless form-filling experience for users.

So let’s kick-off with a little theory on why multi-step forms are useful and what they are used for…

What is a multi-step form?

Multi-step forms help visitors stay engaged by minimising the pain associated with filling out a really long form. Splitting your form into two or three steps will almost always increase completion rates and allows users to systematically ‘step’ their way through the process.

Multi-step forms are ideal for:

• registrations
• purchasing tickets for travel
• securing bookings for events
• making appointments
• capturing user information sign-ups
• and let’s not forget the dreaded experience of lodging e-Tax!

Designing a great form experience begins with understanding the elements within it. Today I will expose the tip of the iceberg by talking about the importance of progress indicators and field labels.

What is a progress indicator?

A progress indicator displays the total number of steps in a form. Progress indicators help reduce users’ anxiety by communicating how far they are from finishing.

To avoid confusing users, you should keep the form stages/steps as clear and simple as possible. Here are some tips that will help in the design of an excellent progress tracker:

1. Manage user expectations

It is important to inform users how long it will take to complete a task; if users expect the task to take two minutes, when in reality it takes ten, they will not have an overall positive experience or potentially forfeit half-way.

2. Establish a logical flow

Users want to feel like they are stepping confidentially through the form. Ways to help facilitate this include:

• Arrows are a great visual cue for establishing the direction of movement between form sections.
• Icons in conjunction with descriptive words help define the step sequence of a progress tracker.
• Keeping the number of steps short and sweet.
• Utilising numbers keeps users informed of their location (for example, ‘step two of five’).
• Offer good visual representation of progress – user’s reply on visual cues from navigation elements to determine where they are.

3. Show progress feedback

A feedback message is a clever way to keep users engaged if there is a loading or saving delay between sections. This message can also give some insight into what to expect next.

What is a field label?

A field label tells users want information to enter into a field. A clearly written label tells the user the purpose of the field and should remain visible even after the field has been filled in.

Meaningful alignment

Regardless of whether the form is on-screen or on a mobile device, label placement governs the speed of form completion. Choosing the correct placement will dramatically alter the user experience.

So, what will it be… top-aligned? Left-aligned? Or perhaps in-line?

Top-aligned labels work well if you want the user to scan the form as quickly as possible. They also work best across responsive screens where there may not be a lot of horizontal space. Here is an example of a top-aligned field label:

Left-aligned labels provide a strong visual connection between the label and text input box; it also forces users to read carefully and slows down the motion of flow. Here is an example of a left-aligned field label:

An in-line label sits within a text input box and is best reserved for simple two-step tasks such as logins with username/password fields. It is not commonplace to use this style of label in a multi-step form, as the label disappears while typing a response. Here is an example of an in-line field label:

Label length

Less is best. Keeping labels short, succinct and descriptive will help users scan quickly from one question to the next and result in faster completion rates.

Title case, sentence case or all caps?

Title case is when you capitalise the first letter of each word – this is not practical for long field labels.

Sentence case however, is the preferred typography treatment for field labels. It is easier on the eye, retains a natural flow for optimal scanning and is faster to read.

All caps should never be used for field labels as the letter-forms lack variation in character height. This disrupts the natural flow for optimal scan-ability.

Making steady progress

We now know the importance of progress indicators and appropriately styling field labels to enhance form completion rates. While these are vital elements of form design, there is much more to consider… in part two we will talk about radio buttons, checkboxes and drop-down selectors.