Mega-Drop-Down auf mobilen Geräten

Eine Navigation ist das Herzstück einer jeden Webseite. Egal ob Onlineshop oder Webauftritt - es kommt früher oder später zur Frage: Welches Navigationskonzept kommt zum Einsatz? Neuerdings müssen auch auf Smartphones und Tablets eine saubere Nutzerführung und gute User Experience (UX) geboten werden.Mein Kollege Manuel Brückmann hat sich bereits mit dem Thema Mega-Drop-Down-Menü auseinandergesetzt.Heute möchte ich einige Anregungen und Beispiele aus dem Shop-Design zeigen mit Fokus darauf, wie diese auf mobilen Geräten umgesetzt werden können.

Otto – auf dem Desktop übersichtlich

Die Navigation von Otto hat einige Produktkategorien dar zu stellen. Von Kleidung über Technik bis hin zu Accessoires für das wohnliche Einrichten. So werden schnell die Menüs groß und unübersichtlich. Leider bietet die Webseite keine Tablet optimierte Seite. Also gehe ich gleich auf die Smartphone-Variante ein.

Zunächst ist keine Orientierung für den Kunden vorhanden. Wohin muss er klicken (tappen) um in die gewünschte Rubrik zu kommen und das gesuchte Produkt zu finden?

Otto iPad Navi - Mega-Drop-DownWebseite ist nicht nutzbar für iPad User

Zwei Möglichkeiten bieten sich auf der Seite an:

  • Der Tap auf den oben sitzenden Menüpunkt „Kategorien“
  • Nach unten scrollen und dort hoffentlich den passenden Einstieg finden

;

Otto iPhone - Mega-Drop-Down

Der Einstieg für den Kunden in das Sortiment ist nicht effizient genug gestaltet um den erhöhten Ansprüchen der mobilen Shopper gerecht zu werden.

Das Drop-Down-Menü der regulären Webseite muss mühsam auf dem Smartphone durchforstet werden. Dabei lädt jedes Untermenü eine neue Seite. Eleganter wäre der Einsatz von jQuery und dessen Funktionen. So können z.B. spezifische Animationen genutzt werden um durch die Unterkategorien zu navigieren.

Mega-Drop-Down mobile

Quelle: Webstuffshare – Horitzontale iPhone Navigation

Beispiele für eine gute Navigation und den Einstieg in den Onlineshop finden Sie bei den Mobile-Commerce-Patterns.

Futureshop – Tablet-Shopping bevorzugt

Die Seite des kanadischen Retailers „Futureshop“ nutzt eine Navigation auf der linken Seite. Auf den ersten Blick für wirkt das Konzept ungewöhnlich. Man hat sich schließlich daran gewöhnt dass sich unter dem Header eine Navigationsleiste befindet. Leider sind die linksbündig platzierten Einstiege nicht sofort auffindbar und benötigen einige Zeit, bis der Kunde seinen passenden Einstieg gefunden hat.

Futureshop iPad Startseite

Futureshop.ca – Dedizierter Tablet Shop

Futureshop hat sowohl eine Tablet als auch Smartphone angepasste Seite. Hier wurde das Hauptaugenmerkt der UX auf das Tablet gelegt.

Im unteren Bereich, in welchem sich eigentlich der Footer befindet, wurde auf der Startseite mit Icons der Einstieg in die Kategorien einfach dargestellt. Diese können mit Gesten gewählt werden und ersparen das Wählen durch den klassischen Weg der Navigation im oberen Bereich. Sehr gut gelungen wie ich finde.

Diese Darstellung arbeitet gekonnt mit den gelernten Elementen aus dem iOS Portfolio. Hier verbergen sich Subkategorien unter den einzelnen Hauptkategorien. Ein erneutes Laden der Seite ist also nicht erforderlich.

Futureshop Navi

Leider nimmt die Qualität der UX auf dem iPhone ab. Wählt der Kunde hier den Eintrag „Menu“, erhält er lediglich eine Liste mit Namen der Kategorien und der Anzahl der verfügbaren Artikel. Die gewaltige Auswahl erschlägt den Nutzer – es bleibt unklar, ob weitere Einschränkungskriterien folgen. Ein Problem der Orientierung: Die Auswahlmöglichkeit aus >;4000 Artikeln wirkt eher abschreckend (Paradox of Choice).

Futureshop iPhone Kategorie

Futureshop.ca – Kategorieübersicht auf dem iPhone

BonPrix – ein Vorzeigebeispiel auf allen Plattformen

