¿Dónde colocar botones en los formularios?(y II)

Diseño UX
09/10/2019
|
Samuel Gimeno Artigas
2019 10 09 blog
Imagen de Adam Silver

Segunda parte del artículo de Adam Silver.

Coloca los botones extras según lo que hagan

Luke W. nos dice que hay que colocar el botón Cancelar a la derecha del botón de acción principal y como un enlace con menos preponderancia visual. 

A veces es necesario añadir más información por lo que es necesario un botón para añadir información adicional. Este botón lo ideal es que se ponga por encima del botón de acción principal para que de un vistazo se vean la acción principal y la secundaria. 

Algunas veces los usuarios pueden querer guardar su progreso en un formulario largo. En este caso los botones de acción principal y el de guardado deben ser colocados el uno junto al otro. 

En algunos formularios de un solo campo sitúa el botón junto al campo

En caso de un formulario de búsqueda el botón de buscar debe de estar junto al campo. Ya que queda más limpio y además es donde los usuarios van a buscar el botón ya que están acostumbrados a encontrarlo allí. 

Pon los botones de multiselección encima del formulario

Los formularios de multiselección permiten a los usuarios seleccionar y ejecutar acciones con múltiples elementos a la vez. Por ejemplo, en Gmail puedes seleccionar varios correos y archivarlos a la vez. 

En este caso especial pon los botones por encima del formulario. Poner los botones encima de la lista los hace más fácil de descubrirlos y deja espacio abajo del todo para colocar los controles de paginación que son necesarios a veces en este tipo de interfaces. 

Checklist de botones 

  • Alínea el botón de acción primaria a la izquierda 
  • Pon el botón de atrás encima del formulario
  • Pon las acciones relacionadas encima del formulario
  • Coloca los botones extra según lo que hagan 
  • Coloca el botón a la derecha del campo en el formulario de búsqueda
  • Pon los botones en los formularios multiselección encima del formulario

Te recuerdo que ya está abierta la matrícula del curso de Diseño de Producto de UX Learn.

¿Quieres darnos tu impresión sobre este post?

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.