Mobile UX Design – 10 Best Practices to follow

User experience (UX) design established itself as a field primarily for laptop and desktop users. AS technology evolved, designers started to design progressively for smaller and smaller screens. The principles and practices were adapted on the go. At present, the idea of mobile UX design encompasses smartphones, tablets, and a range of wearable technology. Each of the latter might well get their own UX design principles in the future. But for now, the mobile UX design field answers the question of how to keep the users engaged and satisfied on the limited real estate of smartphones, smartwatches, and tablets. Of course, adding a few more challenges to that. 

Not only did technology become a driver for the field of mobile UX design. Commercial success in the form of conversions is the main indicator that drives serious professionals into the field. When mobile was mainly for fun and calls – nobody worked on UX design that hard. Now as mobile devices generate revenues by converting users into customers, many have taken to the craft. Large companies like Google and Apple invest in studies on usability and user engagement with mobile devices. They publish their white papers to share findings with the world. It allows developers to create better and more engaging apps for the platforms. 

In this blog post, we will first share what is so different about mobile VS desktop design. We will proceed to briefly highlight the mistakes desktop designers frequently make on mobile devices. Then, we will dive deep into best practices for mobile UX design.

What Is So Different About Mobile Users (compared to laptop users)?

In short, everything. The usage of a web app on a desktop and a smartphone are polar opposites. It is first of all rooted in how the device is held and navigated. On laptops, users navigate with a mouse cursor and have lots of real estate on the screen. You can often notice a large portion of the screen on the sides is left free, lightly greyed, or reserved for ads. On mobile devices, every inch is precious. Not only there is not much space, but also the navigation is often done with a thumb. If you think back to the times when a stylus was offered to accompany a touch screen – it didn’t become mainstream. Why? Not convenient. So, smartphone designs are challenged by little space and the largest finger being used for navigation on that tiny space.

So, any mobile UX design starts with an understanding of how the users prefer to hold and navigate the screen. If you look at the picture below, you can see the ways people interact with touchscreens.  

Out of these possible ways to hold and use a mobile device, some are more popular than others. One-hand use with first-order thumb placement constitutes 49%. The least popular is the landscape two-hand way of holding. 

What does it give us, understanding the method of holding? The picture below shows the distribution of active screen areas and inaccessible ones for navigation. The green area represents an area where it would be easy for a user to tap. But, of course, you will have to avoid edges and corners – users tend to avoid clicking there. 

The other important thing is to not design for a specific way of holding a phone: users switch that, sometimes every few seconds. And if you think about wearable devices like smartwatches, the call-to-action button should be always in the middle of the screen, centered. But with tablets, you usually will have to avoid center areas as they are inconvenient for taps.

Requirements for Mobile UX Design for Mobile E-Commerce Conversions

In a study conducted by Google, the focus was put on studying users’ experience in e-commerce scenarios. It was either making a purchase or booking tickets. So a user should follow a path from searching for an item to paying for this item on a mobile device. What did the study find that is relevant for any e-commerce mobile UX design?

• Unlike laptop users, mobile users are very target-specific. They demand to easily find what they’re looking for, it should be instantaneous, and on their own terms. 
• Site search should be concise but precise. It should be noted that oftentimes users search for something in a hurry.
• A user journey is getting complex, yet with simplicity in mind. Users need to explore before the action, and they have to be able to complete the action on another device. 
• Making users fill out forms is a separate craft on mobile devices. You surely don’t tailor the keyboard for each field on laptops but it is an absolute must for mobile devices. Same as real-time validation for each field.
• Small things matter for a mobile user. Don’t make the user have to zoom in. Don’t make the site open a different tab. Images should be made expandable. 

If you also check recommendations from Apple for mobile UX design, you will see that mobile devices offer built-in features. In contrast, laptops may not have those or their use isn’t that common. For example, the app must be adjustable for Dark Mode or Dynamic Type. Another example is that the app content should be indexed so that the iPhone’s Spotlight can be used. Different operating systems come with their built-in feature set. So, if it is a native mobile app, UX can benefit by utilizing these features.

What Common Mistakes Desktop Designers Make When Designing for Mobile?

Common mistakes of UI/UX designers coming from designing for laptops include utilizing hamburger menus and hiding the essential content. This is because they follow the F-pattern – two horizontal eye movements across followed by one vertical movement down. This pattern is absent from mobile devices. 

