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.
Beispiel Mobile:
AYR
Beispiel Desktop:
AYR
Satorisan
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
Beispiel Desktop:
Hard Graft
Grovemade
Bellroy
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
Beispiel Desktop:
ETQ
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
Beispiel Desktop:
Hard Graft
Anyi Lu
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
Beispiel Desktop:
Esprit
Görtz
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.
