| name | Desktop App Design |
| description | Desktop and enterprise application design patterns covering data-dense interfaces, dashboard design, complex workflow management, keyboard-first interaction, multi-window patterns, and professional tool design. |
| triggers | ["desktop app","dashboard design","enterprise UX","data table design","admin panel","complex workflow","professional tool","desktop application"] |
Desktop App Design — Professional & Enterprise Excellence
Desktop Design Philosophy
Desktop applications serve users who invest hours of focused attention in professional workflows. Unlike mobile's brief, task-focused interactions, desktop design must optimize for sustained productivity, information density, and expert efficiency. The challenge is supporting both first-day learnability and thousandth-day mastery within the same interface.
Core Principles (Edward Tufte + Jony Ive)
- Information density with clarity — show more data without increasing cognitive load (Tufte: "maximize data-ink ratio")
- Invisible design — the interface should disappear, leaving only the work (Ive: "true simplicity is derived from so much more than just the absence of clutter")
- Keyboard-first, mouse-enhanced — power users live on the keyboard; mouse interaction is the fallback
- Progressive complexity — simple surface, deep capability accessible through exploration
- Spatial memory — consistent layouts allow users to develop muscle memory over months of use
Dashboard Design
Dashboard Types
Operational Dashboards
- Real-time monitoring with auto-refresh (5-30 second intervals)
- Status-at-a-glance with clear normal/warning/critical states
- Anomaly detection with visual emphasis on outliers
- Minimize decoration — every pixel serves monitoring goals
Analytical Dashboards
- Interactive exploration with filter, drill-down, and cross-filtering
- Comparison-oriented: support time-range, segment, and baseline comparisons
- Export and sharing capabilities for collaborative analysis
- Allow users to create and save custom views
Strategic Dashboards
- KPI-focused with trend indicators and goal tracking
- Executive summary level — 5-7 key metrics maximum
- Contextual benchmarks (vs. target, vs. last period, vs. industry)
- Minimal interaction needed — the story should be immediately clear
Dashboard Layout Principles
- F-pattern reading: Place the most critical metric top-left, summary row at top
- Card-based layout: Each card is one complete thought — metric + context + trend
- Consistent grid: 12-column grid with standardized card sizes (1/4, 1/3, 1/2, full)
- Information hierarchy: Primary numbers large (24-48px), secondary context small (12-14px)
- Color as data: Use color to encode meaning (red=bad, green=good), not decoration
- White space as separator: Generous padding between cards reduces cognitive switching cost
Data Visualization Best Practices (Tufte)
- Choose chart types based on the relationship being shown: comparison → bar, trend → line, composition → stacked bar, distribution → histogram
- Label data directly rather than using legends when possible
- Eliminate chartjunk: unnecessary gridlines, 3D effects, decorative elements
- Use consistent axis scales across comparable charts
- Small multiples (repeated small charts) outperform single complex charts for comparison
- Accessible color palettes: ensure distinguishability for color vision deficiency
Data Table Design
Table Architecture
- Fixed headers that persist during vertical scroll
- Fixed key columns (usually first 1-2) that persist during horizontal scroll
- Row height: 40-52px standard, 32px compact mode for data-heavy views
- Column resizing by dragging column borders
- Column reordering by drag-and-drop headers
- Row striping (subtle alternating background) for wide tables — optional for narrow ones
Table Functionality
- Sorting: Click column header to sort; show direction indicator; support multi-column sort
- Filtering: Column-level filters with appropriate types (text search, range, multi-select)
- Search: Global search across all visible columns with result highlighting
- Pagination vs. infinite scroll: Pagination for data manipulation tasks, infinite scroll for browsing
- Bulk actions: Checkbox selection with select-all, action toolbar appears on selection
- Inline editing: Double-click to edit cells for quick corrections; full edit mode for complex changes
- Export: CSV, Excel, PDF with current filter/sort state preserved
Table Density Modes
- Comfortable: 52px rows, generous padding — default for general audiences
- Standard: 40px rows — default for data-oriented users
- Compact: 32px rows, smaller text — for power users managing large datasets
- Allow users to toggle density preference with persistent setting
Complex Workflow Design
Multi-Step Workflows
- Progress indicator: Show current step, total steps, and completion state
- Non-linear navigation: Allow jumping to completed steps for editing
- Save draft at every step — never lose user work on navigation
- Summary/review step before final submission
- Clear step labels that describe the content, not just "Step 1, Step 2"
Form-Heavy Interfaces
- Section grouping with clear headings and optional collapse
- Contextual help near complex fields — info icons with tooltips or inline descriptions
- Dependent fields: Show/hide fields based on previous selections
- Auto-save with visual confirmation (subtle "Saved" indicator)
- Validation summary at top of form linking to each error field
Master-Detail Pattern
- List/grid on left, detail panel on right — the dominant desktop productivity pattern
- Support resizable split panes
- Detail panel updates without full page reload
- Keyboard navigation: arrow keys traverse list, Enter opens detail, Escape returns to list
- Mobile adaptation: replace side-by-side with stack navigation
Keyboard-First Interaction
Essential Keyboard Patterns
- Global shortcuts: Document common shortcuts in an overlay (? or Ctrl+/)
- Command palette: Cmd/Ctrl+K for quick action access — the most important desktop UX innovation of the 2020s
- Tab order: Logical focus progression through interactive elements
- Focus indicators: Always visible, high-contrast focus rings (never remove outline without replacement)
- Escape key: Consistently closes modals, dropdowns, and cancels operations
Shortcut Design Rules
- Follow platform conventions (Ctrl/Cmd+S = Save, Ctrl/Cmd+Z = Undo)
- Avoid overriding browser shortcuts
- Use modifier combinations logically: Ctrl = action, Shift = modify/extend, Alt = alternate
- Provide visual shortcut hints in menus, tooltips, and command palette
Multi-Window and Panel Management
Panel Patterns
- Sidebar navigation: Collapsible, persistent across views, icon+label or icon-only modes
- Inspector panels: Right-side contextual properties panel (design tool pattern)
- Bottom panels: Console, log, terminal outputs — resizable with collapse
- Floating panels: Detachable for multi-monitor workflows
State Management
- Persist panel states (open/closed, sizes) across sessions
- Remember user's last-used view and filters
- Support workspace presets ("Developer layout", "Review layout")
- Handle window resize gracefully — responsive desktop is essential for varied monitor sizes
Enterprise-Specific Patterns
Permission-Aware UI
- Hide elements users cannot access (not just disable) for cleaner interfaces
- For disabled elements that provide context, show tooltip explaining why access is restricted
- Role-based views: admin sees all controls, viewer sees read-only, etc.
- Audit trails for sensitive actions with clear attribution
Notification and Alert Design
- Severity levels: Info (blue), Success (green), Warning (amber), Error (red), Critical (red + icon)
- Position: Non-blocking toasts for confirmations, blocking modals for critical decisions
- Persistence: Success toasts auto-dismiss (3-5s), errors persist until addressed
- Grouping: Batch similar notifications to prevent notification fatigue
Empty States and Onboarding
- First-run experience should guide users to first value moment
- Empty states include illustration, explanation, and clear CTA to populate the view
- Progressive onboarding: introduce features as they become relevant, not all at once
- In-app guidance: highlight new features with subtle callouts, dismissible permanently
Cross-Referencing
- For data visualization accessibility, reference
accessibility-inclusive-design
- For design token systems, reference
design-systems-architecture
- For interaction and transition design, reference
interaction-motion-design
- For UX evaluation, reference
nng-ux-heuristics
v3.0 Cross-References
The v3.0 upgrade introduces comprehensive data visualization references, production component patterns, and design tool workflows that extend desktop application design capabilities.
Data Visualization Patterns — references/data-visualization-patterns.md
The new references/data-visualization-patterns.md reference expands significantly on the Data Visualization Best Practices section above. It covers: comprehensive chart type selection guides with decision trees (when to use bar vs. column, line vs. area, scatter vs. bubble, treemap vs. sunburst); accessible data visualization patterns including screen reader-compatible chart descriptions, sonification approaches, and tactile-friendly data encoding; and dashboard composition frameworks for arranging multiple visualizations into coherent analytical narratives. Includes real-world examples of dashboard redesigns with before/after performance metrics.
Production Component Patterns — component-patterns-code
The component-patterns-code skill provides production-ready React component patterns directly applicable to desktop application design. Includes data table components with full state matrices (loading, empty, error, paginated, filtered, sorted, bulk-selected), command palette implementations, master-detail layout components, resizable panel systems, and keyboard-navigable tree views. Each component cookbook entry includes TypeScript types, accessibility annotations, and Storybook configurations — bridging the gap between the design patterns in this skill and production code.
Design Tool Workflows — figma-design-tool-workflows
The figma-design-tool-workflows skill covers the Figma-to-code pipeline applicable to desktop design systems. Relevant capabilities include: Figma variable modes for light/dark/high-contrast theme switching; auto-layout configurations that map to CSS Grid and Flexbox; component property definitions that generate developer handoff specifications; and the MCP-powered design-to-code flywheel that enables continuous synchronization between Figma design system files and production component libraries. Particularly valuable for desktop apps with complex theming requirements and dense component libraries.
Key Sources
- Tufte, E. (2001). "The Visual Display of Quantitative Information"
- Cooper, A. (2014). "About Face: The Essentials of Interaction Design"
- Microsoft Fluent Design System guidelines
- Apple macOS Human Interface Guidelines
- NNG Group enterprise UX research
