UI Design Best Practices: Nutzerzentrierte Oberflächen richtig gestalten

Gutes UI Design zeigt sich nicht daran, wie beeindruckend eine Seite aussieht, sondern daran, wie schnell Besucher finden, was sie suchen. In diesem Leitfaden teile ich die Prinzipien, die ich seit 2012 in Kundenprojekten anwende: visuelle Hierarchie, Typografie, Farbkontrast, Weißraum, Konsistenz und Touch Targets. Zu jedem Punkt erfahren Sie, was Sie prüfen, warum es zählt und wie Sie es messen.

Was ist nutzerzentriertes UI Design?

UI Design ist die visuelle und strukturelle Gestaltung der Bildschirme, über die Menschen mit einer Website oder App interagieren. Nutzerzentriert bedeutet: Jede Entscheidung folgt aus der Aufgabe des Besuchers, also lesen, vergleichen, ein Formular ausfüllen oder kaufen, und nicht aus dem Geschmack des Designers. Schönheit ist dann eine Folge von Klarheit.

Zunächst eine klare Abgrenzung. UX, also die Nutzererfahrung, umfasst den Ablauf: Welche Schritte geht der Besucher, wo zögert er, was möchte er wissen? UI ist dagegen das Gesicht dieses Ablaufs auf dem Bildschirm. Die Größe einer Überschrift, die Farbe eines Buttons, der Abstand zwischen zwei Karten und die Position einer Fehlermeldung gehören zu dieser Ebene. Ein guter Ablauf kann deshalb an einer schwachen Oberfläche scheitern. Umgekehrt gilt das ebenso.

Typische UX Fehler, die Umsatz kosten, habe ich im Beitrag UX Fehler, die Umsatz kosten beschrieben. Hier geht es um die andere Seite. Statt Fehler aufzuzählen, zeige ich Ihnen, nach welchen Prinzipien Sie einen Bildschirm aufbauen und wie Sie ihn danach prüfen.

Kurz gesagt: Eine nutzerzentrierte Oberfläche zwingt niemanden zum Nachdenken über die Oberfläche selbst. Besucher müssen nicht raten, wohin sie klicken sollen. Der Bildschirm sagt es ihnen leise.

Warum kommen im UI Design Prinzipien vor der Ästhetik?

Visuelle Trends altern schnell, denn der Geschmack wandert ständig. Prinzipien bleiben dagegen über Jahre stabil. Deshalb beginne ich ein Projekt nie mit der Farbpalette, sondern mit der Aufgabe jedes Bildschirms. Soll eine Leistungsseite zum Angebotsformular führen, dann hilft jedes Element entweder dieser Aufgabe oder bremst sie.

Ein Muster sehe ich immer wieder. Ein Kunde zeigt mir eine Website, die ihm gefällt, und sagt: „So soll unsere auch aussehen.“ Allerdings hat diese Website eine andere Zielgruppe, andere Inhalte und ein anderes Ziel. Den Stil zu kopieren ist leicht. Die Entscheidungen dahinter lassen sich dagegen nicht kopieren. Am Ende steht dann ein hübscher Bildschirm, der nirgendwohin führt.

Prinzipien senken dieses Risiko, denn sie sind messbar. Ein Kontrastverhältnis ist eine Zahl. Ein Touch Target hat eine Größe in Pixeln. Die Zeilenlänge zählen Sie in Zeichen. Die Diskussion wechselt also von „Ich finde das schöner“ zu „Erfüllt dieser Bildschirm das Kriterium?“. Zudem senkt diese gemeinsame Sprache die Reibung zwischen Design und Entwicklung, gerade wenn Teams wachsen.

Trotzdem ist Ästhetik nicht egal. Ein gepflegter Auftritt, der zur Marke passt, schafft Vertrauen und beeinflusst, ob Besucher bleiben. Nur die Reihenfolge muss stimmen: erst Funktion, dann Form.

Wie bauen Sie eine klare visuelle Hierarchie auf?

Visuelle Hierarchie heißt, die Wichtigkeit von Elementen über Größe, Gewicht, Farbe, Position und Abstand zu zeigen. Besucher scannen, bevor sie lesen. Daher muss ein Bildschirm in der ersten Sekunde sagen: „Das ist am wichtigsten, danach kommt das.“

Ich beginne mit einer Frage. Wenn Besucher auf diesem Bildschirm nur eine Sache sähen, welche sollte es sein? Meist sind das die Hauptüberschrift und der primäre Button. Danach lege ich die zweite und dritte Ebene fest. Jede Ebene bekommt ein festes Bündel visueller Signale. Somit sehen Elemente derselben Ebene immer gleich aus.

