diseño de botones ux
Diseño de botones UX: GUÍA COMPLETA – Mejores prácticas🚦: Para diseñar botones en el ámbito del UI/UX existe un conjunto de prácticas recomendadas que le ayudarán a diseñar y optimizar botones en tu sitio web, de tal forma que te permitan convertir más usuarios en leads, clientes y mucho más. En este artículo vamos a ver una GUÍA COMPLETA de las mejores prácticas UX para diseñar botones que más efectivos.
Primeramente, es necesario aclarar que, los botones son uno de los elementos principales en cualquier interfaz de usuario. Podemos tener en un sitio web repleto de miles de botones como tener solo un puñado y seguir generando conversiones como locos.
Esto es función del diseño de experiencia de usuario, que nos permite crear botones que generen acciones de parte del usuario.
El objetivo de un botón es ser un medio para que el usuario pueda llevar a cabo una acción predeterminada (como el redireccionamiento a otra página o la compra de un producto) simplemente haciendo la moción de “tap” o “clic” sobre dicho elemento gráfico.
Un botón no tiene por qué ser un elemento ignorado, soso o frustrante para los usuarios que usan la interfaz. Podemos evitar esto, si los diseñamos y optimizamos.
El diseño de botones es crucial porque un botón bien diseñado, no solo redirecciona al usuario, sino que también proporciona una llamada a la acción que les motiva a dar un paso en el proceso de compra o compleción de una tarea, proporcionando un camino claro a seguir.
Si vamos a diseñar un conjunto de botones, debemos de seguir los siguientes lineamientos de experiencia de usuario y accesibilidad web:
Los botones en el diseño de experiencia de usuario (botones ux) se caracterizan por tener diferentes estados. Los estados de un botón modifican su apariencia y comportamiento con base a las acciones del usuario. Esto es útil porque un botón con múltiples estados y comportamientos le proporcionan al usuario una mejor experiencia con la interfaz al proporcionar una retroalimentación activa y mayor control.
Cuando se le enseña a programadores y diseñadores UX acerca del estado de los botones, la respuesta estándar es mencionar tres estados. Activo, inactivo y hover. Sin embargo, esto es solo una pequeña parte de lo que realmente involucra los estados de un botón.
En el diseño de botones UX, se define como el estado que verá el usuario de forma preestablecida del botón en la interfaz. No hay un consenso establecido del color ideal para un botón o su comportamiento predeterminado en la experiencia de usuario. Por lo que este aspecto suele trabajarse de forma más personalizada.
Es el estado que tiene el botón cuando se coloca el cursor encima. De esta manera le indicamos al usuario que el botón se le puede dar clic y es interactivo.
Es el estado del botón cuando ya ha sido presionado anteriormente. Le informa al usuario que el botón ha recibido la acción que ha ingresado. Tipicamente es utilizado para guíar al usuario a otra sección o funcionalidad
En el diseño de botones UX, el estado enfocado es el estado al que pasa un botón cuando otro elemento de la interfaz ha realizado una acción. Es típicamente usado para la navegación por teclado. Este botón solo aparece cuando se usa el teclado, o para cualquier elemento que admita la entrada del teclado del equipo (como la entrada de texto) La compatibilidad en navegador es limitada.
Cuando se manejan botones, por lo general el estado inactivo busca informar al usuario que este botón no está siendo usado. Estos botones tienen menor prioridad visual y buscan decirle al usuario que no se encuentran activos o recibiendo información.
En el diseño de botones UX, se toma en consideración que, a veces, la interfaz de usuario carga mucho más rápido que la funcionalidad, es allí en donde un estado de carga que le indique a los usuarios más impacientes que su acción ha sido recibida correctamente y se está procesando es bastante útil.
Este estado es bastante útil para diseño de botones ux, al poder indicar la dualidad entre dos acciones (ejemplo: modo nocturno, modo claro) Es como usar un interruptor de luz que nos refleja ambos estados (encendido y apagado). Este estado le permite al usuario elegir entre dos condiciones, como activar o desactivar una función.
Los estados de los botones son pistas o señales visuales que ayudan al usuario a entender las posibles interacciones que está teniendo con el botón dentro de la interfaz de usuario.
Los botones no solo tienen diferentes estados, sino que también manejan un sistema de jerarquía. Esta es una excelente práctica a nivel web porque no solo facilita el proceso de diseño y desarrollo con estilos predeterminados según la jerarquía del botón, sino que también.
Botón primario: Son los botones que llevan al usuario a cumplir con el objetivo principal del sitio web. Debe de resaltar de los demás, siendo prominente y contrastante con su entorno. Típicamente, es usado para la acción principal que queremos que el usuario tome.
Botón secundario: Son los botones que llevan al usuario a cumplir con tareas y objetivos secundarios que complementan y le acercan más a cumplir el objetivo principal del sitio. Se caracterizan por ser menos prominentes, pero servir como un elemento complementario. Esto es clave para diseño de botones ux.
Botón terciario: Son botones que se utilizan para realizar tareas de menor prioridad. Se caracterizan por ser los botones menos prominentes dentro de la web y tener poco énfasis a comparación de otros elementos visuales e interactivos. Los botones terciarios también pueden reducirse a ser textos con hipervínculos.
La mejor manera de integrar botones a su experiencia de usuario es integrarlos bajo la misma línea gráfica y coherencia en su interactividad. Esto quiere decir que los botones deben de lucir semejantes entre ellos y deben funcionar de manera similar.
De lo contrario, terminas con un conjunto de botones que hacen todo lo contrario y terminan generando ruido tanto desde la perspectiva visual como desde la perspectiva funcional.
El copy o texto que se encuentra dentro de los botones que colocamos en nuestro sitio web, es un llamado a la acción que se enfoca en persuadir al usuario de tomar una acción predeterminada. Ahora, qué tipo de copy o CTA deberían de tener tus botones, pues básicamente uno que contenga las siguientes características.
El botón debe de dejar en claro lo que exactamente va a pasar después de que el usuario le dé clic. Un error común es colocar al botón “Comprar” cuando en realidad el botón va a llevar al usuario a su carrito. En ese ejemplo, puede que “Comprar” no sea lo más adecuado y en su lugar un texto como “Agregar a mi carrito” sea más descriptivo.
Puedes hacer el copy de tus botones más atractivos si se enfoca en acciones que le dan valor al usuario. No es lo mismo un copy que dice “descargar” a uno que dice “Descargar mi plan de marketing gratuito”. Otro ejemplo es como se puede pasar de “Empezar periodo de prueba” a “Reclamar mis 1000 h de videos gratis”. Y sí, es más largo. Pero es más atractivo. Usa este recurso cuando sea necesario, no endulces demasiado todos los botones. Porque puede tener el efecto contrario al ser percibido por el usuario como algo vende humo.
Una gran manera de hacer un botón ux con un copy que valga la pena es hacerlo predictivo a las objeciones del usuario. El utilizar paréntesis para un CTA que aclare la objeción o impedimento más común a darle clic. Ejemplos como “Probar gratis (Sin tarjeta de crédito)” puede predecir ese dolor que tienen los usuarios al probar un servicio gratis.
De acuerdo con el estudio de Hubspot, Vora, A. (2023) “Los llamados a la acción personalizados funcionan un 202% mejor que los CTA básicos” por otro lado, te recomiendo para hacer la comunicación más personal en el copy aplicar en sus botones un cambio en la comunicación. Pasando de hablar en tercera persona (Contactar) a hablar en primera (Sí, Contáctame) por ejemplo en lugar de decir “descargar” podemos poner “Descargar mi guía gratis”.
Describir la consecuencia que el usuario va a experimentar en el copy del botón. Expandiendo en esto de acuerdo con el estudio de Kaley, A. (2024) “Los comandos siempre deben reflejar el estado al que se moverá el sistema, en lugar del estado actual.” Es decir, es necesario demostrarle al usuario en el microcopy de los botones de la interfaz lo que va a ocurrir cuando el usuario le de clic al botón. Por ejemplo, en lugar de “barra de herramientas” algo como “Mostrar barrar barra de herramientas” así como “Ocultar barra de herramientas” puede ser más consecuente y entendible para los usuarios.
Diseño Web: La combinación de estética y funcionalidad El diseño web no es solo cuestión…
Por qué las Landing Pages Son La Clave Para Multiplicar Tus Conversiones El mejor vendedor…
Branding en Guatemala. Un acercamiento y guía sobre como posicionar una nueva marca en el…
¿Cansad@ de invertir en publicidad y que no funcione? No te preocupes más, descubre en…
El auto layout en Figma llegó para quedarse, y si quieres ser un diseñador UI/UX…
El cansancio o fatiga extrema cuando eres diseñador gráfico es una situación de lo peor.…