10 ways to improve mobile UX

Do you have a mobile website? Is it responsive or did you use a plugin to make it look good? Does it convert? With the use of internet everywhere, your mobile website’s user experience (or mobile UX) should get as much attention as the user experience of your desktop website.

Before we dive in, if you want to learn more about user experience (UX) and other essential SEO skills, you should check out our All-around SEO training! It doesn’t just tell you about SEO: it makes sure you know how to put these skills into actual practice!

In this post, I’d like to share 10 must-do things regarding User Experience (UX) your mobile website. Let me make one differentiation to start with. Although all things mentioned in this post also apply to tablets and phablets (look that up, I hate the word), I have had my iPhone in mind when writing this post.

1. Use a task-based design

Design your mobile website and its structure with the user in mind. He or she uses a mobile phone. He/she probably is on his/her way to whatever and needs to check something on your website. What could that be? Think a moment about the things visitors do on your website (check Google Analytics, use common sense about your business or test it). Decide on top tasks for your mobile website. And optimize mobile UX to make sure these are accessible with the most ease possible.

David Allen already told you. You need to get things done. If someone finds your website and starts browsing it, make sure they can easily find and complete what they wanted to do. On their mobile phone, there are probably loads of apps that they are used to using. Being on the go makes sure the attention span is less than normal. Distractions are everywhere, not just on the phone. Design your mobile UX to make sure they get things done, before switching to other apps instead.

2. Add a sticky menu with a search option

Mobile UX search on Wikipedia

One of the main elements of mobile UX for me is search. I want my search option always to be available when scrolling a page, when clicking to another. The thing is that although we strive to present the easiest website possible like mentioned in the above section, there will always be elements that just don’t fit in that easy. For all that content, I’d like to be able to use a mobile search option.

If you are a real estate broker or sell clothes online, that search option might as well be the most important element on your mobile homepage. Please show that search option in the content area in that case, and make it available via the sticky menu on other pages.

One more thing about mobile UX related to search: having the option is just step one. Make sure your internal search result pages look awesome as well. The image on the right is a nice example of the opposite. These should be ordered on relevancy, for instance, on both desktop and mobile. But what stands out most is the lack of separation of results. Make sure individual results can be distinguished.

3. No dividers needed

Following the screenshot above and that lack of separation; that doesn’t mean I want you to use all kinds of dividers on your mobile website. Dividers take up space, and that might have a negative influence on mobile UX instead. Think of ways to style elements, so they all look like separate sections, without the need for a divider. Use borders, white space, headings. There are lots of things that can be done to improve that mobile UX without adding line elements that just take up space.

Perhaps recommendations like this are all a bit more User Interface (UI) based. But I think that UI is perhaps even more important for mobile UX than for UX on a desktop website. After all the stories about thumb stretch, it seems to make sense to emphasize UI. And right after that, one should realize that with all the different screen sizes, perhaps the one perfect UI for mobile doesn’t exist.

4. Use short forms

As on your desktop website, your mobile site could or should aim for conversion. Buying products, or getting a quote for your services. Subscribing to your newsletter or simply filling out a contact form are all actions that need user input. On a mobile phone, six-page forms ruin the mobile UX. If I still remember your website when I’m back in the office working on my desktop computer, I might fill these out (might – it’s a six-page form!).

For optimal mobile UX, you want to keep forms as short as possible. Remove all the things you want to ask but don’t need. Newsletter? Just the e-mail address (with a type=email input field). Quote? Last name and e-mail address. Shop? Delivery address invoice address Address. Or at least an option to copy the delivery address to the invoice address.

5. Tone it down

Your desktop site probably looks fantastic using all the rainbow colors that were available, but on your mobile website, the effect will be negative. There will be less focus. Your website doesn’t have to be black and white only, but a nice white background, black letters and one or perhaps two supporting colors is enough for a better mobile UX.

I did find an interesting read on blurred backgrounds in apps: Elegance and Refinement of Mobile Interfaces based on Blurred Backgrounds. I don’t think we’re there yet, but this could also provide nice visual options for certain websites. The emphasis in that sentence is on certain.

6. Button hit areas

Mobile UX: Using the right size hit area

It’s so obvious, yet still not common. Mobile websites are usually browsed with a thumb. Google Insights checks this under Size Tab Targets Appropriately. And we need to be able to click elements with that thumb as well.

In the article Designing for Mobile Part 3: Visual design, Elaine McVicar adds numbers to that:

Ideally, buttons should be between 44px and 57px on a standard screen and 88px to 114px on a high-density (retina) screen. This allows enough area for the average fingertip to easily activate a button.

There is one thing that is closely related to button hit areas; touch elements can be too close. It’s annoying to click a link and end up somewhere else, just because the link next to it is too close to the link you wanted. It’s in Google Page Speed Insights as well, like the button hit areas. That tool is not the holy grail of mobile UX, but if Google can test it that easily, why not keep it in mind when designing your mobile website, especially when designing elements like a mobile menu or footer links.

7. Don’t use too many font sizes

Truth be told: I almost forgot this one. Font size is really important for mobile UX. You can’t just use all the desktop font sizes on your mobile website as well. There are two reasons for that:

  1. The mobile screen size. You don’t want the title to fill the screen; you want to make sure the article starts within the first view of the page. Neither do you want the base font (like your paragraph font) to be too small to read without having to pinch and zoom.
  2. You’ll create a mess when using more than three font sizes. The size differences will be much more visible. That’s why I would limit the number of font sizes to two, maybe three.

8. Optimize for speed

Another major factor for the right level of mobile UX is speed. There are multiple tools to check site speed. Most of the time, there are two main areas of improvement. The first one always seems obvious to us: image optimization. Just hiding content is a lazy design solution. But I’m guilty of hiding for instance images sometimes as well, to prevent them from loading. You should at least reduce image size using PunyPNG or JpegMini. In addition to that, you should combine and minify the CSS and JavaScript files that are loaded. The fewer connections to the server that needs to be made, the faster your website will be and the better the mobile UX.

However, there is another factor. Mobile speed depends on the speed of your internet connection as well. Wifi isn’t all around us; neither is 4G. Personally, it depends on my internet connection what kind of websites I visit. Pinterest on a carrier network usually doesn’t give the desired user experience. While their search isn’t right, Wikipedia works fine on networks like that. In the end, connection speed isn’t a factor you can easily design your mobile UX around.

9. Switch to desktop site and back

No matter how well-designed your mobile UX might be, I like it when a website also allows for switching to the desktop site and back again. Phablets (there’s that word again) like the iPhone 6 Plus easily allow for desktop sites, but it could be more convenient to view the mobile site instead. Some mobile sites might lack certain sections you are used to on the desktop version of the site: an option to switch will help.

An alternative is to design for a multitude of browser widths to serve visitors from all kind of devices as we have done for yoast.com. The thing is that the number of mobile devices is growing fast, and so is the variation in browser width. It seems a lot of work to design and redesign for all widths over and over again.

10. Test your mobile UX again. And again.

Recently, we found that one of the pages on our website didn’t work like intended on a mobile phone. We found that when clicking to it from our newsletter on a mobile phone, so not on purpose.

When serving a responsive website to your visitors, you need to make sure that every change on your desktop site is also tested on the mobile version of your site. That is the only way you can make sure your mobile website is always up-to-date.

So, in conclusion, mobile UX is about a lot of things. In this article we have discussed these 10 ways to improve your mobile UX:

  1. Use a task-based design
  2. Provide a sticky menu with a search option
  3. No need to add dividers when sections are clear to begin with
  4. Make forms as short as possible
  5. Don’t add too many colors in your design
  6. Make sure buttons and links can be clicked
  7. Don’t go overboard with font size variations
  8. Make your website as fast as possible
  9. Add an option to switch to the desktop site
  10. Test all changes to your website on mobile devices

