Inclusión. Accesibilidad y Usabilidad web.

Diseño de botones call-to-action, las claves del éxito

Una  claves para el buen funcionamiento de  las landing pages son los botones de llamada a a la acción. Tambien una alta importancia en el diseño de tiendas online, en la que el objetivo es que el usuario finalice de manera exitosa el proceso de compra.

Algunas claves para el éxito de un call to action

1 Textos descriptivos

Textos como “Comprar”, “Suscribirse” son claros, pero pueden reforzarse más detallando más la acción “Comprar Revista”, “Suscribirse al RSS”. Estos textos no solo ayudarán a definir la acción fuera de contexto, sino que además al ser más largos aumentará el peso visual de los mismos.

Intente explicar al máximo lo que se va encontrar el usuario despues de pulsar el bótón.

Debe empezar por un verbo, sino no es una llamada a la acción.

2 Diseño atractivo

Un diseño atractivo nos ayudará a atraer la atención del usuario y a transmitir mayor confianza. Dar un efecto 3D de relieve ayudará a que el usuario lo perciba como un botón clicable.

3 Alto contraste de colores

El color del botón tiene que destacar y contrastar con el fondo de la página.

Además el color es un elemento con el podemos jugar para destacar unos botones de otros. Por ejemplo color llamativo para continuar una acción y color neutro para cancelar o volver para atrás.

4 Tamaño

Para hacerlo más evidente al usuario, el botón debe destacar en tamaño con respecto al resto de los elementos de texto, maximizando además el área activa.

5 Libere espacio alrededor

Crear un adecuado espacio libre alededor del botón hará que aumente su importancia visual, ayudando a atraer la atención

6 Acompáñelo de un icono descriptivo

Un icono adecuado logrará no solo atraer la atención de los usuarios, sino que reforzará de manera importante el mensaje del texto del botón. Ayudará a que el usuario entienda la acción rápidamente.

7 Transmita urgencia

Frases como “descargar ahora”, intentan transmitir la sensación de inmediatez para evitar que el usuario pase de largo por el botón con la intención de volver más tarde, cosa que en pocas ocasiones ocurre.

En resumen: Affordance

Tal como Donald Norman apunta en The Design of Everyday Things, el affordance es aquella cualidad que un objeto tiene para autodescribir las posibilidades que ofrece y hacerlo de forma perceptible para el usuario.

Es decir, si es un elemento pulsable, tiene que verse claramente está propiedad, si lleva a una acción que quede clara cual es, si en el diseño de la página lo consideramos importante, que destaque visualmente sobre el resto de los elementos.

Más información

• 25 Examples of Convincing Call-to-Action Buttons
• Web Design Trends: Call To Action Buttons
• Good Call-to-Action Buttons
• 10 techniques for an effective ‘call to action’
• Call to Action Buttons: Examples and Best Practices

---

Lo más leído

• ¿Cómo adapto un interfaz web para móvil?
• Landing Page. La primera impresión es lo que cuenta. 30 Tips
• Cómo maquetar un correo electrónico HTML para los distintos clientes
• Diseño de botones call-to-action, las claves del éxito

¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscríbes a mi feed y obtienes los artículos como este enviados automáticamente cada día hacia tu lector de feeds.

Inclusión. Accesibilidad y Usabilidad web.