10 ways to improve mobile UX

10 ways to improve mobile UX

Post author

Category

Tag

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.

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

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 addressinvoice 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.

6. Button hit areas

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.

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:

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.

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. In our website reviews, we use 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. Next 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:

Use a task based design

Provide a sticky menu with a search option

No need to add dividers when sections are clear to begin with

Make forms as short as possible

Don’t add too many colors in your design

Make sure buttons and links can be clicked

Don’t go overboard with font size variations

Make your website as fast as possible

Add an option to switch to the desktop site

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?

Michiel is one of the partners at Yoast and our COO. He's happily married to Esther and proud father of his two daughters Puck and Linde. He was one of the first bloggers in the Netherlands and co-founded one of the first Dutch blogs about web design and blogging. At Yoast, he works as a senior SEO consultant for both customers and colleagues. And obviously is a daily, heavy user of all of our plugins!

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.

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

By mfv11on 9 November, 2014

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

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.

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.

By donon 6 November, 2014

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.

By Peterjanon 6 November, 2014

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

In this post, we'll give you a step by step instruction on how to find the data that will help you track your SEO using Google Analytics. The videos in this post (without sound so you can watch them everywhere) show you exactly which steps to take to start tracking your SEO.