A todo el mundo le gusta el botón de acción flotante, ¿verdad? Ese pequeño botón de acción en el corazón del lenguaje Material Design de Google es atractivo, útil y hace que el diseño de la interfaz de usuario sea más eficiente.
Pero por muy bonito que sea, el botón de acción flotante tiene tanto críticos como admiradores. Según un comentarista, el botón de acción flotante puede ser “perjudicial para la experiencia general de la aplicación” y no siempre es el elemento de interfaz de usuario adecuado.
En Liderlogo encontramos algunas alternativas al botón de acción flotante fáciles de usar que puedes utilizar en tu herramienta de creación de prototipos. Al hacerlo, también hemos descubierto algunas cosas interesantes sobre los patrones de diseño de la interfaz de usuario.
¿Qué es el botón de acción flotante?
Allá por 2014, Google lanzó Material Design, un lenguaje de diseño que trata de unificar la experiencia de usuario de todos los usuarios de aplicaciones web y móviles de Android, al igual que nuestro kit de interfaz de usuario de Android. Reconocerás Material Design por su gran uso de diseños de cuadrícula y tarjetas, transiciones animadas y, lo más llamativo, la ilusión de profundidad creada por las sombras inteligentes. El sistema de diseño de la interfaz de usuario se remonta a la época del papel y la tinta, cuando las cosas tenían “superficies y bordes físicos”, pero el resultado es limpio y moderno.
El botón de acción flotante (o FAB para sus fans) es uno de los elementos más llamativos del lenguaje de interfaz de usuario de Material Design. Es ese botón de colores que verás en las aplicaciones de Android, a menudo en la parte inferior derecha de la pantalla. Está como flotando ahí, aparentemente situado en algún lugar por encima del resto de la interfaz de usuario.
Funcionalmente, el botón de acción flotante representa la acción más común del usuario en la pantalla. Tomemos el ejemplo de la pantalla de inicio de la aplicación de Gmail para Android. Cuando un usuario abre Gmail, la acción que más probablemente realizará es la de escribir un correo. Y eso es exactamente lo que la FAB les llama a hacer: el elemento de la UI es de colores vivos, llamativo e intuitivo. El pequeño icono del bolígrafo ayuda en esta última parte.
¿Qué tiene de bueno el botón de acción flotante?
El mayor argumento de venta para incluir los botones de acción flotantes en su prototipo es que se trata de un patrón de navegación de interfaz de usuario reconocido y estandarizado. Los patrones de navegación estandarizados aligeran sustancialmente la carga cognitiva de los usuarios y son predecibles. Una carga cognitiva mínima significa una usabilidad máxima, como señala Kathryn Whitenton de NN Group.
¿No sabes cuál es la diferencia entre un wireframe y un prototipo? Consulta nuestra guía sobre wireframes y prototipos y descúbrelo.
El botón de acción flotante también diseña la creación de prototipos de aplicaciones Android para mejorar la coherencia del diseño. Como diseñador de interfaz de usuario, es muy conveniente saber que si estás creando un prototipo de una aplicación para Android, tienes a tu disposición un lenguaje de diseño universal, de forma gratuita.
A esto hay que añadir la admirable concisión del botón de acción flotante. Captura la función principal de tu pantalla de aparición en un elemento de interfaz de usuario sencillo y que ahorra espacio. Y llama la atención, guiando a los usuarios a través de la funcionalidad de la aplicación.
Si quieres probar la creación de prototipos de una aplicación con el botón de acción flotante, o cualquier otro aspecto de Material Design, Liderlogo te tiene cubierto. Tenemos toda la gama de widgets de interfaz de usuario para Android Lollipop y Nougat, lo que significa que tienes acceso instantáneo a más de 300 iconos de especificaciones de Android, así como a pantallas y bloques de información preelaborados.
Entonces ¿por qué necesitamos alternativas amigables con la UX?
Buena pregunta. Como todos los elementos de la interfaz de usuario, el botón de acción flotante funciona en algunas interfaces de usuario más que en otras. A continuación se indican algunas ocasiones en las que un botón de acción flotante resta utilidad en lugar de mejorarla.
A veces, los botones de acción flotantes pueden ocultar contenido que la gente necesita ver. Si tienes un botón flotante que cubre parte de un correo electrónico, o la hora a la que fue enviado, esto puede causar frustración entre los usuarios ya que bloquea contenido importante.
Quizás quieras incluir más de una opción detrás del botón. Por ejemplo, el botón de acción flotante puede interferir con otros elementos de la interfaz de usuario de la página, como botones no flotantes y menos fabulosos.
Directrices de Interfaz Humana (HIG) de iOS 10 de Apple
Si estás haciendo una aplicación para iOS, entonces mantente alejado del botón de acción flotante. Mientras que los FABs son grandes CTAs, Apple tiende a preferir la navegación superior derecha.
Puede enmascarar la verdadera acción principal de una pantalla si no se utiliza con criterio. Por ejemplo, Gmail, cuyo botón de acción flotante no tiene mucho sentido si se tiene en cuenta que la mayoría de la gente prefiere leer los correos electrónicos sobre la marcha y puede redactar una respuesta dentro del propio correo electrónico abierto, lo que hace que el botón sea casi obsoleto.
Un floating button sin icono es carne de misterio, pero los iconos son difíciles de hacer intuitivos. Los iconos se entienden en función de la experiencia previa del usuario y, como no existe un estándar, conseguir que los iconos sean correctos ya es bastante difícil, por no hablar de asegurarse de que se entienden universalmente.
Conclusión
La navegación correcta de la UI depende de la pantalla que estés utilizando. A veces, una pantalla pequeña pide a gritos un glorioso y útil botón de acción flotante. Otras veces, el botón de acción flotante debe quedar en segundo plano cuando hay mucho espacio para trabajar, como en el diseño web. Sea cual sea la opción que decidas implementar en tus prototipos interactivos, asegúrate de ser coherente y de tener siempre en mente al usuario final cuando diseñes. Al fin y al cabo, lo que hoy es genial puede ser una pesadilla funcional mañana.
