Web Design Progress indicator helps users predict steps

Web page Production WEBJX article introduction: What problem does the Web page progress bar solve?

A progress bar (or a progress meter) can help users anticipate the length and steps of a process and know which step they are currently in. Also known as the progress indicator (Progress indicator), the multi-step progress bar (multi-step Progress Bar), Wizard ( Wizard Steps) "," Progress meter (Progress Train) "," remaining steps (Steps left) "

Solve what problem?

Users need to be aware that they are working on a multiple page (multi-screen) process (such as payment or registration)

When do you use it?

Should be used in the wizard, in those pre-designed, users may need to complete one or more of the multi-step processes that need to be completed in individual cases. Don't use it in regular tasks, because the clunky, step-by-step approach (handholding) will eventually become annoying.

What is the specific solution?

By a continuous, display series of steps that highlight the current step, and can display the current completion or percentage of the navigation bar, as a progress bar (or a progress meter).

• The progress bar is displayed when the user decides to start the process
• The final step on the progress bar should reflect the last page that will perform the necessary actions (for example, completing the registration, submitting an order). Do not use cold "confirm" or "Receipt page" on the Progress bar (Receipt page)
• The process is decomposed into steps according to the user's mental model. Obviously, each step refers to an operation rather than a separate page, so it is not necessary to have the step corresponding to page 1:1. For example, "login" involves a login page and a registration page.
• The step name is short, and it's a parallelism structure. " Action-oriented (action-oriented) verbs are better, but they can be used only when each step is properly described in this way.
• Make sure that the progress bar is accurate and trustworthy for each use case. The user should not skip steps or come across steps that are not shown by the progress bar. Make sure that you include the "login" (step) only if necessary. If necessary, you need to design different progress bars for different use cases.
• Make sure that the visual design of the progress bar is not mistaken for a clickable navigation bar

Why use this component?

The progress bar allows the user to estimate the length of the entire process, a preview of the whole process, and always tell them how much has been done throughout the process.

Answering

The progress bar can also be used to represent animated bars that dynamically display System update progress (just like the progress bar component in YUI2)

This component can resolve the associated multi-step column or as an indicator of the step-by-step display of the user control process (Translator Note: This sentence I do not translate well, welcome to the experts to teach ... This is deals with a articulated, multi-step bar or indicator showing stepwise user-controlled.)

Original address: http://developer.yahoo.com/ypatterns/navigation/bar/progress.html