17 Ways You Can Improve Your Website’s Mobile UX
Web Development

17 Ways You Can Improve Your Website’s Mobile UX

7th July 2016

SEO and UX: two things often treated as separates but in fact have become more important for each other than ever before.

 SEO has the data that UX needs. UX has the web design framework that SEO needs.

It wasn’t until recently that I really started to explore UX in more detail and looking at how it really affects what I do as an SEO, and how I can leverage it to help my clients perform better in the SERPs.

After recently reading a post by Briony Gunson, I realised how broad SEO had become, and how it has become more than just getting keywords to rank well (although still important!). Now we’re thinking broader, thinking more about getting traffic to a website, then trying to leverage it for improved engagement and conversions.

It’s this key relationship that’s brought me to writing this post, where I’ve decided to look into mobile specifically as this is an area where there’s still a lot we can learn.

Based on previous studies and personal experience, I’ve pulled together some common factors that are overlooked in mobile UX, but ones that, if executed well can really improve on-site engagement and as a result, conversions.

1. Allow Switching Between Mobile and Desktop Site

In some instances, companies merely simplify their desktop site for mobile, and as such lose a lot of the valuable information and functionality. In these occurrences, the mobile version won’t meet the needs of an experienced mobile user and as such, it’s best practice that a site offers the option to quickly and easily switch between mobile and desktop. This is usually done through a footer link.

When linking to the desktop version, avoid referring to it as the ‘full site’ otherwise you run the risk of selling the mobile version short!

2. Split Test Navigation Menus

Test, test, and test again. This is vital when making changes to the navigation of your site to test if it actually works. Although some may argue differently, there’s no right way to display a mobile nav that’ll work across the board – it’s all about identifying what works best for the user on your website through split testing.

Mobile Navigation - Hamburger

There are a few ways you can display a mobile website menu, one of the most common being hidden navigation items behind a hamburger icon, however the effectiveness of this has caused many debates. Whether you opt for hidden, visible or combo navigation, make sure you’ve chosen as a result of split testing.

3. Single Window Viewing

Ever found yourself frustrated with a mobile site that seems to open most links in a new tab? I certainly have. With mobile, it’s all about speed. Being able to find what you want almost instantly is what mobile is all about, so unnecessary forced tabbing (that’s a word, right?) just isn’t ideal.

Try to keep links that create new windows down to a minimum, I’d recommend only using these when pointing to an external website.

4. Tap-to-call Numbers

Allowing for a quick and easy conversion process on mobile really helps to decrease the chances of abandonment. Mobile users are often on the go and as a result are usually limited with time so they need a conversion process that is tailored to this.

By converting your static business number into a clickable link, you can help speed up the process for a user trying to contact you, removing the need for manual dialling. This really speeds up the conversion process, whilst also improving the user experience.

5. Field Input Types

Mobile browsing is a tapping experience with as little typing as possible, that’s why when a user is required to type, you want to make the process quick and the experience as pleasant as possible. One way to improve this is by aligning the right mobile input types to the form fields.

So, what are they exactly? In short, they are bits of code coded into form fields that help to identify what virtual keyboard should appear when a user taps into a specific field. Although a relatively small alteration, it can really make the difference for a user.

Mobile Input Type Forms

For more information on the different mobile input types, visit the following website.

6. Form Refinement

Something that works well on desktop rarely ever works just as well on mobile, an element of device adaptation is needed. Both devices tend to be used in different environments and users of each exhibit different types of behaviour, whether it be the way they take in information or how they flow through the conversion funnel.

That lengthy form you have for desktop users is very likely not going to work for your mobile users. With mobile, you want to refine your forms down to the essential information needed to process an order. We get it, user information is tasty but we don’t want users leaving in the midst of a conversion! Cut out what you can afford to.

7. Contact Number Labelling

Sometimes those lengthy forms can’t be avoided, however neither can a user’s frustration for them. If a long form is absolutely necessary, ensure you have a clearly labelled tap-to-call number visible for when the form-filling process either becomes too tedious or complex.

8. Multi-Part Forms

On the topic of long/multi-part forms, one way you can increase the likelihood of a form completion is by clearly indicating the progress made by the user. Whether it be a coloured bar at the top or a simple ‘X% Complete’, make the user aware they’re nearly finished.

9. Form Field Labels

