UX Design Patterns: Update Button

15 Mai 2017
Armin Göpfert

Ich beginne heute mit einer kleinen Serie über den Einsatz und die Verwendung von so genannten Design Patterns. Design Patterns sind in sich kombinierte, grafische Elemente, welche für häufig auftretende Anwendungsfälle benutzt werden. Diese können statisch aber auch interaktiv sein (Micro Interactions).

Heute geht es um einen "Call to Action" Button, der in Anwendungen häufig benutzt wird.

Ein einfaches Beispiel:

Stellen wir uns vor, wir sind auf einem Shopping Portal und haben mehrere Artikel in den Warenkorb gelegt. Nun möchten wir einen Artikel aus dem Warenkorb löschen und den Preis neu berechnen lassen. Dazu verwendet der Benutzer den Update Button, der dem System den Auftrag erteilt, den Gesamtpreis neu zu berechnen. Herkömmlich eingesetzte Buttons haben einen so genannten Hotspot (Klickbarer Bereich), der per Mausklick eine Aktion auslöst, weitere Informationen z.B. über den Fortschritt der Aktion liefert der Button aber nicht.

Die von uns eingesetzten interaktiven Buttons gehen mit dem Benutzer in den Dialog:

  • Eine im Button integrierte Progress Bar zeigt dem Benutzer visuell den Fortschritt der von ihm ausgelösten Aktion an.
  • Durch einen entsprechenden kontextabhängigen Text sowie einer zum Prozess passenden Farbe wird dem Benutzer zusätzlich zur Progress Bar der Stand der Aktion kommuniziert.
  • Nach einer abgeschlossenen Aktion wird dem Benutzer mitgeteilt, ob die Operation erfolgreich war oder nicht.

Fazit:

Der Vorteil gegenüber herkömmlichen Buttons ist der, dass der Nutzer zu jedem Zeitpunkt über den Status seiner eingeleiteten Aktion informiert wird. Es besteht zu jeder Zeit ein Austausch von Informationen zwischen Mensch und Maschine.
 

Statischer Button
VS Interaktiver Button