The 7 Design Elements of Great Mobile Products

This article originally appeared in the Huffington Post here.

Sometimes, mobile products appear so simple that they feel obvious, as in anybody could make one, or frivolous, as in they will soon be out of fashion. Truth is, the most beautiful mobile products are the result of an enormous amount of work.

Mobile designers rely on two types of design elements: focusing and expanding. Focusing elements build trust by being predictable. Once trust is established, expanding elements allow the experience to be personalized to a user’s moods and environment.

Focusing design elements provide easy access to the information a user is looking for.

Focusing design elements can be an obvious call to action like the “Ok” button of a subscription form or a navigation bar, but they also manifest as more subtle, sometimes seamless interactions that just as effectively immerses people in the world around and deepens their relationship to it.

They are a necessary component of a solid relationship between a user and a mobile product. They build trust, respect, and familiarity over time. They make life easier for users by establishing simple and predictable rules of communication. Through them, mobile products add transactional value and with time, they become indispensable, almost as an external limb would.

On the home screen of your smartphone, a focusing design element might be the red badge with a number at the top right corner of the app icon. It conveys that something new has happened since you last checked that screen. You missed something and need to get up to speed on what’s going on with your friends. Time to reconnect!

Focusing design elements come in five types:

1. Onboarding, such as tutorials, sign-up flows, help tips, and app store descriptions are used to bring users up to speed on the value they can get out of using an app. Mobile companies have learned that there is a very short period of time and attention a user will grant them to make their case, so onboarding elements are critical. The best mobile app use onboarding elements to deliver value to a user before they even sign up.
2. Single-task, such as home screens, buttons, search bars, and predefined options keep a user focused on what they need to accomplish. Mobile companies often refer to the so-called “thumb test”, as one of the most important rules for mobile design. To pass the thumb test, a task should be easily completed by a user with a thumb of normal or average size and without incidentally hitting an unrelated link or button or other design element by mistake.
3. Navigation, such as side menus, navigation bars, and badges allow users to transition between single tasks inside an app. Navigations are often hidden or positioned out of the way to allow single-task elements to take center stage. In most cases, a single navigation is best to keep things simple and easy to use. Reviews stating that an app is hard to use generally come from a poorly designed navigation.
4. Efficiency, such as crashes, slow loading screens, broken links, timeouts and other performance issues tell users that an app is built on a broken foundation. When people discover they’ve invested time in a mobile product that doesn’t work, they feel that their time is not being valued and they vent their frustrations and stop using the product. The cost ranges from negative reviews to disengagement, lost sales and more.
5. Gesture, such as taping and swiping are paradigms that exist only on the touch-enabled interface of mobile devices. Users expect predictability: one tap on an item expands it, a right swipe deletes it, etc. Imagine browsing for flight in a new travel app. You see a return ticket that fits your criteria and tap on it. What do you expect to happen? What if it doesn’t? What if something else happens? How would you feel about using this app again?

Focusing design elements build trust, respect, and familiarity over time. As trust builds, users start to expect more. This requires access to personal information which is where expanding design elements come in.

Expanding design elements enable deep personalization to a user’s mood, time and place.

Expanding design elements look like a simple request for permission. Permission to access a user’s address book, or to track their location, or to send them so-called push notifications. They enable mobile products to mesh with their users, to become extensions of their bodies and minds.

Users get more value out of doing less because the product itself notifies them about ways they can use it to simplify their life when and where it matters. Expanding design elements make a product so easy to use that they let us know when we should use them.

Expanding design elements come in two types:

1. Pull, such as alerts and pop-ups that prompt a user to grant permission to access personal data. This includes a user’s contacts, photos, calendar, or even real-time location or health data. Getting permission from a user to pull this type of personal data allows an app to become contextual, to make an educated guess about what could be useful to a user at a specific time and place.
2. Push, such as so-called push notifications that are sent to a smartphone’s home screen on behalf of an app. You’ve probably noticed them on your own phone – they pop up when you get a new email, a friend makes an update on Facebook or your crops are ready to harvest on Hay Day. Push notifications keep a design so simple that users don’t even need to launch the app.

Because of how powerful they are, push notifications should be handled with utmost care. Mobile companies’ efforts to deliver push notifications will be wasted if users opt out of receiving them or decide to turn them off because they feel spammed or interrupted at a bad time or for the wrong reason.

In mobile, design gets out of the way because mobile products exist to enhance rather than obstruct a user’s connection with the real world. Mobile designers rely on two types of elements: focusing and expanding. Focusing design elements build trust by making it easy to do something that seems hard to do. Expanding design elements personalize people’s experiences and deepen their connection to their environments. Mobile products that can do that become virtual extensions of their users’ minds and bodies.