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

1. Mark as deleted in database (don't remove)
2. Show "Deleted" toast with Undo button (10-second window)
3. Hide from UI after timeout
4. 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

Questions

Which engineering decision related to this topic has the highest switching cost once made — and how do you make it well with incomplete information?

• At what scale or complexity level does the right answer to this topic change significantly?
• How does the introduction of AI-native workflows change the conventional wisdom about this technology?
• Which anti-pattern in this area is most commonly introduced by developers who know enough to be dangerous but not enough to know what they don't know?