UXcam logo
A blog about app User Experience
Mobile UX Design: The Complete Expert Guide 2022

Mobile UX Design: The Complete Expert Guide 2022

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

May 2, 2021 by Annemarie Bufe

mobile ux design

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.

Contents

    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.

    You might also be interested in: How To Do a UX Competitor Analysis for Your Mobile App (FREE Template!)

    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.

    user experience honeycomb

    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.

    Get your free guide: Mobile app onboarding best practices to activate your app users (with examples)

    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

    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.

    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.

    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.

    bad mobile app design examples

    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.

    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.

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

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

    Try UXCam for FREE now — with 100,000 free monthly sessions and unlimited features.

    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

    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.
    Thanks for submitting the form.
    CONNECT WITH US:

    © 2022 UXCam. All rights reserved.

    Privacy policy.

    Terms of service.