49 lines
4.1 KiB
Markdown
49 lines
4.1 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 (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 `<label>`-Tags für Inputs. Akkordeons mit `aria-expanded` und `aria-controls`. Dekorative Icons mit `aria-hidden="true"`.
|
||
|
||
## 2. Rechtliche Sicherheit (100% DSGVO-Konformität)
|
||
- **Zero-Third-Party-Requests:** Keine externen CDNs (Fonts, Skripte, Icons lokal ausliefern).
|
||
- **Keine Cookies/Opt-Ins:** Ausschließlich funktionale Daten (wie Darkmode im LocalStorage) verwenden.
|
||
- **Formularverarbeitung:** DSGVO-konforme Übermittlung ohne ungefragte US-Drittdienste.
|
||
|
||
## 3. Design & Ästhetik ("Liquid Glass" & Clean Look)
|
||
- **Lesbarkeit:** Aurora-Glows dezent halten (z-0, Opacity max. 10-20%) und Text lesbar halten.
|
||
- **Kanten-Effekt:** Hauchdünne Borders (`border-[0.5px]` oder `border`) mit semi-transparenten Farben für edle Lichtkanten.
|
||
- **Theme-Transition:** Weiche Farbübergänge (`transition-colors duration-300`) auf großen Flächen zur Vermeidung harter Blitze.
|
||
|
||
## 4. Performance & Astro Hybrid-Architektur
|
||
- **Kein FOUC:** Darkmode-Erkennungsskripte blockierend im `<head>` als `is:inline` laden.
|
||
- **Image-Optimierung:** Astros `<Image/>` Komponente mit WebP/AVIF und festen Dimensionen verwenden, um CLS zu verhindern.
|
||
- **Teilhydrierung:** Clientseitiges JS minimieren. Animationen über CSS-Keyframes und nativen IntersectionObserver steuern.
|
||
|
||
## 5. Conversion & Psychologie (KMU Zielgruppe)
|
||
- **Verständlichkeit:** Kundensprache statt Tech-Sprech.
|
||
- **Sorgenfrei-Versprechen:** FAQ zu Änderungen, kostenlosem Domain-Umzug und Festpreisgarantie direkt positionieren.
|