These 5 major UI mistakes will kill your app

There’s no one universal formula for a great UI app design (if you know one, please let us know). But we do know some major mistakes to avoid if you want to deliver a great app.

We’ve seen every one of these mistakes made by designers of all levels of experience. There’s no shame in that—a good UI design is a multifaceted challenge, and many aspects can be simply overlooked.

At All In Mobile, we often redesign apps for clients who are not satisfied with their product and want to improve the way their app looks and feels. That’s why today we want to share some major no-nos we’ve gathered.

Of course, we’re about fixing solutions, not just pointing them out. That’s why we’ll also show you a redesigned app view list, demonstrating all 5 of these major UI mistakes—and how your team can fix them.

UI mistake 1: Abusing fonts

Let’s start with system font families.

For example, San Francisco is a system font for iOS, and Android has Roboto. They’re both easy-to-read and fairly similar.

Related: 4 tips on typography in UI design

Are system fonts okay to use? Yes, definitely. It’s a safe and proven option. But remember—Samsung phones allow you to change the default font. Your beautifully designed app can be killed in an instant if the phone user switches into Choco Cooky font.

You can also opt for a more sophisticated solution and choose a custom font. If you go this route, though, keep in mind:

Less is more. There might be plenty of awesome fonts, but be reasonable. Fonts should add to the user experience. Too many types, sizes, colors, etc. can complicate things. If you go for custom fonts, keep it simple and coherent. Add custom fonts only when needed and where it actually improves the app—and using custom fonts for the sake of having custom fonts is not a good enough reason.

License. A few months ago we were asked to redesign a fashion app. While reviewing the fonts we came across 2 commercial fonts, both being used without any bigger purpose and without license. This mistake could have cost the client $2,000! A font is software and always licensed. If you embed a font into a mobile app, make sure you read the license and the terms of use. Don’t know the license? Then don’t use the font.

UI mistake 2: Too much on the screen

When phones were much smaller, designers faced issues bundling necessary things onto the screen. For example, the iPhone 4 had 640×960 resolution and 2:3 ratio. With the advent of supersized phones (or phablets), we can put more stuff on the screen—bigger fonts, more buttons, and fancier design.

Be wary of falling into this freedom trap. More isn’t more, so be selective. Every additional item has to be processed by the user. Attract their attention wisely so they can easily navigate the app. If there’s too much on the screen, users can easily get lost and wonder what to do or where to click. Use design to focus the user’s eye on significant aspects. You want people to access the important content straight away and in an intuitive way.

UI mistake 3: Lack of consistency

Be consistent when you design. Don’t send mixed signals to users. If you use one element for a specific action, stick with it. Users learn by doing certain actions, and if they encounter unexpected or ambiguous actions, it can really ruin their experience.

Also keep a consistent layout—for the most part. For instance, use the same colors and elements to create a repeating pattern. Use style guides to set standards so that you can stay on the right track when designing.

Consistent layouts help users learn their way through your app, but you can have some exceptions, like the login page or other screens with dedicated uses. Whenever you break out of the pattern, keep in mind that every element still needs to make up a whole.

UI mistake 4: Transferring from iOS to Android 1:1

It made sense to do 1:1 transfers from iOS to Android until Android 4.0, when Holo Design appeared. It was the first sensible theme for Android, with structures, guidelines, and navigation that was incompatible with iOS.

Why not transfer directly from iOS to Android, or vice versa? Doesn’t it save you time and money?

Well, it might, but the ultimate goal is to create the best user experience, right? And users have habits and preferences. They use their phones all the time, and they grow accustomed to how their particular one functions. So if your applications behave differently than what people are used to, they’re way less likely to enjoy using it.

Android and iOS have their own interaction patterns, and users might not be pleased if you serve them something else they’ll have to learn from scratch. If you transfer from iOS to Android (or the other way around), you could also make consistency mistakes from device to device.

There’s good news, though—your app doesn’t have to look completely different for iOS and Android. Try to keep most of your visual style for both platforms. Take for example the case of car rental app Silvercar. They came up with their own navigation style, but at the same time they retained consistency between the mobile operating systems.

UI mistake 5: Poor information hierarchy

When you design something, whatever it is—a business card, a website, an app—a person will interact with it in some way. You need to plan and design according to the degree of significance of the information you’re presenting, based on the way someone will interact with it.

Sit down and think about the most important thing you want to show. Once you know your priorities, you can distinguish significant things with the help of fonts, colors, size, location, etc. You need to think about what people do with your product—in ideal and non-ideal settings—and design it accordingly.

Mistakes—and solutions—in practice

Now we’re going to show you what all of these mistakes look like in practice, and how to fix them. As an example, we’ll redesign a view list for a food ordering app.

A client with a food ordering app decided to add the option of rating restaurants, but the previous design didn’t provide for such a solution. We took this opportunity to improve a few things.

The previous screen was designed at a time when iPhone 5 still held a greater share of the market. It had smaller cells, a smaller restaurant logo, and more compressed text. When viewed on new devices, too many elements appeared on the screen, making it more difficult to read.

That’s where we stepped in and made some changes:

As you can see, the cells are more distant from each other, don’t fuse together anymore, and everything looks clear. The user isn’t overwhelmed by the number of items on the screen. Also, the hierarchy of information has been improved. Now, the most important element is the logo. A returning user is more likely to quickly recognize the logo than to read the brand name. Previously, the name was fighting with the logo.

Another element that needed work was the typography. We used the Oswald font for names and tags. We initially anticipated only one line for tags, but some restaurants have a really rich offer, and so we enabled ourselves to fit as many tags as possible.

We also include visualization of the Android version with the system font and Choco Cooky on Samsung phones. We solved this issue by adding Roboto as the custom font.

To add the rating portion the client wanted, we decided to use the stars. Hotels and Michelin Guides use it, so it made sense to us.

But there was a problem. We’d used stars in the previous design to mark favorite restaurants. We couldn’t place these 2 elements together because it’d be confusing. Liking a restaurant has nothing to do with its rating, and we would be left using the same symbol for those 2 actions. We didn’t want to be inconsistent, nor did we want to change the meaning of a symbol from one version to another. In the end, we solved the issue with a screen informing users a new feature had been added.

Even if you avoid these 5 major mistakes, what you designed might fall apart when the user comes into contact with it.

You simply can’t anticipate everything people might do. That’s why you have to observe the behavior and needs of the users with the help of analytics and other tools. Then, react accordingly and improve your app. Design should be about changing to improve UX—continuously.

Never rest on your laurels, because there’s always something you can design better.