Mobile UI design foundations: building apps people actually enjoy using

Mobile is no longer a secondary screen. It is the primary way most people interact with digital products. StatCounter puts UK mobile traffic at 51.71 percent versus 48.29 percent desktop as of March 2026. Globally, the split is closer to 60/40 in mobile's favour.

Despite this, we still see apps and mobile experiences built as afterthoughts. Desktop designs squeezed onto smaller screens. Buttons too small to tap. Navigation buried behind menus nobody opens. We have spent over two decades building mobile apps, touchscreen kiosks, and AR-enabled experiences at kwiboo, and the same foundational mistakes come up repeatedly.

This guide covers the mobile UI design foundations that actually matter. Not trends. Not opinions. The measurable, research-backed principles that determine whether people enjoy using your app or abandon it within seconds.

Mobile first is not a philosophy, it is a priority

Luke Wroblewski coined "mobile first" back in 2009. His argument was counterintuitive at the time because most traffic was still desktop. But his core insight remains as relevant as ever: designing for the small screen first forces you to prioritise ruthlessly. You cannot hide behind a wide viewport. Every element must earn its place.

Google reinforced this with mobile-first indexing, meaning they predominantly use the mobile version of your site for ranking. If your mobile experience is weak, your search visibility suffers regardless of how polished your desktop version looks.

The practical implication is straightforward. Start your designs at the 375 to 390 pixel viewport (the most common iPhone and Pixel sizes), then enhance upward for tablets and desktops. Not the other way around.

From our experience: When we build mobile apps and touchscreen kiosk experiences, we design the most constrained screen first. For our exhibition kiosk work, that means designing for touch interaction on a fixed display before considering any secondary screens. The constraint drives better decisions every time.

Touch targets: the most violated rule in mobile design

This is the single most common mobile UI mistake we encounter, and it is entirely avoidable because the rules are clear and well documented.

The research behind these numbers is solid. MIT's Touch Lab found that the average finger pad is 10 to 14mm wide. Targets smaller than about 9mm produce error rates of 15 to 25 percent. That means one in five taps misses its target. On a checkout button, that is not a minor annoyance. It is lost revenue.

A visual element can appear smaller than the minimum target size. The tappable area (the hit area) just needs to meet the threshold. This is a common misunderstanding: you do not need a 48dp button. You need a 48dp touch target, which can surround a smaller visual element with invisible padding.

Thumb zones: where to put the things that matter

Steven Hoober's widely cited field study observed 1,333 mobile users and found that 49 percent hold their phone one-handed, 36 percent cradle it, and 15 percent use two hands. The critical finding: 75 percent of all screen touches are made with the thumb.

The centre of the screen is tapped most accurately and most quickly. Edges are harder. Corners are worst. With phones now routinely exceeding 6.5 inches, the top corners of the screen are genuinely difficult to reach one-handed.

The design implication is simple: put your primary actions and navigation in the bottom third of the screen. Keep destructive or rarely used actions away from the easy-reach zones. This is why both Apple and Google have moved toward bottom navigation bars as the default pattern.

Worth noting: The colour-coded "thumb zone" heat map diagram that circulates widely online has been disavowed by Hoober himself. He says he over-assumed. The reliable finding is that people touch the centre of the screen most accurately, and 75 percent use their thumb. The specific reach zones vary too much between hand sizes and phone sizes to map reliably.

iOS vs Android: the platform conventions that matter

Both Apple and Google overhauled their design systems in 2025. Apple introduced Liquid Glass with iOS 26, and Google launched Material 3 Expressive with Android 16. These are the biggest visual changes either platform has made in over a decade.

But beneath the visual refreshes, the fundamental behavioural differences remain, and these are the conventions you need to respect.

Follow platform conventions for navigation, gestures, and system controls. These are learned behaviours. When an Android user encounters iOS-style navigation, it feels wrong, even if they cannot articulate why. Reserve your custom design language for brand expression within content areas, not for the structural elements users rely on to get around.

If you are building with a cross-platform framework like React Native or Flutter, this means intentional per-platform adaptation. A single design that ignores platform differences will feel slightly wrong everywhere.

Navigation: stop hiding it

The hamburger menu is the most debated pattern in mobile design, and the data is clear. Nielsen Norman Group's quantitative testing with 179 participants found that hidden navigation cuts discoverability nearly in half compared to visible navigation. Users take longer to complete tasks, succeed less often, and perceive the experience as more difficult.

The hamburger icon itself is now widely recognised, but recognition is not the same as engagement. People know what it is. They just do not open it unless they are actively looking for something they cannot find.

For most apps, the answer is a visible bottom navigation bar with 3 to 5 items. If you have more destinations than that, put the most important ones in the bottom bar and use a hamburger or "More" tab for genuine secondary navigation. Repeat key links in the footer or contextually within content.

From our experience: On every mobile project, we push for visible navigation as the default. When a client insists on a hamburger menu because it "looks cleaner," we show them the NN/g data on discoverability. Clean does not matter if people cannot find what they need. We have seen task completion rates improve by 30 to 40 percent simply by surfacing hidden navigation.

Performance is a design decision

Google's research found that 53 percent of mobile site visits are abandoned if pages take longer than 3 seconds to load. Each additional second reduces conversions by roughly 7 percent. These are not edge cases. They are the norm.

Performance is not purely an engineering problem. Design decisions directly affect how fast an app feels. Heavy images, complex animations, large asset files, and render-blocking layouts all add weight. Every design choice has a performance cost, and that cost is paid by the user.

Skeleton screens vs spinners

When content takes time to load, skeleton screens (grey placeholder shapes that match the incoming layout) outperform spinners for perceived speed. They set expectations about what is coming and reduce the feeling of waiting. Use them for content-heavy page loads that exceed roughly 500 milliseconds.

For short or indeterminate waits, a simple spinner is fine. For user-initiated actions like posting a message or liking content, consider optimistic UI: show the success state immediately and handle errors in the background. This is what platforms like X and Instagram do, and it makes interactions feel instant.

Set a performance budget

Target a Largest Contentful Paint under 2.5 seconds and a total load time under 3 seconds. Compress images to WebP, lazy-load anything below the fold, and minimise critical-path JavaScript. Test on real devices over real networks, not just on your office Wi-Fi.

Common mobile UI mistakes we keep seeing

Icons without text labels. Most icons are ambiguous. Even the hamburger menu icon, which is now universally recognised, performs better when paired with the word "Menu." If users have to guess what an icon does, your interface is making them work.

Form fields that fight users. Baymard Institute's research shows the average e-commerce checkout contains roughly 15 form fields, and cart abandonment averages 70 percent on mobile. Place labels above fields, not inside them. Use the correct keyboard type for each input (numeric for phone numbers, email for email addresses). Validate inline after the user finishes typing, not while they are mid-keystroke. Offer guest checkout prominently, because forcing account creation loses about a third of users.

Ignoring the safe areas. Modern phones have notches, dynamic islands, rounded corners, and gesture bars that eat into screen space. If your content or buttons overlap these areas, the experience feels broken. Respect platform safe area insets and test on actual devices with various screen geometries.

No usability testing. Jakob Nielsen's research demonstrates that five users uncover roughly 85 percent of major usability issues. We have seen teams spend months on a design without watching a single person use it. One afternoon of usability testing will reveal more problems than a hundred internal review meetings.

Designing for AR on mobile

We have built AR-enabled mobile experiences at kwiboo, and the design principles are specific to the medium. AR interfaces need to blend 2D controls with a 3D camera-driven environment, which creates unique challenges.

When we built See My Ecodan for Mitsubishi Electric, the design challenge was not "how do we show off AR?" but "how do we help a homeowner answer a practical question in under a minute: will this heat pump fit in my garden?" Most people have never seen one. They do not know how big it is, where it can go, or whether it will look right beside the back door. AR only earns its place when it makes that uncertainty tangible.

The interface follows the same principles Apple and Google recommend for AR, but applied to a real outdoor use case. A coaching overlay guides users to find a flat surface before placement. Controls stay as simple 2D screen-space elements within thumb reach: drag to reposition, pinch to rotate, walk around the unit to view it from every angle. Users can capture and share a photo with a partner or installer. No sign-up, no login, no friction. The technology stays in the background. The product becomes real.

Anticipate suboptimal environments. Not every user has a well-lit room with large flat surfaces. If the AR experience requires specific conditions, communicate those requirements upfront rather than letting users struggle with a blank camera view.

The foundations that actually matter

Mobile UI design is not about following trends. It is about respecting the physical realities of how people hold and use their phones, the cognitive limits of attention on a small screen, and the performance constraints of mobile networks.

The foundations are measurable and well documented: 44-point minimum touch targets on iOS, 48dp on Android. Primary actions within thumb reach. Visible navigation. Sub-3-second load times. Platform-appropriate conventions. These are not suggestions. They are the baseline for building apps that people actually enjoy using.

We have been building mobile experiences for over 20 years, from native apps and progressive web apps to AR-enabled products and touchscreen kiosk software. The technology changes constantly. The foundations do not. Get these right, and everything else becomes easier.

---

Building a mobile app? We design and build bespoke mobile apps that work brilliantly. If you have a mobile project in mind, let us talk and turn your idea into reality. Get in touch.