Users usually need to be guided in order to finish a task. Designing a process funnel right will keep your visitors in the process and will make them finish the task they want to commit. This tasks could be as important as the Checkout Process, I will focus on this particular one.
Here there are 8 tips to improve usability during a checkout process:
1. Keep it short. If the process has too many steps users will be scared and will probably leave without finishing it.
2. Keep it long. If the process is too short, well, it’s not a process. Sometimes it’s better to divide tasks that could be presented in one page into smaller steps. Keeping every step short gives a sense of simplicity.
3. Progress bar. It is very important for the user to have information about how long the process it will be. Maybe your process is not that long, but if you don’t show that to the user, she might decide that is not worth enough to finish with it.
4. Back button. Give users the possibility to go backwards to check what they filled in the previous step.
5. Unnecessary steps. Give users the chance to skip steps they don’t need (e.g. the Amazon "Gift-Wrap" step).
6. Online help. Use floating windows or other online help to solve problems without taking users out of the process. Remember not to distract users.
7. Next step button. Make this button or link highly visible.
8. Make clear that the process is finished, if not you could have a lot of users contacting your customer service, which could become extremely expensive.
I would like to show you 7 examples I took from different websites. I focus on the information the user should get to make important decisions just before or during a checkout process funnel:
|
Amazon’s design shows a shopping cart that seems to be rolling through the whole process. Users know what to expect as the steps have clear names, displayed from the beginning.
The Starbucks Store shows very clear steps and the name of each one in a prominent position (e.g. Sign In). Some usability tests show that users might prefer a longer process with smaller steps. Good naming for each step should represent the user mental model, something like what the people are used to when they buy off-line.
Buy.com has a sleek checkout process status information design. I like the red arrow clearly showing the actual step. Steps are clearly indicated and the end is also coherently indicated with an "Order Complete".
Toy"R"Us checkout process is not going to prevent users to finish the purchase but it could create some confusion. Notice that the difference between the step "Addresses" and "Shipping" could be misunderstood and users have to go inside the step and read instructions in order to understand what are they about. Using "payments", the plural form, is not standard and could add even more worries.
The beginning of the checkout process at Petco adds some extra complexity. They require an extra decision to be made by the user: "check out", "Google Checkout" or "International Checkout"… I would avoid so many options.
Google Checkout has a special design. Coming from an online music store I landed at the Google Checkout page, at this point is not possible to delete products or change quantities. The whole information is displayed in a single page, including product to be paid, payment information, shipping address and term of service. Maybe the aim of this was to try to make the process short but in my opinion this design fires back and scare people, making users think that the whole form is too long (this happens to the first-time Google Checkout users).
The PayPal process does not offer any information about how long the process it will be.
At the end, once the user logins, the process is very short (if the user has an account and bought before with Paypal). Unfortunately, before the login the user could not guess how long the process could be. Something like 1. Login, 2. Confirm and Finish in the login page wold give users the feeling that the process is really short and easy.
|
.jpg)