Designing a true mobile user experience - 7 rules for success

Mobile apps have been around for over a decade and even though it feels they are becoming a commodity - mobile products are still different than web or desktop products in many aspects. 

In this post, I would like to share my thoughts about mobile design and development, based on over 15 years of experience in this field.

This post will discuss the essence of designing a mobile user experience: UI, UX, and user scenes, which are all different for mobile when compared to desktop applications.

Let's dive in: 

1. Make graphic design a priority

It’s a war zone out there, with millions of apps competing with each other for the attention of users.
People have higher standards nowadays, especially iPhone and high-end Android owners.

Your users treat their smartphones as a piece of jewelry with that gorgeous giant screen and slick edges, and they won’t let any app come-in and ruin that perfect look.

Nobody cares about your tech. Make it look gorgeous.

If an app doesn’t deliver a slick, beautiful, VIP experience - the users will quickly find other alternatives pretty easily.

Smartphones are the most personal and precious jewel we own, and apps must play along.

In fact, without an amazing design, your app might not pass the first gateway, which is the AppStore ‘Install’ button, as most people briefly scan the first 2-3 screenshots before they make a decision whether to install the app or not.

In such a short and shallow attention span - apps must look attractive in order to survive. This also means that the AppStore page optimization must be a priority from day one. Here's a short post I wrote about how we redesigned our app store product page and improved our insall rate.  

If you’re working on a new app and think you can begin with a basic design and improve the UI on a later stage - I would advise you to try the other way around: 

• Work with a professional designer whenever possible.
• Create an engaging and consistent look and feel.
• Make sure your developers are able to deliver a pixel perfect UI (no extra borders, no color inaccuracies, no size changes).
• Every UI element can break your design, including text elements.
• Make sure to follow these 40 rules for writing and designing text in your mobile apps.

The power of some cosmetic changes: rounded edges, light shadows, fewer borders, and the result feels completely different

2. Forget everything you know about desktop apps  

You're on an island now, all alone with your smartphone.

There’s no keyboard around, no table, no mouse, no trackpad, no large screens, only your smartphone, your thumb, and a shitty network.

Forget about writing personas and instead, focus on the scenes.
Where will your app be used? When? What would distract the users and what would their expectations be?

Forget about menus, mouse hovering, keyboard shortcuts, tutorials, and instead - focus on creating simple navigation models, minimizing steps, and creating truly brilliant workflows.

Oh, and a friendly tip if I may: don’t let anyone (and I mean: anyone) in your team use an emulator, simply because none of your users will ever run your app on one.

None of your users will ever use your app on an emulator, so why should you?

[Read: 10 product and development tips for creating a flexible and configurable mobile app]

3. Demonstrate the value of your product instantly 

Meet your new users: they are impatient, suspicious, shameless and emotionless bastards; they don't have time for you, they are watching TV while exploring your app, they don't trust you, they probably don't like you.

Assuming you passed the design test, your next challenge is to convey a strong message and demonstrate the value of your product before the users lose their patience or get distracted. You probably have a few seconds to attract those new users until they kill your app (in disgust) and uninstall it. 

In the past, the goal was to tell the users how valuable the product is. Now, users want to see and feel it first. 

It's a term known as TTV (time to value) and you can read more about it in my pocket guide for product-led growth. 

Here's what I think you should do:

