5 Mobile Patterns, die neue UX Trends im E-Commerce prägen

Mit der starken Verbreitung und Nutzung von Smartphones sowie Tablets werden mobile UX-Patterns relativ schnell erlernt und akzeptiert. Viele Projekte setzen genau aus diesem Grund auf den Mobile First-Ansatz und entwickeln zuerst die mobile Variante für Ihr Geschäftsmodell, bevor eine Variante für den Desktop erstellt wird.

So ist es auch kein Wunder, dass einige Gestaltungsgrundsätze und UX-Patterns aus dem Mobile-Bereich sich auf einmal auch auf der Desktop-Variante der Website wiederfinden. Mobile Patterns werden schnell von den Nutzern erlernt, lassen sich einfach übertragen und zeigen auch in anderem Kontext Ihre Vorteile.

Den Einfluss von mobilen Gestaltungsgrundsätzen und UX-Patterns möchte ich anhand von 5 Beispielen näher beleuchten und aufzeigen, wie diese auch im Desktop-Kontext wunderbar eingesetzt werden können.

Seitenlayout

960 Pixel – diese Zahl gehörte lange Zeit zu dem Standardrepertoire eines Webdesigners. Die Zahl bezog sich natürlich auf die Seitenbreite einer Website. Mit 960 Pixel Breite passte das Layout gerade so noch in einen Browser mit einer Bildschirmauflösung von 1024×768 Pixeln. Über optimierte Seiten für größere Bildschirme, geschweige denn über eine Website, die sich adaptiv an die Bildschirmgröße anpasst, dachten die Wenigsten nach. Der wirtschaftliche Nutzen stand nicht im Verhältnis zu dem benötigten Mehraufwand.

Durch die Verbreitung von mobilen Geräten hat sich das geändert. Mit der Entwicklung von Responsive Design rückte die Anpassung der Website an die jeweilige Auflösung in den Vordergrund. Wieso sollte man die Website nur an eine kleinere Auflösung anpassen? Eine Website kann sich genauso gut auch adaptiv an größere Auflösungen anpassen. So müssen Websites nicht mehr in einem 960 Pixel breitem Grid-System eingesperrt werden, sondern können die komplette Breite ausnutzen.

Vergleich Adaptive Layout

Im adaptiven Layout haben die Elemente viel Freiraum, wodurch das Layout eine schöne Leichtigkeit erhält. Im herkömmlichen Grid-Layout sind die Elemente hingegen räumlich eingeschränkt und das Layout wirkt schnell überladen.

Beispiel Mobile:

AYR

AYR Mobile Website

Aufgrund des geringen Platz bei mobilen Geräten wird die komplette Breite der Seite in Anspruch genommen.

Beispiel Desktop:

AYR

AYR Desktop

Auch die Desktop-Variante nutzt die komplette Breite. Wichtig ist, dass der gewonnene Platz nicht überladen wird und durch Kontraste das Auge gut geführt wird.

Satorisan

Satorisan Desktop

Ungewöhnlich ist die Buy-Box am unteren Seitenrand. Dafür steht das Produkt vollkommen im Fokus.

Seitenlänge

Anfang der 90er waren Nutzer gewohnt ohne Scrollen alle Funktionen direkt zu erreichen. Die Nielsen Norman Group sprach deshalb die Empfehlung aus, auf Scrollen so weit wie möglich zu verzichten. 1997 schon wurde diese Empfehlung allerdings revidiert, da das Scrollen auf Webseiten sich etabliert hatte. Mit den kleinen Displays von mobilen Geräten gab es eine weitere Entwicklung, die dem alten UX-Mythos „Nutzer scrollen nicht auf Webseiten“ weiter entgegenwirkte. Der Platz ist im mobilen Kontext sehr beschränkt und die Seiten werden dadurch auf mobilen Geräten teilweise sehr lang. Trotzdem ist es angenehmer für den Nutzer zu scrollen, anstatt Inhalte über einen Seitenwechsel zu erreichen.

So findet man immer längere Webseiten, die dem Inhalt auch den nötigen Platz einräumen und nicht versuchen ihn über den Fold zu quetschen.

Wichtig hierbei ist allerdings zu beachten, dass die Aufmerksamkeit über dem Fold nach wie vor noch stärker ist. Es ist also elementar, dass zu Beginn das Interesse des Nutzers geweckt wird und dieses auch unter dem Fold aufrecht erhalten wird. Ansonsten läuft man Gefahr, dass die Inhalte nicht die nötige Aufmerksamkeit erhalten.

Beispiel Mobile:

Hard Graft

Klick auf Bild für komplette Ansicht

Klick auf Bild für komplette Ansicht

Beispiel Desktop:

Hard Graft

Klick auf Bild für komplette Ansicht

Klick auf Bild für komplette Ansicht

Grovemade

Klick auf Bild für komplette Ansicht

Klick auf Bild für komplette Ansicht

Bellroy

bellroy

Klick auf Bild für größere Ansicht

Off-Canvas

Der Off-Canvas ist mittlerweile ein etabliertes UX-Pattern im mobilen Bereich. Sekundäre Inhalte können zunächst außerhalb des sichtbaren Seitenbereichs versteckt werden. Über einen Button werden bei Bedarf die versteckten Inhalte in den sichtbaren Bereich eingeschoben. Der Vorteil dieser Vorgehensweise ist, dass auf die Inhalte bei Bedarf immer direkt zugegriffen werden kann. Zudem überladen sie so die aktuelle Seite nicht.

Immer häufiger wird der Off-Canvas auch in Desktop-Varianten eingesetzt. Hier dient der Off-Canvas ebenfalls für Zusatzinformationen, die nicht fest auf der Seite platziert werden müssen, aber bei Bedarf interessant sind.

Beispiel Mobile:

Indochino

indochino

Typisches Off Canvas-Menü bei der mobilen Ansicht von Indochino.

Beispiel Desktop:

ETQ

ETQ nutzt den Off-Canvas für die Vorschau des Warenkorbs. Wichtig ist, dass der Nutzer dieses Pattern kennt und damit umgehen kann. Ansonsten könnte es für den Nutzer seltsam wirken, wenn der eigentliche Inhalt zur Seite geschoben wird.

ETQ nutzt den Off-Canvas für die Vorschau des Warenkorbs. Wichtig ist, dass der Nutzer dieses Pattern kennt und damit umgehen kann. Ansonsten könnte es für den Nutzer seltsam wirken, wenn der eigentliche Inhalt zur Seite geschoben wird.

hessnatur

hessnatur nutzt den Off-Canvas um die Unternehmenswerte zu kommunizieren – ein wichtiger Alleinstellungsmerkmal für hessnatur.

hessnatur nutzt den Off-Canvas um die Unternehmenswerte zu kommunizieren – ein wichtiges Alleinstellungsmerkmal für hessnatur.

Minimierte Navigation

Die gesamte Navigation komplett auf einer mobilen Webseite anzuzeigen, würde zu viel Platz benötigen. Eine vollständige Navigation am Seitenanfang belegte so den ganzen oberen Bereich und der Nutzer sieht noch nichts vom ursprünglichen Inhalt, den er eigentlich sucht.

Aus diesem Grund hat es sich bewährt die Navigation zu minimieren und über einen Menü-Button erst anzuzeigen. Für die Einblendung des Menüs haben sich überwiegend zwei Konzepte durchgesetzt. Als erste Variante ein Drop-Down Menü bei dem die Navigation unterhalb des Buttons aufklappt. Die Alternative ist der Off-Canvas, bei dem das Menü seitlich einfährt und den vorherigen Inhalt zur Seite schiebt.

Beispiel Mobile:

Daniella Draper

Das Menü wird lediglich durch ein Icon dargestellt. Erst durch einen Klick auf das Icon wird das Menü sichtbar.

Das Menü wird lediglich durch ein Icon dargestellt. Erst durch einen Klick auf das Icon wird das Menü sichtbar.

Beispiel Desktop:

Hard Graft

Das seitlich ausklappende Menü ist nur über einen Klick auf "Collection" aufrufbar.

Das seitlich ausklappende Menü ist nur über einen Klick auf „Collection“ aufrufbar.

Anyi Lu

Das Menü bei Anyi Lu lässt sich über das Menü-Icon oben links öffnen. Das Menü legt sich dabei über die komplette Seite. Eine kleinere Darstellung des Menüs hätte wahrscheinlich auch ausgereicht und wäre erwartungskonformer.

Das Menü bei Anyi Lu lässt sich über das Menü-Icon oben links öffnen. Das Menü legt sich dabei über die komplette Seite. Eine kleinere Darstellung des Menüs hätte wahrscheinlich auch ausgereicht und wäre erwartungskonformer.

Fullscreen Overlay

