it-swarm-es.com

¿Deberíamos usar el ícono 3x3 de 9 puntos como menú de aplicaciones?

A medida que la web continúa evolucionando y surgen aplicaciones más complejas, es necesario permitir que el usuario navegue rápidamente entre las aplicaciones. Esta acción es diferente del menú de navegación que vemos dentro de las aplicaciones, el controvertido icono del menú de hamburguesas que se ha convertido en una convención para la navegación global en pantallas más pequeñas. Aquí estamos viendo la navegación entre aplicaciones.

enter image description here

Google usa este para permitir a los usuarios navegar entre las aplicaciones Google Maps, Google Play, Google Drive y muchas otras aplicaciones de Google.

enter image description here

Microsoft también usa este para permitir a sus usuarios navegar entre las aplicaciones OneDrive, Word Online, Sway y otras aplicaciones de Microsoft.

enter image description here

Pero hay otras formas de transmitir el mismo mensaje. Algunos usan el ícono 4x4 de 16 puntos, y otros 4 puntos que parece una extensión del menú de 3 puntos más. La pregunta es si el ícono del menú de aplicaciones de 3 puntos de 3 puntos es el que se debe usar, ya que parece que los jugadores más grandes usan este ícono como su metáfora para cambiar entre aplicaciones.

enter image description here

Nota: Esta pregunta no se trata del menú de hamburguesas. Se trata del uso de un menú de aplicaciones.

42
Benny Skogberg

BURGER VS GRID - ¿contexto igual o diferente?

Creo que la hamburguesa y la parrilla generalmente tienen diferentes significados, aunque todavía no están formalizados en ningún lado (al menos, no es ampliamente conocido como los estándares ISO o W3).

El menú de hamburguesas generalmente trata más sobre la navegación de contenido dentro de un contexto. Estás en un sitio web y navegas a diferentes subsecciones de la página. Mismo sitio, diferentes textos/imágenes. O está en una aplicación y desea cargar/guardar un archivo; sigue siendo la misma aplicación con la que estás trabajando.

Pero el menú de cuadrícula se trata de cambiar su contexto. No solo está cambiando el contenido, está abriendo una aplicación, una interfaz y un tipo de interacción completamente nuevos. En las imágenes que ha proporcionado, se vincula a otras aplicaciones en la misma suite, y en el menú Android) va del sistema operativo a la aplicación.

La división de listas vs cuadrículas aún no es universal ( por ejemplo, Android share ), pero he notado un cierto desequilibrio en el diseño que se utiliza donde, y creo que los íconos deberían ser compatibles con eso. Por supuesto, en Android compartir el ícono <es más representativo de la acción tan = o #, pero se entiende la idea.


Iconos 3X3 vs 4X4

Los usuarios interpretan los íconos 3x3 y 4x4 de manera similar, pero el ícono azul es considerablemente diferente y se lee como 'pantalla de inicio' basado en ios.

Una cuadrícula de 3x3 tiene algunos beneficios sobre 4x4; es más simple, se puede hacer más pequeño y se ajusta mejor a los tamaños de gráficos/íconos (8x8px frente a al menos 18x18): 3x3 grid vs 4x4 gridy mantiene la 'trinidad' de la hamburguesa, por lo que es un poco más consistente con las interfaces de todos los mundos. Entonces, por defecto, yo diría que use 3x3.

Sin embargo, si su menú usa 4 columnas o filas de elementos (4x5, 6x4, etc.) como el valor predeterminado Android cajón de aplicaciones, entonces tiene una buena razón para usar una cuadrícula 4x4 como más se parece mucho al menú real.

Pero personalmente, eso es todo lo que podría llegar (así que no hay 5x5,6x6, etc.)

18
PixelSnader

Editar

La gente debería leer este artículo sobre el menú de hamburguesas. El menú de hamburguesas funciona, aunque a menudo hay mejores soluciones. Las grandes compañías como Facebook y NBC han descubierto que eso es cierto y han cambiado de burger navicon a una TAB BAR , una barra de pestañas con iconos + palabras parece dar las mejores tasas de conversión. Las navegaciones complejas se pueden anidar.

Versión larga:

Analicemos el ícono 3x3 de 9 puntos y el ícono de hamburguesa (navicons) simultáneamente porque ambas son las técnicas más controvertidas en la Web en este momento. Los íconos son implementaciones de diseño móvil y, por lo tanto, fácilmente escalables, nos ahorran un montón de espacio en la pantalla e implican uniformidad. Son reconocidos por la mayoría de los usuarios de la web. (¡El ícono tiene más de 30 años!). Hasta aquí todo bien.

Burger icon 1981

