Call SEO0845 838 7448 SEO RSS Feed

The Importance of Progress Bars

Feb 182008

published by Dan in Usability | Website Design with No Comments

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.
AddThis Social Bookmark ButtonAddThis Feed Button

RSS feed | Trackback URI

Comments »

No comments yet.

Name (required)
E-mail (required - never shown publicly)
URI
Your Comment (smaller size | larger size)
You may use <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> in your comment.

Trackback responses to this post

Web Design | Graphic Design | SEO | SME Website Design | E-commerce Systems | Website Applications | Website maintenance Website Copywriting
Graphic Design | Corporate Identity and Branding | Logo Design | Search Engine Optimisation | Free SEO assessment | Website Design Peterborough | Graphic Design Peterborough Web Design Bolg

© 2007 Doublespark Limited - All rights reserved.

This site is protected by Copyscape