Alternativas al botón de acción flotante

Experiencia de usuario
04/9/2017
|
Samuel Gimeno Artigas
Escritorio redondo con laptop, gafas, planta, celular, lápices y unas manos de mujer tecleando.

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”.

components buttons fab e1504525555106
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.

¿Quieres darnos tu impresión sobre este post?

Una respuesta a “Alternativas al botón de acción flotante”

Deja una respuesta

Aquí va tu texto personalizado.

Blog

Nos encanta compartir lo que sabemos sobre diseño de producto y experiencia de usuario.
Ver todo el blog
Puedes consultarnos lo que necesites
Envíanos un mensaje
Nombre
Email
Mensaje
Gracias por escribirnos. Nuestro equipo se pondrá en contacto contigo tan pronto como sea posible.
Ha ocurrido un error. Estamos trabajando para resolverlo. Puedes escribirnos al chat.