Looking forward to your tips!

These are just 10 things I think you should take into consideration when optimizing your mobile UX. I am sure you can come up with more, and am looking forward to your thoughts on the subject: what other things do you feel a mobile website should take in account?

Read more: Mobile SEO: the ultimate guide »

15 Responses to 10 ways to improve mobile UX

  1. Rachit
    Rachit  • 6 years ago

    Are there any plugins, tools to Build the mobile UX for Blog ?

  2. Jill Apolinario
    Jill Apolinario  • 6 years ago

    Excellent article with great directions. I’m going to take another looks at the sites I’ve created and make sure I’m hitting as many of these suggestions as possible.

  3. Flaza
    Flaza  • 6 years ago

    So what is a nice plugin to use to make it look good?

    Do you have a mobile website? Is it responsive or did you use a nice plugin to make it look good? Does it convert? With the use of internet everywhere, your mobile website’s user experience (or mobile UX) should get as much attention as the user experience of your desktop website.

  4. Abbas Haroon
    Abbas Haroon  • 6 years ago

    Just Stumbled upon this post via facebook. The 10 points are amazing. I love using Yoast, I use it on all of my client’s websites and even on my own blog. I don’t know where would be wordpress without Yoast

  5. mfv11
    mfv11  • 6 years ago

    Thanks for all quality information’s I’ve learned in this years from Yoast website!

  6. Piet
    Piet  • 6 years ago

    Interesting article with a lot of good points!

  7. Harpal Singh
    Harpal Singh  • 6 years ago

    Great Post,
    In mobile every pixels count. We should use a proper Font Size + proper margin so that user can easily read the text. Mobile UI SHOULD BE CLEAN and FAST.

  8. James Roberts
    James Roberts  • 6 years ago

    Great post Michiel with some really helpful tips, I will certainly keep them in mind.

  9. Frank Scharnell
    Frank Scharnell  • 6 years ago

    Michiel, another great post I’m relieved to be already doing most of these things. What is the best way you’ve found to give the option to display the full site, and how does that work with the search engines and dup content? Do you use a canonical tag to set the preferred indexed version?

    Also, I know it should go without saying but waaaaay too many mobile sites are out there without being click to call. I always like to remind people to use the advantage of phone browsing and shorten the conversion funnel with click to call functionality where possible.

    • Michiel Heijmans

      Hey Frank, thanks for your comment.

      It’s an interesting issue and I’m open for good, solid thoughts on that. I don’t have a solution present, but do think that it will greatly improve mobile UX and prepare your website for more screen sizes. The optimal solution for a mobile site in my book is still responsive web design. Thinking out loud, that would mean creating two stylesheets, and using something like JS to decide which one to open. But that doesn’t sound solid to me. Another option could be to use PHP for your stylesheet. I’m not a developer, but that seems doable., right? Love to see a developer post a link to a solution like that in the comments.

      You are right on the call-to-action, I think it closely relates to the top tasks at #1.

  10. don
    don  • 6 years ago

    I don’t use a CMS so building a sticky menu is a big deal. Mobile visitors pages/visit and time on site is 70% of Desktop so that’s something I’d like to improve on.
    Has anybody a/b tested sticky menu vs. Non-sticky menu? My question is by how much does it increase use of the menu and search if it’s sticky?
    I do know that when mobile visitors do interact with my non-sticky menu, time on site increases by 300%!
    Thanks in advance, I would love some data.

  11. Peterjan
    Peterjan  • 6 years ago

    Hi Michiel,
    Can you tell us which menu you use on the Yoast.com website?

    • Michiel Heijmans

      Our own, actually. We took features of a number of mobile menu’s we liked and combined these to this one, based upon SIDR.

  12. Keith Malone
    Keith Malone  • 6 years ago

    Nice post Michiel, great checklist for any web developer!

    • Michiel Heijmans

      Thanks :) Let me know in case you have any additions from your own experience, Keith!