Mobile UX: What you should know

Master the art of mobile UX

User Experience Statistics

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 success.

“…the average app loses 77% of its DAUs (editors note: daily active users) within the first 3 days after the install.” – Andrew Chen

In order to decrease this number, you have to give your users an outstanding mobile user experience. In this guide, you will learn about the difference between mobile UX design and desktop design.

After reading this article, you will know the fundamentals of designing a great app that makes your users happy.

What is Mobile UX?

User Experience (UX) is what the user experiences while using a product.
UX Design is the process of creating a product that is delightful to interact with.

Mobile UX is the experience the user makes while using an app on a mobile device. This includes both good and bad experiences as well as emotions and feelings.

But: Don’t mix up User Experience (UX) and User Interface (UI). Both interact very closely with each other, but they are not the same.

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

What exactly does this mean?

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

The UX encompasses the UI but also some more aspects. These aspects go beyond the purely graphical representation of the UI and extend it to the experience of the user during the use of the app. They are shown in the honeycomb represented by Peter Morville.

UX Cluster mobile honey

  • Useful:

    The system must fulfill the users wishes and needs.

  • Usable:

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

  • Desirable:

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

  • Findable:

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

  • Accessible:

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

  • Credible:

    The user must trust you and your product.

What’s the difference between mobile UX and desktop UX?

To give your user the best experience, you have to learn what the differences between mobile UX design and the desktop UX design are. You can’t use the same design principles for both.

1. Size

Desktops: They are big. You can put a lot of stuff and information on one page and it will look great and organized.

Smartphones: If you shrink your website to the common size of a 4 – 5 ½ inch mobile device without changing anything, it will look awful and confuse the user.

Pay attention: You have to decide which information is important enough to show it to your user on his smartphone and which information can be hidden, for example in 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, you have to arrange your content in just one column. The user has to scroll down to see all the content.

mobile UX Desktop view

2. Screen Orientation

Desktops: They are horizontally orientated. The user can’t change this orientation.

Smartphones: On mobile devices, the user has the option to change the screen orientation. 94% of the users use their smartphone vertically, while 6% use their smartphone horizontally.

UX Orientation mobile app

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

UX touch mobile

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

3. Navigation and Input

Desktop: Keyboard and mouse are the most common input devices for desktops. Sometimes you find desktops with a touchscreen, but even they have mostly an additional mouse and keyboard.

Smartphones: On a mobile device the user doesn’t have a mouse or a physical keyboard to type or select. Mobile devices have touch screens.

Pay attention: If your user has to type anything, for example for the sign in process, you have to offer him a keyboard. You can help your user and make the input much more comfortable when you offer him different keyboards, depending on what he has to enter. If he has to enter a phone number or zip code a normal keyboard wouldn’t be good, here you should offer him a numeric keyboard.

UX different table mobile app

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

UX mobile App music

Mobile devices don’t just allow the user to touch buttons, there are also gestures the user can use. The most common gestures are scrolling, sliding, pulling down and tapping (long, short or double). Pulling down, for example, is a common gesture for refreshing the page.

mobile app gestures

4. Environment

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

Smartphones: Mobile phones are more personalized than desktops. Mobile phones are used everywhere, regardless of whether it’s in the restaurant, at home or in the bathroom.

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

Pay attention: Realising that the user wants to use your app everywhere, leads you to the point that your app should be well usable outside. You need to design your app with high contrast colors to make sure that your users can read everything, even if the sun is shining on their smartphone.

mobile app view clarity UX

Pay attention: Sometimes users don’t trust mobile apps. They feel insecure to give all their private data to a mobile app. To not overstrain the user, ask only what is really important for using the app. Minimize the need for input for a perfect mobile UX.

This doesn’t mean that you should add unnecessary questions to a desktop app. Even on desktops, the users will drop off if they feel disturbed in their private life and information.

mobile app form UX

5. Split screen

Desktop: The user is able to open several apps and websites at the same time, for example, your app and a calculator. It’s no problem to open them next to each other.

Smartphone: Newer smartphones do support split screens. It is not as commonly used as on the desktop, so the point is still important. You have to care about the majority of your users who have smartphones without the split screen function. If the user needs to compare exchange rates or check the location of a town to use your app fully, and you don’t offer this functionality, he might have to leave your app and open a calculator or Google Maps. This can tempt him to completely close your app – maybe because he is distracted by another open app or annoyed because you haven’t offered him all the functions he needs for using your app completely.

Pay attention: Try to keep the user in your app by offering him everything he needs inside your app. Moreover, don’t take the user to a browser to complete actions like registration or login.

6. Symbols

Symbols are relevant for both desktops and mobile devices. When the user uses different apps, he will learn the meaning of common symbols and icons. Make sure that you use symbols in a common way and not in an unexpected way. The unexpected use of symbols will confuse your user and he might not want to continue using your app.

UX symbols

7. Seamless design

If you want to offer your app for mobile devices and desktops you have to create a seamless design. This means that your design should be recognizable, no matter if the user uses the mobile app or the desktop app.

mobile desktop seamless design

Related Articles: