Zum Hauptinhalt springen
FigmaOpenCode

Progress

Synonyme: Stepper, Fortschrittsanzeige
Ähnliche Komponenten: Loader

Kurzbeschreibung​

Der Progress zeigt die Gesamtdauer und den Fortschritt eines mehrstufigen Prozesses an.

Beispiele​

Default Progress​

Code anzeigen
<div class="kern-progress">
<progress value="35" max="100"></progress>
</div>

Label Top Progress​

Code anzeigen
<div class="kern-progress">
<label class="kern-progress__label" for="progress1">Schritt 2 von 5</label> 
<progress id="progress1" value="2" max="5"></progress>
</div>

Label Bottom Progress​

Code anzeigen
<div class="kern-progress">
<progress id="progress2" value="5" max="8"></progress>
<label class="kern-progress__label" for="progress2">Schritt 5 von 8</label> 
</div>

Beschreibung​

Der Progress bietet kontinuierliches Feedback und Orientierung darüber, in welchem Schritt sich Nutzende befinden und wie viele noch ausstehen. Dies hilft den Nutzenden, den Fortschritt besser einzuschätzen und motiviert sie, den Prozess zu beenden. Jeder Schritt repräsentiert eine Phase oder Etappe innerhalb des Prozesses. Der Fortschritt wird in Balkenform angezeigt bis der Vorgang abgeschlossen ist. Die Gesamtlänge wird in gleichmäßige Schritte eingeteilt. Verlängert sich der Prozess durch zusätzliche Schritte, die durch Nutzendenauswahl nötig werden, kann sich die verbleibende Schrittanzeige neu aufteilen.

Nutzende können sich entweder linear oder, falls erlaubt, nicht-linear zwischen den Schritten bewegen (z.B. über die Navigation einer Aufgabenliste). Der Progress selber ist nicht interaktiv.

Eine Progress-Komponente kann ohne ein Label genutzt werden. Nutze die Komponente besser mit Label, oder teste mit Nutzenden, ob sie im jeweiligen Kontext auch ohne Label sichtbar genug ist. Wird sie mit einem Label verwendet, kann dieses oberhalb oder unterhalb des Balkens angezeigt werden. Das Label sollte den aktiven Schritt und die Anzahl der zu erwartenden Schritte anzeigen, z.B. „Schritt 2 von 5“.

Verwendungsregeln​

Der Progress eignet sich besonders für Prozesse, die in einer festen Reihenfolge ablaufen. Er unterteilt einen komplexen Prozess in kleinere, besser verständliche Schritte.

Beispiele:

  • Schritte in einem Online-Dienst
  • Registrierungsprozess
  • Bezahlprozess

Dos und Don’ts​

Verwende den Progress nicht für Ladevorgänge. Verwende den Progress nicht für Ladevorgänge.

Weitere Hinweise​

  • Setze den Progress bei linearen und chronologischen Prozessen ein, bei denen eine feste Reihenfolge der Schritte erforderlich ist.
  • Vermeide es, den Progress für sehr lange oder komplexe Prozesse zu verwenden, die mehr als zehn Schritte umfassen, da dies Nutzende überfordern kann.

Barrierefreiheit​

Diese Komponente erfüllt die formalen Eigenschaften – zum Beispiel Kontrastverhältnis – für barrierefreie Dienste.

  • In Anwendungen, die den virtuellen Cursor nicht unterstützen, muss die Fortschrittsanzeige mit Tastatur erreicht und verlassen werden können. In Anwendungen, die den virtuellen Cursor unterstützen, soll die Fortschrittsanzeige nicht den Fokus erhalten. Ausnahme: Die Fortschrittsanzeige wird so ausgezeichnet, dass deren Aktualisierungen ohne Fokussierung mit Assistenztechnologie wahrnehmbar sind. (Quelle)
  • Kennzeichne klar das Ende des Prozesses.

Inhaltsverzeichnis