# 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 (Fitts's Law):** Ensure all buttons and clickable elements have a minimum hit target of 44 × 44 pixels so they are easy to tap on mobile. - **Apply Hick's Law:** Limit user choices to prevent decision paralysis. Simplify navigation and form inputs. - **Chunk Information (Miller's Law):** Break down complex content into smaller, readable chunks (groups of 5-7 items max). - **Structure via Boundaries (Law of Common Region):** Group related content within clear visible containers (like cards or border divisions). - **Leverage F-Shaped Scanning:** Position critical branding and primary CTA paths at the top and left of layouts where human eyes naturally scan first. ## 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 (Whitespace mastery):** Over-emphasizing every element dilutes the page's purpose. Leave ample whitespace around sections and text to reduce cognitive load. - **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. - **Don't Violate Familiarity (Jakob's Law):** Adhere to common design patterns (e.g. logo top-left redirects home) so users do not have to relearn basic navigation. # Technische & Rechtliche Standards ## 1. Technische Barrierefreiheit (A11y) - **Touch-Targets:** Mindestens 44x44 CSS-Pixel für interaktive Elemente. - **Kontraste:** Text-Kontrast mind. 4,5:1. Bei Liquid Glass `backdrop-blur-xl` und deckende Hintergrund-Opacities sicherstellen. - **Tastatur-Navigation:** Sinnvolle `:focus-visible` Ringe für die Tab-Navigation nutzen. - **Screenreader:** Explizite `