dashboard-ia

name	Dashboard IA
description	BUILD information-dense, scannable, task-efficient dashboards. Prioritize data visibility and task efficiency over aesthetics. Enforce table pagination, meaningful color usage, and consistent action placement. Prevent low data density, unbounded scrolling, and hidden navigation. Trigger: "build (a|a) dashboard", "create (an|a) admin panel", "design (a|a) user portal".
category	ui-ux
version	3.0.0
last_updated	2026-06-28T00:00:00.000Z
stacks	["React 19.2","Vue 3","Next.js 16","Nuxt"]
triggers	[{"pattern":"(build|create|design) (a|an) dashboard","action":"USE dashboard shell layout"},{"pattern":"(build|create|design) (an|a) admin panel","action":"USE dashboard shell layout"},{"pattern":"data display|metrics|kpi","action":"USE data display rules"}]
related_skills	["responsive-layout-math","empty-loading-error-states","accessibility-audit-protocol","saas-app-structure","component-architecture-patterns"]

Dashboard Information Architecture

IDENTIFY: When to Activate

Activate when building any interface where users:

• Manage data (CRUD at scale)
• View analytics or metrics
• Configure settings
• Monitor system status
• Administer other users

CORE PRINCIPLE

Dashboards are tools for work, not art galleries. Prioritize data visibility and task efficiency. Users come to get things done.

DECIDE: Layout Selection

IF user needs multi-column data comparison →
  USE table (Step 3)
IF user needs high-level metrics overview →
  USE KPI cards row (Step 4)
IF user needs trend analysis →
  USE simple chart (Step 5)
IF user manages records (CRUD) →
  USE table + action buttons (Steps 3 + 6)

EXECUTE: Instructions

Step 1: Dashboard Shell

┌─────────────────────────────────────────────┐
│ HEADER: [Logo] Breadcrumb > Path [Search]   │
├──────────┬──────────────────────────────────┤
│  NAV     │  CONTENT AREA                     │
│  (max    │  ┌───────────────────────────┐   │
│  280px)  │  │ Page Title + Actions     │   │
│          │  ├───────────────────────────┤   │
│  Link 1  │  │ Data Area                 │   │
│  Link 2  │  │ (table, cards, chart)     │   │
│  Link 3  │  │                           │   │
├──────────┴──────────────────────────────────┤
└─────────────────────────────────────────────┘

RULES:

• Nav: 20% of viewport, max 280px
• Content: remaining 80%
• Header: sticky, breadcrumbs + search + user menu
• Mobile (<768px): nav collapses to hamburger or bottom tabs

Step 2: Navigation Design

PRIMARY NAV:

• 5-8 top-level items max. >8 = need groups.
• Standard labels: "Dashboard", "Users", "Orders", "Settings", "Analytics"
• Icons optional but ALWAYS paired with text (never icon-only on desktop)
• Highlight current page

SECONDARY NAV:

• Breadcrumbs at page top: Dashboard > Users > Edit > Alice
• Tab bar for sub-sections within a page

SEARCH:

• Global search bar in header
• Keyboard shortcut: ⌘K or Ctrl+K
• Results in command palette / dropdown

Step 3: Tables (Standard for Multi-Column Data)

Tables > card grids when data needs comparison.

✅ Table: 50 users with name, email, role, status, scannable, sortable
❌ Cards: 50 user cards, impossible to compare