Jemand klickt bei Google auf deine Website. Die Startseite lädt, und schon ist die Person wieder weg. Gelesen hat sie nichts. Was ist in diesem kurzen Moment passiert? Dieser Beitrag ist Teil 1 meiner Serie Neuro-Webdesign: Wie Besucher entscheiden. Ich zeige dir, was die Forschung über den ersten Eindruck einer Website weiß, wo sie an Grenzen stößt und was du an deiner Startseite ändern kannst. Am Ende gibt es eine Checkliste zum Abhaken, auch als PDF.
Erster Eindruck Website: Was es ist
Menschen bewerten das Aussehen einer Website, bevor sie ein einziges Wort gelesen haben. Das passiert schneller, als man bewusst schauen kann. Heraus kommt ein Bauchgefühl: gefällt mir oder gefällt mir nicht. Dieses Gefühl färbt alles, was danach kommt.
Wichtig ist der Begriff „Neuro-Webdesign“. Gemeint sind hier keine Hirnscans. Gemeint ist angewandte Wahrnehmungs- und Entscheidungspsychologie: Was weiß die Forschung darüber, wie Menschen eine Seite sehen und entscheiden?
Woher die 50 Millisekunden kommen
Die Zahl stammt aus einer Studie der Psychologin Gitte Lindgaard und ihres Teams. Der Titel ist schon eine Ansage: „Attention web designers: You have 50 milliseconds to make a good first impression!“ (Studie von 2006 in der Fachzeitschrift Behaviour & Information Technology). Die Forscher zeigten Versuchspersonen Bilder von Startseiten. Manche Bilder waren nur 50 Millisekunden lang zu sehen, andere 500 Millisekunden. Danach sollten die Personen sagen, wie ansprechend sie die Seite fanden.
Das Ergebnis: Schon nach 50 Millisekunden hatten die Personen ein verlässliches Urteil über das Aussehen gebildet.
Sechs Jahre später haben Forscher der Universität Basel und von Google nachgelegt (Tuch et al. 2012, Studie als PDF). Sie wollten wissen, was genau in diesem Moment bewertet wird. Dafür haben sie Startseiten noch kürzer gezeigt: 17, 33 und 50 Millisekunden. Am zweiten Versuch nahmen 82 Personen teil.
Was die Studien zum ersten Eindruck sagen
Die Basler Forscher haben zwei Eigenschaften geprüft. Beide wirkten schon nach 17 Millisekunden:
- Visuelle Komplexität: Wie viel ist auf der Seite los? Viele Elemente, viele Farben, viel Bewegung machen eine Seite unruhig. Unruhige Seiten fanden die Personen weniger schön.
- Prototypikalität: Das Fachwort heißt so viel wie „sieht aus wie typisch“. Gemeint ist: Sieht die Seite aus wie andere Seiten dieser Art? Seiten, die ungewohnt aussahen, kamen schlechter an. Das galt auch dann, wenn sie aufgeräumt waren.
Die Unruhe wirkte dabei stärker als die Vertrautheit. Am besten schnitten Seiten ab, die ruhig waren und vertraut aussahen. Google hat das in einem Blogbeitrag von 2012 so zusammengefasst: Nutzer mögen einfache und vertraute Designs.
Die Vertrautheit kennst du vielleicht aus meiner Serie über UX-Gesetze. Dort erkläre ich Jakob’s Law: Besucher verbringen die meiste Zeit auf anderen Websites und erwarten, dass deine ähnlich funktioniert. Hier geht es um den Moment davor, wenn noch gar nichts bedient wurde. Warum schöne Seiten auch als leichter bedienbar gelten, steht in der Übersicht der UX-Gesetze beim Aesthetic-Usability-Effekt.
Die Grenzen der Studien
So eindrucksvoll die Zahlen klingen, sie haben klare Grenzen. Die solltest du kennen, bevor du deine Seite umbaust:
- Gemessen wurde Schönheit, nicht Erfolg. Die Personen sollten sagen, wie ansprechend sie eine Seite finden. Ob sie dort angefragt oder gekauft hätten, wurde nicht gemessen.
- Bilder statt echter Nutzung. Die Personen sahen Bildschirmfotos. Sie konnten nicht scrollen und nichts anklicken. Die Basler Forscher nennen das selbst als Schwäche.
- Eine bestimmte Gruppe. Die Teilnehmenden waren eher jung. Gezeigt wurden nur Firmenseiten. Andere Altersgruppen oder Shops können anders reagieren.
- Inhalt zählt danach. Ein guter erster Eindruck verschafft dir ein paar Sekunden Aufmerksamkeit. Ob jemand anfragt, entscheiden danach Text, Preise und Kontakt.
Für die Praxis heißt das: Der erste Eindruck öffnet die Tür. Durchgehen müssen die Besucher dann selbst, und dafür brauchen sie Inhalte.
Wo dich der erste Eindruck betrifft
Am stärksten wirkt der erste Eindruck bei Menschen, die deine Seite noch nicht kennen. Das sind vor allem Besucher von Google oder aus Werbeanzeigen. Typische Stellen, an denen ich in der Praxis ansetze:
- Startseite mit Slider: Fünf Bilder wechseln sich ab, jedes mit eigenem Text. Der Besucher sieht in der ersten Sekunde nur Bewegung.
- Pop-ups beim Laden: Newsletter, Gutschein und Cookie-Banner erscheinen gleichzeitig. Die eigentliche Seite ist dahinter kaum zu sehen.
- Viele Schriften und Farben: Jede Unterseite wurde irgendwann von jemand anderem gestaltet. Das Ergebnis wirkt unruhig.
- Falsche Branche im Look: Ein Handwerksbetrieb hat eine Seite, die aussieht wie ein Onlineshop. Oder eine Kanzlei wirkt wie ein Start-up. Besucher müssen sich erst orientieren.
Beispiel: die Startseite eines Installateurs
So sieht das in der Praxis aus. Links eine Startseite, wie ich sie oft vorfinde. Rechts dieselbe Firma mit einem klaren Ziel.
Was sich rechts geändert hat, ist wenig Aufwand:
- Ein Satz oben sagt, was die Firma macht und für wen.
- Es gibt einen Hauptbutton statt vier gleich lauter Buttons.
- Das Foto zeigt das echte Team statt eines wechselnden Sliders.
- Pop-up, Laufschrift und Chat-Blase sind weg oder erscheinen erst später.
Die rechte Seite ist nicht schöner im Sinn von Kunst. Sie ist ruhiger, und sie sieht aus wie eine Handwerker-Seite. Genau das belohnt der erste Eindruck.
Barrierefreiheit: Ruhe hilft allen
Weniger Unruhe hilft nicht nur beim ersten Eindruck. Menschen mit Konzentrationsproblemen oder einer Sehschwäche kommen mit einer ruhigen Seite besser zurecht. Manche Menschen lassen sich die Seite von einem Screenreader vorlesen, einem Programm für blinde und sehbehinderte Menschen. Weniger Elemente heißen für sie weniger Umwege.
Für bewegte Inhalte gibt es eine eigene Regel in den WCAG, den internationalen Regeln für barrierefreie Websites. Die Anforderung 2.2.2 Pausieren, Stoppen, Ausblenden (Stufe A) verlangt: Bewegt sich etwas automatisch länger als fünf Sekunden, müssen Besucher es anhalten oder ausblenden können. Ein Slider ohne Pause-Knopf oder eine Laufschrift erfüllen das oft nicht. Ob deine Seite solche Barrieren hat, zeigt dir mein kostenloser Barrierefreiheits-Schnellcheck.
Wann es Sinn macht und wann nicht
Der erste Eindruck zählt überall dort, wo neue Besucher ankommen. Das sind vor allem die Startseite und Seiten, auf die Google oder deine Werbung führt. Bei Stammkunden, die nur schnell ins Kundenkonto wollen, ist er weniger wichtig. Sie kennen dich schon.
Übertreiben solltest du es nicht. „Aussehen wie alle anderen“ ist kein Ziel an sich. Eine Designagentur oder ein Fotograf will vielleicht bewusst auffallen. Das ist in Ordnung, wenn du weißt, dass du dafür am Anfang etwas Sympathie aufs Spiel setzt.
Und: Eine ruhige Startseite rettet keine schwachen Inhalte. Wenn der erste Eindruck gut ist und dann keine Preise, keine Ansprechperson und kein Kontakt zu finden sind, ist der Besucher trotzdem weg. Wie du dieses Vertrauen aufbaust, erkläre ich im nächsten Beitrag.
Selbst testen: der 5-Sekunden-Test
Den ersten Eindruck deiner Seite kannst du ohne Labor prüfen. Du brauchst nur eine Person, die deine Seite nicht kennt:
- Öffne deine Startseite auf einem Bildschirm oder Handy.
- Zeig sie der Person fünf Sekunden lang. Dann Bildschirm weg.
- Frag: Was macht diese Firma? Was ist dir aufgefallen? Was würdest du als Nächstes tun?
Kann die Person nicht sagen, was du machst, hast du deine wichtigste Baustelle gefunden. Wenn du ohnehin über einen Neustart nachdenkst, hilft dir mein Beitrag Website-Relaunch: wann er sich lohnt. Für den Start einer neuen Seite gibt es außerdem meine Launch-Checkliste.
Checkliste: der erste Eindruck deiner Website
Hake ab, was auf deiner Website schon passt. Dein Stand bleibt in diesem Browser gespeichert.
- Auf den ersten Blick ist klar, was die Firma macht. Zeig die Startseite fünf Sekunden lang jemandem, der dich nicht kennt. Kann die Person danach sagen, was du anbietest?
- Auf der ersten Bildschirmseite gibt es höchstens einen Hauptbutton. Zähl die Buttons, die du ohne Scrollen siehst. Fällt einer klar auf?
- Kein Pop-up erscheint, bevor man etwas gelesen hat. Öffne die Seite in einem privaten Browserfenster. Springt sofort etwas auf?
- Die Seite sieht aus wie eine Seite deiner Branche. Vergleich sie mit den Seiten von drei Mitbewerbern. Findet sich ein Besucher sofort zurecht?
- Höchstens zwei Schriftarten und wenige Farben. Schau die Startseite an. Wie viele verschiedene Schriften und Farben siehst du?
- Nichts bewegt sich ungefragt. Bleib zehn Sekunden auf der Startseite. Laufen Slider, Laufschrift oder Videos von selbst?
- Am Handy wirkt die Seite genauso klar. Öffne die Startseite am Handy. Siehst du ohne Scrollen, worum es geht?
Häufige Fragen
Stimmt das mit den 50 Millisekunden wirklich?
Ja, für das Urteil über das Aussehen. Zwei Studien von 2006 und 2012 kommen zu einem ähnlichen Ergebnis. Die zweite fand erste Effekte sogar nach 17 Millisekunden. Gemessen wurde aber nur das Urteil über das Aussehen. Ob jemand dort kauft, blieb offen.
Heißt das, Inhalte sind egal?
Nein. Der erste Eindruck entscheidet, ob jemand die nächsten Sekunden bleibt. Ob er anfragt, entscheiden danach Text, Preise und Kontaktmöglichkeiten. Eine schöne Seite ohne klare Aussage verliert genauso.
Muss meine Seite aussehen wie die der Konkurrenz?
Nicht gleich, aber vertraut. Besucher sollen sofort erkennen, in welcher Branche sie sind und wo sie was finden. Innerhalb dieses Rahmens hast du viel Spielraum für deine Marke.
Wie teste ich den ersten Eindruck selbst?
Mit dem 5-Sekunden-Test: Startseite fünf Sekunden zeigen, dann fragen, was die Person sich gemerkt hat. Nimm dafür Menschen, die deine Firma nicht kennen. Mach den Test mit mehreren Personen. Dann siehst du, ob sich ein Muster wiederholt.
Du willst wissen, wie deine Startseite auf Fremde wirkt? Ich mache mit dir einen 5-Sekunden-Test deiner Startseite und sage dir klar, was auffällt. Schreib mir über die Kontaktseite. Weiter in der Serie geht es mit Vertrauen online: Was Besucher prüfen, bevor sie anfragen.
Quellen
- Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2006): Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology, 25(2), 115–126
- Tuch, A. N., Presslaber, E. E., Stöcklin, M., Opwis, K. & Bargas-Avila, J. A. (2012): The role of visual complexity and prototypicality regarding first impression of websites (Preprint)
- Bargas-Avila, J. (2012): Users love simple and familiar designs – Why websites need to make a great first impression. Google Research Blog
- W3C: Understanding Success Criterion 2.2.2 Pause, Stop, Hide
