Did you know that 55% of all e-commerce traffic is now on a mobile device?
That’s right, more than half of all people who are looking at shopping sites are on their phone or tablet.
Yet, here’s the problem: 46% of the top 50 retailers still don’t have a responsive mobile site. So, even though half of all shopping traffic happens on a mobile, half of retailers aren’t set up for it. That means half of shoppers are pinching and zooming and twisting their phone to see a website properly.
So we’re agreed, a responsive, engaging mobile site is essential. But that’s just the start. Like a desktop site, you can tweak and optimize your mobile site so it boosts sales even further. Here’s how:
Working with such a small screen is always going to be tricky. That’s why simplicity is your number one goal. For e commerce sites it’s especially difficult, because there’s so content much to squeeze on. How do you promote all your products without cluttering the small screen space?
Look at how ETQ display their range of shoes on their mobile site. It’s beautiful in its simplicity. They have left the majority of the screen space completely free in order to give their products centre stage. Even the colour palette has been chosen to match its product range. It gives the entire site a simple, cohesive feel. Even though the screen is tiny, it feels spacious.
Try holding your smartphone now. Move your thumb around the screen and feel where it’s most comfortable and natural. Everyone’s thumb size is different, but generally this image below applies to most people:
With this in mind, you don’t want to put any buttons or essential components in the top sections. Leave that for headers only. Put all your scrollable content and buttons in the middle so it’s easy and comfortable to reach. (Don’t forget to think about left-handers! Flip the images above to see how things work out for lefties).
In addition to thumb ‘reach’, you should also consider the ‘big thumb’. We’ve all used a mobile website where you have to click on the tiniest link. It’s difficult and frustrating, right? The general rule is opt for bigger elements than you think necessary.
Hobbycraft’s mobile site is a good example. First of all, their big picture links make it super easy for big thumbs. But take a look at their icons across the top (‘stores, account, basket’). They’re much bigger than you’d usually expect. Hobbycraft is thinking of the big thumb, and so should you.
One of the most popular design trends of the last twelve months is the ‘hamburger’ menu. You can see an example on Hobbycraft’s site above. It’s the three lines that look like a hamburger – click on it, and the full navigation menu expands.
There’s no room for the traditional header navigation and it would simply clutter the screen. Instead, opt for an expanding nav. There’s a fine balance to be found here. It should be tidy and out of the way. But, at the same time, it should be obvious and easy to tap.
If you’ve got a lot of products and categories on offer, you use the expanded menu to make it easier. Don’t be afraid to use the whole screen space. Look how Argos presents their expanded menu below.
A small mobile screen forces us to think long and hard about the font we use. There’s no room for small, intricate fonts. Instead, think simple, bold, and large. Generally, a sans-serif font is cleaner and simpler (i.e. Ariel is better than Times New Roman).
Bear in mind, this decision will also force you to choose your copy and wording more carefully. Use this opportunity to simplify and optimize your copy. Try to convey your message as plainly and simply as possible. Make it short. Make it snappy. This won’t just make your mobile design better, it will make your entire business better.
People hate using tiny search forms on a mobile device. It forces us to zoom in, click the search box, and type with the fiddly keyboard. Mistakes are easy and it can lead to frustration.
To improve the user experience, use a ‘smart search’ box. When you click the box, the design should automatically refocus so the search box fills the screen. Then, make sure it has predictive search, so the user need only enter the first few letters.
You can see this in action on Europcar’s website. The customer begins to type ‘Norw’, and the site automatically suggests its various Norwich branches. Simple.
We talk a lot about making your signup and purchasing forms as simple and quick as possible. It’s a key part of your UX design strategy. It’s also the place where e commerce sites lose up to 60% of conversions by over complicating things. If they’ve started the process, the customer is already convinced. The only way you’ll lose the sale or signup is by making things too difficult.
Again, try to limit the amount of typing necessary. Use predictive type boxes and enable auto-fill options. Use scrolling tools for users to choose date of birth options, for example. We know that purchase forms often require a fair bit of information. However, there is a way to make this process simpler.
Look at how Firebox use a number system to show users what stages are left in the process. A key UX design trick is letting users know where they are. As customers, we like to know what we can expect, and Firebox does this expertly.
It’s much easier to ‘get lost’ on a mobile website. Ideally, you want to make sure your mobile site is only three layers deep. An example of how this might work on a fashion e-commerce site is as follows:
That’s three simple layers of discovery. The only further option should be the purchase page or sign-up. Try to avoid a rabbit hole of sub-categories and further options. As always, keep it simple, and let users know where they are at all times.
Once your customer is three layers deep, always give them a bold and simple way to return to the homepage. Remember, it’s easy to feel lost on a mobile site, so give users an easy way to ‘reset’ and go back to the start.
Take a look at Lush’s product page. If your customer has somehow navigated here, they may want to start over. The large ‘LUSH’ logo at the top is an easy and obvious identifier for returning home. No matter where you are on the website, you always have that anchor that will get you back to the start.
For a long while, mobile sites were simply a copy of their desktop design. It meant you had to zoom in by pinching the screen. This is a dangerously outdated design trend and should be avoided. Ideally, everything should be proportional to the screen. All fonts should be readable without zooming in. All links should be clickable without pinching.
There’s only one exception when pinching is useful: product pictures. It is still very useful for customers to pinch and zoom into product pictures. They want to be able to see every little detail before they buy.
Despite the huge amount of traffic to mobile e-commerce sites, there is still a general concern that buying something from a mobile site isn’t as ‘safe’ as a desktop. Of course, there’s no difference in security from mobile to tablet to desktop. But a 2013 study shows that nearly half of all online shoppers feel less secure when buying something on a smartphone. This fear is likely to kill your conversions.
It’s is a simple question of trust. It’s your job to make customers feel safer on your site. Your e-commerce site should, ideally, have an SSL security certificate already. If it doesn’t, purchase one. It’s what gives you the small yellow padlock on your toolbar. On your mobile site, make sure you display the SSL padlock as prominently as possible.
Another option is making sure your customers can save a product for later or email it to themselves. In some cases, they’ll feel safe buying it later when on their desktop.
For many people, creating a mobile site simply means choosing a ‘responsive’ theme on WordPress or Shopify or whichever platform you’re using. While that’s a good start, you’ll want to pay close attention to how the theme automatically shuffles your content around. Not sure what I mean? Take a look at this diagram below:
This is how a responsive theme might automatically stack your content for a tablet (left image) or a smartphone (right image). Consider carefully what your most important pieces of content are, and ensure they are stacked correctly. For example, on the right hand side, the products (box 5 – types of baths) are forced way down the screen. They may even be pushed below the ‘fold’.
Experiment with your layout and content stacking to make sure your most important content appears in the right place.
Flash is a relatively outdated format on any device. (In fact, designers are fighting to kill it once and for all! It swallows resources, it’s slow, and it’s a playground for hackers). While that’s bad news on a desktop site, it’s even worse on a smartphone or tablet.
Most mobile devices won’t play flash media at all. So if you rely on it for a video or product demonstration, get rid of it – your customers can’t see it on a mobile. Apple blocked it years ago, and Android followed suit shortly after.
The alternative is making sure your website is HTML5 compatible (find out more here) and use YouTube to host any videos.
Many people I have spoken to have expressed frustration about the limitations of a mobile site. The simple fact is this: there’s nothing you can do about it! Instead, embrace these limitations.
It forces you to make important decisions that will help your entire business. How can I simplify my website? How can I get my point across in fewer words? How can I be more precise and compelling in a smaller space? Which of my products should I prioritize?
I firmly believe that answering these questions makes your business stronger. Any time you can distill your proposition, you make it more powerful. And that’s essential for a good mobile site.
The trouble with designing for mobile is that there are so many devices to consider. Do you optimize your layout and design for the iPad or Android tablets? Do you optimize for iPhone 5 or iPhone 6? Or the Samsung Galaxy?
A responsive design means it will mould in a different way to each. Here’s where Google Analytics can help you out. The latest version of Analytics allows you to see which mobile devices are accessing your site most often:
In this case, iPhones are the leading device – by a long way. So it makes sense to do all your testing on an iPhone. Prioritize the top device when you’re optimizing your mobile site.
Even though mobile devices now dominate the online shopping market, mobile websites are still a long way behind. They’re treated as an afterthought by half of the biggest retailers.
By making these tweaks and changes, you can get one step ahead of the competition by capitalizing on this huge flow of traffic.
I’d love to hear what you’ve done to optimize your mobile site. What tweaks have worked for you?