11 KiB
11 KiB
Comprehensive UX Practices for Web Applications
Introduction
This document consolidates many of the most important practical UX principles for modern web applications.
1. Core UX Principles
1.1 Visibility of System Status
Users should always understand:
- What the system is doing
- Whether an action succeeded
- Whether work is still in progress
- Whether an error occurred
Good Practices
- Show loading indicators immediately
- Show success confirmations after important actions
- Show inline validation messages
- Display progress for long-running tasks
- Use skeleton loading states instead of blank screens
- Prevent silent failures
- Avoid ambiguous UI states
Bad Practices
- Buttons with no feedback after clicking
- Infinite spinners without explanation
- Hidden background operations
- Saving without visible confirmation
1.2 Predictability and Consistency
Users build mental models quickly.
Breaking established expectations increases cognitive load and causes mistakes.
Good Practices
- Use consistent layouts
- Keep interaction patterns stable
- Reuse common UI conventions
- Keep naming and terminology consistent
- Use standard keyboard shortcuts
- Make similar components behave similarly
Bad Practices
- Different button styles for identical actions
- Inconsistent navigation behavior
- Custom controls that ignore platform conventions
- Unexpected modal behavior
1.3 Recognition Over Recall
Interfaces should minimize memory requirements.
Users should recognize options instead of remembering information.
Good Practices
- Show recent searches
- Use autocomplete
- Display contextual hints
- Preserve previously entered values
- Use visible labels
- Keep important actions visible
Bad Practices
- Placeholder-only labels
- Hidden functionality
- Requiring users to remember previous state
- Removing useful context during workflows
1.4 Error Prevention
Preventing mistakes is better than handling mistakes.
Good Practices
- Disable impossible actions
- Validate input early
- Warn before destructive operations
- Use constrained input formats
- Use safe defaults
- Prefer undo over confirmation dialogs
Bad Practices
- Destructive actions near common actions
- Easy accidental deletion
- Poor validation timing
- Irreversible operations without recovery
2. Input and Form UX
Forms are one of the most important and failure-prone areas in web applications.
2.1 Input Focus Behavior
Good Practices
- Autofocus the primary field when appropriate
- Preserve focus during rerenders
- Preserve cursor position
- Support keyboard-first workflows
- Use logical tab ordering
Auto-Selecting Input Text
Auto-selecting text on focus is context-dependent.
Good Use Cases
- Quantity fields
- Rename dialogs
- Editable defaults
- Quick replacement workflows
- Temporary values users often replace entirely
Bad Use Cases
- Long textareas
- Complex text editing
- Fields users commonly partially edit
- Rich text editing
Principle
Only auto-select when full replacement is more likely than partial editing.
2.2 Labels and Placeholders
Good Practices
- Always use visible labels
- Use placeholders only as supplementary examples
- Keep labels visible after typing
- Associate labels correctly for accessibility
Bad Practices
- Placeholder-only forms
- Ambiguous labels
- Labels that disappear during editing
2.3 Validation
Recommended Validation Timing
| Validation Type | Timing |
|---|---|
| Format validation | Immediate |
| Semantic validation | On blur |
| Server validation | On submit |
Good Practices
- Show errors near the relevant field
- Explain how to fix issues
- Preserve entered values after errors
- Validate incrementally
- Use clear language
Bad Practices
- Generic “Invalid input” messages
- Clearing form data after errors
- Delayed validation surprises
- Validation that interrupts typing
2.4 Input Types
Good Practices
Use appropriate HTML input types:
emailtelnumberdatepasswordsearch
Benefits
- Better mobile keyboards
- Native validation
- Improved accessibility
- Better autofill support
2.5 Form Submission
Good Practices
- Enter submits forms when expected
- Escape cancels dialogs
- Show loading states during submission
- Prevent duplicate submissions
- Preserve draft state
- Allow keyboard submission
Bad Practices
- Disabled submit buttons without explanation
- Hidden validation failures
- Silent submission failures
2.6 Dropdowns and Selection UX
Good Practices
- Use radio buttons for small option sets
- Use searchable selects for large datasets
- Prefer autocomplete for many options
- Show selected state clearly
Bad Practices
- Massive unsearchable dropdowns
- Nested dropdown hierarchies
- Multi-select controls without search
3. Navigation UX
3.1 Orientation
Users should always know:
- Where they are
- How they got there
- What they can do next
- How to go back
Good Practices
- Highlight active navigation
- Use breadcrumbs when helpful
- Use meaningful page titles
- Preserve navigation consistency
3.2 Navigation Structure
Good Practices
- Keep hierarchy shallow
- Group related actions
- Use descriptive names
- Keep primary actions stable
Bad Practices
- Deep nesting
- Ambiguous navigation labels
- Constantly moving actions
3.3 URL Design
Good Practices
- Use readable URLs
- Make URLs shareable
- Preserve app state in URLs when useful
- Support browser history correctly
Bad Practices
- Opaque generated URLs
- Broken back button behavior
- Losing state during navigation
4. Interaction Design
4.1 Click Targets
Good Practices
- Large clickable areas
- Adequate spacing between actions
- Clear hover/focus states
- Touch-friendly sizing
Bad Practices
- Tiny clickable regions
- Overlapping interactive elements
- Hidden hit areas
4.2 Feedback
Every interaction should produce feedback.
Good Practices
- Hover states
- Active states
- Loading indicators
- Success states
- Error states
- Optimistic updates when appropriate
Bad Practices
- Dead-feeling interfaces
- Invisible processing
- Delayed reactions
4.3 Destructive Actions
Good Practices
- Require confirmation for dangerous actions
- Prefer undo systems
- Visually distinguish destructive buttons
- Separate destructive actions spatially
Bad Practices
- Immediate irreversible deletion
- Dangerous actions near common actions
- Ambiguous destructive wording
4.4 Modal UX
Good Practices
- Trap keyboard focus
- Support Escape to close
- Restore focus after closing
- Prevent background interaction
- Keep modal purpose focused
Bad Practices
- Nested modals
- Full workflows inside modals
- Losing unsaved work accidentally
5. Performance UX
Performance is a UX feature.
Users interpret slowness as unreliability.
5.1 Perceived Performance
Good Practices
- Show immediate visual response
- Use optimistic UI updates
- Preload likely next content
- Stream content progressively
- Use skeleton loaders
Bad Practices
- Blank screens during loading
- Long blocking operations
- Frozen interfaces
5.2 Layout Stability
Good Practices
- Prevent layout shift
- Reserve image dimensions
- Avoid moving buttons during loading
- Keep skeletons aligned with final layout
Bad Practices
- Jumping content
- Shifting controls
- Reflow-heavy rendering
5.3 Responsiveness
Good Practices
- Keep UI interactive during async operations
- Avoid blocking the main thread
- Debounce expensive operations
- Virtualize large lists
Bad Practices
- UI freezes
- Excessive rerenders
- Laggy typing experiences
6. Accessibility
Accessibility improves usability for everyone.
6.1 Keyboard Accessibility
Good Practices
- Full keyboard navigation
- Visible focus indicators
- Logical tab order
- Keyboard shortcuts for power users
Bad Practices
- Mouse-only workflows
- Hidden focus state
- Keyboard traps
6.2 Semantic HTML
Good Practices
- Use proper semantic elements
- Use buttons for actions
- Use links for navigation
- Use headings correctly
Bad Practices
- Clickable divs without accessibility support
- Fake buttons
- Missing semantic structure
6.3 Visual Accessibility
Good Practices
- Sufficient color contrast
- Support reduced motion
- Avoid color-only communication
- Use scalable typography
Bad Practices
- Tiny text
- Low contrast interfaces
- Flashing animations
6.4 Screen Reader Support
Good Practices
- Proper labels
- Meaningful alt text
- ARIA only when necessary
- Correct live regions for updates
Bad Practices
- Unlabeled controls
- Excessive ARIA misuse
- Non-announced state changes
7. Enterprise Application UX
Enterprise UX differs significantly from marketing-oriented consumer interfaces.
Power users often prioritize efficiency over visual minimalism.
7.1 Dense Information Design
Good Practices
- Efficient data density
- Resizable tables
- Sticky headers
- Multi-column layouts
- High information throughput
Bad Practices
- Excessive whitespace
- Oversimplified dashboards
- Hidden operational controls
7.2 Table UX
Good Practices
- Sorting
- Filtering
- Column resizing
- Pagination or virtualization
- Keyboard navigation
- Export functionality
- Persistent user preferences
Bad Practices
- Non-sortable enterprise tables
- Horizontal scrolling nightmares
- Missing filtering
7.3 Power User Workflows
Good Practices
- Keyboard shortcuts
- Bulk actions
- Batch editing
- Command palettes
- State persistence
- Fast navigation
Bad Practices
- Forced wizard workflows
- Excessive confirmations
- Repetitive manual work
8. Mobile UX
8.1 Touch Design
Good Practices
- Large touch targets
- Thumb-friendly layouts
- Avoid hover dependencies
- Mobile-friendly spacing
Bad Practices
- Tiny controls
- Hover-only interactions
- Precision-dependent gestures
8.2 Mobile Forms
Good Practices
- Mobile keyboard optimization
- Minimal typing
- Autofill support
- Step-by-step flows when necessary
Bad Practices
- Long complex forms
- Tiny input fields
- Excessive required typing
9. Cognitive Psychology and UX
9.1 Hick’s Law
More choices increase decision time.
Applications
- Reduce unnecessary options
- Group related actions
- Prioritize primary actions
9.2 Fitts’s Law
Closer and larger targets are easier to use.
Applications
- Large primary buttons
- Edge/corner placement for important actions