Mobile UX Design: The Complete Expert Guide 2021

"Design is not just what it looks and feels like. Design is how it works." — Steve Jobs

mobile ux

A great idea alone does not make for a great app. Mobile UX (user experience) and the design of your app are just as important for its success.

“…the average app loses 77% of its DAUs within the first 3 days after the install.” — Andrew Chen

To decrease the number of lost daily active users, you have to give your users an outstanding mobile user experience. In this guide, you will learn the fundamentals of designing a great app that makes users happy.

What is Mobile UX Design?

Mobile UX encompasses the subjective experience that a user has with a mobile app. This includes both good and bad experiences, as well as emotions.

UX design is the process of creating a product that is delightful to interact with and provides a meaningful and relevant experience. It includes but is not limited to interaction, content and sound design, and takes the complete customer journey into consideration.

Don’t confuse user experience (UX) and user interface (UI). Both interact very closely with one another but aren’t the same. 

UI is a part of UX, but UX is not limited to UI.

Why Is Mobile UX Design Important?

The UI includes everything that has to do with graphic design.

UX goes beyond the purely graphical representation of the UI. It’s also concerned with designing the experience that users have before, during and after using the app.

The elements of a good mobile UX design are shown on Peter Morville’s user experience honeycomb.

mobile user experience definition
The elements of good UX design

Useful:

The system must fulfill the users’ wishes and needs.

Usable:

The system must be as easy and self-descriptive as possible.

Desirable:

The style of the system must evoke positive emotions and appreciation. Users must want to use your system.

Findable:

Navigating through the system must be easy and self-descriptive. Moreover, users must find important information quickly.

Accessible:

Disabled users, e.g., users with very poor eyesight, must have the chance to use your system and get the same user experience as non-disabled users.

Credible:

Users must trust you and your product.

What Are the Differences Between Desktop and Mobile UX Design?

To give your users the best experience possible, you have to know the differences between desktop and mobile UX design. You shouldn’t follow the same design principles for both.

1. Size

size mobile ux design

Desktop: Computers are big, so you can put a lot of information on one page and it will still look great and organized. 

Smartphone: If you were to shrink your website to the regular size of a 4-5 ½ inch mobile device without changing anything, it would look awful and confuse your users.

Pay attention: You have to decide which information is important enough to make it to a smartphone design. If something doesn’t need to be there, skip it, or place it under a menu or on another page.

Moreover, because of the bigger screen size of desktops, you can arrange your content in several columns next to each other. For a great mobile UX design, you have to structure your content in just one column. Users scroll down to see all the content.

2. Screen Orientation

mobile UX orientation

Desktop: They are horizontally oriented. Users can’t change this orientation. 

Smartphone: On mobile devices, users have the option to change the screen orientation if they want. 94% of users use their smartphone vertically, while 6% do so horizontally.

Furthermore, 49% of users prefer to use their mobile phones with just one thumb. The bigger the screen size, the fewer points that can be reached comfortably with one thumb.

mobile ux design natural movement

Pay attention: You have to consider several aspects here. First, you have to make your mobile app usable in two different orientations if you want to provide your users with a smooth UX. Second, you should arrange the main features or clickable icons so that your users can reach everything with one thumb.

3. Navigation and Input

mobile UX input

Desktop: A keyboard and a mouse are the most common input devices for desktops. Sometimes you will find desktops with a touchscreen but, even then, those tend to have an additional mouse and keyboard of their own.

Smartphone: On a mobile device, users don’t have a mouse or a physical keyboard to rely on. To type or select elements, mobile device users have to use their touchscreens. 

Pay attention: If your users have to type anything — for example during the sign-in process — you should offer them a keyboard.

Help your users and make the input much more comfortable by offering them different keyboards depending on what they have to enter. If the information requested by you is a phone number or a ZIP code, a normal keyboard won’t do; offer them a numeric keyboard instead. 

UX mobile App music

Pay attention: The size of the action icons is important. Too many action icons too close to each other, and the chance of missteps is high. Make sure that the buttons are big enough to be tapped with a finger.

Mobile UX Design: The Complete Expert Guide 2021 1

Mobile devices go beyond allowing users to touch buttons; there are other gestures that users can perform. The most common ones are scrolling, sliding, pulling down, and tapping (long, short or double taps). Pulling down, for example, is a common gesture for refreshing a page.

4. Environment

mobile app view clarity UX

Desktop: Users often use desktops for more serious or important tasks e.g., working in the office or shopping.

Smartphone: Mobile phones provide more personalization than desktops. That is why they are used everywhere; at the restaurant, at home, in the bathroom… anywhere.

Sure, you can install a desktop PC in your bathroom or take it with you on the subway to read the news. But most users will go for their smartphone in this kind of situation.

mobile app form UX

Pay attention: Realizing that users will access your app anywhere leads you to understand that your app should be easy-to-use outdoors. Design your app with high-contrast colors to ensure that your users can read everything, even if the sun is shining on their smartphone.

Keep in mind: Sometimes, users don’t trust mobile apps. They may second guess giving their private data away to a mobile app. To not overstrain your users, only ask for what is really important for using the app. Minimize the need for input for a perfect mobile UX design.

This doesn’t mean that you should add unnecessary questions to a desktop app. Even on desktops, users will drop off if they feel like you’re asking for too much information.

5. Split Screen

Desktop: Users sometimes open several apps and websites simultaneously. For example, your app and a calculator. They can have them both open at the same time side by side.

Smartphone: Newer smartphones support split screens too, but it still isn’t a commonly used feature, definitely not as much as on a desktop.

You should care about most of your users, who probably have smartphones without the split-screen function. If users need to compare exchange rates or check the location of a town to fully use your app and you don’t offer this functionality, they may have to leave your app to open a calculator or Google Maps.

The issue here is that with this comes the temptation to completely close the app, whether consciously or subconsciously. Sometimes users forget that they were on a different app to begin with because they get distracted by another one. Other times they get annoyed at apps that don’t come with everything they need to properly use them.

Pay attention: Try to keep users on your app by offering them everything they need. Moreover, don’t take users to a browser to complete actions like registration or login.

6. Symbols

UX symbols

Symbols are relevant for both desktop and mobile devices. When users go on different apps, they learn the meaning of common symbols and icons.

Ensure that you use typical symbols how they’re usually used. The unexpected use of symbols confuses users and they may not want to continue using your app.

7. Seamless Design

mobile UX design desktop seamless design

If you want to offer your app for both mobile and desktop devices, you need to consider creating a seamless design.

This means that your design should be recognizable independently of whether your users go for the mobile or the desktop app. The features should be similar too — if not the same — and your users should feel that both apps act as one.

FAQ

What is app UX?

App UX encompasses the experience of users before, during and after they use a mobile app.

Who invented UX?

UX has been surrounding human beings since the invention of the first product. The man who officially came up with the term “User Experience”, however, is Donald Norman. Donald Norman used to work at Apple and the Nielsen Norman Group is an influential thought leader in UX to this day.

How do you do UX research?

UX research requires the observation of user behavior. You can use tools like UXCam or Applause to do so. Find a full list of UX methods here.

Related Articles:

Mobile UX Design: The Complete Expert Guide 2021