Ten tips for mobile website usability
Mobile is here and it’s here to stay. Businesses that want to remain competitive and have visibility online have to optimize their sites for mobile, but many organizations are still struggling to integrate it effectively into their business strategies, and take advantage of the possibilities offered by mobile. If you’re thinking about having a stripped down version of your regular website for mobile devices, think again! The best mobile websites are those that replicate the “app” look and feel and are focused solely on the tasks visitors might want to complete on their mobile devices.
Before you start…
- Mobile App vs Mobile site: A mobile site should be considered mandatory, and an app is optional. With a site optimized for mobile, it’s not absolutely necessary to have an app, but it is something you could consider.
- Familiarize yourself with the various hardware and software available.
- Screen size and resolution: your site should work on the widest range of possible mobile devices. The iPhone 3 for example has a 320 x 480 screen resolution, and the iPhone 4 has a 640 x 960 resolution. Many of these screens can comfortably display a standard website, but you want to make it as easy as possible for users to navigate.
- Different devices and browsers: Care needs to be taken to match your mobile design to the capabilities of your audience’s devices: a site is only ever as good as the browser that displays it.
These different features and screen sizes will ultimately affect how you design your mobile site.
Mobile website design has to be approached in a different way to desktop sites as it’s far more restrictive. The goal of a mobile site is to allow user to find and be able to read what they’re looking for. These tips focus on optimizing the user’s experience on a mobile site, ensuring the site remains as effective and useful as your standard site. If it’s difficult for mobile readers to make their way around your site, they simply won’t.
Tips for Mobile Usability
1. Mobile Means Mobile, Therefore Context is Key
People using their mobile device tend to be on the move, needing immediate information relevant to their situation or location. You must deliver a highly contextual, personalized mobile experience, based on customers’ past behavior and current environment, which is too convenient for them to pass up. Try to think about the information that a mobile user may be looking for such as location, contact info, prices, in-store availability etc. Make this information a priority on your mobile site, readily accessible with minimal navigation required.
2. Get to know your users
Conduct a few usability tests or voice of customer surveys on your standard site to discover the most critical pieces of information that users look for when coming to your site, and then make sure your mobile site delivers that. Talk to your users to find out where they might be and what they might be doing if they were to interact with you on the go.
A mobile site should, in most cases, be a simpler version of your desktop site, with larger buttons, reduced graphics, and an easier navigation system. In many cases, a mobile site home page will be more or less simply a menu. Below is an example of a mobile optimized site, and how the corresponding standard site looks on an iPhone screen.
4. Eliminate Horizontal Scrolling
Screen width is an important factor for optimal usability and mobile site attractiveness. Designing for mobile devices requires thinking in portrait mode. Having to scroll both vertically and horizontally is frustrating for users, therefore single column design layouts with text that’s left justified work best.
5. Optimize your navigation
- Design your mobile site so that your users can move quickly and freely throughout it. When it comes to site navigation, less is definitely more.
- Multiple drop-down options and levels takes up valuable screen space, and can overload the user with a lot of information in a small space.
- Forget about persistent primary and secondary navigation schemes (the same navigation repeated on every page). Breadcrumb navigation works best on mobile.
- Remember that it’s impossible to “hover over” an element when a user is using their finger – they’re either clicking it or not.
6. Minimize the click path to achieve a desired action
- Prioritize links by popularity, ensuring that the most sought-after content appears first.
- Limit links to ten per page, and don’t crowd links together where it would be easy to click on the wrong one.
- Play safe and go for micro-conversions – tasks that are easy to perform from a mobile device and will establish a solid first contact with your audience.
- Colour plays a large role in mobile websites usability. It’s more visually appealing, and can help to make CTAs stand out.
- Make clickable buttons larger that you would on a standard site to take into account the fact that many mobile devices are touch screen (e.g., Apple’s mobile guidelines suggest a minimum target height of 44px).
7. Mobile content is not desktop content
The user’s location and context should be the primary driver for your unique content and design. Think away from “above and below the fold”. Content needs to be simple, short, focused, and as much as possible, within the screen. Users should easily be able to scan the screen for information that’s relevant to them.
- Content is still king, even on a mobile device, however limit your content categories to avoid user disorientation as they navigate deeper into the site.
- Include as much content on your mobile site from your desktop site as makes sense. If the user will find it useful for their situation, keep it. If not, discard it.
- Consider the need for scrolling and how this affects the way your content is viewed.
- Think about bandwidth constraints –use images only to get your message across.
- Even with bandwidth constraints, however, don’t stop using richer forms of content such as videos and audio if they are an integral part of your messaging, just keep usage to a minimum, consider the size of the file, and don’t set them to automatically play or download.
- Avoid using Flash as it is not supported on the iPhone, iPad or iPod.
8. If using redirects make sure they work properly
- Set up your server to automatically serve the appropriate version from a single URL. E.g. mobile version for mobile users, (m.yoursitename.com), vs. desktop version (yoursitename.com).
- If people have followed a link to your mobile site, make sure you take them to that link. Don’t send all initial requests from a mobile device to the site’s mobile version homepage.
- Give your mobile visitors the option of visiting the standard site (e.g. through a link in the footer).
- If you do not have automatic redirects, make sure visitors know that a mobile-friendly version of your site is available.
9. Create mobile-friendly forms
Forms are probably a critical part of your desktop website, and chances are users will encounter a form on your mobile site as well.
- Avoid free text entry if possible – allow data selection via a menu.
- Labels should be positioned above the form field so that the user can still see the label when the mobile device zooms in on the field.
- Set the input type to match what the user will be typing in:
- input type=”url”> brings up a keyboard including “.”, “/”, and “.com” keys
- input type=”email”> brings up a keyboard including “.” and “@” keys
- input type=”number”> brings up a numerical keyboard
- If you’re capturing the user’s location, give them the choice to set it using the GPS.
- If you have a calendar, don’t make users scroll through months using small arrow buttons. Instead, use a continuously scrolling calendar or a compound menu.
10. Testing your mobile website
With the growing fragmentation of mobile platforms, testing how your mobile site renders in various formats and resolutions is critical. The development of effective usability within your mobile website will require you test early on in the design process.
- Test everything and test often.
- Test on multiple devices, multiple platforms, and multiple browsers.
- Get feedback from real people to ensure that the widest possible audience can access and use your site.
- Test with Mobile Device Emulators e.g.
- Opera Mobile Emulator
- BlackBerry Simulator
- Android Software Development Kit
- iOS Software Development Kit