How NOT to Use Progress Bars & Counters

Author 
Shane Melaugh   51

Updated on December 23, 2019

This post is a public service announcement. We must stop the widespread abuse of progress bars and animated counters and only YOU can make a difference!

We recently introduced progress bars, animated counters and fill counters as new design elements (short codes) in all our themes. These elements can be useful additions to a conversion-focused website, but they can also be horribly mis-used. In fact, I have so far almost exclusively seen really, really bad examples of how to implement these elements on sites and landing pages.

Watch the video below to see the common mistakes you need to avoid (and what to do instead):

More...

Let’s look at a couple of examples where it’s adequate to use progress bars, animated progress bars or fill counters:

  • In the video, I presented the results of a speed test of the first Thrive Theme and some of my previous themes. As you can see, a visual representation of the results makes it easier for the reader to understand which theme is the fastest.
A progress bar to show the results of a speed test
  • If you want to create a product comparison page, a product review page, a case study, or anything similar, pick quantifiable features of the products you know your readers care about and compare those data on a progress bar. This visual comparison will help them decide which of these products is the right one for them.
An example of a bar counter used correctly in a product comparison
  • If you have a multistep signup or purchase process that goes over several pages, you can place a progress bar on the top of the page that helps people see where they are in the process.
A progress bar at the top of a multistep signup/purchase sequence

The underlying principle here is, as often: don’t use a feature just for the sake of using it. Don’t try to come up with an idea that justifies adding a nicely animated bar to your page. Instead, figure out what elements will convert more visitors and then use the tools available to best do the job.

If you enjoyed this video, please share this post! If you have any questions or thoughts you want to share, please leave a comment below.

Shane

by Shane Melaugh  August 21, 2014

51

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.

Enjoyed this article ?

You might also like:

Leave a Comment

  • Hi Shane,

    Great video, I didn’t even realize but it totally makes sense! Actually, I am using the bars right in websites, but I was about to misuse them in resume templates (I am creating a bunch to sell). Modern “designer” resume templates have all sort of skill bars, and in reality everything is relative so you might give the employer a reason to think you suck at a particular skill just because is not as strong as your stronger one.

    That said, what would be the right way to represent them? Not just for personal skills, but for products as well. Say I have product A and product B, they are essentially different but they overlap in a few features and each one of them are stronger in some of them as compared to the other product. How to portrait their differences in the best way for a potential customer?

    • You present them without comparing or quantifying them. You don’t say “I’m better at design than HTML”. Instead, you explain what’s uniquely brilliant about your design skills. And then you explain what’s uniquely brilliant about your HTML skills.

      With overlapping products or services, state which one is best for which purpose or archetype. “If you’re this kind of person, get product A.”

  • Hey Shane, just wanted to let you know I loved all the tips you explained on video. It’s so easy to jump onboard with all these new fancy progress bars and shoot ourselves in the foot when we think we are looking “cool” to our customer base, clients and prospects.

    Really nice to see what REALLY matters and how to use these properly, great job man, thanks!

    Sergio.

  • Hi Shane.
    What plugin do you use in order to get the ” Notify me of follow-up comments by email.” option at the end of article?

    I don’t find it in TT theme 🙁

    • Hey Flavius

      It is not part of any TT Theme.

      2 Options which Shawn has recommended before.
      – “Subscribe to Comments Reloaded” plugin (which I use)
      – WP Jetpack plugin (which also includes the kitchen sink ;))

      Regards
      Paul

  • Shane this was so valuable. Gave me some ideas and changes I need to make to a sales page. Thank you very much! Love all the great value you bring.

  • Shane thank you for such concise and clear insight. I am loving using your themes and TCB and it keeps getting better.
    Every video I watch of yours fills me with gratitude that someone is doing it right and with the right focus on conversions and engagement and not trinkets and flashy things just for the sake of it.
    You have a lifelong customer here, keep up the great work.

  • Thank you Shane, great tips.
    I would also like to thank you for being such a great theme company, in that you are always improving your themes and give your customers very valuable, ongoing help, training, updates and advice. I don’t think I’ve ever experienced that with any other theme company… which is, besides fabulous themes and plugins which one can’t live without, I don’t go looking any further for themes.
    Cheers
    Jenny, Downunder 🙂

    • Thank you very much for this comment, Jenny! I speak for the whole team when I say we appreciate this kind of feedback very much.

  • You are so right It gives to many websites like ME ME ME, and I’m Impressed one more Time for your really open eyes to little details like this!
    Shane you have a beautiful Mind! Thanks for another important little big true. I rename you in Shane Benefit 😉

  • I’m sure it’s there for mock design, and are there for theme dev to prove that there’s a progress bar. Most of the sites you show were mock designs, and not a finished client’s site. Again, it’s there to prove the themes have it, but not actually used.

    It makes no sense to put it there just because it looks pretty. Unless the clients themselves are stup enough just coz the mock design site shows it. But nope, I’ve not seen a decent site showing that, all except theme dev.

    • That’s true, yes. These examples were from demo sites, but that’s just because those were the easiest ones to find. I’ve seen the “skill bars” thing in the wild as well, on many occasions. Plus, people who buy these themes often base their sites on the demo content, so this kind of thing is creeping across the internet.

  • I thought at first that you weren’t going to convince me, but I totally agree with you. Good positive examples, too.

    Thanks for sharing!

  • Shane this is an excellent video and I agree with you 100%. I see those progress bars and have always wondered, since their conception, why anyone would want to undermine their results, especially when advertising their services.

    Plus I feel like it is one of those gimmicky phases where every new site installs some sort of progress bar or counter.

    It’s like keeping up with the next door neighbor…or driving down a street where every house looks the same…no wonder it’s a conversion killer.

  • Great way to show us what to do and why it makes a difference. Although it’s embarrassing to admit, just getting a website up and running with content was a big step…I didn’t focus on conversion and your videos, posts and themes are helping me change that!

    • We all have to start somewhere. Trust me, my first few websites were nothing to brag about, either. 🙂

  • Hi Shane,
    once again: thank you!! for these insights. This advice is priceless. I was guilty too.. I’ve killed the “skill bars” on my about page, even before i watched the end of your video 🙂

    • Thank you for your comment, Rita! I’m very happy to know that you went straight ahead and put some of this new knowledge into action. 🙂

  • Shane, Learned something new today about how to properly engage the people coming to my websites. Using comparisons to contrast the competition & using social proof to show how many people like products or services offered is necessary in today’s online world. I need to increase conversions as people are leaving my site at a high rate.

  • Fabulous video Shane and lots of food for thought.

    Your vexamples look like the Divi theme, which is what I use and… I use both counters and progress bars.

    And thanks for providing the positive examples and not just giving the negative aspects.

  • Great lesson, Shane! Sometimes I see these progress bars and I get a good laugh out of them… making me wonder who they assigned internally to count the number of coffees that their team had drunk! Too much time on their hands obviously. And too much irrelevant information to the reader/customer.

  • Fabulous! Thank you so much. I have seen a lot of these lately and didn’t know if I had missed a “skills standardization” seminar or something. 🙂 The positive and negative examples helped a lot. Thanks again.

    • Thanks for your comment, Amy! Yes, a skills standardization seminar that we missed out on would explain a lot. 🙂

  • Just found your blog and themes. This video is precise, cogent, and exactly Right On! It addressed all my questions and misgivings about “Skill Bars,” and is written with deep marketing savvy. Thanks for your insights!

  • This video could not have come at a better time. I’m setting up an about page right now and my theme default had a “skill bar” in place to be used. It didn’t make sense to me because as you said, it demonstrates a lack of skills. Glad I found this and that other people are in agreeance! Thanks!

  • What would be the suggestion then if you want to portray rising numbers (money)? I’ve thought of an actual bar graph, but can’t seem to land on something that is 1, sensible and 2, enhancing to the site/page.

    • Hi Andi,

      I think that depends on what you’re trying to illustrate with those numbers.

      Bar graphs could be useful to highlight a contrast. As in, if you have several amounts and one of them is significantly higher or lower, then a set of bars is a good way to visualize this difference.

      In other words, I don’t think the unit of the numbers matters as much as the context and what you’re trying to explain.

  • Hi Shane,

    Fantastic article! Very informative as usual.

    By the way, is there a progress bar feature for the Thrive Quiz builder? Because I think a progress bar can really push a visitor through the completion of the quiz, especially if there are only a few questions.

    • Hello Budi,

      Thanks for your comment! We don’t have a progress bar in Thrive Quiz Builder, because you can build quizzes with branching paths. Not all paths are the same length, so the progress bar could increase by seemingly random amounts, depending on which answer you choose. I think that might be more confusing than useful, for visitors going through the quiz.

  • I am currently redesigning my website and was umming and arring whether to add in the skills counters – The reasons you’ve mentioned are exactly what I was concerned with! Great article – Thank you!

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >