Mobile interface design

Steven Hoober’s study on mobile device usage revealed that 49 % of users hold their phone with one hand and use their thumb to interact. This defines three zones on the screen: the natural zone (easy to reach), the stretch zone (reachable with effort) and the hard zone (nearly inaccessible without shifting grip).

Primary actions should be placed in the natural zone: the bottom half of the screen, especially the lower-centre area. Secondary or less frequent actions can sit in the upper zone. This principle is why bottom navigation has become the standard — it puts the most important actions where the thumb reaches effortlessly.

A frequent mobile design mistake is creating buttons, icons and links that are too small. The thumb has a contact area of approximately 10×10 mm, which translates to roughly 44×44 px at standard density. Apple defines 44×44 pt as the minimum in its Human Interface Guidelines; Google recommends 48×48 dp in Material Design.

Minimum size does not refer only to the visible icon — it includes the tap target area. A 24×24 px icon can have a 48×48 px tap target with invisible padding. The critical point is that adjacent tap target areas must not overlap, to prevent accidental taps.

Gestures (swipe, pinch, long press, pull to refresh) are a powerful tool for creating fluid mobile interactions. However, they have a fundamental problem: they are invisible. There is no visual affordance to indicate that an element can be swiped, unlike a button that is clearly tappable.

The rule is that gestures should be shortcuts, not the only way to perform an action. Swipe-to-delete in Gmail works because a visible delete button also exists. Pinch-to-zoom works because +/− buttons are also available. If the only way to access a feature is a gesture, less advanced users will never discover it.

Bottom sheets are panels that slide up from the bottom of the screen to display options, forms or contextual content without navigating to a new page. They are the mobile equivalent of desktop modals but better adapted to touch ergonomics.

Google Maps popularised this pattern: selecting a point of interest reveals a bottom sheet with details that the user can expand by dragging up or dismiss by dragging down. Bottom sheets are especially useful for contextual actions (sharing, filtering, element options) because they preserve the visual context of the main screen.

iOS and Android have different design conventions that users on each platform have internalised. Ignoring them creates friction: an iPhone user expects action buttons in the top-right corner and back navigation via a swipe from the left edge; an Android user expects a FAB (floating action button) and back navigation via the system back button.

This does not mean designing two entirely different interfaces. Content, structure and visual hierarchy can remain the same. What changes are interaction patterns, the position of key elements and native components (UIKit on iOS, Material Design on Android).

On mobile, perceived speed is as important as actual speed. A skeleton loader that appears in 100 ms gives the impression that the app responds instantly, even if the content takes 2 seconds to load. An animated transition between screens masks load time and maintains a feeling of fluidity.

Key perceived performance techniques are: skeleton screens instead of spinners (they communicate the structure of incoming content), optimistic UI (showing the result of an action before receiving server confirmation) and transitions that visually connect the current screen to the next.