Mobile UX designers utilize tab navigation, drawer menus, and progressive disclosures instead. Compare below. Obviously, with the hamburger menu, you don’t know what are the options. Users will either have to remember menu options or make an extra tap to check. With drawer menus, you have icons to indicate navigation options.

Bearing all this information in mind, let’s now dive into the best mobile UX design practices.

Mobile UX Design Practice 1: Conduct Own UX Research

UX design starts with user research. Moreover, keeping tabs on user experiences never ends. At the start, UX designers utilize primary and secondary data which is already available on the Internet. But, it is much more important to have tools that will gather usage data from real users of your MVP app. Sometimes, UX designers are able to conduct studies by observing real users interacting with the app. It all depends on the specific project and budget. 

Overall, unless your team conducts research, there is no way of knowing your target user’s habits, behaviors, and preferences. Prior available research can be used. Yet, these trends are constantly changing, and the technology is too.

For example, Google’s research was done in 2014, and they recommended placing a call-to-action button front and center. A 2019 study done by a private company found that center and at-the-bottom placement is better. It was reflected by bringing in an additional 6% of conversions. In both cases, the research followed specific scenarios and included participants of a particular age group. This is mentioned to underscore the role of a study group. It may be so that your target audience differs from the research participants.

For instance, consider designing an e-commerce app for millennials compared to a fitness tracking app for a mature age group. Millennials are much more tech-savvy. They have certain aesthetic expectations. They are more proficient in gestures like long-tap, double-tap, or pinch-and-zoom. In contrast, a mature age group would prefer a clean look, fewer buttons, and beginner-friendly controls.

Mobile UX Design Practice 2: Keep Things in Minimalist Style

It does not mean bare designs that feel obscure, boring, or lacking. It means to design your app in a way that:

• Requires minimal cognitive load from the user;
• Actions are logically thought out;
• Prioritize components and information needed to complete a target action.

The key here is again to rely on user research. It should be able to answer the question of what and how much product information is enough to make the decision. Of course, all product information is important. But you can’t put it all up there on the product screen. At the same time, you don’t want to collapse essential information. So you need to prioritize the most important and hide the rest. 

A couple more tips include:

• If purchasing a product is a complex process, you better place a button to make a call and finish the target action.
• If the purchasing process is simple, make sure you have “Buy” or “Add to Cart” buttons easily available at all times. 
• Make sure you utilize white space efficiently to underline products and keep things organized. 
• If you add a button, make sure it is connected to the target action. 
• Use one action button per screen. 

So, basically, do anything and everything to present the essential information, showcase products, and lead to an action button.

How to logically refine actions to make sure UX flows smoothly?

Step 1: Analyze which actions are important for users and most frequently used

Step 2: Place actions in one location from screen to screen within your app

The step 3: Use unambiguous icons

Step 4: Customize menus based on what is on the screen

Step 5: Provide feedback to the user (sound, vibration, or visual effects).

For example, if it is an e-commerce app, the user needs to see the button “Buy”. On the next screen, a user might need to fill out some forms. For each screen, you can use consistently the “Next” button. Or, you can have “Fill in the address” or “Pay” so that the user is aware of the process. From experience, we can say that branded apps for millennials would benefit from just the Next button. Less tech-savvy users experience a greater need to be in control. So they would prefer clear namings for the stages. It depends on your UX research and user feedback. 

Mobile UX Design Practice 3: Utilize Familiarity

Creativity and unique designs are good, but not when it goes against intuition and the usual. Chances are your target users have used mobile apps before. They got accustomed to certain icons, color schemes, and navigation patterns. 

• Don’t use red for call-to-action, when it is a color for cancelation or deletion. 
• Don’t place the “Next” button on the left-hand side with “Return” on the right. 
• The “Home” button always seems to have a place either top-left or bottom-center. 
• Search functionality is often represented by a magnifying glass symbol, so there is no need to utilize a binoculars icon instead. 
• Icon with a grid of squares or rectangles conventionally used for product catalogs. Some might misuse an icon with a list of items for this purpose. 

There are more conventions like these. Remember that they don’t make your app look boring or dated. They make your app look familiar and intuitively easy to navigate. No need to reinvent the wheel. Confusing your users will only result in harming your conversions. Also, later we will discuss rage issues among mobile users (UX Practice 5). So, keeping things familiar truly benefits your app’s success and keeps your users emotionally stable. 

Mobile UX Design Practice 4: Animations and Gamification

