You’ve seen them before: Progress indicators show a user the steps completed and the steps remaining to finish an online process — like an application, setup, or purchase.
Recently, we were asked to overhaul a lengthy online application to make it shorter, more user-friendly, and completely responsive. A key component of this re-imagined application was a progress indicator which would work toward all three of those goals. However, in our research for existing progress indicators, we couldn’t find any truly responsive examples that didn’t sacrifice critical UX components on small screens. So we set out to build an uncompromising progress indicator that provides a great experience for all users.
First, we needed to set some expectations. Our progress indicator should:
- Provide context as to what step you’re on. Since one step could consist of multiple pages, the labeling of a step is important to be consistent.
- Inform the user of how many steps they’ve completed and how many remain.
- Be flexible, allowing the progress indicator to include additional or fewer steps — within reason — and for each step to sustain a significant number of characters.
- Be visible, familiar, and accessible to the user by using on-brand colors and contrast.
- Be responsive. This means sacrificing none of the above rules just because your screen is only 320px wide.
In order to create something that would be easily recognized as a progress indicator, we decided to follow some prevailing design trends. We used labels, chevrons, numbers, and checkmarks in a horizontal layout. However, form follows function, and fitting all of that into a small screen width meant that the appearance would have to be responsive as well.
Even though our site was developed to be Mobile First, the abundance of un-responsive progress indicators led us to consider the wide design first.
This design should look pretty familiar to some of the examples above. We use a strong on-brand color to provide context as to what step the user is on, as well as bringing a familiar and accessible experience to the user. Some progress indicators use three colors to denote three types of steps: completed, current, and incomplete. We allowed colors to simply denote active or inactive steps. Our assumption is that the user understands that progress flows left-to-right, and we reinforced that with the chevron direction and the checkmarks on completed steps. (Note that if your process allows users to skip steps or leave them incomplete, you may need to rethink this assumption.)
With plenty of space, we’re able to inform the user of all the steps completed and incomplete, using labels that support up to 36 characters and tweakable font sizes. We recommend short and sweet titles using one or two words. Our progress indicator also supports 3–5 steps out of the box, with room for more, allowing for a flexible and future-proof design element.
Now that I’ve shown you how much we can stuff into the progress indicator, let’s see how we can show all the same relevant information on a small screen.
Obviously, the elements that take up the most space are the step labels. In order to be responsive and buy as much space as possible, we show only the label of the current step. This allows the current step to take up a big portion of the indicator, and it lets us keep our robust character limits on the most relevant step label. Because we also removed the chevron arrows to maximize space, we also reconsidered our use of color in the mobile view. It looks a bit like a progress bar which fills from left to right — a familiar design pattern.
The condensed design:
- is just as bold and accessible
- still informs the user of remaining and completed steps
- still supports 5 or more steps
- arguably provides even better context as to the current step
When designing and developing responsive elements, it’s important to begin with a set of guiding UX principles. As you’re iterating, if you consistently refer to these rules, you can prevent yourself from sacrificing user experience on the altar of design.
It was important to me to develop this as a flexible, responsive, standalone piece so that web content creators can tweak and extend it as they see fit. By using Sass mixins and variables, I was able to create a short list of settings that can be tweaked to re-size and re-color the progress indicator without rewriting styles.
I’ve posted my work on Codepen as a demo for you to use:
