Was ist Neuro-Webdesign? Was der Begriff meint und was sich belegen lässt

Neuro-Webdesign heißt, Websites nach Erkenntnissen aus Psychologie und Hirnforschung darüber zu gestalten, was Menschen motiviert und wie sie entscheiden. Gut gestützt sind Regeln, die auf Verhaltensversuchen beruhen oder in den Richtlinien des W3C für barrierefreie Websites stehen: ein einfacher, vertrauter Aufbau, ausreichend große Schaltflächen, genug Kontrast und abschaltbare Bewegung. Vorsicht ist angebracht, wenn jemand verspricht, eine Gestaltung wirke unbewusst auf alle Kunden gleich: Die Forscher Dan Ariely und Gregory Berns trennen beim Neuromarketing ausdrücklich berechtigte Hoffnungen von Übertreibung, und die Wirkung von Farben hängt vom Zusammenhang ab.

Im Dezember 2008 erschien beim Verlag New Riders das Buch „Neuro Web Design: What Makes Them Click?“ von Susan Weinschenk. Laut Verlag wendet es die Forschung zu Motivation, Entscheidungen und Neurowissenschaft auf die Gestaltung von Websites an und nutzt dafür Konzepte des Neuromarketings.

Neuromarketing beschrieben Dan Ariely und Gregory Berns 2010 in der Fachzeitschrift Nature Reviews Neuroscience als Anwendung bildgebender Verfahren der Hirnforschung auf die Vermarktung von Produkten.

Neurodesign ist weiter gefasst. 2017 erschien bei Kogan Page das Buch „Neuro Design“ von Darren Bridger. Laut Verlag geht es darin um die unbewussten Reaktionen von Kunden auf Gestaltung, bei Websites ebenso wie bei Präsentationen, Videos und Beiträgen in sozialen Medien.

Die folgenden Regeln stammen nicht aus Hirnscans, sondern aus Verhaltensversuchen und aus den Web Content Accessibility Guidelines (WCAG) 2.2 des W3C, den Richtlinien für barrierefreie Websites. Die WCAG kennen drei Stufen: A ist die Mindeststufe; für AA erfüllt eine Seite die Kriterien der Stufen A und AA, für AAA die aller drei Stufen. Für jede Regel steht die Quelle am Ende des Beitrags.

Alexandre Tuch und Kollegen ließen Teilnehmer Bildschirmfotos von 119 echten Websites nach ihrer Ästhetik bewerten. Je nach Gruppe war jedes Bild 50, 500 oder 1.000 Millisekunden zu sehen. Schon nach 50 Millisekunden beeinflussten zwei Merkmale das Urteil: wie komplex eine Seite visuell aussieht und wie typisch sie für ihre Art von Website ist. In einem zweiten Versuch zeigte sich die Wirkung bereits nach 17 Millisekunden. Am ansprechendsten fanden die Teilnehmer Seiten mit geringer Komplexität und typischem Aufbau. Die Studie erschien 2012 im International Journal of Human-Computer Studies; Google Research führt sie unter seinen Veröffentlichungen.

Für Ihre Website heißt das: wenige Elemente auf den ersten Blick und ein Aufbau, wie ihn Besucher von ähnlichen Websites kennen.

Jakob Nielsen schrieb im Jahr 2000: Nutzer verbringen die meiste Zeit auf anderen Websites und bevorzugen deshalb, dass Ihre Website so funktioniert wie alle anderen, die sie schon kennen. Er nannte das „Jakob’s Law of the Internet User Experience“.

Die WCAG verlangen auf Stufe AA, dass eine Navigation, die sich auf mehreren Seiten einer Website wiederholt, jedes Mal in derselben Reihenfolge steht, solange der Nutzer sie nicht selbst ändert. Das soll Menschen helfen, Inhalte und Funktionen wiederzufinden, die sie mehr als einmal suchen.

Paul Fitts ließ 1954 Versuchspersonen mit einem Stift abwechselnd zwei Metallplatten antippen und veränderte dabei die Breite der Platten und ihren Abstand. Die Bewegungen dauerten umso länger, je größer der Abstand und je schmaler das Ziel war.

