Denke an die letzte tolle Website, die du entdeckt hast. Und jetzt denke darüber nach, weshalb sie so toll war. Wahrscheinlich denkst du nicht an ihre großartigen Bilder (obwohl die vermutlich hilfreich waren) oder den informativen Text, den du dort gelesen hast (obwohl auch der vermutlich hilfreich war). Nein: Wahrscheinlicher ist, dass du von der Website beeindruckt warst, weil du auf ihr etwas schnell, effektiv und effizient erledigen konntest. Eines der wichtigsten Dinge, um dies zu erreichen, nennt man User Interface Design (kurz UI Design).

User Interface Design ist wichtig für die Interaktion der User mit deiner Website und damit für dein Produkt oder Service. Nur das beste User Interface Design ermöglicht es dem User, sich nicht mit den technischen Einzelheiten deiner Website auseinandersetzen zu müssen und einfach das zu tun, was er tun will. Auch wenn es nach einem Grundprinzip des Webdesigns klingen mag, unterscheiden sich das Designen von Seiten und das Designen von Interfaces deutlich und es gibt große Unterschiede zwischen UX Design, UI Design und Webentwicklung. In diesem Artikel werden wir erklären, was User Interface Design ist, was gutes UI Design auszeichnet und welche 4 Regeln dabei helfen, gute UI Designs zu entwickeln.

Was ist User Interface Design?

User Interface Design ist das Designen digitaler Benutzeroberflächen, insbesondere von Buttons, Navigationsmenüs, Icons und Typografie. Der Fokus liegt auf dem Look der Benutzeroberfläche und einem reibungslosen, angenehmen Erlebnis für den User sowohl bei der Nutzung als auch der Optik. Kurz gesagt ist User Interface Design der Prozess, bei dem Designer und Designerinnen sowie Entwickler und Entwicklerinnen anwenderfreundliche Benutzeroberflächen kreieren, die eine Verbindung zwischen der Kundschaft und deinem Produkt oder Service herstellen.

illustration: eine Frau zeigt auf einen Handy-Bildschirm und folgt einer Straßenkarte
Illustration von OrangeCrush

Die häufigsten Formen des UI Designs sind:

  • Grafische Benutzeroberflächen: Bei diesen handelt es sich um visuelle Darstellungen von Buttons, Menüs oder Bedienoberflächen, also all die Dinge, mit denen User interagieren. Ein Beispiel dafür ist der Desktop deines Computers oder die Benutzeroberfläche deines Handys.
  • Sprachgesteuerte Benutzeroberflächen: Dies sind Benutzeroberflächen, die – wie der Name vermuten lässt – per Sprache gesteuert werden. Sie gewinnen zunehmend an Beliebtheit. Beispiele hierfür sind Apples Siri, Amazons Alexa oder Googles Bixby.
  • Gestengesteuerte Benutzeroberflächen: Dies sind Benutzeroberflächen, bei denen die Gesten der User Auswirkungen auf die Handlungen des Produkts haben. Ein Beispiel dafür wären Virtual-Reality-Spiele.

Jede dieser Designformen ist mit unterschiedlichen Einschränkungen für Designer verbunden und muss sorgfältig studiert werden, um Usern ein möglichst nahtloses Erlebnis zu bieten.

Wie definiert man gutes User Interface Design?

Wie bei jedem Designprozess liegt auch bei einem guten UI Design der Schlüssel zum Erfolg darin, sorgfältig darüber nachzudenken, was du erreichen möchtest. Oftmals ist es einfacher zu bestimmen, welche Art von Website oder App du möchtest, als Regeln festzulegen, mit denen du dies erreichst.

UI-Design für die ersten vier Schritte einer Customer Journey: Login, Dashboard, Kunde, Kunde erweitert]
Von 84 Design