BonPrix hat alle Hausaufgaben gemacht. Auf allen Plattformen wurde das Design und das Frontendverhalten jeweils individuell angepasst. Der Nutzer findet schnell den richtigen Weg und kommt an sein Ziel.

Die Tablet-Version setzt gekonnt die voluminöse Navigation der Webseite um.

BonPrix - iPad Navigation

Gute iPad Navigation auf BonPrix

Der Nutzer bewegt seinen Finger auf einen der Menüpunkte. Sofort öffnet sich das Untermenü. Mit zwei Fingerbewegungen ist er da, wo wo er hin möchte. Maximal drei Taps sind nötig. Die Feldgröße zum Klicken mit dem Finger sind passend.

Tipp:

Achten Sie darauf, dass nicht sofort die Hauptkategorie geöffnet wird. Das Mega-Drop-Down muss zunächst die Kategorien aufklappen und nicht sofort auf die Kategorieseite wechseln.

Besonders schön sind die Service-Links gelungen. Egal ob auf den Smartphone oder einem Tablet – man weiss sofort, dass es ich um hilfreiche Links handelt. Die Seite wirkt klar strukturiert und aufgeräumt.

BonPrix Service Navigation

Auf einem iPhone klappt die Struktur der Nebenkategorien direkt auf dem Screen auf. So wird die Seite nicht verlassen und erspart unnötige Ladezeit.

Tipp:

Der Hinweis, die Webseite zum Home-Bildschirm hinzuzufügen, macht Ihre Webseite für den Nutzer zur WebApp. Viele kennen diese Funktion nicht. So sparen Sie die Entwicklungskosten für eine native App.

BonPrix Homescreen Hinweis

Fazit

Eine gut durchdachte WebApp hat ihre Vorteile. Die Navigation muss auf das jeweilige Endgerät angepasst sein. Verwenden Sie hier so wenig Klicks wie nötig und vermeiden Sie Seitenwechsel. Diese kosten unnötig Ladekapazität.

Denken Sie daran, dass die Navigation via Fingerzeig statt findet. Die reguläre Webseite kann mit diesem Wissen als Tablet-Shopping Seite genutzt werden.

Kommunizieren sie, dass es sich um eine Webseite handelt, welche für das jeweilige Endgerät konzipiert wurde. Es muss nicht immer eine App aus dem Store sein. So sparen Sie Kosten und koppeln sich bei der Entwicklung nicht von der Website ab.

Ich wünsche Ihnen viel Spaß beim Optimieren und bin wie immer gespannt auf Ihre Erfahrungen oder Fragen.

  • Send to Kindle
  • https://www.konversionskraft.de/?p=13647
Dennis Herzberger Als Senior Conversion Architect bei der Web Arts AG hat sich Dennis Herzberger der Usability und User Experience von Webseiten gewidmet. Sein leidenschaftlicher Fokus liegt auf der Konzeption und Optimierung von mobilen Webseiten und Onlineshops. Folgen Sie ihm auf Twitter.

, ,

10 Reaktionen auf  “Mega-Drop-Down auf mobilen Geräten”

