Kleine UI-Design-Tipps mit großer Wirkung

• UI-Design lässt sich schneller und vorhersehbarer verbessern, wenn Entscheidungen zu Layout, Abständen, Schrift und Farben nicht nach künstlerischem Bauchgefühl, sondern anhand konsistenter logischer Regeln getroffen werden
• Grundlegend ist, zusammengehörige Elemente durch Weißraum zu gruppieren, für gleiche Funktionen gleiche Formen zu verwenden und durch Größe, Farbe, Kontrast und Position eine klare visuelle Hierarchie zu schaffen
• Dekorative Farben und unnötige Rahmen sollten reduziert werden; Farbe sollte gezielt eingesetzt werden, um etwa bei Links und Buttons Interaktivität zu vermitteln
• Nach WCAG 2.1 AA sollten UI-Elemente ein Kontrastverhältnis von mindestens 3:1 und kleiner Text mindestens 4,5:1 erreichen; zusätzlich zu Farbe sollten Hinweise wie Unterstreichungen oder Formen angeboten werden
• Wer eine Sans-Serif-Schrift mit regular/bold-Schnitten, großer x-height, Sentence Case, linksbündiger Ausrichtung und einer Zeilenhöhe von mindestens 1,5 verwendet, verbessert Lesbarkeit und Konsistenz

---

UI mit logischen Regeln verbessern

• UI-Design muss neben Layout, Abständen, Typografie und Farben auch Usability, Barrierefreiheit und Psychologie berücksichtigen, wodurch Entscheidungen schnell komplex werden können
• Statt Elemente intuitiv hin- und herzuschieben, bis es gut aussieht, ermöglichen wiederverwendbare Regelsysteme schnellere und besser begründete Entscheidungen
• Als Beispiel dient eine Detailansicht für eine Kurzzeitmietunterkunft; der anfangs komplexe und schwer nutzbare Screen wird Schritt für Schritt überarbeitet
• Ziel ist nicht, Marken-Dekor hinzuzufügen, sondern zuerst Intuitivität, Barrierefreiheit und grundlegende visuelle Ausarbeitung sicherzustellen

1. Zusammengehörige Elemente mit Weißraum gruppieren

• Wenn Informationen in kleine zusammengehörige Gruppen unterteilt werden, lässt sich die Bildschirmstruktur schneller verstehen und merken
• Es gibt vier Möglichkeiten, Elemente zu gruppieren
  • Platzierung im selben Container
  • Verringerung des Abstands zwischen zusammengehörigen Elementen
  • Darstellung mit ähnlicher Form
  • Ausrichtung entlang einer durchgehenden Linie
• Container sind der stärkste Hinweis auf Gruppierung, können aber unnötige Dekoration auf dem Screen erzeugen
• Weißraum und Ausrichtung sind subtilere Methoden, mit denen der Screen zugleich einfach bleibt
• Im Beispiel werden die Abstände zwischen Inhalten vergrößert, um unterschiedliche Informationsgruppen klar voneinander zu trennen

2. Konsistente Formen und Verhaltensweisen beibehalten

• Ähnliche Elemente sollten nicht nur innerhalb des Produkts, sondern auch im Vergleich zu vertrauten anderen Produkten ähnlich aussehen und funktionieren
• Vorhersehbares Verhalten reduziert die Notwendigkeit, die Bedienung jedes Mal neu zu lernen, und senkt die Fehlerwahrscheinlichkeit
• Die Icons im Beispiel mischten gefüllte Formen und Outline-Formen, sodass gefüllte Icons fälschlich als ausgewählt verstanden werden konnten
  • Alle Icons werden mit abgerundeten Ecken und einer 2-pt-Outline vereinheitlicht, um ihr visuelles Gewicht anzugleichen
  • Für Nutzer, die die Bedeutung nur anhand der Icons schwer verstehen, sowie für Screenreader-Nutzer werden Textlabels hinzugefügt
• Da erwartet wird, dass gleich aussehende Elemente gleich funktionieren, gilt: Wenn sich die Funktion unterscheidet, muss sich auch die visuelle Behandlung unterscheiden
• Im Beispiel sah ein nicht interaktiver Icon-Container wie der Button Book now aus, daher wurden die blaue Farbe und der Button-Stil entfernt

3. Eine klare visuelle Hierarchie schaffen

• Nicht alle Informationen sind gleich wichtig; wichtigere Elemente sollten daher auffälliger dargestellt werden
• Durch Anpassung von Größe, Farbe, Kontrast, Abstand, Position und Tiefe können Nutzer den Screen schnell überfliegen und relevante Bereiche finden
• Der Squint Test prüft, ob wichtige Elemente und der Zweck des Screens auch dann noch erkennbar sind, wenn man die Augen zusammenkneift oder den Screen unscharf betrachtet
• Im Ausgangsscreen konkurrierten mehrere Elemente mit ähnlicher Stärke, während der primäre Call-to-Action unten links kaum auffiel
• Der Hauptbutton erhält eine kontrastreiche Hintergrundfarbe und eine fette Schrift und wird so zum auffälligsten Element auf dem Screen
• Der Beschreibungstext war im Verhältnis zu seiner Wichtigkeit zu stark betont; später wird seine Hierarchie durch Farbe und Typografie reduziert

