How NOT to Use Progress Bars & Counters
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):
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.
- 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.
- 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.
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.