Tel: 0845 838 0936

Why the User Is King and Usability Is the Crown

by Jake Whiteley on July 30, 2013

You’ve done your keyword research, you’ve optimised your website until it shines and you are climbing the SERPS. Congratulations.

But hang on. You’ve been so busy wooing the search engines, haven’t you forgotten about someone?

The user.

With everyone talking about SEO and rankings, it’s easy to forget who your business is aimed at. The user is going to be buying what you’re selling and what they want is something easy to use.

People’s habits are changing, and that means your customers. Most significantly they are mobile. Whether they are on a smartphone, a tablet or a laptop, if you want people to use your site it must be able to be used in the right way by the target audience desires.

Where others are losing with unresponsive site design, impossible navigation and convoluted registration processes, you could be winning. Think about your user. Sit back and consider the usability of your site and make sure it’s not putting off the very people you need.

Design for the Device

Use of handheld devices is on the rise and as time goes on conversion rates are reflecting this. However, many e-commerce sites still don’t provide a mobile version, let alone a tablet version.

Here at Strategy we recently undertook some usability testing aimed at e-commerce sites selling computer games and modern entertainment systems. The one thing that was instantly apparent is that handset users will immediately click off any site that isn’t optimised for their device:

Comparing products was impossible as you had to zoom out too far to be able to read the text, forms were impossible to fill in, and users had to search to find the price of an item – definitely not a good idea when you consider that mobile browsing is primarily used for comparison and research before completing a purchase on a different device.

The zoom issue is simple to fix: setting the content scale to 1 will rectify this, providing your layout isn’t larger than the screen it’s being viewed on in the first place. Unfortunately, the days of using a single media query to target mobile phones is long gone, and even the standard 320×480 / 480×320 doesn’t work that well any more.

For example, the new Samsung Galaxy 4 is often targeted by landscape based styles when held portrait (the standard width is 480 pixels!), and the 2x pixel density definitely does not help either.

“The secret to effective design is simple: content comes first. Stay away from confining content within rows and columns, and actually consider how a user will interact with the site through their device.”

Without a mobile version, it is safe to presume the website doesn’t have a 768px width version for tablets either, and this is an especially big deal this year as tablets are fast overtaking traditional computers for completing conversions. Also consider this: our test was seeking out an Xbox 360 games bundle, so it is entirely conceivable the user may have been viewing the site through their games console and therefore on their 43″ TV at home.

Would your site translate well onto the big screen as well as the small screen? I think not, as even web giants like Facebook look terrible on a 27″ iMac.

A good example of designing content for the viewer’s device would be a related products section on a product page: the mobile version should definitely not consist of images above one another  which so many designers seem to favour. Although scrolling is a lot easier than clicking, scrolling down multiple screen heights can detract from other content lower down the page. Instead use swiping as a navigation method, as this takes no more time than scrolling, works well on both aspects and you can provide feedback to the user on the same screen as the image.

Navigation

So many e-commerce sites get this horribly wrong.

The standard way of thinking is that if you offer a lot of products, it makes sense to allow users to access anything with only one click. Although this sounds good on paper, in practice this typically makes for a frustrating user experience – the user spends more time looking for an item in a sprawling drop-down menu than they do looking at the item itself.

If your company only sold a few products this would not be an issue, but then again, why bother with the drop-down at all if that was the case? Meanwhile, for companies with a large range of products, all a hyper specific drop-down achieves is increased time spent searching for that one specific link you want out of 70 others.

Take tesco.com and their online food ordering service. I wanted to buy fresh pasta and instinctively went to the ‘food cupboard’ as I know pasta is located there. This drop-down contains well over 50 links, none of which are in any discernible order. After finding the pasta section I realised that fresh pasta is not included with dried pasta, and was located in a different menu altogether.

To some this makes sense – dried and fresh pasta aren’t in the same section within the store and are not the same type of product, but to the consumer looking for pasta without a specific type in mind, would it not make sense to present both dried and fresh in one place?

This style of product grouping can stop customers from comparing products and will stop them from discovering new products or extending their buying habits. To draw a parallel to high street shopping, it would be like Curries hiding half their TV selection between the toasters – to a customer looking for a new TV, these products effectively don’t exist.

Generalise Your Products, and Add Specificity Later

This is what it comes down to – specificity.

Amazon and Gumtree both offer more products than anyone would care to count, yet are exceptionally easy to navigate and offer an online experience reflective of actual shopping. When a user shops, it is very rare they know exactly what they want but usually know what type of product they want.

Going back to the initial example of an Xbox, Amazon presents the user with a simple choice to begin with – is the thing you want ‘movies, music and games’ or not? Then is it within ‘Games’ as opposed to music or movies? Amazon allows you to choose from top-level categories, and then a general sub-category.

At no point in the menu does Amazon make a distinction between specific types of product within a sub-category. The user is presented with a simple choice and no more than a handful of links at a time.

“At no point in the menu does Amazon make a distinction between specific types of product within a sub-category. The user is presented with a simple choice and no more than a handful of links at a time.”

It is after landing in the games section that it all starts to get interesting. The left sidebar is filled with specific options that allow the user to drill down to a specific product, or be as vague as they want for the online equivalent of window shopping. A user can now restrict results by platform, brand, rating, price, release date and so on.

Because the results are interchangeable and presented in smaller option sets, a user can find a highly niche product with only a few simple choices – searching through the entire shop catalogue to find an item isn’t necessary.

Gumtree uses a similar method. It starts with vague/general categories, then as a user refines what they want they are provided with new options specific to what they are looking for, with each new set of options being more specific than the previous.

If a user is buying a house they click the houses/flats option and then choose the rough area they are looking for and roughly 1000 results are displayed. They then pick a more specific area and the selection drops to 200. Afterwards they pick 2 bedroom flats, under £200,000 and are presented with 40 final choices. All are relevant to what the user wants, and because the results are displayed in real time, changing an option is instant and either expands or further refines the options available to the user.

Sub-Sub-Sub-Sub Categories

The bottom line is simple. Don’t confuse your customers with too many options at once. Start broad and then become more specific later as this reflects an actual shopping experience, and can encourage users to find new products and make purchases they may not have otherwise considered.

This method also translates well onto any viewing device, unlike drop-down menus which simply do not work on mobiles as a navigation system.

Here is a quick example of how an Xbox console bundle may be found using this approach:

Entertainment -> Video Games -> Xbox -> Console Bundles

All the while providing standard options (filter by price range, release date) and alternate options (A list of consoles/platforms alongside Xbox, and Games/Consoles/Accessories within the Console Bundles set).

Keep It Non-Linear

Allow for all the conceivable combinations of sub-categories, multiple choices from each set, and above all don’t remove options after a selection has been made. The user needs to be able to quickly move around levels of specificity by adding or removing options on the fly.

When searching for a house to buy, a user may want to search two areas within Bristol, and it makes sense to do this as both these areas are within the same option set. However, searching in both Bristol and Brighton at the same time would not make sense as then the site would need to display two option sets of the same specificity level making the UI cluttered.

Registration Process

Use the Correct Keyboard Type

When designing a form, be sure to use the correct type attribute for your inputs. For instance, setting an input to type=”tel” means a mobile user will get a numeric keypad when they click, and type=”email” provides the email specific keyboard.

Desktop users are unaffected by these types and revert to the default of “text” for the time being, so do not be afraid about support for these html5 attributes.

Facebook Login

According to an article on pingdom, 24.3% of the top 10,000 sites have Facebook integration. That may not sound like a lot, but compared to the sites out of the top 10,000 it has obviously made a difference.

Setting up a ‘login via Facebook’ method for your site is actually a pretty easy task. You get all of the standard details that you would want from a user and they will convert higher than before. The thinking behind this is simple – if a user has clicked the Facebook login, then all that is required from them are payment and address details. As the user has already made a time commitment, they will be a lot more inclined to finish the registration as it still seems like less effort than a traditional sign-up form.

Increase the Size of Your Register Button

So many sites will have a username/password form with the smallest ‘or register now’ link buried somewhere underneath it. There really is no logic behind this whatsoever and it stuns me that this practice still continues. Make this button easy to find and as prominent as possible.

Splitting Forms into Manageable Chunks

Another simple but efficient method of simplifying the checkout process (and therefore increasing conversions across all platforms) is to group the input fields together on multiple screens, which each screen being dynamically shown once a user and completed the previous set of questions. This splits the form into smaller and simpler tasks than before, and appears less daunting on a handset device.

Auto Advancing Inputs

Use some simple jQuery to auto advance users to the next field when a field is completed – this can be achieved by checking for an ‘enter’ keypress, but there are many more robust methods available.

Summary

These are only a few considerations when thinking about e-commerce usability, but they are some of the most important. I’m not saying cast aesthetics into room 101 – as it is the look of a website that first draws customers in, and gets them to stay – but an e-commerce site’s ultimate goal is to sell, so anything that makes it easier for a user to do so should always take priority.

So, when you’re thinking about what your users want don’t just think about the ‘why’, think about the ‘how’.

Image Source: Paulo Brandão on Flickr

Share this article

About the Author

Jake is our Creative Developer, specialising in up to date web technologies and drinking coffee. From CANVAS to backbone.js, he is comfortable discussing all things technical and web related.

Leave a Reply

Your email address will not be published. Required fields are marked *

*