name	web-application-design
description	Design web apps and dashboards with responsive layouts and keyboard workflows

Web Application Design

Overview

This skill provides The Web Application Usability Framework, a systematic 4-dimension methodology for designing complex web applications, SaaS tools, dashboards, and admin panels. Use this when designing data-heavy interfaces, workflow-driven tools, or multi-platform responsive web applications.

Core Principle: Web applications serve power users who need speed, clarity, and flexibility. Success means presenting complex data clearly, enabling efficient workflows through keyboard shortcuts and bulk actions, adapting gracefully across devices, and ensuring core functionality works even in degraded conditions.

Focus: Complex data displays, keyboard-driven workflows, responsive design (mobile to desktop), and progressive enhancement for reliability.

When to Use This Skill

Use this skill when:

Designing web applications, SaaS tools, or admin panels
Working with complex data displays (tables, charts, dashboards)
Building tools for power users or enterprise environments
Implementing responsive web designs across mobile, tablet, and desktop
User mentions: "web app", "dashboard", "SaaS", "admin panel", "data table", "keyboard shortcuts", "bulk actions"

Don't use this skill for:

Marketing websites or landing pages (simpler content-focused design, not workflow-driven)
Mobile-native apps (use lyra/ux-designer/mobile-design-patterns)
Desktop-native software (use lyra/ux-designer/desktop-software-design)
Simple forms or single-purpose pages (use lyra/ux-designer/interaction-design-patterns)

The Web Application Usability Framework

A systematic 4-dimension evaluation model for web application design:

DATA CLARITY - Tables, charts, dashboards, real-time updates, export
WORKFLOW EFFICIENCY - Keyboard shortcuts, bulk actions, inline editing, command palette
RESPONSIVE ADAPTATION - Mobile <768px, tablet 768-1024px, desktop >1024px
PROGRESSIVE ENHANCEMENT - Core content works without JS/CSS, graceful degradation

Evaluate designs by examining each dimension systematically, ensuring data is understandable, workflows are fast, interfaces adapt across devices, and functionality degrades gracefully.

Dimension 1: DATA CLARITY

Purpose: Present complex data in an understandable, scannable, actionable way

Users come to web applications to work with data—view it, understand it, act on it. Poor data presentation creates cognitive overload and slows decision-making. Clear data visualization, sortable tables, and meaningful empty states are essential.

Evaluation Questions

Can users understand data at a glance?
- Visual hierarchy guides the eye to important metrics
- Charts match data type (trends → line, comparison → bar)
- Numbers formatted appropriately (1,234 vs 1234, $1.2M vs $1,234,567)
Are tables sortable and filterable?
- Column headers clickable for sorting (ascending/descending)
- Filter controls above table or in column headers
- Search functionality for large datasets
- Pagination or infinite scroll for performance
Do visualizations match data relationships?
- Line charts: Trends over time
- Bar charts: Comparisons between categories
- Pie charts: Part-to-whole (use sparingly, max 5 slices)
- Scatter plots: Correlations between variables
Are empty states helpful and actionable?
- Explain why empty ("No results found", "You haven't created any projects yet")
- Provide next action (CTA: "Create your first project")
- Show illustration or helpful tips
Is real-time data clearly indicated?
- Visual indicator (pulsing dot, "Live" badge)
- Timestamp ("Updated 2 seconds ago")
- Smooth updates (no jarring content shifts)

Tables with Sorting and Filtering

Pattern: Sortable Table Headers

<!-- Table Structure -->
<table>
  <thead>
    <tr>
      <th>
        <button class="sort-header" data-column="name">
          Name
          <span class="sort-icon">↕</span>
        </button>
      </th>
      <th>
        <button class="sort-header" data-column="date">
          Date Created
          <span class="sort-icon">↓</span> <!-- Active: descending -->
        </button>
      </th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <!-- Data rows -->
  </tbody>
</table>

Sorting States:

Unsorted: ↕ (double arrow, neutral gray)
Ascending: ↑ (up arrow, brand color)
Descending: ↓ (down arrow, brand color)

Interaction:

Click header: Toggle sort (unsorted → ascending → descending → ascending)
Keyboard: Tab to header, Enter/Space to sort
Visual feedback: Icon changes, column highlighted

Filter Controls:

<!-- Filters Above Table -->
<div class="table-filters">
  <input type="search" placeholder="Search by name..." />
  <select>
    <option value="">All Statuses</option>
    <option value="active">Active</option>
    <option value="inactive">Inactive</option>
  </select>
  <button>Clear Filters</button>
</div>

Pagination:

Bottom of table: "Showing 1-25 of 487 results"
Page controls: « Previous | 1 2 3 ... 20 | Next »
Items per page: Dropdown (25, 50, 100)
Performance: Only load visible rows (virtual scrolling for 1000+ rows)

Row Selection for Bulk Actions:

<table>
  <thead>
    <tr>
      <th>
        <input type="checkbox" id="select-all" aria-label="Select all rows" />
      </th>
      <th>Name</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" name="row-select" value="123" />
      </td>
      <td>Project Alpha</td>
      <td>Active</td>
    </tr>
  </tbody>
</table>

Selection Feedback:

Selected row: Background color change (light blue, 10% opacity)
Bulk action bar appears: "3 items selected | Delete | Archive | Export"
"Select all" checkbox states: Unchecked, Checked, Indeterminate (some selected)

Data Visualization Best Practices

Line Charts (Trends Over Time):

Use for: Time-series data, progress tracking, historical trends
Best practices:
- X-axis: Time (dates, hours)
- Y-axis: Value (starts at 0 unless all values in narrow range)
- Max 5 lines per chart (more = unreadable)
- Legend with colors, or direct labels on lines
- Tooltips on hover: "Aug 15, 2024: 1,234 users"

Bar Charts (Comparisons Between Categories):

Use for: Comparing quantities across categories
Best practices:
- Horizontal bars: Better for long category names
- Vertical bars: Better for time-based categories (months)
- Sort by value (descending) unless chronological
- Space between bars: 20-40% of bar width
- Value labels on bars or at end

Pie Charts (Part-to-Whole Relationships):

Use sparingly: Only when showing parts of 100%
Max 5 slices: More slices = hard to compare
Alternative: Donut chart (center shows total)
Better alternative: Horizontal bar chart (easier to compare)
Labels: Percentage + category name

Dashboard Hierarchy (F-Pattern Layout):

┌─────────────────────────────────────────────────┐
│  [Most Important Metric]   [Primary Action]     │  ← Top row: Critical
├──────────────────┬──────────────────┬───────────┤
│  Metric Card     │  Metric Card     │  Chart    │  ← Second row: Important
├──────────────────┴──────────────────┴───────────┤
│                                                  │
│  Detailed Table or Secondary Chart              │  ← Below fold: Details
│                                                  │
└─────────────────────────────────────────────────┘

F-Pattern Scanning:

Top-left: Most important metric (users scan here first)
Top-right: Primary action (CTA, create, export)
Left edge: Vertical scan (labels, categories)
Horizontal scans: Decreasing attention as user scrolls down

Metric Cards:

Value (large, bold): "1,234"
Label (smaller, gray): "Active Users"
Change indicator: "↑ 12% vs last week" (green for positive, red for negative)
Sparkline (optional): Tiny trend chart (last 7 days)

Progressive Disclosure for Complex Data

Pattern: Summary Cards → Detail Views

<!-- Summary Card (Collapsed) -->
<div class="summary-card">
  <h3>Project Alpha</h3>
  <p>Status: Active | 12 tasks remaining</p>
  <button class="expand-btn">View Details →</button>
</div>

<!-- Detail View (Expanded) -->
<div class="detail-view">
  <h3>Project Alpha</h3>
  <div class="metadata">
    <p>Created: Aug 1, 2024</p>
    <p>Owner: Jane Smith</p>
    <p>Budget: $50,000</p>
  </div>
  <table>
    <!-- Detailed task list -->
  </table>
  <button class="collapse-btn">Hide Details ↑</button>
</div>

When to Use:

Large datasets: Show 5-10 items, "Load more" or pagination
Complex records: Show summary, expand for full details
Nested data: Accordion or tree view

Interaction:

Click to expand: Smooth height animation (300ms ease-out)
Keyboard: Tab to button, Enter/Space to toggle
Icon: ▶ (collapsed) → ▼ (expanded)

Real-Time Updates

WebSocket for Live Data:

Use for: Stock prices, live dashboards, chat, collaborative editing
Pattern: Establish WebSocket connection on page load, update DOM on message
Visual indicator: "Live" badge (pulsing green dot), "Connected" status

Polling for Updates:

Use for: Less time-critical updates (notifications, status checks)
Interval: 60 seconds typical (balance freshness vs server load)
Pattern: setInterval(fetchUpdates, 60000)

Visual Indicators:

Pulsing dot: Live connection (CSS animation, 2s pulse)
Timestamp: "Updated 2 seconds ago" (relative time, updates every second)
Flash on update: Brief highlight (yellow background, fades after 2s)

Smooth Content Updates:

Don't shift layout abruptly (causes disorientation)
Animate new items in (slide down or fade in, 200ms)
If sorting changes, animate reordering (swap positions smoothly)

Export Functionality

Export Options:

CSV for Data Analysis:

All rows or filtered/selected rows
All columns or visible columns only
Filename: "projects_export_2024-08-15.csv"

PDF for Reports:

Formatted for printing (headers, footers, page numbers)
Charts rendered as images
Logo and branding

Copy to Clipboard:

Selected cells or entire table
Tab-separated values (paste into Excel/Sheets)
Confirmation toast: "Copied 10 rows to clipboard"

Pattern: Export Dropdown

<div class="export-dropdown">
  <button>Export ▼</button>
  <ul class="dropdown-menu">
    <li><button>Export to CSV</button></li>
    <li><button>Export to PDF</button></li>
    <li><button>Copy to Clipboard</button></li>
  </ul>
</div>

Dimension 2: WORKFLOW EFFICIENCY

Purpose: Enable power users to work at maximum speed with minimal friction

Web application users are often power users who perform repetitive tasks daily. Keyboard shortcuts, bulk actions, inline editing, and command palettes dramatically improve efficiency for these users.

Evaluation Questions

Can power users complete tasks without touching the mouse?
- Keyboard shortcuts for common actions
- Tab navigation through all interactive elements
- Focus indicators visible and high-contrast
Are bulk actions available for repetitive tasks?
- Select multiple items (checkboxes)
- "Select all" option
- Bulk actions: Delete, Archive, Export, Tag, Assign
Does inline editing reduce modal dialogs?
- Click to edit cells in tables
- Auto-save on blur
- No modal for simple edits
Is there an autosave mechanism?
- Draft saved every 30 seconds
- Visual indicator: "Saving...", "All changes saved"
- No "lost work" anxiety
Are contextual actions easily accessible?
- Right-click context menus
- Hover actions on table rows
- Quick actions on cards

Keyboard Shortcuts

Essential Shortcuts (Cross-Platform):

Cmd/Ctrl+S: Save
Cmd/Ctrl+F: Search/Find (open search modal or focus search input)
Cmd/Ctrl+Z: Undo
Cmd/Ctrl+Shift+Z: Redo
Cmd/Ctrl+K: Command palette (universal action search)
Cmd/Ctrl+/: Show keyboard shortcuts panel

Navigation Shortcuts:

Tab: Next field/element
Shift+Tab: Previous field/element
Arrow keys: Navigate lists, tables, calendar cells
Enter: Submit form, activate button, open selected item
Esc: Close modal, cancel edit, clear search

Table Navigation:

Arrow Up/Down: Previous/next row
Arrow Left/Right: Previous/next column (if cell-focused)
Space: Select/deselect row (checkbox)
Enter: Open detail view for selected row

Application-Specific Shortcuts:

G then I: Go to Inbox (Gmail-style navigation)
C: Compose new (email, message, post)
/: Focus search (common in many apps)
?: Show keyboard shortcuts help

Discoverability Strategies:

Tooltips with Shortcuts:
- Button tooltip: "Save (Cmd+S)"
- Show shortcut in gray, smaller text
Onboarding Hints:
- First-time user: "Pro tip: Press Cmd+K to quickly find anything"
- Dismissable, don't show again after 3 views
Keyboard Shortcuts Panel:
- Triggered by Cmd+/ or ? key
- Modal with categorized shortcuts (Navigation, Editing, Actions)
- Searchable

Implementation:

// Global keyboard listener
document.addEventListener('keydown', (e) => {
  // Cmd+S or Ctrl+S: Save
  if ((e.metaKey || e.ctrlKey) && e.key === 's') {
    e.preventDefault();
    saveDocument();
  }

  // Cmd+K or Ctrl+K: Command palette
  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
    e.preventDefault();
    openCommandPalette();
  }
});

Bulk Actions

Pattern: Select Multiple Items, Act on All

<!-- Table with Bulk Selection -->
<table>
  <thead>
    <tr>
      <th>
        <input type="checkbox" id="select-all" />
      </th>
      <th>Name</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" name="item" value="1" /></td>
      <td>Item 1</td>
      <td>Active</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="item" value="2" /></td>
      <td>Item 2</td>
      <td>Inactive</td>
    </tr>
  </tbody>
</table>

<!-- Bulk Action Bar (appears when items selected) -->
<div class="bulk-action-bar" hidden>
  <span class="selection-count">3 items selected</span>
  <button class="bulk-delete">Delete</button>
  <button class="bulk-archive">Archive</button>
  <button class="bulk-export">Export</button>
  <button class="bulk-tag">Add Tag</button>
  <button class="deselect-all">Clear Selection</button>
</div>

Bulk Action Behavior:

Select items: Click checkboxes or Shift+Click for range selection
Bulk action bar appears: Slides in from top or bottom
Click action: Confirmation modal for destructive actions (delete)
Process: Show progress if >10 items ("Deleting 47 items... 23/47")
Feedback: Toast notification "3 items deleted" or "Export complete"
Undo option: "3 items deleted. Undo?" (5-second window)

