Mobile application experience

Mobile App UX

Platform conventions

• 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 and layout

• 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.

States

• 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.

Offline and network

• 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.

Keyboard and input

• 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.

Appearance and accessibility

• 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.

Feedback

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

Permissions

• 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.

Before you finish

• Touch targets meet 44 pt / 48 dp; safe areas respected on notched devices.
• Loading, empty, error and offline states exist for changed screens.
• The keyboard hides no inputs or actions.
• Dark mode and the largest font scale checked.
• Permissions requested in context, with a denied path.
• Back navigation correct on both platforms.