Have you ever had an argument about a progress indicator in a signup form?
These elements, also known as progress steppers, signpost the way to TRILLIONS of dollars worth of customer purchase interactions every year.
Recently, I noticed a debate raging on LinkedIn about which progress UI pattern was more effective, with 4,000+ reactions and 200+ comments. The stimulus for this argument was a post on UI Movement (Medium member-only) about "good" and "bad" progress indication patterns.
It's one thing to read opinions from designers about this pattern, but I'm more curious about what normal people think about this kind of UI element and the functionality it provides.
To that end, I put a qualitative user test together and sent it out to 100 participants.
The test was a simple one. I put together a couple of wireframes of the different UI patterns, and asked participants which design was most useful to them in the context of a complex online interaction – like signing up for an electricity account.
Here are the challengers:
Which one of those options do you think came out on top?
Personally, my money was on C, the radial progress stepper concept, considering how clear and simple it seems to my eye, and how visual the process seems.
Ready to find out? Brace yourselves for a graph!
The overwhelming preference was option B, the linear progress stepper! That's this one:
I love being shocked by research, don't you?
That's right, the clunky old linear progress stepper is out in front by a country mile, leaving the radial indicator, simple number and slimline text variants in the dust.
True, but there's no feasible way to test this in the lab without asking people what their preference is.
The data that this line of questioning generates is 'attitudinal', i.e. measuring what people say they are thinking. By its very nature, it can lead to fuzzy results.
That said, it can be some of the most useful data to gather from your audience because they're giving you an insight into their conscious thought processes.
The alternative would be extremely cumbersome. We could prototype the different variations together with live inputs in Axure, test the whole form end-to-end with people, then reflect on how they felt about each stage of the process.
Depending on your organisation's level of design maturity, this could take anywhere from 2 weeks to 2 months to get prototyped, organised, tested and analysed. The prototyping alone is not a trivial task.
Ain't nobody got time for that. We spent less than 8 hours and US $200 on this test, from initial prototypes to final data analysis.
And after all, more tangible performance metrics like form completion time or per-step drop-off might give you a different dataset to look at, but they won't tell you why your designs are (or aren't) hitting the mark. You have to guess at that yourself, unless you have this attitudinal data.
I collated all of the 'why did you choose this one' text input data, did some categorisation tagging to each response, and pretty quickly a pattern emerged.
People liked it because it was context-heavy.
'Details each section' responses were focused on how well this UI pattern shows the entirety of a form's contents.
'Shows progression' responses were heavy on the idea that your position in the form was shown in detail.
'Focus on ease' was allocated to any response that mentioned that this pattern was 'easy', 'simple', 'clear', etc.
'Gives me feel of time required' is pretty self-explanatory - different to 'progression' in that participants in this categorisation actually mentioned 'time', 'how long it will take', or similar.
There's a long tail of categories here, but looking at these top categories gives you most of the data that you need to make this decision, or to modify your designs appropriately.
More context in this element gave users a much better signal about what to expect when filling out this form from start to finish.
It's easy to say 'make sure you do lots of user testing because the results may shock you!', and look, I'm not going to contradict that, given the results.
Radial steppers are all the rage in the design community because they look elegant. There's also a lot less text on a radial progress indicator, which is what most product stakeholders want at the moment.
But not a single user responded positively to an alternative concept with the reason that 'it had less text'.
Implementing a radial stepper or 'next step only' slimline element is simpler than building a linear progress stepper, which also weighs heavily in any decision-making process about this kind of element.
If you've got a form that is of variable length, e.g. if a customer is upsold more products during checkout, or there's logic that forks the happy path depending on selecting options, then building a linear progress indicator is a curly challenge.
What happens when a user will only see 2 steps? Or 6? It's much easier from a development perspective to show only what the next step is.
But if you're designing for user satisfaction, then a linear progress stepper is a must-have, even on mobile.
If you're interested in running this research yourself, but you're not sure how to get started, or how to analyse the results, I've put together a quick and affordable training video that shows you how to do this kind of research yourself - and no previous research or UX experience is required!
It's called 'Your Opinion, Or My Data? How to use remote user testing to settle design arguments quickly', and it's available to pre-order today for a March 2021 release.