• Spend the first 7 seconds on creating interest with a compelling message and a strong opening.
• Spend the next 30-40 seconds on bringing the users to a point where they actually feel the value of the product (with real content and real actions). 
• Build trust by exploiting cognitive biases (but don't do it in an evil way)
• Avoid empty states (no one sticks around with an empty feed…).
• Turn empty states into fun experiences.
• Use social proof techniques to eliminate friction.
• If your onboarding process is long, consider a trial mode before asking the users to register.
• Eliminate user anxiety by sharpening your microcopy.

At the end of the first session, you need to make sure your first-time users are exactly where you need them to be. Check out these tips for using cognitive biases to improve conversion rates for more help on this topic.

4. Design for short interactions: 

Mobile users expect to get things done in just a few taps (except when they’re in the toilets, maybe…).
In order to support short interactions, your mobile app has to be smarter than any web or desktop app you’ve ever developed.

1. Make it unbelievably fast. The biggest thing mobile users hate is the slow loading time.
2. Keep it short: cut your sentences in half, and then remove all the redundant words. 
3. Make sure to get rid of redundant clicks (taps).
4. Pop-ups are almost unforgivable in mobile. Clean them up as much as possible. 
5. Remove unneeded UI decorators (borders, separators) and keep the UI clean and clear.
6. Limit the number of action buttons per screen to 1 (no more than 3 if you have to). 
7. Keep the main CTA button big and easy to access even when on the move.  
8. Smartphones are giants. Place key UI elements at the bottom of the screen so they are accessible even with one hand.
9. Use hardware and device API’s to retrieve the context automatically (location, heading direction, time, activity) and save user taps. 
10. Load the data efficiently (consider background loading, paging, batch calls) to prevent delays.
11. Minimize typing by using smart defaults and historical data auto-fill.
12. If typing is required - do it in a friendly way…
13. Make navigating from one place to another simple and quick
14. Store user preferences and frequent selections to make it easy for them to repeat their habits in 1-2 taps.
15. Use smart shortcuts to help users achieve more with your app while pushing then towards better conversion rates.

At the end of the day, when your users pull their phones out of their pockets and launch your app while they are rushing to the bus stop, it needs to load instantly, present the right context, and allow them to get things done efficiently with one hand and 20% attention.

When you park your car, grab your stuff, and start walking - you need that parking app to instantly detect your location and save the manual typing. 

[Read: 10 design tips to handle the on-screen keyboard without messing up your mobile app usability]

5. Provide a multi-sensory experience

In mobile, unlike laptops and desktops, every app is a small kingdom. It has a character, a voice, a color.
It needs to create a unique atmosphere - the kind of atmosphere you feel when you enter a boutique.
To achieve it, the software should unite with the hardware to create a perfect synergy. Every action is an opportunity to create a delightful moment.

Amazing design, presented on a marvelous screen, combined with swipes, motion and animations, short sounds and haptic pulses. 

This is my idea of a perfect mobile experience. It involves great attention to details, and that’s why mobile apps are leading the software industry in terms of user experience and usability.
Think I’m exaggerating? Explore some of the most popular apps and experience how great micro-interactions should feel like: notice those delightful sounds, haptic feedback, and elegant animations.
BTW, my favorite example is this: compose your tweet on twitter app and notice that as you get closer to the text limit - a short haptic signal is invoked and draws your attention in a fun and clever way.

[Read: Mobile design trends to watch out for in 2019]

6. Design for interruptions: 

We all suffer from too many interruptions. Mobile apps, in this respect, are running at the core of our most chaotic environments - smartphones.
Incoming phone calls, push notifications, text messages and emails can easily distract the users in the middle of important workflows (i.e. a second before they hit the ‘check-out’ button). It happens a lot, and when it does, the operating system often terminates some of the apps running in the background, in order to save resources.
Mobile apps should deal with interruptions by saving important states. This will make it easy for the users to pick up from where they left off.
Interruptions are also caused by the nature of being “mobile”; apps should function properly in poor network areas (tubes, elevators, parking lots) and endure occasional disconnections. The secret is to actively manage these situations: do not pass the responsibility to the user (i.e. show an error message saying: “You are offline! Your draft is gone!”), and instead, save whatever you can, locally on the device, place a gentle warning toast, allow certain actions to be made offline, and prevent the user from making an Irreversible mistake.

Oh no! you just walked into an elevator!

[Read: Here's why Shipping is so important to me]

7. Get personal without invading the users' privacy

Smartphones are the most personal wearables we don’t wear

It's probably the beer, but I think this one deserves a tweet!

Smartphones know everything about us; our habits, friends, photos, health, and physical condition.
Mobile apps can access most of this information but it’s important to use only what’s really needed and relevant for the product.

Permissions are often treated as a side-issue but reality shows this is a serious topic that should be planned carefully as part of the onboarding process, especially with GDPR and CCPA.

Build a strategy for every permission you need: is it a must? Is it needed from the very beginning? Can the app work without it for a while? What’s the best timing to ask for it? What to do if the user rejects it?

There are many ways to get personal with users without invading their privacy:

1. Build your trust before anything else.
2. Start asking for permissions only after a certain trust was built. 
3. Ask only for the relevant permissions. 
4. And only when needed (i.e access the camera only before uploading a photo), to minimize the chances of refusals.
5. Respect the privacy of the users.
6. Follow the GDPR guidelines.
7. Never spam or abuse these privileges. 

And remember:

With great permissions comes great responsibility.

Summary: 

Design, value, short interactions, small screens with big actions.
Mobile apps are still unique and require a special level of sensitivity to details and usability.
Over the past 5-6 years, we’ve seen web and desktop apps borrowing many mobile elements and the boundaries are slowly blurring, and that’s a good thing for all of us, the users.

If you enjoyed reading, follow me on twitter @gilbouhnick or subscribe to the Mobile Spoon newsletter to get my occasional blogs directly to your inbox.