Do your customers know where they are?
Many sites today offer products and services that require the customer to complete a process involving three or more steps. The most common process on an e-commerce website is check-out. However, some sites have other involved processes, such as booking a vacation package, customizing a computer system, or uploading photographs for digital printing. We commonly observe test participants relying upon the browser’s Back button to navigate around a site.
When working through a process, however, the Back button often does not work as the user would like because of the data that has been processed. If a user does return to a previously completed step, the data is generally lost because the page had to be refreshed in order to display. Regardless of the process, users need to know where in the process they are and how many steps remain. They also need the ability to return to a previous step to make changes without losing all of their selections or previously entered data. This results in the need for a progress indicator somewhere within each page from the start to the end of the process.
Examples:
The following are examples of progress indicators on various sites with the strengths and areas for improvements for each.
Strengths:
- The current step is a different and brighter color than other steps.
- The color of the text (i.e., white vs. black) provides a differentiation between those steps that have been completed and those that have not.
Areas for Improvement:
- The previous step (’Shipping’ in this case) is not clickable to allow users to modify the choices they made during that step.
- The logo separates the progress indicator from the options on the page. The progress indicator should display below the logo in help ensure that users notice it.
Strengths:
- The current step is a different and brighter color than other steps.
- The black arrow above the step number provides further differentiation between the current step and the other steps.
- The ‘BACK’ button allows users to navigate to a previous step.
- The ‘CONTINUE’ button allows users to quickly skip to the next step if the current one does not require any selections, changes or data entry.
- The current step is labeled, in this case ‘Accessories’.
Areas For Improvement:
- The numbers for the completed steps are not clickable; however, this process has only three steps and therefore, the ‘BACK’ and ‘CONTINUE’ buttons work well.
- Only the current step is accompanied by a descriptive label, therefore if users wonder what Step 3 is, they have no way to know until they reach Step 3.
Strengths:
- Each step is numbered and labeled.
- The current step is visually enhanced.
- The tabs are integrated with the options below.
Areas for Improvement:
- Users are not able to return to a previous step.
Strengths:
- Each step is numbered and labeled.
- The current step is highlighted to bring focus to it.
- Previous steps are clickable for changes.
Areas for Improvement:
- Subsequent steps do not appear inactive since they display with the same visual elements as completed steps.
Best Practices For a progress indicator to be useful, it should provide the following:
- Display near the top of the page, but below the header area in order to illustrate the relationship between the options on the page and the progress indicator.
- Provide numbered steps along with a term or brief phrases to describe the steps, such as ‘1 -Review & Confirm’, ‘2 - Upload to the Web’ and ‘3 - Shipping Information’.
- Each completed step should be clickable to allow the user to easily navigate between steps while maintaining the originally entered data and/or selections. This is particularly important if the process involves four or more steps.
- The current step should be highlighted or visually enhanced in some manner to distinguish it from the other steps.
- Any completed steps should display in a similar manner as the current step, but not as visually enhanced as the current step.
- Any steps that have not been completed should be inactive (not clickable) and display in a color indicating their inactive state, such as grey.
Stacey Kirkpatrick
Usability Team Leader