Mobile Usability Made Simple

Mobile usability isn’t just to create a mockup of a website to fit a certain device size, It’s about paying attention to how users use those devices and understand that mobile experience is unique.

Usability for mobile is more about how it feels and behaves than how it looks. People use fingers to interact with the screen, in difference with the traditional desktop experience with a mouse and keyboard. This means mobile is more about how it feels rather than how it looks.

People interact with their screens, the same way they do with tangible objects. Comfort is king when it comes to mobile experiences. Nobody wants to sit in an uncomfortable chair– the same goes for mobile products, nobody wants to use an app that causes discomfort or feels awkward to navigate.

How people use mobile devices?

Steven Hoober conducted extensive research on how people hold and use their phones. You can find it in the article How do users really hold mobile devices?

He didn’t stop there. His research continued and in 2017 he wrote a three-part series to revise his first findings. Hoober says the illustration shown below continues to make rounds as the standard how users hold their mobile devices, but it’s not correct as the one and only standard.

They are actually six ways users hold their phones:

75% is using just their thumb to touch the screen

fewer than 50% holding their phone one-handed (Design for fingers, touch and people part 1)

Based on the things above it is clear that the traditional desktop F shape pattern in which users make horizontal eye movement across the screen followed by a vertical one isn’t the same on mobile.

Users tend to look at the center of their screen first, which is the easiest to reach and touch with a thumb on almost all smartphones. The harder it is for the thumb to reach a certain part of the screen the less accurate it is.

But wait, is mobile only phones? Of course not! Users are using their thumbs to hold a tablet, which means they aren’t holding the device the same way as they are on a mobile phone.

What works for mobile devices?

We have all these variations of sizes and the way people use them. It’s simply not one size fits all, however, there are several principles we can take into consideration to improve mobile usability:

1. Understand your users
We as designers tend to think that everybody is the same, and uses devices the same way. We need to try and avoid those assumptions.

Also, we tend to think that user research is permanent, however, this is not true. Users are changing, technologies are changing and the behavior of the users will vary.

As I stated above, Hoober established the six ways users hold a smartphone, your users may use in one of the less common ways. If your product is made for elderly people to log their medications it will most likely have a unique requirement of how they hold the device. Different demographics use products differently and this may affect how they hold and see a mobile device, a very important note to take as designers.

2. Context of use

As much as this is related to the point above, I had to include it. Mobile means ‘ability to move freely’. Most people aren’t fully focused when they use apps. They often do other things while interacting with the app such as: walking the dog, watching TV, working out, driving, eating etc.

Where people use the device is as important as how they do it. Fitness or a running app has a very different use case than a banking or a food ordering app.

3. The rule of thumb(s)

People are using mobile phones mostly with their thumbs, which means that we need to design for thumbs, not for clicks. Everything on the screen should be easy to reach without requiring them to stretch their thumb or use two hands.

Thus this is why responsive design is important and a single column layout on mobile is much more preferable. If we use two or more columns we string the screen real estate and we shrink the content out of the thumb zone, which makes it harder to use.

4. Content first

In web design, we tend to put navigation first and then the content falls around it, but app design is the opposite way.

This is because of the way users view and touch the screens, the most important content should be in the center with the other key navigation controls at the bottom.

However, in tablets, this changes a bit. As we are still allowing the users to navigate with their thumb we need to be sure the rest of the fingers don’t block any content. Important navigational elements need to move to the sides of the screen.

5. Stay on track

No matter the device, mobile requires designing for the touch. But this can be tricky as no two people have the same thumb size, and it’s not as simple as a mouse click.

According to Josh Clark, founder of the UX agency Big Medium and author of Designing for Touch, one number really matters in mobile usability: 44.

The optimal touch target is 7x7mm, which translated into pixels equals roughly 40. But in order to account for various viewing sizes, 44 pixels is the ideal space to cover touch zones and avoid user error.

6. Physics and devices

We need to enable users swipe, flip, pinch and use the appropriate micro-interactions, but we also need to pay attention to the laws of motion. All response needs to make sense based on the action the user takes.

Micro-interactions bring the app to life and give it an additional context based on Touch. I released an article recently about Creating meaningful micro-interactions, where I talk more in depth about this topic.

7. Showing the right content

You need to display the user the right content and the right amount of content at the right time.

What really this means is that designers should avoid bombarding users with all the content at once, but at the same time, the most important information shouldn’t be hidden behind navigation.

You need to ensure that the end user needs are met with the main content reveal, and then add controls to allow the user to dig a bit deeper if they want to.

Conclusion

Mobile design is bigger and more complicated than one screen or one device, and this makes mobile experience non-universal. By following usability principles, designers can make the experience more pleasant and enjoyable for users, no matter the device they are using.

_____

This story was first posted in SketchTricks.com

______

See my behind the scenes on Instagram

Or see what pixels I push on Dribbble