Designing Better Multi-Step Forms for Mobile

Completing long forms on mobile can be tedious and uncomfortable.

Even if users are working with a multi-step form where all the required fields are well organized and structured by sections, a lot of moments of friction can still be present.

In this example, we are going to focus on two pain points that financial advisors were experiencing while creating retirement plans for their clients in a mobile app.

User pain points

1- Financial advisors were not able to see at a glance all the steps needed in order to complete a retirement plan for a client.

This was a problem, especially for first time users because the lack of clarity on what to expect made it more difficult for them to manage their time and plan an efficient way to gather information from clients.

2- Financial advisors were not able to skip a step or move directly to a specific step of the process because the form required users to complete each step in a sequential flow.

This was a problem because the majority of the time financial advisors work on these steps in a non linear way. They need to start with the information available they have at the moment about their clients, save the progress they have made and come back later to finish.

This was the initial state:

This design had a few issues:

– Users were not able to see the remaining steps on the right side of the screen.

– Some users weren’t aware that they could swipe left to see the remaining steps.

– Users expected each step to be a link that would take them to its corresponding section.

Design iterations

Here are the potential solutions that I sketched after a few design iterations:

Now, let’s review one by one.

Option A

This design shows the current step, the total number of steps, the name of the step and
a progress bar that works as a visual cue to give the user an idea of how long it is going to take to complete the form.

However, it does not provide an overview of all the steps that a user will need to complete.

Option B

This design shows the current step, the total number of steps, the name of the step with a chevron icon and a progress bar.

The only observations I have about this design are:

– Because the progress bar is so close to the name of the step, it could be understood as the progress of that specific step the user is working on, and not the progress of the entire form, which is exactly the purpose of this visual cue.

– This feature is using a lot of space on the screen, and this space could be used to display more of the required fields that the user needs to complete.

– Lastly, the title of the screen should be left aligned for better readability, and to accommodate longer titles.

If users tap on the name of the step with the chevron icon, this bottom sheet is displayed where they can see all the required steps needed to complete the form:

Option C

This design shows the title of the screen, a progress bar, the name of the current step, and the total number of steps with a chevron icon.

This design has a better layout because:

– The progress bar is right next to the title of the screen, in this case “Retirement Plan” which communicates better that this is the progress of the entire form.

– Use less space on the screen by balancing better the spacing between the name of the step and the number of steps.

– Lastly, the screen title is left aligned so we can provide a consistent reading path to users, especially those who read left to right, as it aligns with the common reading flow.