Taking Advantage Of Google’s Mobile-First Index

All the hype in the industry press has caused panic amongst some, however, if you have a responsive site and are sticking to Google’s guidelines then you shouldn’t have too much to worry about. That being said, this urgency has caused lots of retailers to up their game so if you don’t have mobile usability improvements on the roadmap, you could be in trouble!

To make sure that your customers are getting the best experience on a mobile as possible, and to prevent them from straying to your competitors, here are a few quick and easy design changes that we recommend you implement if you haven’t done so already.

Don’t narrow navigation too much - provide choice

One of the biggest misconceptions when it comes to mobile usage is that users are always on the go and always in a rush. In actual fact much of our time browsing on mobile takes place when we have time to kill such as when we are commuting or sat at home on the sofa. This isn’t to say that your pages don’t need to load quickly – having a fast website is extremely important. But users aren’t necessarily desperate to complete their goal as quickly as possible – they sometimes just want to do research or find inspiration.

This is likely to be reflected in the user behaviour you see in Google Analytics. For many websites mobile will have overtaken desktop in terms of sessions but conversions are still likely to be behind on a mobile. It’s important that you are providing choice from your mobile homepage and internal navigation.

Provide internal links to blog articles and help content from your homepage, make sure you are linking to other products from your product pages and add a block of related articles to the bottom of your blog posts. This additional navigation may not increase your mobile conversion rate but it should hopefully improve your profits as you’ll be providing a better experience for all stages of the buying cycle.

Improve the text input experience

No one likes filling out forms so text input should always be minimised where possible with address lookups, search result predictions and additional payment methods such as Amazon Payments and Paypal. Sometimes there’s no getting around the fact that the user needs to fill out some of their details.

To streamline the experience as much as possible make sure that you are doing the following:

• Always provide the correct input method. If the field is for a telephone number make sure that the number pad is automatically brought up for them.
• If you want the user to fill out a field where there are limited options such as county or card expiration month and year, provide a drop-down or toggle menu.
• Provide real-time error messages if a customer enters their data in the incorrect format. This will prevent them from becoming frustrated if they submit the form and are returned to the previous page.
• Display field placeholders and labels to provide the user with an indication of how their information should be entered. This will encourage them to enter it correctly the first time around.
• At the checkout make it as clear as possible if the customer should be entering their delivery address or billing address. Adding a note such as “where your card is registered” or “where you want your order delivered to” can help to make this clearer for users. Adding a tick box directly below the billing address saying “delivery address same as billing” can also help.

Make sure calls to action stand out

Because mobile screens offer limited space it’s important that all key calls to action are presented to users clearly and are easy to find. Google recommends making sure that these are front and centre where possible.

For calls to action on pages that are part of the sales funnel such as the product page, basket and checkout it’s a good idea to stick to a single design and choose a colour that stands out from the rest of your site.

You should also make sure that you are considering how users behave on a mobile. For example take the product page – on a desktop it’s likely that you can include all key content above the fold however on a mobile this can be tricky. The user may want to read the specification or reviews by which time they’ve scrolled way past the add to basket button. Therefore in this case it might be an idea to add multiple or a persistent add to basket button so that the user doesn’t need to scroll back to the top of the page after finding the information they were looking for.

Keep any menus clear & concise

Because of the limited space on a mobile it’s not always easy to get across the same information as on a desktop. Where a desktop user can hover over an option to get more information, the mobile user needs to commit to a click. For this reason you need to make it really clear to users where they’ll be taken if they click that option. We recommend going through each item on your mobile menu and asking “If I had never visited this site before, where would I expect to be taken if I clicked this option?”.

At the same time you need to make sure that your menus are as short and concise as possible – users don’t want to scroll through a huge list of options to find what they are looking for. A great way to shorten menus without losing options is to add in a concertina menu so that the user can narrow down and get to the most relevant page.

This blog was originally posted January 2017. Latest update September 2019.