Skip to main content

16. References & Research

Overview​

This document provides complete citations for all research sources, design patterns, industry best practices, and technical resources referenced throughout the Dashboard 2.0 UI/UX specification.

16.1 Multi-Project Management Research​

Industry Leaders & Best Practices​

1. Wrike - Multi-Project Dashboard Design

  • Source: Wrike Blog - Project Portfolio Management
  • URL: https://www.wrike.com/blog/project-portfolio-dashboard/
  • Key Insights:
    • Widget-based dashboard customization
    • Cross-project resource allocation views
    • Real-time collaboration features
    • Filter and group by multiple dimensions
  • Applied in: Portfolio Overview (section 5), Filter Modal (section 9)

2. Jira - Swimlane Kanban Pattern

3. Monday.com - Portfolio Management UI

  • Source: Monday.com Product Documentation
  • URL: https://support.monday.com/hc/en-us/articles/360001386760
  • Key Insights:
    • Manage up to 200 projects in single view
    • Color-coded status indicators
    • Automated progress tracking
    • Custom fields and filters
  • Applied in: Portfolio Overview (section 5), Navigation (section 4)

4. Asana - Multi-Project Views

  • Source: Asana Guide - Portfolios
  • URL: https://asana.com/guide/help/premium/portfolios
  • Key Insights:
    • Portfolio-level KPIs and metrics
    • Custom date ranges for reporting
    • At-risk project identification
    • Timeline view (Gantt) integration
  • Applied in: Portfolio Overview (section 5), Timeline Chart (section 7)

16.2 Kanban & Task Management Patterns​

5. Teamhood - Kanban Best Practices

  • Source: Teamhood Blog
  • URL: https://teamhood.com/kanban-resources/kanban-board-examples/
  • Key Insights:
    • WIP (work-in-progress) limits per column
    • Visual cues for blocked tasks
    • Swimlane patterns for team organization
    • Card design best practices (7 data points max)
  • Applied in: Kanban Board (section 6), Task Card Design

6. Kanban Zone - Multi-Board Management

  • Source: Kanban Zone Documentation
  • URL: https://kanbanzone.com/features/
  • Key Insights:
    • Linked boards for project hierarchy
    • Cross-board dependencies
    • Rollup metrics across boards
    • Calendar integration
  • Applied in: Kanban Board (section 6), Task Dependencies

7. Trello - Drag-and-Drop UX

  • Source: Trello Engineering Blog
  • URL: https://tech.trello.com/drag-and-drop/
  • Key Insights:
    • Smooth drag-and-drop animations
    • Ghost card preview during drag
    • Auto-scroll when dragging to edge
    • Keyboard accessibility for drag-drop
  • Applied in: Kanban Board (section 6), Accessibility (section 13)

16.3 Dashboard & Analytics Design​

8. Smartsheet - Dashboard Widgets

  • Source: Smartsheet Learning Center
  • URL: https://help.smartsheet.com/articles/2478271
  • Key Insights:
    • 4-6 widget limit for cognitive load
    • Chart types: gauge, line, bar, pie
    • Real-time data refresh
    • Mobile-responsive widgets
  • Applied in: Portfolio Overview (section 5), Analytics (section 8)

9. Visor - Data Visualization Best Practices

  • Source: Visor Blog
  • URL: https://www.visor.us/blog/project-dashboard-best-practices
  • Key Insights:
    • Use color sparingly (3-4 colors max)
    • Prioritize completion % over raw numbers
    • Burndown charts for sprint tracking
    • Velocity trends for forecasting
  • Applied in: Analytics Dashboard (section 8), Timeline Chart (section 7)

10. Databox - KPI Dashboard Design

  • Source: Databox Resources
  • URL: https://databox.com/kpi-dashboard-examples
  • Key Insights:
    • 4-8 KPIs per dashboard (not more)
    • Red/yellow/green threshold indicators
    • Trend arrows (↑↓) for direction
    • Comparison to previous period
  • Applied in: Portfolio Overview (section 5), Analytics (section 8)

16.4 Search & Filter UI Patterns​

11. Algolia - Search UX Guidelines

  • Source: Algolia Blog
  • URL: https://blog.algolia.com/ux-search/
  • Key Insights:
    • Autocomplete appears after 2 characters
    • Fuzzy matching with typo tolerance
    • Category-based result grouping
    • Keyboard navigation (↑↓ arrows)
  • Applied in: Global Search (section 11)

