A great idea alone does not make for a great app. The mobile user experience and the design of your app are just as important for success.

“…the average app loses 77% of its DAUs (editor 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 how to design a great app that makes your users happy.

User Experience (UX) is what the user experiences while using a product. Mobile UX is the experience the user make 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 close 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. It includes every step from the design of every single element to the flow of the website.

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 representation by Peter Morville.

Useful: The system must fill the users wish or need.

The system must fill the users wish or need. Useable: The system must be as easy and self-describing as possible.

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.

The style of the system must evoke positive emotions and appreciation. The user must want to use your system. Findable: The navigating through the system must be easy and self-describing. Moreover the user must find important information quick.

The navigating through the system must be easy and self-describing. Moreover the user must find important information quick. Accessible: Disabled users e.g. user with very poor eyesight must have the chance to use your system and get the same user experience as not disabled users.

Disabled users e.g. user with very poor eyesight must have the chance to use your system and get the same user experience as not disabled users. Credible: The user must trust you and your product.

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. On a mobile device you have to arrange your content in just one column. The user has to scroll down to see all the content.

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.

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.

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

Pay attention: The size of 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.

Mobile devices don’t just allow the user to touch on 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.

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 if 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 news. But most of the users will decide for the smartphone in this kind of situations.

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 colours to make sure that your users can read everything, even if the sun is shining on their smartphone.

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 of input.

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.

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 screen. 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 which 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 of another open app or annoyed because you haven’t offer him all 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 the common way and not in an unexpected way. The unexpected use of symbols will confuse your user and he might not want to continue use your app.

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.

If you liked the article leave some claps. To get more interesting articles and information concerning mobile ux visite our blog https://blog.uxcam.com/.