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.
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 it’s 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 to always 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, whitespace, 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 really 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 really 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. Emphasis in that sentence is on certain.
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.
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 really 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 less connections to the server that need 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 really 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, like 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 own 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 own 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 in consideration when optimizing your mobile UX. I am sure you can come up with more, and am really looking forward to your thoughts on the subject: what other things do you feel a mobile website should take in account?
This post first appeared on Yoast. Whoopity Doo!