Navigation in mobilen Shops: Wie Sie Ihren Nutzern die Orientierung erleichtern

Welche Navigationskonzepte gibt es eigentlich in mobile Shops? Wo werden die Nutzer besonders gut geführt und worauf sollte man achten? In diesem Beitrag möchte ich einige Good Practices vorstellen, auf die beim Surfen auf verschiedenen mobile Shops für Mode gestoßen bin.

Der erste Shop, den ich in diesem Zusammenhang vorstellen möchte, ist Zero. Der Aufbau der Navigation ist hier sehr konsistent: Rubriken, zu denen es Unterrubriken gibt, sind am Ende mit einem „+“ gekennzeichnet und klappen bei Klick weiter auf. Rubriken, die auf eine Produktübersicht führen, sind mit einem Pfeil markiert. Mehr als zwei Klicks sind dabei nie erforderlich, um auf eine Produktübersicht zu gelangen.

Zudem werden Haupt- und Unterrubriken durch unterschiedliche Farbtöne kenntlich gemacht. Diese konsistente Gestaltung ermöglicht es den Nutzern, schnell zu erlernen, wie die Navigation funktioniert und reagiert. Der Surfpfad oberhalb liefert außerdem Informationen zum aktuellen Standort, so dass der Nutzer stets weiß, wo im Sortiment er sich gerade befindet.

Zero

Zero

Die Navigation von zero: Konsistente Icons und einheitliche Gestaltung verdeutlichen den Aufbau und die Funktionsweise der Navigation.

Ebenfalls gut gelöst ist die Navigation im mobilen Shop von Görtz. Möchte der Nutzer von der Produktliste aus in eine andere Rubrik wechseln, so hat er oberhalb die Möglichkeit, auf „ändern“ zu klicken. Es öffnet sich ein Menü, auf dem per Dropdown die Hauptrubrik gewählt werden kann (Damen, Herren etc.). Die Auswahl der Unterrubrik erfolgt über kleine Icons. Auch dieses Prinzip ist schnell erlernbar; die Icons sorgen für schnelle Orientierung. Zudem bieten die Icons eine große Touch-Fläche – dies verringert die Wahrscheinlichkeit, dass Nutzer versehentlich die falsche Rubrik anwählen (was mir z. B. in einer Listenansicht von Rubriken häufiger passiert).

Goertz

Goertz

Ändern der gewählten Kategorie im mobilen Shop von Görtz: Der Wechsel zwischen Unterrubriken erfolgt über große Schaltflächen mit Icons (rechts).

Ein ähnliches Prinzip wird auch im mobilen Shop von Promod verfolgt: Auch hier werden einzelne Rubriken über Icons entsprechend gekennzeichnet. Zwar sind die Rubriken als Liste angeordnet; die einzelnen Felder sind aber schön groß und leicht anwählbar. Besonders gelungen finde ich hier zudem, dass neben dem Surfpfad auch ein sehr prominenter „Zurück“-Button und „Home“-Button angeboten werden. So muss der Nutzer nicht über den Surfpfad navigieren (was ja oft doch recht „fummelig“ ist), sondern kann über den Button eine Ebene zurück springen.

Promod

Promod

Auch Promod setzt auf große Schaltflächen: Neben Icons in der Navigation (links) erleichtert ein prominenter „Zurück“-Button die Navigation (rechts).

Navigation in mobilen Shops – Darauf sollten Sie achten

  • Gleiches Design für gleiche Aktionen verwenden: Die Nutzer müssen schnell lernen können, wie die Navigation innerhalb des mobilen Shops funktioniert. Dementsprechend ist es wichtig, auf ein konsistentes Design zu achten: Hauptrubriken sollten immer gleich aussehen, Rubriken die ausklappen müssen alle mit dem gleichen Icon gekennzeichnet usw. Dies klingt banal, ist aber noch lange nicht bei allen mobilen Shops so umgesetzt.
  • Möglichst große Schaltflächen mit Icons/Bildern verwenden: Eine gute Navigation im mobile Shop bedeutet nicht nur, dem Nutzer eine gute Orientierung zu bieten. Eine gute Navigation zeichnet sich im mobilen Kontext auch dadurch aus, dass einzelne Rubriken gut anwählbar sind. Mit anderen Worten: Navigation durch lange Listen, die sich immer weiter ausklappen, macht keinen Spaß. Erst recht nicht, wenn einzelne Rubriken so wenig Abstand voneinander haben, dass man sich sehr konzentrieren muss, um wirklich die zu treffen, die man öffnen möchte. Also: Verwenden Sie große Schaltflächen mit Icons oder Bildern. So können sich die Nutzer schneller orientieren und treffen auch tatsächlich die Rubriken, die sie interessieren.
  • Surfpfad integrieren: Wie auch im klassischen Webshop, so macht ein Surfpfad auch im mobilen Shop durchaus Sinn. Allerdings sollte er hier weniger als Navigationselement verstanden, sondern als reine Standortanzeige. Das heißt:
  • Surfpfad durch „Zurück“-Button ergänzen: Dieser Button sollte prominent platziert und groß genug sein, sodass die Nutzer über ihn einfach und schnell zurück gelangen, wenn sie sich doch einmal vertippt haben sollten oder einfach die Kategorie wechseln möchten.
    Auf diese Weise erleichtern Sie den Nutzern das Stöbern im mobilen Shop und sorgen dafür, dass sie sich schnell zurechtfinden.

2 Gedanken zu „Navigation in mobilen Shops: Wie Sie Ihren Nutzern die Orientierung erleichtern

  1. Pingback: 5 Minuten… für die Navigation in mobilen Shops und das weibliche Desinteresse an Markenkommunikation im Internet | Smarter Service

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.