Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Progress Trackers in Web Design: Examples and Best Practices

When designing a large website, especially one that contains a store, you may be required to design a system for ordering online, or a multi-step process of another sort. Walking users through this process by making it easy and intuitive is key to helping increase conversion rates. Any frustration along the way may cause them to leave and pursue other options. Progress trackers are designed to help users through a multi-step process and it is vital that such trackers be well designed in order to keep users informed about what section they are currently on, what section they have completed, and what tasks remain.

In this article we will look at various uses of progress trackers and see how they’ve been implemented, what they are doing well, and what they are not doing well.

What are Progress Trackers? Link

You may not be familiar with the term ‘progress tracker’, also called a ‘progress indicator’ — but chances are good that you have encountered one at one time or another. They are used in online stores when placing an order, signing up to an online product or service, or even when booking a holiday online. Progress trackers guide the user through a number of steps in order to complete a specified process.

Progress Tracker Example1
An example of a progress tracker at Game2

The Difference Between Progress Trackers and Breadcrumbs Link

As we have detailed previously in Breadcrumbs In Web Design: Examples And Best Practices3, breadcrumbs are a way of enhancing navigation by revealing a user’s current location. Initially, breadcrumbs and progress trackers may seem very similar and in many ways they are, however, there are significant differences.

Breadcrumbs show you only where you have been (or what sections are above the current section in the application’s hierarchy), whereas progress trackers indicate a set path that a user follows to complete a specific task. Progress trackers show you not only where you are currently located, but also what steps you have previously taken, and what steps you are about to take.

Breadcrumbs Example4
Example of breadcrumbs at Coolspotters5

Progress trackers are best used when there is a specific goal to achieve. They are synonymous with conversion and are used as a way of improving usability — which is key when optimizing conversion rates6. Conversion is all about selling online so you will see a progress tracker in some form in almost every online store.

Now that we’ve reviewed what a progress tracker is, let’s look at situations that would require or even benefit from the implementation of a well-designed progress tracker.

Uses of Progress Trackers Link

As mentioned previously, progress trackers can be used in a variety of contexts. The following three are the most common.

1. Online Ordering
By far the most common application of progress trackers is in conjunction with online purchasing, since this usually involves multiple steps.

HMV Online Order Progress Tracker
The progress tracker used by HMV.
Etsy Progress Tracker7
The progress tracker used at Etsy8.

2. Feature Tour Guides
Progress trackers are also used to guide users through the features of online products and services, as demonstrated in the following examples:

Search Inside Video's Progress Tracker9
Progress tracker as used by Search Inside Video10.
Flickr's tour page11
Flickr’s tour page12 provides a look at the features of their service.

3. Multi-Step Forms
If a form requires a lot of user input, it may be best to split the form into multiple steps.

Livestream's Channel Creation Form
Livestream’s progress tracker design.
Buffalo's Project Planner Form
The progress tracker used on Buffalo’s Project Planner form

Best Practices in Progress Tracker Design Link

Indicating a Logical Progression
Most progress trackers are designed to display the steps from left to right. In most lands, people read from left to right, so it makes sense that progress trackers follow that pattern. That isn’t enough though — there has to be something that informs the user that they are performing a multi-step process.

Blockbuster's progress tracker13
Blockbuster14 have included both arrows and numbers in their progress

tracker, thus clearly communicating a logical progression.

Keeping the User Informed of their Location
One key aspect of good progress tracker design is keeping the user informed of where the user is in the process. This complements the logical progression because the user will know where they are in relation to where they have been, and what sections are to follow.

Urban Original's progress tracker15
Mr and Mrs Smith16 indicates the user’s current location by

clearly highlighting the current step and turning the arrow downwards.

Positioning
Since progress trackers are a form of navigation, it is best to place them below the primary and secondary navigation (such as breadcrumbs) and above the content that the progress tracker relates to. Also, while a progress tracker can act as a page title, it is best to place the title of the current section underneath the progress tracker, to reinforce the current location.

Gamestation's progress tracker
Gamestation places their progress

tracker clearly below the primary and secondary navigation.

