Stepper - UI Element

Steppers are UI elements used to display the progress a user has made. They serve for navigational purposes that guide the user through the next steps of an operation.

Steppers manage to take a more complicated process and divide it into smaller steps. This way, users will clearly know how to complete the action. Steppers are used in forms and in user interfaces where multiple pages are required. For example – buying an item or applying for a loan.

1. Horizontal Steppers

With horizontal steppers, users can visualize a straightforward line from start to finish. This way, users will visually determine exactly how many sections are needed to navigate. Use horizontal steppers wisely because they are not quite compatible with small screens – like mobile screens.

‍

‍

2. Vertical Steppers

The vertical of stepper allows users to visualize the steps needed to complete hierarchically, from top to bottom. Vertical steppers are great to illustrate the timeline of the next steps. But, depending on the layout, the following steps might not be visible, and going back and forth between the steps might be harder.

‍

‍

• Use a stepper in longer processes where multiple steps are necessary – checkout, registration, onboarding, etc.
• Use a stepper when the questions or fields are separated into categories;
• Use a stepper in long forms;
• Avoid using a stepper in dynamic object listings – use containers instead.
• Avoid using a stepper in cases where the information is not interconnected – use cards or tabs instead.

‍

1. ‍Anatomy

A stepper is made up of:‍

• Status Icon: The stepper UI elements will mostly appear in the shape of a simple geometric shape – most of the time, in a circle. ItThey can be represented through numerical values indicating the respective step number or icons relevant to the action the user must take. ‍
• Label: The fundamental purpose of a stepper label is to explain to users what is required of them. Keep the content short, clear, and concise – ideally up to three words. Don’t give too much information and use it with no period.‍
• Secondary Icon: These secondary icons indicate additional information regarding the progress of the step. Use universally recognizable icons and colors to make it obvious to users. For example, use the error icon in the case of a specific problem in completing the step. ‍
• Track: The tracking element connects all the steps and is represented through a simple line that spans from the first step up to the last one. It can change the color based on how much progress has been made.

‍

2. ‍Create a Logical Flow‍

Users read from left to right or top to bottom. The sequence in a stepper should follow the same sequence.

3. ‍Avoid Nested Steppers or Progress Trackers:

Try to stay away from using steppers within steppers or other progress trackers. This creates visual clutter and confuses users.

4. ‍Grouping Elements:

When dealing with diverse elements, group these floating elements visually through containers – for example, a field set. This is not necessary if a container-like manner is already present – for example, a list.  

‍

Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find steppers and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!

So, get your uinkits package and start designing now!

‍