Dashboard widget uniformity — don't leave 4 domains with 3 widgets
0 views
Dashboard widget uniformity
A dashboard is a mirror of the domains your product owns. With 5 domains and only 3 widgets, users instinctively suspect "the other 2 must be unfinished." Uniformity is less an aesthetic concern than a feature-recognition one.
1. Symptoms of a non-uniform dashboard
| Symptom | User interpretation | Real cause |
|---|---|---|
| 3 of 4 domains have widgets | "Is the missing one in beta?" | Widget SSOT component missing |
| Icon colour varies per widget | "What category does this colour mean?" | No colour-token system |
| Search bar in a different place per widget | "Maybe some widgets don't search" | No layout pattern |
| Some widgets show counts, others averages | "What's the metric?" | TOP-N vs average not aligned |
2. Widget SSOT — one component owns N domains
[DomainWidget] ← one component
│
├─ title + icon (per-domain prop)
├─ search bar (debounce + AbortController)
├─ TOP-N list (BFF response)
└─ "see more" link (domain route)
Instantiate N times with different props.
When the same pattern is replicated across N domains, a missing widget for a newly-added domain gets caught at code review, not in production.
3. Uniformity checklist — every new domain
When you add one domain, users should be able to discover it the same way in the same places. These 7 spots must move together to keep things uniform.
- Dashboard widget — same component as siblings + icon/colour tokens
- Quick chips on main — one chip among N
- Sidebar / nav — for signed-in users
- Footer link — for anonymous users, crawler-indexable
- Search result category — domain tab in search
- i18n keys — ko/en parity
- Public-route allow-list — if anonymous entry is allowed (→ see public-route-whitelist)
4. Before / after
| Aspect | Non-uniform | Uniform |
|---|---|---|
| N domains + (N-1) widgets | 1 missing | Exactly N |
| Cost of adding a new domain | 7 manual edits | One prop on the SSOT component |
| User trust | "Why is some missing?" | "Consistent" |
| Icon · colour | Arbitrary per widget | Domain → token mapping |
| Search UX | Differs per widget | One interaction |
5. Adopting this in your own project
- Grep dashboards for domains without widgets among your N domains.
- Extract the best-formed widget as the SSOT component (search + TOP-N + link pattern).
- Bundle per-domain icon · colour tokens into a single constant; let the widget take them as props.
- Add the 7-spot sync as a code-review item on the new-domain PR template.
- Guard against regression — a test asserting "N widget components render on dashboard mount."
A dashboard is the product's first impression and a domain catalogue. One missing slot can shake user trust in the other N-1 domains.