18 lines
1.6 KiB
Markdown
18 lines
1.6 KiB
Markdown
# UI/UX Best Practices
|
||
|
||
## UI/UX Dos
|
||
- **Prioritize Accessibility:** Ensure text has a high contrast ratio and include alternative text for all images.
|
||
- **Maintain Consistency:** Use uniform typography, spacing systems (e.g., 8-pixel grids), and color palettes across all pages to reduce user cognitive load.
|
||
- **Design Clear Visual Hierarchy:** Use size, weight, and strategic whitespace to make the primary action (CTA) stand out clearly.
|
||
- **Implement Single-Column Forms:** Keep form fields stacked in a single column for an easier, seamless input flow.
|
||
- **Optimize for Touch:** Ensure all buttons and clickable elements have a minimum hit target of 44 × 44 pixels so they are easy to tap on mobile.
|
||
|
||
## UI/UX Don'ts
|
||
- **Don't Let Aesthetics Compromise Usability:** Avoid choosing fancy fonts, hidden navigation menus, or complex animations if they make it difficult for users to find information.
|
||
- **Don't Use Color Alone to Convey Meaning:** Always pair colors with labels or icons (e.g., in error states) to accommodate color-blind users.
|
||
- **Don't Auto-Play Videos with Sound:** This is highly disruptive; give users full control over media.
|
||
- **Don't Overcrowd the Interface:** Over-emphasizing every element dilutes the page's purpose. Leave ample whitespace around sections and text.
|
||
- **Don't Open Internal Links in New Tabs:** Let users control their own browsing journey instead of hijacking their back button.
|
||
- **Don't Use Text Gradients:** Avoid using gradient colors on text elements to maintain maximum readability, high contrast, and a clean, non-AI-generated look.
|
||
|