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

En marzo de 2016, Google actualizó Material Design para agregar barras de navegación inferiores a su biblioteca de IU. Esta nueva barra se encuentra 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? Esto se debe a que las barras de navegación inferiores han sido parte de la biblioteca de IU de iOS durante años (se llaman barras de pestañas en iOS).

Izquierda: barra de navegación inferior de Diseño de materiales | Derecha: barra de pestañas de iOS

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

Tanto si eres un usuario, diseñador o desarrollador de Android, esto debería preocuparte.

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

Mystery meat navigation es un término acuñado en 1998 por Vincent Flanders del famoso sitio web Páginas web que apestan. 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 fueron procesadas de manera que el tipo de animal del que proceden ya no es perceptible).

Un ejemplo de misteriosa navegación de carne | Fuente

Mystery Meat Navigation 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ía comer carne misteriosa; de manera similar, los usuarios no querrían hacer clic en los botones misteriosos.

Strike 1: la barra de navegación de Android Lollipop

El primer gran problema misterioso de navegación de carne misteriosa ocurrió en 2014 con Android Lollipop.

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

Barra de navegación en versiones anteriores de Android

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:

Barra de navegación, Android Lollipop y hasta

¿Ves el problema?

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

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

El ícono del 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?

Darle sentido a los iconos de la barra de navegación

Strike 2: Botones de acción flotante

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

Especificaciones para el botón de acción flotante | Fuente

Los botones de acción flotante también sufren el misterioso problema de navegación de 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 íconos. Desafortunadamente, los diseñadores (especialmente, al parecer, los diseñadores de materiales) tienen dificultades para enfrentar esta verdad.

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

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

Botón de misterio 1

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

Botón misterioso 2

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

Botón misterioso 3

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

Botón misterioso 4

Espera, este es el botón para "Abrir en contactos". ¿Verdad? ¿O es este "chisme sobre un amigo" ya que la persona está dentro de un globo de diálogo?

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

Botón misterioso 5

Puede pensar que el botón "+" es bastante simple 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 de misterio. Lamentablemente, los desarrolladores y diseñadores de aplicaciones de diseño de materiales 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 aplicación Inbox de Google muestra botones adicionales cuando toca el botón flotante "+", que no es lo que un usuario esperaría:

El botón

Lo que empeora las cosas es cómo los mismos íconos tienen diferentes significados en diferentes aplicaciones. Google usó el ícono de lápiz para representar "Componer" en Inbox y Gmail, pero lo usó para representar "Editar" en su aplicación de fotos Snapseed.

El mismo ícono, con diferentes significados:

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:

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: no hay carne misteriosa aquí.

Barra de navegación inferior con 3 vistas: hasta ahora, muy bien

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

Barra de navegación inferior con 4 vistas: carne misteriosa

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

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

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

El nuevo componente de IU de Material Design condona la misteriosa navegación de carne no solo es frustrante, sino también extraño. ¿Por qué deberían mostrarse las etiquetas de texto cuando hay 3 vistas, pero estar ocultas cuando hay 4–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. Por lo tanto, la restricción de espacio no es una razón válida.

Barra de pestañas de iOS en las aplicaciones App Store, Reloj y Música: 5 iconos, todos con etiquetas de texto

Google decidió que los íconos pueden representar suficientemente las acciones de navegación (lo cual es malo), o decidieron que la limpieza 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 la función

Cuando Material Design se lanzó en 2014, fue una gran fanfarria. Es audaz y se basa en (y sube) la tendencia del diseño plano. La combinación de colores vibrantes y animaciones hacen que sea bonito de ver.

Pero tal vez es un poco demasiado bonito. Quizás mientras trabajaba en Diseño de materiales, los diseñadores se dejaron llevar.

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ó por encima de la capacidad de reconocimiento 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 limpieza visual se consideró más importante que las etiquetas significativas en las barras de navegación inferiores.

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

Gráfico de velocidad que muestra la aceleración correcta (azul) para animaciones

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

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