Vor- und Nachteile von horizontalen Menüs gegenüber vertikalen?


11

Ich habe mich lange gefragt, ob es bevorzugt werden sollte, horizontale oder vertikale Navigationsmenüs zu verwenden. Ich habe beide zuvor auf verschiedenen Websites verwendet und kann sehen, dass jede Vor- und Nachteile hat.

Gibt es konkrete Daten zu diesem Thema? Ich interessiere mich für Zugänglichkeits- und Usability-Bedenken.

Antworten:


3

Neben Platzproblemen und der Leichtigkeit des Scannens sollten Sie noch einige andere Faktoren berücksichtigen:

Horizontal angeordnete Menüs (horizontal angeordneter Sprachen) bedeuten mehr Mausbewegungen, um von einem Element zum nächsten zu gelangen.

Es ist jedoch einfacher, von einem Menüelement der obersten Ebene in einem horizontalen Menü zu seinem entsprechenden Dropdown-Menü zu wechseln, als von einem vertikalen Menüelement zu seinem entsprechenden Flyout-Menü. Das diagonale Problem ist bei Flyouts im Vergleich zu Dropdowns stark vergrößert, da die gemeinsame Kante so viel kleiner ist.

Und dann ist da noch das Problem der Zielgeschwindigkeit. Vertikal angeordnete Menüs haben mehr "Tiefe" als horizontale Menüs. Das bedeutet, dass der Benutzer seine Maus mit einer höheren Geschwindigkeit in Richtung Menü bewegen kann, da er einen größeren Puffer hat, falls er überschießt. Wenn sich Ihr horizontales Menü am oberen oder unteren Rand des Dokuments befindet (dh bei unendlicher Tiefe), ist dies natürlich ein strittiger Punkt.

Am Ende denke ich, dass es eine Wäsche ist. Entscheiden Sie sich für das, was am besten zu Ihrem Design passt, und optimieren Sie von dort aus die Benutzerfreundlichkeit. Sie möchten kein vertikales Menü verwenden, wenn Sie für den Rest der Seite eine große leere Spalte darunter erstellen möchten. Und Sie möchten kein horizontales Menü verwenden, wenn Ihr Layout 2000 Pixel breit sein muss.


4

Nun, ich bin ein Entwickler / Programmierer / Codierer.

Das heißt, ich suche immer nach Informationen zum Design, bevor ich solche Fragen beantworte. Ich mag Jakob Nielsens Artikel, weil sie vor dem Posten recherchieren.

Ich denke, diese Links können helfen.

Nun meine Meinung. Die Verwendung horizontaler Menüs ist die erste Option für die Hauptnavigation, insbesondere wenn Sie Mega-Dropdowns verwenden möchten.

Auch die Verwendung horizontaler Brotkrumen als zusätzliche Navigation, um Benutzern zu helfen, sich schnell zu finden.

Ich mag vertikale Navigationsmenüs, aber sie sind in der Regel werbeartig, was die Nutzer für sie blind macht. Stellen Sie daher zunächst sicher, dass Ihre vertikalen Menüs NICHT wie Banner oder Google-Anzeigen aussehen.

Zweitens würde ich es vorziehen, vertikale Menüs für die "Kontext" -Navigation zu verwenden, um verwandte Inhalte oder Unterabschnittselemente anzuzeigen.


Guter Punkt. Ich denke, die meisten Websites mit zweistufiger Navigation (Haupt- und Kontextnavigation) verwenden für letztere ein vertikales Seitenmenü.
Lèse Majesté

Ja. Jakob Nielsen hat einige Erforschung dieser Art von Problemen ... :)
JoséNunoFerreira

0

Wenn Sie Menüelemente mit einem oder mehreren Wörtern haben, gibt es eine physikalische Grenze dafür, wie viele in ein horizontales Menü passen, bevor ein Bildlauf erforderlich ist. Aus diesem Grund würde ich das horizontale Menü für Elemente der Haupt- / obersten Ebene bevorzugen.

In Bezug auf die Zugänglichkeit (vorausgesetzt, es ist optisch in Ordnung) gibt es möglicherweise keinen großen Unterschied, da sie durchaus gleich gekennzeichnet sein könnten. Eine ungeordnete Liste von Links zum Beispiel.


0

Ich werde das Gegenteil von der Antwort von Fehlern posten ...

Obwohl wir von links nach rechts lesen, neigen wir dazu, von oben nach unten zu scannen. Wenn Menüelemente vertikal angeordnet sind, ist es einfacher, Elemente schnell zu vergleichen, wenn sie übereinander liegen.

Wenn Sie nur eine Handvoll Links haben, ist horizontal in Ordnung. Halten Sie die Namen kurz, aber klar und haben Sie nicht mehr als 6-7. Die andere Option ist natürlich eine Kombination - ein paar 'Header' horizontal mit Hover-Dropdowns von allem in dieser Kategorie.


"Wir neigen dazu, von oben nach unten zu scannen" basiert auf welcher Beobachtung oder Forschung? Wenn eine Beobachtung, bitte erklären. Wenn Sie recherchieren, zitieren Sie es bitte. "Es ist einfacher, Elemente schnell zu vergleichen, wenn sie übereinander liegen." Wieso das? Elemente müssen in das menschliche Gedächtnis geladen werden, damit sie verglichen werden können. Je schneller sie geladen werden, desto schneller können sie verglichen werden. Der menschliche Geist hält nur etwa 7 Gegenstände im Super-Kurzzeitgedächtnis, das Entwerfen für mehr als sieben Gegenstände ist ... weit mehr, als Menschen verarbeiten können; Zitieren: Arbeitsspeicherkapazität - en.wikipedia.org/wiki/…
Fehler

1
@blunders: Es basiert auf verschiedenen Dingen, die ich hier und da gelesen habe, aber ich konnte Sie nicht auf eine bestimmte Forschung hinweisen. Betreff: Vergleichen von Elementen - vertikal ist viel einfacher, da Sie gleichzeitig von links nach rechts vergleichen. Wenn Sie nach bestimmten Wörtern suchen, können Sie den ersten oder zweiten Buchstaben sofort scannen. Horizontal müssen Sie das eine und dann das andere lesen und jeweils verarbeiten. Ich bin sicher, dass dies irgendwo auf Jakob Nielsens Website ist ...
DisgruntledGoat

0

Die Antwort ist wahrscheinlich, dass es Zeiten gibt, in denen beide verwendet werden müssen, aber soweit Eye-Tracking-Studien gezeigt haben, scannt das Auge die Seite in einem F-förmigen Muster . Daher ist es wahrscheinlich am besten, die Navigation oben links oder über die Seite zu halten oben.

Beide können auch zusammen verwendet werden, z. B. ein horizontales Menü oben für Navigationslinks (Startseite, Informationen zu uns, Kontakt usw.) und ein linkes Menü für Kategorien, Artikel und dergleichen.

Ein weiterer zu berücksichtigender Punkt in Bezug auf Dropdown-Menüs ist, dass sie SEO-Auswirkungen haben können. Danny Sullivan von Search Engine Land schlägt vor, dass Dropdown-Menüs die Linkautorität durch viele Links zu jeder Seite beeinträchtigen können und dass ein hierarchisches Menü den Link-Saft möglicherweise besser weitergibt. Warum sollten Sie Navigationselemente vor Ihren Benutzern in einem Dropdown-Menü verstecken, in dem sie möglicherweise das verpassen, wonach sie suchen?


0

IMHO neige ich dazu, Hauptabschnitte als horizontale Menüs zu kategorisieren. Wobei als beschreibende Abschnitte eines aktiven Hauptabschnitts im vertikalen Menü.

Zum Beispiel:

------------------------------------------------------------------------------
Home News Product
------------------------------------------------------------------------------

|      About Us          | |                                            |
|      Mission           | |      Here is describing content            |
|      Contact Us        | |                                            |

Da Startseite, Nachrichten und Produkt als Hauptkategorien fungieren, habe ich sie im horizontalen Layout gehalten, wobei Über uns, Mission, Kontakt die aussagekräftigsten Abschnitte der Startseite sind. Daher habe ich sie als vertikales Menü neben dem Abschnitt zur Inhaltsanzeige für einen einfachen Zugriff beibehalten .


0

Ziemlich einfach, sagst du mir, was ist leichter zu lesen: ABCDEFGHIJKLMNOP...Zoder

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
.
.
.
Z

Denken Sie beim Lesen darüber nach, wie sich Ihr Auge bewegt. Beim ersten Beispiel ist es - - - usw. Beim zweiten Beispiel ist es ZZZ usw.; Das heißt, Ihr Auge bewegt sich in einem Z-Muster. Mit dem Z-Muster muss Ihr Auge mehr über den nächsten Informationspunkt nachdenken als über den ersten. Je näher eine Information an der letzten Information liegt, desto einfacher ist ihre Verwendung. Je kompakter die Informationen sind, desto besser. Sie können jederzeit Speicherplatz hinzufügen. Einige Informationen werden jedoch bisher nur komprimiert. Zum Beispiel kann ich so mehr Speicherplatz hinzufügen, aber es ist immer noch kürzer, wenn Sie das längste Ende von Beispiel 2 messen: ABCDEFGHIJKLMNOPQRSTU VWXYZ

Ich bin mir sicher, dass jemand Nachforschungen anstellen wird oder so, könnte sogar sagen, dass ich falsch liege, aber Tatsache ist, dass meine Logik so einfach ist, dass ich sie verstehe, es für mich sinnvoll ist und ich keinen ausgefallenen Bericht brauche, um es mir zu sagen dass es richtig oder falsch ist ... weil ich vermute, dass ein ausgefallener Bericht keinen Sinn ergibt und nur eine Stichprobe von Daten ist, die auf der Struktur des gegebenen Tests basieren ...

Also was denkst du?


1
Sie scheinen zu implizieren, dass horizontal immer besser ist? Ich stimme diesem Beispiel zu - sehr kurze Menüpunkte. Aber sobald die Gegenstände wortreich werden, kann es sehr unordentlich werden, wenn sie horizontal angeordnet werden.
MrWhite

@ w3d: Stimmt, aber das ist ein anderes Thema, was bedeutet, dass es ein zusätzlicher Faktor ist, der nicht mit der Kernfrage zusammenhängt. Es gibt viele Faktoren, die Sie einbringen könnten, aber sie würden sich nicht direkt auf die Kernfrage beziehen. Zum Beispiel: Hallo, Hallo, Hallo - sicher, dass das Gehäuse einen Unterschied darin macht, wie einfach es zu lesen ist, aber es ist ein zusätzlicher Faktor.
Fehler

2
Was er sagt ist, dass es nicht gut skaliert. Sicher, die Untermenüs waren kurz, als sie die Site entworfen haben, und sie haben während des Entwicklungsprozesses nur wenige Elemente hinzugefügt - ein Jahr später haben Sie ein horizontales Durcheinander in Ihren Händen.
CinqoTimo
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.