Kommentare

  1. Christian Rothe Christian Rothe

    Vielen Dank für diesen informativen Artikel. Er zeigt sehr schön die Besonderheiten von Touchscreen-Plattformen auf. Was die Bestellzahlen in den Shops abgeht, werden insbesondere Tabletts immer bedeutender. Deshalb ist eine gute Usability auf Touchscreens wichtig.

    Ich bin überzeugt, dass wir in nächster Zeit einen Paradigmenwechsel beim Webdesign erleben werden: „Design for touchscreens first“ Websites im ersten Planungs-Schritt nicht mehr primär für den Desktop-Nutzer ausgelegt, sondern für die Tablett-Nutzer. Aus meiner Sicht ist es viel leichter, aus einem guten Touchscreen-Userinterface ein Interface mit Mausbedienung zu machen als umgekehrt. Doch leider ist der umgekehrte Weg bisher der Standard: Zuerst existiert die Desktop-Version einer Site und die dann eher schlecht als recht zur Touchscreen-Version umgebaut.

    Ich halte es für empfehlenswert, sich beim Neudesign einer Website zu allererst Gedanken über die Bedienabläufe auf Touchscreens zu machen – insbesondere für iPad & Co.. Im zweiten Schritt wird dann daraus die Desktopversion für „klassische“ Browser gemacht. So können dann Bedienvorgänge, die auf dem Touchscreen ein eigenes Bedienelement benötigen (z.B. „Menü aufklappen“, „Menü zuklappen“) auf Mouseover-Effekte umgestellt werden.

  2. Doreen Doreen

    Hallo,

    grundlegend sollte jeder Laden der in der virtuellen Welt sein Geld verdienen möchte, darüber nachzudenken das die Shopseite a) zu teilen Barrierefreiheit genießt und b) auf jeglicher Plattform nutzbar.

    Der Trend geht zu effektiven, schnellen und einfachen mobilen Endgeräten. Auch wenn der prozentuale Anteil aktuell noch gering ist, ist ein Wachstum, das befriedigt werden will, da.

    Gruß
    DoDo

  3. Alexander Alexander

    Ich stimme dem Fazit komplett zu. Anstatt die Zeit und das Geld in native Apps und deren Wartung für die vielen Plattformen zu investieren sollten sich Online-Shops auf Web-Apps konzentrieren. So können mit einer Oberfläche viele Betriebssysteme und Geräte bedient werden und Updates sind, wie auch bisher beim Online-Shop, zentral möglich.

    Den Bonprix Tablet Shop habe ich mir nach dem Launch auch genauer angeschaut und ein kleines Review geschrieben: http://ringsdorff.net/2012/07/26/review-bonprix-startet-in-den-couch-commerce-mit-einem-tablet-shop/

    Mit http://www.couchcommerce.com sind wir aktuell in der Beta für eine Freemium Lösung, die Online-Shops automatisch in echte Web-Apps wandelt. Für Händler die kein Budget für eine individuelle Lösung von einer Agentur haben ist das eine interessante Alternative.

  4. Fuchs Fuchs

    Sehr informativ, vielen Dank!
    Schade, daß Bonprix auf der Desktopversion nicht die Möglichkeit einräumt, auf die t- oder m-Variante zu wechseln.
    Aus dem Hauptmenu wird durchaus auf eine neue Seite gewechselt, während die Unterkategorien ohne neu zu laden aufklappen.
    Die 1. Unterkategorie „Damen“ ist sehr übersichtlich, weil alphabetisch geordnet. In weiteren Unterkategorien scheint die Reihenfolge willkürlich gewählt.
    Wir haben uns für eine ähnliche Lösung entschieden, die die Hauptpunkte des Mega-Dropdownmenus der klassischen Version zeigt und dann weiter verzweigt – meines Erachtens die benutzerfreundlichste Form für die mobile Welt.

  5. Alex Alex

    Absolut meine Meinung, was das Fazit angeht. Bin eh ein Verfechter der WebApp. Hat bis auf wenioge Nachteile zur nativen App m.E. wesentlich mehr Vorteile.

    Danke aber für die vielen guten Anregungen bzgl. Navi-Design.

  6. Monika T-S Monika T-S

    Ich weiß der Artikel ist nicht neu, doch die Tage habe ich mich damit wieder eingehend befasst.

    All den Verfechtern von APPs contra gute Navi, wenn ein Shop am Smartphone nicht gut nutzbar ist klicken die meisten weg. Und nur 9% von denen suchen nach einem APP.

    Es kann also keine Option sein:APP oder gute Navi, sondern nur sowohl als auch, denke ich mir.

    Aus meinem direkten Umfeld weiß ich, dass etliche mit einem Shop am Smartphone unendlichste Geduld haben, aber spätestens beim Checkout sind sie total gefrustet, wenn die Eingabefelder irr kompliziert zu bedienen sind. Also noch gibts geduldige Einkäufer ;). Mir ist allerdings bewusst, dass dies keine irgendwie geartete represantive Studie ist, sondern Beobachtungen.

Trackbacks/Pingbacks

  1. […] an “Facebook Commerce” ist überzogenErnsting’s Family versucht sich in FacebookMega-Drop-Down auf mobilen GerätenThe shift to Google ShoppingForecast the future of mobile commerce in Europe3 Möglichkeiten zur […]

  2. […] man mit Hilfe von Mega Drop-downs für Desktop und auch mobile die Conversion optimieren kann, haben wir bereits in vergangenen Artikeln beschrieben. Ein weiteres […]

  3. […] für Ihre Kunden bereit halten, die Seiten müssen sich finden und öffnen lassen. Meist wird ein Mega-Drop-Down verwendet um schnellen Zugriff zu gewähren. Dabei soll auf kleineren Displays auch eine simple […]

Hinterlassen Sie einen Kommentar