Tech tutorials Designing and Developing a Responsive Progress Indicator

By Insight Editor / 16 Mar 2016 , Updated on 16 May 2019 / Topics: Application development

You've seen them before. Progress indicators show a user the steps completed and the steps remaining to finish an online process, such as an application download, software setup or purchase.

We were asked to overhaul a lengthy online application to make it shorter, more user-friendly and completely responsive. A key component of this reimagined application was a progress indicator that would work toward all three of those goals.

However, in our research into existing progress indicators, we couldn't find any truly responsive examples that didn't sacrifice critical User Experience (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 for consistency.
Inform the user of how many steps he or she has 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.

These are some examples of progress indicators. 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 the appearance would have to be responsive as well.

Even though our site was developed to be mobile-first, the abundance of unresponsive 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 progress flows left to right, and we reinforced that with the chevron direction and the checkmarks on completed steps. (Note: 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 three to five 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 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 five 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 sacrificing user experience on the altar of design.

It was important to me to develop this as a flexible, responsive, stand-alone 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 resize and re-color the progress indicator without rewriting styles.

I've posted my work on Codepen as a demo for you to use.