PAGE online

»Buttons sollten mehr Microinteractions nutzen«

Digitale Anwendungen kommen ohne ansprechende Buttons nicht mehr aus: Malthe Luda von COBE in München setzt auf animierte Online-Buttons.

Malthe Luda, Creative Director bei COBE

Microinteractions haben einen signifikanten psy­chologischen Einfluss auf den Nutzer. Die kleinen Animationen können als Antwort auf User-Interaktionen wunderbar wichtige Informationen transpor­tieren 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öglichkei­ten, 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 For­mular 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 di­gi­talen 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 Sei­te 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!«

Download-Button mit Microinteractions, um dem User den Downloadstatus anzuzeigen
Bild: OpenXcell
1/8
Download-Button mit Microinteractions, um dem User den Downloadstatus anzuzeigen
Bild: OpenXcell
2/8
Download-Button mit Microinteractions, um dem User den Downloadstatus anzuzeigen
Bild: OpenXcell
3/8
Humorvolle Microinteraction für einen Downloadprozess, die dem User den Ladestatus intuitiv anzeigt
Bild: Nick Buturishvili
4/8
Scrolling
Bild: Nick Buturishvili
5/8
Scrolling
Bild: Nick Buturishvili
6/8
Menü
Bild: Nick Buturishvili
7/8
Menü
Bild: Nick Buturishvili
8/8

 

Mehr zum Thema »Online-Buttons gestalten« lesen Sie in PAGE 09.2018. 

[5361]
Produkt: Download PAGE - Goldstandards im UX Design - kostenlos
Download PAGE - Goldstandards im UX Design - kostenlos
Best-Practices und Beispiele im User Experience Design und Interface Design

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte dich auch interessieren