Article overview

User Expectations: Create an Illusion of Space

· By · 15 comments ·

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 can harm usability.

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

When you follow a linear path there’s only two ways: forwards and backwards.

The Back and Forward buttons in browsers have helped form a strong convention of left arrows meaning backwards and right arrows meaning forwards.

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.

People visualize the process as a straight path, moving left and right, backwards and forwards.

Many users visualize 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.

Click for larger version. 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.

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.

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.

Jamie, Baymard Institute January 7, 2011 Reply to this comment

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.

Ivo Benedito January 9, 2011 Reply to this comment

Great article and I truly agree with you!

Viktor Nagornyy January 9, 2011 Reply to this comment

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?

Jamie, Baymard Institute January 9, 2011 Reply to this comment

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.

Vincent Bransiecq January 9, 2011 Reply to this comment

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.

Jamie, Baymard Institute January 9, 2011 Reply to this comment

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.

João Paulo Dubas January 9, 2011 Reply to this comment

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.

Jamie, Baymard Institute January 9, 2011 Reply to this comment

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.

And yes, Github has done some interesting stuff with the new javascript history API. Unfortunately, it seems like IE9 won’t support the history API so it may be quite a while before everyone can enjoy the benefits of it.

Brian Roux January 9, 2011 Reply to this comment

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.

Jamie, Baymard Institute January 9, 2011 Reply to this comment

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.

qna January 10, 2011 Reply to this comment

Nice research.
I guess most of the sites should make their checkout process linear lookong.

January 10, 2011 Reply to this comment

Any recommendations/readings for designing non-linear flows?

Guillermo Ermel August 17, 2011 Reply to this comment

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.

Best,
Guillermo

Perth Web Designer March 10, 2012 Reply to this comment

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.

Judith Gibbons August 22, 2012 Reply to this comment

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!)

Post a comment!

Close overlay