Progress Indicators as an Essential Part of Website

Used mainly in online stores in order to increase conversion rates, progress indicators make users pass the required procedures which are necessary to complete the purchase. Along with a shopping cart it is the basis of quality and thought-out site. Each of you encounters it numerous times and not necessarily during visiting an e-commerce site. Majority of large respectable sites with open member systems or those who provide various services such as booking or ordering includes such type of procedure.

Being similar to a breadcrumbs it also helps to navigate users but in a more advanced way. It is an important part in cooperation between users and application. The main task of which is to walk users through different multi-step process by making it easy and intuitive.

It should inform users about following aspects:

  • What tasks user has completed, preferably with a visual results
  • Current section he is on
  • Which and how many steps still remain also preferably with clear designation

In order to be sufficient and effective each part has to consist of explanatory data. First of all, it should have proper title and tiny description that will briefly explain the purpose of this step. Secondly, it is usually supplemented by various user interface elements such as polls, contact or any other kinds of form.

Approaches of creating progress indicators

There are no particular methods of creating excellent progress trackers. Always remembering of how your users interact with the system – is the key to success. Generally, designers prefer to create process steps as simple as possible in order not to confuse users even more. Furthermore, a paucity of visual effects will dramatically optimize your site, but it doesn’t mean that your system should be plain and dull. To make it user-friendly you should embody several features:

  • Numbering the steps
  • Show the direction of movement, as a rule it is from left to right
  • Distinguish the current step
  • Incorporate an indicator that shows successful completion of a step
  • Visual representation of a progress using tabs or simple links can be very confusing
  • Don’t make the process too long (3-5 steps will be enough)
  • Greeting final message with results

As for standard progress tracker design, it includes rather plain interface, simple outline fields to complete and a bit of graphics which are used only to make the system fits perfectly into whole website design.

Along with them there are nonstandard designs that often lie in the use of unusual shapes and vivid graphics. You can easily meet implementation of such approach on design-oriented websites. On the one hand such method makes the process more cheerful and entertaining, but on the other hand it can bring confuse and misunderstandings. Although with well-thought structure and a small number of tasks this option may be winning.

In the list below I have put together different examples of process tracker designs that mainly focuses on rather simple but truly effective designs.

Progress Indicators Examples

Form steps v2 by Ionut Zamfir

Form steps v2 by Ionut Zamfir break the monotony of classic and banal horizontal striped progress bars with the help of a circular form. It demonstrates an excellent use of textures and coloring as well as takes the advantage of divine roundness. This 3-step component embraces all the essential details, laying out them in an original manner.

Welcome Steps by Luke Beard

Welcome Steps by Luke Beard exploit vertical orientation that naturally guides users’ eyes from top to bottom. Thanks to skillfully applied embossed effect, the indicator perfectly cooperates with the textured environment and blends in. The liquid-inspired inner part along with glossy touches creates splendid artistic aesthetics.

UI Sliders by Ashish Thakkar

UI Sliders by Ashish Thakkar pull their identity from lush and intricate skeuomorphic style. The traditional horizontal progress bar looks fantastic. Tiny details such as subtle shadow that make the tooltip stand out from a canvas or shiny metallic button that draws the attention create the whole buzz.

Steps by Nadine Haardt

Steps by Nadine Haardt have a less realistic appearance than the component in the previous example, yet it also looks naturally inbuilt into the background. Grey and green nicely cooperate with each other while a subtle diagonal pattern adds zest. An idea of adding liquid-styled filling easily separates the component from the others.

Checkout page for Madein33 by David Cadusseau

Checkout page for Madein33 by David Cadusseau gets its beauty from a ribbon shape and some neatly crafted elegant ornamental details. Each step has a shape of a relatively huge arrow that points out the path. The artist leverages flat style to make it look clean and shadows to give an extra depth.

USCIS Case Tracker Widget by Sebastiaan de With

USCIS Case Tracker Widget by Sebastiaan de With has a serious personality and a casual language. The artist is managed to reproduce the proper atmosphere by using leather textures and decorative elements such as golden emblem or delicate cursive typography. The main part of the widget stays clean and easy to perceive. The embossed progress bar does not have any special traits, but it fits the theme.

Progress Steps by Justin Roberts

Progress Steps by Justin Roberts shine and magnetize with glossy and vibrant appearance. The component looks even a bit toxic because of a bright green tone. It utilizes a standard horizontal orientation to look more natural to the users.

Payment Gateway API: resources for developers

Payment Gateway API features a classic progress indicator with a polished and refined appearance that effectively embraces numerous stages of the payment process. Not only does the artist go for a time-tested layout to make the process more intuitive but he also uses color differentiation to visually separate checked and upcoming stages.

Form Step 2 by Pim Luiten

Form Step 2 by Pim Luiten looks nice and fresh. Grayish coloring recreates a businesslike feel while a splash of orange color puts the focus on the submit button and adds warmth. The artist utilizes skeuomorphic-inspired elements to give the widget more sophisticated and intricate look.

Steps left by Mihai Mări

Steps left by Mihai Mări have a breadcrumb-like appearance that thanks to a bright orange shade charges interface with the energy. The author utilizes three-tone coloring to clearly indicate various statuses of stages such as default, checked and unchecked. The shot also shows the component in action step by step.

1 2 3 Done! by Eryk Pastwa

The component manages to pull off elegance and delicacy with an ease. The component looks refined and subtle. Smooth lines and circular shapes recreate a marvelous appearance. Red color gives checked stages more dominant position and points out the progress right away.

Steps by Bruno Martins

Steps by Bruno Martins look much like the previous example. It is also a three-stage progress indicator where round shape sets the tone and underlies the aesthetics.  However, there is no accented color that will provide users with focus anchors. The author goes for a matching and seamless palette that makes it look modest and casual.

Flight Tracker for iPad by InnovationBox

Flight Tracker for iPad by InnovationBox pursues consistency in style and significantly supports the overall theme with its unique and original plane-like indicator. The widget has a glossy and slightly transparent background and uses deep blue to mimic glass surface. An arc styled path with round pointers contributes to the flight theme while semi-realistic metallic button serves as a nice finishing touch.

Checkout progress bar – Web UI by Jason Wu

The author demonstrates two versions of the design: the first one is the default and the second one shows the component with the completed stage. They differ from each other only in coloring. The first one is made in a soft combo of gray and beige while the second option derives smoothness and serenity from gorgeous turquoise. Subtle shadows and embossed effect add spice and enhance the appearance.

Schedule A Session by zee7

Schedule A Session by zee7 has a seamlessly inbuilt breadcrumb-styled progress bar that takes up not much space on the top and perfectly collaborate with the overall design. Green is used for passed stages, blue is for selected, and gray is for upcoming ones. The color palette is matching and the overall design is harmonious.

Step Process by Danny Keane

Step Process by Danny Keane utilizes a simple and ordinary layout and vertical orientation. The progress indicator is straightforward to users. Much like in the previous example, the artist uses three various shades: green, blue and gray, to strengthen difference among basic states.

Step 2 by Rareview

Step 2 by Rareview is a three-stage progress indicator that not only gets the most out of color differentiation but also makes skillful use of captions. The latter transforms from a number into a check sign when the stage is completed. The component has a smooth and fluid appearance and creates a distinct eye track due to arrow styled backdrops.

Order Steps by Gabriel Seabra

Order Steps by Gabriel Seabra naturally lead you through all stages. The progress bar has a neutral and calm color scheme in which green indicates completeness. Although it is ultra narrow, and there is no much free space,  yet the author is managed to embrace all the integral details and even enrich the aesthetics with ornamental details such as 3d dimensional feel and embossed touch.

Page 1 Page 2


  1. TimMH Feb 19, 6:50 pm

    There are some fantastic designs being shocased here, I can honestly say that it is quite difficult to choose a particular favourite, I do think that Horizontal progress bars are better for the majority of checkout situations, but vertical could be quite cool for a dynamic scrolling page.

  2. Patrick Feb 20, 4:04 am

    Excellent collection..great job in putting this together!

  3. Jonathan Feb 20, 10:59 am

    I didn’t read the whole article but I have to say I’m quite annoyed by the design of this website. I’m reading on my iPad and the font is definitly too small, and you let users no Choice about it as you prevent from zooming in! wtf?

    I really wanted to read this article, but your RSS feed just has an excerpt in it so I sadly had to go to this poor website.

    Great content I find here though from time to time.


  4. Arnold Feb 21, 9:27 pm

    A lot of really creative approaches to progress indicator designs. I especially like the unconventional “Form steps v2 by Ionut Zamfir” and clever “Flight Tracker for iPad by InnovationBox”.

    A great collection for design inspiration.


  5. Carol Mar 5, 12:35 am

    I dig these. I had been trying to work these into a site design with a complex search element, so maybe I can use some of these concepts. thanks!

  6. Matt Kreiling Oct 8, 7:16 pm

    I think this is a great collection, but I think the advice to always include the numbers of the steps is not good advice. The best practice, especially when the steps don’t map one to one (some steps are really multiple steps or longer than others). When you say something is a specific number of steps you may be lying to the user and frustrating their expectations.


Leave a Reply

* Minimum length: 20 characters

Download Web Design Freebies & Resources


You have Successfully Subscribed!