The other day, I went to help my mum complete a transaction online.
The objective was simple: buy an event ticket.
It turned out to be far more complex than I imagined, and I soon ended up as frustrated as she did.
Here’s my list of what went wrong, and how it could have been improved.
How to not set up your online store to enable users to buy
1. Don’t make your store branding consistent with your main site
Let’s call the website owner Company X.
The online shop was actually provided by a different retailer, Company Y, and was loaded in via an iFrame.
This led to a website within a website.
The main branding colour of Company X was orange, and Company Y red.
The page had 2 logos.
Multiple navigation bars.
2 footers.
Not a great look.
Solution
If your store is hosted by a third party, don’t embed it within your existing site.
Check that you can use your logo and match the colours used to your brand.
2. Don’t make the user click more than they need to
So we went to add the product to the basket.
This generated a popup – “Please select a Quantity”.
Then clicked to remove the popup.
Ah right, we missed choosing a number from the dropdown.
But how about assuming we want to buy at least 1?
Then there was a second dropdown for the ticket type.
Same type of popup.
😡
Annoying. Especially when there was a single option for ticket type anyway!
Solution
Auto-populate the product quantity as 1 and let the user change it.
Put any error messages inline (next to the form controls), rather than in a pop-up.
Think about the wording used: good microcopy makes a good user experience.
3. Force users to log in before they can add a product to the basket
Imagine you go out to a wonderful art and craft shop (or cookware shop – whatever takes your fancy).
You pick up one of the beautiful items for sale, only to be shouted at by a shop assistant.
Oi! Put that down! l need your name and email address first!
Wouldn’t take that all the joy out of shopping?
I cannot think of a good reason for most stores to do this.
There is an exception: online supermarkets usually ask you to log in or create an account before adding items to the trolley. This is for a couple of reasons:
This is for a couple of reasons:
- So they can check that they deliver to your area.
- So you can select a delivery time for your groceries, and they can reserve the time for you while you shop.
Solution
Add login/register when the customer is ready to checkout.
Or don’t add it at all and allow a guest checkout. Forcing registration is a cause of cart abandonment.
4. Have inadequate user feedback when a product is added to the cart
“Item added to cart” popping up for a second doesn’t cut it – it was a real blink and you’ll miss it moment.
I could have sworn there was no message at all!
Solution
Show the user a summary of what they’ve just added and keep it on screen.
5. Have a cluttered interface so that you can’t see how to checkout
The next problem was – how could mum checkout?
It wasn’t obvious.
Clicking again on the ‘Add to Basket’ button didn’t help.
The message was:
This item is already in your cart. Please update quantity in your cart
She got frustrated by this and ended up calling someone at Company X.
Who couldn’t solve the problem, either.
The issue was that the cart link was hidden away in the inner site’s navigation.
There was so much going on with the page it was quite hard to spot.
Was it necessary to have social sharing buttons on the product page? I don’t think so. Just more distraction.
Solution
Make the user interface really clear and simple.
One way is to show a new page when the product is added to the basket, and provide a “Go to checkout” button if they want to check out immediately.
Stick with convention: Have the cart/basket on the top right of the page.
Some sites also add it in the sidebar or in a footer bar which docks to the bottom of the screen.
Don’t add social sharing icons; if you must use them, put them on a page after the customer has bought the product.
6. Don’t show the user where they are in the checkout process
Checkout is a delicate operation. Any number of things could go wrong.
It’s better when you are gently guided through the steps, and shown where you are.
Given the experience so far, I was not filled with confidence.
Each new screen repeated the basket info at the top.
Fair enough, perhaps, but once the billing info was submitted, the screen looked… exactly the same!
It turned out you had to scroll down the page to add the credit card info.
Well, that was obvious. (Not!)
Solution
Add breadcrumbs or another indicator to show the user where he/she is in the checkout and payment sequence.
Have as few steps as possible, and test, test, test!
Read: 11 of the world’s best ecommerce checkouts
Read: Why Most Online Shoppers Don’t Make It Past the First Step of Checkout
7. Make the T&Cs checkbox hard to see
When it came to submitting payment, there was a “Please accept our terms and conditions” checkbox and link.
The link was styled to look like a button, so it stood out.
Unfortunately, the checkbox did not. It was tiny and almost invisible on the page.
I had to point out to my mum where it was so the transaction could continue.
Solution
Warn the user before a new window or tab is opened in case he/she gets frustrated trying to return to the site via the Back button.
Style the checkbox so it stands out, or the area in which it sits.
Read: What’s the best place to put terms and conditions on an ecommerce?
8. Don’t send a final confirmation email and receipt
Finally, when we got to the end of the saga, there was a confirmation page, but it wasn’t a particularly friendly one.
It said “Transaction successful” but missed out the product name.
And there was no confirmation email, so printing/taking a screenshot of the page was the only proof of purchase.
I’m guessing that the mixing the two domains could have been responsible and that Company Y couldn’t send email through Company X’s site.
Solution
Send out an order confirmation email straight away.
At minimum, it should:
- thank the customer for their purchase
- show the order details
- indicate delivery time, if applicable
- provide contact details for the store
Read: Best Practices for Optimizing Order Confirmation Emails
Summing up
It would have been really easy to give up at any point in the transaction.
What kept us going was the necessity to book for the event in time.
But if either of us had been ordering a physical product from this store (and they were available too) we would have given up long before reaching the end, and gone elsewhere.
A bit more thought in the store design would have saved a lot of grief.
What’s been your best and worst ecommerce stories?
Have you had a frustrating online store experience?
Please leave a comment and let me know.
Maria says
You’ve been spot on, Claire! One more thing that could drive a customer crazy (certainly me) is when the website requires the full address information, including the post code and sometimes even the phone number, but the form control is configured to accept those details only in one locale, usually appropriate only to where the business is geographically located. So frustrating to see one’s input getting repeatedly rejected because it’s not in the right format!
Claire Brotherton says
That’s a good point, Maria.
Nothing’s more annoying than an error message that doesn’t tell you why your input is wrong.
What would be the best way to restrict sales to one locale, though?
Maria says
Not only is it frustrating to have your input rejected without explaining the reason, but it’s even worse when you’ve been given the option to select your location, and when it comes to enter country-specific information, your correctly formatted input is rejected because it’s not correctly formatted according to the locale the website’s form is configured for. For instance, you’re in the UK, you select UK from the provided drop-down box, enter a UK post code but the form is configured for a US zip code and rejects your input. I found myself in this situation and didn’t think twice about abandoning my cart never to return to the website in question. As for your question, I think that by using geolocation it’s possible to prevent customers from certain countries, or from all countries but one, from buying on a website. If it’s a WordPress site, the General Settings in WooCommerce give you the option to select selling locations, among other things. Also, I’ve found this plugin for WooCommerce, but I haven’t tried it myself, therefore I can’t vouch for it: https://wordpress.org/plugins/product-country-restrictions/
Claire Brotherton says
Thanks for the note of the plugin.
It certainly makes it more challenging, selling globally.
You need to learn a lot about country-specific formats and validation.
Even entering info in the US date format, with the month first, foxes me sometimes!
Julia Bernard-Thompson says
So true. I’ve seen this with businesses that sell services too.
Their “work with me” hidden away in the about page or some other craziness.
10 hours later I’ve stormed off in a virtual huff!
Great post
Claire Brotherton says
Thanks Julia – I think that’s a different problem from buying online, but still frustrating!