Was ist UI-Design?

User Interface Design, kurz UI Design, ist die Gestaltung von Benutzeroberflächen zwischen Menschen und Maschinen. Ziel des UI Designs ist es, die Benutzeroberfläche so zu gestalten, dass der Großteil der Nutzer eine optimale Customer Journey erlebt und die gewünschten Ziele erreichen kann. Dies kann z.B. der Kauf eines Produktes oder das Finden einer gesuchten Information sein.

UI-Design ist im Vergleich zu anderen Designfeldern ein relativ junger Bereich. Seine Wurzeln liegen in den 80er Jahren, als die ersten Computer mit visueller Schnittstelle auf den Markt kamen, und die rein textgesteuerten Computer abgelöst wurden. Durch die stetige Zunahme von Bildschirmarbeitsplätzen wurde auch ein Bewusstsein für die Benutzerfreundlichkeit von Softwareoberflächen geschaffen. So wurde dann schließlich Anfang des Jahres 2000 die Software-Ergonomie im Gesetz festgehalten.

UI Design im Alltag:

UI Design findet sich bei allen grafischen Benutzeroberflächen, wie z.B. Betriebssysteme und jegliche Art von Software. Jede Schnittstelle, mit der ein User interagieren kann, z.B. das Smartphone, der Desktop Computer oder das Navigationssystem im Auto benötigen ein UI.

Dabei unterscheiden sich die Benutzeroberflächen in der Art der Steuerung. So gibt es z.B. sprachgesteuerte und gestengesteuerte UIs. Voice User Interfaces finden sich nicht nur in Smartphones, sondern auch in Lautsprechern oder in Autos. Die Besonderheit dieses UIs ist, dass die Eingaben hier ausschließlich über die Stimme erfolgt. Bei den gestengesteuerten UIs interagiert der Nutzer durch Hand- oder Kopfbewegungen mit der Benutzeroberfläche des Geräts.

Definition eines guten UIs

Ein gutes User Interface Design ermöglicht es dem Nutzer, sich ohne intensive Vorkenntnisse intuitiv auf der Oberfläche zurechtzufinden und diese ohne Probleme nutzen zu können. Dabei sind folgende Merkmale von besonderer Bedeutung:

Die Benutzeroberfläche ist optisch ansprechend gestaltet, nicht überfüllt und dadurch leicht verständlich.
Navigationselemente und Inhalte folgen im Aufbau einer bekannten und logischen Struktur, die den Nutzer bei der Interaktion unterstützt (z.B. Kunden-Login oder Warenkorb oben rechts).
Das UI berücksichtigt mögliche Einschränkungen der Nutzer (z.B. vermindertes Sehvermögen). Websites sollten beispielsweise nach den Vorgaben der BITV 2.0 barrierefrei ausgebaut sein.
Der User kommt schnell und einfach zum Ziel.

Wenn die oben genannten Punkte miteinander kombiniert werden, ist das Ergebnis ein UI, welches gleichermaßen effizient in der Bedienung und simpel im Erscheinungsbild ist. Im Idealfall wird die 3-Klick-Regel eingehalten. Wie aus dem Namen hervorgeht, geht es um die Interaktion mit der Maus. Die 3-Klick-Regel besagt, dass ein Nutzer mit weniger als drei Klicks seine Aktion abgeschlossen haben soll. Das sind z.B. der Login auf einer Website oder der Kauf eines Produktes. Dies ermöglicht es Usern, schnell an ihr gewünschtes Ziel zu kommen, ohne dass Sie einen langen Prozess des Suchens und Probierens durchlaufen müssen.

Selbstverständlich sollte sich das UI einer Website sich auf jeder Unterseite wiederfinden. Ein zentraler Punkt dabei ist, dass der Nutzer zu jeder Zeit weiß, wo auf der Website er sich befindet.

Bei der Erstellung von umfangreichen Webauftritten sollte zu Beginn ein Styleguide festgelegt werden, in dem alle grundlegenden Elemente des Layouts definiert sind. Diese vorherige Definition ermöglicht den Aufbau eines einheitlichen Erscheinungsbildes. Dadurch kann der Nutzer wiederkehrende Elemente einordnen und sich überall gleichermaßen orientieren.

Um den Nutzer bestmöglich durch die Seite zu führen, sollte ihm so viel Arbeit wie möglich abgenommen werden. Dazu zählt u.a. die Verwendung von einfacher Sprache, eine sinnvolle Strukturierung des Contents sowie klar aufgebaute Formulare.

Visuelle Klarheit

Auch visuell gibt es zahlreiche Möglichkeiten, um die Customer Journey zu verbessern. Dabei helfen dem Nutzer Aspekte wie Größe, Farbgebung oder Anordnung bei der Orientierung. So werden große Elemente als wichtiger empfunden als kleine und dynamische Inhalte erzielen mehr Aufmerksamkeit als statische.

Auf jede vom User abgeschlossene Aktion sollte er eine visuelle Rückmeldung erhalten, die den Erfolg der Aktion bestätigt oder auf eventuelle Fehler hinweist. Für die Rückmeldung auf Interaktionen (z.B. Klick, Hover, Scrollen) spielt der Einsatz von Farben und visuellen Effekten eine zentrale Rolle. Durch eine Farbänderung kann dem Nutzer beispielsweise eine fehlerhafte Eingabe mitgeteilt werden. Wichtig ist hier, dass Fehlermeldungen klar formuliert sind und auch durch die erlernte Farbsprache angezeigt wird, worin der Fehler besteht.

Bei Aktionen, bei denen das Abrufen der Daten mehr als eine Sekunde dauert, sollte dem Nutzer eine Rückmeldung in Form einer Ladeanimation oder eines Ladebalkens bei längeren Ladezeiten gegeben werden. Dies ist z.B. bei Installationen, Downloads oder der Bearbeitung größerer Datenmengen der Fall.

Balance von Texten und Bildern

Durch die kurze Aufmerksamkeitsspanne von Websitebesuchern sollten Texte auf die wichtigsten Informationen reduziert werden. So können Informationen schnell erfasst werden und es wird verhindert, dass der Nutzer bei zu langen Texten das Interesse verliert und die Interaktion abbricht.

Der Schlüssel ist ein ausgewogenes Text-Bild-Verhältnis. Auch zu viele Bilder können das Nutzererlebnis negativ beeinflussen. Hochwertige Key-Visuals und Produktabbildungen sollten sowohl gezielt als auch sparsam eingesetzt und – wo nötig – mit Text kombiniert werden.

Fazit:

Ziel des UI Designs ist es, ansprechende Benutzeroberflächen zu kreieren, welche den Anforderungen der Nutzer gleichzeitig gerecht werden. Sowohl Software als auch Websites und Shops sind für den Endverbraucher untauglich, wenn sie zwar alle notwendigen Funktionen beinhalten, in der Bedienung jedoch zu kompliziert und optisch nicht ansprechend sind. Weiterhin sollte ein Mindestmaß an Barrierefreiheit gegeben sein, um Menschen mit Beeinträchtigungen nicht von der Nutzung auszuschließen.

Ein wichtiger Aspekt ist in diesem Kontext ist die User Experience (UX), also die Nutzererfahrung. Wenn sich ein Nutzer nicht wohlfühlt, weil er aus verschiedensten Gründen nicht sein gewünschtes Ziel erreichen kann, beendet er schnell die Interaktion mit dem UI. Deshalb sollten und können UX und UI nicht voneinander getrennt werden.