When your form has multiple pages, a stepper is a must. Steppers keep users informed about their progress by indicating what step they’re on and how many steps they have left.
Displaying steppers on mobile forms is a challenge due to the limited screen space. Using the same stepper on your desktop form for your mobile form causes readability and visibility issues.
Linear Vs. Radial Steppers
Linear steppers work well for desktop forms, but not for mobile forms. When you use a linear stepper on your mobile form, you decrease the readability of the step titles and the visibility of progress tracking.
Forcing the step titles to fit a tight space leads to smaller text sizes your users will have trouble reading. Not only that, but the progress visibility is less clear because it shows too many text and numbers at once. This creates visual noise and makes it harder for users to distinguish their current step.
Use a radial stepper on your mobile form because it’ll give your users clearer progress tracking and better readability. Your users will know at a glance what step they’re on because the radial stepper gives enough room for large step titles. It displays one step at a time allowing users to focus on the current step. It also offers enough room to indicate what the next step is.
Users will be able to track their progress quicker because it takes them fewer eye fixations to scan a radial stepper. Scanning a radial stepper only takes them a couple eye fixations. Scanning a linear stepper takes them at least 4 eye fixations. Fewer eye fixations allow them to process their progress faster, which encourages form completion.
Visibility + Readability Are Key
When users fill out multi-page forms on mobile devices, they need to know what step they’re on and their progress. The visibility and readability of your stepper are key to this. When the step titles and progress tracking are clear, the chance of form completion increases. But when they are hard to process, the chance of form abandonment increases. Which outcome do you want?
Book
Affiliate
I think a vertical step indicator showing all steps with statuses might be more transparent and user friendly. When talking about saving time and eye movements, I’m not so sure that’s more important to knowing all the steps involved ahead of time, rather than just the current and next step. Of course both should be user tested to ensure that is the case. Nice design though, but I’m curious to see how it’d fare against a vertical step indicator, where all the steps have clear titles and statuses (completed, pending etc.)
You’re basing your assertion on the assumption that users need to know what every step is before they fill out a form. Based on my experience, users care most about how many steps there are in the process because time is important to them, what step they’re on to affirm the info they’re filling out, and the next step to get an idea of what to expect.
Nice job! I like your solution much better, especially if there are more than 3 steps. Your solution also eliminates text length constraints on the linear stepper. I think both situations indicate progress clearly, and I’d propose a middle ground for linear steppers if there are 3 steps. I think I will definitely implement this on a few sites
Ei, thanks for this article.
Do you think that eye fixation is that important when you have a static element, one which the user will have multiple times to analyse through the actual form?
Personally I can’t find data that says one is better than the other, but both if well designed can perform their function in the right context.
Do you have any more info regarding this subject that could be useful for this discussion?
Cheers
I like it, but your assumption that users don’t want to know what they can expect, would have to be tested as it probably depends on the type of form.
Just wondering how you would handle the stepper as a navigation to go back and forth between the steps.
For this, I have tried a solution for 8 steps with horizontal scroll which also tested very well.
I like your design in circular format. I just wonder why you use “2 of 4”, instead of “50%”.
In my opinion,
– upon “2 of 4” format, customers will have a clear understanding on how manu steps left.
– using “50%” can show the actual progress, esp. for the effort to fill in each steps are different.
What is your view?
50% doesn’t indicate how many steps are left like “2 of 4” does (step 2 out of 4 steps). Percentages are also used for loading states and the form is not in a loading state.
How would this work if the steps are also used for navigation? i.e. you’re on step 4 and want to navigate back to step 2.
Great question! I’m also curious about that. Any ideas?
Percentages can be confusing to user as it does not clearly indicate the amount of steps left. Well, it does but don’t make the user do math “10% complete” is that of a 1k? Navigation for a stepper should be linear they can navigate to previous completed steps but never forward to I completed ones. If you need to arbitrarily navigate as a user then you should not be using a stepper component. Steppers are designed to manage cognitive workload.
Well, that’s simple, we use radial because of its good looking, simple and trendy nothing else, but if you really care about the workflow you will damn use linear. Also to minimize the noise I recommend using a keyword or shorten the word itself. Instead of “Contact Details” why not Contact. Instead of “Shipping Information” make it Shipping. user will know it and their used to it.
Not sure I agree here.
Vertical stepper can show all the steps that are coming, even when the font is less readable. Obviously, the text for each step should not be used as the title when the step is on, the title should be below the stepper and with bigger font.
The fact that you can visually see where you are, where you were and what’s coming up adds to your confidence.
Hello I’m the user 🙂 just like to say, i hate multi step forms, especially on mobile. If the form is moderately long i would not mind filling, especially that i have to stop to answer a call, read a message, pay attention to the traffic lights, you know, too many things to make me forget what i was doing. So keep them all displayed would you? Anyway that’s one scenario, pretty sure there are hundreds of other scenarios
Recently, We created some progress forms, best results were when we implemented the design you recommended. The left one is crowded and not even easy to implement, we got some issues from end developers when the text is long and when product manager decided to add another step. The “right” one : ) was readable and visible without zooming, clear title, clean design and less code and scalable without issues.
Awesome!
Great piece. What would you suggestion be when a user wants to jump a few steps back?
Here is an emprical study that contradicts your assessment. In short, when asked, users say they prefer steppers with text.
https://www.hugo.limited/reports/progress-indicators-on-mobile-devices
This was a qualitative study based on PREFERENCE (e.g., Do you like this or that?). When you compare any novel approach to a traditional approach, people will always prefer what they’re used to and familiar with.
The study did not measure the visibility and readability of mobile steppers which was the entire point of the article that you missed.