UX und UI: wenn die Grafik benutzbar sein muss

Wenn ein Mediengestalter für den Bildschirm gestaltet — eine Website, eine App, einen Newsletter — ist die Ästhetik nur die halbe Aufgabe. Die andere Hälfte ist, ob der Nutzer sich zurechtfindet, versteht, was passiert, und sein Ziel ohne Frust erreicht. Dieses Feld heißt UX (user experience, Nutzererlebnis), während UI (user interface, Benutzeroberfläche) die konkrete visuelle Gestaltung von Schaltflächen, Menüs, Feldern und Inhalten ist.

UI ist das, was man sieht: Farben, Typografie, Icons, Abstände und das Aussehen der Komponenten. UX ist das, was man erlebt: Ist es leicht, das Produkt zu finden, den Preis zu verstehen, den Kauf abzuschließen? Ein Design kann ein schönes UI und eine miserable UX haben — schöne Schaltflächen, die niemand findet. Als Mediengestalter trägst du am meisten zum UI bei, aber deine Entscheidungen zu Hierarchie, Kontrast und Lesbarkeit sind zugleich direkte UX-Arbeit.

Die meistgenutzte Checkliste für Gebrauchstauglichkeit sind die zehn Usability-Heuristiken, die Jakob Nielsen 1994 in ihrer bekannten Form veröffentlichte. Sie sind keine gesetzlichen Anforderungen, sondern breite Prinzipien, an denen man jedes digitale Design messen kann, um die Stellen zu finden, an denen Nutzer sich verirren oder überrascht werden.

• 01Sichtbarkeit des Systemstatus: Zeige immer, was gerade passiert — zum Beispiel, dass etwas geladen wird oder gespeichert ist.
• 02Abgleich mit der Wirklichkeit: Nutze Wörter und Begriffe, die die Nutzerin und der Nutzer kennen, keine interne Fachsprache.
• 03Nutzerkontrolle und Freiheit: mache es leicht, etwas rückgängig zu machen und zurückzukehren.
• 04Konsistenz und Standards: Gleiche Elemente müssen gleich aussehen und sich gleich verhalten.
• 05Fehlern vorbeugen: gute Standardeinstellungen und deutliche Warnungen sind besser als Fehlermeldungen.
• 06Wiedererkennen statt Erinnern: Zeige die Möglichkeiten — zwinge den Nutzer nicht, sie sich zu merken.

Derselbe Inhalt muss auf einem großen Bildschirm, einem Tablet und einem kleinen Handy funktionieren. Responsives Design bedeutet, dass sich das Layout an die Bildschirmbreite anpasst: Spalten werden gestapelt, Bilder skaliert, und Menüs ändern ihre Form. Für den Grafiker heißt das, dass man nicht eine feste Seite gestaltet, sondern ein System aus Komponenten, die umfließen können — und dass man das Handy von Anfang an mitdenkt, statt am Ende ein Desktop-Design zu 'schrumpfen'.

Bevor die einzelne Seite gestaltet wird, muss das Ganze stimmig sein: Welche Seiten gibt es, wie hängen sie über Menüs und Links zusammen, und welchen Weg geht der Nutzer typischerweise vom ersten Besuch bis zum Ziel? Das nennt man Informationsarchitektur. Eine einfache Karte der Nutzerreise — Schritt für Schritt vom Bedarf bis zur Handlung — deckt oft Lücken und Sackgassen auf, lange bevor ein einziges Pixel gezeichnet ist.

Digitale Designprozesse arbeiten typischerweise in zwei Schichten. Der Wireframe ist eine Skizze von Struktur und Inhalt ohne fertige Grafik — was soll die Seite enthalten und in welcher Reihenfolge? Der Prototyp ist ein klickbares Modell des Designs, an dem man den Ablauf ausprobieren kann, bevor irgendetwas programmiert ist. Beides spart teure Umwege: es ist weitaus billiger, einen Kasten in einer Skizze zu verschieben, als eine fertige Seite umzubauen.

Größere digitale Lösungen bauen auf einem Designsystem auf: einer Bibliothek fester Komponenten (Schaltflächen, Karten, Formulare) mit definierten Farben, Typografie und Abständen. Das sichert Konsistenz über viele Seiten hinweg und macht die Zusammenarbeit mit Entwicklern konkret — ihr sprecht über dieselben benannten Bausteine. Die Rolle des Mediengestalters besteht oft darin, das System visuell zusammenhängend und im Einklang mit der Markenidentität zu halten.

Denk auch an die Barrierefreiheit: Kontrastanforderungen, lesbare Typografie und Botschaften, die nicht allein von Farbe getragen werden, gelten am Bildschirm noch stärker als im Druck, weil die Nutzer und ihre Geräte so unterschiedlich sind. Gute UX ist letztlich Design, das für möglichst viele funktioniert.

“Die Nutzerin oder der Nutzer kommt nicht, um dein Design anzusehen — sondern um eine Aufgabe zu lösen. Dein Design wird danach beurteilt, wie leicht das ging.”

— Grundprinzip der Benutzererfahrung