Was ist Emotional Design?

Emotional Design markiert gewissermaßen die Oberklasse moderner Gestaltung in der Welt der Designagenturen. Und obwohl der Begriff nicht neu ist, gibt es im Wettbewerb nicht viele, von denen du lernen könntest.

Auch wenn der Begriff „User Experience“ sich nicht nur als solcher, sondern ebenso als Fokus in der Design-Umsetzung durchzusetzen scheint, ist damit noch nicht die Königsklasse, das obere Ende der Fahnenstange erreicht. Aber, lass uns von vorne beginnen. Dann verstehst du, worauf ich hinaus will.

Was soll denn emotionales Webdesign sein?

Die Idee des emotionalen Webdesigns mag sich kompliziert, zumindest schwierig anhören, doch das ist es keineswegs. Es geht nur darum, freundlich zu deinen Besuchern zu sein, damit diese sich auf der Webseite zu Hause und geborgen fühlen. Um sich mit dem Publikum auf emotionaler Ebene zu verbinden, kommen die Unternehmen nun mit Tonnen an kreativen Ideen, um ihrer „professionellen“ Webseite eine Verjüngungskur zu verpassen. Manche lassen sich sogar ein „Maskottchen“ für die Webseite entwickeln, andere verfassen ermutigende Berichte – positive Inhalte – für ihre Website.

Sobald sich Menschen auf deiner Website wohl fühlen, machen sie genau die Dinge, die sie tun sollen – so die Theorie. Das könnte sein: deinen Newsletter abonnieren, Produkte kaufen, deinen Service in Anspruch nehmen. Und um das zu erreichen, musst du deine Besucher auf der emotionalen Ebene packen, eine persönliche Note zu deiner Webseite hinzufügen.

Die folgenden Tipps können den Einstieg in das Thema erleichern:

1. Vertraue auf die menschliche Natur

Jedermann liebt es, in ein hübsches Gesicht zu blicken. Wenn du zwischen einem Foto von Harry Potter und seinem Widersacher Lord Voldemort als Hintergrund deiner Webseite auswählen müsstest, welches Foto würdest du wohl nehmen? Welches scheint eher geeignet, die Besucher deiner Webseite für dich zu gewinnen? Nur wenn du einen eigenartigen Sinn für Humor hast, würdest du wohl Voldemort wählen. Dieser taugt indes eher, deine Besucher zu „unterwerfen“ und zum Kauf zu „zwingen“. Ich lehne mich wohl nicht zu weit aus dem Fenster, wenn ich prognostiziere: das geht in die Hose. Daher ist es eine ganz natürliche Sache, Bilder von schönen Menschen, Landschaften, Dingen zu verwenden, um deine Besucher für deine Website zu vereinnahmen. Einige Designer vertrauen besonders auf Kinder und junge Tiere, vorzugsweise Hundewelpen oder Katzenbabies, in dieser Hinsicht.

Die Kraft solcher positiv aufgeladenen Bilder hilft dem Designer, seine Nachricht einfacher zu transportieren. Die Idee ist es, Emotionen zu schüren, um dem Besucher Vertrauenswürdigkeit zu vermitteln.

Wie du siehst, funktionieren niedliche Tierbildchen immer wieder. Und daraus eine App zu machen, war sicherlich keine schlechte Entscheidung.

Diese Augen und das Lächeln des Kindes können die Besucher der Webseite ebenfalls sofort in ihren Bann ziehen.

2. Kenne deine Zielgruppe

Wenn du deine Zielgruppe nicht kennst, wie willst du sie dann ansprechen? Wie willst du etwas verkaufen? Sammele daher alle relevanten Details über deine Zielgruppe. Je mehr du über diesen Personenkreis weißt, desto besser. Wenn du zum Beispiel eine Dienstleistung verkaufst, dann solltest du auf deiner Webseite klar machen, dass du das spezifische Problem deiner potenziellen Kundschaft genau kennst und auch lösen kannst.

Tripsniffer versteht sein Publikum richtig gut. Genau darum ist auf der Startseite ein Bild eingebunden, dass bei der Zielgruppe gleich bekannte Emotionen auslöst und sie dieses vertraute Gefühl haben lässt. Sehr gelungen an diesem Beispiel ist auch die Wahl der Perspektive, des sogenannten POV.

3. Ein bisschen Spaß muss sein

Ein weiterer probater Ansatz, um die Besucher für deine Webseite zu vereinnahmen, ist Humor. Lachen ist nicht nur gesund, sondern auch Bindung erzeugend.

Wonder Giant verwendet einen eigenen Riesen, der sehr hilfreich und unterstützend sein kann, sich aber manchmal auch einen Spass mit den Mitarbeitern macht.

Chubbygrub hat definitiv einen Sinn für Humor. Allein das Abonnieren des Newsletters gerät zum Spaß.

4. Verwende große Hintergrundbilder

Große Hintergrundbilder (sog. Hero Images) erzeugen Nähe zum Thema und wirken sympathisch (mit dem richtigen Motiv zumindest).

Dieses Website-Template verwendet das Bild eines Modells als Hintergrundbild: Die Wirkung ist offensichtlich. Die Website wirkt charmant und elegant. Das Wichtigste jedoch ist, dass dieses Bild Emotionen weckt – natürlich nicht bei jedem Betrachter dieselben. Grundsätzlich gilt aber: anstatt dunkle und düstere Bilder zu verwenden, solltest du helle, farbenfrohe und positiv geladene Bilder verwenden.

5. Achte auf (auch technische) Details

Dein Publikum zu kennen, wird dir dann nicht weiterhelfen, wenn deine Webseite Probleme bereitet. Wenn ein Besucher zum Beispiel das Kontaktformular nicht sofort findet, wird die Liebe zu deiner Webseite schnell erkalten und der Besucher nicht wiederkommen. Achte auf ein klares und einfaches Design. Lasse genügend Weißraum, damit der Besucher sich auf die wesentlichen Dinge konzentrieren kann und nicht durch überladene Layouts überanstrengt wird.

Das Design sollte stets Raum zum Atmen lassen, was nicht heissen soll, dass es langweilig aussehen muss. Lege den Fokus besonders auf eine benutzerfreundliche Navigation. Denn es ist immens wichtig, dass deine Besucher keinerlei Schwierigkeiten haben, innerhalb deiner Webseite zu navigieren.

Rose Cottage Canberra ist ein Beispiel für einfache Klarheit. Oben sitzen Call-to-Action (zur Handlung verleitend) Buttons und unten die Navigation. Was du besser machen solltest als die Eigner dieser Webseite, ist, auf optimale Performance zu achten.

6. Verwende ausgeglichene, passende Farben

Farben sind einer der vielen Design-Aspekte, die einen direkten Einfluss auf die Wahrnehmung deiner Webseite haben. Eine leichte Veränderung in der Farbkombination oder sogar eine kleine Änderung in Farbton und Sättigung können gravierende Veränderungen in der Wahrnehmung bewirken.

Ein Beispiel: Was fühlst du, wenn du dir dieses Website-Template ansiehst? Es ist sehr wahrscheinlich, dass du positive Gefühle bei diesem Anblick entwickelst, weil Grün als Symbol der Balance verwendet wird. Freundliche Farben wie Orange und Pink unterstützen diesen Effekt. Sei umsichtig bei der Wahl der richtigen Farbkombination für deine Webseite. Eventuell interessiert dich dieser Beitrag über die Wahl der richtigen Farbkombination.

Das kleine Einmaleins: Funktionalität, Zuverlässigkeit, Benutzbarkeit

Wenn wir uns anschauen, was ein Design auf der untersten Ebene, also mindestens leisten muss, dann werden wir uns einig sein, dass das Stichwort hier „Funktionalität“ lautet. Wenn du ein Design ablieferst, dann muss es wenigstens die gewünschten Funktionen haben. Dabei ist es zunächst unerheblich, wie das Design aussieht. Es zählt nur, dass es tut, was es soll.

Einen Schritt weiter ist es dann wichtig, dass es diese Funktionalität zuverlässig bietet und nicht nur unter bestimmten Voraussetzungen (etwa einem bestimmten Browser). Wenn sich die Entwickler nativer Apps für iOS und Android stärker diesem Punkt widmen würden, hätte ich ein reduziertes Herzinfarktrisiko bei der Verwendung vieler Apps auf Smartphones. Unzuverlässigkeit ist ein KO-Kriterium.

Ist dein Design funktional und zuverlässig, muss es auf der nächsten Ebene auch benutzbar sein. Usability wird heutzutage immerhin groß geschrieben und ist unter dem Schlagwort UX (User Experience) stets repräsentiert, wenn von qualitativ hochwertigem Design die Rede ist. Ein Design, das nicht benutzbar ist, wird trotz gegebener Funktionalität und Zuverlässigkeit regelmäßig scheitern, wie unser folgender Cartoon verdeutlicht:

Auch wenn es inzwischen viele Designer gibt, die beim Stichwort UX nicht nur an die schiere Benutzbarkeit, sondern auch an die Benutzbarkeit emotional verbessernde Elemente denken, so ist Emotional Design insgesamt noch eher unterrepräsentiert.

Emotional Design: Wenn der Spaßfaktor dazu kommt…

Emotional Design ist ein Begriff, der bereits in den Achtzigern von Don Norman, Mitgründer der bekannten Nielsen Norman Group, geprägt wurde. Seine Standardwerke „The Design of Everyday Things“ und „Emotional Design“ sind, nicht zuletzt dank regelmäßiger Anpassungen, immer noch aktuell.

Etwas frischer kommt „Designing for Emotion“ vom Designveteranen Aarron Walter daher, setzt aber auf den gleichen Thesen auf. Walter allerdings kommt mit der originellen Idee, die Maslowsche Bedürfnispyramide auf Design anzuwenden. So werden aus den bereits benannten Elementen Funktionalität, Zuverlässigkeit und Benutzbarkeit aufeinander aufbauende Schichten einer Pyramide.

Das sieht nach Walter so aus:

Danach fehlt die Spitze der Pyramide bei den meisten Designs unserer Zeit. Wie bei Maslow bedarf es der kompletten Umsetzung der unteren Schichten, um die Spitze zu erreichen. Anders als bei Maslow ist das Streben an die Spitze keine natürliche Zwangsläufigkeit, sondern bei Emotional Design braucht es den konkreten Willen des Designers, den Extraschritt zu gehen.

Wenn dein Design also funktional, zuverlässig und benutzbar ist, heißt das noch lange nicht, dass es auch emotional ist. Emotional ist hier natürlich stets in positiver Konnotation gemeint. Erst wenn dein Design etwa Spaß macht, die Benutzer sich freuen, es verwenden zu können, dann ist es in positivem Sinne ein Emotional Design. Hierzu gehört nicht nur die sprichwörtliche Schönheit des Designs, sondern vor allem das Gestalten perfekter Interaktionen, um das Design mit Leben zu füllen und fühlbar zu gestalten.

Der Haken an der Sache ist, dass dein Design immer Emotionen hervorrufen wird, ob du es beabsichtigst oder nicht. Es ist so ähnlich wie bei der alten Weisheit, das man nicht nicht kommunizieren könne. Es ist also besser, sich des Instrumentes der Emotionalisierung bewusst zu bedienen, als versehentlich unterschwellig die falschen Gefühle zu triggern.

Der besondere Charme des Emotional Design wird deutlich, wenn du es im Zusammenhang mit meinem Beitrag zum Thema „Hirnfreundliches Design“ betrachtest. Dort lernst du, wieso Erfahrungen wichtig sind und wie man sie am schnellsten erzeugt. Der schnellste Weg, Erfahrungen zu triggern, die sich dann auf Dauer im Langzeitgedächtnis verewigen, ist es – na? – genau, Emotionen zu erzeugen. Stück für Stück entsteht so das „Bauchgefühl“, das am Ende für die meisten unserer Entscheidungen verantwortlich ist.

Methoden des Emotional Design

Wenn du dich nun also fragst, wie du dein Design emotional gestalten kannst, brauchst du nur ein kleines Stück über den Tellerrand zu schauen. Dabei setze ich voraus, dass du den ästhetischen Aspekt ohnehin schon im Griff hast. Hier etabliert sich stets verhältnismäßig schnell ein Konsens, der dieser Tage Flat Design heißt. Folgst du den sich immer langsamer wandelnden Trends, bist du hinsichtlich des Aspektes nackter Schönheit, zumindest in der Bewertung durch die Masse, auf der sicheren Seite.

Deshalb konzentrieren wir uns hier auf andere Aspekte des Emotional Design:

Minimalismus

Natürlich kann ein Beitrag wie dieser nicht ohne Verweis auf Dieter Rams auskommen. Rams kennt jeder Designer. Seine Designgrundsätze gelten noch heute als modern, obwohl seine designerischen Meisterstücke während seiner Schaffenszeit für das deutsche Unternehmen Braun aus der zweiten Hälfte des letzten Jahrhunderts datieren. Reminiszenzen an Rams finden wir auch heute noch zuhauf, etwa in den Produkten aus dem Hause Apple. Rams ist inzwischen 85 Jahre alt.

Gutes Design ist so wenig Design wie möglich, lautet einer der Grundsätze Rams. Gekoppelt mit dem Grundsatz, dass gutes Design ein Produkt verständlich machen soll, wird klar, worauf ich hinaus will. Wenn du es schaffst, dass dein Design sich quasi von selbst erklärt und ganz im Sinne eines Steve Krug die Menschen nicht zum Denken zwingt, dann erzeugst du damit positive Emotionen in den Benutzern des Designs. Jeder hasst komplizierte Produkte, für deren Bedienung man erst promovieren muss.

Minimalismus an sich ist daher bereits ein Instrument des Emotional Design, wird aber häufig nicht gezielt in diese Richtung interpretiert und genutzt. Da ist noch Luft nach oben.

Gamification

Game-Design ist vornehmlich Interaktions-Design. Dabei geht es darum, den Spielenden so tief wie möglich in das Spiel zu ziehen. Hierzu bedarf es eines Großangriffs auf die menschlichen Neuronen.

Ziel des Game-Designs ist stets das Belohnungssystem. Erwartet der Mensch eine Belohnung, schüttet er schon im nahen Vorfeld dazu Dopamin, im Volksmund als Glückshormon bezeichnet, aus. Dopamin steigert Antrieb und Motivation und sorgt dafür, dass der Gamer dabei bleibt.

Dass unsere Besucher oder Benutzer dabei bleiben, wünschen wir uns als Designer ebenfalls. Wieso sollten wir also nicht Ansätze des Game-Designs übernehmen. Slack, die Team-Kommunikations-Revolution, etwa, setzt voll auf einen spielerischen Umgang mit seinen Features. Das bezieht sich nicht nur auf das Design, sondern auch auf die Funktionalität an sich.

Alle Netzwerke, die mit Likes arbeiten, setzen ganz transparent auf den Dopamin-Mechanismus. Der kleine Kick, der entsteht, wenn der Mensch einen Like auf seinen Tweet, seinen Post oder sein Bild erhält, sorgt dafür, dass er noch mehr twittert, postet, hochlädt. Der Like wird zur Belohnung.

Ebenso wie kleine Belohnungen können auch kleine Überraschungen positive Emotionen triggern. Windows etwa bringt dir bei jedem Login einen schicken Hintergrund, den du näher erforschen kannst. Es ist schon mehr als einmal vorgekommen, dass ich tatsächlich wissen wollte, wo das entsprechende Bild aufgenommen wurde. Der Login-Bildschirm ist ein Element, auf das ich mich regelrecht freue, weil ich gespannt bin, welche Landschaft sich mir dieses Mal präsentieren wird. Ähnliche Effekte könnte man über Zitate oder kleine Tipps erzielen.

Immersive Design

Immersives Design zielt darauf ab, möglichst alle Sinne des Verwenders anzusprechen. Durch den rasanten Fortschritt der Smartphone-Technologie und die Erfindung der Gesten-Steuerung als vollkommen neuartige Möglichkeit, digitale Erlebnisse zu gestalten, sind wir heute schon in der Lage, Design regelrecht fühlbar zu machen, wenn auch noch eine ganze Weile eben nicht alle Sinne anzusprechen.

Subtile Animationen vermitteln den Eindruck, dass dein Design lebt. Besonderes Augenmerk solltest du auf die Mikrointeraktion legen. Mikrointeraktionen definieren die eigentliche Mensch-Maschine-Schnittstelle. Wenn du deinen Wecker ausschaltest oder dein Auto per Funkfernbedienung auf- oder abschließt, die Klospülung drückst oder das Licht ein- oder ausschaltest – all das sind Mikrointeraktionen.

Anhand der Beispiele kannst du schon erkennen, dass es sich um zwar nur kurze Aktionen, die schnell erledigt sind, handelt, diese aber ganz wesentlich für die jeweilige Nutzererfahrung sind. Es ist also nicht übertrieben, Mikrointeraktionen als wichtigste Elemente im Design von Produkten zu bezeichnen.

Es sind die Mikrointeraktionen, mit denen du als Designer dein Produkt von anderen absetzen kannst. Denn im Grunde interagiert der Nutzer mit deinem Produkt immer nur über Mikrointeraktionen. Je überzeugender du diese also gestaltest, desto flüssiger fühlt sich die Nutzung an und desto lieber wird der Nutzer dein Produkt verwenden.

Es ist dabei die Interaktion an sich, die Emotion triggert. Denn durch die Interaktionsmöglichkeit wird das pure Design vom Ding zu etwas, mit dem wir eine Beziehung eingehen können. Das Design reagiert, bewegt sich, wird dadurch selbst menschlicher und entwickelt eine Persönlichkeit.

Die Extrameile

Emotional Design erstreckt sich über das reine Design hinaus. Wenn du etwa einen Online-Shop betreibst, könntest du das Prinzip auch nach dem Kaufabschluss fortsetzen. Du könntest eine besonders freundliche E-Mail senden, die etwa erklärt, warum du dich über den neuen Kunden so freust, was deine Philosophie ist und mehr. Du könntest statt der 0815-Verpackung eine nehmen, die man gerne öffnet. Vielleicht posten Kunden sogar Unboxing-Videos, weil sie so beeindruckt von deinem Zusatzaufwand sind. Du könntest ein Geschenk beilegen. Du könntest so viel tun, was dich vom Wettbewerb absetzt. Der Kunde wird es sich merken, weil er es nicht erwartet.

Fazit: Emotional Design setzt dich vom Wettbewerb ab

Du brauchst nicht weit zu schauen, um festzustellen, dass Emotional Design nicht die Regel darstellt. Umso attraktiver ist es für dich, jetzt damit zu beginnen, denn der Wettbewerbsvorteil kann immens sein.

Tatsächlich kann Emotional Design heutzutage noch nicht das Potenzial entfalten, das theoretisch denkbar wäre. Dafür müsste unser Interface seinerseits wieder Emotionen erkennen können. Bist du gestresst und in Eile oder gut gelaunt und entspannt? Wenn Designs über moderne Schnittstellen auch solche Gefühlszustände als Input akzeptieren, geht es richtig los. Wir nennen das dann einfach Emotional Design 2.0.

Einstweilen könntest du auf Aaron Walter hören, der in „Designing for Emotion“ sagt:

Wenn wir aufhören, Interfaces als bloße Kontrollzentren zu gestalten und sie stattdessen als die Person betrachten, mit der unser Zielanwender kommunizieren will, können wir überzeugendere Erlebnisse erschaffen, die bleibenden Eindruck hinterlassen.

In diesem Sinne: Wo seht ihr bei euch Verbesserungspotenziale?

Willst du mehr zum Themas „Emotional Design“ lesen?

• Humans are Emotional — why is our Design Thinking not? | Signe Roswall (Prototypr)
• The necessary rise of emotional design | Jordan Harper (freeCodeCamp)
• What I think about Emotional Design from a UX Perspective | Sophie Riwaters (Prototypr)
• The most overlooked growth hack: designing for emotions | Lisa Zeitlhuber (uxdesign.cc)
• 6 Ways to Design for Anger | Ezequiel Bruni (Webdesigner Depot)
• Design for Emotion | Daniel Ruston (Google Design)
• Design for Emotion to Increase User Engagement | Miklos Philips (Toptal)
• Exploring the Impact of Emotion in Web Design | Anna Dzhulii (Speckyboy)