Plusy i minusy menu poziomego czy pionowego?

11

Od dawna zastanawiałem się, czy należy preferować korzystanie z menu nawigacji poziomej, czy pionowej. Używałem obu wcześniej, na różnych stronach internetowych i widzę, że każda ma zalety i wady.

Czy są dostępne jakieś konkretne dane na ten temat? Jestem zainteresowany kwestiami związanymi z dostępnością i użytecznością.

Grant Palin
źródło

Odpowiedzi:

3

Oprócz problemów z przestrzenią i łatwości skanowania, należy wziąć pod uwagę kilka innych czynników:

Poziomo ułożone menu (języków ułożonych poziomo) oznacza więcej ruchów myszy, aby przejść od jednego elementu do drugiego.

Łatwiej będzie jednak przejść z pozycji menu najwyższego poziomu w menu poziomym do odpowiedniego menu rozwijanego niż z pozycji menu pionowego do odpowiedniego menu wysuwanego. Problem z przekątną jest znacznie powiększony w menu rozwijanym w porównaniu do menu rozwijanych, ponieważ wspólna krawędź jest znacznie mniejsza.

A potem jest kwestia prędkości celowania. Menu ułożone pionowo mają większą „głębokość” niż menu poziome. Oznacza to, że użytkownik może poruszać myszą z większą prędkością w kierunku menu, ponieważ ma większy bufor na wypadek przeregulowania. Oczywiście, jeśli menu poziome jest umieszczone wzdłuż górnej lub dolnej krawędzi dokumentu (tj. Nieskończonej głębokości), jest to kwestia sporna.

W końcu myślę, że to pranie. Wybierz wszystko, co najlepiej pasuje do Twojego projektu, a następnie zoptymalizuj użyteczność. Nie chcesz używać menu pionowego, jeśli oznacza to utworzenie ogromnej pustej kolumny pod nim dla reszty strony. Nie chcesz używać menu poziomego, jeśli oznacza to, że Twój układ musi mieć szerokość 2000 pikseli.

Lèse majesté
źródło
4

Cóż, jestem programistą / programistą / facetem od programowania.

Oznacza to, że zawsze szukam informacji o projektowaniu, zanim odpowiem na takie pytania. Lubię artykuły Jakoba Nielsena, ponieważ szukają informacji przed opublikowaniem.

Myślę, że te linki mogą pomóc.

Teraz moja opinia. Korzystanie z menu poziomych jest pierwszą opcją dla nawigacji głównej, zwłaszcza jeśli rozważasz użycie mega rozwijanych menu.

Ponadto zastosowanie poziomej bułki tartej jako pomocniczej nawigacji ułatwiającej użytkownikom szybką lokalizację.

Lubię pionowe menu nawigacyjne, ale zazwyczaj są one podobne do reklam, co sprawia, że ​​użytkownicy są dla nich ślepi, więc po pierwsze, upewnij się, że twoje pionowe menu NIE są jak baner lub reklamy Google.

Po drugie, wolę używać pionowych menu do nawigacji „kontekstowej”, wyświetlania powiązanych treści lub elementów podsekcji.

Dave
źródło
Słuszna uwaga. Myślę, że większość witryn z nawigacją dwupoziomową (główną i kontekstową) korzysta z menu bocznego w pionie.
Lèse majesté
tak. Jakob Nielsen robi jakieś badania nad tego rodzaju problemów ... :)
JoséNunoFerreira
0

Jeśli masz pozycje menu zawierające co najmniej jedno słowo, istnieje fizyczny limit liczby pasujących do poziomego menu przed przewinięciem. Dlatego z tego powodu wolę menu horyzontalne dla pozycji głównego / najwyższego poziomu.

Jeśli chodzi o dostępność (zakładając, że jest to wizualnie OK), może nie być dużej różnicy, ponieważ można je oznaczyć tak samo. Na przykład nieuporządkowana lista linków.

MrWhite
źródło
0

Zamierzam zamieścić odpowiedź przeciwną do błędów ...

Chociaż czytamy od lewej do prawej, zwykle skanujemy od góry do dołu. Jeśli elementy menu są ustawione pionowo, łatwiej jest szybko porównywać elementy, jeśli są nad sobą.

Jeśli masz tylko kilka linków, pozioma jest w porządku. Nazwy powinny być krótkie, ale jasne i mieć nie więcej niż 6-7. Oczywiście drugą opcją jest kombinacja - kilka „nagłówków” poziomo z rozwijanymi listami przewijania wszystkiego w tej kategorii.

DisgruntledGoat
źródło
„mamy tendencję do skanowania od góry do dołu” opiera się na jakiej obserwacji lub badaniach? W przypadku obserwacji proszę wyjaśnić. Jeśli badania, proszę to zacytować. „łatwiej jest szybko porównywać przedmioty, jeśli są nad sobą”. jak to? Przedmioty muszą być ładowane do ludzkiej pamięci, aby mogły być porównywane, im szybciej są ładowane, tym szybciej można je porównywać. Ludzki umysł trzyma w pamięci krótkoterminowej tylko około 7 przedmiotów, projektowanie dla więcej niż siedmiu przedmiotów jest ... znacznie więcej niż ludzie są w stanie znieść; cytuj: pojemność pamięci roboczej - en.wikipedia.org/wiki/…
blunders
1
@blunders: opiera się na różnych rzeczach, które czytałem tu i tam, ale nie mogłem wskazać żadnych konkretnych badań. Re: porównywanie przedmiotów - w pionie jest znacznie łatwiejsze, ponieważ porównujesz od lewej do prawej w tym samym czasie. Jeśli szukasz określonych słów, możesz natychmiast zeskanować pierwszą literę lub dwie z każdej z nich. W poziomie musisz przeczytać jeden, a następnie drugi i przetworzyć każdy z nich. Jestem pewien, że jest to gdzieś na stronie Jakoba Nielsena ...
DisgruntledGoat
0

Odpowiedź jest prawdopodobnie taka, że ​​są czasy, aby użyć obu, ale tak dalece, jak wykazały badania śledzenia wzroku, oko skanuje stronę w kształcie litery F , więc prawdopodobnie najlepiej jest trzymać nawigację w lewym górnym rogu lub w poprzek Top.

Oba mogą być również używane łącznie, np. Horyzontalne menu u góry dla linków nawigacyjnych (strona główna, o nas, kontaktach itp.) Oraz lewe menu dla kategorii, artykułów i tym podobne.

Inną kwestią do rozważenia dotyczącą menu rozwijanych jest to, że mogą mieć wpływ na SEO. Danny Sullivan z Search Engine Land sugeruje, że rozwijane menu mogą osłabić autorytet linkowania poprzez posiadanie wielu linków do każdej strony oraz że menu hierarchiczne może lepiej przekazywać sok z linków. Ponadto, dlaczego ukrywa elementy nawigacyjne przed użytkownikami w menu rozwijanym, w którym mogą przegapić to, czego szukają.

plntxt
źródło
0

IMHO, mam tendencję do klasyfikowania głównej sekcji jako Poziome menu .. gdzie jako opisowe sekcje dowolnej aktywnej głównej sekcji w pionowym menu.

Na przykład:

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

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

Ponieważ Strona główna, Nowości i Produkt działają jako główne kategorie, trzymałem je w układzie poziomym, gdzie jako O nas, Misja, Kontakt to najbardziej opisowe sekcje strony głównej, dlatego zachowałem jako pionowe menu obok części wyświetlania zawartości dla łatwego dostępu .

Starx
źródło
0

Dość proste, mówisz mi, co jest łatwiejsze do odczytania: ABCDEFGHIJKLMNOP...Zlub

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

Kiedy to czytasz, pomyśl o tym, jak porusza się twoje oko. W pierwszym przykładzie jest to - - - itd. W drugim przykładzie jest to ZZZ itp .; co oznacza, że ​​twoje oko porusza się w układzie Z. Dzięki wzorowi Z twoje oko musi myśleć bardziej o następnym punkcie informacji niż o pierwszym. Im bliżej informacji jest ostatnia informacja, tym łatwiej jest z niej korzystać. Im bardziej zwarta informacja, tym lepiej, zawsze można dodać miejsce, ale niektóre informacje będą do tej pory tylko zwarte. Na przykład mogę dodać więcej miejsca w ten sposób, ale nadal jest on krótszy, jeśli zmierzysz najdłuższy koniec do przykładu 2: ABCDEFGHIJKLMNOPQRSTU VWXYZ

Jestem pewien, że ktoś opublikuje badania lub coś takiego, może nawet powiedzieć, że się mylę, ale faktem jest, że moja logika jest na tyle prosta, że ​​ją rozumiem, ma dla mnie sens i nie potrzebuję wymyślnego raportu, aby mi powiedzieć że jest słuszne, czy złe ... ponieważ zgaduję, że ten wymyślny raport nie będzie miał sensu i jest tylko próbką danych opartych na strukturze danego testu ...

Więc co o tym myślisz?

błędy
źródło
1
Wydajesz się sugerować, że pozioma jest zawsze lepsza? Zgadzam się na ten konkretny przykład - bardzo krótkie pozycje menu. Ale gdy tylko przedmioty się zepsują, może stać się bardzo nieuporządkowany, jeśli zostaną ułożone poziomo.
MrWhite
@ w3d: To prawda, ale to inny temat, co oznacza, że ​​jest to dodatkowy czynnik, który nie jest związany z podstawową materią. Istnieje wiele czynników, które możesz wrzucić, ale nie odnoszą się one bezpośrednio do podstawowej materii. Na przykład: witaj, witaj, CZEŚĆ - na pewno obudowa ma wpływ na to, jak łatwo ją odczytać, ale jest to dodatkowy czynnik.
wpadki
2
Mówi, że nie skaluje się dobrze. Oczywiście, podmenu były krótkie, kiedy zaprojektowali witrynę, i dodali tylko kilka elementów podczas procesu rozwoju - rok później masz na rękach bałagan poziomy.
cinqoTimo,