Empathisches Webdesign

Empathisches Webdesign: Für Webdesigner ist es wichtig, ihre User zu kennen. Mit einem empathischen Grundgedanken schaffen es Webdesigner, ihre eigenen Ansichten nicht zu verfolgen und sich auf die Bedürfnisse des Kunden zu konzentrieren, die ihre Webseiten nutzen. Hier zeige ich, was dafür benötigt wird und wichtig ist.

Empathie im Webdesign

Flugbuchungen im Internet können eine durchaus gefühlsbetonte Begebenheit sein. Wer beispielsweise über das Flugportal Seat24 einen Flug gebucht hat, bekamt kurz vor der Eingabe seiner Daten einen beruhigende Information: „Eine gute Entscheidung! Buchen Sie jetzt und Sie werden schon bald auf Reisen sein.“ Beim Reiseanbieter Opodo erschien dagegen an genau dieser Stelle des Buchungsprozesses dieser Text: „Bleiben Sie dran! Die Preise könnten steigen. Sichern Sie sich dieses Angebot, sonst könnte es weg sein.“ Bei Seat24 steigt die Erwartung und Freude auf die Reise und der Nutzer entspannt sich, in der zweiten Situation dürfte die Reaktion beim Eingeben der Passagierdaten eher in Richtung Hektik, Nervosität und Gereiztheit gehen.

Webdesign und die Interaktion auf der Webseite können sehr starke abweichende Emotionen bei ihren Benutzern hervorrufen. Daher sollten sich Webdesigner genau mit dem Einfluss, den die Designelemente auf die Emotionen der Nutzer haben, auseinandersetzen und in ihre Arbeit einbeziehen. So meiden sie nämlich nicht nur negative Erlebnisse beim Nutzer. Indem empathisches Webdesign die Bedürfnisse der User beachtet, auf ihre Erwartungen antwortet und hierzu sorgt, dass sie sich gut fühlen, dann begeístert es sie auch viel mehr von der Dienstleistung oder dem Produkt, die auf der jWebseite angeboten werden.

Empathie. Was ist das?

Der Psychologe und Anthropologe Paul Ekman beschreibt zwei verschiedene Arten von Empathie: Erstens die emotionale Empathie, bei der man die Gefühle einer fremden Person übernimmt, also unmittelbar „mitfühlt“: zum Beispiel, wenn ein niedliches Baby lächelt und man spontan zurück lächelt. Auf der anderen Seite steht die, für Webdesigner so wesentliche, kognitive Empathie: Mit dieser ist es, auch ohne persönlichen oder direkten, Kontakt zu der Person, möglich, sich in einen fremden Menschen hineinzuversetzen, seine Motive oder Gefühle zu verstehen und auf dieser Grundlage sein zukünftiges Verhalten vorwegzunehmen. Die kognitive Empathie versetzt Webdesigner in die Lage, die Absichten des Users zu verstehen und ihm dabei zu helfen, seine Ziele zu erreichen.

Wie wird Webdesign empathisch?

Einige Unternehmen folgen der Erfahrung, dass Webdesign den Fokus nicht allein auf das „Aussehen“ setzt, sondern hingegen eine positive Erfahrung der Besucher ermöglichen soll. Sie verwenden Empathic-Design als Werkzeug, um ihre Dienstleistung oder Produkte den Bedürfnissen des Kunden anzupassen und sich somit von der Konkurrenz zu unterscheiden. Dabei kommen eindeutige Elemente, Touchpoints und Call-to-Action zum Einsatz.

Ich brauche Unterstützung!