More so with forms, the way you label each field is also important and each brings individual pros and cons. One of the options I often recommend is putting field labels above form fields, this may increase the need to scroll but this is typical when navigating on mobile.

As mentioned, there are other options but in my opinion, the other common choices aren’t as suited for mobile:

  • To the side of the field – these take up valuable screen space. We’re very limited with how much screen width we have and the more text to the side of a field, the smaller the field can be.
  • Disappearing labels within the field – these rely on the user remembering the information they’re supposed to be entering. Along with that, it also makes it very difficult for the user to check over all their information before submitting.

10. Prioritise Primary CTAs

Trying to get an important message or offer across to a user? Chances are that if you stick your CTA near the end of your website, your user is very unlikely to see it.

If you’ve got something you want to shout about, prioritise it in the order it appears and in the most prominent site space – above the fold if possible. Due to the screen size you’re dealing with, when it comes to mobile you’ve really got no room for wasted space. I don’t mean filling every single bit of space – the right amount of white space isn’t wasted space, and in fact, can actually beneficial.

11. Navigable Logo Link

This may seem pretty obvious, however there have been a few cases where I’ve seen website logos not being used as a navigable link to the homepage, it’s clearly something that tends to be overlooked.

Although mostly differing, there are certain behavioural characteristics that are prevalent across almost all mobile users, one being the use of the website logo as the primary way of navigating to the homepage. It makes for a quicker way to navigate a site and mobile is all about speed!

12. Site Search

A site search feature on a mobile site is a blessing, it makes what you’re looking for easily accessible, removing all the irrelevant information on a website leaving just items related to the user’s intent.

The clearer the site search feature on your site, the more likely it is that the user is going to use it. As it’s an important part of the navigation process for many users on a mobile site, it needs to be prominent, commonly this is done by placing it at the top of a page.

Using autocomplete is a great addition to a site search – you want to reduce the work required by the user to complete their search!

Mobile Website Site Search

13. Site Search Results

When returning results from a site search, you want to make sure the strongest results are returned, this can be done by arranging them by ‘most popular’ or ‘highest rated’ by default.

Further to this, allow users to refine their search even more with the use of filters. Search filters can really make the difference of a search functionality.

14. Login Walls

Ever walked up to a locked shop with blacked out windows and handed over your personal information to go in? No, me neither, and it’s this same premise that applies to online shopping.

If you operate a site that requires a user to login before even beginning to explore, make sure you’re giving them an incentive to do so beforehand. Without any incentive, a user has no proof that you’re offering something they want/need.

Best case scenario? Don’t have a login wall in place at all, they can be extremely off-putting for users.

15. Sign-in Options

One thing that’s becoming more and more common is allowing users the ability to sign-in/register to a website using just their social accounts. From a user perspective, this is great as it essentially bypasses the laborious registration forms and of course helps to speed things up.

Social Registration Form on Mobile

If possible with your website (as I know this may not be suitable to some businesses), trial having this in place. You may feel like you’re sacrificing parts of your data collection process but it’s likely you’ll see an increase in account registrations.

16. Pre-filled Form Fields

As mentioned earlier, one of the most important factors on mobile is speed – from research to conversion, it needs to be fast. Pre-filled form fields for registered users is a good way to make what is often the most tedious part of the purchase process much more pleasant for the user.

17. Cross-Device Purchasing

Mobile is very important to users in their purchase process, especially when it comes to researching a product they’re looking to potentially buy. After product research, not every mobile user converts, many complete their purchase either offline whilst others switch over to desktop.

There are a number of things that we can do to match cross-device purchase behaviour:

  • Shareable product pages
  • Save-to-cart feature

Both options allow users to quickly continue with their purchase process even after changing devices.

A Final Thought

The most important thing to do with your mobile website is to test, then test some more, and keep an eye on those stats after any change made. A lot of mobile website optimisation is down to number crunching, and following the signals that are telling you if something is or isn’t working for your user.

Now it’s over to you, do you have any other mobile UX wins? I’d love to hear them, feel free to find me on Twitter or leave a comment below. This list is by no means conclusive so I won’t be surprised if I’ll be updating this in the future.

Tags

Written By
Luke Monaghan is an SEO Executive at Koozai, a Southampton based Digital Marketing Agency. He has a keen interest in organic search, specifically the growth of mobile search and how it’s changing the search landscape.
  • This field is for validation purposes and should be left unchanged.