Die WCAG 2.2 verlangen auf Stufe AA, dass Ziele für Zeigereingaben wie Maus, Finger oder Stift mindestens 24 × 24 CSS-Pixel groß sind. Ausnahmen gibt es, etwa wenn ein kleineres Ziel genug Abstand zu anderen Zielen hat. Laut W3C hilft das Menschen, denen feine Bewegungen schwerfallen, weil sie seltener versehentlich das falsche Bedienelement treffen.

Nach WCAG Stufe AA braucht Text ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund, großer Text von mindestens 3:1. So sollen ihn auch Menschen mit mäßig eingeschränktem Sehvermögen oder eingeschränkter Kontrastwahrnehmung ohne Hilfsmittel lesen können. Wie Sie das auch in einem dunklen Farbschema einhalten, zeigt der Beitrag zum Dark Mode.

Bewegungsanimationen, die eine Aktion des Nutzers auslöst, sollen sich nach WCAG Stufe AAA abschalten lassen, wenn sie für Funktion oder Information nicht nötig sind. Laut W3C lenken Animationen manche Menschen ab oder lösen Übelkeit aus. Bewegen sich beim Scrollen Elemente, kann das bei Störungen des Gleichgewichtssinns Schwindel, Übelkeit und Kopfschmerzen auslösen. Als oft unnötige Animation nennt das W3C Parallax-Effekte, bei denen sich Hintergrund und Vordergrund unterschiedlich schnell bewegen.

Eine Website kann außerdem die Einstellung des Geräts berücksichtigen: Mit dem CSS-Medienmerkmal prefers-reduced-motion erkennt sie, ob jemand eingestellt hat, nicht notwendige Bewegung zu minimieren.

Für Textblöcke nennen die WCAG auf Stufe AAA unter anderem Zeilen von höchstens 80 Zeichen und innerhalb von Absätzen einen Zeilenabstand von mindestens anderthalb Zeilen. Laut W3C verlieren Menschen mit manchen Lese- oder Sehbehinderungen in langen Zeilen leicht die Stelle und können dem Text schwer folgen.

Vorsicht ist angebracht, wenn ein Angebot mit Hirnforschung wirbt. Ariely und Berns schrieben 2010, es sei noch nicht klar, ob bildgebende Verfahren bessere Daten liefern als andere Methoden der Marktforschung. Schlüsse aus der Aktivität einer einzelnen Hirnregion hätten gegenüber herkömmlichen Verhaltensmethoden relativ wenig Vorhersagekraft. Und wer behauptet, allein aus der Hirnaktivität zu wissen, was ein Mensch denkt, verdient nach ihrer Empfehlung Misstrauen.

Ähnlich ist es bei Farben. Der Psychologe Andrew Elliot kam 2015 in einer Übersichtsarbeit zu dem Schluss, dass die Forschung zu Farbe und psychischem Erleben noch am Anfang steht. Er riet zu Geduld und Umsicht bei Schlüssen für Theorie, Ergebnisse und Anwendung in der Praxis und bemängelte, dass ein großer Teil der Studien zu wenige Teilnehmer hatte. Jede Farbwirkung hängt nach seiner Darstellung von Bedingungen ab, etwa von Kultur, Geschlecht, Alter und Aufgabe. Sein Beispiel: Blau auf einer Schleife für den ersten Platz wirkt positiv, Blau auf einem Stück Fleisch negativ. Eine Farbe, die überall Vertrauen weckt oder zum Kauf bewegt, lässt sich daraus nicht ableiten.

Eine klare Regel zur Farbe steht dagegen in den WCAG, auf Stufe A: Farbe darf nicht das einzige sichtbare Mittel sein, um eine Information zu vermitteln, eine Aktion anzuzeigen, zu einer Reaktion aufzufordern oder ein Element zu unterscheiden. Menschen mit Farbsehschwäche sehen den Unterschied sonst unter Umständen nicht.

Wirbt ein Anbieter mit Messungen am Gehirn, helfen Fragen, die Ariely und Berns für die Auswahl einer Neuromarketing-Firma vorschlagen.

Was ist Neuro-Webdesign?

Neuro-Webdesign heißt, Websites nach Erkenntnissen aus Psychologie und Hirnforschung darüber zu gestalten, was Menschen motiviert und wie sie entscheiden. Gut gestützt sind Regeln aus Verhaltensversuchen und aus den WCAG des W3C, etwa zu einfachem Aufbau, großen Schaltflächen und genug Kontrast.

Was ist der Unterschied zwischen Neurodesign und Neuro-Webdesign?

