Cognitive Load einfach erklärt: Weniger Denkarbeit für deine Besucher

Jede Website verlangt Denkarbeit. Wer ein Formular ausfüllt, muss lesen, verstehen, sich etwas merken und entscheiden. Cognitive Load beschreibt, wie viel davon auf einmal anfällt. Wird es zu viel, machen Besucher Fehler oder brechen ab. Für dich heißt das: weniger Anfragen und weniger Bestellungen. Das ist Teil 4 meiner Serie UX-Gesetze. Vorher ging es um Fitts‘ Law, Jakob’s Law und Hick’s Law. Am Ende gibt es eine Checkliste zum Abhaken, auch als PDF.

Was ist Cognitive Load?

Cognitive Load ist die Denkarbeit, die eine Website von ihren Besuchern verlangt. Gemeint ist die Belastung des Arbeitsgedächtnisses. Das ist der Teil des Gedächtnisses, in dem wir Dinge kurz behalten und verarbeiten. Er fasst nur wenig auf einmal.

Für Websites sind zwei Arten wichtig. Die notwendige Denkarbeit steckt in der Aufgabe selbst. Zwei Tarife zu vergleichen ist einfach anspruchsvoll. Die unnötige Denkarbeit verursacht das Design. Eine Beschriftung erraten, ein Pop-up wegklicken, die Adresse ein zweites Mal tippen. Deine Aufgabe ist es, die unnötige Denkarbeit zu streichen. Dann bleibt mehr Platz für die notwendige.

Woher Cognitive Load kommt

Der Begriff kommt aus der Lernforschung. Der australische Bildungspsychologe John Sweller hat 1988 in der Fachzeitschrift Cognitive Science dazu veröffentlicht. Er hat untersucht, wie Lernende Aufgaben lösen. Wer dabei ständig den Abstand zum Ziel im Blick behalten muss, belastet das Arbeitsgedächtnis stark. Für das eigentliche Lernen bleibt dann wenig übrig. Kurz gesagt: Je mehr eine Aufgabe nebenbei verlangt, desto weniger bleibt für das Wesentliche.

1998 haben Sweller, Jeroen van Merriënboer und Fred Paas die Theorie ausgebaut. Darin unterscheiden sie die beiden Arten der Belastung, die ich oben beschrieben habe, und eine dritte, die beim Lernen hilft. Ins Webdesign kam die Idee über die Forschung zur Benutzerfreundlichkeit. Kathryn Whitenton arbeitet bei der Nielsen Norman Group, einem US-Beratungsunternehmen für Benutzerfreundlichkeit. Sie hat 2013 Grundregeln dazu beschrieben. Sie rät unter anderem, Unnötiges wegzulassen und Besuchern Arbeit abzunehmen, etwa indem Felder schon passend ausgefüllt sind.

Was die Studien zu Cognitive Load sagen

Wie wenig Platz das Arbeitsgedächtnis hat, hat der Psychologe Nelson Cowan 2001 in einer viel zitierten Übersichtsarbeit zusammengefasst. Sein Ergebnis: Im Schnitt behalten wir etwa vier Dinge gleichzeitig im Kopf, zum Beispiel Zahlen oder Wörter. Je nach Studie liegt der Schnitt bei drei bis fünf. Einzelne Menschen schaffen zwei bis sechs. Die bekannte Zahl Sieben stammt aus einer älteren Arbeit von George Miller. Um sie geht es im nächsten Teil der Serie.

Wie schnell das im Alltag spürbar wird, zeigt ein Detail aus Formularen. Steht die Beschriftung nur als grauer Text im Feld, verschwindet sie beim Tippen. Wer dann unterbrochen wird, weiß nicht mehr, was ins Feld gehört. Die Nielsen Norman Group rät deshalb seit 2014 zu Beschriftungen außerhalb des Felds.

Wie viel Arbeit Formulare oft machen, misst das Baymard Institute in seinen Studien zu Onlineshops. Laut seiner Auswertung von 2024 hat ein durchschnittlicher Bestellvorgang 11,3 Formularfelder. Nach Einschätzung von Baymard kommen die meisten Shops mit 8 aus.

Eine Einschränkung gehört dazu. Die Cognitive Load Theory wurde fürs Lernen entwickelt, nicht für Websites. Die Übertragung ist plausibel und in der Praxis weit verbreitet. Wie viel ein einzelnes gestrichenes Feld bringt, hängt aber von der Seite ab.

Wo Cognitive Load Anwendung findet

• Navigation am Handy: Die App zeigt groß den nächsten Abbiegeschritt, nicht die ganze Route.
• Onlineshops: Ein Häkchen „Lieferadresse wie Rechnungsadresse“ erspart das zweite Tippen.
• Bestellung in Schritten: Eine Leiste zeigt „Schritt 2 von 3“. Niemand muss raten, wie viel noch kommt.
• Login: Passwort-Manager füllen das Passwort ein. Handys schlagen den Code aus der SMS oft direkt vor.
• Lesemodus im Browser: Er blendet alles aus, was nicht zum Text gehört.
• Zahlung mit Karte: Viele Shops erkennen die Kartenart an den ersten Ziffern. Niemand muss sie extra auswählen.

So wendest du Cognitive Load auf deiner Website an

• Weglassen, was nicht hilft. Bildergalerien, die von selbst weiterlaufen (Slider), und Pop-ups, die beim Lesen aufgehen, kosten Aufmerksamkeit.
• Bekanntes nutzen. Menü oben, Warenkorb rechts oben. Warum das hilft, steht im Beitrag zu Jakob’s Law.
• Text gliedern. Zwischenüberschriften, kurze Absätze und Listen. Das Wichtigste kommt zuerst.
• Beschriftungen sichtbar lassen. Sie stehen über dem Feld, nicht als grauer Text im Feld.
• Nur fragen, was du brauchst. Jedes Feld kostet Zeit. Was du im ersten Gespräch klären kannst, muss nicht ins Formular.
• Nichts merken lassen. Angaben aus früheren Schritten bleiben sichtbar. Die Lieferadresse lässt sich mit einem Klick übernehmen.
• Lange Abläufe aufteilen. Lieber mehrere kurze Schritte mit Fortschrittsanzeige. Mehr dazu bei Hick’s Law.
• Fehler beim Feld erklären. Nicht „Eingabe ungültig“, sondern „Die E-Mail-Adresse braucht ein @“.

Die meisten dieser Punkte setzt dein Webentwickler in kurzer Zeit um. Das Design muss sich dafür kaum ändern.

<!-- Beschriftung bleibt sichtbar, der Browser kann ausfüllen (WCAG 1.3.5, 3.3.2) -->
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name">

<label for="mail">E-Mail</label>
<input id="mail" name="mail" type="email" autocomplete="email"
       aria-describedby="mail-hilfe">
<p id="mail-hilfe">Nur für Rückfragen zu deiner Anfrage.</p>

<!-- Checkout: Adresse übernehmen statt neu tippen (WCAG 3.3.7) -->
<label>
  <input type="checkbox" name="gleiche_adresse" checked>
  Lieferadresse ist gleich wie Rechnungsadresse
</label>

<!-- Login: Passwort-Manager und Einfügen nie blockieren (WCAG 3.3.8) -->
<label for="user">E-Mail</label>
<input id="user" name="user" autocomplete="username">
<label for="pw">Passwort</label>
<input id="pw" name="pw" type="password" autocomplete="current-password">

<!-- Code aus der SMS: Handy schlägt ihn automatisch vor -->
<label for="code">Bestätigungscode</label>
<input id="code" name="code" autocomplete="one-time-code" inputmode="numeric">

Ein Beispiel aus der Praxis

Ein Fall, wie er bei vielen Dienstleistern vorkommt: Das Anfrageformular hat zwölf Felder. Anrede, Titel, Firma, Adresse und Wunschtermin sind Pflicht. Die Beschriftungen stehen nur als grauer Text in den Feldern. Am Ende muss man einen Code mit verzerrten Buchstaben abtippen. So ein Code heißt Captcha. Am Handy ist das eine lange Strecke für eine einfache Frage.

Die Lösung: Das Formular fragt nur, was für die erste Antwort nötig ist. Das sind der Name, ein Weg für die Antwort und das Anliegen. Der Ort ist freiwillig, weil er bei Handwerkern für die Anfahrt hilft. Die Beschriftungen stehen über den Feldern. Statt des Captchas läuft ein Spamschutz im Hintergrund. Dein Entwickler kann dafür etwa ein verstecktes Feld einbauen, das nur Spam-Programme ausfüllen. Alles Weitere klärst du im ersten Gespräch.

Cognitive Load und Barrierefreiheit

Für Menschen mit kognitiven Einschränkungen oder Lernschwierigkeiten ist unnötige Denkarbeit oft genau das, was eine Website unbenutzbar macht. Das gilt auch für Menschen mit Gedächtnisproblemen und für alle, die gerade gestresst oder abgelenkt sind.

Das W3C, das Gremium hinter den WCAG, hat dazu einen eigenen Leitfaden veröffentlicht (auf Englisch). Er ist eine Empfehlung, keine Pflicht. Zwei seiner acht Ziele passen genau: Nutzern helfen, sich zu konzentrieren. Und Abläufe so bauen, dass sie nicht vom Gedächtnis abhängen.

Die WCAG sind die internationalen Regeln für barrierefreie Websites. Für manche Unternehmen sind sie Pflicht. In Deutschland regelt das das Barrierefreiheitsstärkungsgesetz (BFSG), in Österreich das Barrierefreiheitsgesetz (BaFG). Als technischer Maßstab dient dabei die europäische Norm EN 301 549. Ihre derzeit gültige Fassung beruht auf WCAG 2.1. Eine neue Fassung mit WCAG 2.2 ist seit September 2026 fertig. Sie gilt, sobald die EU sie offiziell bekannt gibt. Erwartet wird das Ende 2026, einen offiziellen Termin gibt es noch nicht. In der Schweiz gelten eigene Regeln. Ob ein Gesetz für dich gilt, erkläre ich im Ratgeber Barrierefreiheit & Recht.

Die WCAG bestehen aus einzelnen Anforderungen mit Nummern, etwa 3.3.7. Jede hat eine Stufe: A ist die Grundstufe, AA die nächste. Gefordert sind beide. Zu Cognitive Load passen vor allem diese Anforderungen:

• 3.3.2 Beschriftungen oder Anweisungen (A): Jedes Eingabefeld hat eine Beschriftung oder eine Anleitung.
• 3.3.3 Korrekturvorschläge bei Fehlern (AA): Erkennt die Website einen Fehler und kennt sie die Lösung, sagt sie, wie es richtig geht.
• 1.3.5 Zweck von Eingabefeldern bestimmbar (AA): Felder für persönliche Angaben wie Name oder E-Mail sind technisch gekennzeichnet. Dann können Browser und Hilfsprogramme sie ausfüllen.
• 3.3.7 Keine doppelte Eingabe (A, neu in WCAG 2.2): Was jemand im selben Ablauf schon angegeben hat, wird vorausgefüllt oder ist auswählbar. Ausnahmen gibt es, wenn die erneute Eingabe der Sicherheit dient, unbedingt nötig ist oder die alte Angabe nicht mehr gilt.
• 3.3.8 Login ohne Merkaufgabe (AA, neu in WCAG 2.2): Verlangt der Login eine Denkaufgabe wie Abtippen oder Merken, braucht es eine Hilfe oder einen anderen Weg. Passwort-Manager und Einfügen zählen als Hilfe. Wer das Einfügen ins Passwortfeld sperrt, verstößt dagegen, außer es gibt einen anderen Weg. Ausgenommen sind auf dieser Stufe Aufgaben, bei denen man Objekte oder eigene Bilder erkennt.

Rechtlich verlangt sind 3.3.7 und 3.3.8 noch nicht. Mit der neuen Fassung der Norm ändert sich das. Es lohnt sich deshalb, sie jetzt schon umzusetzen. Sie helfen allen Besuchern.

Warum es Sinn macht und wann du es anwendest

Weniger Denkarbeit heißt weniger Abbrüche. Bei einem Anfrageformular sind das Anfragen, die sonst nie bei dir ankommen. Bei einem Shop sind es Bestellungen. Weniger Denkarbeit lohnt sich überall, wo Besucher etwas ausfüllen oder entscheiden sollen.

Nicht übertreiben solltest du beim Weglassen. Fehlt eine wichtige Information, entsteht neue Denkarbeit. Dann suchen oder rätseln Besucher. Preise, Lieferzeiten und Pflichtangaben gehören deshalb dazu. Und notwendige Schwierigkeit lässt sich nicht wegdesignen. Ein Versicherungsvergleich bleibt anspruchsvoll. Du kannst ihn nur gut aufteilen.

Wie verständlich deine Texte sind, testest du mit meinem Tool Lesbarkeit prüfen. Wie gute Formulare im Detail gebaut sind, steht im Beitrag zu barrierefreien Formularen. Mehr zu klaren Texten findest du bei den barrierefreien Webseitentexten.

Checkliste: Cognitive Load auf deiner Website

Hake ab, was auf deiner Website schon passt. Dein Stand bleibt in diesem Browser gespeichert.

1. Jedes Formularfeld hat eine Beschriftung, die beim Tippen sichtbar bleibt. Ein Feld anklicken und etwas tippen. Steht die Beschriftung noch da?
2. Formulare fragen nur, was du wirklich brauchst. Felder zählen. Bei jedem fragen: Was passiert, wenn es fehlt?
3. Niemand muss etwas zweimal eingeben (WCAG 3.3.7). Nur bei Shops oder Buchungen: Eine Bestellung testen. Lässt sich die Lieferadresse mit einem Klick übernehmen? Umsetzung: dein Entwickler.
4. Der Login klappt mit Einfügen und Passwort-Manager (WCAG 3.3.8). Nur wenn deine Website einen Login hat: Passwort kopieren und ins Feld einfügen. Klappt es? Umsetzung: dein Entwickler.
5. Texte sind gegliedert. Gibt es Zwischenüberschriften, kurze Absätze und Listen? Das Tool „Lesbarkeit prüfen“ hilft.
6. Nichts lenkt vom Inhalt ab. Laufen Bildergalerien (Slider), Videos oder Pop-ups von selbst los, während man liest?
7. Fehlermeldungen sagen, wie es richtig geht (WCAG 3.3.3). Das Formular absichtlich falsch ausfüllen. Steht beim Feld, was fehlt und wie es richtig geht?
8. Bei längeren Abläufen sieht man, wo man steht. Zeigt das Formular „Schritt 2 von 3“? Bleiben Angaben aus früheren Schritten sichtbar?

PDF, 2 Seiten, 29 KB · barrierefrei nach PDF/UA · Kästchen am Bildschirm abhakbar · frei, ohne Anmeldung

Häufige Fragen

Was ist der Unterschied zwischen Cognitive Load und Miller’s Law?

Miller’s Law sagt, wie viel das Arbeitsgedächtnis auf einmal fasst. Cognitive Load beschreibt, wie stark eine Aufgabe dieses Gedächtnis belastet. Um Miller’s Law geht es im nächsten Teil der Serie.

Wie viele Felder darf ein Kontaktformular haben?

Eine feste Zahl gibt es nicht. Frag nur, was du für die erste Antwort brauchst. Meist sind das der Name, ein Weg für die Antwort und das Anliegen.

Sind Captchas ein Problem für die Barrierefreiheit?

Oft ja. Verzerrte Buchstaben sind für viele Menschen schwer zu lösen. Beim Login verlangt WCAG 3.3.8 dafür eine Hilfe oder einen anderen Weg. Kontaktformulare deckt 3.3.8 nicht ab. Gut ist ein Captcha dort trotzdem nicht. Es gibt Spamschutz, der ganz ohne Rätsel auskommt.

Betrifft das nur Menschen mit Behinderung?

Nein. Jeder hat mal wenig Aufmerksamkeit übrig, etwa unterwegs am Handy. Für Menschen mit kognitiven Einschränkungen ist der Unterschied aber oft der zwischen Schaffen und Aufgeben.

Dein Formular bringt zu wenig Anfragen? Ich schaue es mir an und sage dir, welche Felder weg können. Schau dir meine Leistungen zu Webentwicklung und Barrierefreiheit an oder schreib mir über die Kontaktseite. Alle Teile der Serie findest du auf der Übersicht UX-Gesetze.

Quellen

• Sweller, J. (1988): Cognitive load during problem solving: Effects on learning. Cognitive Science, 12(2), 257–285
• Sweller, J., van Merriënboer, J. J. G. & Paas, F. G. W. C. (1998): Cognitive architecture and instructional design. Educational Psychology Review, 10(3), 251–296
• Cowan, N. (2001): The magical number 4 in short-term memory. Behavioral and Brain Sciences, 24(1), 87–114
• Whitenton, K. (2013): Minimize Cognitive Load to Maximize Usability. Nielsen Norman Group
• Sherwin, K. (2014): Placeholders in Form Fields Are Harmful. Nielsen Norman Group
• Scott, E. (2024): Checkout Optimization: 5 Ways to Minimize Form Fields in Checkout. Baymard Institute
• W3C: Making Content Usable for People with Cognitive and Learning Disabilities
• W3C: Understanding Success Criterion 3.3.7 Redundant Entry
• W3C: Understanding Success Criterion 3.3.8 Accessible Authentication (Minimum)
• Jon Yablonski: Laws of UX – Cognitive Load