- Ladebildschirme können die User Experience verbessern, indem sie sichtbar machen, was das System gerade tut.
- Es gibt einige Punkte, die man berücksichtigen sollte, um einen passenden Ladebildschirm zu gestalten.
- Vor dem Design sollte man das Ladesystem prüfen.
- Etwa ob das Laden die Eingabe der Nutzer blockiert, ob sich der Fortschritt anzeigen lässt, wie viele Informationen geladen werden und wie die Mobile Experience aussieht.
- Ob es sich um passives Laden handelt (das System lädt im Voraus) oder um aktives Laden (wird durch das Verhalten der Nutzer ausgelöst).
- Veränderungen je nach der Menge, die auf einmal angezeigt wird
- Bei komplexen Komponenten kann es besser sein, sie nacheinander anzuzeigen.
- Bei vergleichsweise einfachen Komponenten ist es oft besser, sie gesammelt anzuzeigen, sobald das Laden abgeschlossen ist.
- Bei vielen Komponenten ist Lazy Loading erforderlich.
- Dafür lassen sich Ansätze wie Infinite Scroll, ein „Mehr laden“-Button oder Paging nutzen.
- Veränderungen je nach Häufigkeit
- Wenn sich Inhalte ständig ändern, sollte die Lade-UI auf ein Minimum reduziert werden.
- Als Referenz kann die UI von Google Drive dienen, die in Echtzeit speichert.
- Wenn sich Inhalte nur gelegentlich ändern, ist es gut, dies den Nutzern sofort anzuzeigen.
- Zum Beispiel ein Pop-up, das darauf hinweist, dass die gerade betrachteten Inhalte aktualisiert wurden und die Seite neu geladen werden soll.
- Veränderungen je nach Dauer
- Zuerst sollte geprüft werden, ob sich der Fortschritt klar anzeigen lässt oder ob er ungewiss ist.
- Bei weniger als 0,1 Sekunden
- Es reicht, das Ergebnis sofort anzuzeigen.
- In manchen Fällen kann es sogar besser sein, einen künstlichen Ladebildschirm zu zeigen.
- Etwa wenn die Aufgabe aus Sicht der Nutzer wichtig wirkt (zum Beispiel Speichern) oder wenn eine kurze Verzögerung nötig ist, damit Nutzer handeln können (etwa ein „Rückgängig“-Button nach dem Senden einer E-Mail).
- Bei 0,1 bis 1 Sekunde
- Das ist eine sehr häufige Verzögerung, die Nutzern meist nicht auffällt; daher ist es besser, keinen zusätzlichen Ladebildschirm einzubauen.
- Bei mehr als 1 Sekunde
- Ab dem Moment, in dem die Wartezeit 1 Sekunde überschreitet, nehmen Nutzer sie bewusst wahr; deshalb sollte ein passender Ladebildschirm ergänzt werden.
- Wenn die ladende Komponente klein ist, ist ein Loading Spinner eine gute Wahl. (zum Beispiel Datei-Uploads)
- Wenn sich der ganze Bildschirm ändert, eignet sich ein Skeleton Loading Screen gut.
- Wenn Bilder den Kerninhalt bilden, ist es sehr hilfreich, die Hauptfarben zu extrahieren und weichgezeichnet darzustellen.
- Bei 2 bis 10 Sekunden
- Eine Zeitangabe wie „Dauert etwa 5 Sekunden“ kann wirksam sein.
- Eine Fortschrittsleiste ist immer eine gute Wahl.
- Wenn der Vorgang aus mehreren Schritten besteht, kann man diese Schritte ebenfalls anzeigen.
- Selbst wenn es keine klaren Schritte gibt, lassen sich allgemeine Meldungen verwenden. (zum Beispiel „Verbindung zum Server wird hergestellt“)
- Bei mehr als 10 Sekunden
- Wenn sich der Fortschritt klar bestimmen lässt, sollte man Prozentangaben und die verbleibende Zeit anzeigen. (zum Beispiel 50 % bei einem Datei-Upload)
- Wenn der Vorgang allerdings bei 99 % stehen bleiben kann, ist das sehr problematisch; in solchen Fällen sollte man eine andere Methode wählen.
- Wenn der Vorgang länger dauert und sich der Fortschritt nicht klar bestimmen lässt, ist es sinnvoll, die Nutzer nach Abschluss zum Beispiel per E-Mail zu benachrichtigen und ihnen Kontrolle zu geben.
- Gut ist auch, wenn die Aufgabe vollständig im Hintergrund läuft und keine Aktionen der Nutzer blockiert. (zum Beispiel der Upload-Fortschritt in Google Drive)
3 Kommentare
Vielen Dank für den guten Artikel.
. Ich blende ihn bis 250 ms nicht ein, bin mir aber nicht sicher, ob es noch okay wäre, das bis 1 Sekunde auszudehnen.
Oh, ich war gerade dabei, nach einer Begründung für den Loading-Screen zu suchen! Danke, haha
Die Zusammenfassung ist wohl etwas zu lang geworden ... jedenfalls gibt es viele gute Inhalte, deshalb habe ich so viel wie möglich mitgebracht.
Interessant ist die Aussage, dass ein gefälschter Ladebildschirm die Glaubwürdigkeit erhöht. Auch auf Hacker News wurde dieses Thema ziemlich ausführlich diskutiert.