1. Klarheit schlägt Kreativität
Ein Button, der wie ein Button aussieht, konvertiert besser als ein „kreativer" Hover-Effekt mit Glassmorphism und Gradient-Border. Bei jedem A/B-Test der letzten Jahre gewinnt der konventionellere Button — meist mit einfachem Solid-Background, klarer Farbe, eindeutigem Label.
Wenn deine UI so „originell" ist, dass Nutzer überlegen müssen, was sie tun sollen, hast du verloren. Originalität gehört in die Bildsprache, das Branding, die Typografie — nicht in die Interaktionspatterns.
2. Mobile-First ist kein Slogan
Bei den meisten KMU-Websites kommt heute mehr als die Hälfte des Traffics mobil — oft deutlich mehr. Wenn dein Design erst auf 1440 px „stimmt" und dann mobil zusammengequetscht wird, baust du am realen Nutzer vorbei. Plane Buttons mit mindestens 44 × 44 px Touch-Target (Apple Human Interface Guidelines), Schriftgrößen ab 16 px Body-Text, ausreichend Abstand zwischen Klickbereichen.
3. Ladezeit ist Conversion
Jede zusätzliche Sekunde Ladezeit kostet messbar Conversions. Als Richtwerte aus Googles Core Web Vitals: LCP unter 2,5 Sekunden (Largest Contentful Paint) und INP unter 200 ms (Interaction to Next Paint). Bilder optimieren (WebP, AVIF), Schriften self-hosted, kein 200-KB-CSS-Framework für eine Landingpage.
Unter 3 Sekunden bis zur sichtbaren Hauptinhalt-Auslieferung ist die Schwelle, unterhalb derer Mobile-Nutzer in der Regel dranbleiben. Lädt deine Seite spürbar langsamer, steigt die Absprungrate. Mobile-Pagespeed gehört zu den zentralen Conversion-Faktoren.
4. Whitespace ist nicht Verschwendung
Anfänger und ungeduldige Kunden wollen „mehr aufs Bild packen". Erfahrene Designer wissen: Whitespace ist das Werkzeug, das deinem Inhalt Bedeutung gibt. Ein Logo auf weißer Fläche wirkt premium. Drei Logos plus Stockfoto plus CTA plus Hintergrundtextur wirken billig.
5. Microcopy ist der unterschätzte Hebel
„Submit" vs. „Anfrage senden" vs. „Briefing absenden". Drei Wörter, drei Conversion-Raten. Schreibe deine Buttons, Form-Labels, Error-Messages und leeren Zustände — diese kleinen Texte werden auch Microcopy genannt — wie Texte. Nicht wie Code.
Beispiel: Statt „Bitte E-Mail eingeben" → „An welche Adresse dürfen wir antworten?". Statt „Pflichtfeld" → „Brauchen wir noch".
6. Form-Felder als Konversation
Lange Formulare killen Conversion. Wenn du 12 Felder brauchst, teile sie auf 3 Schritte mit Progress-Indicator. Frag nach dem Namen erst, wenn die Beziehung etabliert ist — nicht als erstes Feld. Mache Tab-Reihenfolge logisch, gib Default-Werte vor wo möglich.
7. Hover ist nicht für alle
Auf Touch-Geräten gibt es kein Hover. Wenn dein Menü nur per Hover öffnet oder ein wichtiger Tooltip-Inhalt nur beim Drüberfahren sichtbar wird, schließt du Mobile-Nutzer vom Zugang aus. Hover ist „nice to have" — nicht „mission critical".
8. Konsistenz vor Variety
Lieber drei Button-Stile, die überall gleich aussehen, als zehn, die kontextuell variieren. Deine Nutzer lernen ein einziges Pattern und können es wiedererkennen. Genau dafür sind Design-Systeme da: Komponenten, die wiederverwendet werden, nicht jedes Mal neu erfunden.
9. Fehler-States nicht vergessen
Was passiert, wenn das Formular nicht abgeschickt werden kann? Was, wenn die Suchergebnisse leer sind? Was, wenn der Server gerade down ist? Diese „Edge Cases" sind oft die Momente, in denen Nutzer abspringen — gerade weil sie schlecht designed sind. Eine charmante leere Suche („Wir haben gerade nichts dazu — willst du stattdessen X probieren?") rettet die Session.
10. Test mit echten Menschen
Du bist nicht dein Nutzer. Niemand in deinem Team ist dein Nutzer. Setze fünf echte Menschen vor deine Website, lass sie eine Aufgabe lösen und schweige. Jakob Nielsens bekannte Faustregel besagt: fünf Test-User decken den Großteil aller groben Usability-Probleme auf — die du aus dem Bauch heraus nicht gesehen hättest.
UX/UI ist 80 % Empathie und 20 % Ausführung. Die Tools sind beliebig austauschbar — Figma, Sketch, Penpot — die Empathie nicht.
Fazit
Diese zehn Regeln sind keine Geheimnisse. Sie stehen in jedem Standardwerk. Trotzdem werden sie in 90 % der Websites verletzt. Wenn du nur drei davon konsequent umsetzt — Klarheit, Mobile-First, Ladezeit — bist du schon vor dem meisten Mitbewerb.