Unterschied zwischen User Interface (UI) User Experience (UX)
Veröffentlicht am: in der Kategorie: Internet
Der Unterschied zwischen UI User Interface und UX User Experience erklärt mit Hilfe von 2000 Wörtern. Genaue Differenzierung der Aufgaben eines UI Designers und eines UX Designers bzw. Engineers.
Was ist der Unterschied zwischen User Interface und User Experience? Ich steige in die Thematik erst ein, habe aber den Eindruck, dass viele (auch Experten) vermischen die beiden Begriffe oder aber nutzen sie wie Synonyme.
Als User Experience (UX) kann das Ergebnis eines Prozesses namens: User Interface Design (abgekürzt: UI) gesehen werden. Falls Dich also nur der Unterschied Interessiert, da ist es. Die Frage wäre damit beantwortet. Falls Du aber mehr über Grundlagen des User Experience Designs erfahren möchtest, wird es sich lohnen weiter zu lesen.
Es ist wichtig nicht nur zu verstehen, was der Unterschied zwischen UX und UI ist, sondern auch zu wissen, wie man gutes UX und UI Design betreibt und welche Grundsätze berücksichtigt werden müssen, um ein fehlerfreies UX Design Guide zu erstellen. Falls das eher Dein Anliegen ist, dann ist diese Anleitung genau für Dich.
Als Erstes muss aus dem Weg geräumt werden: User Experience und User Interface Design sind nicht ein und das Selbe. Es sind auch keine Begriffe, die einfach austauschbar sind. Man kann sie als Synonyme nicht verwenden. Warum? Weil sie zwei verschiedene Ansätze beschreiben.
User Interface
User Interface bezeichnet ein System mit dem ein Benutzer interagiert, um sein Ziel zu erreichen. Das Ziel dabei ist es den Wünschen der Nutzer entgegen zu kommen.
User Experience dagegen baut auf dem System (User Interface) auf und bezeichnet die Gesamtheit der emotionalen Empfindungen, die ein Nutzer durchlebt, während er in Kontakt mit dem System tritt. Wichtig dabei ist es zu beachten, dass darunter nicht nur die Interaktion mit Oberflächen, sondern die Interaktion mit dem gesamten System angesprochen wird.
Die Essenz der beiden Bereiche UX und UI vermischt sich auf dem Weg zu einem einheitlichen Ziel: Produktetablierung in den Köpfen und den Herzen der Anwender.
Was ist genau (UI) User Interface?
Schauen wir uns die beiden Bereiche UI und UX im einzelnen an und versuchen zu verstehen wie es zwischen User Experience und User Interface zu einem Zusammenspiel kommt, aus dem User Engagement resultiert.
Am weitesten verbreitet ist User Interface - daher beginnen wir erstmal mit dieser Domaine.
Zu Beginn lohnt sich häufig die Frage auf dem Kopf zu stellen: wann haben wir nicht mir UI zu tun?
User Interface ist garantiert kein Versuch dem Benutzer, Betrachter oder Anwender der Produkte eine schöne Bedienoberfläche zu bieten, an der sich sein Auge einfach nur erfreuen kann.
Die Hauptaufgabe des User Interface ist es, dem Anwender ein System zur Verfügung zu stellen, das die Arbeit - vor allem Interaktion mit dem Produkt oder dem Service ermöglicht. Bei der Gestaltung von User Interfaces muss sich der Experte permanent die folgende Frage stellen: was erwartet der zukünftige Nutzer des Systems. Erwartet er 3D Elemente, Schattierungen oder Übergangseffekte? Oder aber wünscht sich ein Anwender ein System, dass ihn möglichst nicht belastet und nicht stört, während er seine Aufgabe erfüllt?
Die User Interface Zutaten
Zusammengefasst kann man sagen, dass das Wesen von User Interface ist es ein System bereitzustellen, das die Erwartungen der Anwender vollständig erfüllt. Um dieses anspruchsvolle Ziel zu erreichen braucht man robuste Regeln. Im besten Fall sollte man alleine durch die Befolgung der Regeln das oben genannte Ziel erreichen. Einige in der Praxis erprobte Regeln lauten:
- Bewahre durchgehende Konsistenz innerhalb der gesamten Oberfläche
- Biete ein selbsterklärendes und intuitiv zu bedienendes Layout
- Biete eine Hilfestellung Falls der Anwender einen Fehler macht
- Verwende klare Bezeichnungen und eindeutige Etiketten
Im Detail heißt das folgendes:
Bewahre durchgehende Konsistenz im gesamten Interface
Der Schlüssel zur Nutzer-Aufmerksamkeit lieft in der Konsistenz des Layouts, der Oberfläche. Im englischsprachigen Raum wird häufig der Begriff User Retention verwendet. Dabei handelt es sich um die Merkfähigkeit der Anwender. Wenn eine Oberfläche vom Screen zum Screen anders aussieht - muss ich der Anwender permanent anpassen und er ist gezwungen sich eine Unmenge an Details zu merken. Ist ein Interface dagegen einheitlich und durchgängig - so kann sich jeder Anwender selbst zurecht finden, weil er die Eckpunkte und die wichtigsten Faktoren schon kennt und diese ändern sich nicht - sie bleiben konstant.
Als ein Beispiel kann man an dieser Stelle die Navigation einer Webseite nennen. Ein Programmierer ist in der Lage die Navigation innerhalb einer Domain auf verschiedenen Unterseiten jeweils wo anders zu platzieren, manchmal links, manchmal rechts, dann wiederum oben oder unten. Man kann das ganze auf die Pike treiben und sogar die Navigation beim jeden Aufruf der Seite nach dem Zufallsprinzip immer wo anders abbilden.
Klingt wie ein cooler Effekt - für den Anwender ist das ein reiner Horror. Er weiß überhaupt nicht was ihn beim nächsten Aufruf der Seite erwartet - seine Retention ist sehr gering. Das Ganze resultiert dann in der Abneigung des Anwenders. Er wird einfach nicht mehr eine solche Website besuchen wollen.
Versucht man dagegen die Nutzer Retention auf einem hohen Niveau zu halten - dann wirkt sich der gesamte Auftritt unter dem Domainnamen einfach angenehm und stimmig. Die Konsistenz der Anordnung der Elemente der Oberfläche führt dazu, dass ein Anwender oder Nutzer ein angenehm positives Erlebnis erfährt, jedes mal er die Seite besucht, (oder die App nutzt).
Tipp für konsistente Layouts
Verwende konsistente Typographie, Farben und Geometrie der Elemente innerhalb des gesamten Designs - also innerhalb aller Oberflächen, die zu einem Projekt gehören. Um die Botschaft der eigenen Marke rüber zu bringen braucht man keine Ausgefallene Logos auf jeder Unterseite. Eine dezente Unterbringung der Firmen-Farben reicht schon aus, beim Nutzer eine positive Erfahrung mit der Identität der Marke zu erleben.
Praxisbeispiel für Konsistenz: Apple
Die Webseite von Apple dient als ein Paradebeispiel für eine konsistente User Interface einer Website. Über die komplette Domain hinweg nutzt Apple die gleiche Typographie. Um Überschriften und Kategorien von Paragraphen-Texten zu unterscheiden wird ausschließlich mit der Schriftgröße variiert. Sehr selten, und zwar nur im Footer, wird mit der Schriftgröße und der Type-Face Bold - also Fett - gearbeitet.
Das UI macht einen sehr aufgeräumten, ruhigen und sehr ästhetischen Eindruck. Der Besucher erfährt dadurch möglichst viel über die Produkte, die Unterschiede zwischen denen und kann seinen Fokus direkt den MacBooks, den iPads und iPhones widmen. Und darum geht es auch auf dieser Seite. Besucher soll möglichst viel erfahren über die Produkte, nicht über das Design, schrille Farben oder verrückte Effekte.
Selbsterklärendes und intuitives Layout
Gibt dem Besuchern / Nutzern nicht das Gefühl auf Deiner Website verloren zu sein. Die Aufmachung des Projekts soll intuitiv nachvollziehbar sein. Ein Nutzer soll nicht auf eigene Faust versuchen herauszufinden was er mit der Seite anstellen kann und wo er hin gelang, wenn er auf etwas klickt. Das Design soll auf den ersten Blick erkennen lassen, worum es auf der Seite geht. Um dieses Ziel zu erreichen gibt es mehrere Methoden.
Tipp: Nutzer On-Boarding
Eine davon ist: Nutzer an die Hand nehmen und ihnen zeigen, was das Projekt alles kann. Im englischsprachigen Raum wird die Bezeichnung „user on-boarding" verwendet. Der Nutzer wird bei der Erkundungsreise begleitet. Bietet eine Website unterschiedliche Funktionalitäten - so werden diese eine nach der anderen (an sinnvollen Stellen) erklärt. Man kann das mit einer Führung in einem Museum oder einer Uni-Führung für Erstsemester-Studenten vergleichen. Sie werden an der Hand genommen und Schritt für Schritt erfahren sie, was es alles zu sehen gibt. Mit Hilfe dieser Methode können sogar sehr komplexe Systeme schnell verständlich gemacht werden.
Praxisbeispiel für Nutzer On-Boarding: Trello
Trello ist eine kostenlose Onlineplattform für unkompliziertes und ästhetisch aufbereitetes Projektmanagement. Auf dieser Seite können Anwender alles egal wie komplex, mit allen - egal wie viele Teammitglieder, organisieren. Die Organisation erfolgt über Karten (so ähnlich wie Karteikarten, die man von einem Stapel zum anderen Stapel verschiebt um damit Überblick zu behalten - was nur als Idee vermerkt, was in Arbeit und was fertig ist. Man kann unzählige Spalten anlegen, und in diesen Spalten unzählige Karten hin und her schieben. In der Fachsprache der Projektmanager heißt dieses Verfahren: Kanban Prinzip.
Nach dem ersten Login bei Trello bekommt der Anwender ein Board zu sehen auf dem jedes Element erklärt ist . Klickt man sich ein mal durch - hat man alles verstanden.
Von Nutzern gemachte Fehler müssen Entwickler verzeihen
Bei der Gestaltung von Nutzeroberflächen darf nicht vergessen werden, dass die Anwender einfach nur Menschen sind. Spricht - sie machen Fehler. Und diese Fehler müssen verziehen werden. Wenn der Nutzer einen Fehler begeht, dann muss er die Gelegenheit dazu bekommen oder eine Hilfestellung, um aus diesem Fehler herauszukommen. Das Thema scheint sehr eng gefasst zu sein, aber Fehlertoleranz kann in einzelne Bereiche aufgeteilt werden. Wenn diese Bereiche nacheinander abgearbeitet oder zumindest berücksichtigt werden - hat der Entwickler die meisten Fehlermöglichkeiten schon im Vorfeld beseitigt.
Die Usability ISO-Norm ISO 9241-10 sieht folgende Fehlerklassifikation:
- Vermeidbare Fehler
- bekannte, nicht vermeidbare Fehler
- nicht antizipierbare Fehler
- Fehlervermeidung
- Fehlerkorrektur
Diese Systematisierung der Fehler hilft den unvorhersehbaren Fahler-Chaos zu strukturieren und zu bereinigen.
Klare und eindeutige Bezeichnungen
Klare und eindeutige Beschriftungen innerhalb einer Oberfläche sind essenziell für das Gefühl der Verbundenheit, das zwischen dem Interface und dem Nutzer entstehen kann. Wenn Du Interfaces auf deutsch gestaltest, bist Du im Vorteil. Die Deutsche Sprache bietet wie kaum andere Sprache, eine unglaubliche Vielfalt. Diese Vielfalt kann genutzt werden um die Gedanken sehr präzise auszudrücken. Die Sprach-Medaille hat allerdings eine Kehrseite. Die Kehrseite nennt sich Komplexität. Je reicher der Wortschatz einer Sprache, desto komplexer wird sie. Das stellt die UX und UI Designer vor einer Herausforderung.
Praxisbeispiel: Wortwahl
Wenn ich eine Applikaton gestalte, die mir das Verwalten und Anlegen von Terminen in einem Kalender ermöglicht und ich regelmässige Termine eingeben möchte - welches „Wording" wähle ich dazu? Auf einem Smartphone steht nur begrenzt Platz zur Verfügung. Soll ich den Begriff Serientermin nehmen? Serientermin ist nicht wirklich etabliert. Oder vielleicht wiederkehrender Termin? Dieser Term ist weit verbreitet und etabliert, er ist aber zu lang. Also lieber ein kürzeres Wort, aber keine Serie. Vielleicht Reihe? Eine Termin Reihe? Wenn ich dann zum Training fahren will, dann muss ich eine Training Reihe eingeben? Irgendwie werde ich mit der Auswahl nicht wirklich zufrieden.
Genau solche Herausforderungen müssen in der Softwarekonzeption angegangen werden, damit die Nutzer ein leicht und intuitiv aber gleichzeitig Funktions-starkes Software Produkt in die Hände bekommen. Und auch Spaß haben es zu verwenden.
Die Beschriftungen und Labes für Buttons, Kategorien und Funktionen sind wie Etiketten auf Produkten im Superparkt. Sie müssen eindeutig sein, damit die Käufer die richtigen Produkte für sich schnell und intuitiv aussuchen können. Daher ist eine gut durchdachte Vokabular-Strategie für eine Applikation eine schwere und aufwendige Aufgabe.
Sicherlich gibt es noch eine breite Palette an Faktoren, die das perfekte User Inteface entstehen garantieren. Die oben genannten sind aber essenziell und sollen auf jeden Fall bei der Konzeption von Produkten berücksichtigt werden.
Schauen wir uns jetzt mal an: Was User Experience, abgekürzt UX ist. Dann wird der Unterschied ziemlich klar sein.
User Experience (UX)
Der Begriff User Experience wir häufig mit dem Attribut Design verwendet - User Experience Design. (Was meiner Meinung nach inhaltlich nicht korrekt sein kann, das erkläre ich etwas später). Außerdem die Verwendung des Wortes Design in beiden Fällen, führt zu der Verwirrung rund um UI und UX.
User Experience kann als ein Oberbegriff verstanden werden. Er beherbergt mehrere Aspekte, die einen Einfluss auf das Hauptziel haben. Das Hauptziel wie oben geschildert ist: Oberflächen oder Produkte zu schaffen, die die Bedürfnisse der Nutzer erfüllen. Zu den Aspekten gehören: die Informationsarchitektur, Grafisches Design, Interaction Design, Inhalt, Gebrauchstauglichkeit - also Usability, Funktionalität, Nutzer- Anforderungen,
Um die Antwort auf die Frage: was ist User Experience kurz und knackig zu beantworten muss man die Interaktion des Anwenders mit einer Website, einer App oder einem anderen Produkt in zwei Kategorien aufteilen.
Zum einen geht es darum ob der Nutzer sein Ziel erreicht. Er hat ein Problem, und er nutzt unser Produkt, um das Problem zu lösen. Kommt er mit Hilfe unseres Produkts weiter? Löst er das Problem nur teilweise oder vollständig?
Zum anderen empfindet der Anwender einen bestimmten emotionalen Zustand, während der Nutzung. Dies geschieht überwiegend unbewusst. Er fühlt sich einfach gut, während er das Tool verwendet, oder aber bekommt er miese Laune, je länger er sich mit dem Problem und dem Tool herumschlagen muss.
Diese Emotionale Ebene - das ist genau User Experience. Man kann sagen, dass User Interface dafür sorgt, OB ein Nutzer sein Ziel erreicht. User Experience ist dagegen dafür verantwortlich, WIE der Nutzer sein Ziel erreicht. Was für eine emotionale Aufladung generiert er, während der Nutzung der Produkte, die wir geschafft haben.
Wie beim UI gibt es beim UX gewisse Zutaten, die das Endprodukt schmackhaft oder ungenießbar machen.
Die User Experience Zutaten
- Verstehe das Verhalten der Nutzer
- Verstehe die Vorlieben der Nutzer
- Identifiziere Elemente, die den Nutzer beeinflussen
- Identifiziere die Trends, den die Nutzer folgen
Um gute User Experience zu gewährleisten, muss man verstehen, wie der Nutzer tickt, der das Produkt verwenden wird.
Ich hoffe, dass die obige Beschreibung liefert eine ausreichende Antwort auf die Frage was ist der Unterschied zwischen User Interface und der User Experience. Die beiden Domänen sind recht umfangreich und sie überschneiden sich. Das macht die Systematik nicht einfacher. Man kann sich den Unterschied so merken, dass UI und UX nicht dasselbe Ding sind und UX liefert einen großen Teil zum UI.
Falls Du ein anderes Verständnis von dem Unterschied zwischen UX und UI hast, zögre nicht und lass mich es über Kommentare zu diesem Beitrag wissen. Ich lerne gerne etwas dazu.
