People visualize the next step before actually seeing it.
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.
Linear Process
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.
Round trips often result in confused customers and a frustrating user experience.
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.
Direction
The Back and Forward buttons in browsers have helped form a strong convention of left arrows meaning backwards and right arrows meaning forwards.
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.
Many users visualize the checkout process as a straight path, with future and previous steps “floating” next to their screen.
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.
Many smartphones literally have the next screen slide in and out from left and right.
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.
In your UX process you can tap into this mental model of “forwards” and “backwards” 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.
Conclusion
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.