4. Unnötige Dekoration entfernen

• Linien, Farben, Hintergründe und Animationen, die keine Bedeutung vermitteln oder Elemente gruppieren, können ablenken und die kognitive Belastung erhöhen
• Der weiße Rand und die Rahmen um das Beispielbild waren für die Informationsvermittlung nicht nötig und werden entfernt
• Weniger dekorative Elemente machen den Screen einfacher und erleichtern die Konzentration auf Kerninformationen und Aktionen

5. Farben klare Rollen zuweisen

• Farbe sollte sicherheitshalber begrenzt und eher zur Bedeutungsvermittlung als zur Dekoration eingesetzt werden
• Ein wirksamer Ansatz ist, in Schwarz-Weiß zu beginnen und Farbe nur dort hinzuzufügen, wo sie nötig ist
• Wenn die Markenfarbe auf interaktive Elemente wie Textlinks und Buttons angewendet wird, lässt sich leichter vermitteln, was anklickbar ist
• Bei Elementen wie Cards, deren Form selbst Interaktivität signalisiert, muss nicht zwingend Farbe hinzugefügt werden
• Im Beispiel wirkten der blaue Titel und die Sternebewertung anklickbar, obwohl sie nicht interaktiv waren; daher wird die Farbe entfernt
• Dadurch wird die Unterscheidung zwischen interaktiven Elementen und normalen Informationen klarer

6. Für UI-Elemente ein Kontrastverhältnis von mindestens 3:1 anwenden

• Das Kontrastverhältnis beschreibt den wahrgenommenen Helligkeitsunterschied zweier Farben als Verhältnis von 1:1 bis 21:1
• Nach WCAG 2.1 AA benötigen UI-Elemente wie Formularfelder, Icons und Buttons mindestens ein Kontrastverhältnis von 3:1
• Der Pfeil über dem Foto im Beispiel konnte je nach Hintergrundbild schlecht sichtbar sein
  • Ein graues Icon und ein opaker weißer Hintergrund stellen den Kontrast unabhängig vom Foto sicher
  • Durch den zusätzlichen Hintergrund-Container wird auch die antippbare Fläche größer und klarer
• Auch der anfängliche Hauptbutton hatte zu wenig Kontrast zum Hintergrund, wodurch Nutzer mit Sehbeeinträchtigung die Button-Form schwer erkennen konnten
• Das Kontrastverhältnis des Buttons wird auf mindestens 3:1 erhöht, was Barrierefreiheit und visuelle Hierarchie zugleich verbessert
• Das Kontrastverhältnis lässt sich mit dem WebAIM Contrast Checker oder dem Contrast Figma plugin messen

7. Ausreichenden Kontrast für Text anwenden

• WCAG 2.1 AA fordert je nach Textgröße und Schriftstärke unterschiedliche Kontrastverhältnisse
  • Kleiner Text bis 18 px benötigt mindestens 4,5:1
  • Fetter Text über 18 px oder regular Text über 24 px benötigt mindestens 3:1
• Die Anzeige der Fotoanzahl hatte zu wenig Kontrast zum Hintergrund; daher wird die Deckkraft des grauen Containers erhöht und ein Textschatten hinzugefügt
• Der Standorttext war zu hell und die Schrift zu dünn, daher wird er auf ein dunkleres Grau geändert
• Selbst wenn die Kontrastanforderungen erfüllt sind, können sehr dünne Schriften schwer lesbar sein; auch die Schriftstärke muss daher separat angepasst werden

8. Zustände nicht nur durch Farbe unterscheiden

• Nutzer mit Farbsehschwäche können bestimmte Farbkombinationen nur schwer unterscheiden oder Farbe selbst nicht wahrnehmen
• Bedeutung, Zustand oder Interaktivität dürfen nicht ausschließlich über Farbe vermittelt werden
• Der Link Reviews im Beispiel war ohne Blau nicht von normalem Text zu unterscheiden
• Durch Hinzufügen einer Unterstreichung wird er auch dann als Link erkennbar, wenn Farbe nicht wahrgenommen wird

9. Eine Sans-Serif-Schrift verwenden

• Eine Schriftfamilie (typeface) ist eine Sammlung von Schriften mit gemeinsamem Stil, etwa Helvetica; Varianten wie bold und regular in verschiedenen Größen und Stärken sind einzelne Fonts
• In Interfaces ist es in der Regel sicher, eine einzige Sans-Serif-Schrift zu verwenden, die gut lesbar, neutral und schlicht ist
• Die dekorative Serifenschrift des Titels im Beispiel war schwer lesbar und passte möglicherweise nicht zu den Unterkunftsfotos oder zur Stimmung des Dienstes
• Durch Vereinheitlichung mit derselben Sans-Serif-Schrift wie im Fließtext steigen Usability und visuelle Konsistenz

