November 2021
Warum UX- und UI-Design gleich wichtig sind
Ob Produkte nutzerfreundlich wahrgenommen werden, wird durch Funktion und Ästhetik bestimmt, wie Don Norman in seinem Buch „Emotional Design“ auf Basis wissenschaftlicher Studien darstellt.
Von Markus Remscheid
In der täglichen Praxis als UX/UI-Designer spürt man häufig eine gewisse Skepsis gegenüber Ästhetik und Design.
Design wird nicht selten als „hübsch machen“ verstanden, während der Entwicklung funktionaler Aspekte mehr Wert beigemessen wird.
Dies führt häufig dazu, dass Designer in Entwicklungsteams fehlen und die Gestaltung von Entwicklern übernommen wird. Oder das Entwicklungsteam wägt ab, welche Design-Disziplin die Wichtigere ist – UX oder UI. Häufig fällt dann die Wahl auf einen reinen UX-Designer, der hauptsächlich die funktionalen Abläufe und Prozesse konzipiert und weniger das Aussehen selbst.
Aber was unterscheidet eigentlich UX- von UI-Design?
UX- und UI-Design sind die wesentlichen Teilaufgaben, die zur Gestaltung einer Benutzeroberfläche für Webseiten oder Apps notwendig sind. Dabei steht UX für User Experience (= Nutzererfahrung) und UI für User Interface (= Benutzeroberfläche). Während das UX-Design mehr die funktionale Konzeption im Blick hat, beschreibt das UI-Design das tatsächliche Aussehen einer Webseite.
Angenommen ein UX-/UI-Team steht vor der Aufgabe ein Interface für einen Bankautomaten zu entwickeln. Vereinfacht ausgedrückt wäre eine typische Aufgabenverteilung:
- UX-Design: welche Buttons werden zur Durchführung einer Aufgabe angeboten und welche Funktion führen sie aus
- UI-Design: wie sehen diese Buttons im Hinblick auf Größe, Farbe und Typografie aus, wie sind sie angeordnet
Die Form lässt Rückschlüsse auf die Funktion zu
Der berühmte Leitsatz „Die Form folgt der Funktion“ hat im digitalen Produktdesign noch immer seine Berechtigung. Dahinter steckt die Idee, dass die Form Rückschlüsse auf die Funktionsweise zulässt.
So hat beispielsweise im Webdesign die Anordnung von Elementen entscheidenden Einfluss darauf, ob ein Interface schnell erfasst werden kann. Auch die passende Größe und Farbgestaltung von Elementen wirkt sich direkt auf die Verständlichkeit von Funktionsweisen aus.
Ein guter UI-Designer schafft es, diese und viele weitere Aspekte der Wahrnehmung in ein schlüssiges Designkonzept zu integrieren und so die Funktion durch ein passendes visuelles Design zu unterstützen.
Ein sehr guter UI-Designer lässt zudem noch ein ästhetisches Gesamtbild entstehen, das auf emotionaler Ebene positiv auf die Nutzer einwirkt. Hier verbirgt sich ein großes Potential, da Emotionen unsere Wahrnehmung, Verhalten und Entscheidungen entscheidend beeinflussen.
„
Emotionen, wie wir heute wissen, verändern die Art und Weise, wie der menschliche Geist Probleme löst – das emotionale System verändert die Funktionsweise des kognitiven Systems.
– Don Norman in „Emotional Design“
Attraktive Dinge funktionieren besser
Dank Research weiß man, dass attraktive Produkte von Nutzern tendenziell als brauchbarer, nutzerfreundlicher und intuitiver eingeschätzt werden. Das Phänomen ist auch als Ästhetik-Usability-Effekt bekannt. Menschen neigen dazu zu glauben, dass Dinge, die besser aussehen auch besser funktionieren. Auch dann, wenn sie nüchtern betrachtet weder effektiver noch effizienter sind.
Designvergleich aus den 90igern: Welchen Computer würden Sie als leistungsfähiger einschätzen?
Diesen Effekt hat sich Apple wirksam zunutze gemacht. Während Konkurrenten sich um das Design ihrer Produkte oft nur wenig Gedanken machten, legte Apple bereits früh großen Wert auf ein ästhetisches Produkt- und Interfacedesign. Apple konnte sich so einen riesigen Wettbewerbsvorteil erarbeiten, von dem das Unternehmen bis heute profitiert.
Aber nicht nur Großkonzerne profitieren vom Ästhetik-Usability-Effekt, sondern jede Webseite oder App. Wenn Nutzer emotional positiv auf das visuelle Design reagieren, werden sie nachweislich toleranter gegenüber kleineren Usability-Problemen und bewerten Produkterfahrungen im Nachhinein positiver.
Die drei Emotionsebenen, die das Produkterlebnis ausmachen
Don Norman, Kognitionswissenschaftler, berühmter Usability-Spezialist und Mitgründer der Firma „Nielsen Norman Group“ hat in einem Researchprojekt das Zusammenspiel von Ästhetik und Nutzerfreundlichkeit untersucht. In seinem Buch „Emotional Design“ stellt er diesen Zusammenhang detailliert dar.
Dabei unterscheidet Norman drei Emotionsebenen:
Die viszerale Ebene – das „Bauchgefühl“
Blitzschnell entscheidet das Gehirn auf dieser Ebene, ob etwas gut, schlecht oder gar gefährlich ist. Diese Entscheidungen basieren auf Urinstinkten, sind genetisch vorgegeben und für alle Menschen mehr oder weniger gleich. Das Erscheinungsbild von etwas spielt bei der Beurteilung eine entscheidende Rolle. Z. B. wird generell positiv wahrgenommen:
- helle, leuchtende und warme Farben, runde und weiche Formen, symmetrische Objekte
Negativ wahrgenommen wird dagegen:
- dunkle, kalte Farben, spitze und scharfkantige Formen, deformierte und unausgewogene Anordnungen
Dass diese Ebene entscheidend für alltägliche Kaufentscheidungen ist, spüren Menschen, deren viszerale Emotionsebene gestört ist. Sie stehen im Drogeriemarkt vor dem Duschgel-Regal und können sich vor lauter Varianten nicht entscheiden.
Die Verhaltensebene
Auf dieser Ebene trifft das Gehirn Entscheidungen, wie etwas gemacht wird. Diese Entscheidungen werden schnell und unbewusst getroffen und basieren zum Großteil auf gelernten Verhaltensweisen. Da die Prozesse auf der Verhaltensebene im Unterbewusstsein ablaufen, können wir erfolgreich mit dem Auto fahren aber bewusst über andere Themen reflektieren.
Tätigkeiten, die reibungslos ausgeführt werden, wie z. B. das mühelose Spiel eines versierten Musikers, sorgen für einen „Joy of use“. Der Musiker empfindet Freude während des Spiels – ein befriedigendes und positives Gefühl macht sich breit.
Ähnlich positiv wirkt sich die reibungslose Bedienung einer Anwendung aus, die dem Nutzer positive Erfolgserlebnisse ermöglicht.
Die reflektierende Ebene
Auf dieser Ebene denkt der Mensch ganz bewusst über vergangene Erfahrungen nach und entscheidet, ob er in Zukunft diese Erfahrung noch mal machen möchte oder nicht.
Produkterfahrungen die positiv reflektiert werden, haben folgende Vorteile:
- Nutzer sind gewillt, die Erfahrung noch einmal zu machen und kehren bei Gelegenheit gerne wieder zurück
- Sie ermutigen Nutzer, ihre Erfahrungen mit anderen zu teilen
- Sie können ein Gefühl von Stolz bewirken und Bedeutung für Nutzer entstehen lassen. Das Produkt wird Teil der eigenen Identität
Die Reflexionsebene ist stark von Kultur, Erfahrung und Bildung beeinflusst. Deshalb ist eine genaue Kenntnis der anvisierten Zielgruppe notwendig, um mit einer differenzierten Ansprache auch auf der reflektierenden Ebene zu überzeugen.
Hat man es ins reflektierende Bewusstsein des Nutzers geschafft, können die gemachten Erfahrungen lange im Gedächtnis der Zielgruppe bleiben.
Zusammen machen die drei Emotionsebenen die gesamte Produkterfahrung aus. Überzeugt ein Produkt auf allen drei Ebenen, wird es von seinen Nutzern wirklich geschätzt. Bezogen auf die digitale Webentwicklung lässt sich mit folgenden Disziplinen besonders auf die einzelnen Emotionsebenen einwirken:
- Viszerale Ebene – UI-Design
- Verhaltensebene – UX-Design
- Reflektierende Ebene – Storytelling, Marketing
Fazit:
UI-Design ist kein Beiwerk, sondern elementar für eine positive Nutzererfahrung. Somit lassen sich UX- und UI-Design nicht trennen, da beide Disziplinen gegenseitig aufeinander einwirken. Ein gutes UI-Design kann kleinere Fehler im UX-Design ausgleichen, da Nutzer durch eine positive ästhetische Erfahrung toleranter gegenüber Fehlern werden. Umgekehrt kann eine reibungslose Funktionsweise leichte Schwächen in der Ästhetik ausgleichen. Wenn aber UX- und UI-Design Hand in Hand gehen und sich gegenseitig stärken, sorgt dies für Ergebnisse, die Nutzer überzeugen, anziehen und positiv bewerten.
Referenzen:
- Norman, D. A. (2004). Emotional Design: Why We Love (Or Hate) Everyday Things. New York: Basic Books auf amazon
- „Aesthetic–usability effect“ auf Wikipedia (englisch)
- „Affektlogik“ auf Wikipedia
