Darstellung und Verhalten

Wir machen jeden Ladevorgang durch eine Animation für den Nutzer erlebbar. In einem leeren Initialzustand ruft ein Platzhalter zur Aktion auf.

Varianten

Ladehinweis

Ladeanimation (Spinner):

• Die Ladeanimation zeigt einen in sich drehenden blauen Kreis.
• Die Grösse ist variabel.
• Die Ladeanimation wird über dem Inhalt oder direkt im Bereich des zu ladenden Inhalts angezeigt.

Ladebalken:

• Der Ladebalken zeigt über ein Balkendiagramm den aktuellen Wert an. Links stehen Dateiname und Dateityp.
• Rechts wird der aktuelle Status als Text in Prozent angezeigt.
• Im Initialzustand ist der Ladebalken leer. Im aktiven Zustand wird der aktuelle Ladefortschritt durch einen blauen Balken dargestellt.
• Tritt ein Fehler auf, wird der Balken rot und der Status als Text angezeigt.

Platzhalter

• Ein Platzhalter besteht typischerweise aus einem Titel, der Handlungsaufforderung und einem Button.
• Platzhalter füllen die ganze Anzeigefläche aus.
• Der Inhalt wird in der zur Verfügung stehenden Fläche zentriert.

Keine Resultate

• Ein Anzeige für keine Resultate besteht typischerweise aus einem Titel, der Handlungsaufforderung und einem Button.
• Platzhalter werden dort dargestellt, wo ansonsten die Suchresultate angezeigt werden.
• Der Inhalt wird in der zur Verfügung stehenden Fläche zentriert.

Verwendung

Ladeanimation (Spinner)

• Die Ladeanimation hilft Nutzenden, den Ladevorgang zu verstehen.
• Die Ladeanimation setzen wir ein, wenn die Ladedauer nicht ermittelt werden kann oder diese keine Hilfe für Nutzende darstellt.

Ladebalken

Der Ladebalken zeigt einen Ladevorgang als Visualisierung des Fortschritts in Prozent. So können Nutzende anhand des Ladebalkens erkennen, wie lange der Vorgang noch dauert.

Platzhalter

Ist noch kein Inhalt vorhanden, wird ein Platzhalter angezeigt. Der Inhalt eines Platzhalters animiert Nutzende, die erforderliche Aktion zu starten.

Keine Resultate