Wir alle kennen sie: diese Balken, die den Fortschritt eines Vorgangs anzeigen. Meistens handelt es sich um Ladevorgänge, wie bspw. beim Start eines Computers, Aufladen eines Akkus oder der Anzeige eines Download-Vorgangs. Es haben sich seit vielen Jahren vor allem horizontal-orientierte Balken in so gut wie allen Betriebssystemen und Web-Frameworks etabliert.
Die folgende Übersicht aus den Material Design Richtlinien zeigt verschiedene Ausprägungen dieser Ladebalken:
Aufladen einer Batterie
Im iPhone wird das Laden des Akkus über einen horizontalen Balken visualisiert:
Die meisten Android-Smartphones folgen hingegen bei der Visualisierung des Ladevorgangs den vertikal-orientierten Säulen:
Welches dieser beiden Ansätze ergibt nun mehr Sinn und ist somit passender?
Diese Frage verweist auf das Thema, welches mentale Modell zu diesem Vorgang besser passt.
Dazu folgende Gedanken:
- Nehmen wir den Begriff „Aufladen“ wörtlich wird ein Gegenstand auf eine Ladefläche gepackt. Wird weiter aufgeladen, so denke ich eher an eine Stapelung als daran, dass etwas daneben gestellt wird. Insofern passt die Visualisierung über vertikale Säulen besser als über horizontale Balken.
- Wenn ich mir die inneren Vorgänge einer Batterie konkret vorstelle, so stelle ich mir den Ladestand ähnlich wie den Füllstand eine „Gefäßes“ mit einer Flüssigkeit vor. Auch aus dieser Sicht passt eine Säulendarstellung.
Download vs. Upload
Bei Download-Vorgängen stelle ich mir vor, wie die Festplatte als Speicher mit Daten gefüllt wird. Dies würde auch für die Säulendarstellung sprechen.
Im Nintendo eShop wird dies sehr skeuomorph visualisiert, in dem mehrere Beutel mit einer Flüssigkeit an einer Leine hereinfahren und nacheinander in einen Container fallen, darin zerplatzen und ihn so nach und nach mit Flüssigkeit auffüllen:
Beim Upload hingegen stelle ich mir vor, wie die Daten verschickt werden. Und „Verschicken“ hat damit zu tun, dass sich ein Gegenstand von mir weg bewegt, was nach meiner Auffassung eine horizontale Bewegung ist. Hier passt also die horizontale Balkendarstellung.
Abstrahiere ich diese Gedanken, so sind Bewegungen von einem Ort zu einem entfernten Ort horizontale Bewegungen, während Aufladevorgänge vertikale sind.
Ein kleines Design Pattern
Ich möchte mit diesen Gedanken Entwickler von digitalen Benutzeroberflächen dazu anregen, bewusst den passenden Kontext für Vorgangsdarstellungen zu wählen, um dem Nutzer ein Gefühl der Nachvollziehbarkeit des Vorgangs zu vermitteln.
Ich habe zu diesem Thema ein kleines Design Pattern entwickelt, welches einen Download-Vorgang simuliert:
See the Pen Progress fill by Tamio Honma (@IOIO72) on CodePen.light
Der Code ist in Vanilla ES6 geschrieben. Wer den Code für eine reale Anwendung nutzen möchte, kann einfach eine Controller-Funktion dazu schreiben und darin den prozentualen Fortschritt über view.setPercent(percent) anzeigen.
