Operational patterns, not decoration.
Controls make the next action unambiguous. States stay quiet until they carry useful information, and every interaction remains available from a keyboard.
Buttons describe the outcome.
Use one primary action per decision area. Secondary and quiet actions preserve hierarchy.
Action hierarchy
- Use verbs that name the next step.
- Do not use cyan as a second CTA color.
- Keep controls at least 44px high for primary use.
Labels persist. Help is specific.
Placeholder text never replaces a label. Pair a field with concise context and an actionable error when needed.
Use the name people already use in daily work.
Field construction
- Keep labels visible above controls.
- Use sentence case.
- Do not encode validity with color alone.
Use the control that matches the decision.
Checkboxes select independent options. Radios choose one path. Switches change an immediate setting.
Choice rules
- Keep labels clickable.
- Group related radio options.
- Reserve switches for changes that take effect now.
State labels pair color with language.
Compact badges mark operational state without competing with the task itself.
Status language
- Name the condition, not the color.
- Use a stable state vocabulary.
- Avoid decorative badge collections.
Numbers need context and provenance.
Show the measure, time window, and direction. Avoid dashboard theater.
Median intake-to-decision time after workflow redesign.
Evidence first
- State the denominator or time window.
- Use cyan only for an exceptional signal.
- Link to source data in real products.
Surface information at the point of action.
Notices are brief, contextual, and dismissible only when dismissal is safe.
Seven workflow interviews now inform this diagnosis.
Notice anatomy
- Lead with what changed.
- Follow with consequence or next step.
- Use alerts only for time-sensitive interruption.
Keep peer views in one context.
Arrow keys, Home, and End move between tabs; Tab enters the active panel.
Tabs are peers
- Use short parallel labels.
- Do not hide a required sequence in tabs.
- Keep the active state visible beyond color.
Tables support comparison.
Align labels and values consistently, keep headers explicit, and let narrow screens scroll.
| System | Owner | State | Review |
|---|---|---|---|
| Knowledge intake | Operations | Operational | Aug 19 |
| Proposal drafting | Revenue | In design | Aug 16 |
| Agent escalation | Platform | Needs review | Aug 14 |
Structured evidence
- Use tables only when scanning across rows matters.
- Keep headers visible and specific.
- Provide a text alternative for complex data.
Interrupt only for a bounded decision.
Dialogs contain a single task, an explicit close path, and an action whose consequence is clear.
Dialog discipline
- Keep the task short.
- Never open a dialog on page load.
- Use a page for complex or multi-step work.