Diseño: Serie de lista de verificación UX. Diseño de botones

Los botones son puntos de contacto accionables para que los usuarios interactúen con el contenido de manera accionable. Pequeños pero poderosos, los botones pueden hacer o deshacer la experiencia del usuario en un sitio web si están mal diseñados, por lo que es importante seguir las mejores prácticas de UX al diseñar botones.

Presionar botones es gratificante. Desde grandes botones rojos brillantes hasta pequeños íconos tocables en nuestros teléfonos, los botones significan acción. A menudo no nos damos cuenta de cuántos botones tocamos o hacemos clic todos los días hasta que tenemos una experiencia negativa; un botón molesto que es demasiado pequeño para tocar, o un botón en el que hace clic para que no ocurra nada, puede arruinar la experiencia del usuario.

En esta publicación, veremos cómo garantizar una experiencia de usuario positiva con botones en su sitio. Siga estas pautas para decidir qué tipo de botón funcionaría mejor tanto para su contenido como para sus usuarios.

Anatomía del botón

5 tipos de botonesBotones sólidosLos botones sólidos apuntan hacia una acción principal para que los usuarios realicen destacándose en una página como una señal visual para la acción del usuario. Los botones permiten al usuario tomar decisiones en lugar de comprometerse pasivamente con el contenido. Por lo tanto, desea que las acciones de botón sólido sean sus elementos de acción de mayor prioridad, ya sea una CTA para registrarse para obtener más información o para llevar a los usuarios a otra página de contenido.

Estos botones son para acciones secundarias y se destacan menos en la pantalla. Con un esquema de color simple, atraen menos la atención de los usuarios, pero aún se diferencian de otros contenidos en la página. Cuando un usuario se desplaza sobre el botón en el escritorio, un relleno de color puede fantasma para agregar interactividad.

FAB (botones de acción flotante)Hecho popular por el diseño de materiales de Google, los FAB representan una acción principal en una pantalla, generalmente transmitida a través de un solo icono de acción. La sombra detrás del botón lo dibuja ópticamente fuera de la pantalla, haciendo que el FAB sea un captador de atención natural. Su forma circular generalmente difiere de otro contenido visible, y la investigación de UX ha demostrado que las esquinas redondeadas son más fáciles para los ojos.

…Para leer más, siga el link del idioma que prefiera