Johannes Kallweit 3. Oktober 2018

Emotionales Webdesign: So einfach sind die Grundlagen!

Emotionales Webdesign ist nicht etwa eine Gestaltung, bei der potenzielle Besucher in Tränen ausbrechen. Ebensowenig ist damit gemeint, dass die Gestaltung durch einen labilen Designer mit Trennungsschmerz erstellt wurde. Schauen wir also, was emotionales Webdesign wirklich ist.

Du kennst sie aus Google Analytics oder einem anderen Dienst zur Messung der wichtigen Besucher-Kennzahlen – die wiederkehrenden Besucher. Dabei fragt man sich ja bisweilen durchaus, was genau Besucher veranlasst, immer wieder eine bestimmte Webseite zu besuchen. Immerhin kennen die meisten deiner Besucher dich ja nicht persönlich – aber irgendetwas muss sie doch veranlassen, immer wieder zu kommen.

Einen Mitschuldigen stelle ich dir heute vor: es ist die durchaus komplizierte, emotionale Ausstrahlung deiner Webseite. Die Farben, die Schriftart, die Call-to-Action Buttons, die Bilder und die Textbereiche schaffen zusammen ein Ambiente, in dem sich der Besucher wohl (oder im schlechteren Falle eben unwohl) fühlt. Diese Emotionalität erzeugt im positiven Falle eine innige Verbindung zwischen der Webseite und dem Besucher. Damit bietet sich eine neue Herangehensweise an Webdesign an: das „emotionale Webdesign“.

Emotionelles Webdesign

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.

Beispiel für emotionales Webdesign

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

Illustration

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.

Trip Sniffer

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

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

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).

Illustration

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.

Illustration

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.

nature-html-template

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.

Fazit

Ich habe heute einige Faktoren vorgestellt, die du bei der Erstellung einer den Nutzer emotional ansprechenden Webseite berücksichtigen solltest. Lerne deine Zielgruppe so genau wie möglich kennen. Arbeite mit ansprechenden, emotionsauslösenden großen Bildern und finde die richtige Farbkombination. Das alles verpackst du in ein klares und einfaches Design. Und schon sollte sich der Besucher deiner Website, deines Magazins, deines Onlineshops wohl fühlen…

(Beitragsbild: Depositphotos) | (dpe)

Johannes Kallweit

Johannes Kallweit entschloss sich, nach seiner Ausbildung zum Mediengestalter noch ein Studium der Betriebswirtschaftslehre anzuhängen. Er hoffte, sich als Freelancer im Medienbereich das Studium finanzieren zu können. Inzwischen hat die Realität ihn eingeholt. So ein Studium ist doch verflixt anstrengend.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Ein Kommentar

  1. Bin mit dem meisten des hier Gesagten einverstanden.

    Aber dem Punkt mit den großen Hintergrundbildern kann man, finde ich, nicht zustimmen. Es mag ja sein, daß diese bei richtiger Motivwahl „sympathisch“ wirken, aber sie lenken von der Information ab, und Information ist ja eigentlich noch immer der Hauptgrund, warum Menschen auf Webseiten gehen.

    Abgesehen davon, das ist jetzt mein persönlich Eindruck, wirken große Hintergrundbilder billig und aufdringlich um nicht zu sagen marktschreierisch.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück