Diseño de materiales y el misterioso problema de navegación de la carne

En marzo de 2016, Google actualizó Material Design para agregar barras de navegación inferiores a su biblioteca de interfaz de usuario. Esta nueva barra está ubicada en la parte inferior de una aplicación y contiene de 3 a 5 iconos que permiten a los usuarios navegar entre las vistas de nivel superior en una aplicación.

¿Suena familiar? Eso es porque las barras de navegación inferiores han sido parte de la biblioteca de la interfaz de usuario de iOS durante años (se llaman barras de pestañas en iOS).

Las barras de navegación inferiores son una mejor alternativa al menú de hamburguesas, por lo que su incorporación a Material Design debería ser una buena noticia. Pero la versión de Google de las barras de navegación inferiores tiene un problema grave: la navegación misteriosa .

Si es un usuario, diseñador o desarrollador de Android, esto debería preocuparle.

¿Qué es la navegación misteriosa por la carne y por qué es tan mala?

La navegación de la carne misteriosa es un término acuñado en 1998 por Vincent Flanders del famoso sitio web Web Pages That Suck. Se refiere a botones o enlaces que no le explican lo que hacen. En su lugar, debe hacer clic en ellos para averiguarlo.

(El término "carne misteriosa" se origina en la carne que se sirve en las cafeterías de las escuelas públicas estadounidenses que estaban tan procesadas que el tipo de animal del que provenían ya no es discernible).

La navegación misteriosa por la carne es el sello distintivo de los diseños que priorizan la forma sobre la función. Es un mal diseño de UX, porque enfatiza la estética a costa de la experiencia del usuario. Agrega carga cognitiva a las tareas de navegación, ya que los usuarios tienen que adivinar qué hace el botón. Y si sus usuarios necesitan adivinar, lo está haciendo mal.

No querrá comer carne misteriosa; de manera similar, los usuarios no querrán hacer clic en botones misteriosos.

Strike 1: barra de navegación de Android Lollipop

El primer problema importante de navegación de carne misteriosa de Material Design ocurrió en 2014 con Android Lollipop.

Android Lollipop se presentó en la misma conferencia que debutó con Material Design, y tiene una interfaz de usuario rediseñada para que coincida con el nuevo lenguaje de diseño de Google.

Uno de los elementos de la interfaz de usuario que se rediseñó fue la barra de navegación, la barra persistente en la parte inferior del sistema operativo Android que proporciona control de navegación para teléfonos sin botones de hardware para Atrás, Inicio y Menú.

En Android Lollipop, la barra de navegación se rediseñó para esto:

¿Ves el problema?

Si bien el diseño anterior es menos atractivo estéticamente, es más o menos sencillo. Los iconos Atrás e Inicio se pueden entender sin necesidad de etiquetas de texto. El tercer ícono es un poco misterioso, pero en general, la UX de la antigua barra de navegación no estaba tan mal.

La nueva barra, por otro lado, es extremadamente bonita. El triángulo, el círculo y el cuadrado equiláteros son símbolos de perfección geométrica. Pero también es extremadamente hostil para el usuario. Es abstracto y los controles de navegación nunca deben ser abstractos. Es una navegación de carne misteriosa en toda regla.

El icono de triángulo puede parecerse a una flecha "Atrás", pero ¿qué significan un círculo y un cuadrado en relación con el control de navegación?

Strike 2: Botones de acción flotantes

Los botones de acción flotantes son botones especiales que aparecen encima de otros elementos de la interfaz de usuario en una aplicación. Idealmente, se utilizan para promover la acción principal de la aplicación.

Los botones de acción flotantes también sufren el misterioso problema de navegación de la carne. Por diseño, el botón de acción flotante es un círculo que contiene un icono. Es un botón de ícono puro, sin espacio para etiquetas de texto.

La verdad es que los iconos son increíblemente difíciles de entender porque están muy abiertos a la interpretación. Nuestra cultura y experiencias pasadas informan cómo interpretamos los iconos. Desafortunadamente, los diseñadores (especialmente, al parecer, los diseñadores de materiales) tienen dificultades para enfrentar esta verdad.

¿Necesita pruebas de que los botones que solo contienen iconos son una mala idea? Juguemos a un juego de adivinanzas.

A continuación se muestra una lista de qué, según las pautas de Material Design, son iconos aceptables para botones de acción flotantes. ¿Puedes adivinar lo que hace cada botón?

Ok, eso es simple para calentarte. Representa "Direcciones".

¿Qué pasa con esto? Si es un usuario de iOS o Mac, puede decir "Safari". En realidad, representa "Explorar".

¡Las cosas se están poniendo divertidas (o frustrantes) ahora! ¿Podría ser "Abrir en contactos"? "Ayuda, hay alguien siguiéndome"? Quizás este sea un botón para su línea de vida "Llamar a un amigo".

Espera, este es el botón para "Abrir en contactos". ¿Correcto? ¿O se trata de un "chisme sobre un amigo", ya que la persona está dentro de un bocadillo?

¿Listo para la ronda final? Aquí está el icono peor (y más utilizado):

Puede pensar que el botón "+" es bastante sencillo de entender; obviamente, es un botón para la acción "Agregar". ¿Pero agregar qué ?

Agregue qué: ese es el problema allí mismo. Si un usuario necesita hacer esa pregunta, su botón es oficialmente carne misteriosa. Lamentablemente, los desarrolladores y diseñadores de aplicaciones de Material Design parecen estar enamorados del botón de acción flotante "+".

Precisamente porque el botón "+" parece tan fácil de entender, termina siendo el icono más abusado para los botones de acción flotantes. Considere cómo la propia aplicación Inbox de Google muestra botones adicionales cuando toca el botón flotante "+", que no es lo que un usuario esperaría:

Lo que empeora las cosas es que los mismos iconos tienen diferentes significados en diferentes aplicaciones. Google usó el ícono de lápiz para representar "Redactar" en la Bandeja de entrada y Gmail, pero lo usó para representar "Editar" en su aplicación de fotos Snapseed.

El botón de acción flotante estaba destinado a ser una excelente manera para que los usuarios accedan a una acción principal. Excepto que no lo es, porque los botones de solo íconos tienden a ser carne misteriosa.

Más sobre los botones de acción flotantes:

Diseño de materiales:

Por qué el botón de acción flotante tiene un mal diseño de UX

Material Design es un lenguaje de diseño introducido por Google hace un año y representa el audaz intento de la empresa de ... medium.com

Strike 3: la nueva barra de navegación inferior

Esto nos lleva a la barra de navegación inferior, presentada en marzo de 2016.

Para las barras de navegación inferiores con 3 vistas, las pautas de Google especifican que se deben mostrar tanto los iconos como las etiquetas de texto. Hasta ahora, todo bien: aquí no hay carne misteriosa.

Pero para las barras de navegación inferiores con 4 o 5 vistas, Google especifica que las vistas inactivas se muestren solo como iconos .

¿Recuerda lo difícil que fue adivinar qué significan los iconos de los botones de acción flotantes? Ahora intente adivinar una fila de iconos utilizados para navegar por una aplicación.

Esto es simplemente un mal diseño de UX. De hecho, Nielsen Norman Group sostiene que los iconos necesitan una etiqueta de texto, especialmente los iconos de navegación (el énfasis es de ellos):

"Para ayudar a superar la ambigüedad que enfrentan casi todos los íconos, una etiqueta de texto debe estar presente junto con un ícono para aclarar su significado en ese contexto particular ... Para los íconos de navegación, las etiquetas son particularmente críticas".

Que el componente de interfaz de usuario más nuevo de Material Design apruebe la navegación misteriosa no solo es frustrante, sino también extraño. ¿Por qué deberían mostrarse las etiquetas de texto cuando hay 3 vistas, pero ocultarse cuando hay 4 o 5 vistas?

Una respuesta obvia serían las limitaciones de espacio.

Excepto que las barras de pestañas en iOS logran contener 5 íconos y aún muestran el ícono y la etiqueta de texto para cada uno de ellos. Entonces, la restricción de espacio no es una razón válida.

Google decidió que los íconos pueden representar suficientemente las acciones de navegación (lo cual es malo), o decidió que la pulcritud estética es más importante que la usabilidad (que es peor). De cualquier manera, su decisión empeoró la experiencia de usuario de millones de usuarios de Android.

Diseño de materiales y forma sobre función

Cuando se lanzó Material Design en 2014, hubo mucha fanfarria. Es atrevido y sigue (y supera) la tendencia del diseño plano. La combinación de colores vibrantes y animaciones lo hace bonito a la vista.

Pero quizás sea un poco demasiado bonito. Quizás mientras trabajaban en Material Design, los diseñadores se dejaron llevar un poco.

Una y otra vez, las pautas de Google para botones y barras importantes parecen priorizar la forma sobre la función. La belleza geométrica se eligió sobre la reconocibilidad en la barra de navegación de Android. La simplicidad estética fue defendida en botones de acción flotantes, convirtiéndolos en acertijos en el proceso. Finalmente, la pulcritud visual se consideró más importante que las etiquetas significativas en las barras de navegación inferiores.

Eso no quiere decir que la navegación misteriosa de la carne sea un problema exclusivo de Google. Claro, también puedes encontrar carne misteriosa en las aplicaciones de iOS. Pero no suelen aparecer en controles de navegación críticos y botones promocionados. Tampoco se detallan específicamente en las pautas de diseño para ser carne misteriosa.

Si los diseñadores de Google pudieran dedicar tiempo y esfuerzo a la creación de gráficos de velocidad para animaciones, tal vez podrían dedicar un poco de tiempo a asegurarse de que sus diseños no sean carne misteriosa.

Después de todo, un botón misterioso animado es aún menos agradable que un botón estático pero claramente etiquetado.