Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

08 — Interaction & Motion (Shared)

Global interaction conventions and motion language. Module docs 10_Interaction_Specification.md specialize per module.


1. Touch gestures (phone/tablet)

GestureBehaviourWhere
TapPrimary action, ripple m-fastEverywhere
Long-pressContext menu (AppMenu), reorder, multi-select entryList rows, cards, attachments
Double-tapZoom on images/PDF; nothing elseMedia previews
Swipe left/rightRow actions (mark read, delete draft, archive)Lists with Dismissible-style actions (keep ≤ 2)
Pull downRefreshAll scrollables
PinchZoomMedia, charts (tablet)
DragReorder (timetable slots, dashboard widgets), image preview dismissModule-specific
Hardware back / back gesturePop; on root tab → exit app (Android) or previous shell branchAll
Edge swipeDrawer on phoneApp shell

2. Desktop/web (mouse + keyboard)

InputBehaviour
Hoverm-fast surface tint, tooltip after 500 ms
ClickTap equivalent
Right-clickContext menu (same as long-press)
WheelScroll; Ctrl+wheel zoom on media
ESCClose dialog/sheet/menu/search; cancel selection
Tab / Shift+TabFocus traversal (logical order), visible focus ring primary
EnterSubmit focused form; Space toggles focused control
Ctrl+KGlobal search
Ctrl/Cmd+EnterSubmit from text areas
ArrowsList navigation in menus/dropdowns

3. Haptics (mobile)

EventHaptic
SuccessHapticFeedback.lightImpact()
ErrorHapticFeedback.mediumImpact()
Long-press menuHapticFeedback.selectionClick()
Pull-to-refresh completionlightImpact()
Destructive confirmheavyImpact()
RuleHaptics off when system setting disabled; no haptics on web/desktop

4. Motion language

  • Enter: new screen slides forward (m-base); content fades + slight rise (m-slow).
  • Exit: reverse slide; dialogs/sheets scale+fade in, slide down on dismiss.
  • Hero: shared-element flight for list→detail (avatar→profile header, thumbnail→ attachment preview) m-slow.
  • State change: color/size transitions m-fast; icon morph via AnimatedSwitcher.
  • Skeleton→content: cross-fade m-slow, no pop.
  • Reduced motion (accessibility setting): all transitions become fades ≤ m-instant; no parallax, no stagger, no shimmer loop.
  • Density: never animate layout shifts; use AnimatedSize for expanding sections.

5. Micro-interaction catalogue

InteractionDetail
Row tapInk ripple + 2% surface darken; 40 ms press latency feedback
FAB appearScale-in m-entrance; hide on scroll-down
Tab switchIndicator slide m-base
Badge updateScale pop on unread count change
Pull-to-refreshSpinner primary, m-slow; on success + lightImpact
Submit buttonLoading spinner replaces label; success → brief check + snackbar
Infinite scroll loadBottom spinner fade-in m-instant

6. Frustration controls

  • Every interactive element responds within 100 ms of press (press state visible).
  • Network-bound actions always show pending state — never a silent wait.
  • Repeated taps on submit are disabled while pending (anti-double-submit).
  • m-fast ripple only — no full-screen flashes.