{"id":4242,"date":"2021-03-11T17:12:07","date_gmt":"2021-03-11T16:12:07","guid":{"rendered":"https:\/\/wolkenhart.com\/webdesignblog\/?p=4242"},"modified":"2024-05-28T12:39:14","modified_gmt":"2024-05-28T10:39:14","slug":"empathisches-webdesign","status":"publish","type":"post","link":"https:\/\/wolkenhart.com\/webdesignblog\/empathisches-webdesign","title":{"rendered":"Empathisches Webdesign"},"content":{"rendered":"

Empathisches Webdesign:<\/strong> F\u00fcr 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\u00fcrfnisse des Kunden zu konzentrieren, die ihre Webseiten nutzen. Hier zeige ich, was daf\u00fcr ben\u00f6tigt wird und wichtig ist.<\/p>\n

\"Empathisches<\/p>\n

Empathie im Webdesign<\/h2>\n

Flugbuchungen im Internet k\u00f6nnen eine durchaus gef\u00fchlsbetonte Begebenheit sein. Wer beispielsweise \u00fcber das Flugportal Seat24 einen Flug gebucht hat, bekamt kurz vor der Eingabe seiner Daten einen beruhigende Information: \u201eEine gute Entscheidung! Buchen Sie jetzt und Sie werden schon bald auf Reisen sein.\u201c Beim Reiseanbieter Opodo erschien dagegen an genau dieser Stelle des Buchungsprozesses dieser Text: \u201eBleiben Sie dran! Die Preise k\u00f6nnten steigen. Sichern Sie sich dieses Angebot, sonst k\u00f6nnte es weg sein.\u201c Bei Seat24 steigt die Erwartung und Freude auf die Reise und der Nutzer entspannt sich, in der zweiten Situation d\u00fcrfte die Reaktion beim Eingeben der Passagierdaten eher in Richtung Hektik, Nervosit\u00e4t und Gereiztheit gehen.<\/p>\n

Webdesign<\/a> und die Interaktion auf der Webseite k\u00f6nnen 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\u00e4mlich nicht nur negative Erlebnisse beim Nutzer. Indem empathisches Webdesign die Bed\u00fcrfnisse der User beachtet, auf ihre Erwartungen antwortet und hierzu sorgt, dass sie sich gut f\u00fchlen, dann begei\u0301stert es sie auch viel mehr von der Dienstleistung oder dem Produkt, die auf der jWebseite angeboten werden.<\/p>\n

Empathie. Was ist das?<\/h3>\n

Der Psychologe und Anthropologe Paul Ekman beschreibt zwei verschiedene Arten von Empathie: Erstens die emotionale Empathie, bei der man die Gef\u00fchle einer fremden Person \u00fcbernimmt, also unmittelbar \u201emitf\u00fchlt\u201c: zum Beispiel, wenn ein niedliches Baby l\u00e4chelt und man spontan zur\u00fcck l\u00e4chelt. Auf der anderen Seite steht die, f\u00fcr Webdesigner so wesentliche, kognitive Empathie: Mit dieser ist es, auch ohne pers\u00f6nlichen oder direkten, Kontakt zu der Person, m\u00f6glich, sich in einen fremden Menschen hineinzuversetzen, seine Motive oder Gef\u00fchle zu verstehen und auf dieser Grundlage sein zuk\u00fcnftiges 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.<\/p>\n

Wie wird Webdesign empathisch?<\/h4>\n

Einige Unternehmen folgen der Erfahrung, dass Webdesign<\/a> den Fokus nicht allein auf das \u201eAussehen\u201c setzt, sondern hingegen eine positive Erfahrung der Besucher erm\u00f6glichen soll. Sie verwenden Empathic-Design als Werkzeug, um ihre Dienstleistung oder Produkte den Bed\u00fcrfnissen des Kunden anzupassen und sich somit von der Konkurrenz zu unterscheiden. Dabei kommen eindeutige Elemente, Touchpoints und Call-to-Action zum Einsatz.<\/p>\n

Ich brauche Unterst\u00fctzung!<\/h5>\n

Eine tragende Rolle spielt der Blickwinkel des Unterst\u00fctzens. So wie es in einem echten Laden eine Verk\u00e4uferin gibt, die die K\u00e4ufer an das Produkt langsam heranf\u00fchrt, 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\u00fctzung durch einen Support-Mitarbeiter angeboten werden. Neben einer Chat-Funktionen, die von echten Personen betreut werden, er\u00f6ffnen vor allem auf k\u00fcnstlicher Intelligenz basierende Chatbots ideale M\u00f6glichkeiten der Online-Kundenbetreuung zeitlich unabh\u00e4ngig und unendlich erweiterbar. Der Stylebot von Levi\u2019s beispielsweise, den Levi\u2019s zusammen mit dem Startup Mode.ai entwickelt hat, hilft potenziellen Kunden, die perfekte Jeans auszuw\u00e4hlen. Der virtuelle Helfer begleitet durch das gesamte Levi\u2019s Sortiment, unterst\u00fctzt den K\u00e4ufer dabei, die richtige Kleidergr\u00f6\u00dfe zu finden und erm\u00f6glicht den Usern via Bilderkennung, nach bestimmten Styles und Inspirationen zu suchen. \u00dcber den Messenger ist er auch mobil vorhanden und \u201espricht\u201c mit den Nutzern. Die User werden auf unkomplizierte Art und Weise betreut und schlie\u00dflich zum Kauf gef\u00fchrt. Levi\u2019s erwartet laut eigener Aussage von diesem virtuellen Werkzeug nicht nur eine h\u00f6here Verkaufsrate, sondern auch zufriedenere Kunden und weniger Retouren. Also gl\u00fcckliche Kunden.<\/p>\n

Ist das Produkt was f\u00fcr mich? K\u00e4ufer beim Brillenshops Mister Spex k\u00f6nnen schon vor dem Kauf im Onlineshop mit der virtuellen Anprobe testen, ob sie sich mit dem ausgesuchten Brillenmodell wohlf\u00fchlen werden.<\/p>\n

Auch in dieser Verbindung sind die neuartigen Features zu nennen, die Augmented Reality m\u00f6glich machen, so eine virtuelle Brillenanprobe von Mister Spex oder die Katalog-App vom Schwedenmeister Ikea, die es Usern erm\u00f6glicht, M\u00f6bel direkt in den heimischen R\u00e4umen 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.<\/p>\n

Von Menschen f\u00fcr Menschen entwickelt<\/h6>\n

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

F\u00fcllt ein Anwender ein wichtiges Formular nicht vollst\u00e4ndig und korrekt aus, erscheinen in der Regel rote Eingabefelder, Ausrufezeichen und Hinweise. Viel ausgeruhter und sicherer k\u00f6nnten Nutzer handeln, wenn diese durch einen lustigen Hinweis auf bestimmte Falscheingaben aufmerksam gemacht werden. \u00dcberschriften wie \u201eOops!… Das hat noch nicht ganz funktioniert :)\u201c 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\u00fcr das Webdesign von 404 Seiten: Will man den User blo\u00df 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 \u00fcberraschen oder ein Zwinkern mit sich bringt. Ein \u201eHi! Geh bitte noch nicht!\u201c oder ein \u201eEin Augenblick! K\u00f6nntest du uns hier helfen, besser zu werden? Bestimmt.\u201c erscheinen verbindlicher und pers\u00f6nlicher als ein einfacher Call-to-Action mit dem Text \u201eBitte eine Rezension hinterlassen\u201c.<\/p>\n

Neben Witz und Kreativit\u00e4t k\u00f6nnen Webdesigner bei 404 Seiten ihre Feinf\u00fchligkeit beweisen.<\/strong><\/p>\n

Diese ist auch f\u00fcr Voice-User-Interface-Designer sehr wichtig. Sprachassistenten wie Siri, Alexa oder Cortana spielen immer mehr eine Rolle f\u00fcr Kunden. Gegenw\u00e4rtig wirken sie noch nicht so menschlich. Wenn sie ihrem Ziel, ein n\u00fctzlicher Alltagsbegleiter zu sein, gerecht werden wollen, m\u00fcssen diese sich an ihrer F\u00e4higkeit der Empathie messen k\u00f6nnen. Wer will sich mit einer k\u00fchlen und unsensiblen Roboterstimme herumschlagen m\u00fcssen, wenn er Unterst\u00fctzung ben\u00f6tigt?<\/p>\n

Denke voraus<\/h6>\n

Laut Sophie Kleber von Huge Inc. sind Entscheidungen immer mit Energieverlust verbunden, was sich negativ auf das Webseiten-Erlebnis der Benutzer auswirken k\u00f6nnte \u2013 und schlie\u00dflich auch die Aktionsraten stark beeinflusst. Wer zum Beispiel bei Zalando nach dem Stichwort \u201egraue Jeans\u201c sucht, erh\u00e4lt + 1.000 Ergebnisse. Das Durchst\u00f6bern der nicht enden wollenden Ergebnisliste entnervt, erm\u00fcdet und f\u00fchrt nicht selten zum Abbruch des Kaufs. Webdesigner sollten genau \u00fcberlegen, wie sie den Benutzern gewisse Entscheidungen abnehmen k\u00f6nnten. 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\u00fcr ist der bereits vorgestellte Stylebot von Levi\u2019s. Auch Versandh\u00e4ndler Asos erm\u00f6glicht es seinen Useren \u00fcber das Feature Style-Match eigene Modefotos in die App zu laden und dann nach \u00e4hnlichen Outfits zu suchen. Auf diese Weise kann die Ergebnisliste direkt auf wahrscheinliche Wunschmodelle eingeschr\u00e4nkt werden. Der Streaming-Dienst Netflix nimmt seinen Benutzern die Entscheidung ab, was sie als N\u00e4chstes schauen m\u00f6chten: Nicht nur gibt das Streaming-Portal personalisierte Empfehlungen f\u00fcr Filme. Ist der User am Serienende angelangt, startet automatisch ein besonders spannender Trailer f\u00fcr die n\u00e4chste Serie etc. Der Spa\u00df 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 \u00fcber den \u201eOne-Click-Button\u201c gleich weitere Stufen des Verkaufsprozesses \u00fcberspringen und kommt viel schneller ans Ziel.<\/p>\n

Empathie im Webdesign-Prozess<\/h6>\n

Um Empathie im Webdesign-Prozess zu implementieren, ist es entscheidend, der Beobachtung der Besucher Platz zu geben \u2013 und dies nicht in einer Testumgebung, sondern gleich in ihrem Umfeld. Wer Benutzer in seinem Umgang mit einem Artikel beobachtet, erh\u00e4lt einen sehr guten Eindruck von seinen Gef\u00fchlen, Bed\u00fcrfnissen und Frustrationen. Dabei werden h\u00e4ufig Bed\u00fcrfnisse erkennbar, die die Kunden noch gar nicht so wahrgenommen haben. Das Problem, das Henry Ford in seinem bekannten Zitat \u201eWenn ich die Menschen gefragt h\u00e4tte, was sie wollen, h\u00e4tten sie gesagt, schnellere Pferde.\u201c zum Ausdruck gebracht hat.<\/p>\n

\u201eOft sind User so an den aktuellen Umstand so gew\u00f6hnt, dass es ihnen nicht in den Sinn kommt, nach neuen L\u00f6sungen zu fragen \u2013 auch wenn sie bestehende Bed\u00fcrfnisse haben, die adressiert werden k\u00f6nnten\u201c, schreiben Jeffrey F. Rayport und Dorothy Leonard. Ihr Aufsatz im Harvard Business Journal aus dem Jahr 1997 gilt als Basis f\u00fcr den empathischen Webdesign-Prozess und ist auch f\u00fcr Web- und Screendesigner von gro\u00dfer Bedeutung. Leonard und Rayport zeigen den Fall einer Nutzerin, die keine konkreten W\u00fcnsche \u00e4u\u00dferte, als sie nach Verbesserungsm\u00f6glichkeiten ihres Textverarbeitungsprogramms gefragt wurde. Durch eine genaue Beobachtung der Situation fiel allerdings auf, dass die Nutzerin ihre Arbeit mit dem Textverarbeitungsprogramm regelm\u00e4\u00dfig unterbrechen musste, um den Textfluss manuell zu ver\u00e4ndern. Sie hatte sich so an den Workaround anpasst, dass ihr dieses Problem gar nicht mehr bewusst war.<\/p>\n

Besonders durch pers\u00f6nliche Erhebungen und Befragungen lassen sich wichtige Einblicke gewinnen. Wesentlich ist dabei, m\u00f6glichst viele Informationen zu erhalten: So k\u00f6nnen etwa Fotos oder Videos die Situation festhalten, um Gestik, Mimik, Handlungen und Umgebung der User zu einem kommend Zeitpunkt noch einmal abzurufen. Gespr\u00e4che sollten aufgezeichnet und durch Notizen dokumentiert sein.<\/p>\n

Im empathischen Design-Prozess nach Leonard und Rayport folgen die weiteren Schritte Reflexion und Analyse, Brainstorming nach m\u00f6glichen L\u00f6sungen und letztlich das Prototyping. Leonard und Rayport betonen, dass sich der mit viel Arbeit verbundene Prozess absolut lohnt: \u201eEmpathisches Webdesign<\/strong> bringt Innovation \u00fcber das reine Verbessern eines bestehenden Produkts weit hinaus\u201c.<\/p>\n

Empathy Mapping im Webesign-Prozess<\/h6>\n

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:<\/strong><\/p>\n