10 — Interaction Specification (Staff Module)
- 1. Gestures & inputs
- 2. Motion language
- 3. Haptics
- 4. Frustration controls
- 5. Keyboard & desktop
- 6. Modal hierarchy (shared rule applied)
Module specialization of 00-shared/08_Interaction_&_Motion.md.
1. Gestures & inputs
| Gesture | Behavior | Screen |
|---|---|---|
| Tap row | Open detail (SS2); ripple m-fast | S1, S6, S9 |
| Tap FAB | "Add staff / department / designation" — scale-in m-entrance | S1, S6, S9 |
| Tap row menu (⋮) | AppMenu: View / Edit / Deactivate (destructive in error) | S1, S6, S9 |
| Long-press row | Same menu (phone); haptic selectionClick | S1, S6, S9 |
| Pull down | Refresh (reset page 1, bypass cache); spinner primary; lightImpact on completion | S1, S6, S9 |
Swipe left on row (proposed) | Quick "Edit" only (deactivate stays in menu — destructive ops never swipe-first) | S1 |
| Back / back-gesture | Pop to list; on root tab → previous shell branch | all |
| ESC (desktop) | Close dialog/sheet/menu; cancel selection | all |
| Enter in form field | Next field; Ctrl/Cmd+Enter submits | S3, S4, S8, S11 |
2. Motion language
| Interaction | Motion | Token |
|---|---|---|
| List → detail push | Slide forward + content fade/rise | m-base / m-slow (00-shared/08 §4) |
| Avatar list → detail header | Hero flight (shared element) | m-slow |
| List rows on first load | Entrance stagger 40 ms | m-entrance |
| Status badge change | Color/size cross-fade; icon morph via AnimatedSwitcher | m-fast |
| Skeleton → content | Cross-fade, no pop | m-slow |
| Dialog (deactivate) | Scale + fade in; slide down on dismiss | m-base |
| FAB hide/show on scroll | Fade + slide | m-entrance |
| Filter chip select | Ink ripple + pill slide | m-fast |
| Infinite scroll footer | Bottom spinner fade-in | m-instant |
| Submit pending | Spinner replaces label; success → brief check + snackbar | — |
Reduced motion (system setting): everything → fade ≤ m-instant; no stagger, no
shimmer loop, no hero (00-shared/08 §4).
3. Haptics
| Event | Haptic |
|---|---|
| Create/update success | lightImpact |
| Validation/API error | mediumImpact |
| Deactivate confirm | heavyImpact (destructive) |
| Menu open | selectionClick |
Off when system haptics disabled; never on web/desktop (00-shared/08 §3).
4. Frustration controls
- Every interactive element gives press feedback within 100 ms (00-shared/08 §6).
- Submit buttons: disabled while pending (anti-double-submit); 409/404 never silently swallowed — inline or snackbar.
- Network-bound actions always show pending state (spinner in button, skeleton in lists) — never a silent wait.
- Long lists: keep scroll position across filter toggles; restore position after detail pop (master-detail preserves state per shell branch — 00-shared/05 §3).
5. Keyboard & desktop
- Tab order: search → chips → rows → FAB; visible focus ring
primary(00-shared/09 §6). Ctrl+Kglobal search (00-shared/05 §7);Non list screens → create(proposed); ESC closes dialogs/menus.- Right-click row = same menu as long-press (00-shared/08 §2).
- Breadcrumbs on desktop at depth > 2:
Staff / Departments / Administration(00-shared/05 §3).
6. Modal hierarchy (shared rule applied)
Snackbar > bottom sheet (pickers, filters) > dialog (deactivate confirm) > full-screen page (create/edit forms) (00-shared/05 §5). Deactivate is a dialog — not a sheet — because it is destructive and needs explicit confirm.