How To Design A Frustrating Online Store Experience

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.

Category: Websites Tags: ecommerce, online shopping, user experience