ACA Blog

ACA Blog


July 2019
M T W T F S S
« Jun    
1234567
891011121314
15161718192021
22232425262728
293031  

Categories


5 mobile design practices to annoy your users

Yakup KalinYakup Kalin

Banner for mobile design practices blog post

When it comes to mobile app development, there are many thing to consider: the purpose of your app, its target audience, supported platforms, app performance, …. The list goes on and on. However, there is one thing that always makes the top 3 and is absolutely crucial: mobile app design. A good mobile design increases convenience, reliability, and users’ ability to interact with your app as intended. If not well-considered, there’s a good chance that you’ll end up delivering an app that is (completely) useless for your end users. If that’s definitely (not) your goal, stay tuned because we’ll cover 5 interesting mobile design practices that will help you annoy your mobile users!

1. Design only for your own mobile device

Let’s start with this very common (bad) practice that eventually leads to annoyed users. During the development phase of a mobile application, a lot of developers and/or companies rely on mobile devices they possess. It’s a good thing to test on your own mobile devices, but it’s certainly not enough to deliver a well-designed mobile app. Unfortunately, validating your mobile design on one or two available devices won’t cover all important use cases. Think of devices with notches, cut-outs and punch-holes, for example. It’s not hard to find devices with notches anymore, which makes validation of your mobile design crucial and a must on those devices. And we didn’t even talk about low-end devices with low resolution screens that your users might have. Will your design come to its right on those devices?

Validating your mobile design on one or two available devices won’t cover all important use cases.

Since “it looks good on my own device” just won’t do, you need to consider other devices than your own. Of course, you can’t possess or buy all possible mobile devices out there, but you can test your app on a mobile device farm service. A mobile device farm allows you to test your mobile design/app on various mobile devices without owning them. It’s no different here at ACA: since we can’t own all possible mobile devices, we use Amazon Device Farm to connect to physical mobile devices. If you want to know more about this device farm approach, shoot us an email at mobile@aca-it.be and we’ll gladly give you more insights! 🙂

2. Make text hard to read

I still remember the day my dad bought a fitness smartwatch for my mother as a gift. For my dad, the smartwatch was a bargain due to its incredibly low price. It had a lot of features and was theoretically capable of anything that my Apple Watch can do. When the smartwatch finally arrived from a very long shipping trip and once turned on, my mother was blown away… blown away by the horrible UI and UX! The text was very small and hard to read, especially on the heart rate monitor screen. The heart rate value was visualized in a tiny text label that required a magnifier to read. The graphics for the user interface completely overruled and overshadowed the content. The smartwatch was plain useless and a waste of time, energy and money.

When designing for small(er) screens, you definitely need to keep the typography in mind.

When designing for small(er) screens, you definitely need to keep the typography in mind. A good typography within your mobile designs helps you make written language legible, readable, and appealing. Don’t let design overrule the one main thing: content. Also test your mobile designs under all possible circumstances, such as:

Validating your mobile app design on different type of devices and circumstances will give you a proof of validation that’ll decrease the chance of shipping apps with bad designs and thus annoyed users.

3. Make it hard to touch and ignore the thumb zone

When the stylus era was over, mobile apps needed to consider another pointing device: a finger. When you’re designing for devices that are controlled by fingers, you simply need to think like those fingers. Are those UI elements reachable by all finger sizes? Are your app controls for your mobile kids game easily reachable for kids?

Aim for the natural zone in the thumb zone.

When we look at the so-called ‘thumb zone’, there are 3 zones for our thumbs when holding a smartphone:

  1. the natural zone: the zone that’s easy to reach,
  2. the stretching zone: the zone that’s harder to reach and requires stretching of the thumb,
  3. and the hard zone: the zone merely impossible to reach without uncomfortable hand/finger movement.

The key thing here is to aim for the natural zone. We typically place routine actions within this natural thumb zone to make them easy to reach. Other (minor) actions can be placed elsewhere to avoid clutter and unwantedly draw attention.

However, just placing your mobile components on the natural zone won’t guarantee success. Within mobile app design, size does matter. Nothing is more annoying than small buttons that are hard to touch. As the Apple Human Interface Guidelines also indicates, small components are hard to touch and increase the chance of false selection. Although this is a bad practice, some of the (mobile) advertisement providers and integrators use this approach to increase the chance of accidental touches. Remember those online website ad banners with two identically designed close buttons, one of them being fake? Exactly.

Nothing is more annoying than small buttons that are hard to touch.

4. Mix mobile OS design patterns

Ever bought a new product and needed some time to learn how the product worked? That’s the situation users find themselves in when they’re forced to interact with patterns within apps from an OS they’re not used to. Users have habits and preferences. They get used to the way how their particular mobile OS functions. So when you introduce other interaction/design patterns that are different than what they’re used to, they’re less likely to enjoy using your app. Android and iOS have their own interaction patterns, so it isn’t a good idea to introduce the iOS ActionSheet component within your Android app.

Understand and respect the nuances of the mobile platforms that users are familiar with.

This doesn’t mean you can’t create a consistent design for the various mobile platforms. You can go for consistency across mobile platforms within your mobile app designs to maintain recognizability. The important thing here is to understand and respect the nuances of the mobile platforms that users are familiar with.

5. Use design patterns from the (mobile) web

This one is a very captious practice that designers sometimes overlook, especially in cases when web designers are in charge of designing for (native) mobile apps. Of course, there are mobile web patterns and best practices that can be consigned to native mobile app designs. But an important note here is that web designs is not really a point of reference for mobile app designs. People tend to see a mobile app as an extended version of a webpage and reuse patterns. A mobile app should create specific value for the user. This value shouldn’t be and isn’t the same as the one that is offered by websites. The user experience needs to be optimized for the native mobile interface (of the device) and not for the mobile browsing.

The selection component is a very good example of this. On the web, the item selection component below is fine and avoids any clutter. But on mobile, this component is a hell to interact with. Think about small mobile devices or people with large fingers: it just won’t work.

On the web, this item selection component is fine and avoids any clutter.

If annoying your users is your (secret) plan, you should definitely go for the web component on the left within your mobile designs. If not, you can look into this mobile alternative for item selection on the right that achieves the same goal: the segmented control component.

Use this segmented control component as a mobile alternative for item selection.

Takeaway

We believe the 5 practices listed above are the most interesting patterns within design that’ll annoy your mobile users. For the sake of good order, let’s go through 5 best practices one more time:

  1. Design only for your own mobile device. You shouldn’t lose time testing on other devices with other resolutions and/or device characteristics such as notches and cut-outs. If it works on your device, it’s ready to go!
  2. Make texts very small, only so you can fit a lot of content on your screen. Less screens to develop means a lower development cost. 😉
  3. Make your components hard to touch and ignore that so-called ‘thumb-zone’. Users will use a stylus for proper interaction, not a big deal.
  4. To cut costs, design all your mobile apps 1:1 for all platforms. All components can be consistent and identical on all platforms. If it does the job, it’s fair enough.
  5. Introduce web patterns within your mobile app designs, because web exists longer and has proven design patterns. No need to verify them again on mobile.

With those best practices, we guarantee you’ll be annoying your users in no time! If you have any questions regarding some of those patterns, please don’t hesitate to contact us or leave a comment.

As a Mobile Solution Engineer at ACA IT-Solutions, Yakup is involved in agile mobile development, where he delivers creative input for realizing usable and likeable mobile applications. With a huge interest in mobile technology, Yakup develops Native, Hybrid and Responsive Web Apps.

Leave a Reply

avatar
  Subscribe  
Notify of