Digitale Anwendungen kommen ohne ansprechende Buttons nicht mehr aus: Malthe Luda von COBE in München setzt auf animierte Online-Buttons.
Microinteractions haben einen signifikanten psychologischen Einfluss auf den Nutzer. Die kleinen Animationen können als Antwort auf User-Interaktionen wunderbar wichtige Informationen transportieren und Feedback geben, vorausgesetzt der User schaut auf den Button. Schon ein simpler Hover-Effekt (Web) oder Press State (Mobile) wie beispielsweise ein Pfeil, der sich nach rechts bewegt und damit unterstreicht, dass durch Klick der nächste Schritt des Prozesses aufgerufen wird, veranschaulicht, was passieren wird, sobald man den Button drückt.
Dieser »Senden«-Button von COBE zeigt eine Farbfüllung im Hover-Status, visualisiert dann den Sendevorgang, indem sich der Farbring füllt, und verwandelt sich in einen grünen Punkt mit Haken, wenn die Übertragung erfolgreich abgeschlossen ist. Eindeutiger geht’s kaum.
»Es gibt so unendlich viele kreative Möglichkeiten, den Nutzer zu führen und ihm Informationen zu geben«, sagt Malthe Luda, Creative Director bei COBE in München. Eine Microinteraction kann die kurze Zeit zwischen zwei Screens überbrücken und unterhaltsam informieren: »Ich lade gerade, du hast das Formular richtig ausgefüllt, die Bestellung ist abgeschickt.« Deswegen findet Luda es schade, dass Designer für Buttons immer noch so selten Microinteractions einsetzen:
»Im realen Leben sind Menschen an Feedback gewöhnt, und sie sollten es auch im digitalen Raum erhalten. Reagiert der Button nicht, drückt der User meist so lange, bis sich etwas tut«
weiß er von Usability-Tests. Und obwohl Microinteractions mehr Aufwand bedeuten, lohnt sich die Mühe. »Es ist ein tolles Erlebnis, wenn die Seite nicht stockt und den User intuitiv zu seinem Ziel führt«, so Malthe Luda. »Gelingt die Aktion, reicht ein grünes Häkchen, und jedem ist klar: Das hat geklappt!«
Bild: OpenXcell
Download-Button mit Microinteractions, um dem User den Downloadstatus anzuzeigen
Bild: OpenXcell
1/8
Bild: OpenXcell
Download-Button mit Microinteractions, um dem User den Downloadstatus anzuzeigen
Bild: OpenXcell
2/8
Bild: OpenXcell
Download-Button mit Microinteractions, um dem User den Downloadstatus anzuzeigen
Bild: OpenXcell
3/8
Bild: Nick Buturishvili
Humorvolle Microinteraction für einen Downloadprozess, die dem User den Ladestatus intuitiv anzeigt