103 lines
2.9 KiB
Markdown
103 lines
2.9 KiB
Markdown
# Common Human-Flow Improvement Patterns
|
|
|
|
Quick, copy-paste-friendly patterns that directly address the most frequent friction found by this scanner.
|
|
|
|
## 1. Always-Visible Row Actions (instead of hover-revealed)
|
|
|
|
**Before (friction)**:
|
|
```tsx
|
|
<span className="dt__rowactions"> {/* opacity 0.5 until hover */}
|
|
<Button size="sm" ...>Control</Button>
|
|
<Button size="sm" variant="danger">End</Button>
|
|
</span>
|
|
```
|
|
|
|
**Better for humans**:
|
|
```tsx
|
|
// Option A: Dedicated actions column, always visible, slightly dimmed but scannable
|
|
<td className="dt__actions">
|
|
<div className="dt__rowactions" style={{ opacity: 0.85 }}>
|
|
<Button size="sm" variant="primary" ...>Control</Button>
|
|
<Button size="sm" variant="danger" ...>End</Button>
|
|
</div>
|
|
</td>
|
|
|
|
// Option B: Primary action is the row itself + one very obvious secondary
|
|
<tr onClick={openDetail} ...>
|
|
...
|
|
<td>
|
|
<Button onClick={e => { e.stopPropagation(); takeControl(); }}>
|
|
Control
|
|
</Button>
|
|
</td>
|
|
</tr>
|
|
```
|
|
|
|
Add good focus styles so keyboard users see the group light up.
|
|
|
|
## 2. Generous Hit Area Around Small Visual Controls
|
|
|
|
```tsx
|
|
// Instead of 15px checkbox as the only target
|
|
<label className="dt__checkwrap"> {/* extra 6px+ invisible padding all around */}
|
|
<input type="checkbox" className="dt__check" ... />
|
|
</label>
|
|
```
|
|
|
|
The wrapper is the real hit target. The visual control can stay small and crisp.
|
|
|
|
## 3. Primary Row Action + Clear Secondary
|
|
|
|
Make the thing the human does most often the easiest to hit.
|
|
|
|
- Row click (or big left area) = primary (View / Open detail / Control)
|
|
- Always-visible, slightly larger button on the right = secondary (End, more actions)
|
|
- Tiny icons only for truly rare actions inside a "..." menu
|
|
|
|
## 4. Strong, Consistent Focus + Hover
|
|
|
|
In your global or table CSS:
|
|
|
|
```css
|
|
.dt tbody tr:focus-visible {
|
|
outline: none;
|
|
box-shadow: inset 0 0 0 2px var(--accent);
|
|
background: var(--panel-2);
|
|
}
|
|
|
|
.dt tbody tr:hover {
|
|
background: var(--panel-2);
|
|
}
|
|
|
|
/* Make sure buttons inside also have excellent focus */
|
|
.btn:focus-visible {
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-ring);
|
|
}
|
|
```
|
|
|
|
## 5. Icon Button with Good Labeling
|
|
|
|
```tsx
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
aria-label="End session for this machine"
|
|
title="End session"
|
|
onClick={...}
|
|
>
|
|
<StopIcon width={16} height={16} />
|
|
</Button>
|
|
```
|
|
|
|
Prefer visible text for frequent actions. Icons + text is often the sweet spot for speed + scannability.
|
|
|
|
## 6. Make "Control" or Primary Action the Dominant Target
|
|
|
|
In a sessions/machines list, the #1 thing an operator wants 80% of the time should be the biggest, highest-contrast, easiest-to-hit target on the row — not the smallest icon.
|
|
|
|
This single change often has the biggest impact on perceived "this tool feels good to use."
|
|
|
|
---
|
|
|
|
Apply these patterns, then re-run `human-flow scan` (or ask the agent to re-apply the heuristics) to verify the friction has been reduced. |