chore: format
📊 Benchmark the Runtime / benchmark (push) Successful in 1m21s
🚀 Lint & Test & Deploy / quality (push) Failing after 54s
🚀 Lint & Test & Deploy / test-unit (push) Successful in 30s
🚀 Lint & Test & Deploy / test-e2e (push) Successful in 1m52s
🚀 Lint & Test & Deploy / deploy (push) Has been skipped
📊 Benchmark the Runtime / benchmark (push) Successful in 1m21s
🚀 Lint & Test & Deploy / quality (push) Failing after 54s
🚀 Lint & Test & Deploy / test-unit (push) Successful in 30s
🚀 Lint & Test & Deploy / test-e2e (push) Successful in 1m52s
🚀 Lint & Test & Deploy / deploy (push) Has been skipped
This commit is contained in:
+250
-250
@@ -12,27 +12,27 @@ This document consolidates many of the most important practical UX principles fo
|
||||
|
||||
Users should always understand:
|
||||
|
||||
* What the system is doing
|
||||
* Whether an action succeeded
|
||||
* Whether work is still in progress
|
||||
* Whether an error occurred
|
||||
- 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
|
||||
- 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
|
||||
- Buttons with no feedback after clicking
|
||||
- Infinite spinners without explanation
|
||||
- Hidden background operations
|
||||
- Saving without visible confirmation
|
||||
|
||||
---
|
||||
|
||||
@@ -44,19 +44,19 @@ 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
|
||||
- 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
|
||||
- Different button styles for identical actions
|
||||
- Inconsistent navigation behavior
|
||||
- Custom controls that ignore platform conventions
|
||||
- Unexpected modal behavior
|
||||
|
||||
---
|
||||
|
||||
@@ -68,19 +68,19 @@ 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
|
||||
- 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
|
||||
- Placeholder-only labels
|
||||
- Hidden functionality
|
||||
- Requiring users to remember previous state
|
||||
- Removing useful context during workflows
|
||||
|
||||
---
|
||||
|
||||
@@ -90,19 +90,19 @@ 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
|
||||
- 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
|
||||
- Destructive actions near common actions
|
||||
- Easy accidental deletion
|
||||
- Poor validation timing
|
||||
- Irreversible operations without recovery
|
||||
|
||||
---
|
||||
|
||||
@@ -116,11 +116,11 @@ Forms are one of the most important and failure-prone areas in web applications.
|
||||
|
||||
### Good Practices
|
||||
|
||||
* Autofocus the primary field when appropriate
|
||||
* Preserve focus during rerenders
|
||||
* Preserve cursor position
|
||||
* Support keyboard-first workflows
|
||||
* Use logical tab ordering
|
||||
- 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
|
||||
|
||||
@@ -128,18 +128,18 @@ 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
|
||||
- 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
|
||||
- Long textareas
|
||||
- Complex text editing
|
||||
- Fields users commonly partially edit
|
||||
- Rich text editing
|
||||
|
||||
### Principle
|
||||
|
||||
@@ -151,16 +151,16 @@ Only auto-select when full replacement is more likely than partial editing.
|
||||
|
||||
### Good Practices
|
||||
|
||||
* Always use visible labels
|
||||
* Use placeholders only as supplementary examples
|
||||
* Keep labels visible after typing
|
||||
* Associate labels correctly for accessibility
|
||||
- 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
|
||||
- Placeholder-only forms
|
||||
- Ambiguous labels
|
||||
- Labels that disappear during editing
|
||||
|
||||
---
|
||||
|
||||
@@ -176,18 +176,18 @@ Only auto-select when full replacement is more likely than partial editing.
|
||||
|
||||
### Good Practices
|
||||
|
||||
* Show errors near the relevant field
|
||||
* Explain how to fix issues
|
||||
* Preserve entered values after errors
|
||||
* Validate incrementally
|
||||
* Use clear language
|
||||
- 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
|
||||
- Generic “Invalid input” messages
|
||||
- Clearing form data after errors
|
||||
- Delayed validation surprises
|
||||
- Validation that interrupts typing
|
||||
|
||||
---
|
||||
|
||||
@@ -197,19 +197,19 @@ Only auto-select when full replacement is more likely than partial editing.
|
||||
|
||||
Use appropriate HTML input types:
|
||||
|
||||
* `email`
|
||||
* `tel`
|
||||
* `number`
|
||||
* `date`
|
||||
* `password`
|
||||
* `search`
|
||||
- `email`
|
||||
- `tel`
|
||||
- `number`
|
||||
- `date`
|
||||
- `password`
|
||||
- `search`
|
||||
|
||||
### Benefits
|
||||
|
||||
* Better mobile keyboards
|
||||
* Native validation
|
||||
* Improved accessibility
|
||||
* Better autofill support
|
||||
- Better mobile keyboards
|
||||
- Native validation
|
||||
- Improved accessibility
|
||||
- Better autofill support
|
||||
|
||||
---
|
||||
|
||||
@@ -217,18 +217,18 @@ Use appropriate HTML input types:
|
||||
|
||||
### Good Practices
|
||||
|
||||
* Enter submits forms when expected
|
||||
* Escape cancels dialogs
|
||||
* Show loading states during submission
|
||||
* Prevent duplicate submissions
|
||||
* Preserve draft state
|
||||
* Allow keyboard submission
|
||||
- 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
|
||||
- Disabled submit buttons without explanation
|
||||
- Hidden validation failures
|
||||
- Silent submission failures
|
||||
|
||||
---
|
||||
|
||||
@@ -236,16 +236,16 @@ Use appropriate HTML input types:
|
||||
|
||||
### Good Practices
|
||||
|
||||
* Use radio buttons for small option sets
|
||||
* Use searchable selects for large datasets
|
||||
* Prefer autocomplete for many options
|
||||
* Show selected state clearly
|
||||
- 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
|
||||
- Massive unsearchable dropdowns
|
||||
- Nested dropdown hierarchies
|
||||
- Multi-select controls without search
|
||||
|
||||
---
|
||||
|
||||
@@ -257,17 +257,17 @@ Use appropriate HTML input types:
|
||||
|
||||
Users should always know:
|
||||
|
||||
* Where they are
|
||||
* How they got there
|
||||
* What they can do next
|
||||
* How to go back
|
||||
- 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
|
||||
- Highlight active navigation
|
||||
- Use breadcrumbs when helpful
|
||||
- Use meaningful page titles
|
||||
- Preserve navigation consistency
|
||||
|
||||
---
|
||||
|
||||
@@ -275,16 +275,16 @@ Users should always know:
|
||||
|
||||
### Good Practices
|
||||
|
||||
* Keep hierarchy shallow
|
||||
* Group related actions
|
||||
* Use descriptive names
|
||||
* Keep primary actions stable
|
||||
- Keep hierarchy shallow
|
||||
- Group related actions
|
||||
- Use descriptive names
|
||||
- Keep primary actions stable
|
||||
|
||||
### Bad Practices
|
||||
|
||||
* Deep nesting
|
||||
* Ambiguous navigation labels
|
||||
* Constantly moving actions
|
||||
- Deep nesting
|
||||
- Ambiguous navigation labels
|
||||
- Constantly moving actions
|
||||
|
||||
---
|
||||
|
||||
@@ -292,16 +292,16 @@ Users should always know:
|
||||
|
||||
### Good Practices
|
||||
|
||||
* Use readable URLs
|
||||
* Make URLs shareable
|
||||
* Preserve app state in URLs when useful
|
||||
* Support browser history correctly
|
||||
- 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
|
||||
- Opaque generated URLs
|
||||
- Broken back button behavior
|
||||
- Losing state during navigation
|
||||
|
||||
---
|
||||
|
||||
@@ -313,16 +313,16 @@ Users should always know:
|
||||
|
||||
### Good Practices
|
||||
|
||||
* Large clickable areas
|
||||
* Adequate spacing between actions
|
||||
* Clear hover/focus states
|
||||
* Touch-friendly sizing
|
||||
- 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
|
||||
- Tiny clickable regions
|
||||
- Overlapping interactive elements
|
||||
- Hidden hit areas
|
||||
|
||||
---
|
||||
|
||||
@@ -332,18 +332,18 @@ Every interaction should produce feedback.
|
||||
|
||||
### Good Practices
|
||||
|
||||
* Hover states
|
||||
* Active states
|
||||
* Loading indicators
|
||||
* Success states
|
||||
* Error states
|
||||
* Optimistic updates when appropriate
|
||||
- Hover states
|
||||
- Active states
|
||||
- Loading indicators
|
||||
- Success states
|
||||
- Error states
|
||||
- Optimistic updates when appropriate
|
||||
|
||||
### Bad Practices
|
||||
|
||||
* Dead-feeling interfaces
|
||||
* Invisible processing
|
||||
* Delayed reactions
|
||||
- Dead-feeling interfaces
|
||||
- Invisible processing
|
||||
- Delayed reactions
|
||||
|
||||
---
|
||||
|
||||
@@ -351,16 +351,16 @@ Every interaction should produce feedback.
|
||||
|
||||
### Good Practices
|
||||
|
||||
* Require confirmation for dangerous actions
|
||||
* Prefer undo systems
|
||||
* Visually distinguish destructive buttons
|
||||
* Separate destructive actions spatially
|
||||
- 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
|
||||
- Immediate irreversible deletion
|
||||
- Dangerous actions near common actions
|
||||
- Ambiguous destructive wording
|
||||
|
||||
---
|
||||
|
||||
@@ -368,17 +368,17 @@ Every interaction should produce feedback.
|
||||
|
||||
### Good Practices
|
||||
|
||||
* Trap keyboard focus
|
||||
* Support Escape to close
|
||||
* Restore focus after closing
|
||||
* Prevent background interaction
|
||||
* Keep modal purpose focused
|
||||
- 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
|
||||
- Nested modals
|
||||
- Full workflows inside modals
|
||||
- Losing unsaved work accidentally
|
||||
|
||||
---
|
||||
|
||||
@@ -394,17 +394,17 @@ Users interpret slowness as unreliability.
|
||||
|
||||
### Good Practices
|
||||
|
||||
* Show immediate visual response
|
||||
* Use optimistic UI updates
|
||||
* Preload likely next content
|
||||
* Stream content progressively
|
||||
* Use skeleton loaders
|
||||
- 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
|
||||
- Blank screens during loading
|
||||
- Long blocking operations
|
||||
- Frozen interfaces
|
||||
|
||||
---
|
||||
|
||||
@@ -412,16 +412,16 @@ Users interpret slowness as unreliability.
|
||||
|
||||
### Good Practices
|
||||
|
||||
* Prevent layout shift
|
||||
* Reserve image dimensions
|
||||
* Avoid moving buttons during loading
|
||||
* Keep skeletons aligned with final layout
|
||||
- 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
|
||||
- Jumping content
|
||||
- Shifting controls
|
||||
- Reflow-heavy rendering
|
||||
|
||||
---
|
||||
|
||||
@@ -429,16 +429,16 @@ Users interpret slowness as unreliability.
|
||||
|
||||
### Good Practices
|
||||
|
||||
* Keep UI interactive during async operations
|
||||
* Avoid blocking the main thread
|
||||
* Debounce expensive operations
|
||||
* Virtualize large lists
|
||||
- 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
|
||||
- UI freezes
|
||||
- Excessive rerenders
|
||||
- Laggy typing experiences
|
||||
|
||||
---
|
||||
|
||||
@@ -452,16 +452,16 @@ Accessibility improves usability for everyone.
|
||||
|
||||
### Good Practices
|
||||
|
||||
* Full keyboard navigation
|
||||
* Visible focus indicators
|
||||
* Logical tab order
|
||||
* Keyboard shortcuts for power users
|
||||
- Full keyboard navigation
|
||||
- Visible focus indicators
|
||||
- Logical tab order
|
||||
- Keyboard shortcuts for power users
|
||||
|
||||
### Bad Practices
|
||||
|
||||
* Mouse-only workflows
|
||||
* Hidden focus state
|
||||
* Keyboard traps
|
||||
- Mouse-only workflows
|
||||
- Hidden focus state
|
||||
- Keyboard traps
|
||||
|
||||
---
|
||||
|
||||
@@ -469,16 +469,16 @@ Accessibility improves usability for everyone.
|
||||
|
||||
### Good Practices
|
||||
|
||||
* Use proper semantic elements
|
||||
* Use buttons for actions
|
||||
* Use links for navigation
|
||||
* Use headings correctly
|
||||
- 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
|
||||
- Clickable divs without accessibility support
|
||||
- Fake buttons
|
||||
- Missing semantic structure
|
||||
|
||||
---
|
||||
|
||||
@@ -486,16 +486,16 @@ Accessibility improves usability for everyone.
|
||||
|
||||
### Good Practices
|
||||
|
||||
* Sufficient color contrast
|
||||
* Support reduced motion
|
||||
* Avoid color-only communication
|
||||
* Use scalable typography
|
||||
- Sufficient color contrast
|
||||
- Support reduced motion
|
||||
- Avoid color-only communication
|
||||
- Use scalable typography
|
||||
|
||||
### Bad Practices
|
||||
|
||||
* Tiny text
|
||||
* Low contrast interfaces
|
||||
* Flashing animations
|
||||
- Tiny text
|
||||
- Low contrast interfaces
|
||||
- Flashing animations
|
||||
|
||||
---
|
||||
|
||||
@@ -503,16 +503,16 @@ Accessibility improves usability for everyone.
|
||||
|
||||
### Good Practices
|
||||
|
||||
* Proper labels
|
||||
* Meaningful alt text
|
||||
* ARIA only when necessary
|
||||
* Correct live regions for updates
|
||||
- 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
|
||||
- Unlabeled controls
|
||||
- Excessive ARIA misuse
|
||||
- Non-announced state changes
|
||||
|
||||
---
|
||||
|
||||
@@ -528,17 +528,17 @@ Power users often prioritize efficiency over visual minimalism.
|
||||
|
||||
### Good Practices
|
||||
|
||||
* Efficient data density
|
||||
* Resizable tables
|
||||
* Sticky headers
|
||||
* Multi-column layouts
|
||||
* High information throughput
|
||||
- Efficient data density
|
||||
- Resizable tables
|
||||
- Sticky headers
|
||||
- Multi-column layouts
|
||||
- High information throughput
|
||||
|
||||
### Bad Practices
|
||||
|
||||
* Excessive whitespace
|
||||
* Oversimplified dashboards
|
||||
* Hidden operational controls
|
||||
- Excessive whitespace
|
||||
- Oversimplified dashboards
|
||||
- Hidden operational controls
|
||||
|
||||
---
|
||||
|
||||
@@ -546,19 +546,19 @@ Power users often prioritize efficiency over visual minimalism.
|
||||
|
||||
### Good Practices
|
||||
|
||||
* Sorting
|
||||
* Filtering
|
||||
* Column resizing
|
||||
* Pagination or virtualization
|
||||
* Keyboard navigation
|
||||
* Export functionality
|
||||
* Persistent user preferences
|
||||
- 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
|
||||
- Non-sortable enterprise tables
|
||||
- Horizontal scrolling nightmares
|
||||
- Missing filtering
|
||||
|
||||
---
|
||||
|
||||
@@ -566,18 +566,18 @@ Power users often prioritize efficiency over visual minimalism.
|
||||
|
||||
### Good Practices
|
||||
|
||||
* Keyboard shortcuts
|
||||
* Bulk actions
|
||||
* Batch editing
|
||||
* Command palettes
|
||||
* State persistence
|
||||
* Fast navigation
|
||||
- Keyboard shortcuts
|
||||
- Bulk actions
|
||||
- Batch editing
|
||||
- Command palettes
|
||||
- State persistence
|
||||
- Fast navigation
|
||||
|
||||
### Bad Practices
|
||||
|
||||
* Forced wizard workflows
|
||||
* Excessive confirmations
|
||||
* Repetitive manual work
|
||||
- Forced wizard workflows
|
||||
- Excessive confirmations
|
||||
- Repetitive manual work
|
||||
|
||||
---
|
||||
|
||||
@@ -589,16 +589,16 @@ Power users often prioritize efficiency over visual minimalism.
|
||||
|
||||
### Good Practices
|
||||
|
||||
* Large touch targets
|
||||
* Thumb-friendly layouts
|
||||
* Avoid hover dependencies
|
||||
* Mobile-friendly spacing
|
||||
- Large touch targets
|
||||
- Thumb-friendly layouts
|
||||
- Avoid hover dependencies
|
||||
- Mobile-friendly spacing
|
||||
|
||||
### Bad Practices
|
||||
|
||||
* Tiny controls
|
||||
* Hover-only interactions
|
||||
* Precision-dependent gestures
|
||||
- Tiny controls
|
||||
- Hover-only interactions
|
||||
- Precision-dependent gestures
|
||||
|
||||
---
|
||||
|
||||
@@ -606,16 +606,16 @@ Power users often prioritize efficiency over visual minimalism.
|
||||
|
||||
### Good Practices
|
||||
|
||||
* Mobile keyboard optimization
|
||||
* Minimal typing
|
||||
* Autofill support
|
||||
* Step-by-step flows when necessary
|
||||
- Mobile keyboard optimization
|
||||
- Minimal typing
|
||||
- Autofill support
|
||||
- Step-by-step flows when necessary
|
||||
|
||||
### Bad Practices
|
||||
|
||||
* Long complex forms
|
||||
* Tiny input fields
|
||||
* Excessive required typing
|
||||
- Long complex forms
|
||||
- Tiny input fields
|
||||
- Excessive required typing
|
||||
|
||||
---
|
||||
|
||||
@@ -629,9 +629,9 @@ More choices increase decision time.
|
||||
|
||||
### Applications
|
||||
|
||||
* Reduce unnecessary options
|
||||
* Group related actions
|
||||
* Prioritize primary actions
|
||||
- Reduce unnecessary options
|
||||
- Group related actions
|
||||
- Prioritize primary actions
|
||||
|
||||
---
|
||||
|
||||
@@ -641,5 +641,5 @@ Closer and larger targets are easier to use.
|
||||
|
||||
### Applications
|
||||
|
||||
* Large primary buttons
|
||||
* Edge/corner placement for important actions
|
||||
- Large primary buttons
|
||||
- Edge/corner placement for important actions
|
||||
|
||||
Reference in New Issue
Block a user