Mobile experiences are tough to get right, and even for seasoned pros, mistakes are very easy to make.
- If you fail to account that users might be in motion, you might think that your small text size is not an issue.
- If you fail to account for a thumb being significantly less precise than a mouse, you might think your small call-to-action (CTA) is just the right size.
- If you fail to account for slower connections, you might think your images don’t bog down loading speed at all.
These differences are important.
And regardless of whether you’re solving for mobile using Responsive Web Design (RWD), adaptive layouts, or a mobile version, it pays to have a checklist of issues you can run into – even if you’ve been careful.
1. No contact and location mechanism
One of the key differences between a desktop or a laptop versus a smartphone is the sheer emphasis on location and contacts.
- Make sure that your address is available, and that the locations you cover are clear. Don’t make visitors hunt around for that information.
- Always have a contact mechanism ready.
- Ensure that your visitors can find your number. And once they do find it, make sure they can tap the number to call you. Don’t ask your visitors to memorize your phone number.
Nobody is asking you to have Google-level location awareness, but even if you’re a relatively small business, you need to get at least the basics of location and contacts right.
2. Features crammed into real estate
First off, your navigation options shouldn’t all be displayed.
You need to think about your content-to-chrome ratio – you need the content of the site to take up far more space than the navigation elements.
That said, those are not the only areas where a lot of sites hurt the user experience by having more features. When the above-the-fold real estate starts looking like there’s too much clutter, you need to ask questions like the ones below:
- Do you really need that masonry layout?
- Can you use a hamburger menu to hide the nav elements until visitors need them?
- Does the content of the page really need to be as long as it is?
- Are the most used items above the fold?
3. Not enough signifiers
Signifiers for visual affordance are a problem even on desktops and laptops.
But if you thought that CTA is a touch too subtle on desktops, just wait until you see the CTA on a phone with some glare while the visitor is in motion.
It’s a tougher problem to solve for on mobile, is what we’re saying.
You need to think about the buttons, navigation elements, and links on your site, and ask these questions:
- If you’re using a flat/minimalist aesthetic complete with ghost buttons, how exactly are your visitors supposed to know which items are clickable?
- Are the buttons standard enough? If you’re not using a hamburger icon to represent the menu, do people understand how to get your navigation elements to display?
- Is your main CTA too subtle? What about your secondary links?
4. Too many large images
There are two key reasons why large images are a bad idea when you’re dealing with smartphones.
First, the connections of mobile devices are slower. Smartphone connection speed is getting better all the time, but for now, it’s not worth the additional loading time.
People on mobile phones have even shorter patience than the ones on desktop, and it’s not like the desktop visitors are very patient to begin with.
Second, you need to show enough of the page to get the user to make sense of it. If your above-the-fold area displays just the large image of your promo (who hasn’t seen this happen?), you’re doing your visitors disservice.
5. Unadjusted text and CTA sizes
There is a read-to-tap asymmetry on mobile – things that are large enough to read are not large enough to tap. This becomes particularly problematic when the users are in motion, and they need the extra hotspot size even more.
A thumb operating on a 5-inch screen isn’t nearly as precise as a mouse interacting with a 19-inch screen, so you need to give your users larger targets:
- If you have an image and a title for an article, make both tappable – that will make the hotspot size reasonably large
- Make sure your CTAs are large enough – for important ones, consider getting them to span the entire width of the phone (or close to it)
- Don’t just stop at readability when testing – just because users will be able to read the CTA does not mean they can accurately tap the right area
6. Death by promos
Promos are fine. There’s nothing inherently wrong with promos.
That said, on smartphones, you usually have about 4.5 to 5.5 inches of screen space to work with – that’s very limited.
On desktops, having one or two promos will leave a lot of screen space for the main navigation paths, the filtering mechanism that the visitor needs to drill down, etc.
On mobile, two promos on the front page can sink all other elements below the fold – that’s not a great navigation experience.
When using promos, you need to ask these questions:
- Are the main navigation paths still above the fold?
- Are the promos taking up more than half the available screen on first load?
Remember, when there’s only 5 inches of screen space to work with, one inch can spell the difference between a visitor who will engage with your site, and one who will bounce.
Putting It All Together
Mistakes are very easy to make when designing web site experiences for smartphones.
Still, if you have a checklist that includes locations and contacts, promo size and above-the-fold screen use, button signifiers and affordance, image sizes and feature overload, then you’re on your way to designing a better mobile experience for your visitors.
