Design

7 Deadly Mobile App UI Design Sins You Should Never Commit

August 17, 2015

Are rules made to be broken? It really depends on the rule. In the world of mobile app UI design, there is some wiggle room when it comes to things like aesthetics, gestures, and animations. There may be cases when a plain, functional app makes more sense than a showy one, or vice versa.

A cute dog wearing devil horns as part of a Halloween costume, judging you for committing any of these mobile app UI design sins.

But there are some cardinal rules you don’t break. If your mobile app UI design makes it impossible for the user to access crucial features, it’s a no-go. If your text is so small, nobody can read it, you need to go back to the drawing board. White text on a light background? Try again.

We wanted to know what successful designers considered to be the seven deadly sins of mobile app UI design. We asked three experts, and came up with three separate lists — but see if you can find the similarities in each.

7 Deadly Mobile App UI Design Sins — According to ÄKTA

Alyssa Burke and Macy Nguyen are User Interface and Visual Interaction Designers at ÄKTA (@akta), a digital experience and engagement consultancy. Both have worked on native mobile design projects for Fortune 500 companies and fast-growing startups, contributing their UI design chops to some of the agency’s best projects. Here’s what they consider to be the unforgivable sins of mobile app UI design:

1. Ignoring context.

The target users’ personal profiles (age, lifestyle, tech-savviness, etc.) and their physical environments (indoor vs. outdoor, offline vs. online, morning vs. evening, etc.) will affect many design decisions. Mobile app UI designers should factor in as much contextual reasoning into the iterative process to lessen the risk of low usability. Even with smooth transitions, slick buttons and beautiful typefaces, some apps miss the mark because the overall UI design didn’t coincide with specific use cases (dark screens for apps that are mostly used outdoors: bad UI design move).

2. Designing in a box.

Designing and building digital products is a team (and community) effort. Showing design work early and often throughout the entire project timeframe to various teammates and even people who aren’t familiar with the specific project (techies, newbies, geeks, fanatics, friends, strangers, bros and hipsters) is key. Give them the context they need, but don’t be overly-defensive right off the bat. Better make room for changes earlier in the process than fix problems post-launch.

3. Snubbing developers.

More than developers and engineers being your teammates (and occasional drinking buddies), they are tech wizards who not only know what works in the real world, but can also be your champion in making sure your ideas are executed as you envisioned them. There are some mobile app UI designs that are impossible to do technically. There are also things that are possible, but will take a lot of effort and/or time outside what was slated for the project. You’ll never know unless you ask. At the end of the day, developers will build out your designs. They can either support you or hate you.

4. Underutilizing motion design.

With the Internet of Things slowly taking over and digital interfaces playing a larger role in how people interact with the world around them, this facet of UI design needs to be taken more seriously by designers. People, by nature, derive meaning and react differently to how objects in their environments move. Using the right UI motions is a very effective way to denote priority and urgency. In some cases, when used appropriately, it also can elicit delight. As an added bonus, check out Disney’s Twelve Basic Principles of Animation.

5. Using small type.

People read content on screens slower, less accurately and less comprehensively than on paper. As rule of thumb, type size for digital interfaces should be, at minimum, double the size of what would work for print. Different typefaces and type settings also yield varying results especially when users are trying to accomplish multiple tasks on their mobile devices. On top of avoiding small type sizes, determine how other UI elements like button shapes, images, and interactions affect the desired the overall UX.

6. Disregarding tap targets.

Many mobile app UI designers still miss the simple fact that users’ fingers vary in size. When it comes to action or task-oriented tap targets, keep it simple and as big as possible. Consider “jittery movements” when designing for the elderly and similarly, inaccurate tapping when designing for children. You can leave empty some area around an asset when slicing it to intrinsically increase tap size so that it won’t bog down load time too much.

7. Being a platform loyalist.

Having one design for both Android and iOS is limiting and may have adverse effects on your overall UX goals. Both platforms have different design patterns that their respective users are familiar with. UI designers should not only be familiar with these, but actually explore widely-used apps that are available in both platforms.

An angry man holds his phone in front of his face, with the image of a shouting mouth. Bad mobile app UI design leads to frustrated users.

7 Deadly Mobile App UI Design Sins — According to Moblico Solutions

We spoke with several team members at Moblico Solutions (@moblico), a mobile relationship management solutions firm whose goal is to help brands “create more effective mobile moments.” Having advised clients across multiple industries how to make their apps deliver a better experience, they know what works in mobile app UI design — and what doesn’t. Here’s their take on the 7 deadly sins of mobile app UI design:

1. Taking up a bunch of space on a device relative to perceived value.

When you get the dreaded “running out of space” popup, you immediately go to your apps and start deleting. If an app is large, taking up a bunch of space and not providing enough value? Hasta la vista. Better to keep the apps small to stay off the chopping block.

