Progress Trackers in Web Design: Examples and Best Practices

Advertisement

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?

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

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

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 Tracker7
The progress tracker used by HMV8.

Etsy Progress Tracker9
The progress tracker used at Etsy10.

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 Tracker11
Progress tracker as used by Search Inside Video12.

Flickr's tour page13
Flickr’s tour page14 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 Form15
Livestream’s16 progress tracker design.

Buffalo's Project Planner Form17
The progress tracker used on Buffalo’s Project Planner form18

Best Practices in Progress Tracker Design

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 tracker19
Blockbuster20 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 tracker21
Mr and Mrs Smith22 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 tracker23
Gamestation24 places their progress tracker clearly below the primary and secondary navigation.

Implementations of Progress Trackers

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

Media Temple's Progress Tracker26

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

Sovereign sprite image28

Design Mistakes to Avoid

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

TypePad Design Assistant30

Not Enough Information
easyJet31‘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 Path32

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 Path33

No Sense of Progression
daniblack34 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 daniblack35

Progress Tracker Showcase

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.net36 uses the method of incrementally filling a bar as you progress through the steps in their sign-up form.

Battle.net's progress tracker37

Ikea38

Ikea's progress tracker39

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

Amazon's progress tracker41

Organic Supermarket42

Organic Supermarket's progress tracker43

Threadless44

Threadless' progress tracker45

Urban Originals46

Urban Original's progress tracker47

Firebox48

Firebox's progress tracker49

Apple50

Apple's progress tracker51

Vitradirect52

Vitradirect's progress tracker53

Mouse to Minx54

Mouse to Minx's progress tracker55

CafePress56

CafePress's progress tracker57

Topshop58

Topshop's progress tracker59

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

John Lewis's progress tracker61

Comet62 ticks off sections that have already been completed.

Comet's progress tracker63

Boots64‘ Progress tracker spans the width of the page.

Boots' progress tracker65

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

Web MD's progress tracker67

Argos68

Argos' progress tracker69

Altrec70

Altrec's progress tracker71

SurfRide72

SurfRide's progress tracker73

iWorkwear74

iWorkwear's progress tracker75

Zumiez76

Zumiez's progress tracker77

Toys”R”Us78

Toys"R"Us' progress tracker79

eBags80

eBags' progress tracker81

Foot Locker82

Foot Locker's progress tracker83

The Ultimate Green Store84

The Ultimate Green Store's progress tracker85

Crate and Barrel86

Crate and Barrel's progress tracker87

Pistol Clothing88

Pistol Clothing's progress tracker89

American Apparel90

American Apparel's progress tracker91

PC World92

PC World's progress tracker93

Abel & Cole94

Abel and Cole's progress tracker95

Ecco USA96

Ecco USA's progress tracker97

Design Public98

Design Public's progress tracker99

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

Golfsmith's progress tracker101

PETCO102

PETCO's progress tracker103

Football Fanatics104

Football Fanatics' progress tracker105

The Habitat Company106

The Habitat Company's progress tracker107

Walton Garden Buildings108

Walton Garden Buildings' progress tracker109

lookfantastic110 uses icons to visually enhance their progress tracker.

lookfantastic's progress tracker111

B&Q112

B&Q's progress tracker113

Related posts

You may be interested in the following related posts:

Footnotes

  1. 1 http://www.game.co.uk/
  2. 2 http://www.game.co.uk
  3. 3 http://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 http://www.smashingmagazine.com/2009/05/15/optimizing-conversion-rates-its-all-about-usability/
  7. 7 https://hmv.com/hmvweb/checkoutRegister.do
  8. 8 https://hmv.com/hmvweb/checkoutRegister.do
  9. 9 https://www.etsy.com
  10. 10 https://www.etsy.com
  11. 11 http://searchinsidevideo.com
  12. 12 http://searchinsidevideo.com
  13. 13 http://www.flickr.com/tour/
  14. 14 http://www.flickr.com/tour/
  15. 15 https://secure.livestream.com/myaccount/launchchannel
  16. 16 https://secure.livestream.com/myaccount/launchchannel
  17. 17 http://planner.builtbybuffalo.com/step-1/
  18. 18 http://planner.builtbybuffalo.com/step-1/
  19. 19 http://www.blockbuster.com
  20. 20 http://www.blockbuster.com
  21. 21 http://www.mrandmrssmith.com/
  22. 22 http://www.mrandmrssmith.com/
  23. 23 https://www.gamestation.co.uk/Checkout/Basket/
  24. 24 https://www.gamestation.co.uk/Checkout/Basket/
  25. 25 http://mediatemple.net
  26. 26 http://mediatemple.net
  27. 27 http://www.sovereign.com
  28. 28 http://www.sovereign.com
  29. 29 http://www.typepad.com/go/design-assistant/
  30. 30 http://www.typepad.com/go/design-assistant/
  31. 31 http://easyjet.com
  32. 32 http://easyjet.com
  33. 33 http://easyjet.com
  34. 34 http://www.daniblack.com
  35. 35 http://www.daniblack.com
  36. 36 http://battle.net
  37. 37 http://battle.net
  38. 38 http://www.ikea.com
  39. 39 http://www.ikea.com
  40. 40 http://www.amazon.com/
  41. 41 http://www.amazon.com/
  42. 42 http://www.organicsupermarket.ie/
  43. 43 http://www.organicsupermarket.ie/
  44. 44 http://www.threadless.com/
  45. 45 http://www.threadless.com/
  46. 46 http://www.uo.com.au/
  47. 47 http://www.uo.com.au/
  48. 48 http://firebox.com/
  49. 49 http://firebox.com/
  50. 50 http://www.apple.com/
  51. 51 http://www.apple.com/
  52. 52 http://www.vitradirect.com/
  53. 53 http://www.vitradirect.com/
  54. 54 http://www.mousetominx.co.uk/
  55. 55 http://www.mousetominx.co.uk/
  56. 56 http://www.cafepress.co.uk/
  57. 57 http://www.cafepress.co.uk/
  58. 58 http://www.topshop.com/
  59. 59 http://www.topshop.com/
  60. 60 http://johnlewis.com/
  61. 61 http://johnlewis.com/
  62. 62 http://comet.co.uk/
  63. 63 http://comet.co.uk/
  64. 64 http://www.boots.com/
  65. 65 http://www.boots.com/
  66. 66 http://www.webmd.com/diet/weight-loss-surgery/weight-loss-surgery-health-check/default.htm
  67. 67 http://www.webmd.com/diet/weight-loss-surgery/weight-loss-surgery-health-check/default.htm
  68. 68 http://www.argos.co.uk/
  69. 69 http://www.argos.co.uk/
  70. 70 http://www.altrec.com/
  71. 71 http://www.altrec.com/
  72. 72 https://www.surfride.com
  73. 73 https://www.surfride.com
  74. 74 http://www.iworkwear.nl
  75. 75 http://www.iworkwear.nl
  76. 76 http://www.zumiez.com
  77. 77 https://www.zumiez.com
  78. 78 http://www.toysrus.com
  79. 79 http://www.toysrus.com
  80. 80 http://www.ebags.com
  81. 81 http://www.ebags.com
  82. 82 http://www.footlocker.com
  83. 83 http://www.footlocker.com
  84. 84 http://www.theultimategreenstore.com
  85. 85 http://www.theultimategreenstore.com
  86. 86 http://www.crateandbarrel.com
  87. 87 http://www.crateandbarrel.com
  88. 88 http://www.pistolclothing.com.au
  89. 89 http://www.pistolclothing.com.au
  90. 90 http://www.americanapparel.com
  91. 91 http://www.americanapparel.com
  92. 92 http://www.pcworld.co.uk
  93. 93 http://www.pcworld.co.uk
  94. 94 http://www.abelandcole.co.uk
  95. 95 http://www.abelandcole.co.uk
  96. 96 http://www.eccousa.com
  97. 97 http://www.eccousa.com
  98. 98 http://www.designpublic.com
  99. 99 http://www.designpublic.com
  100. 100 http://www.golfsmith.com
  101. 101 http://www.golfsmith.com
  102. 102 http://www.petco.com
  103. 103 http://www.petco.com
  104. 104 http://www.footballfanatics.com
  105. 105 http://www.footballfanatics.com
  106. 106 http://www.habitat.com
  107. 107 http://www.habitat.com
  108. 108 http://www.waltons.co.uk
  109. 109 http://www.waltons.co.uk
  110. 110 http://www.lookfantastic.com
  111. 111 http://www.lookfantastic.com
  112. 112 http://www.diy.com
  113. 113 http://www.diy.com
  114. 114 http://www.smashingmagazine.com/2010/01/04/showcase-of-modern-navigation-design-trends/
  115. 115 http://www.smashingmagazine.com/2009/11/10/designing-coming-soon-pages/
  116. 116 http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/
  117. 117 http://www.smashingmagazine.com/2009/09/28/search-results-design-best-practices-and-design-patterns/

