Google Conversion Room Blog Tipps zum Tracking und Verbessern von Conversions im Netz

Mobile Webseiten Optimieren - Teil 3: 7 Punkte, die beim Design von Buttons auf Mobile-Websites zu beachten sind

Donnerstag, 11. August 2011 | 18:40

Labels: ,

Dies ist der dritte Beitrag in einer Reihe, die auf die Optimierung von mobilen Webseiten hinsichtlich Conversions eingeht. Die letzten beiden Beiträge handelten von den Themen Inhalte Priorisieren und White Space.

Bevor wir darauf eingehen, wie Buttons die mobile User Experience besser machen können, müssen wir zuerst verstehen, wie mobile Nutzer navigieren. Denken Sie darüber nach, wie Sie Ihr Handy festhalten. Meistens nur in einer Hand, mit den Finger auf der Rückseite und dem Daumen vorne. Der Daumen ist damit oft alleine für die Navigation zuständig. Klar ist, dass der Daumen nicht so präzise gesteuert werden kann, als ein Mauszeiger.

Die Mobile-Faustregel: Wenn es nicht mit dem Daumen geht, geht es gar nicht

Der Text-(Hyper)Link ist ein relativ schlechtes Navigationselement auf einem mobilen Touchscreen, weil es sehr schwer ist, einen Link mit einem so ungenauen Instrument wie dem menschlichen Daumen zu nutzen. Mobile Nutzer sind außerdem oft unterwegs (also in Bewegung), wodurch es noch erschwert wird, einen kleinen Punkt auf dem Bildschirm genau zu treffen. Die Verwendung von großen Buttons kann dieses Problem lösen.

Verschiedene Dinge sind zu beachten, wenn man Buttons auf mobilen Webseiten
verwendet.

Buttons sollten groß sein
Auf Basis einer aktuellen Studie unter iPad Benutzern empfiehlt Jakob Nielsen (der Vater der Mensch-Computer Interaktionsstudien), Buttons von mindestens 1cm x 1cm Durchmesser. Das ist 28px x 28px bei einer Standard-Web-Auflösung von 72 dpi. Es gibt aber auch andere Meinungen. Apple empfiehlt zum Beispiel 44px x 44px. Alle sind sich aber darüber einig, dass Buttons für die bedienung mit dem Daumen gestaltet werden sollten.

Buttons sollten isoliert werden
Wie oft haben Sie versucht, auf einen Button auf einem mobilen Gerät zu drücken, nur um festzustellen, dass Sie versehentlich etwas anderes angeklickt haben? Das kann eine wirklich nervtötende Erfahrung sein und Nutzer derartig frustrieren, dass sie woanders hingehen. Viele versehentliche Klicks kann man vermeiden, wenn man zwischen Buttons genügend Platz lässt. Vor allem die wichtigsten Call-to-Action-Buttons sollten isoliert werden.

Buttons sollten mit dem Daumen erreichbar sein
Die Platzierung von Buttons ist ebenfalls wichtig. Wir müssen darüber nachdenken, was angenehm ist für Daumen bei der Platzierung von Buttons. Viele mobile Seiten haben Call-to-Action-Buttons, die entweder auf der rechten oder der linken Seite des Bildschirms platziert sind. Wenn möglich, sollten diese Buttons verbreitert und zentriert platziert werden. Dies macht es für links- und rechtshändige Nutzer einfacher, die Buttons mit dem Daumen zu erreichen. Wenn Sie für die Platzierung wirklich eine Seite auswählen möchten, macht es - im Gegensatz zu der Platzierung auf der rechten Seite bei Desktop - Sinn den Button links zu platzieren. Die Mehrheit der Nutzer sind Rechtshänder.

Bei kleineren Buttons padding einsetzen
Padding in diesem Sinne heisst, die klickbare Fläche größer zu machen, als den Button selbst. Dies kann besonders für Checkboxen oder Buttons nützlich sein, die bewusst klein gestaltet sind, um nicht von den wichtigsten Call-to Action Elementen abzulenken. Der Trick ist, den Bereich unmittelbar rund um die Buttons klickbar zu machen. Im Falle von Checkboxen ist es wichtig, ausreichend Platz zwischen den verschiedenen Kästchen zu lassen und die Text-Labels neben den Kästchen auch klickbar zu machen.

Buttons sollen wie Buttons aussehen
Es ist nicht unüblich, dass sich Links auf mobilen Websites verhalten wie Buttons, aber nicht so aussehen. Nutzer brauchen irgendeinen visuellen Hinweis, damit sie verstehen, wo sie klicken können. Lassen Sie Buttons dreidimensional aussehen, damit die Einladung zum Klick deutlicher ist. Es ist auch wichtig, dass Ihre Website klar zu erkennen gibt, wenn ein Nutzer erfolgreich auf eine Taste gedrückt hat. Die Berührung von nur einem Teil eines Buttons sollte in ein optisches Signal für den Nutzer resultieren.

Buttons sollten priorisiert werden
Wie bei Desktop-Webseiten, müssen Buttons auf mobilen Webseiten priorisiert werden. Visuelle Hinweise wie Größe und Farbe helfen Nutzer dabei zu identifizieren, wo sie klicken müssen. Wenn alle Buttons gleich groß sind (um die Bedienung mit den Daumen einfacher zu machen), spielen Fraben eine noch wichtigere Rolle. Versuchen Sie, den vorrangigen Call-to-Action Elementen eine einzigartige Farbe zu geben.

Verwenden Sie einen Button-Text, der die Handlung beschreibt
Der Text auf jedem Button bestimmt die Erwartung des Nutzers. Er sollte genau das beschreiben, was passiert, wenn ein Nutzer ihn bedient. Der Text sollte auch darauf abgestimmt, wo sich der Nnutzer gerade auf der Website befindet. "Jetzt Kaufen"-Buttons auf der Homepage sind zum Beispiel in der Regel ungeeignet. Auch Texte wie "hier klicken" sind nicht ideal, weil sie keine klaren Erwartungen für den Nutzer setzen.

Zusammenfassend sollten Tasten und Buttons auf mobilen Websites folgende Eigenschaften haben:
  1. Groß
  2. Isoliert
  3. Erreichbar
  4. Padded
  5. aussehen wie ein Button
  6. Priorisiert
  7. Handlungsbeschreibend
Der nächste Post in dieser Serie wird darauf eingehen, wie das Erreichen von Conversions auf mobilen Webseiten erleichtert werden kann.

Veröffentlicht von Jos Meijerhof, Google Conversion-Team