• Größe: Große Elemente fallen zuerst auf. Wenn allerdings alles groß ist, sticht nichts hervor.
• Gewicht und Farbe: Fette Schrift und satte Farben ziehen den Blick an. Reservieren Sie Ihre Akzentfarbe deshalb für die Hauptaktion.
• Position: Bei Lesern, die von links nach rechts lesen, sind oben links und der obere Bildschirmbereich natürliche Startpunkte.
• Weißraum: Ein Element mit mehr Luft ringsum wirkt wichtiger.
• Nähe: Elemente, die nah beieinander stehen, nehmen Besucher als Gruppe wahr.

Ein schneller Test hilft: Machen Sie einen Screenshot, zeichnen Sie ihn weich und fragen Sie eine Kollegin, wohin sie zuerst geschaut hat. Ist die Antwort nicht Ihre Hauptaktion, dann bauen Sie die Hierarchie neu auf.

Welche Typografie Regeln entscheiden über die Lesbarkeit?

Typografie trägt den Großteil der Inhalte einer Website. Folglich gehören Schriftwahl und Textsatz zu den wirkungsvollsten Entscheidungen im UI Design. Ich achte dabei weniger auf Stil als auf drei Dinge: Größe, Zeilenlänge und Zeilenabstand.

Für Fließtext nutze ich 16 Pixel, die Standardgröße der Browser, als praktische Untergrenze. Kleiner zwingt Menschen auf dem Smartphone zum Zoomen. Für Überschriften setze ich eine feste Skala ein. Zum Beispiel ist jede Ebene etwa 1,25 Mal so groß wie die darunter. Dieses Verhältnis ist keine Regel, sondern eine Wahl für Konsistenz.

Zur Zeilenlänge empfiehlt WCAG im Erfolgskriterium 1.4.8 (Stufe AAA), dass Textblöcke nicht breiter als 80 Zeichen sind. Außerdem verlangt Kriterium 1.4.12, dass Inhalte funktionieren, wenn Nutzer die Zeilenhöhe auf mindestens das 1,5 fache der Schriftgröße erhöhen. Deshalb setze ich den Zeilenabstand im Fließtext von Anfang an zwischen 1,5 und 1,7.

• Verwenden Sie höchstens zwei Schriftfamilien: eine für Überschriften, eine für Fließtext.
• Vermeiden Sie lange Passagen in Großbuchstaben; bei kurzen Labels ist das unproblematisch.
• Halten Sie Absätze kurz und verzichten Sie auf Blocksatz, denn er erzeugt ungleichmäßige Wortabstände.
• Prüfen Sie, ob Ihre Schrift Umlaute und das ß sauber darstellt.

Wie leicht sich Ihr Text liest, prüfen Sie mit dem Tool Lesbarkeit prüfen.

Welches Kontrastverhältnis braucht gutes UI Design?

Das Erfolgskriterium 1.4.3 der WCAG 2.2 fordert auf Stufe AA ein Kontrastverhältnis von mindestens 4,5:1 zwischen normalem Text und Hintergrund. Für großen Text, also etwa 24 Pixel oder rund 18,5 Pixel fett, liegt die Schwelle bei 3:1. Die Details finden Sie in der W3C Erläuterung zum Mindestkontrast.

Auch für Elemente ohne Text gibt es eine Regel. Kriterium 1.4.11 erwartet mindestens 3:1 gegenüber angrenzenden Farben, und zwar bei bedeutungstragenden Teilen wie Rahmen von Eingabefeldern, Icons und Fokusanzeigen. Hellgraue Feldrahmen auf weißem Grund fallen bei diesem Test ständig durch.

Das häufigste Problem, das mir begegnet: Die Markenfarbe wandert unverändert auf den Button. Helles Orange mit weißer Schrift verfehlt die Marke von 4,5:1 zum Beispiel oft. Sie müssen die Marke dafür nicht ändern. Stattdessen definieren Sie für Buttons einen dunkleren Ton. So bleibt das Markengefühl erhalten, und der Text wird lesbar.

Das Tool HTML Farbcodes beschleunigt den Vergleich. Noch ein Hinweis: Vermitteln Sie Informationen nie allein über Farbe. Setzen Sie neben einen roten Fehlerrahmen immer einen Text oder ein Icon, weil farbenblinde Besucher den Unterschied sonst vielleicht nicht sehen.