↑ Back to topShare on Twitter

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.

Advertising
  1. 1

    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

      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!

    11
  4. 5

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

    -3
  5. 6

    Hi, I’ve added our a link to our own Checkout Progress UI. It’s vertical so a little different from those above while still following your ebst practive rules.

    http://img42.imageshack.us/img42/7987/navprogress.gif

    Site still under construction so mind the bugs!

    -4
  6. 7

    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!

    39
  7. 8

    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
  8. 9

    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
  9. 10

    Thank you for a refreshingly original article, excellent.

    0
  10. 11

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

    0
  11. 12

    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

    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 – nice examples! Here is another css progressbar:
    http://www.kollermedia.at/archive/2008/03/31/easy-css-progress-bar/

    0
  18. 19

    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
  19. 20
    • 21

      That is a great solution, however it’s not really a regular progress tracker as it doesn’t show you what you’ve done and what’s left for you to do, but rather what the chef is doing. Nevertheless, it could be mentioned at the end since it’s so nice :D

      0
    • 22

      Giles Van Gruisen

      January 15, 2010 7:02 pm

      Good call. When I saw the title, the first thing I did was go to the article, and cmd+f search for “Dominos.”

      Man, that’s some good pizza.

      0
  20. 23

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

    1
  21. 24
  22. 25

    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
    • 26

      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
  23. 27

    Another application of the progress tracker that I find useful is for carousels. I find it nice to know for example, how many images there are in the carousel while I am clicking through them. Great showcase!

    0
  24. 28

    I think Sovereign could save a lot of bandwidth by trimming down their sprite. They’re repeating several of the same state. You should only use/need 1 instance of each state.

    1
  25. 29

    Another great example of progress tracker that is actually simple.

    https://anamo.eu/checkout/shipping

    0
  26. 30

    thanks a lot Tom for this great post!

    0
  27. 31
  28. 32

    Eko Setiawan | camp26

    January 15, 2010 9:54 pm

    Hi, this great article for me…I am new to the term Progress Tracker, I’ve often seen at some sites, but did not know the term.
    Thanks…

    0
  29. 33

    very informational post

    0
  30. 34

    Just these days I’m working on a website with trackers. Really good timing for my lack of inspiration. Great collection. Thanks!

    0
  31. 35

    nice post

    0
  32. 36

    well…well
    its a great info … btw what for is this…:D

    0
  33. 37

    Thanks for the article! Before reading it I didn’t know the difference between breadcrumbs and progress trackers. I also enjoyed the showcase; the tracker for lookfantastic was my favorite.

    0
  34. 38

    This is really useful, especially for wordpress designers, i just used one of them,this is my blog

    0
  35. 39

    CommerceStyle.com

    January 16, 2010 8:14 pm

    Great article. Thanks!

    0
  36. 40

    I like that case study. Especially the convergence between easyJet’s old and new progress tracker impressed me. Seems like you planned that article, didn’t you? :) Great one!

    0
  37. 41

    Great examples!

    Any ideas for progress indicators that branche of in different tracks?
    If a user selects a certain option that provides an extra step, should you show this option in advance?

    Any help or insight would be appreciated!

    gr,

    Paul

    0
  38. 42

    Great article and loads of examples!

    0
  39. 43

    Great overview article. It would have been nice to see some information on when to use small vs. large progress trackers and suggestions on how to choose wording for each step of the tracker. Possibly also include suggested lengths of progress trackers.

    0
  40. 44

    Great article, very useful.

    0
  41. 45

    Awesome article. I really wish more sites would start incorporating progress trackers in multi part forms.

    0
  42. 46

    Awesome article. I really wish more sites would start incorporating progress trackers in multi part forms.

    0
  43. 47

    Thanks for this awesome article. The information in this thing is priceless. Smashing Mag is the best hands down!

    0
  44. 48

    [Offtopic: by the way, did you already get your copy of the brand new Smashing Book?]

    No.

    0
  45. 49

    Nice….

    0
  46. 50

    QUE PASA CON EL CHORISO NITROKING ERMANO

    0
  47. 51

    nice article, thank you very much :)

    0
  48. 52

    Perfect, just what I was looking for – thank you. Saved me hours…

    0
  49. 53

    These are great, but they go from one end directly to the other. What if in between step 2 and 3, you may need to add a couple additional steps between. For example, step 2 selects user, step 3 contacts user. What if you dont find the user in step 2, and you need to add a couple extra steps in between step 2 and 3. How can you show that changed additional progress tracker?
    I tried a few things, but nothing looks good… Any help would be appreciated.

    0
  50. 54

    Great Post!!!

    I might use it on this site canvas4life.co.uk/

    0
  51. 55

    Some good websites on there; I particularly like Ikea. My top three sites (from a design perspective) are,http://www.mypure.co.uk, http://www.wantthelook.com and http://www.nativeskatestore.co.uk

    -2
  52. 56

    Very good and useful information. Thanks.

    1
  53. 57

    Nice. Useful information.

    0
  54. 58

    hi….I want the coding for tracking visitor details…..reply with a solution for this soon…i’m waiting for this

    -6
  55. 60

    Hmm… I really hoped to see some vertical tracker examples… :(

    0
  56. 61

    so many good ones to choose from. nice work – I think the sprite based holiday one might work for my site holidaystotenerife

    0
  57. 62

    so many good ones to choose from. nice work – I think the sprite based holiday one might work for my site holidaystotenerife

    1
  58. 63

    Nice. Useful information.

    1
  59. 64

    I saw a good example of a step by step cart at notebooks.thegoodguys.com.au/

    0
  60. 65

    That was really useful. Thanks very much. I am currently making a website, and the timing of finding this post was nothing short of impeccable.

    0
  61. 66

    That was really useful

    0
  62. 67

    Hi,

    I have seen on a couple of sites where they have a main progress bar showing about 4-5 main steps and then a separate progress bar for the 3 step checkout process. I think they figured it would minimize any exits once they are in the purchase phase since the progress bar doubled as navigation allowing the user to go back.

    There were Back buttons in the purchase pages to go back but that’s really the only way to exit the purchase process. It makes sense but I think there can be arguments for either showing the full progress bar all the way through or showing just the checkout progress bar in the purchase pages.

    Anyone have thoughts on this technique?

    0
  63. 68

    We were advised to implement breadcrumb navigation and progress tracking by our search engine optimisation consultant. Although we went ahead with the breadcrumb navigation we did not implement progress tracking as we could not see the point in doing both.

    Your blog has been very informative and l like the visual examples used, certainly something we will have to discuss with our website designer.

    0
  64. 69

    Just what I was looking for. Thanks for such a great collection!

    0
  65. 70

    My site has a vertical tabbed checkout which can be expanded to see the contents when each step is complete. I read about this and thought that it was a good practice. But I find that there are an awful lot of people starting the form and leaving the page. It comes with the CMS but i guess i can research on how to change it.

    Can i get some views on if this is because of the actual navigation of the form or something else? I thought may be they are looking to check the delivery price and thats why they start the form. But you can check the price without starting the form.

    site: tinytoys.com.au

    0
  66. 71

    I’ve seen an increasing number of these systems recently, but not all of them work very well. Quite a lot of them show you where you are in the checkout process, but don’t allow you to go back and edit information you may have entered incorrectly. One of my regular online stores – http://www.graingergames.co.uk – doesn’t use this at the minute, but will hopefully be incorporating it in their new site. It should be more commonplace in e-commerce by now.

    0
  67. 72

    This is a great roundup! Thanks so much for sharing. It seems that keeping the user informed of the steps left helps to increase conversion. From what we have tested at http://www.clockdiscount.com/ this seems to be the best for increasing conversion rates.

    I’d love to know what is the ideal number of steps for a checkout process though.

    Cheers,
    Karlsson

    0
  68. 73

    Digital Thermometer

    June 21, 2011 4:39 pm

    This is my job, and i am so sorry

    0
  69. 74
  70. 75

    Nice selection you collected. But what to use on a single page checkout? We are redesigning fabfive24.com and thinking to incorporate the single page checkout instead of the 3 or 4-way checkout. Any Idea´s?

    0
  71. 76

    good post ,i like

    0
  72. 77

    very interesting tracker showcase, if we don’t have a tracker showcase in the canvashandbagshop, will people buy the product?

    0
  73. 78

    I am very interested in sports ,such as golf clubs and basketball.http//:www.1000golf.com.this seems to be a good place which worth your coming.

    -1
  74. 79

    If it is not swept Arsenal in Virginia Baker (microblogging) Matt Hasselbeck Jersey battle injuries in thehttp://www.nfljerseysraiders.com/ accident, Hernandez does not know when to back the team will behttp://www.nfljerseysraiders.com/ the main front of the battle flag. Away to Bolton’s game, the Mike Williams Jersey small pea competitors seize the chance of injury, the first time thehttp://www.nfljerseysraiders.com/ new season debut as the main players, Mexico Sidney Rice Jersey Lightning quickly

    -1
  75. 80

    Very nice article! Thanks for that! I was looking for the right name for this process for a long time, untill I finally found out that it’s called “progress indicator or progress tracker” (thanks to the book of Luke Wroblewski “Web Form Design: Filling in the Blanks”).

    What do you think of the possibility to jump between steps within a progress tracker? Do you think this is usefull and adds value? I personaly think it does. I experience too often that it’s not possible and find it very annoying when I, for example, want to recheck my details in the first step and I need to press previous a lot of times because I can’t jump to step 1 immediatly (and then I need to fill in the next steps again sometimes!).
    Next to that, would you display a different state (visually) of the step the user already completed and returns to this step?

    Thanks in advance!

    0
  76. 81

    This is a great article! Excellent content and examples of what works and what doesnt!

    0
  77. 82

    hi
    that’s a nice collection of the progress truckers. I need to implement for my website http://www.oxwebs.com as these are really essential to show the user where they are in the process.

    0
  78. 83

    We find that the progress bar preference changes from time to time. Sometimes a one page checkout works and sometimes it works better one page at a time.

    We used to think that it was the cost of the item or if the item was a high involvement product or low involvement product, but it really depends on where the customer is in the buying channel.

    There has also been talk that the checkout is like an approaching climax for a wanted item in some cases where each page in enjoyable, and in other cases its something you want to get done before you forget, or before your boss realizes you are shopping on your smartphone at work.

    anyway, our checkout can be found at daftgadgets.com/

    0
  79. 84

    I am currently trying to redesign my basket – for my site http://thecampingoutlet.co.uk/

    I have always likes http://www.ebuyer.com/ basket but the above article has given me a lot to think about – I think it may be back to the drawing board – but I would like to thank Tom for creating such a great article which has really got me thinking – and really putting my customer first and giving them the best experience

    0
  80. 85

    Hello,

    I have a pretty uncommon situation with a ‘branched’ multi page form. Let me try to show you the page flow in a simple text form:

    ###### _ yes — Step 2 — Step 3 — Step 4 — Step 5
    ######|
    Step 1 +
    ###### |_ no —- Step 2 — Step 3

    (# are for ‘formatting’)

    So, depending on users choice at step 1 he will have to fill 5 or 3 Steps in total. Those following steps are, except for the “destination page” completely different.

    How would you experts visualize this without irritating the user?

    With kind regards,
    Henning

    0
  81. 86

    So, when implementing a progress tracker – is it best practice to keep a step highlighted as “completed” even if users can navigate back to a prior step? Or would it be correct to unhighlight steps that have been completed when navigating backwards?

    1
  82. 87

    I find highlighting the steps taken as “completed” a good approach. I don’t think you should unhighlight steps when navigating backwards if they are still valid even with a modification in a previous step.

    0
  83. 88

    Thank you so much for giving ideas to create progress indicators…

    0
  84. 89

    especially one that contains a store, you may be required to Progress trackers show you not only where you are currently located, but also what steps you have previously taken,

    0
  85. 90

    The post is almost four years old but still actual
    Thanks you. It will help me with my website
    http://www.gadgets-n-gifts.com

    0
  86. 91

    Superb article – not only a good explanation of the subject but lots of design examples as well. Thank you.

    0

↑ Back to top