it-swarm.com.de

Menü der mobilen Website. Sollte das Hamburgermenü links oder rechts sein?

Vor einiger Zeit haben wir beschlossen, unser Hamburger-Menü (ich weiß, dass sie böse sind, aber wir haben eine dumme Menge an Unterkategorien) nach rechts zu verschieben. Die Gründe dafür waren Zugänglichkeit und in Innenlabors wurde bewiesen, dass die Leute es so bevorzugten.

Jetzt machen wir einige Überarbeitungen in Bezug auf mobile Top-Banner und Suche. Während meiner Recherchen habe ich festgestellt, dass buchstäblich alle unsere Konkurrenten ihre Hamburgermenüs auf der linken Seite haben.

Lohnt es sich, die Benutzerfreundlichkeit (viel einfacher zu erreichendes Menü) für die Konsistenz zu opfern (alle anderen haben ihre Hamburgermenüs auf der linken Seite).

Es ist erwähnenswert, dass unser Kundenstamm häufig mobile Geräte verwendet, insbesondere iPhones.

Es gibt ein ähnliches Thema, aber ich glaube nicht, dass es die besondere Verwendung des Hamburger-Menüs auf Websites und nicht auf Apps abdeckt. Sollte sich das Suchfeld links oder rechts befinden

31
Awfor

Vielen Dank für alle Antworten, dieses Thema hat viele wertvolle Informationen generiert und am Ende habe ich beschlossen, einen A/B-Test bezüglich der Burgerposition durchzuführen. Bisher habe ich ihn nur für einen kleinen Teil meiner Kunden ausgeführt, und der Hamburger auf der linken Seite hat die Anzahl erhöht zu Cart Rate, durchschnittliche Zeit vor Ort und Seitenaufrufe im Vergleich zu Hamburger auf der rechten Seite.

Mein Fazit ist also, dass die Hamburger auf der linken Seite derzeit die gleichen Hamburger auf der rechten Seite übertreffen. Ich bin nach wie vor der festen Überzeugung, dass dies von Branche zu Branche und von verschiedenen Unternehmen unterschiedlich sein sollte.

Hoffe, dies wird anderen helfen, auf ähnliche Fragen zu stoßen.

3
Awfor

Ersetzen Sie Hamburger-Menü durch unteres Navigationsmenü

Ich weiß, dass ich Ihre Frage nicht speziell beantworte, aber beschlossen habe, die neuesten Forschungsergebnisse über Hamburgermenüs und eine mögliche Alternative zu teilen.

In letzter Zeit wurde viel über die mobile Navigation geforscht. Es stellt sich heraus, dass das nteres Navigationsmenü mehr Benutzereingriff für Facebook im Vergleich zum Hamburger-Menü verursachte. Sehen Sie sich ein Video von Luke Wreblowski an, in dem erklärt wird, warum die meisten Google Apps das Hamburger-Menü durch die untere Navigation ersetzen.

