Mobile Optimierung Magento

Mittlerweile haben viele Shopanbieter ihre Webseite über ein Responsive Design auch auf mobile Endgeräte ausgerichtet. Bei einer responsiven Website bleibt das dahinterliegende HTML für alle Endgeräte unverändert und die grafische Darstellung wird über CSS queries flexibel an die Bildschirmgröße anpasst. Spricht man hier bereits von mobiler Optimierung, so wurde hier meist doch nur ein Grundgerüst geschaffen, damit die Webseite auf unterschiedlichen Geräten wie Tablets oder Smartphones einfach korrekt angezeigt wird.

Für eine echte mobile Optimierung gibt es daher darüber hinaus meist großen Handlungsbedarf. Oft trifft man mit dem eigenen Smartphone auf Onlineshops, die aufgrund schlechten Empfangs unterwegs langsam, schlecht zu bedienen sind oder einfach einen komplizierten Checkout haben. Hier werden oft Conversion-Punkte und damit wertvolle Aufträge verschenkt, denn mobile Optimierung sollte weiter gehen als nur die Erstellung einer korrekten mobilen Variante. Nachfolgend Praxistipps für die mobile Optimierung von Responsive Web Webshops.

Intelligente Reduktion von Inhalten

Mobil werden sehr oft Links von Suchmaschinen oder auch Newsletter angeklickt. Bei Onlineshops landet man dabei meist auf einer Produktseite, die beworben wird. Hier gilt es, wie auch bei Kategorieseiten, dass das Produktbild und der wichtigste Text oben angezeigt wird, ohne dabei lange Scrollen zu müssen. Generell ist es sehr wichtig für die wichtigsten Seiten, wie Kategorie- oder Produktdetailseite zu definieren, auf welche Elemente, Bilder, Texte oder Grafiken man ab welcher Bildschirmgröße verzichtet, um den Benutzer nicht zu überfordern. Die Optimierung sollte daher schon bei der Verwendung von Headergrafiken beginnen. Sind diese zu groß, muss auch hier der User immer wieder scrollen, was bei der Ansicht mehrerer Produkte schnell mühsam werden kann.

Zoom

Grundsätzlich gilt für alle Elemente wie Links, Texte, Menüs oder Produktbilder: Es sollte ohne Zoom durch den User funktionieren. Ausnahme dazu sind eventuell Bilder, aber dazu unten mehr.

Links

Der Abstand zwischen mehreren Links sollte so gewählt sein, dass keine Probleme beim Anklicken entstehen.

Bilder

In Onlineshops sind Bilder sehr wichtige Verkaufshelfer. Es ist daher wichtig, dass es für Bilder auf mobilen Geräten auch eine Zoomfunktion gibt. Da Funktionen wie Mouse-over auf Tablets und Smartphones nicht funktionieren, bieten sich eigene Buttons für den Produktzoom an.

Menüs

Menüs sollten klar erkennbar sein und auch nicht zu klein, um diese sauber bedienen zu können. Darüber hinaus sollte auf Hover-Menüs verzichtet werden.

Flash

Mittlerweile ein „alter Hut“, aber immer noch findet man Seiten, die Flash einsetzen. Wer immer noch Flash auf seiner Webseite einsetzt, dem sollte klar sein, dass diese auf einen nicht unbeträchtlichen Teil der Mobilgeräte, nämlich Apple, nicht dargestellt werden kann.

Schriftgröße

Ein sehr häufiger Fehler sind zu kleine Schriftgrößen. Texte sollte auch auf kleinen Geräten ohne Zoom lesbar sein. Dies betrifft vor allem Kategorie- und Produkttexte im Webshop.

Geschwindigkeit

Mobile User bewegen sich oft in Bereichen, wo es keinen guten Empfang gibt. Ein Grund mehr, sich wie schon oben beschrieben, zu überlegen, welche Blöcke werden auf welchem Endgerät angezeigt. Gerade bei Smartphones ist aus Gründen der Ladegeschwindigkeit auf die Reduktion von unnötigen Grafiken zu achten. Dies gilt auch für unnötige Mulitmediaelemente wie Töne oder Animationen. Auf diesen Aspekt legt auch Google für den Rankingfaktor der mobilen Suche großen Wert.

Mobiler Checkout

Auf die Optimierung des Checkouts möchten wir etwas näher eingehen – ist es doch wichtig, den Webbesucher gerade in den letzten Schritten bis zum Kaufabschluss nicht mehr zu verkraulen. Und wir müssen ihm zumuten eine Menge an Daten mit dem Finger auf den kleinen Tastaturen einzugeben. Vor allem hier ist deshalb maximale Effizienz angesagt. Das bedeutet auch hier disziplinierte Reduktion auf das Wesentliche, schnelle Ladezeiten und möglichst wenig Schritte.

Warenkorb

Der Besucher sollte auch im Warenkorb alle relevanten Informationen sehen. Dabei spielen, wie auch am Desktop-Bildschirm, die Anzeige der wichtigsten Produktdetails oder Versandkosten eine sehr wichtige Rolle.

Dateneingabe

Für die Eingabe sämtlicher relevanter Kundendaten sollte hier mit dem „mobilem Auge“ nochmals geprüft werden, welche Felder wirklich benötigt werden. Denn Felder wie Geburtsdatum oder andere Felder für Marketingzwecke haben im mobilen Checkout nichts mehr verloren. Schließlich muss der Besucher hier alles mühsam per Finger eintippen. Daher ist es wichtig einerseits viele Datenfelder, sofern möglich, vor auszufüllen und andererseits bei Eingabefelder gleich die richtige Smartphone-Tastatur zu öffnen. Sehr oft passiert es, dass man die Telefonnummer oder Kreditkartennummer eingeben möchte und für jede Zahl auf den Ziffernblock umschalten muss (=doppelter Aufwand). Darüber hinaus sollte das Bestellen als Gast ermöglicht werden, um dem Kunden allenfalls eine aufwändige Registrierung zu ersparen.

Vertraulichkeit

Eines der wenigen Elemente, auf welches auch mobil nicht verzichtet werden sollte, sind Symbole oder Informationen zum Thema Datenschutz. Denn gerade mobil möchte der Besucher die Gewissheit haben, dass sich seine Daten in sicheren Händen befinden.

Bestellübersicht

Hier ist es neben den gesetzlichen Kriterien – Stichwort „Button Lösung“ – wichtig, auch wirklich alle relevanten Informationen nochmals anzuzeigen. Neben den Produktdaten vor allem aber die Rechnungs- und Lieferanschrift, die gewählte Zahlungsart und auch die Versandkosten. Und schließlich sollte der Button rechtskonform auch „jetzt kaufen“ heißen.

Wie man sieht ist die mobile Optimierung  auch bei Responsive Web Templates oder Shops kein Selbstläufer. Wir empfehlen neben den oben genannten Maßnahmen daher die User Experience ebenso kritisch im Auge zu haben wie bei der klassischen Weboberfläche am Büroschreibtisch. Am besten einfach selbst einmal per Smartphone und Tablet einkaufen :-).