Intro to Progress Trackers in UI course lesson

Progress trackers guide users step by step, dividing large tasks such as filling out a form into smaller chunks, and encouraging them to complete each step. From a psychological point of view, progress trackers help significantly reduce task abandonment. When people see how many steps they have ahead when starting a task, they're more likely to finish it.

Moreover, according to Miller's law, presenting content in chunks helps users scan and comprehend content more easily. As a result, users achieve their goals much faster and more efficiently with the help of progress trackers.

Exercise #1

Indicate current position

Having a clear understanding of where users are is one of the fundamental rules of successful navigation. Like a pin on a tourist city map saying, "You are here," the current step on a progress tracker should stand out to remind users of where they are within the journey.

The current step should visually differ from the steps users have already finished and those remaining. One effective way to achieve this is through color differentiation. Using a distinctive color for the current step sets it apart from completed and remaining steps.

Exercise #2

Indicate the remaining steps

The remaining steps on a progress tracker inform users of how many steps are waiting for them ahead and motivate them to move forward. They usually look disabled (pale gray or any other muted color) and change their state to active once users reach them.

Pro Tip: Make sure inactive steps have enough contrast and are legible.

Exercise #3

Indicate completed steps

Highlighting the completed steps on a progress tracker helps users observe the process by showing where they are, what they've completed, and how many steps remain.

Use different visuals to differentiate completed steps. Checkmarks and the color green are universal symbols for completed activities.

Exercise #4

Carousel progress trackers

Carousel progress trackers are most popular for walkthrough screens or user onboarding for new feature routes with a minimum number of steps. Like standard progress trackers, they inform users of their position and how many steps are ahead. The main difference is that carousels don't show direction, and users can skip steps easily.

Exercise #5

Vertical trackers

Vertical trackers are a way of organizing steps or stages in a process from top to bottom, rather than from left to right like most trackers. They're not as commonly used, but they can be helpful for certain tasks, like keeping tabs on the delivery of a product or service.

When you use a vertical tracker, you'll see the latest updates and status information listed in a straight line from the top of the page to the bottom. This makes it easy to follow the process in a clear and straightforward manner.

Pro Tip: Make sure the vertical tracker is always visible when users scroll.

Exercise #6

Use a reasonable number of steps

It's nearly impossible to make forms sound fun or exciting. And the more steps a form has, the more likely users are to abandon the process. Keep it short — a set of up to 5-7 steps is usually more than enough to complete a task. Simply seeing on the progress tracker that the form isn't that long can motivate users to go through each step and complete it.

Exercise #7

Use step labels to enhance recognition

Make an effort to label the steps on your progress tracker — it enhances recognition. If users get distracted, it'll take them less time to remember what they were doing previously if they come across helpful labels.

Plus, titles add to scannability, helping users quickly understand where they are and what they are expected to do there.