The golden rules for mobile UX design

Do you remember the days when trying to view a website on your mobile was often a total disaster? Buttons were unclickable, pages fell off the edge of the screen, and it took ages to load. 😡

Bad experiences all round!

Mobile-specific M.dot sites provided a handy solution, but they weren’t without their problems. (Separate subdomains were an indexing nightmare, for one.)

Then along came the saviour Responsive and everything got a whole lot better, right?

It seemed like a dream – here were adjustable screen resolutions and automatically resizable images to save the day and unify websites.

Well yes, the content now fits, but we’re still treating mobile devices as ‘desktops-just-smaller’ if that’s all our mobile products do differently.

In order to deliver the best possible UX, we always need to ensure we fully grasp the way people are using digital products.

Part of that is understanding the devices they use, and crafting experiences that don’t just work on them, but that utilise their specific capabilities and contexts.

Why does mobile UX matter so much?

🌍 There are A LOT of smartphones in use. At least 3.5 billion people around the world have one.

🚗 Mobile traffic accounts for over half of all web traffic – In the first quarter of 2020, mobile devices (and this is excluding tablets) generated 51.92 percent of global website traffic.

🙇‍♀️ A whopping 77% of people will use their mobile to search – even if there’s a desktop nearby, and 85% of them think a company’s mobile experience should be as good or better than their desktop one.

⚡The average mobile is now more powerful than most laptops (according to Samsung, anyway!), topping them in raw processing power, modem connectivity and screen resolution.

Put simply, mobile usage is only going to increase, and user expectations will rise along with it.

So what are our top considerations for making sure mobile UX design delights?

1) Remember mobile means moving

If you’re designing for desktop, it’s very unlikely your user is going to walk out into the road whilst they interact with your product. It sounds obvious, but a key element of mobiles is that they’re just that – on the move.

•  Users are often multi-tasking, thumbing through screens whilst waiting for a train, a coffee or a traffic light to change (safety first though, don’t text and drive!).
• They may be concerned about losing signal, running out of battery, or being interrupted by external distractions. What happens if they quickly put their phone down or in their pocket halfway through a process? Will they have to start whatever they were doing from scratch?
• Attention spans are particularly short when it comes to mobile UX, with tasks being completed in rapid spurts. Results must be achievable quickly, with minimal effort and no frustration. Familiar navigation patterns are key, with clear paths through the experience.
• Think also about your font size, typeface and contrast.

Giving users eye-strain or making them reach for their glasses definitely constitutes frustration.

2) Optimise for touch

As we all know, almost no mobile devices have physical keyboards any more. So unless you happen to be designing for the very specific case of Blackberry’s diehard customers, users will be using their thumbs and fingers to interact with the product.

• Any usability fan worth their salt will be familiar with the ethos of don’t make me think; well now’s the time for ‘don’t make me type.’ No-one wants to be faffing about entering tons of text on a touchscreen. Pre-empt as much as possible, offer auto-complete on searches, and options instead of text inputs where you can.
• Minimise mistaken taps by making sure your touch targets are correctly spaced and sized. There’s nothing more annoying than feeling like you have sausage fingers because a button is so difficult to tap. Fiddly text-links are right out.
• One very comprehensive mobile UX study reveals that people are better at tapping at the center of the screen, so touch targets there can be around 7mm, while corner target sizes must be about 12 millimeters.

Material Design says that in most cases touch targets separated by 8dp of space or more promote balanced information density and usability.

• Utilise people’s familiarity with touch-based gestures such as swiping and pinching when it comes to presenting tricky, data-heavy content such as tables and tabbed content. It’s instinctive to use these gestures in UI these days; common UI design patterns can be used to suggest them and they should be taken advantage of.

We recently worked on a product which had potential to be a nightmare of horizontal and vertical scroll-bars, topped with a squashed up pile of tabs. We solved this with horizontally scrolling tabs, using the swipe gesture users are very familiar and comfortable with.

3) Maximise microinteractions for feedback

We all like positive feedback, and microinteractions – those contained moments where human and device meet – are a place to provide mobile users with feedback in the form of a reaction from the application.

Think about Facebook’s pull-down to refresh action, WhatsApp’s ‘someone is typing’ indicator, or even an audio notification of an email.

• Users need affirmation that their touch has done something and that the product or their mobile hasn’t frozen or crashed. We’re all very familiar with tactile feedback in the form of a vibrate when we tap a button or keyboard character – something desktops can’t provide.
• Similarly, feedback helps users to be sure that the system is doing something – a fun loading spinner can save your application from abandonment for taking too long.
• People, on the whole, will be more tolerant about waiting if they know something is happening. Users get impatient very quickly if there’s no discernible difference, but if you can show them something’s on the way they’ll understand.

4) Synchronise for a seamless experience

What happens when users arrive at the office or home and want to complete their transaction on desktop?

Chances are that in a good number of use cases, their interaction with your product won’t only ever take place on mobile devices. That being said, it’s never a bad idea to design for mobile-first and work up more bells and whistles from there – but that’s something for another article. 😜

• Logging in on desktop should take them right back to where they left off – no emptied carts, unsaved changes or lost data.

Imagine re-typing a whole email because a draft didn’t carry over from your phone. 😳

• There’s more to seamlessness than synchronicity though. While we’re definitely not saying totally identical layouts on mobile and desktop are a good idea (hopefully by this point you know they aren’t!), there should be a unified and intuitive feel to navigation as users flow from one to the other.
• This effortless UX flow doesn’t just eliminate user frustration, it inspires their trust, and can make them loyal brand advocates – the kind of advertising money can’t buy!

In conclusion…

Treating mobile application UX as the poor cousin of a ‘full product’ on desktop is outdated; it’s so clear cut that Google will punish you for it – they published a warning in January 2020 that deliberately serving less content on the mobile version of a page will result in a loss of traffic.

People depend on their mobile devices every day for so much more than communication. The experiences they deliver should be highly tailored, effective and intuitive, no matter the content they serve.