Mobile UX 101: Tips & best practices every designer should know (2023)

For the majority of us, our smartphones are the center of our universe. We use them to communicate with one another, watch TV, capture memories, pay bills, order food, keep up to date with the latest news, run businesses; the list is endless. During the COVID-19 outbreak, handhelds were a necessity. We’ve come to rely on these devices quite heavily.

In 2020, there were almost 7 billion
 users of mobile devices, and this statistic is expanding.

Almost 67%
 of the world owns a mobile device, but most importantly, over 50%
 of all website traffic comes from smartphones (and this doesn’t even include native mobile apps!). This means that UX designers should be focusing a little bit more on mobile when designing interfaces. But, focusing on what exactly? Let’s take a look.

Thanks to our friends at Editor X for writing and sponsoring this blog post! Editor X is the advanced website creation platform made exclusively for designers & agencies.

Recommended design approach: Mobile-first design

So, how do we ensure that we’re designing terrific user experiences for the majority of users—those being, of course, mobile users—without negatively impacting our desktop user experiences?

(Video) UX DESIGN TERMS EVERY DESIGNER SHOULD KNOW

Answer: By taking a mobile-first approach to UX design. This approach caters to the majority of users first and comes with two major benefits that make the overall UX design process much easier to deal with.

The benefits of a mobile-first design

Firstly, taking a mobile-first approach to UX design makes responsive design easier—i.e. it’ll be easier to cater for devices of all types, screen sizes, and screen resolutions. The two main reasons for this are that designing for the smaller screen requires that we reduce feature bloat by removing any feature that isn’t absolutely necessary. In turn, this also reduces cognitive load for users, so that there isn’t too much ‘happening’ all at once.

Taking a mobile-first approach to UX design makes responsive design easier.

After designing a minimal, no-more-than-what’s-needed mobile experience, moving onto larger screens is then way, way easier.

Secondly, with a smaller feature roadmap and a less cluttered user interface, it’s both easier and faster to design, test, and ship, making mobile-first the better option for conducting user testing, where we test our solution.

Let’s dive into the practical side of things.

1. Design for one-handed use

The most common user type is the user that uses their mobile device with only one hand. As a user, this isn’t a monumentally difficult task, but there are a couple of instances where this can get quite tricky and lead to users becoming frustrated.

The image below indicates the reachability of various tap regions on an averagely-sized mobile device. Teal areas are the most accessible and redder areas are the least accessible. This problem is accentuated with larger screens, since our thumbs haven’t evolved to enlarge with them (unfortunately!).

Whenever you’re able to, design tap targets within these accessible regions. Specifically, that’s towards the lower-middle region of the screen. Your main navigation should be fixed to the bottom so it’s accessible without getting in the way.

Mobile UX 101: Tips & best practices every designer should know (1)

2. Design for left-handed users

Perhaps you’ve noticed that in the image example above, the left-hand side of the screen is slightly more accessible. That’s because the heatmap illustration represents that of a right-handed individual. 10-12% of users are left-handed; which, if there are a lot of users, means that a great number of them are lefties.

Considering the fact that there’s no way to programmatically adapt an app or website for left-handed users, the only solution is to place important or contextual tap targets towards the vertical middle, and not so much the left or right.

(Video) How to Improve UI/UX Design Skills | 5 Quick Tips

Mobile UX 101: Tips & best practices every designer should know (2)

3. Design for everybody through accessibility

19% of the world has a disability of some sort. Not only is this a significant portion of users, but designing with accessibility in mind can also benefit everyone—not only those with disabilities.

Color contrast

First, let’s talk about color contrast. Color contrast defines how easily users can distinguish between two different visual elements. An optimized color contrast ensures that everyone can see our interfaces clearly, regardless of the device used, size of font, and visual impairment.

The appropriate amount of contrast, as defined in the WCAG 2.0 Web Content Accessibility Guidelines, differs depending on whether we’re talking about icons or we’re talking about text. When it comes to text, then the amount differs depending on the size of the font.

There are various tools available that can check color contrast for us, some of which integrate directly with UI design tools (such as Stark
, while others are standalone web apps (such as the classic WebAIM Contrast Checker
)

Optimizing for the right amount of color contrast ensures that everybody can see our interfaces clearly regardless of the device, size of font, and visual impairment.

Tap target design

Tap target size: Some users, most notably those with motor disabilities, experience physical difficulty interacting with technological devices, especially when it comes to activating small targets. For this reason, the WCAG 2.0 and the Google Web Fundamentals advocate for a minimum tap target size of 44px² and 48px² respectively to ensure optimum clickability.

Tap target spacing: In addition to being the right size, tap targets shouldn’t be too close to one another. Although this issue very rarely crops up, it can be very frustrating when it does. An example of this is when links are used in a list and the line spacing is too small.

Pro-tip: Run a Google Lighthouse audit to check tap target sizes and spacing (this only works on live websites).

Mobile UX 101: Tips & best practices every designer should know (3)

4. Consider landscape optimization

Landscape orientation is most common in tablet devices. Examples of where tablets are often used include: PoS (Point Of Sale) apps, SaaS (Software as a Service) apps, sketching apps, and more.

When optimizing for landscape orientation, be wary of elements that take up too much vertical space, forcing important elements outside of the viewport, either partially or completely. This one is quite easy to overlook, so be sure not to test for it.

(Video) The UX Research Methods Every Designer Needs To Know

Mobile UX 101: Tips & best practices every designer should know (4)

5. Tablets

Continuing on the topic of tablets is that the thumb reach is obviously different here than in mobile, especially with landscape orientation).

Tablet use is mostly handheld, similar to mobile devices. While users do sometimes use tablet apps and websites on a flat surface (for example, when using the Apple Pencil), often this is as a last resort because the design isn’t hand-friendly.

Ensure that you have a variety of devices at-hand to test with, and always test for edge cases. Emulated or simulated tests are fine for responsive design testing, but real devices are better.

Mobile UX 101: Tips & best practices every designer should know (5)

6. Device hardware

Another important feature about designing for mobile devices is that the hardware capabilities are different from desktop. This is because mobile devices come with a unique set of usability-related challenges. For example, typing on a mobile device is naturally much more difficult than it is on a desktop device.

Designers should leverage these capabilities to help users overcome these challenges. Here are a couple of comparisons:

  • Online forms — Desktop: Filling out address forms / Mobile: Auto-filling addresses using GPS
  • Credit card information — Desktop: Typing credit card information / Mobile: ‘Scanning’ cards using the camera

There are many more mobile functionality use-cases available—GPS functionality, QR code functionality, camera functionality, and so on. These are all super useful in a wide variety of use-cases where traditional interactions, like using the keyboard, aren’t mobile-friendly.

Mobile UX 101: Tips & best practices every designer should know (6)

Usability testing with mobile prototypes

The topics covered here may all sound great on paper, but what’s the best way to ensure that their implementation can quantifiably improve the user experience of our designs?

Measuring performance not only shows that we’re on the right track, but also proves to stakeholders that certain demographics (such as left-handed users, users with disabilities, or simply even mobile users as a whole) are worth catering and advocating for.

Clickability testing

Clickability testing is crucial when designing for mobile devices, especially because some features behave on mobile, such as hover states. This can be done either via clickmap testing or visual affordance testing:

(Video) UX Principles You Should Know When Designing

Clickmap testing: A clickmap is a type of heatmap that specifically shows what users are and aren’t clicking on. While this type of usability test isn’t rock-solid, it can reveal tap targets that don’t appear to be very clickable. If this happens to be the case, then follow up with a visual affordance test, which is more reliable.

Suitable user/usability testing tools include:

Visual affordance testing: Visual affordance testing involves asking users to circle the elements that they think are clickable, and then, the elements that they think aren’t clickable. Pretty much any tool that enables usability testers to sketch over static mockups of our designs (for example, Miro
 or InVision Freehand
), will work fine here.

Remember, hover states don’t quite work the same way on mobile devices, so clickability testing either via the use of clickmaps or visual affordance testing is super important when designing for mobile devices.

Functional salience testing

Functional salience testing involves asking users which tasks and features they consider to be important. This is instrumental for finding out which visual elements to prioritize when screen real estate grows scarce on mobile devices.

Functional salience testing is usually conducted early on in the design process. However, we can also use it to identify feature bloating issues with designs that already exist and aren’t working all that well.

Mobile UX 101: Tips & best practices every designer should know (7)

Design a seamless mobile experience with Editor X

It’s safe to say that in 2021, designing for mobile devices is just as important as designing for desktop devices (if not more so). To help you build and launch powerful websites with a seamless mobile experience, we built Editor X—the advanced web creation platform made exclusively for designers.

True to our brand’s mission, Editor X creators can experience total design freedom on the most intuitive and flexible canvas. With the help of custom breakpoints and flexbox technology, creators can bring their vision to life for any screen size imaginable.

If you’re ready to start designing beautiful and functional web and mobile experiences, visit EditorX.com.

Thanks to Daniel Schwarz for writing this article and Shai Samana for designing the graphics.

Find more Process stories on our blog Courtside. Have a suggestion? Contact stories@dribbble.com.

(Video) UX DESIGN & RESEARCH 101 TERMS UI COMMON TERMINOLOGY & WORDS EVERY DESIGNER SHOULD KNOW

FAQs

Why mobile UX design is difficult? ›

Good UX is hard because it involves two vastly different skills: A deep understanding of the machine. People in this group worry about code first, people second. They have deep technical knowledge and skill.

What is one of the most important aspects of mobile UX design? ›

Put the User First. This should go without saying, but in any design project, the user should always come first, and user needs are even more important (and more specific) on mobile devices. If designers don't cater to mobile users' needs, those users will very quickly move on to other websites, apps, or distractions.

What is a good thing to avoid in mobile UX? ›

Not keeping a UX design style consistent

This is a very common mistake in the world of mobile apps. Designers use different fonts and color schemes in one app's UX in order to stand out, but they unfortunately achieve the opposite. Consistency of your app's design will prevent frustration with end users.

What are the 3 Golden Rules of UI design? ›

The UI design principals are:

Make it comfortable to interact with a product. Reduce cognitive load. Make user interfaces consistent.

What are the 3 most important things you would consider when developing a mobile app? ›

11 things to consider before you design and build your App
  • Do you really need an App? ...
  • Decide if it is for Android, Apple or both? ...
  • Have you allowed enough time to design, build and test it? ...
  • App Registration. ...
  • Who are you competitors? ...
  • Use an App developer or use on online build service? ...
  • Do you need a tablet version too?

How can I improve my mobile UX? ›

In this article we have discussed these ten ways to improve your mobile UX:
  1. Use a task-based design.
  2. Provide a good menu with a search option.
  3. No need to add dividers when sections are clear to begin with.
  4. Make forms as short as possible.
  5. Don't add too many colors in your design.
  6. Make sure buttons and links can be clicked.
4 Nov 2020

How can I improve my mobile UX app? ›

How To Improve Your Mobile App User Experience
  1. Use Native Component In Your Mobile Application. ...
  2. Keep Your App Design Simple. ...
  3. Improve Consistency In Your App Design. ...
  4. Improve The Search Feature Ιn Your App Design. ...
  5. Animate Your Transitions. ...
  6. Test Your App And Find Ways To Improve It.
6 Oct 2018

What 5 factors are important for developing a mobile device? ›

Five key important factors to consider while developing a mobile...
  • Invest in research. ...
  • Make clear objectives. ...
  • Know your target audience. ...
  • Choose the right platform. ...
  • Get the features right.

What are three challenges to designing for mobile devices? ›

These include: Slow loading pages. Small space for design. Risk of content getting lost in the page.

Why mobile UX is important? ›

Hence, investing in offering a smooth mobile UX design can make your customers happy and, in turn, lead to an increased Return on Investment(ROI). Even the slightest changes that help the customers navigate easily and faster can make a huge difference in their perception of your brand.

What UX designers should not do? ›

Common UX Design Mistakes to Avoid
  • Considering UX only in the Initial Parts of the Project.
  • Adding too Much Content.
  • Improper Navigation.
  • Not Adopting Simplicity.
  • Not including Design Thinking.
  • Ignoring Usability.
  • Lots of Animations.
  • Poor Contrast.

Which of the following are best practices when designing for mobile? ›

15 Mobile App Design Best Practices
  • Blend Useful and Intuitive Experiences. ...
  • Make User Interfaces Invisible. ...
  • Cut Out the Clutter. ...
  • Navigation Should be Simple, Yet Discoverable. ...
  • Build for One Handed Operation. ...
  • The Appearance Of Speed Matters. ...
  • Thoughtful, Timely Notifications are Essential. ...
  • No Web Experiences.
25 Jun 2021

What are some UX best practices? ›

UX design best practices
  • Make it accessible. Good design can be used by everyone. ...
  • Keep it consistent. Since your design is part of your brand, it should be consistent from page to page. ...
  • Make a sitemap. ...
  • Use clear navigation tools. ...
  • Keep copy clear. ...
  • Test and test again. ...
  • Design to context. ...
  • Keep it simple.

What are the best practices for mobile testing? ›

10 Best Practices for Mobile App Testing
  • Increase Efficiency and Productivity with Test Automation.
  • Test Early, Test Often – Testing as Part of Your App Development.
  • Rely only on Real – Emulators vs. ...
  • Ease your App Testing by Splitting into Smaller Units.
  • Make Your Testing Data-Driven.

What are some best practices for creating mobile content? ›

5 best practices for a mobile content marketing strategy
  • Create short, yet descriptive headlines.
  • Keep your paragraphs concise.
  • If they're interested, they'll scroll.
  • Use images judiciously.
  • Avoid intrusive popups.

Videos

1. Basics of UI Design for Mobile Apps - Artboard Size, Screen Density and Resolution for Beginners
(Design Pilot)
2. The Laws of UX - 19 Psychological Design Principles
(Joseph from LearnSketch․com)
3. 5 MUST HAVE Skills for UX Research 2019 | Zero to UX
(Kevin Liang)
4. A New Way To Copy & Paste Figma Components!
(DesignerUp)
5. 12 Mistakes Junior UX Designers Make
(vaexperience)
6. 5 UX Design Tips & Techniques | UX Design Basics
(Jesse Showalter)
Top Articles
Latest Posts
Article information

Author: Maia Crooks Jr

Last Updated: 01/28/2023

Views: 5835

Rating: 4.2 / 5 (63 voted)

Reviews: 94% of readers found this page helpful

Author information

Name: Maia Crooks Jr

Birthday: 1997-09-21

Address: 93119 Joseph Street, Peggyfurt, NC 11582

Phone: +2983088926881

Job: Principal Design Liaison

Hobby: Web surfing, Skiing, role-playing games, Sketching, Polo, Sewing, Genealogy

Introduction: My name is Maia Crooks Jr, I am a homely, joyous, shiny, successful, hilarious, thoughtful, joyous person who loves writing and wants to share my knowledge and understanding with you.