Version:
Progress Bar
Die Progress Bar wird zur Anzeige eines begrenzten Fortschritts oder Ladevorgangs eingesetzt.
Overview
Intro
Die Progress Bar drückt eine deterministische (= begrenzte, ermittelbare) Wartezeit oder Dauer eines Vorgangs aus, d.h. die Fortschrittsrate des zugrundeliegenden Prozesses kann ermittelt werden.
broken_image
Progress Bar
Verwendung
| 👍 Do | 👎 Don't |
|---|---|
| ... wenn der Status von bereits laufenden Prozessen an Nutzer kommuniziert werden soll z.B. beim Abschicken eines Formulars, oder beim Speichern von Inhalten. | ... wenn Ladezeiten so gering sind, dass sie nicht vom Nutzer spürbar sind. ... wenn die Fortschrittsrate des zugrundeliegenden Prozesses indeterministisch ist, sie also nicht bestimmt werden kann. Nutze hierfür den Spinner. |
Guidelines
Aufbau
Die Progress Bar besteht aus einer unteren und einer oberen Linie. Die untere Linie legt die Strecke fest auf der sich die obere Linie bewegen kann. Die obere Linie gibt den Fortschritt an.
Progress Bar
Bei deterministischer Verwendung (bestimmte Ladezeit)
Optional kann dem Nutzer bei der Progress Bar mit relevanten Informationen kommuniziert werden, was gerade im Hintergrund passiert (z.B. „Suche läuft“, „Suche nach Updates“). Auch hier kann die generische Formulierung „Bitte warten...” verwendet werden, um den Wartevorgang dadurch zu betonen. Die genaue Platzierung des Texts ist abhängig vom Anwendungsfall und muss vom UX Designer entschieden werden. In manchen Anwendungsfällen ist es auch möglich, dass keine sinnvolle Platzierung von Text möglich ist und er deswegen weggelassen wird.
broken_image
Progress Bar
Verhalten
Bei der Progress Bar füllt sich die obere Linie entlang der Strecke von links nach rechts je nach Fortschritt des Prozesses mit Farbe auf.
Barrierefreiheit
Die Progress Bar ist barrierefrei. Dies wird sichergestellt durch die Verwendung der progressbar role und der Aria Attribute aria\-valuenow , aria\-valuemin und aria\-valuemax , was ermöglicht, dass der Fortschritt von Screenreadern ausgelesen werden kann.
Mehr hierzu ist zu finden unter: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role