Tatsächlich ist es relativ einfach, die Merkmale guten UI Designs zu bestimmen. Hier sind ein paar, die du im Hinterkopf behalten solltest:

  • Ein angenehmes Erlebnis für User, das ihnen gleichzeitig ermöglicht, erforderliche Dinge so schnell und einfach wie möglich zu erledigen.
  • Es beachtet die unterschiedlichen Bedürfnisse unterschiedlicher User – also Barrierefreiheit
  • Die Benutzeroberfläche ist simpel und optisch ansprechend, aber nicht überladen oder verwirrend. User sollten in der Lage sein zu sehen, wie sie problemlos bestimmte Dinge erledigen können.
  • Der Fokus liegt auf deinem Produkt oder Service und fungiert als Brücke, über die sie es erreichen können
  • Es ermöglicht den Leuten, so zu navigieren oder interagieren, wie sie das möchten, ist aber bereit, bei Bedarf zu helfen oder zu assistieren.

Wenn all diese Elemente miteinander kombiniert werden, erhältst du ein User Interface Design, das sowohl simpel als auch leistungsstark ist. Eines, welches es Usern ermöglicht, schnell das zu tun, was sie tun wollen, ohne mehrere Seiten durchsuchen zu müssen, um die nötigen Informationen zu finden.

Wichtige Regeln guten UI Designs

Lass uns nun ein wenig über die grundlegende Definition eines gute UI Designs hinausgehen und uns die Regeln und Techniken anschauen, mit denen man es erreicht. Obwohl jede Website und App anders ist, gibt es bestimmte Kernfunktionen, die beinahe alle UI Designs gemein haben. Lass uns alle Schritt für Schritt durchgehen.

1. Gutes User Interface Design ist auf deiner gesamten Website einheitlich

Das vielleicht wichtigste Element eines guten User Interface Designs ist Einheitlichkeit. Im Idealfall sollte jedes Element deiner Seite deinen Usern genau zeigen, wo sie sich befinden, ohne das Erlebnis deiner Seite zu schmälern. Einer der ersten Schritte bei der Entwicklung einer guten Website besteht also darin, Marken-Guidelines für Texte und Farbschemata zu entwicklen, damit deine User sich nie fragen müssen, ob sie sich noch auf derselben Website befinden.

Ein solches Farb- und Brandingschema kann auch genutzt werden, um deinen Usern zu zeigen, wie sie deine Website nutzen sollen. Farben können es Usern erleichtern zu erkennen, wie wichtig die Funktionen deiner Website sind. Der Button „Mehr Informationen“ sollte beispielsweise genauso aussehen wie der Button „Demo anfordern“, damit die User durch einfaches Überfliegen der Website ähnliche Dinge schnell finden können.

Startseite, auf der die Schaltflächen „Anwenden und Starten“ ein einheitliches Design haben
Die CTA-Buttons „APPLY“ und „GET STARTED“ sind im selben Design gehalten, nur der Text ist unterschiedlich. Dennoch erkennen die User, dass sie beide denselben Zweck erfüllen. Von masiko

Für jede Aktion auf deiner Website andere Farben, Buttons und Schriften zu nutzen, erschwert es eiligen Usern, schnell den gesuchten Link zu finden. Ebenso kann es für Verwirrung sorgen, zwei Buttons mit derselben Schrift, Größe und Farbe zu erstellen, die zwei völlig unterschiedliche Aufgaben haben. Deine Buttons für „Abbrechen“ und „Absenden“ sollten beispielsweise niemals dieselbe Farbe haben.

2. Gutes User Interface Design verhindert, dass User sich zu sehr anstrengen müssen

Die besten Webseiten machen es Usern einfach, komplexe Dinge zu tun. Dies erreichst du, indem du ihnen so viel Arbeit wie möglich abnimmst. Gute Webseiten nutzen dazu eine Vielzahl von Techniken, angefangen mit leicht lesbaren Texten bis hin zu komplexeren Dingen wie der Strukturierung des Contents und der Seiten für maximale Effizienz. Um den Usern das Leben leichter zu machen, denke über folgende Dinge nach:

Visuelle Klarheit

Dabei ordnest du die Elemente auf deiner Website so an, dass deutlich wird, wie wichtig sie sind. Buttons oder Links, die größer und bunter sind, ziehen beispielsweise mehr Aufmerksamkeit auf sich und zeigen so, dass sie wichtiger sind.

