Mobile First: Button-Effekte im mobilen Internet

Eure Website sieht auf dem Desktop fantastisch aus? Na dann herzlichen Glückwunsch, doch ihr stellt damit nur die Minderheit eurer Besucher zufrieden.

Okay, das war jetzt sehr hart ausgedrückt, doch bei den meisten Websites sind die Statistiken inzwischen recht eindeutig und die sagen, dass die mobilen Nutzer mittlerweile in der Mehrheit sind.

Mobile First, lautet daher das Motto und das betrifft natürlich auch die Buttons, mitsamt ihren teilweise recht aufwändigen Effekten.

Button-Effekte auf dem Smartphone?

Vor kurzem arbeitete ich an einem recht aufwendigen Projekt und plötzlich wurde mir klar, dass all die eindrucksvollen Effekte auf dem Smartphone gar nicht funktionieren werden. Vor allem bei Buttons ist das ein großes Problem. Vor einiger Zeit schrieb ich bereits über diese CTA-Buttons, die maßgeblich für den Erfolg verantwortlich sind. Was ich dabei allerdings vollkommen vergaß war, dass auch die Effekte für die Klickrate von großer Bedeutung sind. Doch wie funktionieren beispielsweise Hover-Effekte am Smartphone?

Die einfache Antwort: Gar nicht. Es gibt per se keinen Hover-Effekt am Smartphone, da es keine Maus gibt, die über dem Button verweilen kann. Es gibt lediglich einen Active-Status, der beim Drücken aktiviert wird. Allerdings nicht unter iOS, denn Safari Mobile deaktiviert diese Pseudoklassen und ersetzt sie gegen einen generischen Farbton. Das macht es kompliziert, schicke Effekte am Smartphone zu erzeugen, da selbige oft nicht so richtig funktionieren.

:active als :hover Alternative

Wenn der :hover via CSS nicht gelingt, muss es eben ein :active sein. Die Pseudoklasse beschreibt bei einem Link den gedrückten Zustand und das wiederum ist auch am Smartphone denkbar. Wird ein Button gedrückt, könnte sich dieser also leicht verschieben. Ein 3D-Effekt wird gerne genutzt, um den Eindruck zu erzeugen, dass der Button wirklich heruntergedrückt wird.

Doch mit einem :active kann auch die Farbe verändert, der Margin manipuliert oder ein Blinken erzeugt werden. Statt dem :hover scheint die :active Pseudoklasse daher ideal zu sein, um einen Button-Effekt am Smartphone zu realisieren. Theoretisch zumindest.

Javascript-Trick, um :hover und :active zu aktivieren

Je nach Gerät funktioniert das mit dem :hover und :active auf dem Smartphone nämlich nicht so richtig.

Ein kleiner Trick via Javascript sorgt aber dafür, dass die Pseudoklassen entsprechend interpretiert werden können. Dazu wird einfach ein »touchstart« Event erzeugt. Drückt der Nutzer dann auf seinem Smartphone den Button, bleibt der :hover bestehen, bis er wieder an anderer Stelle drückt.

Das erzeugt auch auf dem Smartphone sehr weiche und gut funktionierende :hover bzw. :active Effekte, die dann auch tatsächlich wieder nutzbar sind.

<![CDATA[
document.addEventListener("touchstart", function(){}, true);
]]>

Das Script wird einfach inline in den Head-Bereich eurer Website integriert und sorgt dann dafür, dass auch unter iOS wieder sämtliche :hover und :active Effekte ordnungsgemäß funktionieren. Ohne den Fix bleiben in Safari Mobile die Pseudoklassen deaktiviert.

Da das iPhone und iOS entsprechend verbreitet sind, ist es durchaus wichtig darauf zu achten, dass die Effekte auch hier ordnungsgemäß funktionieren. Denn auch der Effekte entscheidet darüber, wie gerne und häufig geklickt wird.

Buttons einfach komplett animieren

Bei der Suche nach einem schicken Effekt, der auch mobil gut funktioniert, stieß ich auf eine ganz andere Möglichkeit. Buttons können mit CSS nämlich auch komplett animiert werden. Ein schwebender Button zum Beispiel. Eine kleine CSS-Animation reicht bereits aus, um den Button in eine leichte Schwingung zu versetzten. Dazu ein Box-Shadow und schon wirkt es, als würde der Button leicht schweben und förmlich auf einen Druck des Nutzers warten.

Eine Methode die einfach realisierbar ist, aber nur dezent eingesetzt funktioniert. Was Nutzer nämlich gar nicht mögen, sind blinkende oder gar nervige Buttons. Das leichte Schweben hingegen, erhöht im besten Fall die Aufmerksamkeit, ohne dabei direkt zu stören. Und es funktioniert eben auch auf jedem Smartphone, ganz ohne :hover und :active, versteht sich.

Die Alternative zu einem Effekt, der via :hover oder :active ausgelöst wird, heißt also CSS-Animationen. Beispiele zum einfachen kopieren, findet ihr hier.

Aber noch einmal die Warnung: Wer Elemente zu stark animiert, nervt seine Besucher. Gerade Anfänger finden das alles immer sehr schick, vergessen dann aber schnell, dass es auch irritierend oder störend sein kann, wenn sich alles auf einer Website bewegt oder die Farbe wechselt. Bleibt also immer dezent und animiert nur vorsichtig und nie mit zu viel Bewegung, denn das stört nur wieder.

Mobile Buttons erfordern viel Feintuning

Buttons auf mobilen Geräten darzustellen erfordert viel Feintuning. Nicht jedes Gerät eignet sich für jede Art von Effekt und zu viel ist in der Regel auch nicht gut. Dann gibt es noch die fehlenden Pseudoklassen in Safari und das Problem, dass ein :hover, egal wie, auf dem Smartphone eben selten korrekt funktioniert. Der :active muss ebenfalls clever getaltet sein, damit er bei dem kurzen Klick bzw. Touch des Besuchers überhaupt eine Wirkung erzielen kann.

Am Ende halte ich solche Effekte aber für sehr wichtig. Die Interaktion des Nutzers wird mit einem solchen einfach noch einmal bestätigt und das wiederum sorgt für ein dynamisches, flüssiges Gefühl auf der gesamten Website. Mit dem richtigen Effekt fühlt sich der Klick einfach gut an.

Was haltet ihr von Button-Effekten? Welche Effekte nutzt ihr auf mobilen Geräten? Oder habt ihr das Thema bislang weitgehend unbeachtet gelassen?

Gebt mir euer Feedback in den Kommentaren und zeigt her eure Effekte, damit wir darüber diskutieren können.