Los problemas del menú lateral de Android y el "icono hamburguesa"

Ya hemos hablado en muchas ocasiones de Material Design y los cambios en diseño que Google ha traído consigo bajo su nueva filosofía de dar una sensación material a todo.

Pero también debemos plantearnos si esta guía de diseño es la que producirá la mejor experiencia de usuario o no, así como analizar sus posibles defectos o carencias.

Menú e icono hamburguesa, estructura de navegación lateral

Hoy vamos a analizar uno de los elementos que más vemos aparecer en todas las aplicaciones de Google y que ponen como ejemplo de estructura para una aplicación: el icono de la hamburguesa.

Este icono consiste en tres rayitas que veremos en la esquina superior izquierda, el cual nos permitirá abrir un panel de navegación por la izquierda. Este panel lo utilizaremos para mostrar las preferencias de nuestra aplicación, así como la cuenta con la que usemos la aplicación en caso de que haya gestión de cuentas. Este panel deslizante será un Navigation Drawer, un patrón muy usado por Google, el cual pretenden extender todo lo posible.

El icono de la hamburguesa y sus problemas de diseño

Hasta aquí todo parecía perfecto, pero no iba a ser así, pues este patrón presenta una serie de problemas de diseño:

• Baja visibilidad: Este es uno de los principales problemas, pues toda esta información crucial que vamos a mostrar en el panel lateral, por defecto va a estar oculta, por lo que le usuario deberá estar acostumbrado a este patrón de uso.
• Baja eficiencia: Además, el tener que dar un primer paso para ver las opciones antes de elegir la que queremos, produce que el proceso por ejemplo para ir a una preferencia de aplicación específica requiera más interacción por parte del usuario de la indicada (primero para mostrar el contenido del panel lateral y luego para elegir).

• Choque con patrones de navegación propios de la plataforma: En este caso, puesto que Google ha trabajado pensando en ello, no se nos presenta tanto. Pero en el caso de iOS, la barra superior puede quedar bastante mal gestionada. Por ello, este patrón en ocasiones puede ir en contra de la propia natura de la plataforma en la que corra.

• No es llamativo visualmente: Es cierto que por ejemplo, la opción de usar pestañas puede ser más llamativa para el usuario. Aunque eso no quita que también debamos pensar en cuánto espacio de la pantalla queremos emplear en esto y no en la información en sí misma.

Buscando la solución ideal

Todo esto nos lleva a volver a pensar en si estamos aplicando la mejor interacción hombre máquina posible. Hay  que decir es que aquí nadie posee la verdad absoluta, pero sí que podemos ver opiniones más lógicas y conseguidas que otras. Pero en este caso, vamos a analizar la opinión de un diseñador que trabaja en Reino Unido: Luis Abreu.

En primer lugar, podríamos pensar en qué ocasiones son ideales para mostrar este patrón. Para Luis, de partida este patrón siempre debería ser evitado, cosa que difiere totalmente de la opinión de Google. Aunque, a pesar de ello, piensa que hay una serie de situaciones que harían que tuviera más sentido este patrón, como por ejemplo las aplicaciones que no tienen pantallas hijo sobre la principal (y su navegabilidad es bastante simple, por tanto). Veamos un ejemplo:

Pero para Luis, estas soluciones nos limitan a la hora de incluir acciones basadas en contexto, pues el panel lateral no tendrá contexto más que la aplicación en sí. Tal es así, que en muchos casos una alternativa es sustituir los diferentes elementos que quisiéramos incluir en el Navigation Drawer en pestañas (ya sea arriba o abajo), para Luis mucho más intuitivas, aunque a cambio estemos perdiendo más pantalla.

Además, este diseñador opina que el hecho de usar pestañas, nos permite incluir estados instantáneos de ver, como por ejemplo podríamos ver en aplicaciones como Twitter.

¿Pero qué ocurriría cuando son muchas secciones? ¿Ponemos un botón con la opción más para desplegar el resto de acciones? ¿Permitimos deslizarnos por la barra de pestañas? ¿Acaso esta segunda opción no vuelve a uno de los problemas iniciales: la información oculta?

Conclusiones

Como podéis observar, no hay un patrón perfecto. Simplemente se trata de los diferentes criterios que cada diseñador tiene. El caso del icono de la hamburguesa es un ejemplo ideal, donde podemos ver que Google ha apostado por él frente a Apple que prefiere el sistema de pestañas, sistema que Luis prefiere.

Pero lo único importante de todo esto es que el usuario final perciba la aplicación como intuitiva y sencilla de utilizar, así que aquí quien tiene que opinar son los actores más importantes de todos: vosotros. ¿Qué patrón os gusta más?

Más información Material Design | lmjabreu