Ein weiterer Tipp ist, den Usern jede Menge optische Hinweise zu geben. Du kannst optische Hilfen und Referenzpunkte bieten, um die User durch dein Interface zu führen. Die Idee dahinter ist, die Navigation deiner Website so durchschaubar wie möglich zu gestalten. User sollten sich niemals die Frage stellen, wofür ein Button oder Link ist oder wo er sich befindet.

Balance von Texten und Bildern

Ein weiterer wichtiger Tipp ist, die Textmenge auf deiner Website zu reduzieren. Die User haben bereits eine kurze Aufmerksamkeitsspanne und wenn du sie dazu zwingst, sich lange Textabschnitte durchzulesen, wird es nicht leichter für sie. Die User sollten die Abschnitte und gesuchten Informationen leicht finden und überfliegen können.

einfache Homepage mit Pastaschüssel rechts
Von David Ferretti

Einfacher Ablauf

Die meisten Funktionen deiner Website, sei es die Anmeldung, einen Kauf tätigen oder mehr Informationen anzufordern, sollten der 3-Klick-Regel folgen. Wie der Name schon sagt, sollten User in der Lage sein, ihr Ziel mit weniger als drei Mausklicks zu erreichen.

3. Gutes User Interface Design überlässt den Usern die Kontrolle

Gutes User Interface Design macht es den Usern leicht, sich so auf deiner Website zu bewegen, wie sie das möchten, bestärkt sie und gibt ihnen das Gefühl, die Kontrolle zu haben. Du solltest sicherstellen, dass deine Website für die User arbeitet, statt sie dazu zu zwingen, eine komplexe Benutzeroberfläche zu erlernen, um Zugang zu deinem Service haben zu können.

Es gibt ein paar Wege, um dies zu erreichen, und hier sind die häufigsten:

  • Integriere eine Art Hauptmenü oder Anker-Links, die auf häufig genutzte Seiten führen, damit die User problemlos auf deiner Website navigieren können.
  • Sorge dafür, dass sie leicht zu einer zuvor besuchten Seite zurückkehren können. Dadurch wird nicht nur die Benutzung deiner Website leichter, es ermutigt User auch dazu, sich auf deiner Website umzuschauen und überlässt ihnen die Kontrolle.
  • Gib Feedback, wenn eine bestimmte Aktion abgeschlossen ist. Lasse die User bei der Erstellung eines Passworts zum Beispiel wissen, welche Anforderungen an das Passwort gestellt werden und was fehlt.
Fehler beim Einlösen des Codes zum Ansehen des Films
Von tikshow
  • Biete Echtzeit-Updates zum aktuellen Systemstatus, damit die User nicht ungeduldig werden (wenn eine Anfrage abgeschlossen ist, sehen sie ein Statusupdate in Form eines linearen Fortschrittbalkens, der die Punkte „Verarbeitung“, „Lieferung“, „Downloading“ etc. anzeigt).
  • Nutze visuelle und schriftliche Kennzeichnungen. Mache deutlich, welcher Tab für welche Aktion ist, indem du bekannte Symbole sowie klare Kennzeichnungen nutzt.
  • Aktiviere die automatische Speicherung, damit die User ihren bisherigen Fortschritt nicht verlieren, wenn sie fälschlicherweise auf einen Button klicken.
  • Darüber hinaus sollten Fehlermeldungen sorgfältig formuliert sein, um nicht für Frust zu sorgen. Sie sollten Links zu Seiten enthalten, die bei der Problemlösung helfen können, zum Beispiel ein Link zum Zurücksetzen des Passworts.
Fehlerseite mit hilfreichen Links zu anderen Teilen der Website
Von Allure

4. Gutes User Interface Design gibt Usern ein gutes Gefühl

Gutes User Interface Design gibt den Usern ein gutes Gefühl und sorgt dafür, dass sie das umsetzen können, was sie umsetzen möchten. Du musst also sicherstellen, dass sich alle auf deiner Website wohlfühlen. Dies erreichst du unter anderem durch folgende Dinge:

Vermeide Fachsprache

