Let’s not start with the stats – 9 years into the iPhone launch, there are just about no marketers left who think mobile experience isn’t important to a web site’s success. The reason most sites do not have great mobile user experience isn’t that web owners are not convinced mobile is important. The reason is much, much, simpler.
Mobile experience is hard to get right.
Even if you have the know-how to split traffic into “m.website” or “mobile.website,” or even when you’ve decided Responsive Web Design (RWD) is right for your site, there are usability principles that are just drastically different for smartphones compared to desktops and laptops.
Here are a few ways you can improve the user experience for your mobile visitors.
1. Use More Space for Content, Less Space for Navigation
There’s a digital term for it – chrome. That’s the total amount of space your site uses navigation elements – the URL bar, the back button, the forward button, the primary navigation at the top of your page, the left navigation.
What user experience experts have been balancing for a while now on desktops and laptops is the chrome to content ratio – the amount of space you actually devote to the content on the page, versus the amount used for navigation.
On mobile, this is even more punishing, given how limited the screen size is. Here’s what you can do to maximize the content shown:
- Don’t list your primary navigation options on every screen – instead, have the menu display upon something that the user needs to activate (like a hamburger menu)
- Ensure that the trigger for the menu is easily seen. Once visitors tap on the navigation item, you can use the whole screen for navigation
Everlane uses practically the entire screen for content, with just the hamburger menu at the upper-left for the chrome.
By improving the chrome to content ratio, you’re giving your users a better shot at finding what he or she came for.
2. Organize Your Navigation Elements
It probably goes without saying, but measuring what people access while using their mobile phones is key to displaying the right things for the right devices. With so little space to work with, you can’t afford to display all categories alphabetically.
When users tap on menus on mobile devices, they expect the content to be easy to sort through. Here’s what you can do to help make that happen:
- Review Google Analytics or other clickstream tools and filter for mobile traffic
- When you have the most visited areas, segment those by commonalities (common topics, most used product categories, etc.)
- Display the most commonly accessed topics or product areas on your hamburger menu – don’t rely on default sorting
Once you tap the hamburger menu, the Nixon watches site displays segmented product categories, not everything at once.
This isn’t just for hamburger menus. For long pages, you can also use mini-information architecture links that point to areas below, on the same page. You’d still want to organize the in-page links by topic or category, to match the user’s mental model.
3. Use Big Hotspots for Navigation
When visitors do tap on menu launchers, you basically have the license to use the entire mobile device screen. You need to utilize this fully – fingers are not very precise instruments, so making the hotspots larger can have a dramatic impact on reducing user errors.
Of course, larger hotspots mean fewer elements on display, so you need to know your audience pretty well. What do they care about most on your product line?
Adobe marketers know which products carry the business, so they can prioritize which items to display. This allows them to maximize the space used for hotspots while still catering to what people need.
Measure Your Mobile Changes
As with most changes you implement that affect navigation, you’ll need to measure and tweak for optimal results. Still, optimizing your content to chrome ratio, organizing on-tap menus, and making your menu hotspots larger should be good starting points to improve your mobile experience.