UX vs. UI: Was ist der Unterschied? Und wie arbeiten sie zusammen? - 99designs (2024)

CMS, SMO, SERP, OMG! Die Tech-Branche liebt Akronyme. Aber für Designschaffende und Menschen, die sich selbst um ihr digitales Design kümmern, scheinen UX und UI die verwirrendsten zu sein, weil sie sich nicht nur durch lediglich einen Buchstaben unterscheiden, sondern auch zusammenhängen. Beim Blick auf UX vs. UI muss man wissen, was was ist, denn trotz der Überschneidungen bringt jedes seine eigenen Probleme mit sich – und die Lösung des einen wird die Probleme des anderen nicht lösen.

In diesem Artikel werfen wir einen Blick auf UX vs. UI, um Klarheit zu schaffen und zu erklären, was was ist, damit du beide für deine Website oder App optimieren kannst. Es ist wichtig, die Unterschiede zwischen UX und UI zu kennen, denn um zum besten Ergebnis zu gelangen, genügt es nicht, nur das Eine zu meistern. Du musst dich mit beiden auskennen.

Was ist UI Design?
—

Wofür steht UI? UI bedeutetUser Interface(Benutzeroberfläche) und bezieht sich auf die Bedienelemente, Buttons oder alles, was für die Interaktivität (z. B. Mikrofone oder Gestensteuerungen) von Webseiten, Apps und Videospielen genutzt wird. Bei UI Design geht es also darum, wie du deine Bedienelemente designst, indem du zum Beispiel den „Like“-Button in Form eines Herzens an der Unterseite eines Bildes platzierst oder die User mit dem Mauszeiger über einen Dropdown-Tab fahren lässt, damit es sich öffnet.

UI Design ist fundamental für jedes interaktive, digitale Produkt. Du willst eine Benutzeroberfläche designen, die selbsterklärend ist, damit selbst neue User herausfinden, wie man sie benutzt. Gleichzeitig musst du die Benutzeroberfläche unauffällig gestalten, damit die Bedienelemente nicht den eigentlichen Content verdecken (denke an Smartphone-Tastaturen, die nur dann erscheinen, wenn man etwas tippen muss).

Um den Usern dabei zu helfen, die Bedienelemente sofort zu verstehen, basieren die meisten UI Designs auf sogenannten „Mustern“. Bei diesen handelt es sich schlicht um Standards und Gemeinsamkeiten zwischen Seiten, Apps etc. Eines der beliebtesten UI-Muster ist die Verwendung des Lupensymbols für Suchleisten – sobald du dieses Symbolirgendwosiehst, weißt du, was es bedeutet.

UI-Muster können sich auch auf Funktionen beziehen. Ist dir schon mal aufgefallen, dass die meisten Webseiten ihr Logo in der oberen linken Ecke platzieren und dass du zurück zur Homepage gelangst, wenn du es anklickst? Dieses UI-Muster stellt sicher, dass du immer zurück zur Homepage findest, selbst wenn du zum ersten Mal auf einer Seite bist. UI-Muster kopieren einfach übliche Steuerungen, damit die User sie sofort erkennen.

Zum Aussehen der Benutzeroberfläche, die ebenfalls in den Bereich des UI Designs fällt, gibt es viel zu sagen. Designer und Designerinnen können Bedienelemente erstellen, die zur Atmosphäre der Seite oder App passen, indem sie beispielsweise Markenfarben oder die charakteristische Typografie der Marke verwenden, falls notwendig.

Wie sieht es aber mit Designentscheidungen aus, die Einfluss darauf haben, wie die Leute die Seite verwenden, zum Beispiel Buttons mit auffälligen Farben oder Animationen, um aufzufallen? An dieser Stelle betritt UI Design den Bereich des UX Designs und die Unterschiede werden unscharf…

Was ist UX Design?
—

Wofür steht UX? UX bedeutetUser Experience(Nutzererlebnis) und bezieht sich darauf, wie die Menschen sich fühlen, wenn sie eine Seite oder App benutzen. UX kann sich wirklich auf alles beziehen, selbst nicht-digitale Produkte. Aber für diesen Artikel bleiben wir bei Webseiten und Apps.

UX Design ist ein bisschen schwieriger zu verstehen, weil es abstrakter ist. Während UI Design sich mit konkreteren Dingen beschäftigt, kümmert sich UX um die emotionale Seite der Dinge. Ist die Nutzung dieser Seite oder App einfach und intuitiv? Sind die User frustriert, wenn sie nicht das finden, wonach sie suchen?

Einer der wichtigsten Teile des UX Designs ist, zu ahnen, was die User tun werden, und die gesamte Seite/App darum zu gestalten. Bei Social-Media-Websites wie Instagram geht es zum Beispiel darum, dass die Nutzer mit den Inhalten anderer interagieren, sodass mehr Platz auf dem Bildschirm für die Anzeige der Bilder zur Verfügung steht.

View this post on Instagram

A post shared by 99designs (@99designs)

Wir sind so darangewöhnt, große Bilder und kleineBedienelemente in den sozialen Medien zu sehen, dass wir vergessen, dass es sich hierbei um eine bewusste Designentscheidung handelt.

Gleichzeitig wird weniger beliebten Aktionen sehr wenig Platz auf dem Bildschirm eingeräumt, zum Beispiel das Ändern von Einstellungen, was nur über das eigene Profil möglich ist. Eines der grundlegendes UX Design-Prinzipien ist, häufige Aktionen mit einem oder zwei Klicks zu vereinfachen und dafür weniger häufige Aktionen zu opfern, welche du hinter anderen Menüs verstecken könntest, um Platz zu sparen.

Anders ausgedrückt, ein UX Design kann Einfluss darauf haben, was die User tun, indem es bestimmte Aktionen hervorhebt und andere abschwächt. Die meisten kommerziellen Webseiten nutzen auffällige Call-to-Action-Buttons (z. B. „Hier anmelden“), um Aufmerksamkeit zu erregen und für mehr Klicks zu sorgen; gleichzeitig werden rechtliche und urheberrechtliche Informationen häufig an den unteren Rand der Seite verbannt und in kleiner, unaufdringlicher Schrift geschrieben, um die User nicht abzulenken.

Das Design der Bedienelemente so zu gestalten, dass sie bestimmte Aktionen fördern, fällt sowohl in den Bereich von UI als auch UX. Du siehts also langsam, wo es zu Verwirrung kommt.

Was ist der Unterschied zwischen UX und UI?
—

Abgesehen von den Überschneidungen sind UX und UI ein jeweils eigenständige Bereiche. Selbst wenn sie es mit denselben Probleme zu tun haben, zum Beispiel die Platzierung der Bedienelemente, verfolgen UX und UI jeweils unterschiedliche Ansätze mit unterschiedlichen Prioritäten.

UI Design ist technischer als UX Design. Es kümmert sich um Aussehen und Platzierung der Bedienelemente, auch wenn die Vorlieben der User (welche unter UX fallen) noch immer Einfluss auf diese Aspekte haben sollten. Dennoch geht es bei UI Design mehr um die quantitativen Elemente, zum Beispiel wie viele Pixel ein Button breit sein sollte oder welcher Farbcode für den Button verwendet werden soll.

Bei UX Design geht es um die emotionale Seite, die qualitativen Elemente. UX Design konzentriert sich darauf, die Bedienung entsprechend der Bedürfnisse der User (oder was die Manager der Seite/App hervorheben wollen) zu optimieren. UX befasst sich mehr mit dem Abstrakten, beispielsweise damit, wie man Interaktionen so schmerzlos wie möglich gestalten kann.

Auch die Designmethoden unterscheiden sich. UI Design ist einfacher; Designer und Designerinnen erstellen Beispielsymbole und Bedienelemente, wobei sie besondere Funktionen wie Animationen oder das Verstecken dieser Funktionen beachten. UX Design ist dagegen umständlicher; die Designer und Designerinnen müssen für verschiedene Szenarien und Taskflows planen. Daher ist UX-Sketching eine beliebte Praxis.

Selbst wenn UI und UX mit denselben Bereichen zu tun haben, haben sie jeweils unterschiedliche Anliegen. Nimm zum Beispiel das Designen eines Buttons. Wenn UI Design über die Pixelbreite eines Buttons entscheidet, kümmert sich UX Design darum, ob dieser Button zu klein ist, um von den Usern gesehen werden zu können, oder ob er zu groß ist und somit wichtigeren Content verdeckt.

Um nun die perfekte Pixelgröße für einen Button zu kennen (UI Design), musst du die Vorlieben der User kennen (UX Design). Und um den Bedürfnissen der User gerecht zu werden (UX Design), musst du sorgfältig und proaktiv die Benutzeroberfläche erstellen (UI Design). Deshalb arbeiten UX Design und UI Design nicht gegeneinander, sondern miteinander.

Wie UX und UI zusammenarbeiten
—

Trotz allem Gerede über die Feindschaft zwischen UX und UI arbeiten sie in den meisten Fällen als Partner zusammen. Die Ergebnisse des UX Designs, z. B. zu wissen, was den Usern gefällt, bestimmen die Entscheidungen, die beim UI Design getroffen werden. Das Wissen um die perfekte Platzierung und das Aussehen von Bedienelementen, ganz zu schweigen von der Frage, welche Bedienelemente ausgeblendet oder zurückgestellt werden sollten, erfordert ein Verständnis sowohl für UI Design als auch UX Design.

Am meisten überschneiden sich UX und UI wenn es darum geht, die Benutzeroberfläche so komfortabel wie möglich zu gestalten – deine User sollen nicht zu sehr nachdenken oder umherklicken müssen. Diese meistgenutzten Bedienelemente sollten leicht erreichbar und unaufdringlich sein und sowohl die Ziele von UX als auch UI erfüllen. Die neuesten UX Design-Trends zeigen in diese Richtung.

Beim Designen der Bedienelemente solltest du sowohl die Ziele von UI als auch UX berücksichtigen. Bei Apps und mobilen Webseiten werden Buttons und Bedienelemente häufig an der Unterseite platziert. Der Grund dafür ist, dass dieser Bereich am nächsten am Daumen ist, wenn man ein Telefon hält. Somit lassen sich die Button leichter drücken, was dem UX Design zugute kommt. Die Buttons müssen zudem so designt sein, dass sie in diesen Bereich passen, indem man sie beispielsweise klein genug macht, nicht im Weg zu sein, oder sie in einem Menü versteckt, das bei Bedarf ausgeklappt werden kann – was wiederum in den Bereich des UI Designs fällt.

Die oben erwähnten Muster zu nutzen, funktioniert für beide Bereiche. Bei UX müssen die User keine neuen Bedienelemente erlernen oder sich Gedanken darüber machen, wie bestimmte Funktionen ausgeführt werden können. Für die Benutzeroberfläche sind die Grundlagen, wie die Bedienelemente aussehen und funktionieren sollten, bereits festgelegt, aber mit genügend Flexibilität, die es den Designschaffenden erlaubt, sie einzigartig zu gestalten.

Um sowohl UI als auch UX zufriedenzustellen, versuche deine Enduser zu verstehen. Wie immer sind User-Tests effektiver als einfach zu raten. Durch Split-Tests kann herausgefunden werden, welche Layouts oder visuellen Elemente bei einem bestimmten Nutzertyp besser funktionieren, während die Beobachtung der Teilnehmenden während der Nutzung eines Prototyps Aufschluss darüber geben kann, wie deine User denken oder wo es Raum für Verbesserungen gibt.

Zumindest kannst du einen Dialog mit deiner speziellen Nutzergruppe eröffnen, sei es durch einen Termin für ein persönliches Gespräch oder durch eine beiläufige offene Fragestellung in den sozialen Medien. Wenn es um UX vs. UI geht, sind die Unterschiede weniger wichtig, wenn du für die User entwirfst.

Zusammenfassung: UX vs. UI
—

Hier ist eine kurze Zusammenfassung zum Thema UX vs. UI:

• UI steht für User Interface. UI Design kümmert sich um das technische Design der Buttons, Bedienelemente und allem anderen für Interaktivität.
• UX steht für User Experience. UX Design kümmert sich darum, wie die User sich fühlen, wenn sie mit einer Seite oder App interagieren, zum Beispiel welche Vorlieben sie haben und was ihnen auffällt.
• Das physische Design der Benutzeroberfläche fällt unter UI Design, sollte aber durch UX beeinflusst sein, z. B. was die User über das Design der Benutzeroberfläche denken.
• Das Antizipieren von User-Aktionen und deren Erleichterung fällt unter UX Design, wird aber untrennbar von der Benutzeroberfläche beeinflusst, z. B. durch Aussehen und die Platzierung der Benutzeroberfläche.
• Der beste Weg, um sowohl UX Designs als auch UI Designs gerecht zu werden, besteht darin, die Zielgruppe zu verstehen: ihre Vorlieben, ihr Verhalten, ihre Gewohnheiten und ihre Denkweise. Dies lässt sich am besten durch User-Tests erreichen.