Verwende keine Sprache, die deine Zielgruppe nicht versteht. Denke über deine Zielgruppe nach und nutze die Begriffe und Sprache, die sie auch nutzen würde. Ein Beispiel: Einige Leute aus der Bekleidungsindustrie bezeichnen das Angebot „Buy one get one free“ als BOGO, aber wenn du „BOGO“ auf deine Website schreibst, um dieses Angebot zu bewerben, werden das viele Leute nicht verstehen. Und das kann Menschen verwirren und abschrecken.

Sei inklusiv

Illustration von Menschen mit Behinderungen und inklusiven Symbolen
Illustration von OrangeCrush

Denke daran, dass die User deiner Website unterschiedliche Einschränkungen haben können, zum Beispiel ein geringes Sehvermögen, Schwerhörigkeit, kognitive Beeinträchtigungen oder motorische Beeinträchtigungen. Wenn du dafür sorgst, dass deine Website auf verschiedene Menschen zugeschnitten ist, stellst du sicher, dass alle mit einbezogen sind.

Du könntest zum Beispiel wann immer möglich simple, kontrastreiche Designs nutzen und visuelle Störfaktoren auf ein Minimum reduzieren. Vermeide unnötige Grafiken oder Links zu Seiten, die nicht wirklich wichtig dafür sind, was dein Produkt oder Service bietet.

Schau dir unseren Guide zu inklusivem Design an>>

Sobald du dir ein paar tolle UI Designs ansiehst, wirst du merken, dass der Wert von Inklusivität weit darüber hinausgeht, Menschen mit Einschränkungen ein tolles Erlebnis zu bieten. Wenn du dafür sorgst, dass deine Seite oder App so viele Menschen wie möglich anspricht, wirst du am Ende ein Design haben, das weitaus simpler, eleganter und für jeden einfacher zu nutzen ist.

Nutze Hinweise, die die User bereits kennen

Wenn du optische Hinweise aus der physischen Welt in der digitalen Welt nutzt, kennen die User bereits ihre Bedeutung. Schau einfach mal auf deinen Computer und du wirst Ordner sehen, die wie Ordner aussehen und einen Papierkorb, in den deine gelöschten Dateien und Dokumente kommen. Die User kennen die Funktion von Ordnern und Papierkörben bereits und werden sie in der digitalen Umgebung auf die gleiche Weise nutzen.

Ein weiteres Beispiel ist, dass viele User wissen, dass sie auf das „x“ in der oberen rechten Ecke klicken müssen, um ein Fenster zu schließen (oder oben links, wenn du einen PC nutzt). Das Letzte, was du tun willst, ist, ein Popup zu designen, bei dem sich diese Funktion am unteren Rand des Bildschirms befindet. Dies würde die meisten User verwirren, wenn nicht gar frustrieren.

Design für Sticker-Scan-App
Siehst du, wie der „Skip“-Button sich an der Stelle befindet, an der eigentlich der „X“-Button wäre? Dies vermittelt, dass die Funktion zum Verlassen oder Schließen dort ist, wo man sie als User erwarten würde. Von Brendox

Ein letztes Wort zu User Interface Design

Letzten Endes besteht das Ziel eines guten User Interface Designs darin, dass sich User problemlos auf einer Seite oder App zurechtfinden. Dies ermutigt sie dazu, dein Produkt oder Service zu entdecken, ohne das Gefühl zu haben, es wäre zu schwierig.

Die besten User Interface Designs tun mehr als das. Sie sind auch ein Weg, um der Welt deine Marke zu zeigen. Da deine Website das Gesicht deiner Marke oder deines Produkts ist, solltest du beim Designen immer deine Kundschaft im Hinterkopf haben und sicherstellen, dass sie das Erlebnis haben, das du dir für sie wünschst. Egal ob du dich selbst über Techniken zu UI Design belesen oder einen Profi engagieren möchtest, dein Ziel sollte dasselbe sein – jedem User ein großartiges Erlebnis zu bieten.

Du benötigst ein Webdesign, das den Regeln des UI Designs folgt?
Dann arbeite mit unserer talentierten Design-Community.