"Select All" Checkbox States:

Unchecked: No items selected
Checked: All visible items selected
Indeterminate: Some items selected (shows dash/minus icon)

Selection Shortcuts:

Cmd+A: Select all (focus table first)
Shift+Click: Select range (click first, Shift+Click last)
Cmd+Click: Toggle individual selection (add/remove from selection)

Inline Editing

Pattern: Click to Edit, Auto-Save on Blur

<!-- Table Cell (View Mode) -->
<td class="editable-cell" data-field="name" data-id="123">
  <span class="cell-value">Project Alpha</span>
  <button class="edit-icon" aria-label="Edit name">✏️</button>
</td>

<!-- Table Cell (Edit Mode) -->
<td class="editable-cell editing">
  <input type="text" value="Project Alpha" class="cell-input" />
  <button class="save-btn">✓</button>
  <button class="cancel-btn">✕</button>
</td>

Inline Edit Interaction:

Enter edit mode:
- Click cell or edit icon
- Double-click cell
- Keyboard: Tab to cell, Enter to edit
Edit value:
- Input field focused, text selected
- Type new value
- Validation inline (if applicable)
Save:
- Click save button
- Press Enter
- Blur (click outside) triggers auto-save
- API request in background
Cancel:
- Click cancel button
- Press Esc
- Revert to original value
Feedback:
- Saving: Spinner or "Saving..." text
- Success: Brief green border flash, "Saved"
- Error: Red border, error message, revert to original

Auto-Save Indicators:

Icon: ⏳ (saving), ✓ (saved), ⚠ (error)
Text: "Saving...", "All changes saved", "Failed to save"
Position: Top-right corner or inline with edited field

When NOT to Use Inline Editing:

Complex fields (multi-line text, rich text editor → use modal or dedicated page)
Multiple related fields (edit form in modal or expand row)
Destructive actions (delete → confirmation modal)

Command Palette

Pattern: Cmd+K Opens Search for All Actions

<!-- Command Palette Modal -->
<div class="command-palette-modal">
  <input
    type="search"
    placeholder="Search for actions, pages, or data..."
    class="command-search"
    autofocus
  />
  <ul class="command-results">
    <li class="result-item">
      <span class="result-icon">📄</span>
      <span class="result-title">Create New Project</span>
      <span class="result-shortcut">Cmd+N</span>
    </li>
    <li class="result-item">
      <span class="result-icon">🔍</span>
      <span class="result-title">Search Projects</span>
      <span class="result-shortcut">Cmd+F</span>
    </li>
    <li class="result-item selected">
      <span class="result-icon">⚙️</span>
      <span class="result-title">Settings</span>
    </li>
  </ul>
</div>

Command Palette Features:

Search: Type to filter actions, pages, recent items
Keyboard navigation: Arrow keys to select, Enter to execute
Shortcuts shown: Display keyboard shortcut if available
Recents: Show recently used actions at top
Categories: Actions, Pages, Projects, Settings
Fuzzy search: "crnw" matches "Create New Project"

What to Include:

Navigation: All pages/sections
Actions: Create, Export, Delete, Settings
Recent items: Recently viewed projects, documents
Search results: Data from tables, lists

Examples:

Slack: Cmd+K (Quick switcher - channels, DMs, files)
VS Code: Cmd+Shift+P (Command palette - all editor actions)
Linear: Cmd+K (Create issue, search, navigate)

Contextual Actions

Pattern: Right-Click Context Menu

<!-- Table Row -->
<tr class="table-row" data-id="123">
  <td>Project Alpha</td>
  <td>Active</td>
  <td>
    <!-- Optional: Three-dot menu for touch/mobile -->
    <button class="row-menu-btn" aria-label="More actions">⋮</button>
  </td>
</tr>

<!-- Context Menu (appears on right-click) -->
<ul class="context-menu" style="top: 200px; left: 300px;">
  <li><button>Open</button></li>
  <li><button>Edit</button></li>
  <li><button>Duplicate</button></li>
  <li class="divider"></li>
  <li><button class="danger">Delete</button></li>
</ul>

Context Menu Behavior:

Trigger: Right-click on row, card, or item
Position: Appears at mouse cursor position
Keyboard: Shift+F10 or Menu key (if available)
Close: Click outside, press Esc, select action
Actions: Open, Edit, Duplicate, Archive, Delete (dangerous actions at bottom, red)

Touch/Mobile Alternative:

Three-dot menu button (⋮) visible on mobile
Tap to show action dropdown or bottom sheet
Right-click not available on touch devices

Hover Actions (Desktop):

<!-- Card with Hover Actions -->
<div class="card">
  <h3>Project Alpha</h3>
  <p>12 tasks remaining</p>

  <!-- Actions appear on hover (desktop only) -->
  <div class="hover-actions">
    <button aria-label="Edit">✏️</button>
    <button aria-label="Archive">📦</button>
    <button aria-label="Delete">🗑️</button>
  </div>
</div>

CSS for Hover Actions:

.hover-actions {
  opacity: 0;
  transition: opacity 150ms ease-out;
}

.card:hover .hover-actions {
  opacity: 1;
}

.card:focus-within .hover-actions {
  opacity: 1; /* Also show on keyboard focus */
}

Undo/Redo

Implementation Guidance:

Keyboard Shortcuts:

Cmd+Z / Ctrl+Z: Undo
Cmd+Shift+Z / Ctrl+Shift+Z: Redo (or Cmd+Y / Ctrl+Y)

State Management:

Maintain history stack of actions
Max history: 20-50 actions (memory constraint)
Persist across page refresh (localStorage)

Visual Feedback:

Toast notification: "Undo: Deleted 3 items"
Menu items: "Undo Delete" (shows last action)
Disabled state: Gray out if no undo/redo available

What Actions to Track:

Destructive: Delete, archive, remove
Edits: Text changes, status updates
Bulk actions: All bulk operations
Don't track: Navigation, search, filter (non-destructive)

Undo Toast Pattern:

<!-- Toast with Undo -->
<div class="toast success">
  <span>3 items deleted</span>
  <button class="undo-btn">Undo</button>
</div>

Duration: 5 seconds (enough time to undo)
Auto-dismiss: After 5s (or user clicks undo)
Position: Bottom-center or top-right

Autosave

Pattern: Save Draft Every 30 Seconds

let autosaveTimer;
let isDirty = false; // Track if content changed

// Mark as dirty on user input
contentField.addEventListener('input', () => {
  isDirty = true;
  clearTimeout(autosaveTimer);
  autosaveTimer = setTimeout(autosave, 30000); // 30 seconds
});

async function autosave() {
  if (!isDirty) return;

  updateStatus('Saving...');
  try {
    await saveDraft();
    updateStatus('All changes saved');
    isDirty = false;
  } catch (error) {
    updateStatus('Failed to save. Retry in 60s.');
    autosaveTimer = setTimeout(autosave, 60000); // Retry
  }
}