Implementations of Progress Trackers Link

Plain Text
Below is an example of a plain text progress tracker on Media Temple’s website17. One benefit of a plain text progress tracker is that it can be edited easily.

Media Temple's Progress Tracker

Sprite-Based
Sovereign18 uses the popular CSS sprites technique to build their progress tracker and reduce HTTP requests going through the online booking process.

Sovereign sprite image

Design Mistakes to Avoid Link

Indistinguishable from Breadcrumbs
TypePad’s Design Assistant can be very easily confused with a breadcrumb navigation system.

TypePad Design Assistant

Not Enough Information
easyJet19‘s old progress tracker on their booking path was poorly executed. Although it gave you the total number of steps in the process, it didn’t indicate which steps you’ve completed or which were remaining.

easyJet's Old Booking Path

Their new progress tracker, launched within the last few weeks, is a big improvement, indicating current location, past steps, and steps to come. They now also make good use of the page title which has descriptive wording to complement the current progress tracker label.

Easyjet's New Booking Path

No Sense of Progression
daniblack20 incorrectly uses a tab system for their progress tracker. The problem with this is that tabs don’t offer any visual representation of progress. The addition of numbers or arrows would give at least some sort of indication of progression in this example.

Progress tracker on daniblack

Progress Tracker Showcase Link

Now that we know what a progress tracker is, how it is used, and the best approach to its design, let’s look at a number of well-designed progress trackers currently in use.

Battle.net uses the method of incrementally filling a bar as you progress through the steps in their sign-up form.

Battle.net's progress tracker

Ikea21

Ikea's progress tracker

Amazon22 has a shopping trolley travelling across their progress tracker, leaving an orange line marking where it has been.

Amazon's progress tracker

Organic Supermarket23

Organic Supermarket's progress tracker

Threadless24

Threadless' progress tracker

Urban Originals25

Urban Original's progress tracker

Firebox26

Firebox's progress tracker

Apple27

Apple's progress tracker

Vitradirect28

Vitradirect's progress tracker

Mouse to Minx29

Mouse to Minx's progress tracker

CafePress30

CafePress's progress tracker

Topshop31

Topshop's progress tracker

John Lewis32 uses an image of a truck travelling along their progress tracker.

John Lewis's progress tracker

Comet33 ticks off sections that have already been completed.

Comet's progress tracker

Boots’ Progress tracker spans the width of the page.

Boots' progress tracker

Web MD34 uses a progress bar and percentage values as a way of tracking progress on their health check questionnaires.

Web MD's progress tracker

Argos35

Argos' progress tracker

Altrec36

Altrec's progress tracker

SurfRide37

SurfRide's progress tracker

iWorkwear38

iWorkwear's progress tracker

Zumiez39

Zumiez's progress tracker

Toys”R”Us40

Toys"R"Us' progress tracker

eBags41

eBags' progress tracker

Foot Locker42

Foot Locker's progress tracker

The Ultimate Green Store43

The Ultimate Green Store's progress tracker

Crate and Barrel44

Crate and Barrel's progress tracker

Pistol Clothing45

Pistol Clothing's progress tracker

American Apparel46

American Apparel's progress tracker

PC World47

PC World's progress tracker

Abel & Cole48

Abel and Cole's progress tracker

Ecco USA49

Ecco USA's progress tracker

Design Public50

Design Public's progress tracker

Golfsmith51 uses a combination of numbers and a progress bar with an arrow.

Golfsmith's progress tracker

PETCO52

PETCO's progress tracker

Football Fanatics53

Football Fanatics' progress tracker

The Habitat Company54

The Habitat Company's progress tracker

Walton Garden Buildings55

Walton Garden Buildings' progress tracker

lookfantastic56 uses icons to visually enhance their progress tracker.

lookfantastic's progress tracker

B&Q57

B&Q's progress tracker

You may be interested in the following related posts:

Footnotes Link

  1. 1 http://www.game.co.uk/
  2. 2 http://www.game.co.uk
  3. 3 https://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/
  4. 4 http://coolspotters.com/musicians/michael-jackson/and/albums/thriller
  5. 5 http://coolspotters.com
  6. 6 https://www.smashingmagazine.com/2009/05/15/optimizing-conversion-rates-its-all-about-usability/
  7. 7 https://www.etsy.com
  8. 8 https://www.etsy.com
  9. 9 http://searchinsidevideo.com
  10. 10 http://searchinsidevideo.com
  11. 11 http://www.flickr.com/tour/
  12. 12 http://www.flickr.com/tour/
  13. 13 http://www.blockbuster.com
  14. 14 http://www.blockbuster.com
  15. 15 http://www.mrandmrssmith.com/
  16. 16 http://www.mrandmrssmith.com/
  17. 17 http://mediatemple.net
  18. 18 http://mediatemple.net
  19. 19 http://www.sovereign.com
  20. 20 http://easyjet.com
  21. 21 http://battle.net
  22. 22 http://www.ikea.com
  23. 23 http://www.amazon.com/
  24. 24 http://www.organicsupermarket.ie/
  25. 25 http://www.threadless.com/
  26. 26 http://www.uo.com.au/
  27. 27 http://firebox.com/
  28. 28 http://www.apple.com/
  29. 29 http://www.vitradirect.com/
  30. 30 http://www.mousetominx.co.uk/
  31. 31 http://www.cafepress.co.uk/
  32. 32 http://www.topshop.com/
  33. 33 http://johnlewis.com/
  34. 34 http://www.boots.com/
  35. 35 http://www.webmd.com/diet/weight-loss-surgery/weight-loss-surgery-health-check/default.htm
  36. 36 http://www.argos.co.uk/
  37. 37 http://www.altrec.com/
  38. 38 https://www.surfride.com
  39. 39 http://www.iworkwear.nl
  40. 40 https://www.zumiez.com
  41. 41 http://www.toysrus.com
  42. 42 http://www.ebags.com
  43. 43 http://www.footlocker.com
  44. 44 http://www.theultimategreenstore.com
  45. 45 http://www.crateandbarrel.com
  46. 46 http://www.pistolclothing.com.au
  47. 47 http://www.americanapparel.com
  48. 48 http://www.pcworld.co.uk
  49. 49 http://www.abelandcole.co.uk
  50. 50 http://www.eccousa.com
  51. 51 http://www.designpublic.com
  52. 52 http://www.golfsmith.com
  53. 53 http://www.petco.com
  54. 54 http://www.footballfanatics.com
  55. 55 http://www.habitat.com
  56. 56 http://www.waltons.co.uk
  57. 57 http://www.lookfantastic.com
  58. 58 http://www.diy.com
  59. 59 https://www.smashingmagazine.com/2009/11/10/designing-coming-soon-pages/
  60. 60 https://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/
  61. 61 https://www.smashingmagazine.com/2009/09/28/search-results-design-best-practices-and-design-patterns/

↑ Back to top Tweet itShare on Facebook

Advertisement