2. Asking for permission as soon as the app launches (push, location, camera, etc.).

How often do you download an app and are so excited to open it and start using it, only to be met with an immediate box? I don’t know what the box said, I just closed it and went on. What was it, I wonder? Oh well. New app!

3. Requiring login, registration or worse — purchase — after download and before the app can be used.

Actually, maybe this one should be number one — it’s a tough call. One of the worst things you can do to a user is let them download your app and then tell them they must have some kind of paid plan to actually use it. Bad, bad, bad. Deleted.

4. Creating a mobile app UI design that looks just like the online website.

Does this not defeat the purpose of having a mobile app? If there’s one thing that burns a mobile developer, it’s just “minifying” the online experience and calling it an app. Mobile apps have, or should have, a specific utility, and shrinking down a website rarely serves the purposes the user is expecting.

5. Poorly placed ads, or ads that trick you into clicking them with a tiny “x.”

How annoying is it to be scrolling down a mobile site and your finger lingers just too long on an image and out you go to a browser advertisement? And about that small “x ” — who can hit that? It becomes a gamble. Do I try to hit the tiny “x” at the risk of fat-fingering it and clicking on the ad? Argh! Choices!

6. Overloading me with push notifications.

Yes, you now have an app and are on the home screens of millions of people. That’s a lot of power. But think before you push, and always ask yourself: is it relevant? Will this user want this notification? Sure, you could notify every time you post a new t-shirt to your mobile store, but should you? With great power comes great responsibility.

7. Lack of a single sign-on (SSO) to access mobile accounts.

The best user experiences happen when app developers assume that people don’t want to work for the experience. No one really wants to create a new login to your app. SSO is our reality now, and we must embrace it. Facebook won. Let’s move on.

A desk is covered in black and white design tools, including a smartphone, pen, and card that says “Creative Mess.”

7 Deadly Mobile App UI Design Sins — According to Ideaware Co.

Andres Max (@andresmax) is the founder of Ideaware Co. (@ideawareco), a digital creative agency that helps startups and Fortune 500 companies alike build engaging apps. Prior to founding Ideaware, Max was a lead UX Designer at Mashable. Having designed for more than a few industry heavy-hitters, Max has strong feelings about what he sees as the seven deadly sins of mobile app UI design:

1. No user feedback once the user taps on something.

For the love of god, give the user feedback once they did something on your app — or else the user will just think the app hanged and will quit it.

2. Eternal onboardings.

If I’m on my phone, I probably want to do whatever I’m doing in your app quickly. Don’t ask me hundreds of questions or require me to fill out thousands of fields.

3. Making touch points the wrong size.

Please stop making buttons or fields minimal size. It’s not the web — my fingers need to be able tap on an action “close enough” and not precisely on a pixel.

4. Introducing weird navigation patterns.

Want people to get your app fast? Then don’t introduce your own version of how a mobile app should be navigated. Apple’s Human Interface Guidelines and Android’s Design Guide. are there for a reason. Don’t introduce friction and give your potential new user another reason to uninstall your app.

5. Bad color schemes.

Be easy on the eyes there, soldier. You don’t need to “stand out” with your yellow-over-black text.

6. White space.

Apps need lots of whitespace, period. Elements need to be spaced apart, buttons need to be big, and it all needs to breathe. There is no fold in a mobile device, stop cramming everything into a single screen.

7. Push notification hell.

For the love of god, don’t send your users 20 push notifications a day. After a few, your app will just be screaming “uninstall me.”

A color palette fanned out. Sometimes, a bad color scheme drags down an otherwise good mobile app UI design.

What Would Your 7 Deadly Mobile App UI Design Sins Look Like?

While each designer’s list looked a little different, there were definitely some commonalities that stood out. Avoiding push notifications except when they’re really necessary and making sure your mobile app UI design is actually usable — by making navigation intuitive and sizing elements correctly — are two big ones.

Here’s one sin we’d like to throw into the ring: neglecting your digital prototype. It’s during the prototype stage that you can hammer out a lot of mobile app UI design issues, as well as get valuable feedback on how to make your app more usable, even magical. That’s why Proto.io is so passionate about creating a prototyping solution that’s as powerful as it is easy to use.

What deadly sins would you add to this list? Let us know by tweeting us @Protoio!

Author

You might also like …

Testing

Top 5 Mobile Interaction Designs of July 2016

App Store

4 Apps and Devices Making the Most of Haptic Technology

UI

Top 10 Mobile App UI of July 2016

Mobile

10 Productivity Apps for Taming Your Scatterbrain

App Store

Do Introverts or Extroverts Make Better Mobile App Designers?

New features

Introducing Proto.io 6