Unterschied zwischen User Interface (UI) und User Experience (UX)

Der Unterschied zwischen User Interface (UI) und User Experience (UX) ist am einfachsten zu erklären, indem wir die Begriffe übersetzen. Das eine ist die Benutzeroberfläche, das andere die Benutzererfahrung. Kurz gesagt:

Das, was man sieht vs. das, was man empfindet!

Vereinfacht gesagt beschäftigen sich UI-Designer:innen damit, wie die Oberfläche einer Anwendung aussieht. UX-Designer:innen kümmern sich darum, dass sie einfach und intuitiv bedient werden kann. Oft sind aber beide Kompetenzen vorhanden, sodass von UI-/UX-Design gesprochen wird.Um einen detaillierten Überblick zu bekommen, möchten wir die Begriffe in diesem Beitrag trotzdem einzeln definieren und Fragen beantworten wie:

• Was ist UX-Design?
• Was ist das User Interface (UI)?
• Was macht ein UI-Designer?
• Welche Aufgaben haben UX-Designer?
• Was ist Usability?

Das versuchen wir natürlich so verständlich wie möglich, denn Einfachheit ist entscheidend. Wie beim Schreiben von Texten über komplexe und komplizierte Themen muss auch beim UI-/UX-Design darauf geachtet werden, dass es zwar besonders, aber dennoch einfach und verständlich ist.

Wenn UI-/UX-Designer das, was sie gemacht haben, erklären müssen,

dann haben sie es nicht gut gemacht!

Es geht darum, Produkte ansprechend, einfach und intuitiv zu gestalten. Gute Produkte brauchen ein gutes UI-/UX-Design.

Noch eine wichtige Information vorab: Wenn wir hier von "Produkten" sprechen, beziehen wir uns auf digitale Produkte, wie wir sie anbieten. Also Apps, Webseiten, Webanwendungen oder Software. Im Allgemeinen begegnet uns UI-/UX-Design aber sehr häufig - auch im Alltag.

User Interface: Was macht ein UI-Designer?

Zuerst eine Antwort auf die Frage: Was ist das User Interface? Ins Deutsche wird der Begriff meist mit "Benutzeroberfläche" oder "Nutzerschnittstelle" übersetzt.

In diesem Fall bezeichnet das Wort "Schnittstelle" einfach nur den Punkt, an dem wir mit einer Soft- oder Hardware in Kontakt treten. Ich öffne ein Programm und sehe das User Interface. Beispielsweise die Benutzeroberfläche meines E-Mail-Anbieters, wo ich meine Login-Daten eingebe. Quasi der Berührungspunkt zwischen Mensch und Gerät oder Programm. Eben das, was ich sehe.

Bei Computerprogrammen wird noch etwas spezieller von einer "grafischen Benutzeroberfläche" gesprochen - übersetzt vom englischen Graphical User Interface (GUI).

Es heißt, dass das User Interface intuitiv sein muss und Nutzer:innen möglichst schnell und effizient zum Ziel kommen müssen. Zu der Definition der User Experience kommen wir zwar erst noch - wir nehmen aber an dieser Stelle schon mal vorweg, dass es diesbezüglich eine ähnliche Definition gibt. Da kommt schnell die Frage auf: Wo ist der Unterschied zwischen UI- und UX-Design?

Antwort: Das UI-Design konzentriert sich ausschließlich auf die Benutzeroberfläche und deren Gestaltung. Auf nichts anderes. Die Technik spricht eine andere Sprache als wir und das User Interface hilft uns bei der Kommunikation, damit wir ein Produkt verstehen und die Interaktion ohne Probleme funktionieren kann. Wie sollte eine Benutzeroberfläche idealerweise gestaltet sein? So, dass wir Bekanntes erkennen und sofort zuordnen können!

Beispiele:

Ein Plus bedeutet für uns in der Regel immer, dass wir an dieser Stelle etwas hinzufügen können. Einen neuen Tab im Browser, einen neuen Beitrag auf sozialen Medien wie Instagram oder ein neues Lebensmittel in meiner Ernährungsapp.

Ein X signalisiert uns, dass wir etwas schließen oder entfernen können. Den Tab im Browser, den wir nicht mehr brauchen. Den neuen Beitrag bei Instagram, den wir nun doch nicht erstellen möchten oder das Lebensmittel, das ich doch nicht gegessen habe.

Eine Diskette zeigt uns, dass wir etwas speichern können. Das Symbol ist ziemlich gut gealtert: Was es bedeutet wissen auch diejenigen, die zu jung sind, um noch aktiv mit Floppy Disks als Speichermedium gearbeitet zu haben.

Eine Lupe bedeutet für uns automatisch, dass wir an dieser Stelle nach etwas suchen können. Ein schmales Feld, in dem oft ein Beispiel oder eine Aufforderung in grauer Schrift hinterlegt ist, heißt, dass ich dort etwas hineinschreiben kann.

Das User Interface weckt Erwartungen an das, was passieren muss!

All das ist schon derart in uns verankert, dass wir ein Plus oder ein X gar nicht mehr bewusst wahrnehmen. Wir nutzen es einfach und jede Aktion kommt uns völlig natürlich vor, weil wir sofort erkennen, welchen Befehl ein bestimmtes Symbol auslöst. Dafür muss im Anschluss an das UI-Design allerdings das passende UX-Design erstellt werden - sonst werden unsere Erwartungen enttäuscht.

Es stimmt also, dass das User Interface intuitiv und benutzerfreundlich designt sein muss. Die Benutzerfreundlichkeit des User Interface ist der Grundstein dafür, dass die User Experience gut sein kann. Das User Interface bedingt die User Experience.

Ohne UI keine UX!

Wenn wir etwas nicht verstehen und ein Produkt für uns keinen logischen und nachvollziehbaren Aufbau hat, werden wir auch keine guten Erfahrungen (User Experience) damit machen. Im Gegenteil: Wir sind frustriert und haben keine Lust mehr, das Programm oder die App zu nutzen.

Was alles technisch im Hintergrund abläuft, interessiert uns als Nutzer:innen wenig. Wir möchten das User Interface verstehen, eine Aktion ausführen und die erwarteten Ergebnisse sehen - wie auch immer die Anwendung oder Software uns technisch dorthin bringt.

User Experience: Was ist UX-Design (UX)?

Die User Experience (UX) ist die Nutzererfahrung und umfasst zunächst einmal alles, was uns für ein Produkt begeistern kann. Alles, was Gedanken und Emotionen hervorruft, wenn wir ein Produkt nutzen. Keiner von uns möchte ewig suchen und planlos durch die Gegend klicken. Wir möchten möglichst schnell, effektiv und intuitiv ans Ziel. Und wir möchten, dass Produkte ansprechend sind. Hier geht das User Interface Design also nahtlos in das User Experience Design über.

Um zu gewährleisten, dass Nutzer:innen sich mit einer Anwendung wohlfühlen und sie gerne nutzen, ist ein gutes User Experience Design unabdingbar. Das Ziel von UX-Designer:innen ist es, für eine gute Nutzererfahrung zu sorgen. Dafür müssen sie Antworten auf viele Fragen finden, wie beispielsweise:

• Welche Intention hat das Produkt?
• Welchen Nutzen soll es bringen?
• Welche Funktionen benötigt die Anwendung oder Software?
• Gibt es aktuelle und wichtige Trends?
• Wie interagieren Nutzer:innen damit? Stichwort: User Journey.
• Wie halte ich die Klickwege möglichst gering und die Entwürfe clean?
• Wie löst die Konkurrenz all das bei ähnlichen Produkten?

Kurz zusammengefasst sehen die Arbeitsschritte im Bereich UI-/UX-Design so aus:

Gute UX-Designer:innen müssen also zwingend die Kompetenz mitbringen, sich in andere Menschen hineinversetzen zu können. Sie müssen die Erwartungshaltung kennen. Das ist nicht immer einfach, denn wir alle wissen: Je länger man in einem Job arbeitet, desto betriebsblinder wird man.

Das darf in dieser Branche nicht passieren, da sich die Designer:innen in den unterschiedlichsten Branchen bewegen und immer wieder für eine andere Zielgruppe Designs entwerfen müssen. Dabei unterscheiden sich die Ansprüche zum Teil stark, was unter anderem die Arbeitsweise, Funktionen, Farbwelten oder auch Bilder betrifft.

Schlechtes User Experience-Design

Jedem von uns ist im Alltag schon mal schlechtes UX-Design begegnet. Auch, wenn wir es in diesen Momenten vermutlich nicht so definiert haben. Wir ärgern uns einfach nur, wenn etwas nicht funktioniert.

Beispiele:

1. Du möchtest ein Bahnticket am Automaten kaufen. Welchen Tarif brauche ich? Wo sehe ich, in welchem Tarifgebiet ich mich befinde und wo meine Haltestellen liegen? Du brauchst ewig, um Dich zurechtzufinden. Dann klickst Du auf ein Plus (+), um ein Ticket hinzuzufügen. Es öffnet sich aber - entgegen Deiner Erwartungshaltung - ein Fenster mit weiteren Optionen. Einfach einen Schritt zurückgehen geht nicht. Du musst den kompletten Vorgang abbrechen und von vorne anfangen.
2. Du möchtest Dich online für einen Job bewerben und klickst auf die Stellenanzeige. Du klickst auf "Jetzt bewerben", gelangst dann aber erst mal zu einer weiteren Seite mit Informationen und fragst Dich, wo Du nun Deine Bewerbung einreichen kannst. Bis Du letztendlich den Button gefunden hast, der Dich zum richtigen Formular führt, vergeht eine Ewigkeit.
3. Du hast in einem Programm ein Projekt mit verschiedenen Unterpunkten angelegt. Später fällt Dir auf, dass Du eine wichtige Sache vergessen hast. Das Programm erlaubt es nicht, diese Sache einfach hinzuzufügen - es existiert überhaupt kein Plus oder ein ähnliches Symbol dafür. Du musst das Projekt komplett löschen und noch mal neu anlegen.

Solche Probleme lassen sich durch ein gut durchdachtes User Experience-Design vermeiden. Gute UX-Designer:innen beschäftigen sich intensiv damit, welche Bedürfnisse und Ansprüche die jeweilige Zielgruppe hat, wie die Menschen eine Hard- oder Software nutzen und wie man ihnen ideal entgegenkommen kann, damit sie schnell und ohne Probleme ans Ziel kommen.

Auch hier schließt die UX an das UI an: Genau wie ein gutes User Interface fällt uns auch ein gutes UX-Design nicht großartig auf. Wenn alles funktioniert und wir uns über nichts ärgern müssen, sind wir zufrieden und denken nicht weiter darüber nach. Fällt uns hingegen etwas negativ auf, kann das dafür sorgen, dass wir das Produkt in Zukunft meiden. Für Unternehmen natürlich ein großes Risiko: Je weniger Kund:innen, desto geringer die Umsätze.

Deshalb ist ein gutes User Interface (UI) und User Experience (UX) Design wichtig, um Kundinnen und Kunden zu begeistern und damit automatisch höhere Umsätze zu generieren.

Designer:innen wird viel abverlangt. Jede Abhängigkeit muss genau überblickt werden. Sie müssen immer genau wissen, welcher Screen wie aussehen muss. Welche Funktionen müssen berücksichtigt werden und welcher Klick führt wohin? Als Außenstehender sind die verschiedenen Gedanken und Vorgänge kaum nachzuvollziehen - ein Beispiel aus unserer Agentur:

Was ist Usability?

Usability ist die "Nutzbarkeit" oder auch "Benutzerfreundlichkeit".

Ob eine Anwendung benutzerfreundlich ist oder nicht, hängt von der jeweiligen Zielgruppe ab - beziehungsweise davon, wie sie eine Anwendung bewertet. Dabei wirken sich Dinge wie eine gute Navigation, Übersichtlichkeit und schnelle Ladezeiten positiv auf unser Empfinden aus.

Eine gute Usability bedeutet, dass diejenigen, die eine bestimmte Software, App oder Webseite nutzen, problemlos zurechtkommen und ihre Ziele intuitiv und effektiv erreichen. Genau genommen ist die Usability also die Konsequenz eines guten User Interface und User Experience Designs.

Und da die Ansprüche je nach Unternehmen, Branche und Zielgruppe unterschiedlich sind, kann die Usability nicht einheitlich definiert werden: Sie muss den Ansprüchen der Menschen im jeweiligen Kontext gerecht werden.

Usability als Erfolgsfaktor

Es gibt einige Fehler, die Sie in Bezug auf die Usability vermeiden sollten. Vielleicht auch im Hinblick auf Ihren nächsten Webseiten-Relaunch.

Überladene Seiten

Es ist egal, ob Nutzer:innen über Empfehlungen, die organische Suche oder bezahlte Werbeanzeigen auf Ihre Webseite oder Anwendung kommen: Der erste Eindruck darf niemanden erschlagen. Jede einzelne Seite sollte das, was Sie vermitteln möchten, auf die bestmögliche Art und Weise vermitteln: und zwar übersichtlich.

Zu viele Informationen auf einmal, gepaart mit Bildern, Animationen oder zu vielen Farben überfordern die Besucher:innen sofort und sorgen für eine hohe Absprungrate. Vor allem auf der Startseite lieber auf eine Grafik, eine aussagekräftige Headline und klare Aussagen setzen.

Schlechte Navigation

Wer zu lange suchen muss, hat schnell keine Lust mehr. Eine übersichtliche Navigation ist wichtig, damit jeder ohne Umwege findet, wonach er sucht. Wenn ich durch eine unstrukturierte oder zu komplizierte Navigation nicht verstehe, wo es langgeht, bin ich schnell frustriert.

Es ist wichtig, sich in die Lage derjenigen zu versetzen, die letztendlich mit der Seite oder Anwendung interagieren. Dazu gehört auch, sich die einzelnen Hauptmenüpunkte genau zu überlegen. Bei uns sind es beispielsweise "Unternehmen", "Leistungen" oder "Blog" - in Ihrem Unternehmen bieten sich aber vielleicht auch Bezeichnungen wie "Privatkunden", "Geschäftskunden" oder "Produkte" an.

