Hi, I’m Thomas Verhoeven, and I started working for ACA IT-Solutions on the 2nd of March 2020. It’s my first job! As a junior...
5 mobile design practices to annoy your usersYakup Kalin
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?
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 email@example.com 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. 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:
- specific weather and light conditions based on the app usage location (outdoor and indoor),
- view distance (far and close),
- phone settings (night shift enabled, high/low brightness, …)
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?
When we look at the so-called ‘thumb zone’, there are 3 zones for our thumbs when holding a smartphone:
- the natural zone: the zone that’s easy to reach,
- the stretching zone: the zone that’s harder to reach and requires stretching of the thumb,
- 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.
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.
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.
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.
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:
- 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!
- 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. 😉
- 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.
- 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.
- 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.