646 lines
11 KiB
Markdown
646 lines
11 KiB
Markdown
# 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:
|
||
|
||
* `email`
|
||
* `tel`
|
||
* `number`
|
||
* `date`
|
||
* `password`
|
||
* `search`
|
||
|
||
### 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
|