UI vs UX

by Melissa

UI (User Interface) und UX (User Experience) werden oft verwechselt, konkurriert oder miteinander verschmolzen. Doch was sind wirklich die Gemeinsamkeiten und worin unterscheiden sich diese Disziplinen? Und welche der beiden ist wichtiger?

Mit UI (User Interface) wird oft das Visual Design bezeichnet, also das «Look-and-Feel» einer Applikation. Es geht hier also vor allem um die visuelle Gestaltung, wie beispielsweise Farben, Formen, Typographie und Layout. Mit UX (User Experience) wird oft das Interaction Design bezeichnet, welches alle Aspekte der Interaktion des Nutzers mit dem Produkt umfasst. Diese Disziplin befasst sich vordergründig damit, wie die Applikation strukturiert sowie organisiert wird und berücksichtigt zudem auch den Workflow des Benutzers.

Beispiele zur Verdeutlichung

Oftmals wird der Unterschied der beiden Disziplinen anhand einer Ketchup-Flasche veranschaulicht. Die Glasflasche soll dabei das UI repräsentieren, da diese ästhetisch ansprechender gestaltet ist. Im Gegensatz dazu verkörpert die Plastikflasche UX, da diese leichter zu handhaben ist und das Ketchup einfacher herausgedrückt werden kann.

                   Quelle: https://dribbble.com/shots/5812794-UI-vs-UX-is-NOT-a-thing

Als weiteres Beispiel zur Veranschaulichung dient die Frage, ob es sinnvoller ist, Blocksatz (Zeilen werden auf die gleiche Breite gebracht) oder Flattersatz (Zeilen laufen ungleichmässig aus) zu verwenden. Optisch wirkt der Blocksatz meist ruhiger und daher professioneller, aus UI-Sicht würde man die Verwendung dessen empfehlen. Aus UX-Perspektive betrachtet ist allerdings anzumerken, dass der Blocksatz für das menschliche Auge schwieriger zu lesen ist, da die Wortabstände ungleichmässig sind und Wörter mit einem Trennstrich getrennt werden. Vor allem im Webdesign lautet die Devise daher klar, nur Flattersatz zu verwenden. Gerade auf mobilen Geräten vergrössern sich die Wortabstände nochmals und die Worttrennungen werden zahlreicher, was die Lesbarkeit erheblich beeinträchtigt.

Konkurrierend oder ergänzend?

Nach den vorangehenden Ausführungen scheint es nun wohl so, als würden sich die beiden Disziplinen konkurrieren. Entweder man gestaltet die Applikation ästhetisch ansprechend oder benutzerfreundlich, aber nicht beides. Ja, in gewissen Fällen stehen UI und UX miteinander in Konkurrenz, allerdings ergänzen sich diese im Optimalfall und unterstützen sich gegenseitig. Denn nur so kann ein positives Nutzererlebnis (Joy of Use) erzielt werden.

Wie ein solches positives Nutzererlebnis realisiert werden kann, ist anhand von Buttons veranschaulichbar. Ein Button ist eines der wichtigsten Elemente einer Applikation. Häufig wird zwischen primary, secondary und tertiary Buttons unterschieden. Das Ziel dieser Klassifizierung ist es, je nach Wichtigkeit der Aktion einen anderen Button zu verwenden. Die Buttons werden demnach visuell mehr oder weniger hervorgehoben, um so dem Benutzer zu signalisieren, welche Aktion relevanter ist. Hier findet somit ein Zusammenspiel von UI und UX statt: Das UI definiert das Aussehen, während die UX die Struktur und Anordnung der Buttons vorgibt.

Dies wird oft bei «Save» und «Cancel» Buttons verwendet. Durch die visuelle Unterscheidung wird für den Benutzer deutlich, dass er im Normalfall «Save» anwählen und nur in Ausnahmefällen auf «Cancel» klicken soll.

Das eine schliesst das andere nicht aus

Die zusammenfassende Erkenntnis ist demnach, dass UI ohne UX und UX ohne UI nicht denkbar sind, diese einander nicht ausschliessen und im Idealfall Hand in Hand gehen sollten. Auch wenn sie sich teilweise widersprechen, soll es schlussendlich immer das Ziel sein, die beiden Interessen miteinander zu vereinen und das Beste aus einer Kombination herauszuholen. Bei einem Interessenskonflikt lohnt es sich allerdings, der UX (den Bedürfnissen des Benutzers) mehr Gewichtung zu geben als dem UI (der Ästhetik).

Diese Gewichtung veranschaulicht auch die Prinzipien-Pyramide, die in der nebenstehenden Abbildung gezeigt wird. Die Basis bildet dabei die Empathie: Der Benutzer soll in den Fokus der gesamten Applikation gestellt werden. Weiter ist es wichtig, die Applikation klar und verständlich zu gestalten. Auch die Effizienz sowie die Konsistenz sind weitere bedeutende Prinzipien. Die Ästhetik bildet dabei das «Tüpfli auf dem i» und soll die darunterliegenden Prinzipien zusätzlich verstärken.