The native Magento 1 checkout was a laborious 6-step process and was widely criticised by merchants and partners, with most opting to use a third party module or re-build it. Unsurprisingly, merchants sought more compact checkout alternatives, and often opted for One Step Checkout, which provides a clean one-step solution that also has a lot of freedom to edit fields and the front-end:
Happily, Magento 2 merchants no longer need to rely on a third party for the most crucial page on the site. The native Magento 2 checkout is a slick 2-step process which appears to have been honed using Baymard Institute’s E-Commerce Checkout Usability research study (as with Spotify’s often praised checkout experience):
Merchants replatforming to or migrating onto Magento 2, therefore, can be confident that the overall structure of the checkout is natively very strong, but the design and detail of what’s captured needs to be carefully considered.
Checkout fields
It’s important to bear in mind that the right balance needs to be found between collecting essential information about a customer for order fulfilment, and nice to have data for CRM purposes, to ensure a healthy conversion rate. It’s very tempting for merchants to make all fields mandatory, but the more a customer needs to fill out, the less likely they are to complete the purchase. Discuss with your CRM teams whether Title, Gender or DOB have a place in a checkout as optional, let alone required fields. Bear in mind that this is sensitive information that potential customers may not be comfortable providing and could be the difference between a sale and an abandoned checkout.
If there are some fields that are optional, like title, business name or state, it’s usually best to clearly signpost which information is required and which isn’t. There are a number of ways this can be done:
Asterisks
Asterisks positioned after the form label have been used for years to denote required fields and so are very recognisable to customers and generally expected:
They could be red to be eye-catching, or the same colour as the label font, to be more on-brand.
Highlighting field borders and / or using error message for required fields
This is a nice option initially because, at first glance, the checkout is nice and clean:
However, it can be misleading if some fields are optional because there’s no way of immediately telling this without interacting with the form first. Customers are only made aware that all fields are mandatory if they click in and then out of the field. Unfortunately, this can backfire because if the customer skips a field and tries to save their details, there’s an awful lot of clutter that suddenly appears, that can be quite alarming and off putting.
Additional labelling
If the majority of fields are mandatory, then you could try just appending ‘(optional)’ to field labels where appropriate. This has the benefit of not cluttering the checkout but still clearly signposting.
Unlocking buttons
You can grey out buttons which then become activated when the required information is entered. The below is a blubolt example where not only is the CTA button ‘unlocked’ when an email address is entered, the mandatory email field is also highlighted in green and a tick appears, which is all nice and reassuring for new customers especially.
As always, it’s worth testing what works best for your customers. For instance, you could split test the use of asterisks against additional labelling for mandatory fields, or different asterisk colours, or the word ‘required’ versus ‘mandatory’.
Field length
Include nice long fields so that characters are never obscured when customers are typing details in.
You can see the difference in UX between the email address form length on OSC on Magento 1, where a long email address isn’t fully displayed because the field is on the same row as the telephone number field:
And the lovely long email address field on Magento 2 native checkout, where each field can have its own row:
Equally, it looks strange to have a super long Title drop down field. Field length should be appropriate.
Title or Prefix
Depending on your CRM requirements, this can be omitted or be optional or mandatory. It should be a drop down to ensure consistency, rather than freeform input. Many sites now offer ‘mx’ as an option (gender-neutral). It’s rarely necessary to offer more than half a dozen options in the dropdown list – if you offer more than this currently, it’s worth checking through order data to see if they are all being used. Seeing lofty honorific titles like ‘Hon’ or ‘Arch’ can be a bit off putting to the average online customer!
Email and telephone number validation
Consider a third party contact information validation tool. They can check for misspellings of email domains and should be able to handle spaces and /or special characters (e.g.+44 7…) in the telephone number field, without throwing up an error, like OSC does:
From a customer’s perspective, what they have entered is correct, so it’s best not to put it back onto the customer to ‘correct’. Alternatively your developers can build Javascript that corrects common errors before the order is sent to the Magento order grid in the admin.
Expandable information icons
You can use these to explain why you’re asking for telephone number/email address to allay any data protection concerns e.g. ‘We will only use this if we need to contact you about your order’
Be as descriptive as possible (Osprey and V&A):
And explain what a CVV number is and, if you accept Amex, where it is on an Amex and non-Amex:
Extra hints
Show examples of input format for the avoidance of doubt, whether inside the field or outside of it:
Mobile
Using the right virtual keyboard for a specific field is essential to ensure the smoothest data input possible on mobile.
The Email keyboard is best for (unsurprisingly) the email address field, giving easy access to ‘@’ and ‘.com’ rather than having to select the small 123 button and then find the ampersand, or type out ‘.com’ manually:
Equally the Tel keyboard for telephone numbers gives large, thumb-friendly numbers on mobile:
And unlike the name suggests, the Tel keyboard should be used for all number fields, including card details ( the number keyboard’s numbers are much smaller all on one row and therefore not so inviting):
Address validation
Ideally, it’s best to implement global address autocomplete functionality, especially if you ship internationally. This means that customers can type in any part of their address (not just postcode). This is especially useful for countries where postcodes aren’t commonly used or required, e.g. Eire or UAE:
PCA Predict’s Capture+ service is the leader in the market:
-
- Well-established with over 10,000 international clients
- ‘Fuzzy matching’ kicks in when a customer misspells a part of their address, which means the system can still find the correct address even if there’s a typo, abbreviation or an extra space that differs from the data sources. Also great for call centre staff who may mishear a character over the phone
- Self-learning technology means the system will learn a common nickname for a town and if enough people use it, it’ll be included in future results
Crafty Clicks offers a very similar service (without the self-learning technology), with significantly cheaper lookup rates. They are a less established supplier but are cost-effective and have exactly the same coverage (240 countries) as well as dozens of plugins for popular eCommerce platforms (including Magento 2).
As a minimum (especially if only shipping within UK), a postcode lookup service should be implemented for both billing and delivery addresses (in relevant countries) so that customers only have to enter their postcode / zip code at checkout rather than filling in all address fields manually. This reduces checkout abandonment, checkout time and human error. You would be charged between 2 and 3.5p per lookup by a third party supplier.
Passwords
If your system requires passwords to be formatted in a specific way, then it’s best to detail this next to the form field, rather than throwing an error when a customer enters their password with no initial instructions. This is off putting as the customer has to delete what they’ve entered and start again, so you risk them giving up creating an account. Ensure ‘paste’ function is disabled in the ‘Confirm password field to prevent any mistakes being copied over:
Tick boxes and data capture
A newsletter sign up tickbox at checkout is an ideal place for data capture. Ideally, the email address would be fed straight into your Email Service Provider’s list, rather than having to export the data from your eCommerce platform (Magento’s newsletter grid) and upload it into your ESP or CRM system.
Depending on your data protection policies, the tick box may be opt in or opt out, and it may be pre-selected (until GDPR kicks in May 2018), but it should never be mandatory to sign up to a newsletter to check out. If the sign up tick box is pre-selected, make sure that if a customer un-ticks it to indicate that they don’t want to receive emails, and the checkout page is reloaded for any reason, the tick box should remain unticked, and shouldn’t be re-ticked.
Navigation
Closed checkout
Make sure you remove any unnecessary, distracting clutter from the page. This includes stripping out all but essential items in the header and the footer e.g. remove navigation bar but retain FAQs and Delivery pages in the footer. Below you can see the difference between how the basket and then the checkout pages are framed:
Minimal frame:
Clear progress bar
M2 checkout is a two-page process, so clearly display this along the top of the checkout to set expectations and orientate customer:
Guest/express checkout
Unless there are valid CRM concerns, always offer a guest checkout option, even for customers who are account holders but want to checkout out quickly. This will hugely increase conversion rate as existing customers can still check out even if they can’t remember their passwords and new customers can try out a new website without investing time in signing up. You can then sign post optional account sign in options, to encourage sign in:
This is preferable to gating the checkout with potentially confusing options that have to be selected to proceed:
Delivery options
If possible, offer a variety of flexible, affordable delivery options, including PUDO (e.g. Doddle or Collect+). Ideally offer tracked and next day services to cater for all needs.
Consider Click & Collect and where this will be positioned on the page – ideally it should be before the shipping address is entered to avoid confusion.
Either way, the shipping address should disappear when it’s selected, as in this Oliver Spencer OSC example:
Make sure you have a ‘My shipping address is the same as my billing address’ tick box that is pre-ticked (unless your order data analysis tells you that the majority of your orders are shipped to alternative addresses):
Payment options
Offer a variety of localised payment methods relevant for the territory and display payment logos for instant recognition, like the V&A does:
It’s always worth shouting if you offer Amex and PayPal, as not everyone does. You can also promote the logos in your site’s footer so that customers are well informed before they reach the checkout. It may sound silly, but spelling out that you accept debit as well as credit cards in the field name is also worthwhile to avoid any confusion. If your average order value warrants it, it’s also worth investigating planned payment options such as Klarna, which offers onsite, real-time credit checks and acceptance.
Security
Be sure to work with a PCI-compliant PSP (Payment Service Provider), use a secure connection and maintain a valid SSL certificate (these need to be renewed annually).
It’s worth split testing the use of trust marks, such as a secure lock icon or an SSL certificate supplier’s logo (e.g. Thwarte) because some customer bases respond well to them, others wonder why checkouts need to prove that they’re secure and so conversely find them off putting:
Be sure to run regular PCI scans and apply security patches when advised by your eCommerce agency or platform (e.g. Magento’s admin notifications).
Abandoned checkout email strategy
Either using native functionality, your ESP or a specialist third party (e.g. Nosto, Ve Interactive or CloudIQ), ensure you’re capturing email address and basket contents to send a suite of targeted abandoned checkout emails. You can start with sending the first email 1 hour after abandoning, the second 24 hours after and then the final one 7 days after. Be sure to test scheduling, creative and subject lines as you would any other email creative for optimal results. Ensure these are purely transactional emails (e.g. ‘There is still time to order’ or ‘We’ve saved your basket for you’) and not marketing communications to avoid GDPR issues if you haven’t gained consent for this.
If you’re only planning on sending abandoned checkout emails to email addresses in your newsletter list, then then they are a great place to cross- and up-sell alternative products.
Conclusion
There’s a huge amount to bear in mind when building a frictionless checkout. Formisimo is a great form-specific testing platform that gives actionable insight as to why visitors aren’t converted to buyers at checkout, as well as registration forms. For any more advice, please feel free to get in touch.
One Response
Thank you for the advice!
I don’t agree with “Ensure ‘paste’ function is disabled in the ‘Confirm password field to prevent any mistakes being copied over” though. I’m almost always pasting my complicated passwords and only get annoyed if the pasting option has been disabled. An unnecessary and even bothersome restriction, as far as I’m concerned.