12. Fuse.js - Fuzzy Search Library

  • Source: Fuse.js Documentation
  • URL: https://fusejs.io/
  • Technical Specs:
    • Threshold: 0.4 (balance precision/recall)
    • Distance: 100 characters max
    • Weighted keys for relevance
    • Client-side JavaScript implementation
  • Applied in: Global Search (section 11), Technical Implementation (section 14)

13. Justinmind - Advanced Filter Patterns

16.5 Responsive Design & Mobile​

14. Material Design - Responsive Layout Grid

  • Source: Google Material Design Guidelines
  • URL: https://material.io/design/layout/responsive-layout-grid.html
  • Key Insights:
    • 8px spacing grid system
    • Breakpoints: 600px, 960px, 1280px
    • Fluid columns (12-column grid)
    • Touch targets ≥48dp (44px)
  • Applied in: Overall Architecture (section 3), Responsive Design (section 12)

15. Apple Human Interface Guidelines - Touch Targets

16. Nielsen Norman Group - Mobile UX

  • Source: NNG Articles
  • URL: https://www.nngroup.com/articles/mobile-ux/
  • Key Insights:
    • Hamburger menu acceptable for secondary nav
    • Swipe gestures for navigation
    • Bottom sheet modals for mobile
    • Avoid horizontal scrolling
  • Applied in: Responsive Design (section 12)

16.6 Accessibility Standards​

17. WCAG 2.1 Guidelines

  • Source: W3C Web Accessibility Initiative
  • URL: https://www.w3.org/WAI/WCAG21/quickref/
  • Standards:
    • Level AA compliance (target)
    • Contrast ratio ≥4.5:1 (normal text)
    • Contrast ratio ≥3:1 (large text, UI components)
    • Keyboard-only navigation
    • Screen reader compatibility
  • Applied in: Accessibility (section 13), All Components

18. WebAIM - Color Contrast Checker

  • Source: WebAIM Resources
  • URL: https://webaim.org/resources/contrastchecker/
  • Tool: Free online contrast ratio calculator
  • Usage: Verify all text colors meet AA standards
  • Applied in: Overall Architecture (section 3), Accessibility (section 13)

19. Deque - ARIA Authoring Practices

  • Source: W3C ARIA Authoring Practices Guide
  • URL: https://www.w3.org/TR/wai-aria-practices-1.1/
  • Key Patterns:
    • Modal dialogs (role="dialog")
    • Listboxes (role="listbox")
    • Navigation (role="navigation")
    • Live regions (aria-live)
  • Applied in: Accessibility (section 13), All Interactive Components

16.7 Frontend Technologies​

20. Chart.js Documentation

  • Source: Chart.js Official Docs
  • URL: https://www.chartjs.org/docs/latest/
  • Charts Used:
    • Gauge chart (completion rate)
    • Line chart (velocity)
    • Bar chart (burndown)
    • Pie chart (priority distribution)
  • Applied in: Analytics Dashboard (section 8), Technical Implementation (section 14)

21. D3.js - Data Visualization Library

  • Source: D3.js Documentation
  • URL: https://d3js.org/
  • Use Case: Alternative to Chart.js for custom visualizations
  • Features: SVG rendering, transitions, advanced layouts
  • Applied in: Timeline Chart (section 7), Analytics (section 8)

22. Intersection Observer API

16.8 Backend & Database​

23. SQLite Documentation

  • Source: SQLite Official Documentation
  • URL: https://www.sqlite.org/docs.html
  • Features:
    • Serverless database
    • ACID transactions
    • Full-text search (FTS5)
    • JSON support
  • Applied in: Technical Implementation (section 14)

24. Flask Documentation

  • Source: Flask Web Framework
  • URL: https://flask.palletsprojects.com/
  • Use Case: Lightweight Python web server for API
  • Features: REST API, CORS support, JSON serialization
  • Applied in: Technical Implementation (section 14)

25. Flask-CORS

  • Source: Flask-CORS Extension
  • URL: https://flask-cors.readthedocs.io/
  • Use Case: Enable cross-origin requests from frontend
  • Applied in: Technical Implementation (section 14)

16.9 Design Systems & UI Libraries​

