The Do’s and Don’ts of Mobile UX Design

Mobile UX design is the practice of making apps and mobile-first websites genuinely useful on a six-inch screen held one-handed by a distracted user. Ofcom’s 2024 Online Nation report puts average UK smartphone use at over 4 hours a day, and mobile generates over 60% of global ecommerce sales per Statista. This guide covers the specific mobile UX choices that consistently pay back, the patterns that consistently break, and the technical thresholds (LCP, INP, tap target size) that matter more than aesthetics.

Key Takeaways: UK adults spend over 4 hours a day on their phones (Ofcom, 2024). Mobile generates over 60% of global ecommerce sales. Tap targets at least 48 pixels, LCP under 2.5 seconds, accessibility from day one. The dos: core tasks, accessibility, user research, obvious navigation. The don’ts: clutter, novelty, endless scroll, copying competitors.

What is mobile UX design and why does it matter in 2026?

Statista’s mobile commerce data shows mobile generated over 60% of global ecommerce sales in 2024, and Google’s mobile-first indexing means the phone version of a site is what ranks. Mobile UX design is no longer “the small-screen version”; it is the primary experience.

The constraints that make mobile UX harder than desktop:

• Screen real estate. A 6-inch screen forces ruthless prioritisation.
• One-handed use. Most thumbs reach the bottom half of the screen comfortably; the top is awkward.
• Distraction. Mobile users are commuting, queuing, watching TV, or talking to someone. Attention spans are measured in seconds.
• Network variability. A user on a poor 4G connection has a different experience to a user on home Wi-Fi.
• Touch input. Fingertips are imprecise compared to mouse cursors.

Designing for the worst-case mobile user (one-handed, distracted, poor connection) consistently produces better UX than designing for desktop and shrinking.

Do: focus on doing the essential features well

Nielsen Norman Group’s research on mobile usability consistently finds that buyers value depth over breadth on mobile: a few core features that work brilliantly outperform many features that work passably. Feature creep is the most expensive UX mistake.

How to apply the “essentials” principle:

• Identify the top three user tasks. Survey customers; check analytics. What do users do most?
• Make those three tasks one tap or one scroll away from the home screen.
• Demote everything else to secondary navigation, search, or a dedicated section.
• Resist adding features until existing ones are working measurably well.
• Watch session recordings (Microsoft Clarity, Hotjar) to see where users get lost.

A mobile experience that does five things excellently beats one that does twenty things adequately, every time.

Do: design for accessibility from day one

Web Content Accessibility Guidelines WCAG 2.2 define the legal and practical baseline for accessible digital experiences. Accessibility is not a nice-to-have layer added at the end; it is a structural design choice that benefits every user, not only users with disabilities.

The mobile accessibility baseline:

• Tap targets at least 48 by 48 pixels. Small buttons fail for everyone, not only users with motor impairments.
• Colour contrast at WCAG AA. 4.5:1 for normal text, 3:1 for large text.
• Text resizable without breaking layout.
• Screen reader-friendly labels on every interactive element.
• Captions or transcripts for video and audio content.
• Forms with associated labels. Placeholder-only labels disappear on touch.

Accessibility audits (axe DevTools, Lighthouse Accessibility) take an hour and catch the most common issues. Most teams skip the audit entirely.

Do: research your users before designing anything

Steve Krug’s classic Don’t Make Me Think and decades of UX research since converge on the same finding: design that fits how real users actually behave outperforms design that fits how designers imagine they behave. Research is the cheapest UX investment available.

Useful mobile UX research methods:

• Interview five existing users. Not “would you use X” but “show me how you used Y last week”.
• Analytics review. GA4 funnel reports tell you where mobile users drop off.
• Session recordings. Watch real users navigate the app or site. Microsoft Clarity is free.
• Competitive teardowns. Use three competitors’ apps for a week. Note what they got right and wrong.
• Tree testing or first-click testing. Validate navigation hierarchy before designing.
• Five-second tests. Show a screen for five seconds, ask what users remember.

The single most under-used mobile UX research method is the post-purchase or post-signup survey. Most teams ask “how did you hear about us” and stop there. Adding one question, “what almost stopped you from completing this?”, produces the highest-payback feedback for mobile UX work most teams will ever get. The friction the user almost-quit-on is the friction the next user definitely will.

Do: keep navigation obvious and self-evident

Apple’s Human Interface Guidelines and Google’s Material Design both emphasise the same principle: mobile navigation should feel familiar enough that users do not need to learn anything new. Innovation in navigation almost always fails.

The navigation patterns that work on mobile:

• Bottom tab bar with 3 to 5 primary destinations. The thumb-friendly zone.
• Hamburger menu for secondary navigation. Familiar, well-understood.
• Search at the top of any content-heavy app.
• Persistent back button following the platform convention (iOS top-left, Android bottom).
• Breadcrumbs for deep hierarchies (less common on mobile, but useful for ecommerce).
• Sticky CTA for the primary action (Buy, Add to Cart, Book).

Reinventing navigation patterns kills usage. The familiar pattern is the right pattern.

Don’t: clutter the interface

Google’s Material Design principles and decades of Nielsen Norman Group findings agree: on a 6-inch screen, every element competes for attention. Cluttered interfaces force users to do mental work to find the next action. Decluttering is one of the highest-payback mobile UX changes available.

Concrete patterns to avoid:

• More than 5 to 7 primary actions visible at once.
• Banners and popups that hide the content the user came for.
• Excessive marketing badges (“NEW!”, “LIMITED!”, “SALE!”) around every product.
• Multiple competing CTAs of equal visual weight.
• Decorative imagery that doesn’t earn its space.
• Cookie banners and signup popups firing simultaneously.

The best mobile interfaces feel almost empty compared to desktop versions of the same product. That emptiness is intentional.

Don’t: try to reinvent the wheel

Microsoft’s Fluent Design research and Google’s Material teams both publish data showing that familiar UI patterns (icons, gestures, layouts) consistently outperform novel ones in usability tests. The save icon stays a floppy disk because users instantly recognise it; the user does not have to learn a new symbol.

Patterns to stay with:

• Standard icons for common actions (cart, search, hamburger, share, save).
• Platform gesture conventions (swipe right to delete, pull down to refresh).
• Standard form input types (tel, email, number) so the right keyboard appears.
• Familiar checkout flows (cart, shipping, payment).
• Standard date pickers, time pickers, dropdowns. Custom controls almost always feel worse.

Novelty is expensive: users have to learn, the team has to maintain, and the payoff is rarely worth either cost.

Don’t: build endless scroll without orientation

Nielsen Norman Group’s research on infinite scroll finds that endless scroll works for serendipitous browsing (social feeds, image search) but actively hurts goal-directed tasks (finding a specific product, completing a form). Defaulting to infinite scroll without thought is one of the most common mobile UX failures.

When infinite scroll works and when it doesn’t:

If you do use infinite scroll, give the user a way to jump back, save position, and reach the footer (which infinite scroll famously breaks).

Don’t: copy a competitor’s app

Edelman’s Brand Trust research and behavioural-economics studies on differentiation both show that brands users perceive as “the same as everyone else” lose preference and trust. Copying a competitor’s app produces a worse version of theirs, not a better version of yours.

What to do instead:

• Study competitor apps for patterns, not for visual identity.
• Identify what your audience wants that competitors are not delivering.
• Bring your brand voice into the writing, even microcopy on buttons and empty states.
• Differentiate where it matters to the buyer, not where it matters only to the design team.
• Iterate based on your own users’ behaviour, not against competitor screenshots.

The mobile UX details that build brand recognition are the small ones most teams treat as afterthoughts: empty-state illustrations, error messages, loading animations, post-action confirmations. A user who completes a transaction and sees a thoughtful confirmation screen remembers the brand; a user who sees a generic “success” message does not.

Frequently asked questions

What is the most important mobile UX principle?

Reducing friction for the user’s primary task. Every other principle (clarity, accessibility, performance, navigation) serves that goal. Mobile UX work that does not make the primary task easier is rarely worth the effort.

How is mobile UX different from desktop UX?

Mobile UX has tighter constraints on screen size, attention, network reliability, and input precision. Desktop UX can assume more context (multiple windows, mouse precision, larger screens). Designing mobile-first and adapting upward consistently produces better results than designing desktop-first and shrinking.

How important is page speed for mobile UX?

Critical. Google’s research found bounce probability rises 32% as load time goes from 1 to 3 seconds and 90% as it goes from 1 to 5 seconds. A beautifully designed mobile app or site that takes 5 seconds to load is a mobile UX failure regardless of how good the design is.

Should I follow Apple’s or Google’s design guidelines?

Both, for their respective platforms. Apple’s Human Interface Guidelines for iOS apps; Google’s Material Design for Android apps and web. Cross-platform tools (React Native, Flutter) typically follow the platform convention based on the device. Mobile websites can follow either as long as the experience feels native.

How do I test mobile UX before launching?

Run unmoderated usability tests (UserTesting, Maze, PlaybookUX) with 5 to 10 users from the target audience. Analyse session recordings from existing users. Run heuristic evaluation against NN/g’s mobile usability principles. Combine the three; they catch different problems.

What this means in practice

Mobile UX design is mostly a discipline of restraint. The mobile experiences that win are not the ones with the most features, the most novel interactions, or the flashiest visuals; they are the ones that do a few specific tasks brilliantly, follow familiar patterns, load fast, and respect the user’s time and attention.

For broader context, see our guides on web design and digital marketing strategy and Core Web Vitals improvements.