Alternativas al botón de acción flotante

El botón de acción flotante se está convirtiendo en un patrón de diseño esencial desde su popularización en Material Design (el framework de diseño de Google y de las apps de Android). Es un botón que aparece en la parte inferior derecha de una pantalla y que simboliza la acción principal. En el caso de la app de Gmail, por ejemplo, es “Redactar correo”.

Imagen de material.io

Aunque este tipo de botón se está convirtiendo en un estándar y en un patrón de diseño tiene sus problemas, ya que puede impedir ver contenido importante que se encuentre debajo de él. Además, este tipo de botón va en contra de la guía para interfaces humanos de Apple, por lo que está desaconsejado si vas a diseñar para iOS.

Otra dificultad añadida a este botón es que es muy complicado encontrar iconos entendibles universalmente para todas las acciones posibles, lo que puede ser un gran impedimento para la experiencia de usuario con las interfaces móviles.

Por eso es bueno conocer las alternativas existentes a este patrón de diseño para cuando nos toque diseñar una app para iOS o queramos dar una interfaz homogénea para ambas plataformas. Hay tres alternativas simples y efectivas (las dos primeras nos sirven para Android y la tercera es la más recomendada en iOS):

Botón de acción dinámico: un botón de acción dinámico es un botón que aparece cuando un disparador se activa, es decir, que cuando se realiza una acción u ocurre algo, aparece un botón para activar.

Botón de acción expandible flotante: es una mezcla entre un botón de acción flotante y un modal, es decir, es un botón de acción flotante que al pulsarlo se convierte en un pseudomodal donde aparecen los parámetros a elegir o a realizar con la acción. Os enlazo un ejemplo para que lo veáis más claramente.

Barras de herramientas inferior o superior: la mejor alternativa al botón de acción flotante es una barra de herramientas superior o inferior. Como ya os hemos dicho en otras ocasiones, la zona más usable para colocar una barra de herramientas para dispositivos móviles es la parte inferior, pero puede ocurrir que sea necesaria colocarla porque va a usarse en tablet y/o escritorio con el mismo diseño.

Actualmente, a la hora de diseñar una app la mejor opción, si se quiere hacer una app multiplataforma e independiente del dispositivo, es usar una barra de herramientas, es decir, seguir un patrón de diseño clásico pero funcional.

En Torresburriel Estudio apoyamos el rediseño de tu producto digital con un proyecto de acompañamiento donde aplicamos metodologías de diseño centrado en el usuario. Contacta con nosotros y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.