Immer mehr Menschen nutzen das Internet über mobile Geräte – auch um damit einzukaufen. Als Reaktion auf diese Entwicklung setzen daher viele Shopbetreiber auf mobile Webseiten und Apps, die auf Käufe über Smartphones abzielen. Den eigentlichen Umsatztreiber unter mobilen Geräten stellen derzeit jedoch Tablet-Computer wie das iPad dar. Häufig wird angenommen, dass Desktop-Webseiten auf dem iPad “ja ganz gut funktionieren”. Dabei werden in der Regel zwei entscheidende Faktoren vergessen:
- Nicht jede Funktionalität, die für einen stationären PC oder ein Notebook entwickelt wurde, kann auch problemlos über ein Touch-Gerät bedient werden.
- Je nach Gerät unterscheiden sich die Nutzungsgewohnheiten von Menschen. Wer schon das ein oder andere Mal ein Tablet in der Hand hatte, erwartet eine devicegerechte Bedienbarkeit, zum Beispiel das typische Wischen von links nach rechts um auf eine neue Seite zu blättern.
Wenn Sie die folgenden 5 Tipps beachten, verbessern Sie die User Experience und damit die Conversion Rate auf dem iPad:
Tipp 1: Quickwins via Javascript und CSS umsetzen
Um der oben genannten Problematik entgegen zu wirken, bietet es sich an, den eigenen Shop in Responsive Design umzusetzen oder eine für Tablets optimierte Seite zu launchen. Das macht zwar angesichts der aktuellen Entwicklung Sinn, allerdings nimmt die Umsetzung eine gewisse Zeit in Anspruch. Die “Wartephase” kann jedoch sinnvoll genutzt werden: Durch die Umsetzung einiger Quickwins mittels Javascript und CSS kann in der Zwischenzeit die User Experience verbessert werden.
Als Erstes benötigen Sie eine Abfrage, die feststellt, ob ein Besucher gerade mit einem touch-fähigen Gerät auf Ihren Shop zugreift. Hier bietet sich der Einsatz des Scriptes modernizr.js an. Anschließend können Sie mit gezielt zur Touch-Optimierung eingesetztem Javascript- und CSS-Code Usability Probleme (s. unten) beseitigen.
Tipp 2: Zoom-Script touch-fähig machen oder austauschen
Die gängigen, ursprünglich für die Benutzung mit Desktop-Rechnern und einer Maus programmierten Zoom-Scripte, funktionieren sehr oft nicht auf Touch-Geräten. Häufig ruckelt der Zoom-Layer stark oder überdeckt im schlimmsten Fall den Kaufen-Button, ohne sich schließen zu lassen. Damit befindet sich der Besucher in einer Sackgasse und Sie machen keinen Umsatz.
Die Lösung: Moderne Zoom-Scripte, wie z.B. das auf dem allgegenwärtigen JQuery basierende Script Cloudzoom, sind bereits für die Touch-Anwendung optimiert. Alternativ hilft es auch, das bestehende Script zu optimieren und z.B. einen “Schließen-Button” in den Zoom-Layer zu integrieren.
Tipp 3: Link-Abstände für Touch optimieren
Eines der häufigsten und ärgerlichsten Usabilityprobleme bei der Benutzung nicht optimierter Webseiten auf Touch-Geräten ist das “Verklicken”: Sie wollen einem bestimmten Link folgen und landen auf der falschen Seite. Jetzt müssen Sie wieder zurück und noch einmal Ihr Glück versuchen. Weil Sie mit Ihrem Finger nicht so fein wie mit einer Maus navigieren können, würden Sie eigentlich mehr Platz zwischen den Links und Klickflächen benötigen.
Die Lösung: Vergrößern Sie die Abstände zwischen Links und Buttons (Apple empfiehlt Klickbereiche in einer Größe von 44×44 Punkte) und schaffen Sie umrandete Klickbereiche. Besonders die Navigation und Linklisten lassen sich hierdurch in der Handhabung wesentlich verbessern. Meist genügen bereits ein paar zusätzliche Zeilen CSS.
Tipp 4: Drop-Down-Menüs und Mouse-Over-Flächen optimieren
Mouse-Over-Layer und typische Drop-Down-Menüs funktionieren auf Touch-Geräten nicht. Sobald Sie einen Hauptnavigationspunkt berühren, folgen Sie dem Link, anstatt die Subkategorien angezeigt zu bekommen. Wer hier nicht optimiert, verwehrt dem Kunden den Blick auf die Subkategorien. Diese befinden sich oft in einem Layer, der erscheint, wenn man mit der Maus über die Hauptmenüpunkte fährt.
Die Lösung: Deaktivieren Sie per Javascript die Hauptnavigationslinks und fügen Sie stattdessen in den Drop-Down-Layer einen neuen Link oder Button auf das eigentliche Ziel des Hauptnavigationspunktes. Wenn Sie jetzt noch eine Möglichkeit zum Schließen des Layers integrieren, sind Ihre Tablet-Nutzer glücklich.
Tipp 5: Produkt-Slider optimieren oder integrieren
Produkt-Karusselle werden in Onlineshops in vielfältigen Variationen, z.B. als rotierende Startseitenteaser oder Cross-Selling-Boxen, auf den Produktdetailseiten eingesetzt. Während die Nutzer auf dem Desktop eine automatische Rotation oder das Blättern per Mausklick gewohnt sind, erwarten sie auf Touch-Geräten eine Steuerung dieser Elemente über Touch-Gesten, wie z.B. “Sliden” oder “Wischen”. Auch hier empfiehlt es sich, die bestehenden, meist nur auf einen Klick reagierenden oder auf Touch-Geräten stark ruckelnden, Scripte anzupassen bzw. auszutauschen.
Fazit:
Durch die erläuterten Anpassungen können Sie das Nutzungserlebnis auf Touch-Geräten – bei überschaubarem Aufwand – wesentlich verbessern. Noch vor Kurzem fühlte sich die Gestensteuerung auf Webseiten oder mobilen Webseiten sehr ruckelig und unrund an. Im Bereich der Entwicklung von Javascripten, die Touch-Gesten steuern, hat sich in der letzten Zeit jedoch viel getan. Mittlerweile fühlt sich die Gestensteuerung ähnlich “flauschig” an, wie bei nativen Apps.