(enter image description here

Ja, die Hamburger Navigation spart viel wertvollen Platz auf dem Bildschirm, aber:

Probleme mit dem Hamburger Menü:

  • Geringere Erkennbarkeit

    Die verfügbaren Aktionen der App sind hinter dem Hamburger-Menü versteckt. Sie sind nicht explizit und der Benutzer muss eine Aktion ausführen, um festzustellen, dass die bestimmte Aktivität verfügbar ist.

  • Höhere Interaktionskosten

    Selbst wenn Sie wissen, dass eine bestimmte Aktion verfügbar ist, müssen Sie zuerst auf das Hamburger-Menü und dann auf die Aktion tippen, während Sie in der unteren Navigation eine Aktion mit nur 1 Tippen auswählen können.

  • Benachrichtigungen über verschiedene Aktivitäten können nicht auf einmal angezeigt werden

    Die Spezifität der Benachrichtigungen ist gering. Erläuterungen finden Sie in den folgenden Bildern: bottom navigation menu picture vs
    hamburger menu picture

Warum unteres Navigationsmenü?

  • Benutzer können sich mehr auf die Kernfunktionen der App konzentrieren, da sie explizit verfügbar sind

  • Es fördert laut den hier beschriebenen Studien das Engagement der Benutzer

  • Es ist ergonomischer , da es einfacher ist, die Unterseite als die Oberseite eines Mobiltelefons zu erreichen (siehe Abbildungen von @Tarek).

Anwendungsfälle:

  • Redbooth-Anwendungsfall :

    • Kunden nutzten die App häufiger: Die Anzahl der Sitzungen hat sich mehr als verdoppelt!
    • Sie verbrachten mehr Zeit in der App: Die Sitzungszeit stieg um 70%
    • Letztendlich kamen mehr Kunden zurück, und die Anzahl der täglich aktiven Benutzer stieg fast über Nacht um 65%.
  • Spotify hat die Hamburger Navigation entfernt

    Das Unternehmen hat die Registerkartenleiste unter iOS getestet, um festzustellen, wie sich dies auf die Benutzerinteraktion auswirkt. Es stellte sich heraus, dass Benutzer mit der Registerkartenleiste im Allgemeinen 9% mehr und 30% mehr auf tatsächliche Menüelemente klickten. Die Tests ergaben auch, dass die Reduzierung der Anzahl der Optionen in der Registerkartenleiste auf fünf die Reichweite der programmierten Inhalte von Spotify erhöht, so das Unternehmen.

    Vor der breiteren Einführung testete Spotify die Registerkartenleiste sowohl mit neuen als auch mit vorhandenen Benutzern, um sicherzustellen, dass keine negativen Auswirkungen aufgetreten sind. Es stellte sich heraus, dass die neue Leiste Benutzer dazu ermutigte, mehr Arten von Inhalten zu untersuchen (z. B. Spotify-programmiert, selbstprogrammiert usw.), ohne die Metriken für Aufbewahrung, Engagement oder Verbrauchszeit zu beeinträchtigen.

Fazit

Wenn Google und Facebook das Hamburger-Menü entfernt haben (ihre Entscheidung basiert auf Tonnen von Daten), ist es sinnvoll, die untere Navigation in Ihrer App zu testen. Auch nicht nur Google und Facebook - andere hier zitierte Forschungsergebnisse haben großartige Ergebnisse erzielt, die die Navigation ersetzen.

27

Als Hamburger-Symbole zum ersten Mal allgegenwärtig wurden, wurden sie auf der linken Seite platziert.

Als Apps wie Sie zu iterieren begannen, verschob sich das Symbol nach rechts, da das Klicken einfacher ist (da die Mehrheit der Benutzer Rechtshänder ist und die obere rechte Ecke etwas zugänglicher ist als die linke).

(enter image description here(Quelle)

Ich würde also sagen, halten Sie es auf der rechten Seite, wenn Sie das Hamburger-Symbol verwenden.

16
Tarek

Meine Schlussfolgerung nach dem Lesen der UI-Struktur in Google Material Guidelines lautet links :

(enter image description here

Symbole auf der rechten Seite der App-Leiste sind app-bezogene Aktionen. Das Menüsymbol öffnet das Überlaufmenü, das sekundäre Aktionen und Menüelemente wie Hilfe, Einstellungen und Feedback enthält.

Primäre Aktionen sollten rechts und sekundäre links angezeigt werden (wahrscheinlich aufgrund von Rechtshändigkeit ).

Also zeigt es nur rechts an, wenn das Hamburger-Menü die Hauptaktion ist oder wenn es für sich ist .


Wenn Sie eine App für Sprachen von rechts nach links entwickeln, kehren Sie die Reihenfolge um.

5
Alvaro

Apps auf iPhones scheinen links oder rechts Hamburger zu haben - ich denke, die Benutzer sind daran gewöhnt, daher hängt die Wahl zwischen beiden von anderen Elementen ab, die Sie oben auf dem Bildschirm haben.

Die MSN News App hat oben eine Suchleiste und rechts einen Hamburger.
Die Amazon App hat eine Suchleiste mit dem Hamburger auf der linken Seite.

Solange es sich auf der einen oder anderen Seite oben auf dem Bildschirm befindet, ist das das Wichtigste.

1
user93670

Auf iPhones erfolgt die "Zurück" -Navigation normalerweise über die obere linke Ecke.

Es wird dringend empfohlen, auch das Wischen vom linken Rand zu unterstützen (da die obere linke Ecke für einen Rechtshänder mit einer Hand auf einem größeren Bildschirm sehr schwer zu erreichen ist), aber Sie sollten trotzdem das "Zurück" behalten. Navigation in dieser Position (als visueller Hinweis, als Möglichkeit zum Zurücknavigieren für Personen, die nichts über das Wischen vom linken Rand wissen, und als Möglichkeit zum Navigieren für Personen, die einen kleineren Bildschirm verwenden, sind Linkshänder). oder benutzen Sie das Telefon mit beiden Händen).

Jetzt haben Sie einen Konflikt zwischen der "Zurück" -Navigation und dem Menü, was bedeutet, dass es sinnvoller ist, es rechts zu platzieren. Wenn Sie es links halten, können Sie:

  • wechseln Sie zwischen dem Menü (wenn Sie sich auf der "oberen" Seite jeder Kategorie befinden) und der Schaltfläche "Zurück" (wenn Sie sich auf einer sekundären Seite befinden). Dies ist jedoch inkonsistent und erschwert die Navigation, wenn Sie sich in einem "Inneren" befinden. Seite (muss zuerst "Zurück", dann Menü).
  • haben Sie beide Schaltflächen nebeneinander, allerdings nur, wenn tatsächlich eine "Zurück" -Navigation (Innenseiten) vorhanden ist. Dies bedeutet, dass das Layout möglicherweise inkonsistent ist (abhängig von der Reihenfolge der Schaltflächen) und Sie zwei Schaltflächen hinzufügen, die sehr nahe beieinander liegen zu einem anderen, wenn sie selbst auf kleineren Bildschirmtelefonen bereits sehr schwer zu erreichen sind.

Dies kann nun anders sein, wenn:

  • sie haben nie eine Rückennavigation (obwohl dies wirklich nicht so häufig ist),
  • oder Sie wissen irgendwie, dass Ihre Benutzer die App nur/meistens in einem "stabilen" Kontext verwenden, in dem sie beide Hände verwenden können, im Gegensatz zu Bewegungen, bei denen die Einhandbedienung vorherrscht.

Die beste Option für Ihren speziellen Fall wäre natürlich, einige A/B-Tests durchzuführen!

0
jcaron