13/11/2013

Call-to-action buttons: cómo lograr más conversiones

Call-to-action buttons: cómo lograr más conversiones

En una interfaz web, los botones call-to-action son aquellos que invitan al usuario a realizar una acción determinada. Botones con leyendas como «Leer más», «Agregar al carrito», «Descargar archivo», «Suscribirse», «Publicar comentario» y «Comprar ahora», al ser cliqueados, provocan eventos cuyo resultado puede interesarnos obtener: el usuario terminará sumándose a nuestra comunidad de clientes o brindándonos una ganancia.

La cantidad de usuarios que realizan una acción deseada dividida por la cantidad de usuarios total se conoce como tasa de conversión, y la optimización de los botones call-to-action puede ayudar a incrementarla. ¿Qué debe tener un botón call-to-action para que los usuarios quieran cliquear en él?

  • Color. El botón debe destacarse del resto de los elementos, por lo que no puede tener un color similar al del fondo. El rojo, el verde y el naranja son los colores más atractivos, mientras que el negro, el blanco y el marrón son los que menos llaman la atención. El diseño plano puede resultar una complicación: el botón debe «salir» de la pantalla para destacarse.
  • Texto. Debe ser claro sin ser excesivamente detallista. El usuario quiere saber qué le espera luego de cliquear el botón, por lo que puede desconfiar de botones que sólo dicen «Comprar» o «Descargar». Pero si a esos textos se les agregan subtítulos como «Plan completo. $300 al año» o «Versión para Windows. Gratis», el usuario sabrá con exactitud lo que obtendrá luego del clic. Además, es importante el uso de la primera persona: «Activar su cuenta» es mucho menos atractivo que «Activar mi cuenta».
  • Tamaño. Los botones con fuentes diferentes a la del resto del texto, gran tamaño y mucho margen interno (padding) se destacan sobre el contenido y capturan la mirada del usuario.
  • Ubicación. El botón debe estar ubicado en un sector de la pantalla fácilmente visible para el usuario, que puede determinarse a través de pruebas de eye tracking. El header y el centro absoluto de la página son buenas opciones.

Diseñando de manera inteligente nuestros call-to-action buttons lograremos que más usuarios hagan exactamente lo que queremos cuando navegan por nuestro sitio web.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce