Zehn psychologische Design-Tricks, die Ihren Onlineshop erfolgreicher machen

Jeder der im Design-Bereich arbeitet, kennt die Gesetze aus der Gestaltpsychologie   und orientiert sich nach Möglichkeit auch daran. Die Gestaltpsychologie widmet sich unter anderem dem Bereich der Wahrnehmung. Sie beschreibt die menschliche Wahrnehmung als Fähigkeit, Strukturen und Ordnungsprinzipien in Sinneseindrücken auszumachen. Nicht alle Sinne können wir beim Onlineshopping berücksichtigen, noch nicht. Beschränken wir uns in diesem Artikel auf die visuellen Reize und einige psychologische Modelle, die unsere Wahrnehmung beeinflussen.

Unsere visuelle Wahrnehmung ist ein sehr komplexer Prozess. Manchmal sehen wir Dinge anders als sie wirklich sind, denn unser Gehirn beeinflusst das Sehen. Unser Gehirn, macht es für uns passend. So sind auch optische Illusionen deshalb so faszinierend, weil unserem Gehirn zu wenige oder aber mehrdeutige Hinweise zur Interpretation des Geschehens geliefert werden. Dass Menschen sehr unterschiedlich wahrnehmen, zeigte #TheDress als es durch alle Social-Media-Kanäle ging. War das Kleid weiß-gold oder doch blau-schwarz?

Die Verarbeitung von Sinneseindrücken und die bewusste Steuerung der Bewegung ist eine der wichtigsten Aufgaben der Großhirnrinde (Cortex). Insgesamt sind etwa 60 Prozent der Großhirnrinde an der Wahrnehmung, Interpretation und Reaktion   auf visuelle Reize beteiligt. Auch werden bei der Wahrnehmung Areale im Gehirn aktiviert, die überhaupt keine optischen Impulse erhalten haben. Ziemlich kompliziert das Ganze.

Unsere Wahrnehmung wird durch eine Vielzahl von psychologischen Effekten beeinflusst:

• Inattentional Blindness Effect
  
• Change Blindness Effect
  
• Barrierefreies Design
  
• Hicks Law
  
• Fitts's Law
  
• Paradox of Choice
  
• Gaze Cueing Effect
  
• Visual Cueing Effect
  
• Focussing Effect
  
• Von Restorff Effekt

Inattentional Blindness Effect

Sie kennen den berühmten Aufmerksamkeitstest der beiden Psychologen Daniel Simons und Christopher Chabris ? Die Teilnehmer wurden aufgefordert, sämtliche Ballwechsel des Basketballteams mit dem weißen T-Shirt zu zählen. Wenn Sie das Video noch nicht kennen, sollten Sie es sich unbedingt ansehen  . Seien Sie aufmerksam und zählen sie genau die Anzahl der Ballwechsel. Lassen Sie sich nicht von dem hohem Tempo irritieren.

Ist Ihnen etwas aufgefallen? Haben Sie noch etwas anderes als die sechs Spieler bemerkt? Haben Sie auch den Gorilla durch das Bild gehen sehen? Wenn nicht, schauen Sie doch nochmal.

Menschen nehmen ein länger dauerndes, eigentlich sehr auffälliges, jedoch unerwartetes Ereignis nicht wahr, wenn sie mit einer elementaren Beobachtungsaufgabe (in diesem Fall das Zählen der Ballwechsel) beschäftigt sind. Die Höhe dieser sogenannten Inattentional blindness (= Unaufmerksamkeitsblindheit) hängt vom Schwierigkeitsgrad der Beobachtungsaufgabe ab. Uns werden Objekte gezeigt, die sich direkt durch das Zentrum unserer Aufmerksamkeit bewegen und trotzdem nicht "gesehen" werden, wenn wir ihnen keine spezielle Aufmerksamkeit entgegenbringen. Ein weiteres Beispiel können Sie hier   sehen.

So kann es also sein, dass Nutzer in Ihrem Onlineshop etwas einfach übersehen, weil sie mit der Aufmerksamkeit anderswo beschäftigt waren. Wir nehmen nichts bewusst wahr, wenn unsere Aufmerksamkeit nicht auch dorthin gelenkt wird. Und umgekehrt, wir können die Aufmerksamkeit erhöhen, wenn wir den User bewusst lenken.

