Prós e contras de menus horizontais versus verticais?


11

Há muito tempo me pergunto se deve haver uma preferência pelo uso de menus de navegação horizontal ou vertical. Eu usei os dois antes, em vários sites, e posso ver que cada um tem prós e contras.

Existem dados concretos disponíveis sobre esse assunto? Estou interessado em questões de acessibilidade e usabilidade.

Respostas:


3

Além dos problemas de espaço e da facilidade de digitalização, existem alguns outros fatores que você deve levar em consideração:

Menus organizados horizontalmente (de idiomas organizados horizontalmente) significam mais movimento do mouse para passar de um item para o próximo.

No entanto, será mais fácil ir de um item de menu de nível superior em um menu horizontal para o menu suspenso correspondente do que de um item de menu vertical para o menu flutuante correspondente. O problema da diagonal é bastante ampliado nos menus desdobráveis ​​em comparação com as listas suspensas porque a borda compartilhada é muito menor.

E depois há a questão da velocidade de segmentação. Os menus dispostos verticalmente têm mais "profundidade" do que os menus horizontais. Isso significa que o usuário pode mover o mouse a uma velocidade mais alta em direção ao menu, porque ele possui um buffer maior caso ultrapasse. Obviamente, se o menu horizontal for colocado ao longo da borda superior ou inferior do documento (ou seja, profundidade infinita), esse é um ponto discutível.

No final, acho que é uma lavagem. Escolha o que melhor se adapta ao seu design e otimize a usabilidade a partir daí. Você não deseja usar um menu vertical se isso significa criar uma coluna vazia enorme embaixo dela pelo resto da página. E você não deseja usar um menu horizontal se isso significa que seu layout deve ter 2000 px de largura.


4

Bem, eu sou um desenvolvedor / programador / desenvolvedor de código.

Isso significa que sempre busco algumas informações sobre design antes de responder a essas perguntas. Gosto dos artigos de Jakob Nielsen, porque eles pesquisam antes de postar.

Eu acho que esses links podem ajudar.

Agora minha opinião. O uso de menus horizontais é a primeira opção para a navegação principal, especialmente se você considerar o uso de mega drop downs.

Além disso, o uso de trilhas horizontais, como navegação auxiliar para ajudar os usuários a se localizarem rapidamente.

Gosto de menus de navegação vertical, mas eles tendem a ser parecidos com anúncios, o que torna os usuários cegos para eles. Portanto, verifique se os menus verticais NÃO são como um banner ou anúncios do Google.

Segundo, prefiro usar menus verticais para navegação em "contexto", exibindo conteúdo relacionado ou itens de subseções.


Bom ponto. Acho que a maioria dos sites com navegação em duas camadas (principal e contextual) usa um menu lateral vertical para o último.
Lèse majesté

sim. Jakob Nielsen faz alguma pesquisa sobre esses tipos de problemas ... :)
JoséNunoFerreira

0

Se você tiver itens de menu com uma ou mais palavras, haverá um limite físico para quantas caberão em um menu horizontal antes que uma rolagem seja necessária. Portanto, por esse motivo, tenderia a favorecer o menu horizontal para itens de nível principal / superior.

Em relação à acessibilidade (supondo que seja visualmente correto), pode não haver muita diferença, pois elas podem ser marcadas da mesma forma. Uma lista não ordenada de links, por exemplo.


0

Vou postar o oposto da resposta dos erros ...

Embora lemos da esquerda para a direita, tendemos a digitalizar de cima para baixo. Se os itens de menu estiverem organizados verticalmente, é mais fácil comparar itens rapidamente se estiverem acima um do outro.

Se você tiver apenas alguns links, a horizontal é boa. Mantenha os nomes curtos, mas claros e não tenham mais que 6-7. Obviamente, a outra opção é uma combinação - alguns 'cabeçalhos' horizontalmente com menus suspensos suspensos de tudo nessa categoria.


"tendemos a escanear de cima para baixo" é baseado em que observação ou pesquisa? Se uma observação, por favor, explique. Se pesquisar, cite-o. "é mais fácil comparar itens rapidamente se estiverem acima um do outro." como assim? Os itens devem ser carregados na memória humana para serem comparados, quanto mais rápido eles forem carregados, mais rápido eles poderão ser comparados. A mente humana mantém apenas cerca de 7 itens na memória super de curto prazo, projetar para mais de sete itens é ... bem mais do que os humanos podem lidar; citar: capacidade de memória de trabalho - en.wikipedia.org/wiki/…
blunders

1
@ erros: é baseado em várias coisas que li aqui e ali, mas não pude apontar nenhuma pesquisa específica. Re: comparar itens - verticalmente é muito mais fácil porque você compara da esquerda para a direita ao mesmo tempo. Se você estiver procurando por palavras específicas, poderá digitalizar a primeira letra ou duas de cada uma instantaneamente. Horizontalmente, você deve ler um, depois o outro e processar cada um. Tenho certeza que isso está no site em algum lugar de Jakob Nielsen ...
DisgruntledGoat

0

A resposta é provavelmente que há momentos para usar os dois, mas, na medida em que os estudos de rastreamento ocular mostraram, o olho digitaliza a página em um padrão em forma de F , portanto, provavelmente é melhor manter sua navegação no canto superior esquerdo ou no lado esquerdo. topo.

Ambos também podem ser usados ​​em conjunto, como um menu horizontal na parte superior para links de navegação (home, sobre nós, contato etc.) e um menu à esquerda para categorias, artigos e similares.

Outro ponto a considerar em relação aos menus suspensos é que eles podem ter implicações no SEO. Danny Sullivan, do Search Engine Land, sugere que os menus suspensos podem diluir a autoridade do link, tendo muitos links para todas as páginas e que um menu hierárquico pode passar melhor no suco de links. Além disso, por que ocultar elementos de navegação de seus usuários em um menu suspenso, onde eles podem perder o que estão procurando.


0

IMHO, eu tendem a categorizar seção principal como menus horizontais .. onde seções descritivas de qualquer seção principal ativa no menu vertical.

Por exemplo:

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

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

Como Casa, Notícias e Produto atuam como categorias principais, eu os mantive no layout horizontal, onde Como, Missão, Fale conosco são as seções mais descritivas da Página inicial, por isso mantive como menu vertical ao lado da parte de exibição de conteúdo para facilitar o acesso .


0

Muito simples, você me diz, o que é mais fácil de ler: ABCDEFGHIJKLMNOP...Zou

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

Ao ler, pense em como seus olhos se movem. No primeiro exemplo, é - - - etc. No segundo exemplo, é ZZZ etc; ou seja, seu olho se move em um padrão Z. Com o padrão Z, seu olho precisa pensar mais no próximo ponto de informação do que no primeiro. Quanto mais próxima a informação estiver da última, mais fácil será usar. Quanto mais informações compactas forem melhores, você sempre poderá adicionar espaço, mas algumas informações serão compactadas apenas até agora. Por exemplo, posso adicionar mais espaço assim, mas ainda será mais curto se sua medida for o final mais longo do exemplo 2: ABCDEFGHIJKLMNOPQRSTU VWXYZ

Tenho certeza de que alguém publicará uma pesquisa ou algo assim, pode até dizer que estou errado, mas o fato é que minha lógica é simples o suficiente para que eu entenda, faz sentido para mim e não preciso de um relatório sofisticado para me dizer que está certo ou errado ... porque acho que esse relatório sofisticado não fará sentido e é apenas uma amostra de dados com base na estrutura do teste fornecido ...

Então, o que você acha?


1
Você parece sugerir que a horizontal é sempre melhor? Concordo com este exemplo em particular - itens de menu muito curtos. Mas assim que os itens ficarem prolixo, poderá ficar muito confuso se arrumado horizontalmente.
MrWhite

@ w3d: Verdade, mas esse é um assunto diferente, o que significa que é um fator adicional que não está relacionado à questão central em questão. Há muitos fatores que você pode considerar, mas eles não se relacionariam diretamente com a questão principal em questão. Por exemplo: olá, olá, OLÁ - com certeza a caixa faz a diferença na facilidade de leitura, mas é um fator adicional.
Novidade

2
O que ele está dizendo é que não está bem dimensionado. Certamente, os submenus eram curtos quando criaram o site e acrescentaram apenas alguns itens durante o processo de desenvolvimento - um ano depois, você tem uma bagunça horizontal em suas mãos.
cinqoTimo
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.