In diesem Nachgelesen zum Thema User Experience & User Interface (UX/UI) erläutern wir Ihnen die Unterschiede der beiden Begriffe, was sich genau dahinter verbirgt und warum diese im Produktdesign so wichtig sind.

User Experience (UX) begleitet uns tagtäglich und übt einen großen Einfluss auf unsere Entscheidungen aus. Darüber hinaus kann die User Experience auch einen Einfluss auf den Geschäftserfolg haben. In Onlineshops beispielsweise wirkt sich eine gute UX positiv auf die Conversion Rate aus. Die Conversion Rate (deutsch Konversion, Umwandlung) gibt das Verhältnis von Seitenbesuchern zu Kaufabschlüssen bzw. kaufenden Kunden an. Um diesen Kaufabschluss zu ermöglichen, benötigt es ein passendes, gut gestaltetes User Interface (UI). Was genau das bedeutet und wie beide Konzepte ineinander greifen, wird nachfolgend genauer erläutert.

Der Mensch hat viele verschiedene Wege gefunden, um kommunikativ Informationen zu übermitteln. Das dabei wohl bekannteste Mittel ist die Sprache. Die natürliche Sprache hilft uns Menschen seit vielen Jahrtausenden, uns untereinander zu verständigen. Maschinen wie beispielsweise Computer sprechen allerdings eine andere Sprache als wir. Um also eine Maschine bedienen zu können, benötigen wir eine Schnittstelle, die zwischen den maschinellen Funktionsweisen und uns Menschen vermittelt. Am Beispiel unseres Schuhkäufers Tim werden also komplexe Rechenvorgänge in für uns verständliche und klickbare Elemente übersetzt, die einen eindeutigen Befehl mit sich führen, z. B. “Jetzt kaufen” oder “in den Warenkorb” – so genannte „Call to Action“ Interaktionen.

Ein gutes User Interface kann die komplexesten Vorgäne in einen für uns im Alltag ohne Probleme tragbaren Rahmen formen. Dabei sind verschiedene Aspekte von Bedeutung. Je nach Anwendungsgebiet gestalten sich diese unterschiedlich. Am Beispiel einer Website, wie eingangs beschrieben, kommt es dabei speziell auf folgende Aspekte an:

Farbe und Kontrast sind im UI-Design zuständig für eine grundsätzliche Erkennbarkeit der Elemente.

„White Space“ sorgt dafür, dass die verschiedenen Elemente der Website den Nutzer nicht „erschlagen“ mit einem Informationsüberfluss. Er wird auch als negative Space oder empty Space bezeichnet.

Visuelle Hierarchie beschreibt die Anordnung der Elemente hinsichtlich ihrer Wichtigkeit und damit verbunden deren Farben, Größen und Platzierungen.

Komplexität vs. Einfachheit soll darauf hinweisen, dass weniger oftmals mehr ist. Häufig wird versucht, durch einen Überfluss an verschiedenen, visuellen Designelementen (Schatten, Blinken, Animationen, usw.) besonders viel Aufmerksamkeit zu erzeugen. Dabei verhindert genau diese Herangehensweise meistens das gewünschte Ziel.

Konsistenz gibt dem Nutzer eine gleichbleibende Erfahrung und ermöglicht ein schnelleres Zurechtfinden durch vertraute Umgebung. An einem Beispiel bedeutet das: Eine Person die ausschließlich Apple Produkte nutzt, wird mir hoher Wahrscheinlichkeit Probleme damit haben, Windows- oder Android-Oberflächen zu bedienen, da die gewohnte Konsistenz der Apple Umgebung nicht vorhanden ist.

„Scale“ befasst sich mit der korrekten Größendarstellung der Inhalte innerhalb der Elemente und umfasst bspw. Schriftgrößen, Abstände, Dicke der Rahmen usw.

Typographie stellt das Schriftbild dar und sollte abhängig vom vermittelten Inhalt gewählt werden. Verspielte Inhalte können durchaus mit entsprechend verspielten Schriftarten visualisiert werden, seröse Inhalte hingegen haben oftmals Serife Schriftarten – moderne Inhalte hingegen werden aktuell zumeist mit San Serifen Schriften (französisch für “ohne Serife” oder “serifenlos”) dargestellt. Zwei bekannte Beispiele sind Times New Roman für Serife Schriftarten und Arial als Vertreter der serifenlosen Schriften.

User Experience beschreibt und umfasst alle Ausprägungen der Eindrücke und das Erlebnis des Nutzers bei der Interaktion mit einem Produkt. Dabei verbindet man den Begriff oftmals mit der Gestaltung von Webseiten und Apps. Insgesamt ist der Begriff allerdings auf jede Art der Interaktion mit einem Produkt zu betrachten. Die User Experience hat ebenso wie die UI verschiedene Aspekte, die zu dem Gesamtergebnis hinwirken. Im Folgenden werden diese kurz umrissen.

Der erste Aspekt steht in direktem Zusammenhang mit dem UI und wird übergeordnet als Visuelles Design bezeichnet. Aus Sicht der UX liegt hierbei jedoch das Hauptaugenmerk auf dem Zusammenspiel der einzelnen visuellen Elemente wie Farbe, Bilder und Symbolen, um eine „stimmige“ und gute User Experience zu ermöglichen. Es werden also die einzelnen Teilaspekte des UI gesamtheitlich hinsichtlich ihrer Wirkung auf den Empfänger betrachtet. Daher können bereits kleine Änderungen am UI große Auswirkungen auf die UX haben und zu einem wesentlich besseren oder schlechten Nutzenerlebnis führen. In Abbildung 4 wird ersichtlich, dass das rechte Beispiel wesentlich klarer die Funktionsweise darstellt als das linke, herbeigeführt durch kleine Änderungen an der Farbgebung bzw. unterschiedlichen Buttons.

Oftmals vorgelagert, befasst sich die UX mit dem Bereich der Informationsarchitektur. Im Sinne dieser Bezeichnung geht es dabei um die Struktur und Organisation von Informationen. Im Kontext von Webseiten und Apps geht es dabei außerdem um ein schlüssiges Navigationskonzept des Menüs. Darüber hinaus wird sich mit der Kategorisierung und Bezeichnung von Inhalten befasst. Somit rückt zwangsläufig auch das Thema Suchmaschinenoptimierung (SEO) und dessen Verbesserung in den Fokus. Als mögliche Methode bzw. Werkzeug zur Gestaltung der Informationsarchitektur kann bspw. auf Wireframes zugegriffen werden als eine Vorstufe bzw. Teilaspekt des Prototyping (mehr zu diesem Thema in unserem Nachgelesen Von der Idee zur App).

fauxels auf Pexels

Aktuelles, Nachgelesen
Produkte gestalten! , Usability & Design

Von der Idee zur App

Wir erklären, wie aus einer Idee eine App entstehen kann. Dabei gehen wir auf Gestaltungsrichtlinien ein und zeigen beispielhaft den Entstehungsprozess auf.

WEITERLESEN

Neben den beiden ersten Punkten spielt das Interaktionsdesign ebenfalls eine wichtige Rolle für die UX. Es fokussiert sich auf jegliche Interaktion zwischen dem Nutzer und dem Produkt, um es intuitiv und effizient bedienbar zu machen. Synonym wird die Bezeichnung der Gestaltung von Mensch-Maschine-Schnittstellen (MMS) bezeichnet. Der Forschungsbereich befasst sich daher schwerpunktmäßig mit der Erforschung von Erwartungen und Bedürfnissen von Nutzern, um anhand der daraus gewonnen Erkenntnisse die MMS zu optimieren.

Eng mit dem Interaktionsdesign verbunden ist der letzte Aspekt der UX, die Gebrauchstauglichkeit bzw. Usability. Der wichtigste Abgrenzungspunkt zu den vorangegangenen Punkten stellt die klare Zielausrichtung dar. Die Usability eines Produktes bzw. eines Teils eines Produktes zielt immer auf ein spezifisches Ziel ab, welches durch den Nutzer zu erfüllen ist. An unserem Beispiel wäre das übergeordnete Ziel der Kaufabschluss eines Schuhs . Untergeordnet könnte sich die Usability aber ebenso auf den Auswahlprozess eines passenden Schuhes oder den Bezahlprozess beziehen. Entsprechend gilt es einen klaren Nutzungskontext abzugrenzen, um die Bewertung und Tests hinsichtlich der Usability vornehmen zu können.

Zusammenfassend lässt sich festhalten, dass das UI und die UX eng miteinander verbunden sind und sich direkt beeinflussen. Nichtsdestotrotz lassen sie sich voneinander abgrenzen. Dieses Nachgelesen ermöglicht es Ihnen, die Begriffe besser zu verstehen und voneinander trennen zu können. Vereinfacht lässt sich der Unterschied zwischen UX und UI wie folgt beschreiben:

Die User Experience / UX adressiert die Gefühle und Erfahrungen des Nutzers bei der Verwendung des Produktes.

Das User Interface / UI dreht sich rund um die visuellen Aspekte des Produktes und gibt der UX ein ästhetisches und ansprechendes Aussehen.