Written by Ben Gremillion

Few user flows happen the way a designer intends. No matter how well flows are designed, some users will find ways around the carefully laid-out path from A to B to CTA — if nothing else, they’ll use their browser’s back button, or get distracted halfway through and close the tab.

Today we’re going to look at a user flow that suggests a path with forgiving design: a UI that provides many chances for users to proceed along a natural course.

Let’s start with a goal: we want people to buy a product. In this case it’s a shiny toaster but the principle applies to most any goods.

Shopping cart flowchart

Now, a prototype doesn’t have a real cart. There are no variables, just page flow and animations, so we pre-populate the “what’s in your cart” page with a few products to give stakeholders an idea of what it will look like. Likewise, all form fields are optional — most prototypes don’t process any information.

Given all that, we can still apply some best practices to the user experience.

Give users freedom to skip around

One way to get around the problem of losing users’ attention is to create a space for them to go — one that eventually leads back to the path you want them to take. Here we deliberately let them browse for more toasters with a discrete “keep shopping” link strategically placed next to the “checkout” call to action.

A primary call to action— one that stands out on the page — cuts down on confusion about where users should go next, but a secondary action gives their short attention spans the chance to use the cart as a tool to compare combinations of prices.

For example, a user may want to compare the price of toaster A to toaster B plus a pair of tongs. Also, using bold images of the product helps prevent shoppers from leaving their cart before they’re ready to purchase. Letting them treat the site as an app encourages them to explore further.

Different calls to action

Does a secondary CTA drive people away from the goal? Sort of. But it keeps them on the site.

Offer options along the way

This shopping experience has a twist. Users can either checkout with a discount or without, giving them a sense of control while keeping them along the path to checkout.

It’s also an extra step in the prototype. While it requires additional pages — in this toaster example, three extras — trying different scenarios is what prototypes are all about. It also raises important questions about where people get coupons and how the site will react to a special store-wide sale.

Checkout with icons

One thing to note: provide different options to pay, as well displaying security logos. It’s another way to keep shoppers from abandoning their cart, which is something you’ll certainly want to consider in this type of flow.

Animate, animate, animate

It’s subtle, but it’s there. This prototype has a few interactive features that — pardon the cliché — surprise and delight users with motion.

Specifically, thumbnails on the browse become more distinct on hover, and the detail page’s “info” icon causes more product information to scroll into view. These little bits of engagement will hold users’ attention. The more they find to control, the less likely they are to leave.

Going forward

If our goal is to have users buy a product, we have to understand their fickle nature. We can counter distractions with interactions that hold their attention and give the sense of control. We let them follow any path you want, so long as it’s one that leads them to our goal.