Loading State

Der Loading State bzw. Ladezustand soll dem User einen visuellen Hinweis darauf geben, dass Material geladen wird und gewartet werden muss, bis die Ansicht gefüllt ist.

Die Loading States sind essenziell, da sie dem User die Gewissheit geben, dass seine Anfrage bearbeitet wird, und können den Eindruck erwecken, dass die App schneller geladen wird.

Dos

Dem User anzeigen, dass seine Anfrage verarbeitet wird und er bald die gewünschten Inhalte abrufen kann.

Don'ts

Der User sollte nicht im Ungewissen gelassen werden, ob seine Anfrage berücksichtigt wird. Für Webapplikationen: den User nicht nur durch den Browser-Ladebalken erkennen lassen, dass das System die Anfrage bearbeitet.

Full-screen loading

In diesem Zustand werden alle Komponenten deaktiviert und der ganze Screen wird genutzt, um die Lade-Aktion darzustellen.

Diese sollten genutzt werden, wenn:

  • eine User-Aktion die Anwendung vorübergehend deaktiviert, während die Verarbeitung stattfindet;
  • ein Ladevorgang die gesamten Ressourcen der Anwendung beansprucht und mehr als ein paar Sekunden dauern wird, z. B. Starten der Applikation; 
  • die von dem User eingegebenen Daten gespeichert oder übermittelt werden.
Cookies akzeptieren

Component loading

Hier wird nur innerhalb einer Komponente ein Loader angezeigt; es ist eine Methode zum Laden von Seiten in Teilstücken.

Diese sollte genutzt werden, wenn 

  • Dashboards und andere Seiten Daten aus verschiedenen Quellen beziehen und daher langsam geladen werden könnten;
  • ein User die Filter oder Facetten anpasst, z. B. in einer Tabellenansicht.
Cookies akzeptieren

Button loading / Inline loading

Eine Loading Spinner in einem Button dient als visueller Indikator für den User, dass die Anfrage bearbeitet wird. Damit wird es unwahrscheinlicher, dass er die Schaltfläche wiederholt anklickt. So können Fehler (wie das vermehrte Drücken der Schaltfläche, welche die Verarbeitungslast des Systems erhöht) vermieden werden. 

Cookies akzeptieren
Über das Design SystemWas gibt es Neues?Für DeveloperFür DesignerComponentsFoundationsIcon LibraryFeedbackFAQKontaktImpressumDatenschutz