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.
Diseño de botones UX
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 los botones en el diseño UX
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.
Por qué el diseño de botones UX en la experiencia de usuario es importante
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.
Los básicos del diseño de botones UI/UX
Si vamos a diseñar un conjunto de botones, debemos de seguir los siguientes lineamientos de experiencia de usuario y accesibilidad web:
- Estados de los botones
- Jerarquía de los botones
- Sistema de diseño (Atomic Design) (De lo micro a lo macro)
Qué estados tienen los botones
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.
Estado predeterminado
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.
Estado hover
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.
Estado activo
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
Estado enfocado
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.
Estado inactivo
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.
Estado de carga
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.
Estado alternado
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.
La importancia de los estados en los botones UX
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.
Ejemplo de sistema de uso de botones (Figma)
Jerarquía en el uso de botones
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.
Cómo integrar correctamente botones a mi experiencia de usuario
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.
Cómo optimizar botones en la experiencia de usuario
Análisis del botón
- Identifique y recopile todos los botones que su página o sitio web que desea optimizar.
- Identifique si estos botones se rigen bajo una misma hoja de estilos CSS
- Utilice una herramienta de analítica digital como: Google Analytics, Google Tag Manager, MonsterInsights, Microsoft Clarity o incluso cosas como un atributo de datos en HTML5 para poder identificar cuantos usuarios le están dando clic a sus botones.
- Calcule su CTR o Clic-Through Rate (tasa de clics) usando las sesiones que recibió esa URL y el dato de cuantos usuarios le dieron clic al botón
- Evalué si se encuentra por debajo del 3.5% (Este es un estándar clave, que puede variar según la industria)
- Analice el copy del botón e implemente mejoras mercadológicas.
- Vea la apariencia visual del botón e implemente mejoras como añadir un icono que ayude al usuario a entender de forma más visual y descriptiva lo que el botón hace.
- Analice su ubicación y evalúe si es coherente tener el botón en esa sección de su sitio web, si sirve realmente de algo tener un botón allí o si simplemente necesita ser más visible en el recorrido visual o la página en la que se está desplegando el botón.
Acciones clave
- Si no tiene una guía de marca o de interfaz de usuario, diseñe una y unifique la apariencia visual de los botones. Tome en consideración el alto mínimo de los botones en píxeles, las esquinas de los botones, el tipo de color, estados, uso de sombras, entre otros datos clave.
- Evalué las interacciones que realiza el botón cuando el usuario hace clic. Hágase preguntas como: ¿Muestra una animación de carga el botón cuando es usado? ¿Cambia de color cuando el usuario hace hover? ¿Se desactiva y reactiva al interactuar con él? ¿Realmente está llevando o haciendo lo que dice el texto del botón de forma inmediata o se tiene que esperar un poco? Evalúe todo eso e implemente las mejoras
- Añade mensajes inferiores o tool tips a los botones que tiene funcionamientos complejos u objeciones marcadas por los usuarios, para dar mayor contexto.
- Defina un periodo de prueba, lance los botones, recopile los resultados y evalúe si los cambios han sido efectivos y si se han implementado correctamente.
Qué tipo de copy o CTA deberían de tener mis botones
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.
Descriptivo
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.
Atractivo
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.
Predictivo
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.
Personal
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”.
Consecuente
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.
References
- Vora, A. (2023, 14 julio). 15 Call-to-Action Statistics You need to know about to increase your conversion rate. blog.hubspot.com. Recuperado 8 de marzo de 2024, de https://blog.hubspot.com/marketing/personalized-calls-to-action-convert-better-data
- Kaley, A. (2024, 31 enero). UI Copy: UX Guidelines for Command Names and Keyboard Shortcuts. Nielsen Norman Group. https://www.nngroup.com/articles/ui-copy/
- What’s a good CTA Click-Through Rate? [New research]. (2024, 8 marzo). Vye. https://www.vye.agency/blog/whats-a-good-call-to-action-click-through-rate
- Button Design: Best Practices for Optimal UI Buttons – Baymard Institute. (s. f.). Baymard Institute. https://baymard.com/learn/button-design
- Search Advertising Benchmarks | Created with Datawrapper. (s. f.). Create Charts And Maps With Datawrapper. https://www.datawrapper.de/_/ySkth/
- Harley, A. (2023, 11 abril). Touch Targets on Touchscreens. Nielsen Norman Group. https://www.nngroup.com/articles/touch-target-size/
- Edwards, S., & Edwards, S. (2023, 8 septiembre). A guide to BUTTON DESIGN & implementation | MiC. Make It Clear. https://makeitclear.com/ux-ui-tips-a-guide-to-creating-buttons/
- Jin, Z. X., Plocher, T., & Kiff, L. (2007). Touch Screen User Interfaces for Older Adults: Button Size and Spacing. En Lecture Notes in Computer Science (pp. 933-941). https://doi.org/10.1007/978-3-540-73279-2_104
- Anthony. (2019, 28 febrero). Optimal Size and Spacing for Mobile Buttons. UX Movement. https://uxmovement.com/mobile/optimal-size-and-spacing-for-mobile-buttons/