Autosave Indicators:

Saving: "Saving..." (gray, spinner icon)
Saved: "All changes saved" (green, checkmark, fades after 2s)
Error: "Failed to save. Trying again..." (red, warning icon)
Position: Top-right, below header, or inline with content

Best Practices:

Save after 30 seconds of inactivity (not every keystroke)
Save on blur (user navigates away)
Debounce: Wait for user to stop typing
Conflict resolution: Server timestamp wins, or show merge UI

Manual Save:

Still provide "Save" button (Cmd+S)
Immediate save, not delayed
Feedback: "Saved successfully"

Dimension 3: RESPONSIVE ADAPTATION

Purpose: Provide optimal experience across all screen sizes (mobile, tablet, desktop)

Web applications must work on phones, tablets, and desktops. Layout, navigation, and interaction patterns must adapt. Mobile users need simplified views and touch targets; desktop users need dense information and keyboard shortcuts.

Evaluation Questions

Does the layout adapt gracefully from mobile to desktop?
- Mobile: Single column, simplified
- Tablet: Two columns, condensed
- Desktop: Multi-column, full features
Are touch targets appropriately sized on mobile?
- Mobile: 48x48px minimum
- Desktop: 32x32px acceptable (mouse precision)
Do complex features have mobile alternatives?
- Desktop: Hover actions, right-click menus
- Mobile: Tap menus, swipe actions, bottom sheets
Is the mobile experience functional (not just hidden)?
- Don't hide critical features behind mobile breakpoint
- Simplify, don't remove
- Provide alternative interactions

Breakpoints

Standard Breakpoints:

/* Mobile: <768px */
@media (max-width: 767px) {
  /* Single column, stacked navigation, simplified tables */
}

/* Tablet: 768-1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Two columns, condensed nav, partial tables */
}

/* Desktop: >1024px */
@media (min-width: 1025px) {
  /* Multi-column, persistent nav, full features */
}

Mobile (<768px)

Layout:

Single column: Content stacks vertically
Full-width: Cards, buttons, inputs span full width (minus padding)
Padding: 16px left/right margins

Navigation:

Hamburger menu: Three-line icon, opens drawer navigation
Bottom tabs: 3-5 items for primary navigation (if app-like)
Sticky header: Fixed top navigation (collapses on scroll optional)

Tables:

Option 1: Horizontal scroll (preserve structure, scroll left/right)
Option 2: Hide columns (show critical columns only, "View details" for rest)
Option 3: Card view (stack data vertically, each row becomes card)
Option 4: Accordion rows (tap to expand full details)

Touch Targets:

Minimum: 48x48px (finger-sized)
Spacing: 8px between targets
Buttons: Full-width or large (minimum 48px height)

Information Density:

Reduced: Show essential data, hide secondary info
Progressive disclosure: "Show more" buttons
Simplified charts: Single metric cards instead of complex multi-line charts

Mobile-Specific Patterns:

Tap instead of hover (no hover state on mobile)
Swipe gestures (swipe to delete, pull to refresh)
Bottom sheets instead of modals (easier thumb reach)

Tablet (768-1024px)

Layout:

Two-column: Sidebar + content, or split view
Grid: 2-3 columns for cards
Flexible: Adapt to portrait (narrower) vs landscape (wider)

Navigation:

Condensed sidebar: Icons + labels (collapsed width)
Icon nav: Top nav with icons and text
Tabs: Horizontal tabs for sections

Tables:

Partial columns: Show more columns than mobile, hide non-critical
Horizontal scroll: If all columns needed
Responsive breakpoints: Adjust column visibility at 768px and 1024px

Touch Targets:

Still touch-friendly: 48x48px (tablets are touch)
Hybrid: Support touch and mouse (some tablets have trackpads)

Information Density:

Medium: More than mobile, less than desktop
Two-column cards: Side-by-side instead of stacked

Desktop (>1024px)

Layout:

Multi-column: 3+ columns, sidebars, panels
Persistent navigation: Sidebar always visible, or top nav
Wider content: Max-width 1400-1600px, centered

Navigation:

Full sidebar: Expanded with icons + labels
Top nav with dropdowns: Mega-menus for complex hierarchies
Breadcrumbs: Show navigation path

Tables:

All columns visible: Full table with all data
Sortable: Column headers clickable
Hover states: Row highlights on hover, actions appear

Mouse/Keyboard Interactions:

Hover: Tooltips, action buttons, previews
Right-click: Context menus
Keyboard shortcuts: Full keyboard support
Focus indicators: Visible for keyboard navigation

Information Density:

High: Show all data, charts, metrics
Multi-pane: Master-detail views (list + detail side-by-side)
Dense tables: More rows per page (25-50)

Desktop-Specific Patterns:

Hover to reveal actions
Drag-and-drop reordering
Resizable panels (drag divider to adjust width)
Multi-select with Shift+Click, Cmd+Click

Responsive Patterns

Mobile-First CSS:

/* Base styles (mobile <768px) */
.container {
  padding: 16px;
}

.card {
  width: 100%;
  margin-bottom: 16px;
}

.sidebar {
  display: none; /* Hidden on mobile, hamburger menu instead */
}

/* Tablet (768px+) */
@media (min-width: 768px) {
  .container {
    display: grid;
    grid-template-columns: 200px 1fr; /* Sidebar + content */
    padding: 24px;
  }

  .sidebar {
    display: block; /* Show sidebar */
  }

  .card {
    width: calc(50% - 12px); /* Two columns */
  }
}

/* Desktop (1025px+) */
@media (min-width: 1025px) {
  .container {
    grid-template-columns: 250px 1fr 300px; /* Sidebar + content + right panel */
    max-width: 1600px;
    margin: 0 auto;
  }

  .card {
    width: calc(33.33% - 16px); /* Three columns */
  }
}

Responsive Navigation

Mobile: Hamburger Menu → Drawer

<!-- Mobile Navigation -->
<header class="mobile-header">
  <button class="hamburger-btn" aria-label="Open menu">☰</button>
  <h1>App Name</h1>
</header>

<nav class="drawer-nav" hidden>
  <ul>
    <li><a href="/dashboard">Dashboard</a></li>
    <li><a href="/projects">Projects</a></li>
    <li><a href="/settings">Settings</a></li>
  </ul>
</nav>

Tablet: Icon Nav with Labels

<!-- Tablet Navigation (Condensed Sidebar) -->
<nav class="sidebar-nav condensed">
  <ul>
    <li>
      <a href="/dashboard">
        <span class="icon">📊</span>
        <span class="label">Dashboard</span>
      </a>
    </li>
    <li>
      <a href="/projects">
        <span class="icon">📁</span>
        <span class="label">Projects</span>
      </a>
    </li>
  </ul>
</nav>

Desktop: Full Sidebar