Neurodesign ist weiter gefasst. Das Buch „Neuro Design“ von Darren Bridger behandelt laut Verlag die unbewussten Reaktionen von Kunden auf Gestaltung bei Websites, Präsentationen, Videos und Beiträgen in sozialen Medien. Neuro-Webdesign bezieht sich auf Websites.

Welche Regeln des Neuro-Webdesigns sind belegt?

In Versuchen fanden Teilnehmer Websites mit geringer visueller Komplexität und typischem Aufbau schon nach 17 bis 50 Millisekunden ansprechender. Nach den WCAG des W3C sollen Schaltflächen in der Regel mindestens 24 × 24 CSS-Pixel groß sein (Stufe AA), Text braucht einen Kontrast von mindestens 4,5:1 zum Hintergrund (Stufe AA), und Bewegungsanimationen, die eine Aktion auslöst, sollen sich abschalten lassen (Stufe AAA).

Woran erkenne ich übertriebene Versprechen beim Neuro-Webdesign?

Fragen Sie, was eine Messung gegenüber herkömmlichen Methoden bringt und ob es Daten dazu gibt, wie gut sie unter realen Bedingungen etwas vorhersagt. Ariely und Berns raten zu Misstrauen, wenn jemand behauptet, allein aus der Hirnaktivität zu wissen, was ein Mensch denkt. Bei Farben gilt: Ihre Wirkung hängt laut der Übersichtsarbeit von Andrew Elliot von Bedingungen wie Kultur, Alter und Aufgabe ab.

Bei Coday kommen Entwurf und Code von derselben Person: Der Inhaber gestaltet Websites und programmiert sie mit Next.js. Auf der Seite zum UX-Design nennt Coday vier Regeln, nach denen gestaltet wird, darunter große, gut erreichbare Schaltflächen und eine visuelle Hierarchie, in der Größe, Abstand und Kontrast zeigen, was zuerst gelesen werden soll.

Im kostenlosen Erstgespräch klären Sie mit dem Inhaber, was Ihre Website leisten soll. Danach erhalten Sie ein Angebot mit Festpreis.

Alle Quellen abgerufen am 21.10.2026.

• Susan Weinschenk: Neuro Web Design: What Makes Them Click? New Riders, Verlagsseite bei InformIT (öffnet in neuem Tab)
• Dan Ariely, Gregory S. Berns: Neuromarketing: the hope and hype of neuroimaging in business. Nature Reviews Neuroscience 11 (2010), S. 284–292 (öffnet in neuem Tab)
• Darren Bridger: Neuro Design. Kogan Page, 2017, Verlagsseite (öffnet in neuem Tab)
• Alexandre N. Tuch, Eva Presslaber, Markus Stoecklin, Klaus Opwis, Javier Bargas-Avila: The role of visual complexity and prototypicality regarding first impression of websites. International Journal of Human-Computer Studies 70 (2012), S. 794–811 (öffnet in neuem Tab)
• Google Research Blog: Users love simple and familiar designs, 29.08.2012 (öffnet in neuem Tab)
• Jakob Nielsen: End of Web Design. Nielsen Norman Group, 22.07.2000 (öffnet in neuem Tab)
• Paul M. Fitts: The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology 47 (1954), S. 381–391, Nachdruck 1992 (öffnet in neuem Tab)
• Andrew J. Elliot: Color and psychological functioning: a review of theoretical and empirical work. Frontiers in Psychology 6 (2015), Artikel 368 (öffnet in neuem Tab)
• W3C: Understanding Conformance (WCAG 2.2) (öffnet in neuem Tab)
• W3C: Understanding Success Criterion 3.2.3 Consistent Navigation (öffnet in neuem Tab)
• W3C: Understanding Success Criterion 2.5.8 Target Size (Minimum) (öffnet in neuem Tab)
• W3C: Understanding Success Criterion 1.4.3 Contrast (Minimum) (öffnet in neuem Tab)
• W3C: Understanding Success Criterion 2.3.3 Animation from Interactions (öffnet in neuem Tab)
• W3C: Understanding Success Criterion 1.4.8 Visual Presentation (öffnet in neuem Tab)
• W3C: Understanding Success Criterion 1.4.1 Use of Color (öffnet in neuem Tab)
• MDN Web Docs (Mozilla): prefers-reduced-motion (öffnet in neuem Tab)