¿Pros y contras de los menús horizontales versus los verticales?


11

Hace tiempo que me pregunto si debería preferirse el uso de menús de navegación horizontales o verticales. He usado ambos antes, en varios sitios web, y puedo ver que cada uno tiene ventajas y desventajas.

¿Hay datos concretos disponibles sobre este tema? Estoy interesado en cuestiones de accesibilidad y usabilidad.

Respuestas:


3

Además de los problemas de espacio y la facilidad de escaneo, hay algunos otros factores que debe tener en cuenta:

Los menús dispuestos horizontalmente (de idiomas dispuestos horizontalmente) significan más movimiento del mouse para pasar de un elemento al siguiente.

Sin embargo, será más fácil pasar de un elemento de menú de nivel superior en un menú horizontal a su menú desplegable correspondiente que pasar de un elemento de menú vertical a su menú desplegable correspondiente. El problema diagonal se amplía enormemente en los menús desplegables en comparación con los desplegables porque el borde compartido es mucho más pequeño.

Y luego está el problema de la velocidad de orientación. Los menús dispuestos verticalmente tienen más "profundidad" que los menús horizontales. Eso significa que el usuario puede mover su mouse a una velocidad más alta hacia el menú, porque tienen un buffer más grande en caso de que se sobrepasen. Por supuesto, si su menú horizontal se coloca a lo largo del borde superior o inferior del documento (es decir, profundidad infinita), entonces este es un punto discutible.

Al final, creo que es un lavado. Elija lo que mejor se adapte a su diseño y luego optimice la usabilidad desde allí. No desea utilizar un menú vertical si eso significa crear una gran columna vacía debajo para el resto de la página. Y no desea utilizar un menú horizontal si significa que su diseño debe tener un ancho de 2000 px.


4

Bueno, soy un desarrollador / programador / programador.

Esto significa que siempre busco información sobre el diseño antes de responder tales preguntas. Me gustan los artículos de Jakob Nielsen, porque investigan antes de publicar.

Creo que esos enlaces pueden ayudar.

Ahora mi opinion. El uso de menús horizontales es la primera opción para la navegación principal, especialmente si considera usar mega desplegables.

Además, el uso de migas de pan horizontales, como navegación auxiliar para ayudar a los usuarios a ubicarse rápidamente.

Me gustan los menús de navegación vertical, pero tienden a ser como anuncios, lo que hace que los usuarios no los vean, así que lo primero es asegurarse de que sus menús verticales NO sean como un banner o anuncios de Google.

En segundo lugar, preferiría usar menús verticales para la navegación "contextual", mostrar contenido relacionado o elementos de subsecciones.


Buen punto. Creo que la mayoría de los sitios que tienen navegación de 2 niveles (principal y contextual) usan un menú lateral vertical para este último.
Lèse majesté

si. jakob nielsen investiga un poco sobre este tipo de problemas ... :)
JoséNunoFerreira

0

Si tiene elementos de menú de una o más palabras, entonces hay un límite físico para cuántos caben en un menú horizontal antes de que se requiera un desplazamiento. Entonces, por esta razón, preferiría el menú horizontal para los elementos de nivel principal / superior.

Con respecto a la accesibilidad (suponiendo que esté visualmente bien), puede que no haya mucha diferencia, ya que bien podrían marcarse de la misma manera. Una lista desordenada de enlaces, por ejemplo.


0

Voy a publicar lo contrario de la respuesta de los errores ...

Aunque leemos de izquierda a derecha, tendemos a escanear de arriba a abajo. Si los elementos del menú están dispuestos verticalmente, es más fácil compararlos rápidamente si están uno encima del otro.

Si solo tiene un puñado de enlaces, horizontal está bien. Mantenga los nombres cortos pero claros y no tenga más de 6-7. Por supuesto, la otra opción es una combinación: algunos 'encabezados' horizontalmente con menús desplegables de todo en esa categoría.


"tendemos a escanear de arriba a abajo" se basa en qué observación o investigación? Si una observación, por favor explique. Si la investigación, por favor citarlo. "Es más fácil comparar elementos rápidamente si están uno encima del otro". ¿Cómo es eso? Los elementos deben cargarse en la memoria humana para que puedan compararse, cuanto más rápido se carguen, más rápido se pueden comparar. La mente humana solo contiene alrededor de 7 elementos en la memoria a muy corto plazo, diseñar para más de siete elementos es ... mucho más de lo que los humanos pueden manejar; cita: capacidad de memoria de trabajo - es.wikipedia.org/wiki/…
errores

1
@blunders: se basa en varias cosas que he leído aquí y allá, pero no podría señalarle ninguna investigación específica. Re: comparar elementos: verticalmente es mucho más fácil porque comparas de izquierda a derecha al mismo tiempo. Si está buscando palabras específicas, puede escanear la primera letra o dos de cada una al instante. Horizontalmente, debe leer uno, luego el otro, y procesar cada uno. Estoy seguro de que esto está en el sitio web de Jakob Nielsen en algún lugar ...
DisgruntledGoat

0

La respuesta es probablemente que hay momentos para usar ambos, pero en lo que se ha demostrado en estudios de seguimiento ocular, el ojo escanea la página en un patrón en forma de F , por lo que probablemente sea mejor mantener su navegación en la parte superior izquierda o en parte superior.

Ambos podrían usarse en conjunto, como un menú horizontal en la parte superior para enlaces de navegación (inicio, sobre nosotros, contacto, etc.) y un menú izquierdo para categorías, artículos y similares.

Otro punto a considerar con respecto a los menús desplegables es que pueden tener implicaciones de SEO. Danny Sullivan de Search Engine Land sugiere que los menús desplegables pueden diluir la autoridad de enlace al tener muchos enlaces a cada página y que un menú jerárquico puede pasar mejor el enlace. Además, ¿por qué esconder los elementos de navegación de sus usuarios en un menú desplegable donde pueden perder lo que están buscando?


0

En mi humilde opinión, tiendo a clasificar la sección principal como menús horizontales ... donde como secciones descriptivas de cualquier sección principal activa en el menú vertical.

Por ejemplo:

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

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

Como Home, News y Product actúan como categorías principales, las he mantenido en un diseño horizontal, donde About Us, Mission, Contact son las secciones más descriptivas de la página de inicio, por lo que he mantenido como menú vertical al lado de la parte de visualización de contenido para facilitar el acceso .


0

Bastante simple, me dices, qué es más fácil de leer: ABCDEFGHIJKLMNOP...Zo

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

Cuando lo estés leyendo, piensa en cómo se mueve tu ojo. Con el primer ejemplo, es - - - etc. Con el segundo ejemplo, es ZZZ, etc. lo que significa que tu ojo se mueve en un patrón Z. Con el patrón Z, su ojo tiene que pensar más en el siguiente punto de información que en el primero. Cuanto más cerca esté una información de la última información, más fácil será usarla. La información más compacta es mejor, siempre puede agregar espacio, pero cierta información solo se compactará hasta ahora. Por ejemplo, puedo agregar más espacio como este, pero aún es más corto si mide el extremo más largo del ejemplo 2: ABCDEFGHIJKLMNOPQRSTU VWXYZ

Estoy seguro de que alguien publicará una investigación o algo, incluso podría decir que estoy equivocado, pero el hecho es que mi lógica es lo suficientemente simple como para entenderlo, tiene sentido para mí, y no necesito un informe elegante para decirme que está bien o mal ... porque supongo que un informe elegante no tendrá sentido, y es solo una muestra de datos basada en la estructura de la prueba dada ...

¿Entonces, qué piensas?


1
¿Parece implicar que la horizontal siempre es mejor? Estoy de acuerdo con este ejemplo en particular: elementos de menú muy cortos. Pero tan pronto como los artículos se vuelvan vergonzosos, podría ponerse muy desordenado si se colocan horizontalmente.
MrWhite

@ w3d: Cierto, pero ese es un tema diferente, lo que significa que es un factor adicional que no está relacionado con el tema central en cuestión. Hay muchos factores que podría incluir, pero no se relacionarían directamente con la materia central en cuestión. Por ejemplo: hola, hola, hola: asegúrate de que la carcasa marque la diferencia en lo fácil que es leer, pero es un factor adicional.
errores

2
Lo que está diciendo es que no escala bien. Claro, los submenús eran cortos cuando diseñaron el sitio, y solo agregaron algunos elementos durante el proceso de desarrollo; un año después, tienes un desorden horizontal en tus manos.
cinqoTimo
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.