Fehlende Suchfunktion

Suchfelder werden gerne genutzt und sind deshalb nicht zu unterschätzen. Bei einem Onepager sind sie nicht so wichtig, weil sich dort alles auf einer Seite abspielt und Nutzer:innen alle Inhalte allein durch Scrollen erreichen können. Bei komplexeren Seiten mit mehreren Menüpunkten und Produkten kann eine Suchfunktion aber sehr hilfreich sein. So können Kundinnen und Kunden noch schneller das finden, wonach sie suchen - was sich wiederum automatisch positiv auf die User Experience auswirkt.

Langweilige Bilder

Für all seine Produkte passende Fotos zu finden, ist nicht immer einfach. Das wissen auch wir selbst zu gut. Noch komplizierter wird es, wenn die Produkte nicht wirklich greifbar sind. Viele Unternehmen und Agenturen greifen deshalb auf kostenlose Stockbilder zurück. Das muss nicht schlecht sein, aber natürlich ist man dann niemals die einzige Firma, die ein bestimmtes Bild nutzt.

Je intensiver man sich mit einer Branche beschäftigt, desto mehr fällt auf, dass oft dieselben Fotos oder Grafiken genutzt werden. Im Idealfall bauen Sie sich ein Archiv mit eigenen Bildern und Produktfotografien auf. Dafür können Fotografen engagiert werden, die womöglich sogar auf Produktfotografie spezialisiert sind. Wenn Sie Stockbilder benutzen, dann vielleicht zumindest nicht das allererste Bild, was in der Suche nach dem passenden Bild auftaucht. Meist gibt es viele Seiten mit verschiedenen Bildern zum selben Thema.

Falsche Formatierung

Guter und einzigartiger Content ist mit Abstand das Wichtigste, um in den Suchmaschinen möglichst weit oben aufzutauchen. Texte sollten ausführlich und fehlerfrei sein - und natürlich genau das beschreiben, worum es auf einer Internetseite oder in einer App geht. Das heißt automatisch, dass sich längere Texte manchmal nicht vermeiden lassen, die dann aber unbedingt aufgelockert und gut formatiert werden sollten. Das erreichen Sie unter anderem durch:

• Gliederung der Texte in Sinnabschnitte
• eine angenehme Schriftart und Schriftgröße
• sinnvolle Absätze
• Bilder, Grafiken oder Tabellen
• linksbündigen Text
• ausreichend Platz nach rechts und links (nie die gesamte Bildschirmbreite nutzen)

Es sollte einfach Abwechslung fürs Auge vorhanden sein, damit sich niemand schon auf den ersten Blick mit den Inhalten überfordert fühlt. Bei all dem aber unbedingt Punkt eins bzgl. überladener Seiten beachten!

Fazit

Ein schlechtes UI-/UX-Design kann für Unternehmen negative Konsequenzen haben. Wenn sich Menschen von einem Produkt nicht angesprochen fühlen und nicht möglichst schnell das finden, was sie suchen, verlieren sie das Interesse und nutzen es nicht mehr.

Dabei ist es grundsätzlich unerheblich, um welche Art Produkt es sich handelt. Das gilt sowohl für die Produkte, die wir programmieren, als auch für Ticketautomaten, digitale Infotafeln in Einkaufscentern oder Bestelltafeln in Schnellrestaurants.

Meist ist es nur eine Sache von Sekunden, maximal Minuten, bis die Entscheidung darüber gefallen ist, ob uns gefällt, was wir sehen. Vor allem im Internet haben wir wenig Geduld: Funktioniert die eine Seite nicht, klicken wir eben eine andere an. Dadurch können Unternehmen potenzielle Kund:innen verlieren.

Produkte rufen immer Emotionen in uns hervor. Ist es praktisch? Hat es einen Mehrwert für mich? Ist es einfach zu bedienen? User Interface und User Experience beinhalten alles, was wir wahrnehmen und empfinden, wenn wir ein Produkt nutzen.

Mehr Informationen?

Sie benötigen ein digitales Produkt für Ihr Unternehmen? Sprechen Sie uns an und wir helfen Ihnen gerne weiter. Wir bieten Ihnen ein sehr breites Leistungsspektrum für viele Projekte und Ansprüche: HIER geht es zu unserer Leistungsübersicht.

Schreiben Sie uns eine Mail, nutzen Sie unser Kontaktformular oder rufen Sie uns einfach an, um einen Termin zu vereinbaren. Wir erstellen Ihnen gerne ein Angebot – selbstverständlich kostenlos und unverbindlich!