Progress steps are great for the user experience. You will usually find them on registration pages and payment forms where the user has to enter data in several steps.
Breadcrumbs can also use this progression UI as it unfolds in a natural pecking order. But how can you design a progress bar structure that works for your site?
In the past we have covered progress bars and for this article I would like to cover progression steps with design ideas, free graphics, and free plugins to get you started.
Pro tip: add text and labels
Whenever you design progress steps, you always want labels. They are crucial in defining the interface because users need to know where they are in a process.
Text can be bold, all caps, highlighted, or in the background. Just make sure you have Of text carefully explaining each step of the journey.
Online email template generator
With Postcards, you can create and edit email templates online without any coding skills! Includes over 100 components to help you create personalized email templates faster than ever.
Try for freeOther products
The labels can give the user a preview of what the whole process may require. This is especially useful for long checkout pages where you want someone to continue to the end.
But there is no magic formula for a perfect label. I aim to keep mine clear, concise and short (2-3 words max).
Do what works best for your site or mobile app. See how much room you have on the page and adjust your design for it.
One thing i really like the above design is the use of the legend arrow. This naturally attracts attention and tells the user exactly where they are in the process.
Icons = visual clarity
If you have space in your progress steps, try adding custom icons into the mix.
These can be in any style you like, from detailed graphics to SVG line icons or anything in between. The goal here is clarity to help the user see at a glance where they are in the process.
To take this example by designer Tri Nguyen. It relies on custom icons to define the steps in the registration field with labels below.
As I mentioned earlier, the text is always good for clarification. But visuals help sell ideas much faster. This is why, ideally, you would have both in the UI of your progress stage assuming there is room.
One graphic I like to add is the check mark icon for completion. Once the user has passed a certain milestone, it is a good idea to add a check mark to that part.
It’s just a visual cue to describe where the user currently resides in the overall flow.
Checkmarks aren’t the only icons that work here, but they’re the clearest and easiest to use.
Keep your interface consistent
The purpose of a progress stage user interface is to guide the user through a series of pages. You have to think about that as navigation bar where it stays fixed in one place at all times.
Aim for consistency. You don’t have to worry about how much space you use or how labels are highlighted.
Your first and foremost goal is to design something that stays consistent and always visible. This way the user knows exactly where to look if they want more information on their progress so far.
And if you’re designing for consistency, make sure you maintain the same aesthetic throughout the process.
For example, this design by Moinul Ahsan uses a lighter text color for “future” steps. As the user moves around the form, each field darkens and remains consistent page after page.
You can achieve this effect in different ways, but the goal is always the same: to give enough information to help the user determine how much they have accomplished so far and how much time is left before they get it. did.
There is no reason to start a design from scratch when you have free resources to work with.
Gifts are a designer’s best friend and especially with custom user interfaces. Take a look at these free progress step PSDs and see if any may work in your mockups.
A fantastic design by Tahir Yousaf, this keeps the progress bar short and simple.
Basic icons with clear text dot the bar. Also note the check mark on the completed step, a great indicator of progress at a glance.
Here is one that is quite unique as it focuses on one product order. But it can work well for any ecommerce payment page or even a mobile app UI.
The free PSD is attached to Dribble shot and it should be accessible even without an account.
Sometimes you’ll just want a simple checkout page with very straightforward checkout steps.
This is exactly what you get in this gift designed by Diogo Kpelo. It comes in the form of a PSD and offers a pragmatic user interface to design the progress stages of an online store.
Earlier I mentioned line icons because they are so easy to integrate into any site. With this gift you get a few line icons mixed up into a fantastic checkout page.
The forms are very easy to redesign and you can even swap the line icons to suit your needs. A great starter template for any progression stage UI.
Code snippets and plugins
The free graphics are great, but they’re just the first step. Once you’ve created a mockup, you’ll want to code it into a working webpage.
Some designers prefer to start with the code, others like to work with the design first and build on top of it. These plugins can save you a lot of time once you get to the coding stage.
Most recent JQuery Steps plugin was first released in 2017 and has since gained tremendous success.
It is one of the few progression step plugins and definitely one of the best. Setup is a snap and by far one of the easiest ways to get a progress bar on any website.
If you need something a little more technical, take a look at the SmartWizard plugin. This was designed for jQuery + Bootstrap 4, so it only works on the BS framework.
Anyone using the BS4 framework can save a lot of time with SmartWizard. Of course, this won’t be of use to everyone but take a look at the home page if you are interested.
Another plugin I want to mention is progressStep.js. It is built on jQuery and supports a bunch of great features.
But it does take a bit of work to customize as it comes with a lot options.
Everything you need is on the main page GitHub page So take a look there and give it a try if you are curious.
Now, if you don’t want a full plugin and prefer to use snippets, you’ll have to dig in. Fortunately, there are a bunch of little snippets out there and I’ve listed a few of my personal favorites below:
If you do a search in CodePen you’ll find a bunch of others too.
The progression stage user interface is a rapidly growing trend that places an emphasis on usability first. By simplifying the interface and clarifying the entire checkout / registration process, you can ease anxiety and encourage users to complete your entire form.
Hope these examples and resources give you enough to start making your own progress UI bar.
And feel free to search the web for more ideas because there are a lot out there.