Warum ist Weißraum im UI Design so wichtig?

Weißraum ist keine leere Fläche. Er ist eine unsichtbare Struktur, die Elemente gruppiert und trennt. Den Einwand „Hier ist es so leer, da muss noch etwas hin“ höre ich von Kunden am häufigsten. Dabei ist genau dieser Raum oft das, was die Seite atmen lässt.

Abstände steuere ich über eine Skala statt nach Gefühl. Meist nutze ich Vielfache von 4 oder 8 Pixeln: 4, 8, 16, 24, 32, 48 und 64. Design und Entwicklung sagen dann „hier 24“ statt „hier etwas mehr Luft“. Diese kleine Disziplin hält auch ein Projekt mit Hunderten Bildschirmen konsistent.

Hier greift zudem das Prinzip der Nähe. Der Abstand zwischen einer Überschrift und ihrem Absatz sollte kleiner sein als der Abstand zwischen diesem Absatz und der nächsten Überschrift. Sonst wissen Besucher nicht, zu welchem Text die Überschrift gehört. Dieselbe Regel gilt für Formularlabels: Ein Label steht nah an seinem Feld.

Auf dem Smartphone wird Weißraum somit noch wichtiger. Auf schmalem Bildschirm ist es verlockend, alles zusammenzuschieben. Ein gedrängter Bildschirm ist allerdings schwer lesbar und führt zu Fehltipps. Den mobilen Ansatz erkläre ich ausführlich im Beitrag Was ist Mobile First Design.

Was bringt Konsistenz Ihren Nutzern?

Konsistenz heißt: Elemente mit derselben Aufgabe sehen überall gleich aus und verhalten sich gleich. Eine der zehn Usability Heuristiken von Jakob Nielsen, „Konsistenz und Standards“, besagt, dass Nutzer sich nicht fragen sollten, ob verschiedene Wörter, Situationen oder Aktionen dasselbe bedeuten. Alle zehn Heuristiken lesen Sie auf der Website der Nielsen Norman Group.

Konsistenz hat zudem zwei Ebenen. Innere Konsistenz bedeutet, dass Ihre Website eine Sprache spricht: Der primäre Button hat auf jeder Seite dieselbe Farbe, denselben Radius und dieselbe Höhe. Äußere Konsistenz heißt, Muster zu übernehmen, die Menschen von anderen Websites kennen. Das Logo steht zum Beispiel oben links und führt zur Startseite, der Warenkorb sitzt oben rechts.

Um äußere Muster zu brechen, brauchen Sie einen sehr guten Grund. Das Menü an eine ungewohnte Stelle zu setzen, nur um originell zu wirken, erzeugt lediglich Lernaufwand. Zeigen Sie Kreativität also in Inhalten, Bildern und Erzählweise, nicht in der Navigation.

In der Praxis schützen Sie Konsistenz am besten, indem Sie Komponenten aus einer einzigen Quelle steuern. Eine Komponentenbibliothek in Figma ist dafür die Grundlage. Den Ablauf beschreibe ich im Beitrag Webdesign mit Figma Schritt für Schritt, daher wiederhole ich ihn hier nicht.

Wie groß müssen Touch Targets sein?

Mit WCAG 2.2 kam das Erfolgskriterium 2.5.8. Es verlangt auf Stufe AA klickbare Ziele von mindestens 24 mal 24 CSS Pixeln. Es gibt allerdings Ausnahmen, etwa kleine Ziele mit genügend Abstand, Links im Fließtext und Standardsteuerelemente des Browsers. Die vollständige Erklärung steht auf der W3C Seite zur Mindestgröße von Zielen.

Die Richtlinien der Plattformen gehen weiter. Apple empfiehlt in den Human Interface Guidelines mindestens 44 mal 44 Punkt, Google Material Design mindestens 48 mal 48 dp. In der Praxis halte ich mobile Buttons und Menüpunkte zwischen 44 und 48 Pixeln. Betrachten Sie 24 Pixel also als Untergrenze, nicht als Ziel.

Ein häufiger Fehler: Mit einem kleinen Icon schrumpft auch die Klickfläche. Stattdessen geben Sie einem Icon von 20 Pixeln Innenabstand und vergrößern die Klickfläche auf 44 Pixel. Optisch ändert sich nichts. Das Antippen wird trotzdem deutlich leichter.

