Las interfaces de usuario suelen constar de muchos elementos diferentes. Cada uno de ellos juega un papel importante en la eficiencia de la experiencia del usuario, así como en la tasa de conversión de tu sitio web y aplicaciones. Incluso los componentes pequeños, como los botones, requieren mucha atención para que puedan cumplir las metas y objetivos que se espera lograr. Es por ello que para fortalecer nuestra serie de principios universales de diseño, hoy revisamos los botones de acción o “CTA” para tu sitio web o landing page.
¿Qué es el botón CTA?
Los botones de llamada a la acción o call-to-action (CTA, para abreviar) son una práctica común en el diseño web, prácticamente todos los sitios web tienen un botón para “contactar”, "iniciar sesión", “suscribirse”, “comprar”, "probar", "saber más", etc. Estos botones se denominan llamada a la acción porque incitan al usuario a realizar una determinada acción.
Estos botones normalmente vienen a continuación de un párrafo de texto y/o material gráfico como un vídeo o imagen que normalmente no contienen ningún link y el botón CTA es la única acción, así que el material que acompaña al CTA ayuda a dar contexto a la acción.
Un botón CTA, a diferencia de un botón “normal”, debe destacar por encima del resto de botones de tu sitio web, y es aquí donde el diseño UI es clave para una correcta experiencia de usuario (UX).
Diseño de botones de acción CTA
Los botones en la web y también en las aplicaciones, generalmente tienen un diseño único para todo el proyecto, de forma que el botón forma parte del mismo diseño UI, basado en las pautas de la marca y diseñado para cubrir todos los diferentes elementos de diseño en el proyecto.
Los botones normalmente tienen en común estos rasgos:
- Tipo de fuente
- Tamaño de la fuente
- Color de la fuente
- Color del botón
- Tamaño del botón
- Bordes
- Esquinas redondeadas o no
- Efectos de sobra o brillos
- Animaciones
Pero como hemos comentado, los botones CTA, debe destacar por encima del botón principal de tu diseño UI. Los botones CTA deben sentirse lo suficientemente similares como para ser parte del mismo proyecto y a la vez, ser lo suficientemente diferentes para representar dos rutas distintas entre las que el usuario puede elegir, por ejemplo, ¿el usuario sabrá si está listo para “descargar” o si quiere “saber más”?
Como regla general, diría que debes diseñar tus botones de acción de manera idéntica, pero cambiando un máximo de 2 rasgos de la lista mencionada anteriormente, un ejemplo:
El naranja es el color utilizado por casi todas las E-commerce para el botón de comprar.
Amazon es uno de los ejemplos. La Tienda online más visitada y con más ventas de España tiene como base de color en su CTA de compra el color naranja:
Otro ejemplo podría ser PcComponentes. Todos sus botones CTA también son naranjas.
No es casualidad que dos de las web de más éxito en e-Commerce utilizan el naranja como base para el botón de comprar y también ambas utilizan un fondo claro y limpio, denotando transparencia.
Conclusión
Los botones de acción CTA deben revisarse con cariño, deben funcionar junto al resto de botones de tu UI, pero ser lo suficientemente distintos para indicar al usuario que cada uno representa un camino diferente, deben diferir entre sí en aproximadamente uno o dos rasgos y nunca deben comprometer el diseño de tu sitio web o marca.
Photo by Possessed Photography on Unsplash
Referencias:
· Button differentiation done right
· UX Practices: 8 Handy Tips on CTA Button Design