Tom Kenny is a web designer who runs a web design & development blog called Inspect Element where he writes about everything he learns about web design and you can follow him on Twitter.

  1. 1

    Design Informer

    January 15, 2010 2:54 am

    Great extensive collection! Will definitely be useful for some of my projects at work. I will be going back here for some tracker inspiration. Nice tips as well.

    4
    • 2

      Design Informer

      January 15, 2010 10:38 am

      Oh, and I would like to add that the article would have been even better with actual, coded examples and how-to’s. Still though, nice post Tom!

      6
  2. 3

    Nice collection!

    3
  3. 4

    Myrnalyn Castillo

    January 15, 2010 3:18 am

    Great tips and examples! I definitely bookmarked this post for future reference!

    10
  4. 5

    Good collection. I’m planning a web app now.. It’s a great help for me.Keep up :)

    -2
  5. 6

    This not really related to this specific article but to all your articles including showcases. I’m wondering you go about finding all examples? Do you tell more people to go around the internet and look for examples or do you do it yourself? How long does it take you? Do you just browse normally and write down what you happen to find over a long period of time, or do you just search every page only for the purpose of the showcase during a few hours? I’m asking because I plan to do a couple of showcases myself for my uni course. Thanks!

    40
  6. 7

    Hello. What is the name of “Buffalo’s Project Planner” script? I would like something like that but I don’t know how to search for it. Thank you very much.

    36
  7. 8

    I think, i’m too much siting on SM. I just cannot find anything so much amazing and wonderful like at begin when i was just “OMFG!!oneone111 THATS AWESOME” i need break lol. So i will finally read SM book that i already got from few weeks:D

    1
  8. 9

    Great Post – nice examples! Here is another css progressbar:
    http://www.kollermedia.at/archive/2008/03/31/easy-css-progress-bar/

    1
  9. 10

    I think most of these recommendations should be known to every webdesigner anyway. But thank you for the showcase of some progress trackers, this provides some good inspiration.

    -1
  10. 11

    Thank you for a refreshingly original article, excellent.

    0
  11. 12

    very nice collection… that gives a lot of inspiration :)
    thank you!

    0
  12. 13

    What a timing !
    I´m just in the middle of creating a store progress, thanks a lot !

    0
  13. 14

    WOW.. thanks a lot.. i was looking for the same article.. :)

    0
  14. 15

    Thanks for the post Tom. I too am in the middle of a project where the client wanted a progress bar/tracker so this is great. By the way…Inspect Element is a superb blog…

    0
  15. 16

    If a progress tracker truly represents a linear process, then I think visually you really need to ensure that it doesn’t appear to be another set of links. The examples above that gray out future steps, and that actually use the word “step” seem to do the best job IMO.

    0
  16. 17

    Perfect timing. I was just sitting down to design a form with several progressions. This is also a great tool to show the client. Thanks!

    0
  17. 18

    Great post! In my society (french!), we used to call progress trackers “petit poucet”, like in the fairy tale http://en.wikipedia.org/wiki/Hop_o%27_My_Thumb … beacause of the analogy of bread pieces/informations links. “Progress tracker” is definitely more pro! :) Thanks!

    0
  18. 19

    Thanks for sharing
    You have a great list. I just can’t stop drooling.

    1
  19. 20
  20. 21

    Gonzalo González Mora

    January 15, 2010 9:28 am

    One important aspect that is missing in the article which I learned from Luke Wroblewski’s book “Web Form Design: Filling in the Blanks” (great book, by the way, it’s a must-read for any web designer) is not setting false expectations in what regards the number of steps.

    Many websites set a few number of steps, but when you actually go through the form a 3-step form turns into a 6-step (or more) one. For example, in the “Payment” step, instead of being one page, you first have to choose a method of payment, then you’re redirected to another site (i.e. Paypal), then you have to login in that site, after that you have to review the payment and make the purchase, and only then you’re taken back to the original “3-step” form. This turns a step into four. Another example (in the book), is selecting the shipping address. If the address was not added before, you have to add it and then select it, this step suddenly becomes two.

    Amazon did that, and then did removed the number of steps and just show “areas” in the form process (types of information that you’ll need to provide, as Luke states), avoiding setting false expectations which can frustrate the user.

    2
    • 22

      I will tell you why we do it that way, I run a small hosting company and i will give you the steps it takes for us.

      12 steps:
      Service selection -> domain -> domain configuration -> service configuration -> order review -> sign in/up -> payment gateway -> [gateway:: signin/up -> review payment -> card entry/account selection -> confirm payment] -> order complete

      You shouldn’t be including all the payment steps unless those are done on your own website. Just add in “payment” the gateways steps should be shown by the gateway they are not your concern.

      8 steps:
      Service -> domain -> domain configuration -> service configuration -> order review -> sign in/up -> payment -> order complete

      This is a long process, but as long as the person filling the form is an average internet user it still only takes about 5 – 10 minutes. Its also a good idea to give an estimate of how long the order form takes to complete. There are a lot of things you can do to aid in the speed of the process too, Things like focusing the next form field if the majority of your form supports it, If not, then use tab index to make sure your form flows properly when the user presses the tab button.

      Also make sure your form used standard naming, this will allow browsers with auto form complete to fill out the user data.

      1

↑ Back to top