41 lines
2.8 KiB
Markdown
41 lines
2.8 KiB
Markdown
# Human-Flow Quick Checklist (Mouse + Keyboard)
|
|
|
|
Use this as a rapid mental model when scanning or reviewing interactive UI.
|
|
|
|
## Mouse Ergonomics
|
|
- [ ] All frequent actions have a hit target of at least ~32-44px (visual + padding).
|
|
- [ ] Secondary actions are visible without hovering (or clearly discoverable with very low precision cost).
|
|
- [ ] No "precision clicking" required for common tasks (tiny X, overlapping zones, thin borders as only target).
|
|
- [ ] Hover states provide clear, immediate feedback (not just color shift on text).
|
|
- [ ] Row/card clicks have strong visual affordance on hover (background, border, cursor) so the whole area feels intentional.
|
|
|
|
## Keyboard Parity
|
|
- [ ] Every mouse-clickable thing that is not a native form control is reachable by Tab and activatable by Enter/Space.
|
|
- [ ] Focus is always visible and strong (especially on dark "terminal" themes).
|
|
- [ ] Logical tab order (generally top-to-bottom, left-to-right, grouped by task).
|
|
- [ ] Modals, drawers, and transient UI properly trap focus and provide Esc/close via keyboard.
|
|
- [ ] No mouse-only gestures (hover tooltips for critical info, drag without keyboard alternative) for primary flows.
|
|
|
|
## Workflow Friction & Discoverability
|
|
- [ ] The most common action per screen/list is the largest and most obvious target.
|
|
- [ ] Frequent actions do not hide behind menus, hover, or "..." unless they are genuinely rare.
|
|
- [ ] Destructive actions are protected (confirmation that is easy to hit with mouse or keyboard, or undo).
|
|
- [ ] State changes (loading, success, disabled, selection) are immediately visible without reading small text.
|
|
- [ ] Selection models (single row, multi, checkbox) are consistent and work with both mouse and keyboard.
|
|
- [ ] Number of clicks/keystrokes to complete a common task is minimized and obvious.
|
|
|
|
## Feedback & Forgiveness
|
|
- [ ] Every interaction gives instant visual response (active state, spinner in place, highlight).
|
|
- [ ] Disabled controls clearly explain *why* (title, adjacent text, or aria).
|
|
- [ ] Error and empty states are actionable from the keyboard/mouse position the user is already in.
|
|
- [ ] There is a low-cost way to back out of or undo the last action.
|
|
|
|
## Anti-Patterns That Almost Always Hurt Humans
|
|
- Hover-revealed actions in data tables/lists (the #1 offender in operator tools).
|
|
- Icon-only compact buttons for anything done more than occasionally.
|
|
- Entire-row click that conflicts with row-internal actions (easy misfires).
|
|
- Tiny (14-20px) icons as the only way to perform a primary task.
|
|
- "Click to activate" with no visual treatment on hover/focus and no keyboard path.
|
|
- Dense toolbars or action bars with < 8px gaps between targets.
|
|
|
|
When in doubt, ask: "If I were an operator doing this 50 times today with a mouse and keyboard, would this feel smooth and obvious, or would I be fighting the interface?" |