DESIGNDEVELOPMENT
Die Tech-Industrie liebt ihre Akronyme. Aber für Designer und Menschen, die sich mit digitalen Design befassen, scheinen UX und UI am verwirrendsten zu sein, da sie nicht nur einen Buchstaben voneinander entfernt sind, sondern auch verwandte Konzepte darstellen.
Bei der Gegenüberstellung von UX und UI ist es wichtig zu wissen, was was ist, denn trotz der Überschneidungen haben beide Begriffe ihre eigenen spezifischen Probleme – und die Lösung des einen löst nicht die Probleme des anderen.
In diesem Guide werfen wir einen Blick auf UX vs. UI, um die Verwirrung zu klären und zu erklären, was was ist, damit Sie beides für Ihre Website oder App optimieren können. Es ist wichtig, den Unterschied zwischen UX und UI zu verstehen, denn um die besten Ergebnisse zu erzielen, müssen Sie nicht nur das eine oder das andere beherrschen, sondern beide.
Was ist UI-Design?
Wofür steht UI? UI bedeutet Benutzeroberfläche und bezieht sich auf die Steuerelemente, Schaltflächen oder andere Elemente, die für die Interaktivität (z. B. ein Mikrofon oder Gestensteuerung) von Websites, Anwendungen und Videospielen verwendet werden. UI-Design ist also die Art und Weise, wie Sie Ihre Steuerelemente gestalten, z. B. indem Sie die “Gefällt mir”-Schaltfläche am unteren Rand eines Bildes platzieren oder die Benutzer mit dem Mauszeiger über eine Dropdown-Registerkarte fahren lassen, um sie zu öffnen.
Die Gestaltung der Benutzeroberfläche ist für jedes interaktive digitale Produkt von grundlegender Bedeutung. Sie sollten eine Schnittstelle entwerfen, die selbsterklärend ist, so dass auch neue Benutzer herausfinden können, wie sie zu benutzen ist. Gleichzeitig sollte die Benutzeroberfläche nicht zu aufdringlich sein, damit die Bedienelemente nicht vom eigentlichen Inhalt ablenken (denken Sie an Smartphone-Tastaturen, die nur eingeblendet werden, wenn Sie etwas eingeben müssen).
Damit die Benutzer die Steuerelemente auf Anhieb verstehen, stützen sich die meisten UI-Designs auf so genannte ” Pattern “, bei denen es sich einfach um Standards und Gemeinsamkeiten zwischen Websites, Anwendungen usw. handelt. Eines der beliebtesten UI-Patterns ist die Verwendung des Lupensymbols für Suchleisten – sobald Sie dieses Symbol irgendwo sehen, wissen Sie, was es bedeutet.
UI-Muster können sich auch auf Funktionen beziehen. Ist Ihnen schon einmal aufgefallen, dass die meisten Websites ihr Logo in der oberen linken Ecke platzieren und dass Sie, wenn Sie darauf klicken, zur Startseite zurückkehren? Dieses UI-Pattern sorgt dafür, dass Sie die Startseite auch dann wiederfinden, wenn Sie sich verirren, selbst wenn Sie zum ersten Mal auf einer Website sind. UI-Patterns kopieren einfach konventionelle Bedienelemente, damit der Benutzer sie sofort wiedererkennt.
Auch das Aussehen der Benutzeroberfläche spielt eine große Rolle und gehört ebenfalls zum UI-Design. Designer können Steuerelemente erstellen, die zur Stimmung der Website oder App passen, z. B. durch Verwendung von Markenfarben oder ggf. der charakteristischen Typografie der Marke.
Wie sieht es jedoch mit Design-Entscheidungen aus, die sich darauf auswirken, wie die Benutzer die Website nutzen, wie z. B. Schaltflächen mit auffälligen Farben oder Animationen, um aufzufallen? Hier beginnt die UI in das Gebiet der UX einzudringen, und die Unterschiede werden zunehmend unklarer.
(Credits: Halo UI/UX )
Was ist UX-Design?
Was bedeutet UX? UX bedeutet Benutzererfahrung und bezieht sich darauf, wie sich Menschen bei der Nutzung einer Website oder App fühlen. Eigentlich kann UX für alles gelten, auch für nicht-digitale Produkte.
UX-Design ist etwas schwieriger zu verstehen, weil es eher abstrakt ist. Während sich das UI-Design mit konkreteren und absoluten Aspekten befasst, geht es bei UX um die emotionale Seite der Dinge. Ist die Nutzung dieser Website oder App einfach und intuitiv? Fühlt sich der Benutzer frustriert, wenn er nicht findet, was er sucht?
Einer der wichtigsten Aspekte des UX-Designs besteht darin, zu antizipieren, was der Benutzer tun wird, und die gesamte Website/App darauf abzustimmen. Bei Social-Media-Websites wie Instagram geht es zum Beispiel darum, dass die Nutzer mit den Inhalten anderer interagieren, weshalb mehr Platz auf dem Bildschirm für die Anzeige der Bilder vorgesehen ist.
Es ist so üblich, große Bilder und kleine Bedienelemente auf sozialen Medien zu sehen, dass wir vergessen, dass dies eine bewusste Designentscheidung ist.
Gleichzeitig wird nur sehr wenig Platz auf dem Bildschirm für weniger beliebte Aktionen verwendet, wie z. B. das Ändern der Benutzereinstellungen, was nur über das eigene Profil möglich ist. Eines der wichtigsten UX-Design-Prinzipien besteht darin, häufige Aktionen mit einem oder zwei Klicks zu vereinfachen, indem man auf weniger häufige Aktionen verzichtet, die man hinter anderen Menüs verstecken kann, um Platz zu sparen.
Mit anderen Worten: Ein UX-Design kann das Verhalten des Benutzers beeinflussen, indem es bestimmte Aktionen hervorhebt und andere abschwächt. Die meisten kommerziellen Websites verwenden auffällige Grafiken für ihre Call-to-Action-Schaltflächen (z. B. “Hier anmelden, Jetzt buchen, Schneller Check out”), um die Aufmerksamkeit auf sich zu ziehen und mehr Klicks zu generieren – gleichzeitig werden rechtliche und urheberrechtliche Informationen oft an den unteren Rand der Seite verbannt und in kleinem, unscheinbarem Text geschrieben, damit sie den Benutzer nicht ablenken. Natürlich umfasst die Gestaltung der Steuerelemente zur Erleichterung bestimmter Aktionen sowohl UI als auch UX, so dass Sie sehen können, wo die Probleme herkommen.
(Credits: Halo UI/UX )
Was ist der Unterschied zwischen UX und UI?
Abgesehen von den sich überschneidenden Bereichen sind UX und UI jeweils ein eigener Bereich. Selbst wenn sie sich mit denselben Themen befassen, wie z. B. der Platzierung von Bedienelementen, verfolgen UX und UI jeweils unterschiedliche Ansätze mit unterschiedlichen Prioritäten.
Das UI-Design ist der technischere der beiden Bereiche. Es befasst sich mit dem Aussehen und der Platzierung der Bedienelemente, obwohl die Präferenzen des Benutzers (die unter UX fallen) diese Aspekte immer noch beeinflussen sollten. Das UI-Design befasst sich jedoch mehr mit den quantitativen Elementen, z. B. mit der Frage, wie viele Pixel eine Schaltfläche breit sein sollte oder welchen genauen Farbcode man für die Schaltfläche verwenden sollte.
Ebenso befasst sich das UX-Design mit der emotionalen Seite der Dinge, den qualitativen Elementen. UX-Design konzentriert sich auf die Optimierung der Nutzung in Übereinstimmung mit den Bedürfnissen der Nutzer (oder dem, was die Website-/App-Manager hervorheben wollen). UX befasst sich mehr mit dem Abstrakten, z. B. damit, wie man Interaktionen so schmerzlos wie möglich gestalten kann.
Auch die Methoden der Gestaltung sind unterschiedlich. UI-Design ist einfacher: Die Designer erstellen Muster der Symbole und Steuerelemente, wobei sie besondere Funktionen wie Animationen oder das Verstecken dieser Funktionen beachten. Das UX-Design ist dagegen umständlicher; die Designer müssen mehrere Szenarien und Aufgabenabläufe planen, weshalb UX-Skizzen sehr beliebt sind.
Selbst wenn sich UI und UX mit demselben Bereich befassen, haben sie jeweils unterschiedliche Anliegen. Nehmen Sie zum Beispiel die Gestaltung einer Schaltfläche. Wenn das UI-Design die Breite einer Schaltfläche bestimmt, geht es beim UX-Design darum, ob die Schaltfläche zu klein ist, damit der Benutzer sie sehen kann, oder zu groß, so dass sie Inhalte mit höherer Priorität verdeckt.
Um die perfekte Pixelgröße für eine Schaltfläche zu finden (UI-Design), muss man die Präferenzen des Nutzers kennen (UX-Design). Und um die Bedürfnisse des Nutzers zu befriedigen (UX-Design), muss man die Schnittstelle sorgfältig und proaktiv gestalten (UI-Design).
(Credits: Alan Love)
Wie UX und UI zusammenarbeiten
Bei allem Gerede über die Beziehung zwischen UX und UI arbeiten beide in den meisten Fällen als zuverlässige Pärchen zusammen. Die Ergebnisse des UX-Designs, z. B. das Wissen darüber, was dem Benutzer gefällt, diktieren die Entscheidungen, die beim UI-Design getroffen werden. Das Wissen um die perfekte Platzierung und das Aussehen von Steuerelementen, ganz zu schweigen von der Frage, welche Steuerelemente ausgeblendet oder zurückgestellt werden sollten, erfordert ein Verständnis sowohl für UI- als auch für UX-Design.
Die größte Überschneidung zwischen UX und UI besteht darin, die Benutzeroberfläche so bequem wie möglich zu gestalten – Sie wollen nicht, dass Ihre Benutzer zu viel nachdenken oder sich zu viel bewegen müssen. Die am häufigsten verwendeten Steuerelemente sollten leicht zugänglich und unaufdringlich sein, um den Zielen von UX und UI gerecht zu werden. Die neuesten UX-Design-Trends weisen in diese Richtung.
Bei der Gestaltung von Steuerelementen sollten Sie die Ziele von UI und UX berücksichtigen. Bei Telefon-Apps und mobilen Versionen von Websites sind die Schaltflächen und Steuerelemente beispielsweise häufig unten angeordnet. Der Grund dafür ist, dass dieser Bereich beim Halten eines Telefons den Daumen am nächsten ist, wodurch die Tasten leichter zu drücken sind, was der UX zugute kommt. Die Schaltflächen müssen auch so gestaltet sein, dass sie in diesen Bereich passen, z. B. so klein, dass sie nicht im Weg sind, oder in einem versteckten Menü, das bei Bedarf herausgezogen werden kann – was eine Entscheidung des UI-Designs ist.
Die Verwendung von Pattern, wie oben erwähnt, funktioniert oft für beide Bereiche. Für die UX muss der Benutzer keine neuen Steuerelemente 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 Steuerelemente aussehen und funktionieren sollten, bereits festgelegt, aber mit genügend Flexibilität, die es dem Designer erlaubt, sie einzigartig zu gestalten.
Um sowohl der UI als auch der UX gerecht zu werden, sollten Sie versuchen, Ihren Endbenutzer zu verstehen. Wie immer ist dies mit tatsächlichen Benutzertests besser möglich als mit Vermutungen. Mit Hilfe von Split-Tests lässt sich feststellen, welche Layouts oder visuellen Elemente bei einem bestimmten Nutzertyp besser funktionieren, während die Beobachtung der Teilnehmer bei der Verwendung eines Prototyps Aufschluss darüber geben kann, wie Ihre Nutzer denken oder wo es Verbesserungspotenzial gibt.
Zumindest können Sie einen Austausch mit Ihrer jeweiligen Nutzergruppe eröffnen, sei es durch einen formellen Termin für ein persönliches Gespräch oder durch eine beiläufige Frage in den sozialen Medien. Wenn es um UX- oder UI-Design geht, sind die Unterschiede weniger wichtig, wenn Sie für den Benutzer entwerfen.