<!-- Desktop Navigation (Full Sidebar) -->
<nav class="sidebar-nav full">
  <ul>
    <li class="nav-item active">
      <a href="/dashboard">
        <span class="icon">📊</span>
        <span class="label">Dashboard</span>
        <span class="badge">3</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="/projects">
        <span class="icon">📁</span>
        <span class="label">Projects</span>
      </a>
    </li>
  </ul>
</nav>

Responsive Tables

Option 1: Horizontal Scroll (Preserve Structure)

/* Mobile: Scroll horizontally to see all columns */
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

table {
  min-width: 600px; /* Force horizontal scroll */
}

Option 2: Hide Columns (Show Critical Only)

/* Mobile: Hide non-critical columns */
@media (max-width: 767px) {
  .column-created-date,
  .column-last-updated {
    display: none;
  }
}

/* Desktop: Show all columns */
@media (min-width: 1025px) {
  .column-created-date,
  .column-last-updated {
    display: table-cell;
  }
}

Option 3: Card View (Stack Data Vertically)

<!-- Mobile: Cards instead of table rows -->
<div class="card" data-id="123">
  <h3>Project Alpha</h3>
  <p>Status: <span class="badge">Active</span></p>
  <p>Created: Aug 1, 2024</p>
  <button>View Details</button>
</div>

<!-- Desktop: Traditional table -->
<table>
  <tr>
    <td>Project Alpha</td>
    <td><span class="badge">Active</span></td>
    <td>Aug 1, 2024</td>
    <td><button>View Details</button></td>
  </tr>
</table>

Option 4: Accordion Rows (Tap to Expand)

<!-- Mobile: Tap row to expand details -->
<div class="table-row collapsed">
  <div class="row-summary">
    <span class="name">Project Alpha</span>
    <span class="status">Active</span>
    <button class="expand-btn">▼</button>
  </div>
  <div class="row-details" hidden>
    <p>Created: Aug 1, 2024</p>
    <p>Owner: Jane Smith</p>
    <p>Budget: $50,000</p>
  </div>
</div>

Responsive Charts

Mobile: Simplified Charts

Single metric: Large number with sparkline
Simple bar chart: 3-5 bars maximum
Avoid: Multi-line charts (hard to read on small screen)

Desktop: Full Detail Charts

Multi-line charts: Up to 5 lines
Complex visualizations: Scatter plots, heat maps
Tooltips: Hover for detailed data

Responsive Chart Pattern:

/* Mobile: Smaller height, simplified */
.chart-container {
  height: 200px;
}

/* Desktop: Larger, more detail */
@media (min-width: 1025px) {
  .chart-container {
    height: 400px;
  }
}

Touch vs Hover

Mobile (Touch):

No hover states: All affordances must be visible
Tap actions: Single tap to activate
Long press: Context menu (500ms hold)
Swipe: Swipe to delete, swipe to reveal actions
No right-click: Use long-press or visible menu button

Desktop (Mouse + Hover):

Hover states: Actions appear on hover, tooltips, previews
Click: Left-click to activate
Right-click: Context menu
Cursor changes: Pointer for links, grab for draggable
Keyboard focus: Visible focus indicators

Responsive Hover Pattern:

/* Desktop: Show actions on hover */
@media (min-width: 1025px) {
  .card-actions {
    opacity: 0;
    transition: opacity 150ms;
  }

  .card:hover .card-actions {
    opacity: 1;
  }
}

/* Mobile: Always show actions (no hover) */
@media (max-width: 767px) {
  .card-actions {
    opacity: 1; /* Always visible */
  }
}

Dimension 4: PROGRESSIVE ENHANCEMENT

Purpose: Ensure core functionality works in all conditions (slow networks, JavaScript disabled, older browsers)

Users access web apps under varying conditions: slow 3G networks, JavaScript blocked by corporate firewalls, older browsers. Progressive enhancement ensures core content and actions work even when conditions are degraded.

Evaluation Questions

Does content load if JavaScript fails?
- Core HTML content visible
- Server-side rendering for critical content
- Graceful degradation for interactive features
Are core actions available without JavaScript?
- Forms submit to server (full page reload)
- Links work (not JavaScript-only routing)
- No "JavaScript required" errors
Does the page render in a usable state without CSS?
- Semantic HTML structure
- Logical source order (header → nav → content → footer)
- Text-based fallbacks for icons
Is there graceful degradation for older browsers?
- Feature detection (not browser detection)
- Polyfills for missing features
- Fallbacks for unsupported CSS

Enhancement Layers

Layer 1: Core HTML (Works Everywhere)

Semantic HTML with forms, links, and headings. Content is accessible and functional with zero JavaScript or CSS.

<!-- Core HTML: Form submits to server -->
<form action="/projects/create" method="POST">
  <label for="project-name">Project Name</label>
  <input type="text" id="project-name" name="name" required />

  <label for="project-status">Status</label>
  <select id="project-status" name="status">
    <option value="active">Active</option>
    <option value="inactive">Inactive</option>
  </select>

  <button type="submit">Create Project</button>
</form>

<!-- Core HTML: Links work without JavaScript -->
<nav>
  <a href="/dashboard">Dashboard</a>
  <a href="/projects">Projects</a>
  <a href="/settings">Settings</a>
</nav>

Layer 2: CSS Enhancement (Visual Hierarchy)

Add visual hierarchy, layout, spacing, and responsive design. Page looks professional and organized.

