During our current research on checkout usability we made several interesting discoveries that go beyond checkout usability.
One thing we noticed was that most people (8 out of 10 test subjects) imagine multi-step forms as a straight path with discernible steps. During a sign-up process, people would imagine the next page before actually seeing it – they would imagine a collection of pages, moving back and forth between them. Even though they hadn’t reached the next step yet, they visualized it because they knew it was coming.
So even if the concept of physical space doesn’t technically exist online, people seem to invent it. This mental model is likely carried over from people’s interactions with books and newspapers where you know there’s more ahead even before you’ve turned the page.
If people think of your multi-step form as a straight path, then the sequence of your pages must be linear or you will break people’s expectations (which is bad for usability).
It’s a simple logic, after step #1 comes step #2, and after that step #3, etc. While this sounds obvious, you’d be surprised how often this is broken in practice. Many websites introduce sub-steps and round trips, resulting in a non-linear path.
In checkout processes, non-linear sub-steps or round trips usually happens when a visitor has to create a preferred shipping address or sign up for an account. What often happens is that after signing up, the customer is taken back to the page they came from at the beginning of their detour. Just like in real life, suddenly being thrown back to where you set off is a frustrating experience.
The solution is simple: keep your process completely linear – never show the same page twice.
When you follow a linear path there’s only two ways: forwards and backwards.
In the online 2D-world, there’s a strong convention of mapping backwards and forwards to left and right respectively. Just look at the decade-old “back” and “forward” buttons in your browser.
Most of the time when users are “walking on the path” in a multi-step process they want to move forward. Because of strong visual conventions and interactions with physical products like books and newspapers, many users go as far as imagining the next page to be almost floating in the air, next to their screen, waiting to slide in from the right when they click the “next” button. And similarly, they imagine previous steps to the left side of their screen.
What’s interesting is that many smartphones have actually taken this scheme quite far. On the iPhone the screen literally slides to the right as you proceed down the hierarchy of an app (or a path in the app), and slides back to the left when moving up the hierarchy. Even the buttons point in the direction they take you.
Tapping into this mental model of “forwards” and “backwards” is actually quite easy. Simply word navigational links and buttons “next step” and “back to ..”. Visually you can shape your buttons so they physically point to the right for “next” buttons and to the left for “back” buttons. This will make the process feel more intuitive, and most users will likely be able to proceed without actually reading the button text.
It’s of course important to have “neutral” buttons without any direction in those cases where a button doesn’t move you forward or backward in the process.
During our study, the checkouts that played along this mental model of a linear path with directional buttons, performed better than the checkouts that didn’t play along.
From a technical viewpoint this whole idea of a linear path and direction is bogus. Sure we can enforce a certain sequence, but technically there’s no concept of physical space – but as usual, this doesn’t matter.
Creating an illusion of physical space, a path, is good usability and that’s ultimately what matters.
Thoughts? Ideas? Then post them in a comment.
Join 22,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
If you do a usability study, try and notice your test subjects arms as they explain previous and future steps – many of them will likely wave to the left and right of the screen as they explain.
Great article and I truly agree with you!
What about having checkout formsvon one page? No multi step clicking?
I saw ab testing results for check out pages, multistep vs one page and one page converted much much better. I can point you to those results.
Did your study look at this? Or any feedback on this?
I would love a link or reference to those results! Always interested in real-world data..
A couple of the sites we tested did have a one-page checkout and they performed pretty well. However, the most important aspect wasn’t one-page vs multi-step forms, but rather how well the page(s) were implemented.
Very interesting analysis: The best advice for usability is to show the steps, name them, make them clickable to allow the user to go back if he change his mind on something, and if possible to make all the steps fits without scrolling. A long page is often discouraging.
We found all of those things to be true except for the scrolling-part. We didn’t find any evidence that would suggest scrolling was particularly hurtful to the usability of the checkout process.
Surprisingly few of the sites we tested allowed the visitor to click the “process steps” even though a few test subjects did indeed try to click them.
Thanks for the comment Vincent.
But why not have one form in one page, implemented as multiple steps? Github did a wonderful job in the projects page, using the history api.
Most customers don’t know the difference between the two since it’s technical. If the form is in multiple steps, it’s a multi-step form. Customers don’t realize if they are technically loading a new page (URL) or simply showing another part of the same page. Of course the checkout would likely load faster if implemented on the same page which is important to the experience of the checkout, so that could be a reason to do it.
Very insightful. This is how we visualize/imagine the man-made constructs of days, weeks, and months as well. I love linear task flows and use them whenever possible, even sub-tasks of non-linear flows can be made linear for the user’s sake. Progress bars, bread-crumbs, and next/previous buttons are the not-so-secret sauce of many good interfaces.
You’re spot on when saying “even sub-tasks of non-linear flows can be made linear for the user’s sake”.
It doesn’t really matter of it is a sub-task, as long as you make sure the process is linear.
I guess most of the sites should make their checkout process linear lookong.
Any recommendations/readings for designing non-linear flows?
We’ve been doing user-testing of linear flows for some time (checkout and other flows too), and we agree that this is a strong mental model for users.
Do you have any thoughs in the checkout process as to where the continue button should be best located for maximum conversions. Our checkout is a multistep checkout (single column fields) and the continue/submit button is currently at the bottom of the form left aligned. The choices are a left aligned button, centered button, or right aligned button. Other aspects to test would be size of button, wording of button – ie the text in the button on the checkout. Roll Over versus non roll aspects verus standard grey and boring button (we use this). Hopefully we can put in our own A/B Testing platform to check this one.
I’m just wondering if this phenomenon is at all culturally dependant on a language’s reading direction: do Arabic readers, for example, naturally think of moving right to left? (And Chinese reads top to bottom – not sure if that would make a difference!)
I did a search on Bread crumbs and only got this page, which has no information on Bread crumbs or examples. What pages in Baymard shows how to use Bread Crumbs?
© 2021 Baymard Institute US: +1 (415) 315-9567 EU: +45 3696 9567 firstname.lastname@example.org