How can I create a progress indicator that keeps the user?

Recently working with a team of small partners to deal with a complex form design, just see this article, small inspired, decided to translate and share with you, is a quick reading of the case text.

In the design of large electronic Business website or complex online service system, the most important problem is to design an online order or configuration process. If the user process can be designed simple and consistent with user intuition, this is absolutely the key to improve the conversion rate. Any frustration with the user during the process may lead them to leave to try out other options.

An easy-to-use step-by-step process can effectively prevent users from being frustrated and help them accomplish their major tasks successfully. This article I will take you to see a variety of process progress design.

　　What is a progress tracker?

The Progress Tracker (progress indicator) shows a linear progress process by slicing the process into multiple logical steps. They can guide the user through a series of steps to complete the task. A good progress tracker design needs to tell the user the following information:

Which steps (or tasks) the user has completed (preferably using the right visual representation)

Currently in which step (the user's current position in the entire process)

What other steps need to be done (preferably with clear guidelines)

The progress tracker shows the process in a step way.

This is the three most important reasons to use a step process:

Can combine the information that the user needs to enter more logically

Set a clear expectation to the user

Track status for a user in a complex, long process

　　Why is the progress tracker valid?

The progress Tracker creates a clear path for the user. The study shows that when users have a clear idea of how many steps are required to complete a final goal, the situation of giving up halfway is significantly reduced. From a psychological point of view, it is also very tenable.

Complete account creation with step-by-step operations

Moreover, it is more advantageous for users to scan the information in the block, which can improve the user's understanding of the process. In fact, block design can provide a logical and visually diverse content module, which is helpful for a complex overall situation.

　　Use of Progress Tracker

The Progress Tracker is available in many scenarios, and the following three are the most common,

　　Online order

So far, progress Tracker is most commonly used in online purchases because the task of buying is inherently divided into multiple steps.

　　Multi-Step form

If a form requires a user to provide a lot of information, it's a good idea to split the form into multiple steps

　　Guide

The progress Tracker is also used for app booting. If there are few steps you can use the small dots below the screen to annotate (like the DROPBX case below)

Dropbox guide

　　Progress Tracker Design Case

There is no universal answer to the question of how to design a remarkable progress tracker. But what you always need to be sure of is how the user interacts with your system. Generally, the steps should be designed to be as simple and clear as possible to avoid confusing users.

　　Set user Expectations

When users need to complete a complex process operation, the user's expected management is particularly important, we need to start the operation before the user tells them how much work and time to complete the process. If users think they can do it in just two minutes, but it takes 10 minutes, the experience must have been bad.

To provide users with the appropriate process description can help users to do complex operations in the heart of preparation. Of course, it would be best if you could give the user a time estimate for the task, especially if the complexity of these steps is not equal. (for example, some steps may take more time than others.) )

　　Establish a logical process

Show the direction of the process. It is best to use the arrows to emphasize the flow of the process, because simply using a line to connect does not reveal the concept of the process.

Use icons to work with text to describe these steps in the process, which gives the user a clearer idea of the steps.

Do not disassemble the process too long, 3-5 steps is advisable.

Use numbers to reflect the step and current position (for example, step three in step five)

Always let the user know their situation

"Where am I?" This is a problem that users often ask themselves when navigating in an interface. This is why a good progress tracker needs to keep the user clearly aware of which steps they are in the process. This allows users to know exactly what they are doing and what they need to do next to help the process move forward.

It is also necessary to provide a good visual display for the Progress tracker. The user often relies on some visual clues on the navigation to judge.

A case from dribble

You can use some clear state changes to indicate the current step, not just change the simple color. appropriate icons and text to help users understand.

Text changes with state

　　Avoid multiple progress trackers being present at the same time

Do not use the progress tracker more than once in the same page, and do not use nested nesting. This is likely to bring confusion to your interface.

Negative case

　　Use progress Feedback

A progress tracker can display transient feedback after a user saves a step. This feedback should only exist if there are some potential waiting situations between the steps.

　　Application of Progress Tracker in mobile end

Because the horizontal space is very limited on the mobile phone, the vertical progress tracker may be a better choice for mobile applications or sites. It takes a little bit of notice that each step of the content is responsive.

The vertical progress Tracker is ideal for small screens

　　Summary

The design of the progress tracker needs to be easy to remember and easy to understand, and don't forget to use visual representation to guide the user properly. Always put the user in the first place, do not design for themselves. Finally, a good progress tracker can ensure that the user completes the process smoothly while having a better impression of your product.

Translator's micro-signal: Open book translation, welcome attention yo