Eine tragende Rolle spielt der Blickwinkel des Unterstützens. So wie es in einem echten Laden eine Verkäuferin gibt, die die Käufer an das Produkt langsam heranführt, sollten User auch online an die Hand genommen und bei Bedarf beraten werden. Befindet sich ein Besucher zum Beispiel ziemlich lange auf einer Unterseite/Landingpage des Shops, kann ihm proaktiv Unterstützung durch einen Support-Mitarbeiter angeboten werden. Neben einer Chat-Funktionen, die von echten Personen betreut werden, eröffnen vor allem auf künstlicher Intelligenz basierende Chatbots ideale Möglichkeiten der Online-Kundenbetreuung zeitlich unabhängig und unendlich erweiterbar. Der Stylebot von Levi’s beispielsweise, den Levi’s zusammen mit dem Startup Mode.ai entwickelt hat, hilft potenziellen Kunden, die perfekte Jeans auszuwählen. Der virtuelle Helfer begleitet durch das gesamte Levi’s Sortiment, unterstützt den Käufer dabei, die richtige Kleidergröße zu finden und ermöglicht den Usern via Bilderkennung, nach bestimmten Styles und Inspirationen zu suchen. Über den Messenger ist er auch mobil vorhanden und „spricht“ mit den Nutzern. Die User werden auf unkomplizierte Art und Weise betreut und schließlich zum Kauf geführt. Levi’s erwartet laut eigener Aussage von diesem virtuellen Werkzeug nicht nur eine höhere Verkaufsrate, sondern auch zufriedenere Kunden und weniger Retouren. Also glückliche Kunden.

Ist das Produkt was für mich? Käufer beim Brillenshops Mister Spex können schon vor dem Kauf im Onlineshop mit der virtuellen Anprobe testen, ob sie sich mit dem ausgesuchten Brillenmodell wohlfühlen werden.

Auch in dieser Verbindung sind die neuartigen Features zu nennen, die Augmented Reality möglich machen, so eine virtuelle Brillenanprobe von Mister Spex oder die Katalog-App vom Schwedenmeister Ikea, die es Usern ermöglicht, Möbel direkt in den heimischen Räumen zu visualisieren. Diese Anwendungen helfen Interessenten dabei, sich in die Situation nach dem Kauf emotional hineinzuversetzen. Ist das emotionale Erlebnis stimmig, wird der Kauf eines Produkts umso wahrscheinlicher.

Von Menschen für Menschen entwickelt

Eine weitere wichtige Besonderheit empathischer Webseiten ist ihre Nahbarkeit. Sie zeigen, dass sie von Menschen für Menschen entwickelt wurden und tragen der Tatsächlichkeit Rechnung, dass ihre User ebenfalls Menschen sind, die in einer bestimmten emotionalen Situation sind. Elemente, die diese Nahbarkeit erbringen, sind etwa einzigartige, prägsame Inhalte, die erkennbar von Menschen für Menschen und nicht für Google & Co. geschrieben worden sind, oder kleine Interaktionen, die die User auf interessante Reise durch die Webseite und den Kaufprozess leiten.

Füllt ein Anwender ein wichtiges Formular nicht vollständig und korrekt aus, erscheinen in der Regel rote Eingabefelder, Ausrufezeichen und Hinweise. Viel ausgeruhter und sicherer könnten Nutzer handeln, wenn diese durch einen lustigen Hinweis auf bestimmte Falscheingaben aufmerksam gemacht werden. Überschriften wie „Oops!… Das hat noch nicht ganz funktioniert :)“ holen die Anwender in dieser besonderen Situation ab, in der sie gerade sind und verbessern so die Chance, dass sie es ein weiteres Mal versuchen. Das gleiche gilt für das Webdesign von 404 Seiten: Will man den User bloß halten oder geht man auf die Frustration, in der er gerade ist, direkt ein? Auch Forderungen an die Anwender, Bewertungen oder Kommentare zu hinterlassen, werden gewinnbringender, wenn diese den Kunden überraschen oder ein Zwinkern mit sich bringt. Ein „Hi! Geh bitte noch nicht!“ oder ein „Ein Augenblick! Könntest du uns hier helfen, besser zu werden? Bestimmt.“ erscheinen verbindlicher und persönlicher als ein einfacher Call-to-Action mit dem Text „Bitte eine Rezension hinterlassen“.

Neben Witz und Kreativität können Webdesigner bei 404 Seiten ihre Feinfühligkeit beweisen.

Diese ist auch für Voice-User-Interface-Designer sehr wichtig. Sprachassistenten wie Siri, Alexa oder Cortana spielen immer mehr eine Rolle für Kunden. Gegenwärtig wirken sie noch nicht so menschlich. Wenn sie ihrem Ziel, ein nützlicher Alltagsbegleiter zu sein, gerecht werden wollen, müssen diese sich an ihrer Fähigkeit der Empathie messen können. Wer will sich mit einer kühlen und unsensiblen Roboterstimme herumschlagen müssen, wenn er Unterstützung benötigt?

Denke voraus

Laut Sophie Kleber von Huge Inc. sind Entscheidungen immer mit Energieverlust verbunden, was sich negativ auf das Webseiten-Erlebnis der Benutzer auswirken könnte – und schließlich auch die Aktionsraten stark beeinflusst. Wer zum Beispiel bei Zalando nach dem Stichwort „graue Jeans“ sucht, erhält + 1.000 Ergebnisse. Das Durchstöbern der nicht enden wollenden Ergebnisliste entnervt, ermüdet und führt nicht selten zum Abbruch des Kaufs. Webdesigner sollten genau überlegen, wie sie den Benutzern gewisse Entscheidungen abnehmen könnten. An dieser sehr wichtigen Stelle kommt Anticipatory Design ins Spiel: Es erhofft sich eine Herabsetzung der Optionen an und will dem User Entscheidungen abnehmen und/oder diese vereinfachen. Ein Beispiel hierfür ist der bereits vorgestellte Stylebot von Levi’s. Auch Versandhändler Asos ermöglicht es seinen Useren über das Feature Style-Match eigene Modefotos in die App zu laden und dann nach ähnlichen Outfits zu suchen. Auf diese Weise kann die Ergebnisliste direkt auf wahrscheinliche Wunschmodelle eingeschränkt werden. Der Streaming-Dienst Netflix nimmt seinen Benutzern die Entscheidung ab, was sie als Nächstes schauen möchten: Nicht nur gibt das Streaming-Portal personalisierte Empfehlungen für Filme. Ist der User am Serienende angelangt, startet automatisch ein besonders spannender Trailer für die nächste Serie etc. Der Spaß kann daher ohne Unterbrechungen weitergehen. Auch Internetriese Amazon ist ein Experte bei der Vereinfachung von Prozessen: Wer sich direkt entscheidet, einen Artikel zu erwerben, kann dann über den „One-Click-Button“ gleich weitere Stufen des Verkaufsprozesses überspringen und kommt viel schneller ans Ziel.

Empathie im Webdesign-Prozess

Um Empathie im Webdesign-Prozess zu implementieren, ist es entscheidend, der Beobachtung der Besucher Platz zu geben – und dies nicht in einer Testumgebung, sondern gleich in ihrem Umfeld. Wer Benutzer in seinem Umgang mit einem Artikel beobachtet, erhält einen sehr guten Eindruck von seinen Gefühlen, Bedürfnissen und Frustrationen. Dabei werden häufig Bedürfnisse erkennbar, die die Kunden noch gar nicht so wahrgenommen haben. Das Problem, das Henry Ford in seinem bekannten Zitat „Wenn ich die Menschen gefragt hätte, was sie wollen, hätten sie gesagt, schnellere Pferde.“ zum Ausdruck gebracht hat.

„Oft sind User so an den aktuellen Umstand so gewöhnt, dass es ihnen nicht in den Sinn kommt, nach neuen Lösungen zu fragen – auch wenn sie bestehende Bedürfnisse haben, die adressiert werden könnten“, schreiben Jeffrey F. Rayport und Dorothy Leonard. Ihr Aufsatz im Harvard Business Journal aus dem Jahr 1997 gilt als Basis für den empathischen Webdesign-Prozess und ist auch für Web- und Screendesigner von großer Bedeutung. Leonard und Rayport zeigen den Fall einer Nutzerin, die keine konkreten Wünsche äußerte, als sie nach Verbesserungsmöglichkeiten ihres Textverarbeitungsprogramms gefragt wurde. Durch eine genaue Beobachtung der Situation fiel allerdings auf, dass die Nutzerin ihre Arbeit mit dem Textverarbeitungsprogramm regelmäßig unterbrechen musste, um den Textfluss manuell zu verändern. Sie hatte sich so an den Workaround anpasst, dass ihr dieses Problem gar nicht mehr bewusst war.

Besonders durch persönliche Erhebungen und Befragungen lassen sich wichtige Einblicke gewinnen. Wesentlich ist dabei, möglichst viele Informationen zu erhalten: So können etwa Fotos oder Videos die Situation festhalten, um Gestik, Mimik, Handlungen und Umgebung der User zu einem kommend Zeitpunkt noch einmal abzurufen. Gespräche sollten aufgezeichnet und durch Notizen dokumentiert sein.

Im empathischen Design-Prozess nach Leonard und Rayport folgen die weiteren Schritte Reflexion und Analyse, Brainstorming nach möglichen Lösungen und letztlich das Prototyping. Leonard und Rayport betonen, dass sich der mit viel Arbeit verbundene Prozess absolut lohnt: „Empathisches Webdesign bringt Innovation über das reine Verbessern eines bestehenden Produkts weit hinaus“.

Empathy Mapping im Webesign-Prozess

Ein sehr gutes Tool, um den Webdesignprozess auf Empathie zu richten, ist eine Empathy Map. Das Modell hilft mit sechs Fragen, das durch die Beobachtung gewonnenen Informationen auszuwerten und sich in die Situation des Users hineinzuversetzen:

Wie sieht das diese Person? Wo befindet sich diese Person und was genau nimmt sie dabei wahr? Diese Fragen helfen dem Betrachter, einen Bezug zur Person und Situation zu finden.
Was fühlt und denkt diese Person? Dies ist nicht leicht zu beantworten. Die Emotionen und Gedanken dieser bestimmten Personen sind real und nicht überlegt. Somit sind diese extrem wertvoll.
Was hört diese Person? Welche Informationen erreichen diese Person durch Unterhaltungen und die Medien?
Was sagt und macht diese Person? Welche Aktionen führt die bestimmte Person im Zusammenhang zum Produkt aus und was bringt die Person dazu darüber zu sprechen. Was sagt diese Person zu anderen Personen über das Produkt und was schreibt diese Person darüber auf Facebook & Co. bzw. im Internet?
Unter welchen Schmerzen leidet diese Person? Hier muss geklärt werden, mit welchen Frustrationen, Sorgen und Problemen die Person zu tun hat.
Welche Gewinne strebt diese Person an? Welche Ziele verfolgt diese Person und was erwartet sie von dem Artikel oder Dienstleistung?

Die resultierenden Antworten auf die sechs Fragen werden grafisch strukturiert. Ein kostenloses digitales Modell bietet etwa der Online Whiteboard Service Realtime Board an. „Empathy Mapping ist eine hochwertige Methode, also wird es qualitativen Input brauchen“, betont Sarah Gibbons. Gibbons führt Feldstudien, Nutzer-Interviews, Tagebuchstudien, und qhochwertige Umfragen als Beispiele zur Datenerhebung an. Um die Soll-Situation zu erkennen, können die Fragen der Empathy Map übrigens im Anschluss umgedreht werden: Was soll der User hören und sehen? Was soll er fühlen und denken? Was soll er sagen und tun? Welche Schwierigkeit muss gelöst werden, was ist des Problems Lösung?

Ein Ausblick

Die Schwierigkeit für sehr gutes Webdesign liegt weniger darin, auf Techniktrends von Chatbots bis zu Header-Videos zu reagieren und anzuwenden, sondern meist darin, einfühlsam auf die Verhaltensmuster und Bedürfnisse der Benutzer einzugehen. Ein empathischer Webdesignansatz bezeugt, dass der Mensch, nicht die Technik, im Zentrum des gesamten Webdesignprozesses steht. Der Ansatz sorgt dafür, dass die entstehenden Webseiten zuerst die Bedürfnisse der Kunden zufrieden stellen, statt sich für eine Auszeichnung zu empfehlen. Webdesigner, die diesen aufwändigen Ansatz verfolgen, müssen sich genug Zeit nehmen, um die User genauer kennenzulernen. Letzten Endes können sie mit dieser Vorgehensweise sehr viel bewirken.

Empathisches Webdesign: Fazit

Sehr gutes Webdesign wird heute nicht mehr bloß am Aussehen und Funktion gemessen. Vielmehr und noch wichtiger geht es darum, den Menschen in das Zentrum zu stellen und durch empathisches Webdesign die Bedürfnisse zu befriedigen. Webdesigner sollten sich dafür Zeit nehmen und den User wirklich kennen lernen. Eine gezielte Analyse ist für ein Empathisches Webdesign unumgänglich.