/* CSS: Visual hierarchy */
.form-field {
  margin-bottom: 16px;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

input, select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

button {
  background: #0066cc;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  background: #0052a3;
}

Layer 3: JavaScript Optimization (Faster Feedback)

Add client-side validation, AJAX requests (no page reload), smooth animations, and interactive features.

// JavaScript: Client-side validation (faster feedback)
form.addEventListener('submit', async (e) => {
  e.preventDefault(); // Prevent full page reload

  // Validate
  if (!nameInput.value) {
    showError('Project name is required');
    return;
  }

  // AJAX submit
  const response = await fetch('/projects/create', {
    method: 'POST',
    body: new FormData(form)
  });

  if (response.ok) {
    showSuccess('Project created!');
    // Smooth redirect or update UI
  } else {
    showError('Failed to create project. Try again.');
  }
});

Progressive Enhancement Strategy:

Build core HTML (works without JS/CSS)
Add CSS (visual hierarchy, responsive)
Add JavaScript (better UX, faster feedback)
Test with JS disabled, CSS disabled, slow network

Forms Without JavaScript

Pattern: Server-Side Validation, Full Page Submission

<!-- Form submits to server, no JavaScript required -->
<form action="/projects/create" method="POST">
  <!-- Server renders error messages if validation fails -->
  <?php if (isset($errors['name'])): ?>
    <div class="error-message"><?= $errors['name'] ?></div>
  <?php endif; ?>

  <label for="name">Project Name</label>
  <input
    type="text"
    id="name"
    name="name"
    value="<?= htmlspecialchars($submitted_name ?? '') ?>"
    required
  />

  <button type="submit">Create Project</button>
</form>

Server-Side Flow:

User submits form
Server validates input
If errors: Render form with error messages, pre-fill submitted values
If success: Redirect to success page or show confirmation

Enhancement with JavaScript:

Client-side validation (instant feedback, no round-trip)
AJAX submission (no page reload)
Loading spinner (better perceived performance)

Content-First Loading

Priority: Above-Fold Content → Critical Resources → Non-Critical Assets

<!-- Critical inline CSS for above-fold content -->
<head>
  <style>
    /* Inline critical CSS (above-fold styles) */
    body { font-family: sans-serif; margin: 0; }
    .header { background: #333; color: white; padding: 16px; }
    .main-content { max-width: 1200px; margin: 0 auto; padding: 16px; }
  </style>

  <!-- Defer non-critical CSS -->
  <link rel="preload" href="/styles/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
  <noscript><link rel="stylesheet" href="/styles/main.css" /></noscript>
</head>

<body>
  <!-- Above-fold content loads first -->
  <header class="header">
    <h1>Dashboard</h1>
  </header>

  <main class="main-content">
    <h2>Your Projects</h2>
    <!-- Critical content here -->
  </main>

  <!-- Defer non-critical JavaScript -->
  <script src="/scripts/main.js" defer></script>
</body>

Loading Priority:

HTML (0ms): Structure and content
Critical CSS (inline, 0ms): Above-fold styles
Critical JS (deferred): Loads after HTML parsed
Non-critical CSS (lazy, 1-2s): Below-fold styles
Non-critical assets (3-5s): Analytics, ads, social widgets

Graceful Degradation

Pattern: Feature Detection, Fallbacks for Missing Capabilities

// Feature detection (not browser detection)
if ('IntersectionObserver' in window) {
  // Use IntersectionObserver for lazy loading
  const observer = new IntersectionObserver(lazyLoad);
  images.forEach(img => observer.observe(img));
} else {
  // Fallback: Load all images immediately
  images.forEach(img => {
    img.src = img.dataset.src;
  });
}

// CSS Grid fallback
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

@supports not (display: grid) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }

  .container > * {
    flex: 0 0 calc(33.33% - 16px);
  }
}

Polyfills for Older Browsers:

// Conditionally load polyfills
if (!('fetch' in window)) {
  // Load fetch polyfill for IE11
  loadScript('/polyfills/fetch.js');
}

if (!('Promise' in window)) {
  // Load Promise polyfill
  loadScript('/polyfills/promise.js');
}

No-JavaScript Fallback:

<noscript>
  <div class="noscript-warning">
    <p>JavaScript is disabled. Some features may not work.</p>
    <p>Core functionality is still available.</p>
  </div>
</noscript>

Performance Budgets

Target Metrics (Google Lighthouse):

First Contentful Paint (FCP): <1.8 seconds
Largest Contentful Paint (LCP): <2.5 seconds
Time to Interactive (TTI): <3.8 seconds
Total Blocking Time (TBT): <300ms
Cumulative Layout Shift (CLS): <0.1

Bundle Size Budgets:

Total JavaScript: <200KB gzipped
Total CSS: <50KB gzipped
Critical CSS (inline): <14KB (fits in first TCP packet)
Images: WebP format, responsive sizes, lazy loading

Optimization Strategies:

Code splitting (load only what's needed)
Tree shaking (remove unused code)
Minification and compression (gzip, Brotli)
CDN for static assets
Browser caching (long cache headers for versioned assets)

Web-Specific Design Patterns

Navigation Patterns

Persistent Top Nav:

<nav class="top-nav">
  <div class="logo">App Name</div>
  <ul class="nav-links">
    <li><a href="/dashboard">Dashboard</a></li>
    <li><a href="/projects">Projects</a></li>
    <li><a href="/reports">Reports</a></li>
  </ul>
  <div class="user-menu">
    <button>User Name ▼</button>
  </div>
</nav>

Sidebar Nav:

<aside class="sidebar">
  <nav>
    <ul>
      <li class="active"><a href="/dashboard">📊 Dashboard</a></li>
      <li><a href="/projects">📁 Projects</a></li>
      <li><a href="/settings">⚙️ Settings</a></li>
    </ul>
  </nav>
</aside>

Breadcrumbs:

<nav class="breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/projects">Projects</a></li>
    <li aria-current="page">Project Alpha</li>
  </ol>
</nav>

Mega-Menu (Complex Hierarchies):

<nav class="mega-menu">
  <button class="menu-trigger">Products ▼</button>
  <div class="mega-menu-panel">
    <div class="menu-column">
      <h3>Category 1</h3>
      <ul>
        <li><a href="/product-a">Product A</a></li>
        <li><a href="/product-b">Product B</a></li>
      </ul>
    </div>
    <div class="menu-column">
      <h3>Category 2</h3>
      <ul>
        <li><a href="/product-c">Product C</a></li>
        <li><a href="/product-d">Product D</a></li>
      </ul>
    </div>
  </div>
</nav>

Feedback Mechanisms

Toast Notifications:

<!-- Toast: Brief, auto-dismiss message -->
<div class="toast success">
  <span class="icon">✓</span>
  <span class="message">Project created successfully</span>
  <button class="close-btn" aria-label="Dismiss">✕</button>
</div>

Position: Top-right or bottom-center Duration: 3-5 seconds, auto-dismiss Types: Success (green), Error (red), Warning (yellow), Info (blue)

Inline Validation:

<!-- Error state -->
<div class="form-field error">
  <label for="email">Email</label>
  <input type="email" id="email" value="invalid-email" aria-invalid="true" />
  <span class="error-message">Please enter a valid email address</span>
</div>

<!-- Success state -->
<div class="form-field success">
  <label for="username">Username</label>
  <input type="text" id="username" value="johndoe" />
  <span class="success-message">✓ Username available</span>
</div>

Loading States:

<!-- Button loading state -->
<button class="btn loading" disabled>
  <span class="spinner"></span>
  Saving...
</button>

<!-- Skeleton screen (loading placeholder) -->
<div class="skeleton-card">
  <div class="skeleton-header"></div>
  <div class="skeleton-text"></div>
  <div class="skeleton-text short"></div>
</div>

Error Pages:

<!-- 404 Error Page -->
<div class="error-page">
  <h1>404</h1>
  <h2>Page Not Found</h2>
  <p>The page you're looking for doesn't exist or has been moved.</p>
  <a href="/dashboard" class="btn primary">Go to Dashboard</a>
</div>

<!-- 500 Error Page -->
<div class="error-page">
  <h1>500</h1>
  <h2>Something Went Wrong</h2>
  <p>We're working to fix the issue. Please try again later.</p>
  <button onclick="location.reload()">Retry</button>
</div>

Layout Patterns

F-Pattern Scanning:

Users scan web pages in an F-shaped pattern: horizontal scan at top, second horizontal scan lower, then vertical scan on left.

Design Implications:

Top-left: Logo, app name
Top-right: Primary action, user menu
Left edge: Navigation, filters
Top horizontal: Important metrics, key actions

Fixed Headers:

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.main-content {
  margin-top: 64px; /* Header height */
}

Sticky CTAs (Call-to-Action):

.sticky-cta {
  position: sticky;
  bottom: 0;
  background: white;
  padding: 16px;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
  z-index: 100;
}

Modals:

<!-- Modal Dialog -->
<div class="modal-overlay">
  <div class="modal" role="dialog" aria-labelledby="modal-title">
    <div class="modal-header">
      <h2 id="modal-title">Confirm Delete</h2>
      <button class="close-btn" aria-label="Close">✕</button>
    </div>
    <div class="modal-body">
      <p>Are you sure you want to delete this project?</p>
    </div>
    <div class="modal-footer">
      <button class="btn secondary">Cancel</button>
      <button class="btn danger">Delete</button>
    </div>
  </div>
</div>

Modal Best Practices:

Backdrop click to close (or not, for critical modals)
Esc key to close
Focus trap (Tab cycles within modal)
Focus first input on open
Restore focus to trigger element on close

Search Patterns

Autocomplete:

<div class="search-autocomplete">
  <input
    type="search"
    placeholder="Search projects..."
    aria-autocomplete="list"
    aria-controls="search-results"
  />
  <ul id="search-results" role="listbox">
    <li role="option">Project Alpha</li>
    <li role="option">Project Beta</li>
    <li role="option">Project Gamma</li>
  </ul>
</div>

Filters:

<div class="search-filters">
  <input type="search" placeholder="Search..." />

  <select name="status">
    <option value="">All Statuses</option>
    <option value="active">Active</option>
    <option value="inactive">Inactive</option>
  </select>

  <select name="owner">
    <option value="">All Owners</option>
    <option value="me">My Projects</option>
    <option value="team">Team Projects</option>
  </select>

  <button class="filter-btn">Apply Filters</button>
  <button class="clear-btn">Clear</button>
</div>

Advanced Search:

<form class="advanced-search">
  <div class="search-row">
    <select name="field">
      <option value="name">Name</option>
      <option value="description">Description</option>
    </select>
    <select name="operator">
      <option value="contains">Contains</option>
      <option value="equals">Equals</option>
      <option value="starts_with">Starts with</option>
    </select>
    <input type="text" name="value" />
  </div>
  <button class="add-criteria">+ Add Criteria</button>
  <button type="submit">Search</button>
</form>

Search Results:

<div class="search-results">
  <div class="results-header">
    <span class="results-count">487 results for "alpha"</span>
    <select name="sort">
      <option value="relevance">Relevance</option>
      <option value="date">Date</option>
      <option value="name">Name</option>
    </select>
  </div>

  <div class="result-item">
    <h3><a href="/projects/123">Project Alpha</a></h3>
    <p>Description with <mark>alpha</mark> highlighted...</p>
    <span class="meta">Created Aug 1, 2024 • Owner: Jane Smith</span>
  </div>
</div>

Anti-Patterns

Priority 0 (Critical - Never Do)

1. Hiding essential features behind hamburger menu on desktop:

Problem: Desktop has plenty of space, hiding nav reduces discoverability
Impact: Users don't explore features, lower engagement
Fix: Persistent sidebar or top nav on desktop (>1024px)

2. No keyboard navigation support:

Problem: Excludes keyboard-only users, WCAG fail
Impact: Accessibility violation, legal risk
Fix: All interactive elements accessible via Tab, Enter, Space, Arrow keys

3. Forms that break without JavaScript:

Problem: Core functionality requires JS, fails in degraded conditions
Impact: Users can't complete tasks, frustrated
Fix: Forms submit to server, work without JS (progressive enhancement)

4. Blocking entire interface during one operation:

Problem: Full-page spinner, can't do anything else
Impact: Poor UX, feels slow and clunky
Fix: Inline loading states, allow parallel tasks

Priority 1 (High - Avoid)

5. Tables without sorting or filtering:

Problem: Users can't find data in large tables
Impact: Inefficient, forces manual scanning
Fix: Sortable column headers, filter controls above table

6. No mobile-responsive design:

Problem: Desktop layout shrunk to mobile, tiny text and targets
Impact: Unusable on mobile, high bounce rate
Fix: Mobile-first responsive design, 48px touch targets, simplified layouts

7. Slow load times (>5 seconds to interactive):

Problem: Users wait, may leave before page loads
Impact: High bounce rate, poor perceived performance
Fix: Code splitting, lazy loading, performance budgets (TTI <3.8s)

8. No autosave for long forms:

Problem: Users lose work if browser crashes or accidental navigation
Impact: Frustration, lost time, negative sentiment
Fix: Autosave draft every 30 seconds, "All changes saved" indicator

Priority 2 (Medium - Be Cautious)

9. Over-reliance on hover states:

Problem: Mobile has no hover, features inaccessible
Impact: Mobile users can't access actions
Fix: Always provide tap alternative, show actions on mobile

10. Complex keyboard shortcuts without discoverability:

Problem: Users don't know shortcuts exist
Impact: Features unused, efficiency gains missed
Fix: Keyboard shortcuts panel (Cmd+/), tooltips show shortcuts

11. Too many modals:

Problem: Modal fatigue, interrupts flow
Impact: Annoying, slows users down
Fix: Inline editing, slide-out panels, bottom sheets (fewer modals)

12. Dense dashboards without hierarchy:

Problem: Too much information, no visual priority
Impact: Cognitive overload, users don't know where to look
Fix: F-pattern layout, clear visual hierarchy, progressive disclosure

Practical Application

Workflow 1: New Dashboard Design

Step 1: Research User Needs

Interview users: What metrics matter most?
Identify top 3 actions (create, export, filter)
Understand workflows (daily check-ins, weekly reports)

Step 2: Wireframe Layout

Sketch F-pattern: Important metrics top-left, actions top-right
Plan card hierarchy: Primary metrics (large), secondary (smaller)
Include: Real-time updates, filters, export

Step 3: Prioritize Data

Most important metric: Large, top-left (e.g., "Active Users: 1,234")
Change indicators: ↑ 12% (green for positive)
Trend chart: Line chart (last 30 days)
Detailed table: Below fold, sortable and filterable

Step 4: Responsive Breakpoints

Desktop (>1024px): Multi-column grid (3-4 metric cards per row)
Tablet (768-1024px): Two columns
Mobile (<768px): Single column, stacked cards

Step 5: Test with Real Data

Empty state: "No data yet. Connect your account to get started."
Loading state: Skeleton cards while fetching
Error state: "Failed to load. Retry?"
Real data: Verify hierarchy and scannability

Workflow 2: Enterprise Admin Panel

Step 1: Understand Workflows

Map user tasks: Create users, manage permissions, view logs
Identify repetitive actions: Bulk user imports, role assignments
Define power user needs: Keyboard shortcuts, command palette

Step 2: Design Keyboard Shortcuts

Cmd+K: Command palette (quick access to all actions)
Cmd+N: Create new user
Cmd+F: Search/filter users
Document shortcuts in help panel (Cmd+/)

Step 3: Implement Bulk Actions

Table with checkboxes: Select multiple users
Bulk action bar: "5 users selected | Delete | Deactivate | Export"
Confirmation modal: "Delete 5 users? This cannot be undone."
Undo option: Toast "5 users deleted. Undo?"

Step 4: Responsive Adaptation

Desktop: Full table (all columns), persistent sidebar nav
Tablet: Hide secondary columns, condensed nav
Mobile: Card view (user cards), hamburger menu
Test: Ensure critical actions available on all screen sizes

Step 5: Progressive Enhancement

Core: Form submits to server (create user without JS)
Enhanced: AJAX form submission (no page reload)
Optimized: Inline validation, auto-complete for roles

Workflow 3: Data-Heavy Application

Step 1: Choose Data Visualization

Time-series: Line chart (revenue over time)
Comparisons: Bar chart (sales by region)
Part-to-whole: Donut chart (market share by product)
Avoid: Pie charts with >5 slices (use bar chart instead)

Step 2: Design Sortable Tables

Column headers: Clickable, sort icons (↕ ↑ ↓)
Filter controls: Above table (search, status dropdown)
Pagination: "Showing 1-50 of 1,234" (50 per page on desktop)
Row selection: Checkboxes for bulk export

Step 3: Add Filtering

Search: By name, description
Dropdowns: Status, category, owner
Date range: Created date, updated date
Clear filters: "Clear all" button

Step 4: Export Options

CSV: All rows (or filtered/selected)
PDF: Formatted report with charts
Copy: Selected cells to clipboard

Step 5: Real-Time Updates

WebSocket connection: Live price updates
Visual indicator: "Live" badge (pulsing green)
Smooth updates: Flash yellow on change (fades after 2s)
Timestamp: "Updated 3 seconds ago"

Workflow 4: SaaS Tool Redesign

Step 1: Analyze Pain Points

User feedback: "Too many clicks to complete tasks"
Analytics: High bounce on multi-step forms
Support tickets: "How do I edit this?"

Step 2: Simplify Workflows

Reduce steps: Combine create + configure into one page
Inline editing: Click to edit, no modal
Autosave: No manual save button, auto-save on blur

Step 3: Add Inline Editing

Table cells: Click to edit, Enter to save, Esc to cancel
Visual feedback: Border highlights, "Saving..." indicator
Error handling: Red border, error message, revert on fail

Step 4: Implement Command Palette

Trigger: Cmd+K
Search: All actions, pages, recent items
Keyboard nav: Arrow keys to select, Enter to execute
Fuzzy search: "crproj" matches "Create Project"

Step 5: Test Efficiency Gains

Measure: Time to complete tasks (before vs after)
User testing: Watch power users use keyboard shortcuts
Analytics: Track command palette usage, inline edit adoption
Iterate: Add more shortcuts based on user behavior

Related Skills

Core Lyra Skills:

lyra/ux-designer/visual-design-foundations: Visual hierarchy for dashboards, typography for dense data, color for status indicators
lyra/ux-designer/information-architecture: Navigation structure for complex apps, IA for multi-level hierarchies
lyra/ux-designer/interaction-design-patterns: Keyboard shortcuts, button states, feedback patterns, loading states
lyra/ux-designer/accessibility-and-inclusive-design: Keyboard navigation, screen reader support, WCAG compliance for web apps
lyra/ux-designer/user-research-and-validation: Usability testing for workflows, A/B testing for dashboards

Platform Skills:

lyra/ux-designer/mobile-design-patterns: Mobile-responsive considerations (<768px breakpoint), touch targets, gestures
lyra/ux-designer/desktop-software-design: Keyboard-first workflows, power user patterns, dense information displays

Cross-Faction:

muna/technical-writer/clarity-and-style: Microcopy for UI, error messages, empty states
ordis/security-architect/secure-authentication-patterns: Auth flows for SaaS, session management, secure forms

Additional Resources

Web Application Standards:

Material Design for Web: https://m3.material.io/develop/web
Apple Human Interface Guidelines (Web): https://developer.apple.com/design/human-interface-guidelines/designing-for-the-web
Microsoft Fluent UI: https://developer.microsoft.com/en-us/fluentui

Performance Standards:

Google Lighthouse: FCP <1.8s, LCP <2.5s, TTI <3.8s
Web Vitals: https://web.dev/vitals/
Performance budgets: <200KB JS gzipped, <50KB CSS gzipped

Responsive Design:

Breakpoints: Mobile <768px, Tablet 768-1024px, Desktop >1024px
Touch targets: 48x48px minimum (mobile)
Mobile-first CSS: Base styles mobile, enhance with media queries

Accessibility Standards:

WCAG 2.1 AA: Keyboard navigation, focus indicators, 4.5:1 contrast
ARIA: Proper roles, labels, live regions for dynamic content
Keyboard shortcuts: Document in accessible help panel

Data Visualization:

Line charts: Trends over time
Bar charts: Comparisons between categories
Pie/donut charts: Part-to-whole (max 5 slices)
Tables: Sortable, filterable, paginated

Keyboard Shortcuts:

Essential: Cmd+S (save), Cmd+F (find), Cmd+K (command palette)
Navigation: Tab, Arrow keys, Enter, Esc
Platform conventions: Cmd (Mac), Ctrl (Windows/Linux)

Progressive Enhancement:

Layer 1: Core HTML (semantic, accessible)
Layer 2: CSS (visual hierarchy, responsive)
Layer 3: JavaScript (client-side validation, AJAX)
Test: Disable JS, disable CSS, slow network

Install Skill

SKILL.md

Web Application Design

Overview

When to Use This Skill

The Web Application Usability Framework

Dimension 1: DATA CLARITY

Evaluation Questions

Tables with Sorting and Filtering

Data Visualization Best Practices

Progressive Disclosure for Complex Data

Real-Time Updates

Export Functionality

Dimension 2: WORKFLOW EFFICIENCY

Evaluation Questions

Keyboard Shortcuts

Bulk Actions

Inline Editing

Command Palette

Contextual Actions

Undo/Redo

Autosave

Dimension 3: RESPONSIVE ADAPTATION

Evaluation Questions

Breakpoints

Mobile (<768px)

Tablet (768-1024px)

Desktop (>1024px)

Responsive Patterns

Responsive Navigation

Responsive Tables

Responsive Charts

Touch vs Hover

Dimension 4: PROGRESSIVE ENHANCEMENT

Evaluation Questions

Enhancement Layers

Forms Without JavaScript

Content-First Loading

Graceful Degradation

Performance Budgets

Web-Specific Design Patterns

Navigation Patterns

Feedback Mechanisms

Layout Patterns

Search Patterns

Anti-Patterns

Priority 0 (Critical - Never Do)

Priority 1 (High - Avoid)

Priority 2 (Medium - Be Cautious)

Practical Application

Workflow 1: New Dashboard Design

Workflow 2: Enterprise Admin Panel

Workflow 3: Data-Heavy Application

Workflow 4: SaaS Tool Redesign

Related Skills

Additional Resources