7 Deadly Sins of Mobile App Design
Here’s a compilation of poor mobile design practices and tips on how you can avoid them.
Sin #1. Ignoring Onboarding
Onboarding new users is harder than most app designers, developers and entrepreneurs think. Different users have various sets of expectations. What happens right after an app installation — that very first interaction when a user opens an app — makes or breaks a product.
Some users will expect you to welcome them and show them around with a tutorial. Others might prefer the app gets “out of the way” as soon as possible and lets them figure things out for themselves. How do you design for completely conflicting preferences? I’ve seen hundreds of apps that lose me at the first screen. Don’t force users to fill in long registration forms or to sign-in without showing them value. Don’t slow users down with animated splash screens or branding that blocks people from getting to their content.
Users want a clear path to completion. If your app offers users a structured set of steps, it helps reduce abandonment. For a new user to become an active one, they must experience early value from the application. Offer quick social logins (but don’t require them) to help get the mundane sign-in out of the way and make a smoother user engagement.
Sin #2. Overloading Features
A common mistake made too often, especially by first-time app developers, is packing too many features into their app. Edit, edit, edit. The most popular apps today are those that focus on a few things and do them really well. Developers have to know their target audience and empathise with their needs. Instead of spending time and resources building a buffet of mediocre features, focus on one Kobe-steak prime feature.
The core idea behind an app should be to simplify the life of your users while letting them focus on a few things that really matter. Cut down the functionality to only the most essential tasks. For example, I’m writing this article on iA’s Writer for iPad. iA could have easily packed it with a ton of cool writing features which many of us might have never used. Instead, they truly understand their audience, chose key features wisely and designed for primary user needs.
Sin #3. Designing Poor Touch Targets
Unlike cursor-based websites, mobile applications are touch based. That means design needs to accommodate fingers of all sizes and dexterity levels. If touch isn’t carefully considered during the designing of a mobile app, it can easily lead to user frustration and eventually user abandonment. An MIT Touch Lab study of “Human Fingertips to investigate the Mechanics of Tactile Sense” found the average width of the index finger is 1.6 to 2 cm (45 — 57 pixels) for most adults.
That means the average finger is wider than the minimum tap-friendly pixel dimensions mentioned bymost mobile guidelines — so design bigger. Large tap areas also mean users are able to hit and reach targets faster. This is consistent with Fitt’s Law, which says that the time to reach a target is longer if the target is smaller.
Sin #4. Ignoring the Fold
Designers commonly refer to the fold (a term carried over from print design with newspapers) as the content visible on screen before you initiate a scroll. In the mobile app design industry, we’ve spent a lot of time convincing ourselves that the fold is dead and people know how to scroll. This is partly true. Mobile has captured a large portion of the web market. Apps still retain most content from their web counterparts — where a responsive, longer web layout has become common.
In native apps, we don’t mind having action items sit below the fold and allow users to scroll to reach it. But if you have a priority action or piece of information, placing it above the fold is important. I’ve seen conversions increase due to an obvious button placement. This is especially relevant for any actions related to generating revenue. Having a clear call to action above the fold in an e-commerce context helps define the next step, saving users time and energy. For an action that you don’t want people to take — or make inadvertently — put it below the fold. Having to scroll down to reach a delete button helps improve the user experience, as the destructive action can’t be easily mis-tapped.
Sin #5. Using Non-Standard Controls
Mobile user interaction standards haven’t been created in a day — they have evolved over the past 6 years. These controls have been created by some of the world’s best interaction designers, supported by thousands of hours of user-testing, and implemented in hundreds of thousands of apps. Don’t ignore them!
Even if you happen to create a UI control that works well in your app (read: in isolation), it requires general users to learn and then remember that control. This increases the learning curve in your app and lowers your chances for adoption. Since your UI control is relevant only within your app, users might have to relearn the action if it shows up in another context — and they don’t like/want to do that.
As designers and app developers, we have to be sensitive to platform guidelines. Using inconsistent controls or gestures is like forcing someone to learn a foreign language to have a conversation with you. How many people would just give up and find someone else (another app) that speaks their language? Porting UI controls and paradigms from other platforms — or making new ones that conflict with norms — is a sure-fire way to confuse, and lose, your users.
Sin #6. Lacking Perceived Affordance
What’s a perceived affordance? First, an affordance is what you can do to an object. Perceived affordances are actions you understand just by looking at the object, before you even start using it.
Donald Norman, in his book “The Design of Everyday Things”, explains it best in his essay:
“In product design, where one deals with real, physical objects, there can be both real and perceived affordances, and the two need not be the same. In graphical, screen-based interfaces, all that the designer has available is control over perceived affordances. The computer system, with its keyboard, display screen, pointing device (e.g., mouse) and selection buttons (e.g., mouse buttons) affords pointing, touching, looking, and clicking on every pixel of the display screen.”
Norman outlines four design principles for screen interfaces:
- Follow conventional usage: both in choice of UI controls and the allowable interactions. Those who violate conventions, even when they are convinced the new method is superior, are most likely doomed to fail. (See Sin #5). Most people don’t like change and conventions usually change at a slow pace. An example in mobile design: Loren Brichter’s pull to refresh gesture originally invented in Tweetie, which has now made its way into countless iOS apps.
- Use words to describe the desired action: Words are understood more quickly than graphics. For example, having a “Share” button written in words instead of an icon is faster for both a new and experienced user to decipher. However, words can cause problems with international adoption. Words plus graphics are a better bet.
- Use metaphor: Metaphors are both useful and harmful. Metaphors aren’t understood by everyone, they’re bound by geographies and cultures. The only way to confirm your metaphors are understood by users is to conduct appropriate research to ensure usability.
- Follow a coherent conceptual model: once a part of the interface or gesture is learned, the same principles should apply throughout the interface. Coherent conceptual models are valuable and necessary, but there still remains the initial learnability issue. How does a user learn your model in the first place? By using conventions, words and metaphors in the right context.
A great mobile example — designing buttons. With “flat UI” making waves in the community, designers go for aesthetic design over functional design. If your design includes a button make it look pushable and consistent with the platform for which you’re designing.
Sin #7. Forgetting User Feedback
One of the most basic guidelines to improving an application’s usability is to constantly provide user feedback. Feedback — a confirmation/validation/update on action — can be visual or auditory. If an app doesn’t provide feedback, it leaves users guessing what is happening. Most of the time, they guess wrong.
Three basic ways to keep users in the loop:
- Show users the current state of an action (like a spinner as something loads)
- Tell users how their action is being processed
- Tell users what’s happening
When a button is tapped, show a visual cue like a color change. Visual cues become even more powerful for certain actions when combined with audio feedback, like the swoosh sound in the native iOS mail app that indicates an email has been sent.
Your Turn
With a huge app market (both Apple and Android can claim 1 million in their stores, respectively) that’s only growing more flooded every day, everyone wants their app to have the biggest possible chance of success. Avoiding these 7 deadly app design sins shows you how to bypass the design pitfalls many rookies fall into, and keep your design simple, touchable, responsive and readable so your users stay engaged and informed. As always, appealing to what the user wants gives you the best recipe for a winning app.
