Ten Best Practices for Mobile Design Usability

With the experience we’ve gained since the mobile W3C Mobile Web Best Practices were released 3 years ago, we’ve noted a few of the most important tips for providing an enjoyable user experience that will keep your mobile site visitors coming back for more.

Mobile detection: When people visit your main website there should be a script that checks if they are using a mobile browser. If so, they should be redirected to your mobile site.

Ability to switch from mobile to full site: Unless you are confident that your mobile site completely replicates the functionality and content of your desktop site, there should be a link on your mobile site to switch back to your desktop site. You should also be aware that people may be sharing the URL of your mobile site’s pages to social networks, and people on desktop computers may then click on those links. If warranted by your traffic, you may want to consider having a script on your mobile site that sends desktop users to your primary site.

Button size: The buttons on your mobile site should be uniform in shape and color, and stand out from the rest of the content on the page. You’ll want buttons to be large enough for people to hit easily, generally at least 30 x 30 pixels.

Easily clickable links: Ease of use in clicking is important with text links as well. If two links are placed near each other (either horizontally or vertically), there should be enough space between them to not make accidental selections.

Non-hover based navigation: Many websites use hover menus, but these won’t work on most mobile devices.  If your standard website doesn’t have an easy way to navigate to subpages, outside of a hover-based menu, that is a significant reason by itself to start thinking about designing a mobile version of your site.

Minimalist approach to form input: Entering information is much more difficult on a mobile device, so reduce the fields required to a bare minimum. You can always ask them for more information when they get back to their desktop. In addition, wherever possible, user should be offered the choice to select from options, rather than being required to type out response. You can also leverage mobile phone’s personalization capabilities to automatically fill in personal information. Predictive text suggestions for open text fields can also help minimize the amount of typing required.

Form usability: Many of the best practices of desktop site design become even more important on a mobile form. For example, all checkboxes and radio buttons should allow users to select the text labels next to them, rather than only allowing people to click on the button / box. For more advice, take a look at these articles on mobile form design from Luke W, Smashing Magazine, and UX Booth.

Large images containing text: If you have a large image, be aware that it will be sized down significantly on a mobile device, and any text contained within it may no longer be readable (think infographics, for example)… or will require a lot of zooming and panning! Images should be designed to resize without breaking.

Links to files:  If there are links to files on the website, those files shouldn’t be essential to any primary user tasks. (An example of this is downloading and filling in a word document registration form that needs to be emailed in.) File types should be clearly indicated near the file download links, as well as an indication of file size (especially for larger files).

Flash:

We’ve helped a lot of nonprofits set up their mobile sites, so if your nonprofit is considering adding a mobile site, feel free to contact us.

Be Sociable, Share!

•