2.8 KiB
2.8 KiB
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?"