Progress bars, as the name implies, exist to show users their progress in whatever task they set out to do. If your website is a simple one-page site with no task for the user this doesn’t apply to your site. However, if users need to do anything beyond scan a pages (i.e. fill out forms, purchase a product, read an article that spans multiple pages, etc.) then a progress bar will come in handy for them. The progress bar will help your user keep track of how many pages/steps they are done with and how much more they need to go through to finish their task. This might not seem very important but it really is because it lets users know if they have time to finish the task, which very important for tasks with many steps because users might just abandon task after several steps if they don’t have a reference point.

When designing the progress bar you would do well to remember these tips:

• Make the progress bar stand out - Do this by placing the progress bar in a prominent location, making it relatively big, using a distinctive color, and by surrounding it with enough white space to set it apart.
• The progress bar should have enough labels to help users understand what it is for and where they are - A simple label like Page, Step, or Percentage would suffice. You do not have to explain the whole concept of progress bars the idea is to simply help users determine what the progress marks.
• Use numbers to help users determine where they are exactly - Progress bars that are actual bars may look great but it is important for users to know where they are in the process. You can do this by displaying the percentage of the task finished or the actual number of steps/pages in place of or near the progress bar.