Conversion Optimierung auf Tablets

Conversion Optimierung auf Tablets

Durch die enorme Geschwindigkeit bei der Verbreitung von Tablets als das Tool Nr.1 um im privaten Bereich im Internet zu surfen, ist es unumgänglich sich als Onlineshopbetreiber Gedanke zu machen, wie man seine Seiten für dieses Medium optimieren kann.

Infografik von monetate.com

Was ist der bedeutendste Unterschied bei der Tablet Nutzung im Vergleich zum Desktop oder Laptop?

Die Bedienung per Finger (Touch)

Per Finger gibt es den Zustand "Mouseover" nicht (höchstens noch per Stift), das wird häufig vergessen. Zudem ist er natürlich nicht so genau und zielgerichtet wie ein Maus-Zeiger.

Sog. Flyout oder Drop-Down Menüs sind also problematisch. Hier gibt es andere Ansätze, z.B. Off Canvas. Hier werden Navigationselemente erst nach antippen "hereingeholt" und können auch wieder geschlossen werden.

Es gilt hier grundsätzlich: Zuerst sollte ein Shop für die Touch-Bedienung gestaltet werden. Drop-Down Naviagtion, Buttons, Checkboxen, etc. sollten auch mit dem Finger bedienbar bleiben (Größe, Verhalten). Apple empfiehlt hier z.B. mind. 44 x 44 Pixel Buttons.

Auch die Schriftgröße ist beim Tablet wichtig. Zwar kann auch hier gezoomt werden, jedoch ist das meist etwas frickliger als mit der Tastatur (Einfach auf + tippen).

Spezielle Eingabemöglichkeiten

Die Eingabe mit der virtuellen Tastatur ist nicht 100% gleichzusetzen mit der physischen Tastatur.

Um Eingaben zu erleichtern, gibt es bestimmte Layouts, die per HTML5 gesteuert werden und so einen Mehrwert erhalten, der für die Tablet Nutzung von Vorteil ist. So kann man dem Browsewr mitteilen, dass folgendes Eingabefeld eine E-Mail Adresse oder eine URL erwartet. Das Formular "validiert" dann die Eingaben.

>>Hier gibt es einige gute Tipps dazu

Ihre Checkliste für erfolgreiche Tablet Optimierung

Schauen Sie sich auch die Checkliste von konversionskraft an. Diese hilft an alle Punkte bei der Optimierung zu denken.

  1.     Touch First – Alle Elemente sind mit dem Finger bedienbar.
  2.     Viewport für die Webseite festlegen.
  3.     Schriftgrößen für unterschiedliche Gerätetypen definieren.
  4.     Textlinks sind erkennbar und unterstrichen.
  5.     Eine Navigation muss sich durch Berührung des Fingers öffnen lassen. Ob und wann sich die Navigation schließt bleibt dem Nutzer überlassen. Menüpunkte in Textform haben genügend Abstand und sind damit vor versehentlicher Falschauswahl geschützt.
  6.     Prüfen Sie alternative Navigationskonzepte, ob diese für Ihre Navigationsstruktur passen.
  7.     Overlays müssen sich schließen lassen. Immer! Alle Inhalte des Overlays lassen sich ansehen und durch scrollen erreichen. Dabei öffnet sich das Fenster im sichtbaren Bereich des Displays.
  8.     Formularfelder sind fingerfreundlich zu gestalten.
  9.     Immer Labels als Feldbeschriftung verwenden.
  10.     Einsatz von angepassten Tastatur Layouts.