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

Welcome Steps by Luke Beard

UI Sliders by Ashish Thakkar

Steps by Nadine Haardt

Checkout page for Madein33 by David Cadusseau

USCIS Case Tracker Widget by Sebastiaan de With

Progress Steps by Justin Roberts

Payment Gateway API: resources for developers

Form Step 2 by Pim Luiten

Steps left by Mihai Mări

1 2 3 Done! by Eryk Pastwa

Steps by Bruno Martins

Flight Tracker for iPad by InnovationBox

Checkout progress bar – Web UI by Jason Wu

Schedule A Session by zee7

Step Process by Danny Keane

Step 2 by Rareview

Order Steps by Gabriel Seabra

Delivery Status by Wouter Bread&Pepper

Getting Started Wizard by Missy Titus

Steps by Tiago Camargo

Search Flight by Tanveer Junayed

Progress Trackers by Ondrej Lechan

Order Progress Tracker by Luci Rebecca

UI Kit – progress trackers by Afraz

Free Progress Indicators PSD Templates

As well as last time I am going to end up the showcase with a small collection of free PSD templates that will help you reconstruct your own process system or build something new upon existing base.

Progress Steps

Checkout Process Navigation

Progress Indicator Ideas by Jesse Dodds

Progress by Joshua Scott

Step Badge by Takamasa Matsumoto

Progress Tracker Bars

Breadcrumbs Navigation

Progress Bar

Rounded Three-Step Progress Bar

4 step process panel in 2 colors

Final step is completed…

If you want to improve your conversion rate, you should definitely start with a progress tracker that, as a rule, stands between you and your profit. Make it easy, understandable and unobtrusive and don’t forget about its appearance that also should attract and guide users visually.

What kind of design as a user you prefer? Do you want it to be as simple as possible or vice versa you don’t get distracted by graphical elements? Also, if you have other good examples of progress indicators tell us via comment form.