Data Interfaces
When to use: Building admin panels, data management screens, list views, or any interface where users Create, Read, Update, and Delete records.
The test: Can users perform every CRUD operation without confusion about what will happen next?
CRUD Quick Reference
| Operation | User Question | Design Answer |
|---|---|---|
| Create | "How do I add one?" | Obvious + button or CTA near the list |
| Read | "Where is it?" | Scannable list with search and filter |
| Update | "How do I change it?" | Inline edit, modal, or dedicated page |
| Delete | "What if I make a mistake?" | Confirmation dialog + undo option |
Create Patterns
Checklist
- "Add" or "Create" button visible without scrolling
- Button positioned near the list it adds to (top-right convention)
- Form fields match expected data model
- Required vs optional fields visually distinct (asterisk + "(optional)" label)
- Success feedback after creation (toast or redirect to new item)
- New item visible in list immediately (optimistic UI or refetch)
Container Decision
| Condition | Use |
|---|---|
| 1-5 simple fields, context matters | Modal |
| 6+ fields or complex validation | Dedicated page |
| Quick-add from list view | Inline row or modal |
| Sub-items or relationships needed | Dedicated page |
Read Patterns
Checklist
- Key identifier visible (name, ID, date)
- Status indicators with icon + text (not color alone)
- Sortable columns with visible sort indicator
- Search for lists over 20 items
- Filter controls for lists over 50 items
- Empty state with CTA to create first item
- Loading skeleton (not spinner) during data fetch
Data Volume Rules
| Volume | Pattern | Pagination |
|---|---|---|
| Under 20 items | Show all | None needed |
| 20-100 items | Paginated | Page numbers, 10-25 per page |
| Over 100 items | Search required | Infinite scroll or paginated with search |
| Over 1000 items | Server-side search and filter | Load on demand only |
Information Density
| Check | Threshold | How to Measure |
|---|---|---|
| Columns per table | 7 or fewer visible at once | Count columns |
| Row height | 40-56px for data tables | DevTools: measure row height |
| Cell content | Truncate at 50 characters, tooltip for full value | Check longest cell in each column |
| Actions per row | 3 or fewer (use overflow menu for more) | Count action buttons |
Update Patterns
Inline Edit
Best for: single field changes, status toggles.
- Click or pencil icon activates edit mode
- Save/Cancel controls appear immediately
- Validation before save
- Visual feedback on successful change
- Escape cancels, Enter saves
Modal Edit
Best for: 2-5 fields, maintaining list context.
- "Edit" action clearly visible in row
- All editable fields shown in modal
- Save and Cancel buttons with clear visual hierarchy
- Escape key cancels without saving
- Focus returns to triggering element on close
Page Edit
Best for: complex forms, URL-addressable records, mobile.
- "Edit" link in list row or detail view
- Back navigation clear and working
- Save button prominent and fixed (sticky) for long forms
- Unsaved changes warning on navigation away
- Form state persists on browser refresh
Decision Matrix
| Scenario | Best Pattern |
|---|---|
| Single field toggle | Inline |
| 1-3 simple fields | Inline or Modal |
| 4-6 fields | Modal |
| 7+ fields | Page |
| Needs a URL | Page |
| User needs list context | Modal |
| Primary use is mobile | Page |
| Sub-items or file uploads | Page |
Delete Patterns
Checklist
- Delete action visually destructive (red text/icon, end of action list)
- Confirmation dialog states item name and consequences
- Confirmation requires explicit action (not just "OK" -- type item name for critical deletes)
- Undo available for 10 seconds after deletion (soft delete)
- Success confirmation after delete
Confirmation Dialog Template
Title: Delete [Item Name]?
Body: This will permanently remove [Item Name]
and all associated [related data].
This action cannot be undone.
[Cancel] [Delete]
↑ red, right-aligned
Soft Delete Pattern
- Mark as deleted in database (don't remove)
- Show "Deleted" toast with Undo button (10-second window)
- Hide from UI after timeout
- Actually purge after 30 days (background job)
Bulk Operations
- Select all / deselect all checkbox in table header
- Count of selected items shown ("3 selected")
- Bulk actions disabled when nothing selected
- Confirmation required for bulk delete (show count)
- Progress indicator for operations over 2 seconds
Container Decisions
When to use page vs modal vs drawer.
Decision Tree
Does it need a URL?
├── Yes --> PAGE
└── No
└── Is it a quick confirmation?
├── Yes --> MODAL (alert dialog)
└── No
└── Is it a multi-step process?
├── Yes --> PAGE (wizard)
└── No
└── Can content exceed viewport height?
├── Yes --> PAGE or DRAWER
└── No
└── Does user need list context?
├── Yes --> MODAL or DRAWER
└── No --> PAGE
Modal Rules
| Check | Threshold | How to Verify |
|---|---|---|
| Content fits viewport | No scrolling inside modal | Check at 768px viewport height |
| Maximum actions | 2 primary actions | Count buttons |
| Focus trapped | Tab stays within modal | Tab test |
| Escape closes | Pressing Escape dismisses | Keyboard test |
| Focus returns | Focus moves back to trigger on close | Close modal, check focus |
| Background locked | Cannot interact with background content | Click outside modal content area |
Modal Anti-Patterns
| Don't | Why | Instead |
|---|---|---|
| Modal opens modal | Confusing depth | Use page or multi-step wizard |
| Scrolling modal content | Users lose position | Use page |
| Complex forms in modal | Risk of data loss | Use page with save |
| Navigation inside modal | Breaks mental model | Use page |
| Modal for mobile primary flow | Poor mobile UX | Use full page |
Drawer Use Cases
- Supplementary content (help, settings panels)
- Quick edits to list items (detail panel)
- Filters and sorting options
- Preview without full navigation
State Management
Loading States
- Skeleton placeholders during initial load (not spinner)
- Disabled actions during save (prevent double-submit)
- Progress indicator for operations over 2 seconds
- Optimistic UI for fast-feeling interactions
Error States
- Field-level validation with specific messages
- Form-level error summary at top of form
- Retry button on network failure
- User data preserved on error (never clear the form)
Empty States
- Descriptive message (not "No data found")
- CTA to create first item
- Optional illustration or icon
Keyboard Shortcuts
For power users in data-heavy interfaces:
| Action | Shortcut |
|---|---|
| Create new | N |
| Edit selected | E |
| Delete selected | Delete or Backspace |
| Select all | Cmd/Ctrl + A |
| Search/filter | / or Cmd/Ctrl + F |
| Save | Cmd/Ctrl + S |
| Cancel/close | Escape |
Quick Diagnosis
| Symptom | Likely Cause | Fix |
|---|---|---|
| Users can't find "Add" | Button not visible or labeled differently | Top-right + button, clear label |
| Accidental deletes | No confirmation dialog | Add confirmation with item name |
| Lost work on edit | No unsaved changes warning | Warn on navigation, auto-save draft |
| Slow for power users | Mouse-only interface | Add keyboard shortcuts |
| Users confused by edit | Unclear where to click | Add explicit Edit button per row |
| Modal feels cramped | Too much content for modal | Move to page or drawer |
| Can't find items | No search or filter | Add search for 20+ items, filter for 50+ |
| Table unreadable on mobile | Too many columns | Responsive card layout or column priority |
Context
- Component Design -- Building reusable CRUD components
- Interaction + Accessibility -- Keyboard and screen reader in data interfaces
- Visual Design -- Table typography and spacing