User Experience – Worin liegt der Unterschied zum User Interface?

März 7, 2022

Der Mensch und seine geliebten Maschinen sprechen verschiedene Sprachen – zumindest noch. Aus diesem Grund stellt das User Interface (auch UI) die Brücke zwischen beiden dar, um diese Kommunikationslücke zu schließen.

In unserem vorherigen Artikel haben wir die User Experience bzw. UX, wie folgt definiert:

User Experience ist der Oberbegriff für alle Konzepte und Methoden, die sich damit beschäftigen, ein Problem zu erkennen und zu analysieren, Lösungen dafür zu entwerfen und sicherzustellen, dass sie den Bedürfnissen und Erwartungen der Nutzer entsprechen. Ziel der UX ist es, alle Aspekte zu berücksichtigen, die für die Nutzer relevant sind, von der Funktionalität über die Usability bis hin zur Ästhetik. Es geht um alles, was zur Wahrnehmung des Produkts beiträgt.

Aus der technischen Perspektive wird UX folglich als die Schublade definiert, die sämtliche Aspekte der Produktentwicklung sowie dem -design beinhaltet. Das User Interface ist folgedessen eines der Elemente, die in dieser User Experience Schublade inkludiert sind.

Was genau ist also das User Interface?

Wie der Name es bereits suggeriert ist UI bzw. die Benutzeroberfläche der erste Kontaktpunkt zwischen einem Benutzer und dem digitalen Produkt oder Dienst. Das beginnt bereits beim Touchpad des Notebooks bzw. der Maus am Rechner zur Steuerung der Bildschirmdarstellung – so wie Sie gerade durch den Inhalt dieses Artikels scrollen. Wenn wir uns also auf das UI Design auf Webseiten oder in Apps beziehen, steht hier das Aussehen des Produktes sowie die Interaktion mit diesem im Vordergrund. Während UX die gesamte Benutzerfahrung während der Nutzung des Produktes von Anfang bis Ende umfasst, fokussiert sich UI auf den visuellen Part dieser Erfahrung.

Die Überschneidung zwischen UX und UI ist also der ausschlagende Faktor, der zu Verwirrung führt. Leider hilft es hier auch nicht weiter, dass manche Agenturen beide Begriffe universell nutzen und als ein und die selbe Aufgabe bzw. Tätigkeit definieren. In manchen Fällen kann die Tätigkeit beim UI Design auch das grafische Design oder sogar die Frontend-Entwicklung umfassen. Dieser Fall wiederrum kann bei anderen Firmen bereits als UX Design deklariert werden. Wenn zu diesem Beispiel aber jetzt noch ein paar mehr Unterpunkte, wie das Interaction Design, hinzugenommen werden, ist die maximale Verwirrung schon fast perfekt. Natürlich kann ein und die selbe Person beide Tätigkeiten ausführen, sprich UX und UI (was auch häufig in kleineren Firmen der Fall ist), aber dennoch ist es wichtig, hier die Verknüpfung wie auch den Unterschied zwischen beiden Tätigkeiten zu erkennen.

Das User Interface stellt einen wichtigen Teil der User Experience dar: Das Ziel des User Interface ist die Erfüllung aller Ansprüche und Anforderungen eines Benutzers um diesem die beste Erfahrung (Experience) zu bieten. Das User Interface kümmert sich um den „Look and Feel“ des Produktes während alle Faktoren der visuellen Wahrnehmung berücksichtigt werden müssen. Ein sehr schöner Anwendungsfall wird in diesem Video von NNgroup behandelt, um die Analogie zwischen UX und UI sehr süß darzustellen (Spoileralarm: Während des Betrachten des Videos können vereinzelt Heißhungerattacken auf Kuchen ausgelöst werden).

Elemente aus dem UI Design

Mit diesem Hintergrundwissen lässt sich also feststellen, dass das User Interface aus folgenden Elementen besteht:

  • Visuelles Design: hier geht es um Aussehen und Ästhetik. Das bedeutet um Farben, Typographie, Abstände und Elemente wie Schaltflächen und Icons. Einheitlichkeit und Konsistenz sind das Hauptaugenmerk für das visuelle Design.
  • Interaktions Design: hier geht es um die Kommunikation zwischen dem Produkt und dem Benutzer – die Reaktion des Produktes auf die Befehle des Benutzers. Hierzufallen Themen wie Animationen, Klang und andere Bereiche, die gemeinsam eine ansprechende wie auch erwünschte Erfahrung bieten. Um hier ein Beispiel zu nennen: Wie reagiert das System auf fälschiche Benutzereingaben? Wird das entsprechende Eingabefeld hervorgehoben? Ist der Fehler für den Benutzer direkt ersichtlich und auch verständlich? Kann er ihn unmittelbar korrigieren? Wie leitet das System den Benutzer durch diesen Vorgang?
  • Bewegungs Design: hier geht es darum, einem sonst eher statischen Design etwas mehr Leben einzuhauchen. Wie auch alles andere in der UX-Welt hat Bewegung das Ziel, den Benutzer aufmerksam durch das System zu begleiten und auch Fortschritte besser darzustellen. Hierfür gibt es viele verschiedene Arten von Animationen, angefangen bei kleineren Effekten bis hin zu Seiten-Übergängen.

UX Designer vs UI Designer

Ein UX Designer möchte den Benutzer und seine Gewohnheiten analysieren und verstehen, um ihm die beste Funktionalität während der Nutzung des Produktes zu bieten. Sein Fokus liegt darauf die Gewohnheiten zu erkennen und zu erfüllen. Hierzu sind bereits vor dem eigentlichen Projekt und der Umsetzung die Analyse sowie auch die Konzeption von immenser Bedeutung um die entsprechenden Ziele und Anforderungen zu definieren. Hierzu werden verschiedene Ansätze, Lösungen und auch Ideen durchgegangen, um ermittelte Probleme so zu lösen, so dass sie ganzheitlich betrachtet die bestmögliche Benutzererfahrung bieten. Der UI Designer hingegen baut auf diesen Ergebnissen auf, um hierzu die passende visuelle Erfahrung zu bieten. Er setzt folglich die konzipierten Lösungen aus dem UX Design um. Für ihn steht nicht nur das gute Aussehen des Produktes im Fokus, sondern auch eine möglichst natürliche und intuitive Erfahrung. An der Benutzeroberfläche wird solange gefeilt, so dass jegliche Interaktion wie auch Bewegung einzelner oder mehrerer Elemente der gewünschten Funktionalität entsprechen damit die Benutzeranforderungen bestmöglich erfüllt werden können (z.B. das Swipen-Feature für ein Gallerie-Element).

Wenn man also sagt, dass UX die Geschäftswelt übernimmt, dann liegt das daran, dass es ein enorm wichtiges Thema geworden ist, um viele Menschen mit verschiedenen Hintergründen auf eine gemeinsame Basis – oder auch in ein Produkt – zu bringen. Wenn von UX gesprochen wird, fallen häufig im Umgang zwischen Designern wie auch Nicht-Designern die Worte wie Wireframes, Usability und Design Thinking. Allerdings sind diese Konzepte nicht immer bei allen Gesprächspartnern in diesem Kontext erfasst, was mitunter zu Missverständnissen und Verwirrung führen kann. In diesem Kontext muss UI zwar als Unterbereich der UX erfasst werden, aber gleichermaßen auch der kritische Einfluss verstanden werden. Beides fest verankert gehört unabdingbar zusammen, das Benutzerinterface steht aber an vordester Front was vom erstem Augenblick an vom Benutzer wahrgenommen und entpsrechend beurteilt wird, wenn mit dem Produkt interagiert wird.