| name | dashboard-ux-hierarchy |
| description | Design dashboards around the user's top takeaways, reading flow, and highest-signal metrics. Use when requests mention "dashboard layout", "visual hierarchy", "too much going on", "what should go first", or "make the dashboard clearer". |
Dashboard UX Hierarchy
Shape a dashboard so the most important information is obvious at a glance instead of buried in competing cards.
When to Use This Skill
- The dashboard feels noisy, crowded, or directionless
- A hero, KPI strip, or summary row is competing with too many other elements
- You need to decide what belongs above the fold
- The page needs clearer F-pattern or Z-pattern scanning
- A dashboard should feel like a one-screen overview instead of a long landing page
Workflow Overview
- Identify the dashboard type: operational, analytical, strategic, or platform/home dashboard.
- Write down the top 5 takeaways the user should get within a few seconds.
- Rank content by urgency: primary metric/action, secondary context, then drill-down surfaces.
- Put the strongest takeaway in the most prominent location and remove or demote competing content.
- Keep the first view to a focused set of cards so the screen reads as a dashboard, not a document.
Design Rules
- Lead with the single most important metric, task, or action.
- Keep the initial view to a small family of high-value cards; split mixed-purpose cards instead of overloading them.
- Use white space to separate priorities, not to create dead zones.
- Place urgent status, warnings, and current state before secondary exploration tools.
- Prefer concise labels and strong numbers over explanatory paragraphs.
- Start with the overview and provide clear paths to more detail.
Examples
- "Reorder this dashboard so the most important information comes first."
- "This page has too many cards above the fold. Fix the hierarchy."
- "Make the dashboard feel clearer without removing useful information."
- "Decide what belongs in the hero versus secondary panels."
