UXcam logo
A blog about app User Experience
Mobile UX: The Complete Guide to Understanding App UX Design

Mobile UX: The Complete Guide to Understanding App UX Design

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

January 31, 2023 by Annemarie Bufe

Mobile UX design

A great idea alone does not make for a great app. The Mobile User Experience (UX) design of your app is 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 app user experience. In this guide, you will learn the fundamentals of designing a great mobile application that makes users happy.

What is Mobile UX Design?

Mobile UX (user experience) refers to the subjective experience a user has with a mobile app. This includes both positive and negative emotions.

It is the responsibility of UX designers to create a product that is enjoyable to use and provides a relevant and meaningful experience for the user. In mobile UX design, it is crucial to consider the entire customer journey, including interactions, content, and sound design.

The difference between UX and UI (user interface) is important, as UX design encompasses much more than just the graphical elements of the UI. Mobile User Experience design goes beyond the graphical representation and thinks about the emotions, goals and challenges of users.

Why Is Mobile UX Design Important?

The goal of mobile UX designers is to design the experience that users have before, during, and after using the app. Good mobile UX design should be useful, usable, desirable, findable, accessible, and credible, as outlined in Peter Morville's user experience honeycomb.

mobile ux
  1. Useful: The system must fulfill the users’ wishes and needs.

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

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

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

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

  6. Credible: Users must trust you and your product.

What Are the Differences Between Desktop and Mobile App UX Design?

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

1. Size

desktop vs mobile user experience

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.

Session replay is a valuable tool that allows you to see how your mobile app performs on different device sizes and configurations. You'll be able to observe real user journeys and uncover opportunities for improvements - all while getting a better grip of how customers engage with the product. Whether it's discovering device-specific problems or identifying areas that need improvement, session replay will help you acquire invaluable feedback from users.

Group 214

It can reveal a range of potential issues with its performance, such as content that is too small to read or buttons that are placed too closely together on touchscreen devices, which can make them difficult to accurately tap. With UXCam's session replay, you can fine-tune your mobile UX design to ensure that users have a seamless and enjoyable experience no matter what device they are using.

2. Screen Orientation

mobile ux screen 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.

Designers should take this into consideration when creating mobile interfaces. Portrait mode is typically better suited for tasks that involve reading and scrolling, while landscape mode is better suited for tasks that involve watching videos or playing games.

Designers should also keep in mind that users may switch between orientations depending on the task they are performing. For example, a user may switch to landscape mode to watch a video and then switch back to portrait mode to read an article.

To accommodate this, designers should ensure that the layout and design of the interface adapt seamlessly to different screen orientations. This means that the layout should be designed to work well in both portrait and landscape mode and that the design elements should be optimized for both orientations.

You can track changes in behavior based on screen orientation with heatmaps.

For example, a heatmap may show that a button placed at the bottom of the screen is not getting enough attention in portrait mode, but is getting more attention in landscape mode. This information can help designers make informed decisions about how to optimize the layout and design for different orientations.

UXCam's heatmaps can also be used to track user behavior over time, which can be especially useful when comparing usage between different screen orientations. This can help designers understand how users engage with the interface over time, and can help identify any changes in behavior that may be related to changes in screen orientation.

3. Screen Size

Mobile UX Design natural movement

UX designers must take into account the fact that many users prefer to use their mobile phones with one thumb. 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. This means that the layout and design of the interface should be optimized for one-handed use, with important elements and buttons placed within easy reach of the thumb.

Furthermore, this also means that designers should be mindful of the screen size when designing for mobile devices. The larger the screen size, the fewer points on the screen can be comfortably reached with one thumb. This means that designers must carefully consider the placement of elements and buttons on larger screens to ensure that they are easily accessible for one-handed use.

Pay attention: To make sure that the mobile app or website is easily accessible for one-handed use, designers can use techniques like:

  • Placing important elements and buttons within thumb's reach.

  • Utilizing gesture-based navigation to minimize the need to reach for buttons.

  • Making sure that the layout is consistent across different screen sizes.

  • Avoiding placing important elements or buttons at the top or bottom of the screen, as these areas are harder to reach with one thumb.

By taking these factors into account, designers can create mobile interfaces that are comfortable and easy to use for the majority of users, regardless of screen size.

Again, heatmaps can be a valuable tool for analyzing user behavior on different screen sizes.

For example, heatmaps can show how users engage with the interface on small screens, such as those of smartphones, versus larger screens, such as tablets. A heatmap may show that a button placed at the bottom of the screen is getting a lot of attention on a smartphone, but is not getting enough attention on a tablet. This information can help designers make informed decisions about how to optimize the layout and design for different screen sizes. You can use UXCam's mobile app heatmaps for free.

4. Navigation and Input

app UX design

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.

bad mobile app design examples

The size of the action icons is also 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 app UX gestures

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.

By analyzing user gestures, such as taps, swipes, and scrolls, you can gain a deeper understanding of how users navigate your mobile app and identify areas for improvement. UXCam is a mobile app analytics tool that enables you to track user gestures in real-time, providing valuable insights into how users interact with your app.

For example, you may discover that certain buttons or links are difficult for users to tap accurately, or that certain screens are causing users to become frustrated or confused. With this information, you can make changes to your app's user interface and design to improve the overall user experience. Overall, tracking user gestures with UXCam can help you to optimize your app's UX and ensure that it is as intuitive and enjoyable as possible for your users.

5. Environment

How to design for mobile

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.

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

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

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.

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

8. Seamless UX/UI Design

Mobile UX UI

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:

e0a77d45f2235500f6fb529673354877?s=150&d=identicon&r=g
AUTHOR

Annemarie Bufe

Passionate hobby dancer. Working at UXCam. Feel free to comment!

Optimize your user experience

Try out UXCam today to get a 360-degree view of your app user behavior

UXCam logo

Products

Compliancy

    Logo SOC2

    UXCam has successfully completed a SOC 2 Type 2 examination by Johanson Group.

Sign up for our newsletter

First name*
Work email*
By providing your email address, you give UXCam consent to receive announcements, updates, and product offers by email. You may unsubscribe at any time. More information can be found in the Privacy Policy.
*Required
Thanks for submitting the form.
CONNECT WITH US:

© 2022 UXCam. All rights reserved.

Privacy policy.

Terms of service.