Mobile application experience

Shapes complete mobile journeys around platform conventions, touch use, network conditions and clear feedback.

mobile-app-ux

See how it helps

When is it useful?

Use when a desktop-like screen feels awkward on a phone.

Redesign appointment booking for one-handed use with poor connectivity and a keyboard that does not cover actions.

Read the skill’s original instructions, examples and checks in their authored language.

Details…Show less

Follow iOS Human Interface Guidelines and Material Design on Android, through the repo's UI kit and existing components. Do not mix styles on one screen.
Android system back and the iOS edge swipe must work as expected; block them only to confirm discarding unsaved work.
Bottom tabs for 3–5 top-level destinations, stack navigation for drill-down, modals for focused tasks with a clear close. Keep each tab's state when switching.
Prefer native pickers, date inputs, share sheets and alerts.

Touch targets at least 44x44 pt (iOS) or 48x48 dp (Android), with spacing. Enlarge the hit area rather than the visual if needed.
Primary actions within thumb reach; destructive actions separated and confirmed or undoable.
Respect safe areas: notch, Dynamic Island, home indicator, status bar, Android cutouts and gesture bar. Use the framework's safe-area utilities, never hardcoded insets.
Check small phones, large phones and tablets if supported.

Every data screen handles loading (skeleton, or spinner after a short delay), empty (explain and offer the next action), error (human message plus retry) and partial data.
Pull to refresh on lists that change; paginate long lists.
Optimistic updates only with rollback and a visible error on failure.

Assume slow or missing connectivity: show cached data with a stale hint, queue or disable writes, retry with backoff.
Never lose user input: keep drafts across errors, backgrounding and restarts.

The keyboard must not cover the focused input or the submit button (KeyboardAvoidingView, adjustResize, scroll into view).
Set keyboard type, autofill content type, autocapitalize and return key action per field; dismiss on tap outside or scroll.

Dark mode through semantic color tokens; check contrast in both themes and images or icons that assume a white background.
Dynamic Type and font scaling: layouts grow without clipping or overlap. Never disable scaling; test the largest sizes.
Screen reader labels on icon buttons (accessibilityLabel, Semantics, contentDescription) and a logical reading order.
Respect the reduce motion setting.

Visible pressed state within 100 ms of every tap.
Haptics sparingly, with system haptic types: significant confirmations and errors, never every tap or scroll.

Ask in context, when the feature needs it, after a short explanation. Never request everything on first launch.
Handle denied and limited states with a path to Settings; the app must still work without optional permissions.