Onlineshops – Mehrgerätefähigkeit am Beispiel von Oxid 5.0

Im Dezember hatte ich die Muße, mir über einige grundlegende Dinge jenseits des Tagesgeschäfts Gedanken zu machen. Ein Punkt betrifft dabei, welche Anforderungen aktuell an die Nutzeroberfläche eines Onlineshops zu stellen wären. Das letzte Mal habe ich solche Requirements im Herbst 2010 geschrieben. Seitdem hat sich einiges getan.

Internet “macht” man nicht mehr ausschliesslich am Computer. Heutzutage ist auch der Durchschnittskunde sowohl stationär per PC, semistationär per Notebook, auf dem Sofa per Tablet und auch unterwegs per Smartphone im Internet. Einige nutzen sogar Browser in Smart TVs und Spielekonsolen. Was bedeutet das für eCommerce?

One Size doesn’t fit all!

Anhand des Zoos möglicher Endgeräte bleibt die Erkenntnis: Ein Layout für alle funktioniert nicht mehr, wenn man dem Kunden ein möglichst gelungenes Einkaufserlebnis bieten möchte.

Am augenfälligsten (im wahrsten Sinne des Wortes) ist, dass sich die Bildschirmauflösungen und Pixeldichte extrem unterscheiden. An dieser Stelle kommt man langsam nicht mehr um responsive Design herum. Aber das ist längst nicht alles.

Dazu kommt, dass sich die Bedienung von ‘normalen Webseiten’ per Maus und Tastatur deutlich von der Touchscreenbedienung auf Tablets oder Smartphones unterscheidet. Als Stichworte seien hier nur “Mousover” oder “Pinch to Zoom” genannt.

Immer wieder unterschätzt werden auch die vollkommen unterschiedlichen Nutzungsanforderungen zwischen konzentrierter Bedienung, wenn man längere Zeit ruhig vor einem Gerät sitzt, im Gegensatz zu einer lauten, ablenkenden Umgebung, wenn man ‘mal kurz zwischendurch’ sein Smartphone hervorholt.

Ein Layout per Gerätegattung

Beim aktuellen Stand der Gerätenutzung sollte man drei unterschiedliche Nutzeroberflächen auf seinem Onlineshop haben:

Eine “Full Feature” Oberfläche für herkömmliche Computer. Ausgelegt auf die Bedienung per Maus und Tastatur und Bildschirmauflösungen zwischen 1024 (Netbook) und 1920 Pixel bei 26″ Monitoren. Die Nutzungsmotivation der potentiellen Kunden ist sowohl gezieltes Suchen, als auch gemütliches Herumstöbern.

Für Tablets sollte die Oberfläche aufgrund der kleinen Displaygrössen zwischen 7″ und 10″ wesentlich, strenger und reduzierter sein; die Bedienelemente wegen der Gestenbedinung mit Fingern gleichzeitig erheblich grösser. Die Nutzungsmotivation gleicht derjenigen, der ersten Variante.

Für Smartphones ergeben sich aufgrund der nochmals kleineren Displaygrösse zwischen 3,5″ und 4,7″ erheblich eingeschränkte Darstellungsmöglichkeiten. Gleichzeitig unterscheidet sich hier die Nutzungsmotivation des Kunden. Wer unterwegs “schnell mal eben” einen Onlineshop aufruft tut das meist, weil er Preise vergleichen will oder nach einen bestimmten Artikel sucht, den er im Laden gerade nicht finden kann. Hieraus sollte die Nutzeroberfläche optimiert sein.

Ein recht gelungenes Beispiel für diese Strategie bietet die Otto-Tochter Bonprix.

Umsetzungsmöglichkeiten am Beispiel Oxid 5.0

Wer die drei Gerätegattungen Computer, Tablet und Smartphone jeweils optimal unterstützen will, muss seinen Onlineshop also mit drei eigenständigen Templates ausstatten, sowie eine Geräteweiche bauen.

Das ging bisher elegant auf dem Server.

In den letzten acht Jahren habe ich diese Anforderungen bei verschiedenen Onlinediensten so gelöst, dass beim ersten Aufruf einer Seite auf dem Server die jeweilige Gerätegattung erkannt wird und das dazugehörige Templateset in der Session gespeichert wird. Dazu gab es jeweils einen Link, mit dem der Nutzer zu einer anderen Oberfläche wechseln konnte. Der Vorteil der Lösung ist, dass Deeplinks für alle Geräte gleich sind.

Jetzt bitte schneller und anders…

In den letzten beiden Jahren hat ein Wettrüsten stattgefunden, um Publikationen und Onlineshops schneller zu machen. Die nun erwartete Ladezeit von ein- bis zwei Zehntel Sekunden für die HTML-Seite lässt sich nur noch durch den Einsatz eines Full Page Cache erreichen.

So bringt zum Beispiel auch die vor kurzem erschienene Shopsoftware Oxid 5.0 einen Varnish Full Page Cache mit. Damit ist das o.g. Verfahren nicht mehr möglich, weil fertig gerenderte Seiten ausgeliefert werden, ohne dass eine Geräteerkennung auf dem Server angesprochen werden würde.

Die Auswahl des Templatesets kann nun nicht mehr dynamisch in der Session geschehen, sondern wird über unterschiedliche Subdomains gehandelt. Bei der Eingabe von http://www.meinshop.de oder http://meinshop.de wird die normale Website aufgerufen, bei http://t.meinshop.de die Tabletversion und bei http://m.meinshop.de die Seite für Smartphones. Dieses Verhalten kann man in der Datei cust_config.inc.php durch den folgenden Code herbeiführen.

// Theme switcher
$sHost = $_SERVER['HTTP_HOST'];
$aTemp = split('\.', $sHost);
switch($aTemp[0]) {

  case 't':
    $this->sTheme = 'tablet';
    break;

  case 'm':
    $this->sTheme = 'phone';
    break;
}

Die Geräteerkennung wandert dafür vom Server in den Client. Hierzu dient ein kleines Javascript, dass den Useragent prüft, das Ergebnis in einem Cookie speichert. Entspricht der ermittelte Gerätetyp nicht der aufgerufenen Subdomain, so wird der Nutzer per Popup gefragt, ob er lieber auf die optimierte Seite umgeleitet werden möchte.

Vorteil dieser Lösung ist die sehr einfache Umsetzbarkeit und die hohe Performance.

Nachteil ist, dass die Deeplinks nicht mehr geräteunabhängig sind. Zum Ausgleich empfiehlt es sich, Landingpages für Kampagnen als nicht-cachebare Verteilerseiten anzulegen. Aber das ist ein anderer Blogartikel…