Ladebildschirme mit Tipps oder Animationen machen das Warten auf Software angenehmer. Marcin Wichary wehrte sich bei Figma trotzdem gegen solche Hinweise neben dem Fortschrittsbalken. Ein Ladebildschirm mit Nebenaufgabe nimmt dem Entwicklerteam nach seiner Erfahrung den Druck, die Ladezeit selbst zu verkürzen.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Den Ladezustand im Ladezustand bemerkte Wichary ausgerechnet bei Gmail: Das Bild der Ladeanimation erscheint dort ohne eigene Ladeanzeige.[1] In einem Beitrag vom 27. September zerlegt der frühere Google-, Medium- und Figma-Designer, der auch die Geschichte der Gorton-Schrift aufschrieb, die Gestaltung von Wartezeiten.
Das Wichtigste in Kürze
- Marcin Wichary lehnte bei Figma Tipps auf dem Ladebildschirm ab, weil sie den Druck senken, die Ladezeit zu verkürzen.
- Nach den Grenzwerten der Nielsen Norman Group braucht erst eine Wartezeit über einer Sekunde eine Anzeige, ab etwa zehn Sekunden einen Fortschrittsbalken.
- Animationen, die neben anderen Inhalten über fünf Sekunden laufen, brauchen nach WCAG eine Pausenfunktion.
Warum wehrte sich Wichary gegen Tipps beim Laden?
Ein Ladebildschirm, der nebenbei etwas lehrt, bekommt einen zweiten Zweck. Nach Wicharys Erfahrung sinkt damit im Team der Druck, die Wartezeit zu verkürzen. Im Extremfall ließe sich sogar eine künstliche Mindestdauer rechtfertigen, damit Nutzer den Tipp zu Ende lesen.[1]
Weil Figma ein großes JavaScript-Paket und die geöffnete Datei laden muss, zeigt die Design-App beim Start einen Fortschrittsbalken. Die Idee, daneben wie in Videospielen Tastenkürzel zu erklären, tauchte laut Wichary immer wieder auf.[1]
Den Präzedenzfall liefert der ZX Spectrum von 1982. Spiele kamen von der Audiokassette. Vor dem eigentlichen Code lud ein Titelbild, das allein rund 35 Sekunden brauchte, bei einer Gesamtladezeit von 5 bis 20 Minuten. Nach einigen Durchgängen kostete der Bildaufbau nur noch Zeit; manche Spieler bauten sich gekürzte Fassungen ohne Titelbild.[1]
Ein weiteres Beispiel liefert Gmail. 2018 ersetzte Google den schlichten Ladebalken durch eine große Animation, für Wichary das Eingeständnis einer langsamen App. Inzwischen zeigt Gmail einen schlichteren Ladebildschirm, der zudem deutlich seltener erscheint.
Ab welcher Wartezeit braucht eine Website eine Ladeanzeige?
Bis 0,1 Sekunden wirkt eine Reaktion sofort, bis zu einer Sekunde bleibt der Gedankenfluss erhalten. Nach Jakob Nielsens Grenzwerten braucht erst eine längere Wartezeit eine Rückmeldung, ab etwa zehn Sekunden einen Fortschrittsbalken mit Prozentangabe.[2]
Spinner empfiehlt die Nielsen Norman Group für zwei bis zehn Sekunden, Skeleton Screens ebenfalls nur unter zehn Sekunden.[3] Wie stark eine Anzeige wirkt, zeigt eine Studie der University of Nebraska-Lincoln: Teilnehmer mit animiertem Ladebalken warteten im Schnitt dreimal so lange wie eine Gruppe ohne Anzeige.[4]
Google bewertet Websites in den Core Web Vitals dagegen nach gemessenen Werten. Der größte Inhalt soll nach höchstens 2,5 Sekunden stehen, die Reaktion auf einen Klick nach höchstens 200 Millisekunden, jeweils bei 75 Prozent der Seitenaufrufe.[5][6] Gemessen wird, wann Inhalte erscheinen, und nicht, wie unterhaltsam die Wartezeit davor ausfiel.
Grenzwerte nach Nielsen Norman Group
Was Messung und Barrierefreiheit verlangen
Jede Sekunde, die ein Ladebildschirm unterhaltsam überbrückt, fehlt später auf der Liste der Dinge, die schneller werden müssen.
Markus Seyfferth, Chefredakteur Dr. Web
Was bedeutet das für Ihre Website?
Messen Sie zuerst die echte Ladezeit und gestalten Sie danach die Wartezeit, die übrig bleibt. Eine Ladeanzeige ergänzt schnelle Technik, ersetzt sie aber nicht.
Für Shops und digitale Dienste kommt die Barrierefreiheit hinzu, die das Barrierefreiheitsstärkungsgesetz seit dem 28. Juni 2025 verlangt. WCAG-Kriterium 2.2.2 fordert eine Pausenfunktion für Bewegung, die automatisch startet, länger als fünf Sekunden läuft und neben anderen Inhalten steht.[7] Kriterium 4.1.3 verlangt zusätzlich, dass Screenreader Statusmeldungen wie „wird geladen“ ansagen können.[8]
Prüfen Sie Lade- und Reaktionszeiten in der Search Console, bevor Ihr Team neue Ladeanimationen entwirft. Bei WordPress-Seiten beginnt die Suche oft beim Hosting. Wie viel Tempo im eigenen Code steckt, zeigte GitHubs Umstieg auf CSS Modules.
Fertige Indikatoren liefert etwa loading.dev. Eine künstliche Mindestdauer für Tipps gehört dagegen in kein Pflichtenheft.
Quellen
[1] Marcin Wichary, Unsung: „A loading state within a loading state“
[2] Nielsen Norman Group: „Response Times: The 3 Important Limits“
[3] Nielsen Norman Group: „Skeleton Screens 101“
[4] Nielsen Norman Group: „Progress Indicators Make a Slow System Less Insufferable“
[5] web.dev: „Largest Contentful Paint (LCP)“
[6] web.dev: „Interaction to Next Paint (INP)“
[7] W3C: „Understanding Success Criterion 2.2.2: Pause, Stop, Hide“
[8] W3C: „Understanding Success Criterion 4.1.3: Status Messages“
Mehr Newshunger?
- loading.dev: Knapp 30 Ladeindikatoren für React als Open-Source-Bibliothek
- amazing-glass: Liquid-Glass-Webkomponenten mit echter Lichtbrechung für HTML, React und Vue
- Libraries.dev als Agent-Skill: Coding-Agenten lernen sieben UI-Effekte samt Einbauregeln
- Stripe-Designchefin Katie Dill: Wie sich mit KI Anspruch, Qualität und Kunstfertigkeit skalieren lassen
- Die Voreinstellung ist keine Designentscheidung: Warum SaaS-Oberflächen immer gleicher aussehen
- Cavalry: Kostenlose prozedurale Motion-Design-Software mit Lottie-Export fürs Web
