Category: UX advice / Ecommerce guides
I was recently asked to present at the Ecommerce Masterplan Virtual Summit, which runs from 18-22 September 2017. Here’s a sneak peak of my presentation, in blog rather than talk format.
I decided to highlight five of the things I see repeatedly causing big problems on ecommerce sites. These are things that I’ve observed over years of working for clients and carrying out user tests.
Let me take you through five things you really should stop doing now if you want your users to hang around and convert, with suggestions for how to do it better.
I know how important email marketing is, and there can be a lot of pressure to get contact details for those users you’ve paid to bring to your site.
However the first thing that users see when they arrive shouldn’t be a request for their email address—it’s like a high pressure sales assistant jumping on you as soon as you step in the door. If this is a new user, they’ll want to understand a bit about you first, and if they’re a returning user then they won’t want to see this on every visit.
These examples are particularly poor uses of the email pop-up. Both appear before the user has had a chance to understand what the company offers. The one on the left tries to tempt you with ‘exclusive offers’, which is vague and doesn’t give much of value. The one on the right is the laziest implementation I’ve seen with just a field for your email address and no explanation of how it will be used.
Pop-ups are something that is so prevalent on the web, users have become conditioned to ignoring them and clicking close—with an arms race for more passive aggressive modals ensuing. Think smarter about how you can request an email address: what can you offer the user in return? When would be the right time to put it in their journey? Can you do so in a way that doesn’t block out the screen they were on and break their experience?
Mobile is now a huge part of ecommerce traffic and has been for a while. The ecommerce sites I work with regularly have over 50% of their users coming from mobile devices.
Despite this many search and category pages have clearly been designed first for desktop, then condensed down. This makes for an experience that is usually a struggle on smaller touch screens, particularly when it comes to filtering.
On the left is an example of a shrunken desktop screen, where there are far too many buttons and options too close together for users to be able to comfortably tap them (you should aim for 40px height for tappable elements). Also dropdown menus require a lot of work on mobile with the user needing to tap, scroll through options, tap their option, and then tap ‘Done’.
The example on the right shows a filter experience that has been designed with mobile in mind. To start with there is a lot less in view at once, offering plenty of space between the tappable sections. There is also use of a field that is more mobile friendly: the ‘stepper’ which allows the user to easily move through numerical options without fiddly dropdown fields.
I've written in more depth about how you can design better mobile search filters.
People working on websites tend to think users don’t read paragraphs of text. It’s true that people generally scan but if the content is easy to access then they will read more—too often it’s the sites that don’t make it appealing to do so. The product details and descriptions are the main places where big blocks of text get dumped.
On the left is a poor desktop example where the font is far too small (a throwback to early days of the web). It also suffers from excessive line length, which makes it hard for users to scan across and find their place on the next line easily. The ideal is to aim for 50-60 characters per line for comfortable reading but there are about 145 here.
On the right is an example for mobile where the font is again too small to make reading appealing. In addition the line height is a bit tight and there are no paragraph breaks, which is the simplest way to make a mass of text much more readable.
Don’t be afraid to use nice big font sizes for your text: look at the likes of Medium where they’ve invested in making a very readable site and use 21px body font. Variety is your friend when dealing with lots of text: you can break it up with different sizes of paragraph, use bullet points and white space. Take a look at BBC News, who tend to only have one or two sentences per paragraph to make articles readable on screen.
This sounds obvious but the process that a user goes through to buy something should be clear and easy to follow. At each stage of their journey it should be obvious where they should click next to go to the next step. If you’re giving users too many equal options then don’t be surprised when they drop off.
In this example there are five different buttons available to the user on the basket screen. It’s not immediately obvious which is the primary one that will take the user to the next step of checkout, as they are all similarly prominent.
There are also two routes through to checkout presented, with the PayPal button providing another choice. I’d look to avoid giving users this decision at this stage and would just insert PayPal as a payment option later.
You should always make your main action stand out with a colour that is used sparingly elsewhere on the site (ideally only for primary CTAs). It should be easy to spot which is the main action on any page.
There was a time when every new shop you visited online meant creating a new account. Fortunately most websites don’t do this any more but every now and then I come across one that forces users to create an account to buy.
Users generally hate this and try to avoid creating another password wherever possible—it’s a stressful experience, particularly when there are awkward password rules in place. Being forced to do so will make a lot of people think twice and often just return to the safety of a site like Amazon where they already have an account.
This example also manages to confuse users by telling them they need to sign up but defaulting to the sign in page. I’ve watched a lot of tests where users don’t fully understand the difference and spend time trying to create new passwords on the sign in screen, which just leads to errors and frustration.
The best option is to simply avoid getting users to create passwords altogether. If you must offer this then you can actually set one for them and then get them to reset it if they ever log in. Or you can get the user to create one at the end of the checkout flow, showing them the beneficial reasons for doing so (for example being able to see order progress and updates).
— — —
To see me do the full presentation with an extra 20 mins of my thoughts afterwards, not to mention get a load of other great talks on ecommerce, sign up to the Ecommerce Masterplan Virtual Summit here. It’s all free.
If you want more tips on what you should be doing on ecommerce sites, you can take my free ecommerce design email course, which gives you 16 tips from my book. Sign up below.