Mobile design: preventing frustration by keeping usability in mind

Phil Wijs (‘Weiss’)
Bootcamp
Published in
6 min readDec 11, 2020

--

Have you ever used an app and couldn’t figure out what to do or where to go? Have you ever been stuck? Did the app ever do something that you weren’t expecting? Frustrating, right?

This is where usability comes into play!

Web usability has been around for decades and is heavily documented. For some reason, mobile design usability hasn’t been. You’ll find some articles here and there that offer up principles and guidelines. Some web principles apply, but most don’t. It can also be difficult to be a web designer and then try to transition into mobile. It’s a completely different world!

This article will summarize some important and useful mobile usability principles that will prevent your users from getting frustrated as they navigate through your app.

Mobile usability principles and best practices

Follow platform conventions whenever you can

It’s okay to innovate and push them envelope, but you want to make sure you’re at least following platform conventions whenever you can. iPhone users are used to certain patterns, interactions, visual styles, etc. within their ecosystem. The same goes for Android users!

Source: iOS vs. Android — The Startup via Medium

Sometimes, when apps try to take a “one-size-fits-all” approach to an app, it confuses some of their users. Users have built up a mental model of how to use an app through all of the conventional patterns that they’ve learned. Some users may bail out of the app completely, write bad review, or worst case scenario: never use the app again!

Here are great places to start:

You don’t have to make your app look exactly like Apple’s or Google’s, but try to at least stay within the realm of familiarity.

Think about how your users use their device

Source: UX Planet — Mobile Usability Made Simple

People use mobile phones in all sorts of orientations and hand positions. Phone are also available in a vast array of sizes and form factors, which adds to the complexity of ensuring your app is a great experience for everyone.

On iOS, most apps don’t support landscape orientation on smaller screen sizes. If they do, they typically stretch out the UI. For larger phones, split view comes into play. Think about the benefits that landscape can bring your design and be mindful about how you bring it in. In most cases, accessibility benefits from having the option of landscape. Perhaps someone has to always have their phone in a landscape orientation, given their specific situations.

On Android, landscape orientations are built-in via Material Design and scale responsively. Some modifications may need to be made, depending on your app. Some Android apps change the layout of the UI to offer a better user experience. Spotify does a great job of moving the tab bar to the left side of the screen for ease of use.

Keeping mobile in mind

We use our mobile phones everywhere in an infinite amount of environments and situations. This is why bite sized pieces of content and decisions are important, along with the ability to pick up where they left off later on.

Navigation apps do a great job of keeping interactivity easy and minimal, so that users can keep their minds focused on the roads. The apps also save the users from themselves by disabling features when it detects that the vehicle is in motion or the user is connected to their car.

Easily digestible content

With a small screen real estate and small attention spans, it’s crucial to ensure that your content is easily digestible.

Here are some ways you can

Understand touch targets

A touch target is the minimal size for a screen element that a user touches with their finger. Apple and Google offer minimum sizes to ensure that users have ample room to tap on an element. If the element, such as a button, is too small, then the user may tap on the incorrect element, which increases friction and frustration.

Source: UX Stack Exchange
Source: Apple Human Interface Guidelines

Apple: “Provide ample touch targets for interactive elements. Try to maintain a minimum tappable area of 44pt x 44pt for all controls.”

Google: “For most platforms, consider making touch targets at least 48 x 48 dp. A touch target of this size results in a physical size of about 9mm, regardless of screen size. The recommended target size for touchscreen elements is 7–10mm. It may be appropriate to use larger touch targets to accommodate a larger spectrum of users.”

Interaction design

One of my favorite part of mobile design is interaction design. There are many different ways that users interact with mobile apps.

Here are some elements of mobile interaction design to keep in mind while you’re designing:

  • Navigation hierarchy and consistency
  • Gestures
  • Animations and microinteractions
  • Sound design
  • Haptic feedback

Don’t forget about Accessibility!

We’ll let this infographic speak for itself…

Source: IBM

I won’t go into too many details about accessibility in this article, since it can be its own article, but I’ll guide you to some resources to start off with:

If you have an accessibility department in your organization, work very closely with them! If you don’t, consider becoming an advocate and learn as much as you can. There are so many users that need us designers and developers to strongly consider them in all of our designs.

Accessibility and usability compliment each other extremely well. They are the peas and carrots of design :)

Make a Usability Principles checklist

As you’re designing your app, consider making a checklist of usability areas to keep in mind:

  • Am I following iOS and Android platform conventions? If I strayed away a bit, does it still fit within the ecosystem?
  • Did I consider how users will be holding their device?
  • Did I consider that users can be easily distracted? Do I need to save their progress for them so they can continue later?
  • Is the content served up in an easy to digest format?
  • Are my touch targets large enough?
  • Do all of my interactions make sense and provide value?
  • Am I following Accessibility guidelines?

These are just some considerations to keep in mind as you design and develop your mobile app.

Whenever you use your phone yourself, think about how you use it. Did something frustrate you? Why do you think so?

Engage in Usability Testing

Finally, it’s very important to get your app in user’s hands before going live. Learn, iterate, and repeat!

When you go through usability testing, it’s important to take off your designer hat and actively read/listen to the feedback. It can be easy to think “but they’re doing it wrong!”, when in reality there is most likely an issue with the design.

Here’s a great article that summarizes usability testing.

It’s important to keep these principles and guidelines in mind as you design and develop your mobile app. Being mindful of these concepts will help you make better decisions and deliver a usable app.

Helpful Links:

Mobile Usability Made Simple

--

--