The desire to stand out and offer a creatively unique user experience is the basis for commercial success. But instead of reinventing the wheel with familiar elements,  it’s a good idea to add something fun. Like animations and gamification. Even though the space is limited, you still have some real state left on the sides. Use it for displaying progress bars, scores for completing actions, and such. 

Gamification in particular has shown an astounding performance boost in UX design. Gamification is used to motivate users and entertain them. In addition, it has a relaxing effect, helps to decrease the cognitive load and switch off from the worries of the day to a more positive vibe. But again, it is not working when you are following trends, it is working when you are sticking to user research.

What are some popular gamification elements? Visit an app every day, and get a badge. Make 3 purchases, and get coins. Achieve a certain level of usage, and get a sticker. Go through a challenge, and unlock a new feature. If it is a learning app, the idea of streaks has been really working well for DuoLingo. You can come up with daily or weekly quests and reward users for their completion.

Animations are what can make those gamification elements stand out. An explosion of confetti on the screen, bursting stars, or a sudden barrage of flowers rushing through the screen. Jumping points, twirling rewards, and so much more. Here you should really analyze the emotional tone of the animations in the context of your mobile UX design. 

Mobile UX Design Practice 5: Button Size Matters Regardless of Screen Size

One study found that users can get angry and start hitting their device screens. It is often triggered by unresponsive controls or buttons. Users tap it once and wait for something to happen. When nothing is happening, they start tapping repeatedly. It often has to do with a touch target being too small or having unresponsive areas. There are actually analytics tools that help monitor “rage clicks” and produce “heat maps” of your app’s screens. Like in the picture below, the button seems to be of a good size, but it becomes responsive only when clicked in the middle. This is why it is so important to control margins on the controls.

In general, the standard is to have buttons at least 7-10 mm (48x48dp) and separate them by 8dp of white space. Same as Google Accessibility Guidelines, we recommend at least 9mm. 

This practice and previously discussed practice #3 highlight the importance of ensuring the app’s expected behavior. There are set traditions in app usage, and sometimes users expect certain behaviors. When it doesn’t work the expected way, users get frustrated. “Heat maps” of rage clicks can help locate places of broken links, or unresponsive elements of your app. Sometimes it can help to discover a feature the user wants. For example, you just display some number, but a user would like to be able to click on it and see the breakdown of that number. Good UX designer doesn’t ignore these things.

Mobile UX Design Practice 6: Account for Storage Constraints

Adding lots of exciting functionality with high-quality visuals often leads to increased load times. And, overall, technical performance is often a hurdle to overcome in many aspects of mobile app development. As a rule, all new technological trends come with high requirements for the device. You might have the latest iPhone, but what about the majority of the users? Sure, many people go for the latest models, but the market for refurbished mobile phones is also strong in the USA. 

The graph below shows the phones sold by different vendors in North America from 2015 – 2023. You should also account for the lifespan of that phone. The average life span is between 2.67 to 2.54 years. It means that some people can afford to buy a phone every year. Yet others would hold on to their gadgets for 4-5 years. If you compare the performance of the latest iPhone with a 4-year-old Motorola or LG phone, you get a gap. So should your UX designer feel free to design state-of-art UX or streamline and cut back as much as possible? Again, the answers should be found in your user research.

What UX elements can be really ‘heavy’ for the device? For example, parallax scrolling. It is not very complicated to implement and it adds immersiveness and depth to the screen. Parallax scrolling is when a user scrolls but elements move at different speeds. For example, Firewatchgame. This UX trick can somewhat strain the Graphics Processor Unit (GPU) of the mobile device. 

The next frequent and easy-to-implement UX elements are 3D flip cards or transitions. They are really exciting and add to user satisfaction, but again require significant GPU power. For example, this website really went all in for 3D cartoon-style graphics. It is really pretty and exciting on the laptop. But when we loaded this website on the mobile phone, it took a few too many seconds than it should have. Plus, its scroll worked with glitches. 

All of that just reiterates the need to know what your users are using. Designing your UX with the user in mind begins simply with understanding the technical requirements your users’ phones can handle. A good UX designer never forgets about the basics. 

Mobile UX Design Practice 7: Drive Conversions by Putting Users in Control

Shopping on mobile phones is only going to be growing. And the research suggests that users convert more if they feel like the owners of the process. It is especially important if it is a new and unfamiliar brand for the user. Designing converting User Experience (UX) in this scenario is the most demanded skill among UX designers. 

What first thing the experienced UX designer recommends? Drop the registration. There are no exceptions to this rule. There are mobile UX designs where registration is made desirable and it benefits the user. But those are usually very customized goods, and registration is preceded by a questionnaire. In practice, there is a lot of playing around with registration but little of it converts. Even if it is registration with a social media account, or Google account, or an Apple account – for unfamiliar brands that is a revenue killer. 

The same goes for checkout. Let the user know that they will be able to pay without an account. Often, you will create an account for the user automatically, the same as in a questionnaire scenario. But the user must be in the know. It is a legitimate barrier for the user when they land on your mobile app – should they even bother choosing? 

Along these lines, by making sure the user understands the process and feels in control, there are a few more things an experienced UX designer should do or know not to do. Any forms users need to fill out create friction. If it is a checkout process – offer an option to pay with third-party services that users may already use. This way you can pre-fill some information from those services. If it is a registered user – always autocomplete forms and just ask to confirm. 

Mobile UX Design Practice 8: Consider Offline

Mobile devices often lose Internet connection and it might be happening more often than you think. For example, these are some common ones:

• incoming/outgoing calls;
• switching between Wi-Fi and cellular data;
• weak signal;
• switching to a flight mode;
• If there are two Internet towers nearby, a mobile phone can switch between them;
• And more…

So, losing an internet connection for a fraction of a second happens frequently. The task of a good UX designer is to make sure:

1. A user can resume browsing wherever they were browsing when the connection was lost;
2. All user input (forms, cart, messages, or any action in progress) is saved.

In this regard, a good UX practice is also to consider saving all the progress and input in case a user misclicks or accidentally reloads the tab and whatnot. The best strategy is to design your mobile UX for interruptions.

Mobile UX Design Practice 9: Forms and Questionnaires

Best practices concerning forms and questionnaires are somewhat distilled and refined by now. The main points are the following:

• One step at a time;
• Tailor the keyboard;
• Choose the best input for the field;
• Immediate validation;
• Indicate the progress/number of steps;
• Autocomplete whenever possible;
• Simplify questions/tasks;
• Optimize the font;
• Use labels to improve accessibility;
• Hard ‘No’ for any repeat actions/information input;
• If you store user’s information for autocomplete, make sure a user is informed about that. The same goes for requesting to share the user’s location or any other piece of data – your app must indicate why it needs this.

Mobile UX Design Practice 10: Put Content First

This is the last principle but it is not the least in significance. It’s quite the opposite: designing the placement of content is vital to the success of your app. In terms of UX designers, mostly those who have a background or at least completed a course in industrial design can do content placement flawlessly. 

Josh Clark wrote several books for designing interfaces for great mobile experiences. One is specifically written about iPhones. One more prominent work “Designing for Touch” deserves particular notice. In that book, he discusses imperfections in iPad design. To be specific, the return button in the top left corner on iPads proved to be a bad design. If the user wants to interact with a device for a few hours, they are guaranteed to have some pain in an elbow or wrist.

The key point in putting content first is a consideration that users always have their thumbs blocking some part of the screen. Navigation should be placed in a way that a user does not block the content. Moreover, it should be accounted for the entire hand movement.  

In his book, Clark also recommends designing for coarse movements. While a user is paying attention to content, they shouldn’t have to take energy and effort to concentrate on hitting a button. Give preference to sliding movements.

When the author of this book consulted designers for Boeing, he advised redesigning pilot controls to account for turbulence. And if we think about mobile users, they have to hit buttons often on the go, or being in a moving vehicle. This is not only inconvenient, but it also takes away from the “star of the show” – the content. 

So, the best is just for UX designers to imagine their users are Boeing pilots. They need to be in control, clearly perceive the content, and keep an eye on content while being able to easily navigate it. Tough? Yes. But it is possible to Design UX process if you follow the best practices. 

Frequently Asked Questions (FAQ):

Final Thoughts

Best UX practices are based on UX user research. If your project doesn’t budget for usability research, the designer should have a set of tools to gather usage analytics. It includes watching for rage clicks, heat maps, how much time a user spends with certain content on a particular screen, and more. Hiring a trendy UX designer who just implements the latest tricks – is just an expensive way to fail. A true professional knows how to Design UX process by distilling and refining user experience in alignment with the user needs, environment, device capabilities, and app’s context. As a joke but with practical insights: simply picturing your user as a Boeing pilot trying to hit a button on a 4-year-old Motorolla/LG smartphone will offer a unique perspective to designing a seamless and user-friendly UX.