{"id":3361,"date":"2016-08-13T20:39:03","date_gmt":"2016-08-13T20:39:03","guid":{"rendered":"http:\/\/wpbeaveraddons.com\/?p=3361"},"modified":"2016-08-13T20:42:07","modified_gmt":"2016-08-13T20:42:07","slug":"number-counters-progress-bar-web-design","status":"publish","type":"post","link":"https:\/\/wpbeaveraddons.com\/number-counters-progress-bar-web-design\/","title":{"rendered":"Using Number Counter & Progress Bar Efficiently for your Website"},"content":{"rendered":"

This is my second article from the series on Sensible Web Design<\/a>. Number counters and progress bar are another most common element in popular WordPress themes. Every theme, whether free or premium comes with these fancy counters and progress bars.<\/p>\n

But, are these really useful? Do you need it on every website? How is it adding value to my website or my client’s website? These are some of the questions I start asking myself when\u00a0I see such things.<\/p>\n

There are times when you can use these counters and progress bars efficiently. But, most of the times these are used\u00a0just to fill up the page.<\/p>\n

What not to do with Number Counters?<\/h3>\n

Number counters are mostly used to show off, how “Cool” we are with the stuff that we do. It’s the one thing that a lot of amateurs would do to present themselves as a big brand. But,\u00a0is this really worth it? Here is a \u00a0screenshot of Number Counters from a website that offers WP Development services.<\/p>\n

\"Number<\/p>\n

Why would a visitor care about how many espressos you have drank or how many pizzas you have eaten? Most of the time, I end up asking myself if they have really eaten those many pizzas or drank that much of coffee? If we start analyzing their counts, sometimes we can end up with a\u00a0funny amount of expenses and work hours.<\/p>\n

How to use Number Counters efficiently?<\/h3>\n

You can always use something efficiently, all you need is the right method and judgment for its application. Number counters can help you build trust among our visitors. You can use these to show off your work experience and expertise and these don’t always need to animate from 0 to 1000.<\/p>\n

One thing that I personally dislike about the\u00a0animating counters is that\u00a0it gives an impression of being “real-time” whereas, in most of the cases, it’s a fixed number.\u00a0Using this animation can make it look fake and give a wrong impression to your visitors as they will be seeing the same number all the time.<\/p>\n

Here’s a screenshot of good use of the counters from a real website<\/a>.<\/p>\n

\"Number<\/p>\n

This is a small web design agency that works mostly with the clients on different freelance platforms. They have used the numbers to show off their expertise and experience, and along with social proof of links to their freelance portfolios. So, anything that they have said above in the counters can be verified quickly.<\/p>\n

They do have a 5-star rating on Fiverr<\/a> with over 2300 reviews. That’s huge!<\/p>\n

Here’s another one<\/a> with a strong portfolio that supports the stats they have shared<\/p>\n

\"number-coutner-rootways\"<\/p>\n

Codeable<\/strong><\/a> – A Popular\u00a0WordPress site uses numbers to efficiently share the stats with their prospective clients. Again, they use, testimonials as a social proof.<\/p>\n

\"Codeable\"<\/p>\n

Progress \/ Skill Bars – Are you criticizing yourself?<\/h3>\n

Progress or Skill bars are\u00a0another set of fancy elements that a lot of agencies like to use. But, they fail to understand one thing that they end up\u00a0criticizing themselves and their skills.<\/p>\n

Let’s take a look at this screenshot from a web design agency’s website, I don’t understand the need of using a progress bar when you are an expert in\u00a0everything. Everything, really?\u00a0<\/em><\/p>\n

\"Progress<\/p>\n

How to use\u00a0Progress Bars efficiently?<\/h3>\n

I find\u00a0Progress \/ Skill bar a good for personal portfolio websites. As an individual, you can be a good something, very good at something else and a beginner as well.<\/p>\n

Here’s a screenshot of a freelance developer’s website<\/a>.<\/p>\n

\"Progress<\/p>\n

It’s quite natural to understand that an individual won’t be a Jack of All Trades.\u00a0<\/em>I don’t deny the fact that there are some. But, most of us specialize in a particular field.<\/p>\n

Using progress bars to show off your skills is good, it gives a clear picture to prospective clients that you are open about your expertise and you are not making false promises.<\/p>\n

I hope this will help users to understand and utilize these fancy elements in a good way. If you have any tips to share, please drop a comment. Got any questions? Feel free to ask.<\/p>\n

Disclaimer: All the examples that I have shared above are\u00a0the websites that I have heard of or found through Google Search.\u00a0I am not making any recommendations or\u00a0questioning their expertise.\u00a0<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

This is my second article from the series on Sensible Web Design. Number counters and progress bar are another most common element in popular WordPress themes. Every theme, whether free or premium comes with these fancy counters and progress bars. But, are these really useful? Do you need it on every website? How is it…<\/p>\n","protected":false},"author":1,"featured_media":3437,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_lock_modified_date":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[14],"tags":[19],"class_list":["post-3361","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design","tag-sensible-web-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/3361"}],"collection":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/comments?post=3361"}],"version-history":[{"count":0,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/3361\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media\/3437"}],"wp:attachment":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media?parent=3361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/categories?post=3361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/tags?post=3361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}