Achten Sie außerdem auf den Abstand zwischen Zielen. Zwei winzige Links direkt nebeneinander führen zu echten Fehlern, vor allem bei gegensätzlichen Aktionen wie „Löschen“ und „Speichern“. Wie Sie Ihre mobilen Seiten darauf prüfen, zeigt der Leitfaden Mobilfreundlichkeit testen.

Wie gestalten Sie Buttons und Links richtig?

Zunächst gilt: Ein Button steht für eine Aktion, ein Link für einen Ort. Wenn Sie diese Unterscheidung einhalten, können Besucher vorhersagen, was nach einem Klick passiert. „Formular senden“ ist ein Button. „Leistungen ansehen“ ist meist ein Link.

Konkret empfehle ich drei Button Ebenen. Der primäre Button ist mit der Akzentfarbe gefüllt, und pro Bildschirm gibt es meist nur einen. Der sekundäre Button hat einen Rahmen. Eine tertiäre Aktion bleibt ein schlichter Textlink. Somit finden Besucher die wichtigste Aktion ohne Nachdenken.

Button Texte beginnen mit einem Verb und nennen das Ergebnis. Schreiben Sie „Angebot anfordern“ statt „Senden“ und „Preise ansehen“ statt „Hier klicken“. Aus Sicht der Conversion behandle ich das Thema im Beitrag CTA Button Beispiele.

Gestalten Sie zudem jeden Zustand: normal, Hover, gedrückt, Fokus, deaktiviert und Laden. Der Fokuszustand ist für Tastaturnutzer entscheidend. Den Standardfokusrahmen des Browsers zu entfernen und nichts an seine Stelle zu setzen, gehört zu den häufigsten Barrierefreiheitsfehlern, die ich bei Audits finde.

Welche Regeln gelten für Formularfelder?

In Formularen verdient oder verliert eine Website Geld. Daher machen kleine Details hier einen großen Unterschied. Meine erste Regel: Jedes Feld braucht ein sichtbares, dauerhaftes Label.

Platzhaltertext als Label wirkt aufgeräumter. Sobald Besucher tippen, verschwindet der Hinweis allerdings, und sie vergessen, was das Feld verlangt. Zudem ist Platzhaltertext meist hellgrau und verfehlt dann oft die Kontrastschwelle.

1. Setzen Sie Labels über die Felder; auf dem Smartphone ist das am besten lesbar.
2. Ordnen Sie Felder einspaltig an, denn zweispaltige Formulare stören die Lesereihenfolge.
3. Kennzeichnen Sie Pflichtfelder und optionale Felder eindeutig.
4. Zeigen Sie Fehlermeldungen direkt unter dem Feld, mit einem Satz, der die Lösung nennt.
5. Legen Sie für Telefon und E-Mail den passenden Tastaturtyp (inputmode) fest.

Wie viele Felder Sie brauchen und welche Daten Sie in welcher Phase abfragen, ist eine eigene Entscheidung. Diese Seite behandle ich im Beitrag Formulare für Termin, Angebot und Demo optimieren.

Wie zeigen Sie Feedback und Statusmeldungen an?

Nielsens erste Heuristik lautet „Sichtbarkeit des Systemstatus“. Das heißt: Nach einer Aktion sollten Besucher in angemessener Zeit sehen, was das System tut. Ist das Formular angekommen? Liegt der Artikel im Warenkorb? Läuft die Suche noch? Eine stumme Oberfläche bringt Menschen dazu, denselben Button immer wieder zu drücken.

Statusmeldungen teile ich in vier Typen: Erfolg, Warnung, Fehler und Information. Jeder Typ hat eine eigene Farbe und ein eigenes Icon. Dennoch ergibt der Text immer auch allein Sinn. Der Satz „Danke, Ihre Nachricht ist bei mir, ich melde mich innerhalb eines Werktags“ schafft zum Beispiel weit mehr Vertrauen als ein grüner Haken.

Verzichten Sie in Fehlermeldungen auf vorwurfsvolle Sprache. Schreiben Sie statt „Ungültige Eingabe“ lieber „Die Telefonnummer braucht 10 Ziffern“. Dann versteht der Besucher das Problem und weiß, wie er es behebt.

Vergessen Sie außerdem leere Zustände nicht. Findet die Suche nichts oder ist der Warenkorb leer, sollte der Bildschirm nicht weiß bleiben. Schlagen Sie stattdessen einen nächsten Schritt vor. Ein Link zu beliebten Kategorien oder ein kurzer Tipp zur Suche genügt.

Wie bringen Sie UI Regeln und Markenidentität in Einklang?