PERO

  • Las pruebas de usabilidad no han sido concluyentes

    Los diseñadores argumentan que los iconos son fácilmente reconocidos por un grupo demográfico más joven, otros sugieren que un grupo demográfico más antiguo lo reconoce, pero solo si sabe leer y escribir en la web. Las pruebas paralelas a menudo arrojan resultados contradictorios.

  • Más clics. Ew. Se acepta que los usuarios no reconocen los iconos como un enlace único, probablemente porque está diseñado para parecerse a un grupo de enlaces. El icono de hamburguesa agrega una acción adicional a su navegación; cuando debería tomar un clic para llegar a una página en particular, ahora tomará dos. * Sugerencia: rodear los iconos con un borde o darle un fondo para que se parezca más a un botón (skeuomorphic) generará más clics.

Lo mejor es incluir Word 'menú'.

Burger menu variation conversion rates

Morten Rand-Hendriksen dice que deberíamos reemplazar la hamburguesa con texto. Esto generará más clics, sí, pero no resuelve el problema. Además, no use otros íconos (como un Paperclip , ew).

  • Ocultar contenido . Desde el punto de vista de UX, los usuarios no deberían tener que realizar una acción para averiguar qué acciones pueden tomar. Los usuarios simplemente no buscarán un enlace que no saben que existe.

TL; DR.

NO.

"Quieres un sitio" normal ", pero apretado en el teléfono de tu nieta"

Los íconos son un síntoma de nuestro fracaso colectivo para adoptar de todo corazón todos los aspectos del enfoque de dispositivos móviles primero.

Una solución

OP se refiere a 'jugadores más grandes', echemos un vistazo a cómo Facebook resolvió este problema.

  • La aplicación de Facebook cambió su famoso icono de hamburguesa por una barra de pestañas , y como resultado vio mejores conversiones.
  • La aplicación Messenger. Si. ¿Entonces? El gran problema es que ya tenían una aplicación perfectamente funcional y popular con la que podrían haber integrado la mensajería. Facebook ha compartimentado sus funciones, al enfocar el rol de cada aplicación que han llegado a dos aplicaciones simples, en lugar de una compleja.

La funcionalidad de compartimentación da como resultado un conjunto reducido de opciones de menú y menos necesidad de un menú de navegación.

Así que básicamente deberías simplificar y compartimentar.

Nota: La realidad es que la mejor solución dependerá de las necesidades del negocio.

14
RobSeg

Las imágenes mismas te dicen qué formato tendrá el menú. En estos casos, el diseño de cuadrícula que es común entre las aplicaciones web hoy en día, en el caso de tres líneas, generalmente es un menú con un estilo de lista de algún tipo. Creo que 4 puntos es definitivamente exagerado, puedes expresar el punto con 3.

Tiene poco que ver con el contenido y más con el diseño.

4
insidesin

Creo que este ícono en particular se conoce como "Ícono del cajón de la aplicación" Si no me equivoco, la tendencia comenzó con el icono del cajón de aplicaciones que actúa como iniciador de aplicaciones en Android y Blackberry, particularmente en teléfonos móviles Nexus y Samsung (en los primeros días) Desde entonces, se ha adoptado como un icono de iniciador para una lista de aplicaciones.

Editar (según mis comentarios y otras sugerencias) - Creo que uno de los fundamentos de la usabilidad de los iconos es que la comprensión de un icono por parte del usuario se basa en experiencia. Con los años, el icono del cajón de aplicaciones se ha vuelto más reconocible como iniciador de aplicaciones. Sin embargo, aún haría una prueba de reconocimiento. Y si es posible, incluya una etiqueta de texto con él.

3
Adit Gupta

Lo evitaría ... por ahora

Porque...

  • El icono de la cuadrícula es tan poco comunicativo como el icono de hamburguesa. La hamburguesa comunica vagamente una lista de menú, así como la cuadrícula comunica vagamente una matriz de iconos. En términos de diseño comunicativo, ambos son problemáticos porque suponen que el usuario conoce el diseño de la interfaz de usuario del menú subyacente y puede relacionarlo correctamente con el diseño del icono.

  • Debido a estos problemas de comunicación, ahora depende de convención y universalidad/ubicuidad como el vehículo principal para transmitir el propósito del icono. Pero el icono no es lo suficientemente universal hoy en día, por lo que la convención aún no es un medio confiable para garantizar que los usuarios entiendan lo que significa el icono.

Esto puede cambiar con el tiempo a medida que se amplíe el uso del icono de la cuadrícula, pero solo el tiempo puede decirlo. Por ahora, no veo ninguna diferencia sustancial entre los pros/contras de la cuadrícula versus los pros/contras bien documentados del icono de hamburguesa.

2
tohster