There is frequently a need to direct a user through a process from start to finish e.g. registration or webstore checkout. These are called process flows.

Multi-page process is not always a bad choice. For some process flows it makes sense to keep the user on the same page throughout the process. But sometimes the process is best left broken into individual pages.

Keep process flows to the absolute minimum. Use a quick and easy approach to get users to finish a task. Use additional steps when there are opportunities to engage the user further as with recommendations.

Most common process flow patters:

• Static Multi-Page Process: The standard and old way to guide user though a process. A form on each page where a page is a step in the process.
• Interactive Single-Page Process: Selecting options activates and disables other available options on a single page. E.g. selecting shirt color only activates sizes that are available for that shirt color.
• Inline Assistant Process: Area of inline elements to support on-going process in the interface, usually shown on multiple pages. E.g. shopping cart on webstores that notifies about added items.
• Configurator Process: Multiple sets of options that define all "configurations" available, shown on a single page. E.g. changing product color or size also changes the image.
• Overlay Process: Process is shown in an overlay, each step changing the overlay content. E.g. registration has 3 steps, each step changes the overlay content.
• Static Single-Page Process: List that shows every step from the beginning to the end. User has no interaction with the on-going process. E.g. showing steps of a pizza order on a website from "order" to "delivery".

Always inform user about the number of steps, if you know the number. Keep the users informed throughout of their location in the process and total number of steps. User should be able to tell how much is left and be able to return to previous steps at any time.

Use color coding to create illusion of reduced number of steps.

Blue, Blue,  Green, Green,     Orange
Item, Photo, Price, Discounts, Delivery

Show the simplest step first. When an user has started the process, it's more unlikely they will quit.

Static multi-page process is great when you want to hide the context. This is rarely the case, but the benefit of showing context takes longer to create from engineering point of view.

Interactive single-page processes improve user engagement. Shows invalid choices in real time, reducing errors later.

Inline assistant process is great with shopping carts. Always shown so users can double check how many items they have in the cart. Hover or click will show the full cart contents.

Configurator process works great with a live preview. User can see the changes in real time, reinforcing expectations what they would get after ordering.

Overlay process is great if you want to have the process on multiple pages. But don't want to clutter the interface by showing the first step all the time. Makes multiple steps appear in context of the page.

Static single-page processes are great for non-interactive processes. Use other pattern when the process is complex or requires user interaction.

Sources

• Designing Web Interfaces, Bill Scott, Theresa Neil