Im Web sind Modalfenster weit verbreitet, um ohne einen Seitenwechsel die aktuelle Seite mit neuen Inhalten zu überlagern. So kommt das Modalfenster zum Beispiel zum Einsatz, wenn größere Zoombilder eines Produktes angezeigt werden sollen. Anstatt die größeren Bilder auf einer neuen Seite darzustellen und den Nutzer von der aktuellen Seite wegzuleiten, wird der eigentliche Inhalt leicht ausgeblendet und die größeren Bilder darüber gezeigt.

Bei mobilen Webseiten macht ein gelerntes Modalfenster hingegen wenig Sinn. Das Modalfenster würde in den meisten Fällen die ganze Seite überlagern und vor allem auf das Beispiel mit den Zoombildern bezogen, gewinnt das Bild nicht wirklich mehr an Größe. Eine Möglichkeit ist es anstatt nur einen Teil der Seite zu überlagern, die komplette Seite zu überlagern und hier weitere Zoomfunktionalitäten anzubieten. Wichtig ist, dass der Nutzer aber auch schnell wieder zur eigentlichen Seite zurückkehren kann.

Dieses Verhalten findet man auch immer häufiger auf Webseiten im Desktop-Kontext. Teilweise bietet auch hier das Modalfenster nur eine marginalen Gewinn an Größe. Wieso also nicht das Overlay über die komplette Seitengröße öffnen? So hat der Nutzer ordentlich Raum, um sich das Produkt ausgiebig in einer angenehmen Größe anzusehen.

Beispiel Mobile:

Esprit

esprit mobile

Das Overlay von Esprit in der mobilen Variante mit der Möglichkeit zu pinchen.

Beispiel Desktop:

Esprit

Esprit Overlay

Das Fullscreen Overlay bei Esprit in der Desktop-Variante.

Görtz

Görtz Overlay

Bei Görtz muss der Nutzer das Zoom-Overlay nicht mehr verlassen, um das Produkt in den Warenkorb zu legen.

Fazit

Der reduzierte Raum bei mobilen Geräten zwingt den Designer dazu, sich auf die wichtigsten Elemente zu fokussieren und Elemente, die zum jeweiligen Zeitpunkt weniger relevant sind, zu entfernen bzw. auszublenden. Erst bei Bedarf können diese Funktionen dann angezeigt werden, wobei dann wiederum der Fokus auf den eingeblendeten Funktionen liegt.

Diese Fokussierung kann auch bei Desktop-Varianten hilfreich sein. Weg von überladenen Seiten über dem Fold hin zu gezielteren Websites, die vom Nutzer leichter erfasst und erkundet werden können. Der kognitive Aufwand, der durch volle geclusterte Seiten entsteht, wird dadurch ungemein reduziert und steigert die User Experience.

Wichtig ist hierbei allerdings zu beachten, dass der Zielgruppe die entsprechenden Patterns aus dem mobilen Umfeld auch bekannt sind und sie mit diesen umgehen kann. Eine Reduzierung von sichtbaren Funktionen kann Nutzer auch bei der Bedienung einschränken. Eine mobil optimierte Variante muss nicht zwangsläufig auf dem Desktop gut performen, wie der Artikel „When a winning tablet design flops on desktop“ von Get Elastic schön aufzeigt.

Von daher sollte man bei solch einschneidenden Änderungen immer zunächst testen, ob sie von der jeweiligen Zielgruppe auch gut angenommen werden und tatsächlich ihre Vorteile auch auf dem Desktop voll ausspielen können.

Weiterführende Links:

  • Send to Kindle
  • http://kKrft.ly/zsS
Manuel Ressel Manuel Ressel ist Head of UX Design bei der Web Arts AG. Seine Leidenschaft gilt dem Thema der Emotionalisierung von Kauf-Prozessen in E-Commerce-Portalen. Manuel Ressel ist unentwegt auf der Suche nach einzigartigen Shop-Perlen und neuen Design Trends im E-Commerce und sammelt diese in dem E-Commerce Showcase conversiondesign.de. Folgen Sie ihm auf Twitter, Google+ oder Facebook.

, , ,

1 Reaktion auf  “5 Mobile Patterns, die neue UX Trends im E-Commerce prägen”

Trackbacks/Pingbacks

  1. […] bin ich zu dem Thema schon in dem Artikel „5 Mobile Patterns, die neue UX-Trends im E-Commerce prägen“ […]

Hinterlassen Sie einen Kommentar