# 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