26. Tailwind CSS - Utility-First CSS

  • Source: Tailwind CSS Documentation
  • URL: https://tailwindcss.com/docs
  • Features:
    • Utility classes for rapid prototyping
    • Responsive modifiers
    • Dark mode support
    • Custom design tokens
  • Applied in: Overall Architecture (section 3), All CSS Examples

27. Inter Font Family

  • Source: Google Fonts
  • URL: https://fonts.google.com/specimen/Inter
  • Use Case: System font stack fallback
  • Features: Excellent legibility, 9 weights, open-source
  • Applied in: Overall Architecture (section 3)

16.10 Competitive Analysis Sources​

28. Notion - Multi-Database Views

  • Source: Notion Product Features
  • URL: https://www.notion.so/help/guides/creating-a-database
  • Key Features:
    • Table, Board, Timeline, Calendar, List, Gallery views
    • Same data, multiple visualizations
    • Cross-database relations
    • Inline filtering and sorting
  • Influence: Inspired view-switching patterns

29. ClickUp - Everything View

30. Linear - Keyboard-First Design

  • Source: Linear Blog
  • URL: https://linear.app/blog/keyboard-shortcuts
  • Key Features:
    • Cmd+K command palette
    • Keyboard shortcuts for all actions
    • Fast, responsive UI
    • Minimal clicks to complete tasks
  • Influence: Inspired Global Search (section 11), Accessibility (section 13)

16.11 Academic & Research Papers​

31. "Dashboard Design Patterns" - Stephen Few

  • Source: Perceptual Edge
  • Citation: Few, S. (2006). Information Dashboard Design: The Effective Visual Communication of Data.
  • Key Concepts:
    • Data-ink ratio (minimize non-data pixels)
    • Small multiples for comparisons
    • Avoid 3D charts and pie charts (when possible)
    • Use color sparingly and consistently
  • Applied in: Analytics Dashboard (section 8)

32. "The Magical Number Seven" - George A. Miller

  • Source: Psychological Review
  • Citation: Miller, G. A. (1956). The magical number seven, plus or minus two.
  • Key Concept: Human working memory limited to 7±2 items
  • Application: Limit menu items, KPIs, and filter options to 5-7
  • Applied in: Navigation (section 4), Portfolio Overview (section 5)

16.12 Testing & Quality Assurance​

33. axe DevTools - Accessibility Testing

34. Lighthouse - Performance Audits

35. NVDA - Screen Reader

  • Source: NV Access
  • URL: https://www.nvaccess.org/
  • Use Case: Windows screen reader testing (free)
  • Applied in: Accessibility (section 13)

16.13 Project Management Methodologies​

36. Agile Manifesto

  • Source: Agile Alliance
  • URL: https://agilemanifesto.org/
  • Principles: Iterative development, customer collaboration, responding to change
  • Applied in: User Stories (section 15), Sprint Planning scenarios

37. Kanban Methodology

16.14 Open Source Libraries​

38. Fuse.js - Fuzzy Search

39. Chart.js

40. Sortable.js - Drag-and-Drop

16.15 Additional Resources​

41. Figma - UI Design Tool

  • Source: Figma Community
  • URL: https://www.figma.com/community
  • Use Case: Create high-fidelity mockups and prototypes
  • Templates: Kanban boards, dashboards, modal examples

42. CodePen - UI Patterns

43. UX Movement - Design Patterns Blog

  • Source: UX Movement
  • URL: https://uxmovement.com/
  • Articles: Filter design, modal UX, form design, navigation patterns
  • Applied in: Filter Modal (section 9), Task Detail Modal (section 10)

16.16 Summary Statistics​

Total References: 43 sources Categories:

  • Industry leaders & tools: 10
  • Standards & guidelines: 6
  • Technical documentation: 8
  • Academic research: 2
  • Testing tools: 3
  • Methodologies: 2
  • Open source libraries: 3
  • Additional resources: 9

Primary Sources (Most Cited):

  1. WCAG 2.1 Guidelines (accessibility standard)
  2. Material Design (responsive layout)
  3. Jira (swimlane pattern)
  4. Fuse.js (fuzzy search)
  5. Chart.js (data visualization)

16.17 Citation Format​

All citations follow APA 7th edition format where applicable.

Example:

Source Name. (Year). Title of Article. Publisher.
URL: https://example.com

For Web Resources:

Organization Name. Title of Resource.
Retrieved from https://example.com

Previous: 15. User Stories & Scenarios Index: Master Index Back to Top: Executive Summary