With mobile access now accounting for over 15% of web use (and rising) it is increasingly important to ensure that your customers get a satisfying mobile web experience.
That means thinking about the context of use, and planning content and functionality appropriately; for instance to reduce “showrooming” it may be important to ensure that vouchers and special offers are particularly salient on a mobile device.
It means taking account of the nature of the device; for instance the fact that it can easily be moved from portrait to landscape and that it may have telephone and geo-location functionality.
But it also means thinking about design-related customer experience issues, and how these differ from the experience your customers will get when using a fixed PC. That’s what I am covering in this post. So, in no particular order, here are my list of the top twenty ways to improve the customer experience when developing your mobile website.
- Think carefully about what you want to do with the home page. It should allow people to get an overview of the whole site. Take care with the fold on the home page (and indeed all pages if possible): designing a home page so that a section finishes neatly at the bottom of a common mobile screen size won’t help people to discover content beneath the fold.
- Make sure smartphone users are not prevented from seeing the “classic” version of your site (i.e. the version for fixed PC) . There should be an easy-to-find link to it on your mobile optimised site.
- Don’t disable the phone’s “back” button. Instead supplement it with a “soft” back button on every page, as some people will be more likely to trust this.
- Where your customers are encouraged to input data, ensure that the data persists if they go backwards in the site or if their connectivity is interrupted in any way (i.e. make sure that they don’t have to input it again if something unexpected happens). This is basic website usability but especially important with mobile devices where data input can be difficult.
- Provide navigation that is appropriate for a small mobile device. This doesn’t mean thinking about the navigation options a mobile user will need most (although that’s important). It means thinking about where best to place the navigation and what sort of functionality it should have. Some people recommend putting it at the foot of the page; others providing a cut down or collapsible navigation; and yet others using the home page for navigation and a link back to the home page as the only navigation on all other pages.
- Provide a site search box at the top of the home page.
- Wherever possible collapse content (e.g. just show the first line or a headline and let people tap on it to expand it) so that people can choose to see more of it but also have an opportunity of seeing plenty of other content options as well.
- If you are having to use redirects or links to other versions of the site then make sure they work and deliver the content that your customers will be expecting.
- In general mobile sites should be considerably smaller, slicker and faster to load than fixed PC sites. Reduce file sizes even if it means reducing image quality. Reduce the amount of text in the mobile site; people are even less likely to read long screeds of words than they are with the fixed internet. Avoid automatic page refreshes and be very sparing with carousel features. One nice strategy is to write and design the mobile content first and then expand it for tablets and fixed PCs.
- Make it easy to see content. Avoid anything that gets in the way of content, especially pop ups and interstitials.
- Calls to action should be big and easy to see. Allow sufficient non-clickable space between two or more different calls to action. Make as much of an item clickable as possible. For instance don’t rely on a text link if there is an image that can be made clickable as well.
- Make sure your fonts are readable. Avoid reversed-out text and ensure default font sizes are a reasonable size for reading. Ensure plenty of contrast between text and background – remember that people may be reading your text outside in bright sunlight.
- Single column layouts work well; use them unless there are particular reasons for having a multiple column layout.
- Reduce text input requirements as far as possible. For instance with dates it may be preferable to have drop down menus with radio buttons rather than forcing people to type in a date.
- Allow password content to show briefly when the user inputs it so they can confirm they are typing it in correctly. Of course this won’t always be appropriate (e.g. for banking apps) but much of the time this is a good compromise between security and usability.
- Consider using quiz questions rather than Captcha text which can be very hard to get right on a small screen.
- Avoid horizontal scrolling, especially with text.
- Offer captions with video: don’t assume people will be in a position to play audio – or even to hear audio.
- Make sure that video plays. If your site has Flash video then you need to offer an alternative format in your mobile site that all devices can play – or adapt your content so the opportunity to play video no longer exists.
- Take care with form design. Mandatory fields should be very obvious (little asterisks probably won’t be sufficient) and ideally optional fields (except for optional address fields) should be deleted. Ensure text input boxes are as large as they can be by placing text box labels above the text box rather than to the left.
Of course there is a lot more to designing good mobile sites than the 20 guidelines I have set out above. The people at Smashing Magazine (who know far more about design than I do) have a huge amount of advice. And User Testing have some very detailed advice about the really important area of form design. But the guidelines above should at least enable non-designers to have an opinion about whether their company’s mobile site is serving their customers well.