Change Blindness Effect

Auch der Change Blindness Effect ist ein Fehlverhalten in unserer visuellen Wahrnehmung. Es beschreibt die Blindheit gegenüber Veränderungen. Selbst große Veränderungen einer Szene werden vom Betrachter nicht wahrgenommen, solange die Anordnung der Objekte beibehalten wird.

Wie können Sie diese beiden Phänomene umgehen oder gezielt für Ihren Onlineshop einsetzen? Jedesmal wenn ein neues visuelles Element einer Seite hinzugefügt oder verändert wird, besteht die Gefahr, dass dies übersehen wird (weil der Fokus nicht darauf gelegt wird). Veränderungen müssen für den Kunden sichtbarer gemacht werden.

So ist es insbesondere im Checkout wichtig, dem Anwender ganz deutliche Hinweise zu Fehlermeldungen zu geben. Denn verändert sich die Seite nach einer Fehlermeldung optisch kaum oder nicht, müsste nun der Kunde auf die Suche gehen, anstatt dass Sie ihm die gewünschte Hilfe geben.

Wenn plötzlich eine Veränderung in unserem Blickfeld stattfindet, wird unsere Aufmerksamkeit ganz automatisch dorthin gelenkt. Sind wir allerdings für eine kurze Zeit abgelenkt, so erkennt der Betrachter in dieser Zwischenzeit die vorgenommene Veränderung nicht. In Onlineshops wird unseren Kunden nicht immer bewusst sichtbar gemacht, dass seine Handlung eine Veränderung hervorgebracht hat.

So ist für Kunden kaum ein Unterschied bemerkbar, wenn in der Produktbeschreibung die Anzahl der verfügbaren Shorts von 4 (in Größe 32) auf 1 (in Größe 29) springt. Diese wichtige Information wird kaum wahrgenommen. Wenn nur noch eine limitierte Anzahl von Artikeln verfügbar ist, können Sie zudem die Dringlichkeit mit dem Loss Aversion Effect (siehe iBusiness: Pricing - Wie Shopbetreiber die Preiswahrnehmung beim Kunden beeinflussen) hervorheben.

Neue visuelle Elemente sollten sehr klar und deutlich dort angezeigt werden, wo sich gerade der Aufmerksamkeitsfokus der Besucher befindet.

Besser gelöst ist das Thema bei MyTheresa  . Dort wird es optisch viel deutlicher sichtbar sobald von einem Artikel nur noch 1 Stück im Lager vorhanden ist.

Aber was ist, wenn Ihre User tatsächlich blind sind oder mit einer anderen Einschränkung leben müssen, und visuelle Veränderungen gar nicht erst wahrnehmen können?

Barrierefreies Design

Es gibt eine Vielzahl von Menschen, die mit einer Einschränkung leben müssen. Eingeschränkte Seh- und/oder motorische Fähigkeiten, Autisten, Schwerhörige oder Gehörlose oder auch Menschen mit einer Dyslexia. Wie sieht eine optimale User Experience in Ihrem Onlineshop für diese Zielgruppe aus?

Für Sehende sind Bilder visuelle Informationsquellen. Allerdings ist eine blinde Person, die in Ihrem Onlineshop einkaufen möchte, auf barrierefreie Grafiken angewiesen. Blinde User lassen sich die ALT-Tags von Screenreadern vorlesen und bekommen durch das ALT-Attribut die Bildaussage erklärt. Die Optimierung des ALT-Attributes, ALT-Tag, TITLE-Tag ist also nicht nur aus SEO-Gründen sehr wichtig, sondern ebenso und vielleicht vielmehr für diese Zielgruppe ein absolutes Must-have.

Die Dos and Don'ts beim Gestalten einer Seite für Benutzer mit einer Leseschwäche:

• Keine langen, komplexen Textblöcke verwenden
  
• Keine Texte unterstreichen, kursiv setzen oder in Großbuchstaben schreiben
  
• Benutzer zwingen, sich Informationen zu merken
  
• Korrekte Rechtschreibung ohne Autokorrektur (überprüfen Sie in diesem Zusammenhang doch auch die Suchfunktion in Ihrem Onlineshop)
  
• Zu viele Inhalte an einer Stelle platzieren

Die folgende Grafik zeigt eine Übersicht mit den Dos and Don'ts einer optimalen User Experience für Menschen mit einer Einschränkung. Viele davon können 1:1 übernommen werden, weil sie sich vom Design einer Webseite nicht von den Anforderungen für "gesunde" Menschen unterscheiden.

Hicks Law

Der britische Mediziner William Edmund Hick fand heraus, dass es einen Zusammenhang zwischen Reaktionszeit und der Anzahl der Wahlmöglichkeiten gibt. Um eine optimale User Experience zu gewährleisten, ist es wichtig, dass Ihr Kunde schnell zu einer Lösung für sein Problem kommt.

Je mehr Möglichkeiten (n) Sie anbieten, umso länger (RT) dauert es eine Entscheidung zu treffen. Braucht Ihr Kunde zu lange für eine Entscheidung, weil er sich in der Angebots- und Informationsvielfalt auf der Seite nicht zurechtfindet, umso höher ist die Wahrscheinlichkeit, dass er Ihre Seite wieder verlässt.

Wenn Sie Hicks Law in Betracht ziehen, bietet dieses Gesetz innerhalb der Navigation in nahezu jedem Onlineshop ein Optimierungspotenzial. Verschiedene Themen können zusammengefasst und gruppiert werden. Ihr Kunde muss nicht umständlich in einer horizontal wie vertikal angeordneten Navigation suchen.

In einer optisch (und logisch) gut strukturierten Navigation finden Kunden sich sehr schnell zurecht. Um diesen Effekt bestmöglich anzuwenden, arbeiten Sie nach dem KISS Prinzip (Keep It Simple Stupid). Priorisieren Sie, kategorisieren Sie. Überfordern Sie den User nicht mit zu vielen Informationen. Nutzen Sie die Daten aus Google Analytics, um Ihren Onlineshop für Ihre Kunden besser zu optimieren.

Fitts's Law

Wo platzieren Sie die Call-to-Action-Buttons? Etwas mehr rechts, doch lieber links, näher an den Text, mit oder ohne Icon, etwas größer oder lieber kleiner? Durchaus wichtige Fragen. Der Psychologe Paul Fitts entwickelte eine Formel, die besagt, dass die benötigte Zeit, um eine Zielfläche zu erreichen, eine Funktion der Distanz zu dieser Fläche und deren Größe ist.

Die Zeit, die benötigt wird, um das Ziel A zu erreichen, ist kürzer als C oder B. Obwohl A und B dieselbe Größe haben. Das Ziel C hat exakt denselben Abstand vom Cursor, wie das Ziel A. Der Button ist jedoch kleiner und so braucht der User länger.

Fitts's Law hilft dabei die richtige Entscheidung zu treffen, wo und in welcher Größe die Call-to-Action-Buttons platziert sein sollten, sodass Ihre Kunden schnell(er) konvertieren können. Wenn Sie mögen, überprüfen Sie dies selbst in diesem Experiment  .

Auch innerhalb der Navigation kann die Zeit, ein bestimmtes Ziel zu erreichen, verkürzt werden. Dazu werden die Objekte in einem Viereck statt in einer Liste angeordnet. Kunden brauchen bei dieser Anordnung weniger Zeit zum Klicken. Ebenso sollten Sie bedenken, wo Sie welche Inhalte platzieren und ob diese evtl. auch größer dargestellt werden können. Größere Calls-to-Action mit einem kürzeren Abstand sind einfacher zu klicken (weil weniger Präzision erforderlich ist) und Sie können den User leichter in die richtige Richtung lenken. Eine Heatmap und A/B-Tests helfen Ihnen dabei sicherlich einen Schritt weiter.

Gaze Cueing Effect

Unbewusst richten wir unsere Aufmerksamkeit auf das wohin andere Menschen schauen. Es funktioniert automatisch. Wenn wir ein Gesicht sehen, können wir gar nicht anders als dorthin zu schauen. Evolutionär bedingt ist dies notwendig, um Gefahren einzuschätzen, um zu erkennen ob unser Gegenüber wütend, kampflustig oder ängstlich schaut. Wir bekommen eine Fülle von Informationen, sobald unsere Augen offen sind, um uns im sozialen Umfeld zu orientieren.

Diesen Effekt können wir auch in Onlineshops nutzen, indem wir Gesichter in eine bestimmte Richtung blicken lassen. Ein Bild sagt mehr als tausend Worte und mit der Blickrichtung einer Person in einem Bild, die Aufmerksamkeit der User in eine bestimmte Richtung oder Botschaft zu lenken, können wir die Conversionrates erhöhen. Experimentieren Sie, denn nur so können Sie herausfinden was bei Ihren Kunden wirklich funktioniert. Nutzen Sie die Blickrichtung, um die Aufmerksamkeit des Betrachters auf die Botschaft zu lenken. Platzieren Sie wichtige Elemente rechts vom Blickfeld, denn so unterstützen Sie die natürliche Leserichtung.

Original: Die Blickrichtung geht zwar in die Richtung des Schriftzugs, jedoch schauen die Augen über den Schriftzug hinaus.

Variante 1: Blickrichtung auf gleicher Höhe wie der Schriftzug.

Variante 2: Blickrichtung auf die CTA in gleicher Höhe

Auch wenn die Augen durch die Taucherbrille bei dem Kind verdeckt sind, lenkt die Blickrichtung den User auf die Headline und die CTA.

Der australische Usability-Experte James Breeze hat die Dauer und Richtung der Augenbewegungen mit Hilfe von Eye-Tracking-Methoden untersucht. Wenn Probanden ein Bild gezeigt bekamen, welches sie direkt anschauten, zeigte die Heatmap, dass die Betrachter den Blick auf das Gesicht des Babys richteten.

Im zweiten Versuch wurde die Blickrichtung des Babys geändert und es schaut zur Überschrift der Anzeige. Das Gesicht bekam zwar immer noch die gewünschte Aufmerksamkeit, allerdings wurde die Überschrift viel mehr betrachtet als vorher. Unser Blick wurde gelenkt und wir schauen dorthin wo das Baby hinschaut.

Visual Cueing Effect

Sie können auch mit grafischen Elementen die visuelle Aufmerksamkeit Ihrer Besucher lenken. Ähnlich wie beim Gaze Cueing (dort wo es um das Lenken der Blickrichtung mittels der Augen geht) ist das Visual Cueing mittels grafischer Elemente geeignet, die gesamte visuelle Aufmerksamkeit zu lenken.

Strukturieren Sie Ihren Onlineshop ein wenig, das entlastet die Augen der Besucher und nutzen Sie gezielt diese Art von Elementen. Um bessere Conversionrates zu erzielen oder um die Verweildauer auf der Seite zu erhöhen, kann es durchaus Sinn machen, mehrere Varianten zu testen. Die Aufmerksamkeit kann mit wirklich sehr einfachen Mitteln beeinflusst werden.

Der passionierte Persuasion Psychologist Bart Schutz testete diesen Effekt mit dem Ergebnis eines Uplifts von 57 Prozent. Die höhere Conversionrate wurde erreicht, indem der Pfeil nach unten (Bild rechts) die Blickrichtung der User lenkt.

Zwei paar Stiefel: User und Customer Experience

Es wird oft keinen Unterschied zwischen der User Experience (UX) und der Customer Experience (CX) gemacht. Die User Experience ist ein kleiner und dennoch wichtiger Teil der Customer Experience, und beschreibt wie Ihr Kunde mit dem Onlineshop interagiert und welche Erfahrungen daraus resultieren. Ihre Kunden sollten nach Möglichkeit die benötigten Informationen schnell und einfach finden, um eine Entscheidung zu treffen, um dieses oder jenes Produkt zu kaufen. Bei der User Experience steht das Nutzerverhalten im Vordergrund. Die Customer Experience dahingegen beinhaltet alle emotionalen Erfahrungen, die Ihr Kunde mit Ihrem gesamten Unternehmen (inkl. Onlineshop) hat, und zwar über alle Kanäle hinweg.

Vielfach wird auch die Customer Experience mit dem Customer Service gleichgesetzt. Customer Service könnte zum Beispiel ein integrierter Chatbot oder eine 24/7 Support-Hotline sein. Wenn allerdings eine negative Erfahrung mit der Support-Hotline auftritt (weil zum Beispiel der Mitarbeiter einfach mal einen schlechten Tag hat) beeinflusst dies direkt die Customer Experience.