Mehr Conversion mit Responsive Design

1. Nur relevante Inhalte zeigen!

Gerade auf kleinen Screens lässt sich nicht immer alles übersichtlich darstellen. Darum sollte man dem Grundsatz „Mobile First“ zwingend folgen. Darunter versteht man, dass man beim kleinsten Screen beginnt und dort alle wirklich notwendigen Elemente platziert, die für den Kauf erforderlich sind. Denn unterwegs gilt: Weniger ist mehr! So sind großflächige Aktionsbanner auf dem kleinen Screen eher störend, fordern lange Ladezeiten und können meist sowieso nicht richtig gelesen werden. Stichwort: User Experience!

2. Gewohnte Pfade nicht verlassen!

In allen Screen-Größen sollten wichtige Elemente trotzdem an ihrem gewohnten Platz zu finden sein. So sollte z.B. der Warenkorb immer „rechts oben“ platziert sein und die Suche „oben mittig/rechts“. Somit ist gewährleistet, dass Plattformwechsler immer ihr gewohntes Shopping-Erlebnis bekommen und keinerlei Umstellung den Einkauf behindert. Stichwort: Usability!

3. Symbole und Bildsprache nicht ändern!

Auch wenn es manchmal schwer fällt, sich von verspieltem Design zu trennen, sollte in der Konzeption von Anfang an darauf geachtet werden, dass alle wichtigen Elemente auch auf kleinen Screens funktionieren. Vor allem Buttons und Links sollten sich in allen Plattformen gleich darstellen. Hier gilt der gleiche Effekt wie bei der Platzierung – Homogenität schafft Vertrauen und vereinfacht den Plattformwechsel. Trotzdem macht es natürlich Sinn, kleinere Anpassungen in Betracht zu ziehen. So kann es sich z.B. lohnen, kontrastarme Elemente für Mobile leicht anzupassen, damit diese auch bei Nutzung im Tageslicht gut lesbar sind. Hier gilt es, die richtige Balance zu finden.

4. Bedienungselemente anpassen!

Was bei den Elementen und dem Design gilt, kann leider nicht auf die Bedienung übertragen werden. Hier muss sich zwangsweise etwas ändern, denn so gibt es bei Touch-Devices z.B. keinen echten Mouse-Over-Zustand. Dieser  wird durch einen Tab simuliert, was eher störend ist. Ein Klassiker im Online-Shop ist z.B. die Alternativ-Produktansicht in der Kategorie bei Mouse-Over. Damit müsste man auf einem Touch-Device zweimal tappen, um in die Produktdetails zu gelangen, da beim ersten Tap nur das Bild wechselt. Hier gilt es, sich innovative Lösungen zu überlegen, oder lieber auf die Funktion zu verzichten! Auch sollten die gewohnten Gesten genutzt werden, z.B. Pinch für den Bilder-Zoom in der Artikeldetail-Ansicht.

5. Alle Informationen nutzen!

Als Beispiel stelle man sich ein Geschäft für Bekleidung vor. Am Standort „Innenstadt“ wird sich das Sortiment möglichst breit halten und an die jeweilige Jahreszeit anpassen. Am Standort „Flughafen“ hingegen finden sich eher klassische Business-Outfits, möglichst für jedes Wetter. Solche Vorteile können mit Location Based Services und mobilen Geräten ebenfalls Online genutzt werden – allerdings nur mit vorheriger Einverständniserklärung des Users! Hierbei ist auch eine sehr gute Caching-Strategie wichtig, da viele individuelle Inhalte ausgespielt werden müssen. Natürlich lassen sich auch andere wertvolle Informationen auswerten, z.B. welches Gerät der Kunde gerade nutzt, um auf den Shop zuzugreifen. Somit lassen sich einem Apple-User gezielt Zubehörempfehlungen für sein Gerät präsentieren, oder speziell darauf angepasste Angebote.

Autor: Sebastian Wernhöfer,  CEO der in München und Stuttgart ansässigen E-Commerce Agentur mzentrale. Als E-Commerce Agentur und Magento Silver Partner steht die mzentrale seit 13 Jahren für die professionelle Entwicklung digitaler Kanäle und Onlineshop-Lösungen für Fashion, Lifestyle und Beauty.

Weitere Informationen unter www.mzentrale.de