User Experience & User Interface: ein Überblick

Erik Hunold

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.

|| © Iginti GmbH
Abbildung 1: Unterschied zwischen UX- und UI-Design[1]

Beispiel:

Tim sitzt am Computer und ist online auf der Suche nach Schuhen. Über eine Suchmaschine sucht er also nach dem Suchbegriff “Schuhe online kaufen”. Eines der ersten Ergebnisse der Suchanfrage bekommt die größte Aufmerksamkeit, da sowohl Titel als auch Beschreibung richtig formatiert sind und dementsprechend den Impuls auslösen, das Suchergebnis aufzurufen.

Der nun folgende Schritt wird von den allerwenigsten Menschen aktiv wahrgenommen, obwohl er essenziell wichtig dafür ist, ob ein Besucher auf der Website bleibt, oder nicht – die Ladezeit. Wenn sich die Website nicht nach wenigen Sekunden bzw. Sekundenbruchteilen fertig aufgebaut hat, springen die meisten Menschen wieder ab und wählen eine andere Website. Die User Experience beginnt daher schon bevor der Nutzer überhaupt auf der Website ankommt.

Nun ist Tim auf der Website und verfolgt nach wie vor das Ziel, Schuhe zu kaufen. Dementsprechend sollte zu Beginn sofort ersichtlich sein, worum es auf der Website bzw. in diesem Fall dem Onlineshop geht, nämlich Schuhe. Je intuitiver Tim durch die Kategorieseiten navigieren kann, desto schneller wird er an sein Ziel kommen und Schuhe kaufen. Die dafür oftmals verwendeten “Breadcrumbs” helfen dabei, die Navigation besser nachvollziehen zu können.

Abbildung 2: Breadcrumb-Navigation am Beispiel der OTTO Website[2]

Das User Interface

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.

Unterschied UX- und UI-Design
Abbildung 3: Darstellung des Unterschiedes von UX- und UI-Design[3]

Die User Experience

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.

Unterschied UX- und UI-Design
Abbildung 4: Darstellung des Unterschiedes von UX- und UI-Design[4]

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).

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.

Fazit

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.

Quellen, Anmerkungen und weiterführende Literatur

  1. UX Design: Das User Experience Design für Ihren Onlineshop. https://www.igniti.de/leistungen/ux-design-agentur/
  2. Zeta Producer Blog. Breadcrumb-Navigation. 19.12.2017. https://blog.zeta-producer.com/breadcrumb-navigation/
  3. intellectsoft. ESSENTIALS: THE DIFFERENCE BETWEEN UX & UI DESIGN. 30.05.2018. https://www.intellectsoft.net/blog/the-difference-between-ui-and-ux-design/
  4. Niebla, Hannah. 10 Common UI Design Mistakes (And How To Avoid Them). 06.08.2021. https://careerfoundry.com/en/blog/ui-design/common-ui-design-mistakes/

Download

Dieses Nachgelesen bieten wir Ihnen auch in einer Druckversion an. Nutzen Sie hierfür folgenden Link für den DOWNLOAD

Autor

Erik Hunold ist wissenschaftlicher Mitarbeiter an der Professur Arbeitswissenschaft & Innovationsmanagement der Technischen Universität Chemnitz. Im Mittelstand 4.0-Kompetenzzentrum Chemnitz beschäftigt er sich mit den Themen Arbeit 4.0, moderne Arbeitswelten sowie Geschäftsmodellentwicklung und Usability.
erik.hunold@betrieb-machen.de

Weitere Informationen

Das Mittelstand 4.0-Kompetenzzentrum Chemnitz gehört zu Mittelstand-Digital. Mit Mittelstand-Digital unterstützt das Bundesministerium für Wirtschaft und Energie die Digitalisierung in kleinen und mittleren Unternehmen und dem Handwerk.

Was ist Mittelstand-Digital?
Mittelstand-Digital informiert kleine und mittlere Unternehmen über die Chancen und Herausforderungen der Digitalisierung. Die geförderten Kompetenzzentren helfen mit Expertenwissen, Demonstrationszentren, Best-Practice-Beispielen sowie Netzwerken, die dem Erfahrungsaustausch dienen. Das Bundesministerium für Wirtschaft und Energie (BMWi) ermöglicht die kostenfreie Nutzung aller Angebote von Mittelstand-Digital.
Der DLR Projektträger begleitet im Auftrag des BMWi die Kompetenzzentren fachlich und sorgt für eine bedarfs- und mittelstandsgerechte Umsetzung der Angebote. Das Wissenschaftliche Institut für Infrastruktur und Kommunikationsdienste (WIK) unterstützt mit wissenschaftlicher Begleitung, Vernetzung und Öffentlichkeitsarbeit.
Weitere Informationen finden Sie unter www.mittelstand-digital.de

2021-08-27T08:17:54+02:00August, 2021|Kategorien: Nachgelesen|Tags: , |