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.
Checkout Process Navigation
Progress Indicator Ideas by Jesse Dodds
Progress by Joshua Scott
Step Badge by Takamasa Matsumoto
Progress Tracker Bars
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.