Die Markenidentität bestimmt die Persönlichkeit einer Website, die UI Regeln bestimmen ihre Nutzbarkeit. Wenn beides kollidiert, schütze ich meist die Nutzbarkeit, opfere die Marke aber nicht. Die Lösung liegt oft in der Mitte.

Ist Ihre Markenschrift zum Beispiel dekorativ, dann setze ich sie nur in großen Überschriften ein und wähle für den Fließtext eine klare, gut lesbare Schrift. Erreicht Ihre Markenfarbe den Kontrast nicht, nutze ich sie für Akzentlinien oder Icons statt als Fläche. Somit bleibt die Marke sichtbar, und der Text bleibt lesbar.

Am besten gelingt diese Balance, wenn Ihr Markenhandbuch von Anfang an digitale Regeln enthält: Welche Farbe passt auf welchen Hintergrund? Welche Farbe hat der Button? Wie klein darf Schrift höchstens werden? Die typischen Probleme beschreibe ich im Beitrag Corporate Design digital umsetzen. Für ein umfassenderes Projekt finden Sie Details auf der Seite Markenidentität.

Wie setzen Sie Icons und Bilder in der Oberfläche ein?

Richtig eingesetzt, verringern Icons die Textmenge und beschleunigen das Scannen. Allerdings bedeutet nicht jedes Icon für alle dasselbe. Die Lupe steht für Suche, das X für Schließen, der Mülleimer für Löschen; das sind etablierte Konventionen. Ein abstraktes Icon ohne Beschriftung sagt den meisten Besuchern dagegen nichts.

Meine Regel ist deshalb einfach: Jedes Icon ohne etablierte Bedeutung bekommt ein kurzes Label daneben. Sogar das Hamburgersymbol fällt offenbar leichter auf, wenn das Wort „Menü“ danebensteht, besonders bei älteren Zielgruppen. Das ist meine Beobachtung aus der Praxis, keine Garantie. Nutzen Sie außerdem ein einziges Icon Set für die ganze Website, denn Icons mit unterschiedlichen Strichstärken stören die Konsistenz.

Bei Bildern lautet die eigentliche Frage: Gibt dieses Bild dem Besucher eine Information, oder füllt es nur Fläche? Beliebige Stockfotos gehören oft zur zweiten Gruppe. Echte Produkte, ein echtes Team oder ein echter Screenshot schaffen dagegen Vertrauen. Zudem verhindern Bildmaße im HTML, dass sich das Layout beim Laden verschiebt.

Schreiben Sie schließlich für bedeutungstragende Bilder einen beschreibenden Alternativtext. Bei dekorativen Bildern lassen Sie ihn leer, damit Screenreader keine überflüssigen Informationen vorlesen. Wenn Sie Dateien vor der Veröffentlichung mit dem Tool Bild verkleinern komprimieren, profitiert zudem die Ladezeit.

Welches Prinzip löst welches Problem?

Die folgende Tabelle fasst die Prinzipien dieses Beitrags zusammen. Die Schwellenwerte stammen aus den Richtlinien von W3C, Apple und Google. Bei den Praxiswerten handelt es sich dagegen um Startwerte aus meiner Projekterfahrung, also keine Garantie.

Legen Sie diese Schwellen einmal fest und halten Sie sie dann ein. Eine neue Kampagnenseite nutzt zum Beispiel dieselbe Schriftskala, dieselbe Abstandsskala und dieselben Button Stile. Sonst wird die Website innerhalb weniger Monate zum Flickenteppich aus Teilen, die verschiedene Menschen zu verschiedenen Zeiten ergänzt haben. Schreiben Sie die Regeln also auf und teilen Sie sie mit dem ganzen Team. Selbst ein kurzer Styleguide ist besser als gar keiner.

Wie wirkt sich UI Design auf SEO und Conversions aus?

UI Design ist kein direkter Rankingfaktor. Es wirkt allerdings indirekt, und zwar über die Signale zur Page Experience und über das Verhalten der Besucher. Ein Banner, der spät lädt und Inhalte nach unten schiebt, verschlechtert zum Beispiel den CLS Wert (Cumulative Layout Shift), eine der Core Web Vitals. Das trifft Nutzer und Bewertung gleichermaßen.

Bei den Conversions ist der Effekt leichter zu sehen. Eine Seite mit klarer Hauptaktion, verständlichem Formular und lesbarem Text macht aus demselben Traffic mehr Anfragen. Deshalb verbinde ich Änderungen an der Oberfläche immer mit Messung. Nach jeder Änderung verfolge ich dasselbe Conversion Ziel vorher und nachher.

Den Zusammenhang zwischen SEO und Nutzererfahrung behandle ich im Beitrag UX und SEO in Einklang bringen. Den gesamten Conversion Ansatz finden Sie unter conversionorientiertes Webdesign. Mein Punkt hier: Eine gute Oberfläche ist das letzte Glied, das verhindert, dass Ihr Budget für Anzeigen und SEO versickert.

Wie testen Sie UI Design auf einer Live Website?

Tests gehören deshalb in jede Phase der Gestaltung, nicht nur ans Ende. Ich arbeite mit drei Ebenen: automatische Prüfungen, Expertenbewertung und Beobachtung echter Nutzer.

• Automatische Prüfungen: Browserwerkzeuge finden Fehler bei Kontrast, Schriftgröße und fehlenden Labels. Der Bericht zur Barrierefreiheit in Google Lighthouse ist ein guter Start.
• Expertenbewertung: Nutzen Sie Nielsens zehn Heuristiken als Checkliste und gehen Sie jeden Bildschirm durch.
• Nutzerbeobachtung: Geben Sie fünf Personen eine echte Aufgabe und beobachten Sie, wie sie vorgehen. Achten Sie dabei mehr auf ihr Handeln als auf ihre Worte.
• Tastaturtest: Legen Sie die Maus weg und bewegen Sie sich nur mit der Tabulatortaste durch die Seite. Der Fokus muss jederzeit sichtbar bleiben.

Automatische Werkzeuge finden nur einen Teil der Probleme. Ein sauberer Kontrastbericht beweist zum Beispiel nicht, dass ein Button verständlich ist. Nehmen Sie das menschliche Auge daher nie aus dem Prozess. Für Messungen zur Performance empfehle ich meinen Leitfaden Google Lighthouse Test.

Welche UI Fehler kosten in Unternehmensprojekten am meisten?

Auf einer kleinen Website betrifft eine Inkonsistenz ein paar Seiten. In einem Unternehmensprojekt verbreitet sie sich über Hunderte Bildschirme. Folglich steigen die Kosten von Fehlern schnell. Drei Situationen haben aus meiner Erfahrung am meisten geschadet.

Erstens Komponenten, die ohne Regeln wachsen. Jedes Team zeichnet seinen eigenen Button, und bald hat die Website zehn Button Stile. Das aufzuräumen kostet weit mehr Aufwand, als von Anfang an Regeln festzulegen.

Zweitens Barrierefreiheit, die bis zum Schluss wartet. Kontrast und Fokuszustände kosten in der Designphase ein paar Stunden. Auf einer Live Website bedeutet dieselbe Korrektur dagegen, Dutzende Vorlagen neu anzufassen.

Drittens ein Design für den Desktop, in das Sie das Smartphone später hineinquetschen. Kommen die meisten Besucher mobil, dann ist es günstiger und genauer, zuerst den schmalen Bildschirm zu lösen. Planen Sie ein größeres Projekt, erfahren Sie auf der Seite Webdesign, wie ich diese Entscheidungen früh kläre.

Was gehört auf eine kurze UI Checkliste?

Zum Abschluss die kurze Liste, die ich vor jedem neuen Bildschirm durchgehe. Sie ersetzt kein Designsystem. Dennoch fängt sie die meisten typischen Probleme ab.

1. Hat der Bildschirm eine Hauptaufgabe, und fällt sie auf den ersten Blick auf?
2. Hat der Fließtext mindestens 16 Pixel und genügend Zeilenabstand?
3. Erreicht Text 4,5:1, und erreichen Feldrahmen und Icons 3:1?
4. Stammt jeder Abstand aus Ihrer Abstandsskala?
5. Sehen Komponenten mit derselben Aufgabe auf jeder Seite gleich aus?
6. Treffen Besucher die Touch Targets auf dem Smartphone mühelos?
7. Bekommt der Besucher nach jeder Aktion eine Rückmeldung?
8. Lässt sich die Seite allein mit der Tastatur bedienen?

Zusammengefasst ist nutzerzentriertes UI Design keine Kunstausstellung, sondern eine Reihe bewusster Entscheidungen. Wenn Sie diese Entscheidungen an messbare Prinzipien knüpfen, arbeitet Ihr Team schneller, und Ihre Besucher finden schneller, was sie brauchen. Prüfen Sie als ersten Schritt Ihre drei Seiten mit dem meisten Traffic anhand dieser Liste. Die Funde dort ergeben dann einen soliden Fahrplan für den Rest der Website.