5 UX Tips to consider on a mobile

“That button is far too small for my human finger”

With mobile web usage now exceeding desktop, designers and developers focus has broadened. When crafting sites and apps for mobile they are having to come up with more good ways of ironing out any usability issues before they occur.

There’s much to consider before pushing an app or website into the market and expecting it to be a success. I’ve listed below 5 things I’ve discovered along the way; which should really be considered towards a good ‘mobile’ UI. This is no way an extensive list and some of these warrant a post of their own, something I’ll be doing in the near future.

1. Minimum touch target

Consideration must be taken to ensure any “human” finger can interact with any button or call to action without any issue. The average human thumb will require around 44px x 44px touch target to be able to interact with a touchable piece of UI.

2. Thumb Zone

The large majority of mobile users will use their thumb to interact with their phone. Keep any interactions within your app/mobile site in between the two red sections on the example below; to ensure comfort and ease of use for the user. The red sections should be treated as a no-go area, or at the very least treated as an ‘ouch’ zone for the user. When designing/developing on mobile, remember to design for the thumb.

3. Hey… I have a phone call.

This is a harder one to quantify and may only apply to certain sites/apps, which don’t have any strict security rules on them. Where possible, design with the consideration for ‘user interruption’.

With a mobile device which is now a hub for many uses, the user will regularly become distracted with something else, for example a text message, phone call or social media notification. If security allows, try to ensure an app or site isn’t “reset” if it is closed down, or a point of the page isn’t lost for an article/news site for example.

4. Don’t test patience, test mobile

The approach will vary across many packages, but initially get some real users to test it. Whether that’s a wireframe, prototype or an interactive PDF you’ll learn a lot of issues very quickly. This shouldn’t be a one stop shop. Make sure you do usability testing early, during and even when it’s ready for production.

“You’re not building an app for yourself; you’re building it for a real user!”

5. I’m bored…

Users require more engagement on a mobile, with so many distractions as listed in number 3, content will need to be shorter or at least a snapshot of the content available so the user can decide if they want to continue. Users require quicker performance load times and prefer to type the least they can but continue via processes by using their thumb.

Don’t clutter the UI just because that item is available on the desktop website. I’ve found printing off a screenshot and marking anything with a red pen where I can’t justify via stats, user testing outcomes or something that doesn’t add value into the user journey really useful. Be ruthless, because I’ll put money on it your user will be if they don’t find what they want.

Summary

Try to treat the mobile UI as a separate entity to desktop, mobile needs the same love and care as you’d give desktop if not more. Design for the human thumb and give consideration to the circumstances a user may be in whilst using a mobile, they could be on the move, on a bus on the way to work or trying to purchase something on the fly.

Most importantly make sure you test, test, test and test with as many real users as you can. You’re not building an app for yourself; you’re building it for a real user.

Interested to hear anything you would like to see on a future list, or any UX issues you’ve struggled to nail on a mobile. I’ll be writing a part 2 to this very soon. Thanks for reading.

5 UX Tips to consider on a mobile

Cool stuff, every week

More Articles