- The checkout experience starts before the add-to-bag stage
- People crave control and need to know what’s happening, and what will happen, at every stage of the journey
- Don’t introduce new information at the delivery and billing stage
- It’s paramount users feel safe at this critical conversion point
Steve Krug’s motto of ‘Don’t Make Me Think’ couldn’t ring more true than in the moments leading up to, and including purchase. Users need to be in the flow, undistracted at this time, and any fear, doubt or hesitancy need to be eliminated before this point to ensure conversion. It’s therefore fundamental that your experience has handled and soothed any negative emotions further up the funnel, and replaced any of them which existed with trust, ease and certainty.
This guide will give you some tips for dealing with this throughout your whole experience, as well as some tried and tested tricks for designing your user interface.
Built within each of us is the instinct to analyse, at rapid speed, whether a situation is trustworthy. It’s a survival mechanism. Evolving into the digital era, we’ve adapted these skills to new scenarios, and our experiences online work no differently.
If people don’t trust something or someone, they tend to back away and disengage. In ecommerce, we want consumers to fully engage and commit all the way through to conversion (and ideally beyond, into repeat customers). To do this successfully, we have to build a relationship of trust and familiarity with our users. Here are a few key touch-points and features to check:
Continuous, clear and consistent messages
Many ecommerce sites use eSpots (site-universal messages) or info banners to make announcements regarding their shipping proposition, or a sale, for example. They can be used on the homepage, in the navigation or on product and listing pages - wherever they are deemed poignant. It’s crucial they look the same as each other and keep consistent wording to allow people to categorize them as one body of messages.
Some examples Amazon.co.uk, used at various points on their site. They use consistent fonts, assets, colours and gradients to make their campaign recognisable at all touchpoints.
You can further extend the messages from eSpots into retargeting banners, social posts and emails. Again, remember to correlate the styling and wording with everything else. These off-site touch-points could even be the catalyst for entry to the site.
We learnt recently that inconsistency in your messages can lead to an ultimately disappointing user experience. The majority of the traffic that was visiting a site we built came from a mobile device, but the size of the eSpot on mobile meant some copy had been hidden. Unfortunately, the message clarified that delivery from this site was only possible in London. This decision to shorten the message meant that some over-zealous mobile-using non-Londoners had to be issued with refunds.
What we learnt: Don’t be stingy with pixels to the detriment of consistency and clarity. Start your design process mobile-first and consider the customer experience if you decide to hide specific elements for the sake of a cleaner design. We may now have risked leaving those customers with the impression that the site is not trustworthy, because we fell flat on their expectations. We also learnt that the people running your UX and Ops need to communicate. In the words of Freddie Blackett, the founder of this start-up, “Checkout is where the baton is handed from Product and Marketing to Ops, so it's vital that whoever's in charge of Ops has a say in these UX conversations.”
Use learnings from research to pre-empt need, and nullify it
Through customer feedback, we learnt that adequate shipping information at particular points in the journey is essential. We’ve been working with a start-up in our studio, and discovered that when people decide to buy a Christmas tree, they want to know it’ll be delivered on a specific day, and even at a certain time that suits them, before they commit to the purchase. People are planning days off to receive and decorate their trees, and want to be able to rely on it coming at the right moment in that festive timeline.
What we learnt: To display the delivery proposition at every stage leading up to, and including, that product page to ensure people are informed about their options before the purchase point.
The aim is to get to a place where users stop needing to ask questions. We want to know the customer’s needs so thoroughly that we can design products that pre-empt questions and already display the right answers. We’re not psychic, but we can identify patterns in research to inform us about a customer’s worries, and create the right products to eliminate them before they exist. Not only does it save time and money, but instils that psychological safety within the people using the site.
Make sure the customer feels in control
People tend to get on board if you’re transparent with them about how to complete a task, and how many steps it will take. This is why we use timelines and breadcrumbs on websites to illustrate where people are in a larger scheme of things. As personal practice, I believe it’s also fair to explain why you ask for information from users. So for example, in a data capture form, we give reasons for each entry so they don’t have to question our motives.
If people can see the bigger picture, then they begin to create a conceptual model around an experience and brand, and then they can start to embody it with their own logic. If they understand it, then they are more receptive to it. After all, transparency breeds trust. If they don’t understand it, or even know about it, they may be more inclined to reject or ignore an idea or suggestion. In 100 Things Every Designer Needs To Know About People, (2011) Susan Weinschenk wrote about the human need to categorise. She said, “Just as the visual cortex imposes patterns on what we see, ...people will impose categories when they’re confronted with large amounts of information. People use categorization as a way to make sense of the world around them, especially when they feel overwhelmed with information.”
Grouping information with clear, consistent messaging and branding makes people feel they’re in the know, helps them understand what belongs together. Don’t only state what - make sure your customers know when and why events will occur to make them feel they’re involved and up-to-date. All of these factors can help towards getting customers through the checkout process.
A Patch example of telling customers what’s happened, and what is happening next.
Another element of portraying dependability is using common, recognisable trustmarks on your site. People want to know that you’re a real company (even when you’re very small), and that their money is safe with you.
Displaying accepted payment methods (using logos), real customer reviews and recognisable logos from the press help to embody a sense of trustworthiness to your company and site.
It’s common by this point of the flow to hide navigational items. Often I hear this is in order to ‘push people down the funnel’ by reducing distraction or jump-off points, but I think of it as a way of letting your customers know they have now entered a secure area of the site. Displaying a padlock or tick for example as an emblem of safety helps users feel more secure (as above). Ethically, I would only advise this if your site is indeed secure!
A key part of designing a checkout flow is the form elements. To help speed up building your MVP, I’m going to share a few tricks I’ve learnt along the way (with a lot of help from Luke Wroblewski’s Filling in the Blanks) to get you up to something solid, quickly. These all demonstrate the previous points about making customers feel safe, in control, and in-the know. If you use these tips, please do so with a view to test it all for your own specific product. One experience or design never suits all and different factors increase or decrease your conversion rates, business-to-business.
Form field titles
In the West, we read from left to right. Scanning a body of text or a form is made easier on the eye, and the brain, if it is aligned to the left, as it is habitual and expected. Form field titles should be outside and above the form field. If you put them inside, then people who click into the field can forget what input you asked for, and have to go to more effort to click out and back in again to be reminded. Pay close attention to the padding between form field title and input field and the next set of title and input fields. The form field title should be closer to its corresponding field than the space between two sets of titles and inputs. Typically, I’ll make it half the distance (see the drawing below). I do this so people can easily understand what should be grouped together.
In addition to a title as a prompt, it’s important to give a viable example. People learn best by doing, and it means they don’t have to guess at an answer. Here’s another example:
A word on colour: Make sure your ghost text example is a lighter colour*, usually a grey, than your form titles and the colour used when the customer types their own answer. This illustrates that the answer is an example, and not permanent.
*Although it should be lighter, it should still have a high enough contrast to make it legible. If you want to test your foreground text colour on background colours to make sure they pass web standards, use this handy free tool from Lea Verou.
Help text and required fields
This harks back to the previous notion of giving people a reason for asking for each entry. Don’t ask for anything that isn’t ‘required’. It overloads a user with unnecessary fields, and clogs up their journey. This means you don’t need asterisks everywhere to specify what’s required and what is not. Christian Holst studies this deeper in his article on checkout forms, and to this point says “when users initially glance over a checkout step, these optional fields will appear as intimidating as required fields, and can thus make a checkout step seem much more complicated to complete than it actually is.”
Equally, if you cannot give a customer-facing reason for asking for a piece of their data, then consider why you’re asking them for it. Make your forms fair and easy-to-complete, rather than seeing them as an opportunity to get extra information from your customers. Earn their trust first.
Radio dials, dropdowns, input fields…
There are many different methods of asking and answering in forms. It’s ok to use a mixture, but make sure you have consistency in your various states of each. If two things look the same, then they should work the same way.
Here are the states a form field can be in:
Completed (with error)
Completed (with success)
I would advise that before you even work out which fields to have in your checkout flow, that you create a style tile for each of these. Then when you know what the content should be, your form is already composed of consistent visual elements. If your brand colours are red or green, make sure the error and success colours you use are different shades. It’s essential they’re clear and high-contrast. If an error does occur, then tell them how to fix it in language they’ll understand.
Form field lengths and heights
Ensure your form field heights are touch friendly (at least 44px high), and that the field length is indicative of input. For example, if the entry is for a UK postcode, there’s no need for it to be an input field that takes up the whole width of a desktop screen. Take your text style, in the correct size, and type out the worst-case, longest input scenario. Add equal padding to the right side of it as you have on the left, and that’s how long the field should be. This means it won't break the form if input is long, but you don’t make form fields unnecessarily wide and people can understand what’s expected of them when filling it in.
Tracking success, page-by-page
It’s so important to work out, quickly, what’s working for your product and what isn’t. Make sure you track the analytics of each page to know where in the funnel your customers tend to move on or drop out. This will guide you with what and where to test to improve conversion rate.
An example, using Mixpanel
There are many other elements and conversion factors in form design, but these are the top ones to help you get started.
For your customer, checking out is more than just a form. The way they feel about your site, your brand and their experience up until now can determine whether they drop out or go all the way. Instil trust and reliability by making sure you use consistent messages, styling and recognisable trust marks. If you can get them to the checkout form, then continue this by holding their hand through a form that never leaves them asking. Your MVP, and indeed beyond, should never be complex. Just remember throughout to message what, why and when.