8 Common app design mistakes and how to avoid them
An app can be one of your brand’s most important tools, but just because you have one doesn’t mean it’s effective. There are many oversights, big and small, that can sabotage your app design. We’re here to help you avoid them!
We’ve compiled a list of the 8 most common app design mistakes we come across, along with our tips on how to dodge these bothersome blunders!
Illustration by Anniko
Mistake #1: Making an app that’s not finger-friendly
The mistake: One of the most important things to consider when designing an app is not something that appears on the screen; it’s what’s holding the screen. The human hand is an amazing tool, but there are some tasks that are tricky for it to perform. App designers need to keep this in mind if they want to keep their users happy.
Many apps have buttons and other clickable elements (known as “targets”) that are difficult to select because they’re too small. This is especially problematic for older users, people with motor skill difficulties, or even simply for users with big hands. We’ve all experienced the frustration of clicking the wrong button and having to wait while the incorrect screen loads. 😤
Additionally, many apps are difficult, or sometimes even impossible to use with one hand. This frustrates users, as it’s not always convenient to use both hands to navigate an app.
How to avoid it:
Ensure clickable elements are at least 44px by 44px in size
Use bigger targets if your users tend to be older, or if they’re likely to experience any motor skill difficulties
Don’t place targets too close to one another (e.g. don’t place a “save” and “discard” button so close that a user may accidentally select the wrong one)
Where possible, allow users to navigate with their thumb so that they may easily use one hand to get around your app
Mistake #2: Using confusing app icons 🤯
The mistake: Instead of using words for menu items, many apps rely on icons to represent their pages. This is a useful design trick as it saves on space (something that a smartphone screen has very little of). The problem comes in when icons don’t clearly communicate what they are meant to represent. This leads to confused users who are forced to click around blindly trying to figure out what each icon means.
How to avoid it:
Ensure the message of your icons is clear
Where possible, pair icons with text so that users have a backup should they not immediately recognise an icon
Use universally accepted icons (like the hamburger menu) where possible, but also don’t assume that your users will recognise them
Keep the style of your icons consistent throughout the app
Use vector or SVG icons to ensure they look crisp across all devices
Make sure your developers use the correct icon attributes. This will make icons readable to screen readers, so that users with visual impairments can navigate your app
Mistake #3: No clear hierarchy of app elements
The mistake: An app designer’s main job is to organise content in the most clear and digestible way possible. Since text forms the basis of informational content, it’s vital that it’s well organised, with important information given a greater hierarchy than secondary information. This is often not the case, leading to overwhelmed users who don’t know where to look.
Another related mistake is when buttons are all given the same hierarchy, no matter the role they play on the current screen. Take for instance a Sign Up page. The “sign up” button should be the most prominent, with a less prominent “log in” button allowing users who have already registered to navigate to the Login page. Giving both the “sign up” and the “log in” buttons the same hierarchy will lead to a confusing user experience. Confused users are unhappy users.
How to avoid it:
Ensure text is well structured by using font size, weight, and color to give text the correct hierarchy
The title of a page should be the biggest, with text getting progressively smaller (or less prominent) from headings, to subheadings, to body copy, to labels
Use white space to visually separate different sections of text and group related text
Differentiate between primary and secondary buttons using colour, size, and font weight. Secondary buttons should be noticeably less prominent
Mistake #4: Confusing users with inconsistent app elements
The mistake: Possibly the most common mistake we come across is app design that is confusing. There’s nothing more frustrating than an inconsistent app - with elements that work differently in different places, inconsistent wording describing the same action, features that are sometimes available and sometimes mysteriously not - argh 😫! There’s no surer way to scare users away!
How to avoid it:
Keep an eye on consistency. Consistent design elements not only look better, but also make it quicker for users to learn how your app works. Users are busy, and the easier it is for them to use your app, the more likely they’ll be to use it
Place related menu items in the same place so that users know instinctively where to access them
Use consistent wording throughout the app so that users are never unsure of what a particular term means
Illustration by Pablo Stanley
Mistake #5: An app design without enough contrast 🌗
The mistake: Contrast is everything when it comes to design. Not only does it add visual interest, but it also helps to guide users through an interface. In low-contrast apps, elements seem to merge together, leaving you with a dull and difficult to use interface. On the other hand, high-contrast apps make effective use of visual difference to draw the user’s attention to the right elements at the right time.
How to avoid it:
Ensure that buttons and other important CTAs (call to actions) are immediately noticeable by contrasting them from surrounding elements
Use contrast to guide a user through your app. This can be done by placing high-contrast CTAs in various spots throughout the page
Use contrast to differentiate between sections of a page. For example, you could use a different background color for the page header, content, and footer, making the page easier to scan and digest
Ensure there is enough contrast between a foreground element and the background. When in doubt, use WebAIM’s contrast checker
Don’t place text over photos without ensuring that there is enough contrast between the two. Use colour overlays, or very plain photos to ensure that the foreground text is easy to read
Mistake #6: Leaving the user guessing
The mistake: We’ve all been there. We click a button, submit a form, enter payment details, and…. nothing. Nothing happens. Huh? Did my request actually get sent? Is the payment being processed? What is going on?! 🧐
App designers must make sure that users know what’s happening at all times. They need to communicate through loaders, success indicators, notifications, and other signals to tell users how their actions have been interpreted by the app.
How to avoid it:
Where necessary, indicate the app's current state e.g. is something loading, was a request submitted, did the system encounter an error?
Don’t use error messages that simply state that something went wrong, but give no indication of how to fix the problem (my personal pet peeve). Don’t leave your users stranded like this!
Always give users clear feedback on how their actions have been interpreted. Notifications, alerts, or even subtle animations can mean the difference between a user-friendly app, and a completely confusing experience
Use animated loaders to indicate to users when something is being processed
When a user makes a payment, make sure they are met with a clear, jargon-free notification indicating the status of their payment.
Make sure users are never left guessing as to what they can expect to happen next
Illustration by Matt Blease
Mistake #7: Difficult to use or confusing app forms
The mistake: Forms are a crucial part of just about any app. Whether the user is signing up, logging in, checking out, or simply sending a message to the support team, they will almost always be using a form. This is why it’s vital that forms are not only easy to use, but also enjoyable to fill out. It’s important to provide users with clear guidance before, during, and after submitting a form. Many apps get this wrong.
How to avoid it:
If there’s one thing most users agree on, it’s that they hate filling out long forms! If a form is too long, break it up into logical sections.
For very long forms, allow users the option to save their progress so that they can come back later and pick up where they left off
Consider adding a progress bar to indicate how far along the user is in the process of filling out the form
Use dropdown menus where it would be quicker for the user to select from a list of items, rather than typing one out
For long dropdown menus (like a list of countries), let users start typing their answer to help them find it quickly (see how smoothly React Select manages this)
Make sure error messages are clear so that users know where the error is, and how they need to adjust the information they entered
Add default answers to form fields where it makes sense to do so e.g. if the majority of your users are based in the United States, set the currency default to “US Dollars”. That’ll mean only a small number of users will have to adjust the field
Add placeholder text to give users an idea of the type of answer that is expected
When it comes to numeric form fields, allow users the choice between typing a number, using their arrow keys to increase or decrease the amount, or adjusting the number using a stepper
Date pickers are notoriously tricky to use. Make sure yours isn’t!
Mistake #8: Sending too many app notifications or emails
The mistake: App designers tend to forget that their users are busy people with busy lives, and that most of them have many other apps installed on their devices. I don’t know about you, but the number of notifications I receive from all the apps I’m signed up to leaves me feeling like this: 😳. And sometimes even a little like this: 😭.
How to avoid it:
Allow users the option to select the type of communications they want to receive
Make it easy for users to unsubscribe from all non-essential app communications
Ensure that any notifications or emails you send to your users are valuable and well-written
When in doubt as to whether an email would be beneficial to your users or not, don’t hit “send”!
App design do’s and don’ts, done and dusted!
Designing an app takes a lot of thought and skill, but simply being aware of what to avoid can help make your team’s life a whole lot easier. Keep this list of mistakes close by, and pretty soon you’ll find that you won't even need to reference it anymore! Happy app designing!
Ready to dive right in to your app design? We’ve got a guide just for you: App design for newbies: A complete guide to building your first app (with pictures)