Linearity Matters: Rethinking eCommerce UI

“Linearity” plays a strong role when it comes to usability of any e-commerce checkout. Many theories supporting this concept have been proved by numerous statistics. UX sites which talks about the best practices to follow while designing the checkout process, always advocate maintaining linearity. It’s make sense when we see multiple principles in human factors indicate that in most of the time when users are “walking on the path” in a multi-step process they want to move forward. But only designing the checkout process is not enough, as from the views of typical goal oriented design, the whole experience of shopping starts with user’s objective to “find something that might influence him enough to buy”where the whole experience is a flow-state which maps to the mental model of the user where “finding” and “buying” are the major component of buying. The former being the “cause” and the latter being the “effect”, the design of the experience should always be linear in order to avoid the situation where the user is distracted by something else to break that state.

If users think of your multi-step process as a straight path, then the sequence of your views must be linear else you will break people’s expectations that will result into a bad experience and usability.

Traversing from user needs the towards the task flow

“I need” –> “I buy”–> checkout

is equivalent to

“I need” –> “I find it ” –> “I buy”–> checkout

is equivalent to

“I need” –> “I browse for it ” –> “I search for it ” –> “I buy” –> checkout

is equivalent to

“I need” –> “I browse for it ” –> “I search for it ” –> I compare –> “I buy” –> checkout

There are two major task clusters now:

1. “I need” –> “I browse for it ” –> “I search for it ” –> I compare –> “I buy”

2. “checkout”

Note the goal stating “I buy”, is the logical point that is represented by the behaviour of the user through the act of “adding to basket/cart”

Meanwhile the act of comparison of the products can be spanned from what is in the browsable and searchable views and what is already existing in the cart (which the user has added to the card already through a previous loop in this category of task). It is similar to the way that you might have added a deodorant “Old Spice” to the cart and suddenly decided to go for an “Axe” that offers 10% extra in the same price (Note that the user’s mind wanders 30% of time). So it helps to allow the user to be in the loop with in the first task group and then jump to the checkout while making the transition to checkout seamless. In order to achieve, the more the mental model matches to the conceptual one and indicate the user’s state in the flow and encouraging him through “progression” in the linearity path.

Here is a sample flow that takes the benefit of the linearity as a part of the process for the experience that covers the pre-checkout and checkout process to complete the flow state.

The target of the solution is primarily a tablet, which is acting as a catalyst as being a touch enabled swipe gesture controlled device it provides the user the effortless approach to move between the “browse/Search” <–> Cart <–> Checkout , once he has reached the entry point to the system.