CRUD UX Patterns
When to use: Designing data management interfaces. Building admin panels, lists, forms.
The test: Can users Create, Read, Update, Delete without confusion about what will happen?
Quick Reference
| Operation | User Question | Design Answer |
|---|---|---|
| Create | "How do I add one?" | Obvious + button or CTA |
| Read | "Where is it?" | Scannable list with search/filter |
| Update | "How do I change it?" | Inline or modal edit |
| Delete | "What if I make a mistake?" | Confirmation + undo option |
Create
Checklist
- Clear "Add" or "Create" button visible
- Button near the list it adds to
- Form fields match expected data
- Required vs optional fields clear
- Success feedback after creation
- New item visible in list immediately
Decision: Modal vs Page
| Use Modal When | Use Page When |
|---|---|
| 1-5 simple fields | 6+ fields |
| Context matters | Complex validation |
| Quick add flow | Related sub-items |
Read (List View)
Checklist
- Key identifier visible (name, ID, date)
- Status indicators if applicable
- Sortable columns
- Search/filter for large lists
- Empty state with CTA to create
- Pagination or infinite scroll
Information Density
| Data Volume | Pattern |
|---|---|
| < 20 items | Show all |
| 20-100 items | Pagination |
| > 100 items | Search required |
Update
Inline Edit
- Edit icon or clickable text
- Clear save/cancel controls
- Validation before save
- Visual feedback on change
Modal Edit
- Clear "Edit" affordance
- All editable fields in modal
- Save and Cancel buttons
- Escape key cancels
Page Edit
- "Edit" link in list row
- Back navigation clear
- Save button prominent
- Unsaved changes warning
Decision Matrix
| Scenario | Best Pattern |
|---|---|
| Single field change | Inline |
| 2-5 fields | Modal |
| Complex form | Page |
| Context needed | Modal |
| URL required | Page |
Delete
Checklist
- Delete action clearly destructive (red, warning icon)
- Confirmation dialog for destructive action
- Item name shown in confirmation
- Consequences stated ("This cannot be undone")
- Undo option if possible (soft delete)
- Success confirmation after delete
Confirmation Dialog
Title: Delete [Item Name]?
Body: This will permanently remove [Item Name] and all associated data.
This action cannot be undone.
[Cancel] [Delete]
Soft Delete Pattern
- Mark as deleted (don't remove from DB)
- Show "Deleted" toast with Undo button
- 10-second window to undo
- After timeout, hide from UI
- Actually delete after 30 days (background job)
Bulk Operations
Checklist
- Select all / deselect all
- Count of selected items shown
- Bulk actions disabled when nothing selected
- Confirmation for bulk delete
- Progress indicator for long operations
UI Pattern
┌─────────────────────────────────────────────┐
│ ☑ Select All (3 selected) [Delete] [Export]│
├─────────────────────────────────────────────┤
│ ☑ Item 1 │
│ ☑ Item 2 │
│ ☑ Item 3 │
│ ☐ Item 4 │
└─────────────────────────────────────────────┘
State Management
Loading States
- Skeleton while loading
- Disabled actions during save
- Progress indicator for long saves
Error States
- Field-level validation errors
- Form-level error summary
- Retry option on failure
- Data preserved on error
Empty States
- Friendly message (not "No data")
- Illustration optional
- Clear CTA to create first item
Keyboard Shortcuts (Power Users)
| Action | Shortcut |
|---|---|
| Create new | N |
| Edit selected | E |
| Delete selected | Delete/Backspace |
| Select all | Cmd/Ctrl + A |
| Search | / or Cmd/Ctrl + F |
| Save | Cmd/Ctrl + S |
| Cancel | Escape |
Quick Diagnosis
| Symptom | Likely Cause | Fix |
|---|---|---|
| Users can't find "Add" | Button not prominent | Move to top-right, use + icon |
| Accidental deletes | No confirmation | Add confirmation dialog |
| Lost work | No save warning | Warn on navigation with unsaved changes |
| Slow for power users | Mouse-only | Add keyboard shortcuts |
| Confusion on edit | Unclear where to click | Add explicit Edit button |