Learn

Have you ever clicked a link or submitted a form, only to find yourself frustrated and waiting for an indefinite amount of time?

While the digital experience of waiting is relatively novel, experts have been studying how to make physical queuing more tolerable for a long time. We’ll often find that digital design methods can draw from broader studies of psychology or other fields. According to queue theorist Richard Larson, there are two rules to consider when designing a queue: first, keep your customers entertained while they wait in line. Second, manage their expectations.

Progress indicators are design elements that help users understand how far along they are in a given process, such as loading a web page or search results. These can help manage user expectations by offering information about what stage they have reached in a given process.

Progress bars show what percent of a process a user has gone through. These are common for loading content and can be combined with other types of progress indicators, such as a countdown of the time or percent of the process completed or remaining. (See also: UI Guideline, UI Patterns)

Steppers show which steps of a process the user has completed and which steps remain. These are often used with long forms or questionnaires to indicate how many more stages the user needs to complete.

Spinners (sometimes associated with loading states) are sometimes used to indicate that progress is happening, but for longer processes can be frustrating, as they continuously loop and don’t provide additional information to manage user expectations. (See also: UI Guideline)

It’s up to us as designers to decide which type of indicator, or which combination of indicators, best serves both user needs and business goals, in a given scenario. We might make a decision based on what information is available to us — for example, we do have access to the time remaining or percent completed to display that data? We might consider how long of a wait we expect the user to face — a spinner with no additional information might be fine for a quick wait, but frustrating for longer wait times.

Instructions

Take a look at the various progress indicators to the right. Consider the usability heuristics and UX design best practices we’ve discussed in earlier lessons.

What kind of flows would you imagine each style working best for? Where might these types of progress indicators be useful in our flight booking flow?

Perhaps we could incorporate a spinner or progress bar after a user has submitted a search before their results are loaded, or a stepper into the checkout flow once the user has chosen a flight.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?