10. Eine Schrift mit großer x-height wählen

• Schriften mit großer x-height, also hoher Kleinbuchstabenhöhe, und ausreichend Zeichenabstand sind oft auch in kleinen Größen gut lesbar
• League Spartan im Beispiel hatte eine vergleichsweise niedrige x-height
• Der Wechsel zu Inter mit größerer x-height verbessert die Lesbarkeit kleiner Fließtexte

11. Großschreibung begrenzen

• Menschen neigen dazu, schnell zu lesen, indem sie die Form ganzer Wörter statt einzelner Buchstaben erkennen
• Wörter in Versalien haben alle eine ähnliche rechteckige Form, sodass einzelne Buchstaben geprüft werden müssen und das Lesen schwerer wird
• Die Standortangabe wird von kompletter Großschreibung auf sentence case geändert, sodass nur das erste Wort und Eigennamen großgeschrieben werden
• Vollständige Großschreibung sollte außer für kurze Ausdrücke, die zwingend betont werden müssen, nur begrenzt eingesetzt werden

12. Nur regular und bold verwenden

• Auch wenn eine Schrift mehrere Stärken bietet, erzeugt die Nutzung aller Stärken visuelles Rauschen und erschwert konsistentes Management
• Ein Designsystem sollte möglichst einfach bleiben und sich auf regular und bold stützen
  • Für Titel und hervorgehobenen Text wird bold verwendet
  • Für kleinen normalen Text wird regular verwendet
  • Wenn bold zu schwer wirkt, kann semi-bold als Ersatz dienen
  • Sehr dünne oder sehr fette Stärken sollten nicht für kleinen Text, sondern nur eingeschränkt für große Titel genutzt werden
• Der Standorttext im Beispiel war in light gesetzt und konnte auch nach Erhöhung des Kontrasts schwer lesbar sein
• Durch den Wechsel zu regular steigt die Lesbarkeit, und die Anzahl der verwendeten Schriftstärken sinkt

13. Reines Schwarz für Text vermeiden

• Reines Schwarz erzeugt auf weißem Hintergrund einen sehr hohen Kontrast, der bei längerem Lesen die Augen ermüden kann
• Auf weißem Hintergrund ist dunkles Grau statt reinem Schwarz die sichere Wahl
• Mehrere schwarze Elemente im Beispiel werden in dunkles Grau geändert, um die Lesbarkeit anzupassen
• Auf die im Verhältnis zu ihrer Wichtigkeit zu stark auffallende Unterkunftsbeschreibung wird ein helleres Grau angewendet, um ihre visuelle Hierarchie zu senken

14. Längeren Text linksbündig ausrichten

• Englisch wird von links nach rechts gelesen, und Nutzer überfliegen Screens tendenziell in F-Form; daher ist linksbündige Ausrichtung am stabilsten
• Titel oder kurze Sätze lassen sich auch zentriert schnell lesen
• Wird langer Fließtext zentriert, unterscheidet sich der Startpunkt jeder Zeile, wodurch die nächste Zeile schwerer zu finden ist
• Blocksatz und zentrierte Ausrichtung können das Lesen längerer Texte besonders für Nutzer mit kognitiven Beeinträchtigungen erschweren
• Die Unterkunftsbeschreibung im Beispiel wird von zentriert auf linksbündig geändert, wodurch auch Konsistenz mit dem darüberliegenden Text entsteht

15. Zeilenhöhe im Fließtext auf mindestens 1,5 setzen

• Die Zeilenhöhe ist der vertikale Abstand zwischen zwei Textzeilen
• Ein angemessener Zeilenabstand hilft, dieselbe Zeile nicht erneut zu lesen, und macht lange Texte angenehmer lesbar
• Fließtext benötigt eine Zeilenhöhe von mindestens **1,5 (150 %) **; üblich ist ein Bereich von 1,5 bis 2
• Im Beispiel wird die Zeilenhöhe von 1 (100 %) auf 1,5 (150 %) erhöht, um die Lesbarkeit zu verbessern

Ergebnis der Überarbeitung und anwendbare Prinzipien

• Durch die schrittweise Anwendung von 16 Regeln wurde der zuvor komplexe Screen in eine einfachere, besser lesbare und barrierefreiere Form gebracht
• Dekoration passend zur Markenpersönlichkeit kann später ergänzt werden; zuerst müssen Grundlagen wie Informationsstruktur, Unterscheidung interaktiver Elemente, Kontrastverhältnisse und Typografie korrigiert werden
• Wer statt subjektivem Geschmack objektive Regeln nutzt, kann intuitive und barrierefreie UIs schneller gestalten
• Wiederholt angewendete Regeln werden nach und nach zur natürlichen Grundlage des Design-Workflows; darauf aufbauend lassen sich neue Ausdrucksformen und Dekorationen ausprobieren