Case study: landing pages para captación de leads B2B

El caso

Situación previa

La empresa llevaba un tiempo trabajando en campañas de captación online, coordinando sus fortalezas internas desde un potente departamento de marketing con su fuerza comercial en los países donde ya tienen presencia. Utilizaban sus recursos de una manera poco eficiente y basaban su comunicación en su forma de hablar, en vez de la de sus clientes potenciales.

Habían conseguido un crecimiento online aceptable, pero necesitaban ampliar sus mercados de una forma eficaz, atrayendo leads cada vez más cualificados para optimizar la labor comercial. Su departamento de ventas les estaba exigiendo contactos de mayor calidad para obtener mejores proyectos y no gastar horas de trabajo y negociación en clientes que no están dentro de su target.

El proyecto: estrategia y objetivos

Desde viva! planteamos la elaboración de estrategias únicas para cada país (en Europa, USA y LATAM), previo estudio del producto que se pretende potenciar y del buyer persona de cada mercado. Para cada mercado establecemos un entorno diferente y definimos los canales que vamos a explotar.

  • Los especialistas SEM definen los canales más apropiados (Search en AdWords y Bing, Display, Facebook Ads, Linkedin Ads).
  • Los especialistas en UX, UI y CRO definen los assets digitales que permitirán la generación de leads (banners, landing pages, emails).
  • Todo el equipo involucrado en el proyecto define el customer journey para cada campaña, define el estilo de la comunicación del proyecto y establecemos los objetivos de cada campaña.

Los objetivos del proyecto varían de forma específica en cada campaña y cada mercado, pero de forma global podemos hablar de 3 objetivos importantes:

  1. hacer un balance del estado de la marca en cada mercado
  2. generación de leads cualificados
  3. valorar la madurez y posibilidades de crecimiento de cada mercado

Desde el departamento de diseño y CRO, nos enfocamos en el objetivo principal de la generación de leads: que sean muchos y de calidad. Lo hacemos siempre teniendo en cuenta en qué parte del embudo de conversión nos encontramos en cada momento. Cuando definimos banners para la Red de Display estamos en lo más alto del embudo, excepto cuando impactamos por Remarketing, que ya estamos más abajo. Ocurre lo mismo en el diseño de landing pages. No son la primera parada del embudo, generalmente son la segunda o la tercera. Pero si recibimos a un usuario que viene de una campaña de remarketing, nuestra landing page puede ser el segundo y el cuarto impacto. Acompañar al usuario en ese viaje y guiarle adecuadamente será una de nuestras armas más poderosas.

Landing pages eficientes para captación de leads B2B
Landing pages eficientes para captación de leads B2B

Diseño de landing pages eficientes

Definición de KPIs

En este paso casi todos los proyectos coinciden. Unos KPIs pueden tener mayor o menor peso en cada caso, pero siempre nos hablarán del rendimiento de nuestras landing pages y banners. Os listamos los KPIs habituales para el departamento de diseño y CRO en este caso de estudio:

  • Tasa de conversión: nos ayuda a ajustar presupuestos, además de medir la eficiencia de toda la campaña.
  • Nivel de calidad de los contactos: hemos coordinado con el cliente un sistema de valoración de los leads y esto nos permite medir la calidad de los contactos creados y optimizar campañas y copies.
  • Tasa de rebote: en caso de que hayamos decidido que nuestra landing page forme parte de un micrositio más amplio, esta métrica nos puede hablar del nivel de comprensión y engagement que hemos generado en el usuario.
  • Click Through Rate, en el caso de emplear banners (en cualquiera de los canales).
  • Tiempo medio de la sesión: combinado con la tasa de conversión, a veces nos demuestra que nuestros usuarios están en actitud de investigación y comparación cuando vemos que el tiempo medio de la sesión es elevado pero la tasa de conversión no. En algunas campañas hemos tenido que reducir la cantidad de información que ofrecemos sobre el producto que estamos promocionando, porque conseguimos “enfriar” la emoción del usuario. En estas ocasiones, hacemos un balance junto con nuestro cliente sobre la calidad y la cantidad de los leads.

Landing pages específicas

Nuestro cliente nos presentó su necesidad de abrir y explorar mercados muy diversos: desde UK hasta LATAM, la actitud de los usuarios puede resultar completamente diferente, aunque el producto que ofrecemos sea el mismo o parecido. Difiere la madurez del mercado en el nicho, el nivel de conocimiento técnico que poseen nuestros clientes potenciales y el lenguaje que emplean.

Desarrollamos una arquitectura de landing pages óptima que nos permitiese una gestión de contenidos ágil, desarrollo de templates/skins eficiente y aspectos de usabilidad comunes a todas. Nos permite escalar los proyectos y aplicar mejoras de una manera rápida, además de traducciones y módulos adicionales. Todas las landing pages gestionan los contactos de manera unificada y etiquetándolos de forma específica, integrando cada contacto en el CRM de nuestro cliente. Automatizamos el proceso de gestión de leads para favorecer su seguimiento y que el departamento comercial pueda hacer un trabajo más eficaz y eficiente.

Para cada campaña definimos la arquitectura de información, la interfaz y los copies específicos para la página de aterrizaje que le facilitamos al especialista SEM al cargo de la campaña.

Ya hemos diseñado y desarrollado 12 landing pages basadas en 6 skins diferentes, para campañas en 8 países.

Conversion-centered design y copywriting persuasivo

Aplicamos criterios y best practices del diseño orientado a la conversión para maximizar nuestros resultados. Algunos ejemplos:

  • Relevancia: nuestros SEM managers son implacables con el quality score de las landing pages. La relevancia es vital para el rendimiento de las campañas y, también para la tasa de conversión. Hacemos coincidir los copies de los anuncios con los de las landing pages de forma dinámica, no nos hace falta tener más réplicas de la página. Utilizamos DKI (Dynamic Keyword Insertion) para modificar la propuesta de valor y hablar el mismo lenguaje que el usuario que nos encuentra.
  • Urgencia: de manera puntual y, basado en información offline (calendario laboral, ofertas puntuales…), utilizamos banners, popups, mensajes emergentes… para apremiar al usuario a contactarnos.
  • Persuasión: copies consensuados con el cliente, branded content y recompensas al usuario (formación, material didáctico,…)

Formularios eficientes: UX/UI

Monitorizando el comportamiento de los usuarios en nuestras landing pages hemos ido aprendiendo cuáles eran los puntos débiles de la experiencia de usuario desarrollada (UX+UI). Poco a poco hemos desarrollado formularios más eficientes para maximizar la tasa de conversión. Hemos ajustado los campos en cada campaña en función del nivel de calidad esperado de los contactos y en función del rendimiento de las campañas.

En una campaña orientada a USA, el equipo comercial alertó de la baja cualificación de los leads entrantes. Añadimos una restricción al formulario: el email debía ser corporativo (damos por inválidos los hotmail, gmail, yahoo…). Resultado: la tasa de conversión baja ligeramente, el nivel de calidad de los leads sube, la tasa de cierre de proyectos mejora.

Nos encantan los formularios que ofrecen una buena experiencia.

Ejemplo de formulario en vivaconversion.com
Ejemplo de formulario en vivaconversion.com

Personalización: contenidos dinámicos

De forma resumida, aplicamos variaciones de contenido (copies y hero shots, principalmente) en función de:

  • usuario nuevo o recurrente (remarketing): No es lo mismo decir “bienvenido” que “nos alegra verte de nuevo”
  • términos de búsqueda: adaptamos nuestra propuesta de valor a la forma en que la entiende y la busca el usuario
  • origen del tráfico: el usuario no tiene la misma actitud si hace click en un banner que encontró “casualmente” o si busca activamente en Google/Bing.

Red display: banners HTML5

En algunas campañas para países donde nuestro cliente todavía no tiene una presencia de marca relevante, o donde existe alguna circunstancia externa (una ley, por ejemplo) que favorece la contratación de nuestros servicios, también desplegamos banners en localizaciones seleccionados por nuestros especialistas.

Diseñamos y desarrollamos los banners en HTML5, elegimos 4 o 5 formatos con el mejor performance, adaptamos el diseño y hacemos que haya una conexión directa entre el diseño/copies de banners y landing page.

La tasa de conversión en display siempre es un quebradero de cabeza, pero nos ayuda para ganar presencia y hacer branding. Eso sí, los banners tienen que tener cierto estándar de calidad…

Facebook Ads y LinkedIn Ads

Especificaciones parecidas a los banners HTML5 para la red de Display, pero con las restricciones propias de estas redes para la publicidad gráfica. En Facebook nos han funcionado bastante bien los Lead Ads potenciando material descargable de calidad (por encima de vender directamente nuestro servicio).

CRO: optimización en base a resultados

Es parte de nuestra metodología: analizar, decidir, medir, analizar, mejorar, medir,… Los mapas de calor y de scroll nos han ayudado mucho con las campañas de este cliente, así como las grabaciones de sesiones aleatorias y el análisis de embudos de conversión.

Nos ha permitido establecer hipótesis importantes y ejecutar tests AB para aprender mucho de nuestros usuarios. Un par de ejemplos:

  1. testeamos, en la campaña de Francia, una landing page de tipo one-page site” contra un micrositio con 4 pestañas. ¿Por qué? Porque detectamos tiempos de sesión muy altos, mucho nivel de interacción y tasas de conversión discretas. Así que le dimos al usuario la posibilidad de investigar y reflexionar más profundamente, evitando siempre los puntos de fuga y sin perder de vista nuestras posibilidades de conversión. Nos equivocábamos en nuestra hipótesis 🙁
  2. hemos testeado la presencia de un hero shot (en este caso, la típica foto de biblioteca del buyer persona que mira hacia el formulario). El resultado: nos quedamos con la foto 🙂

Qué hace Booking para maximizar la tasa de conversión

Persuadir a los usuarios para conseguir una o varias acciones concretas es uno de los fundamentos básicos de cualquier estrategia de marketing online. Copywriting, UX, UI, SEM… todos unidos para conseguir el mismo objetivo: maximizar la tasa de conversión. Es interesante repasar todo lo que hace Booking para ello, qué elementos de persuasión emplea para conseguir que el usuario reserve una habitación en su sitio web. Algunos son más obvios, otros son más agresivos… Veamos algunos ejemplos.

Un vistazo al LIFT Model de WiderFunnel

La gente de WiderFunnel desarrolló hace ya algunos años un modelo (framework) de análisis de landing pages (y sitios web orientados a la conversión) para valorar su nivel de optimización de la tasa de conversión y facilitar la tarea de desarrollar hipótesis para un estrategia de AB testing. No es que hayan descubierto América, pero es una forma bastante acertada de englobar factores determinantes en cuanto a conversión en sitio web.

Este modelo habla de 6 factores influyentes en el proceso de conversión que atraviesa un usuario. Cuatro de ellos son los que pueden impulsar el proceso: urgencia, relevancia, claridad y propuesta de valor. Los otros dos son claramente negativos: distracción y ansiedad.

Hay que andarse con cuidado con tomarse el LIFT de WiderFunnel como un “todo o nada”, porque un exceso de urgencia puede generar ansiedad. Por ejemplo, como puede llegar a ocurrir en Booking.

La infografía con la que representan el modelo es bastante clara:

LIFT Model by WiderFunnel
LIFT Model by WiderFunnel

Una frase para explicar cada uno de los factores:

Propuesta de valor

¿Qué ofrece el sitio web a sus usuarios? ¿Tiene valor real? ¿Es diferencial? ¿Adecuado para el usuario? Es el factor principal, el que se verá potenciado o mermado por el resto de factores.

Relevancia

¿El contenido de la landing page está relacionado con los anuncios y la propuesta de valor? ¿Es relevante lo que le estamos contando? A veces nos encontramos con páginas donde tenemos que hacer un gran esfuerzo para discernir lo que realmente nos interesa de lo que probablemente no le interesa a nadie más que al que lo redactó.

Claridad

Ya sabemos lo rápido que van los procesos de decisión de los usuarios online. Hablar su mismo idioma, ofrecer una propuesta clara y entendible es clave para que el usuario no nos abandone (o por lo menos que se tome el tiempo para considerar nuestra propuesta). Perdernos en frases sin contenido como “El mejor servicio al mejor precio” o en formularios sin etiquetar correctamente pueden ser fatales para nuestra tasa de conversión.

Urgencia

En Booking explotan este factor. Se trata de acortar el proceso de decisión del usuario mediante la limitación de las posibilidades y oportunidades: fechas límite, plazas limitadas, ofertas con caducidad… La redacción de la propuesta de valor, su tono, también pueden generar urgencia de forma implícita. ¿Por qué el usuario no debería esperar para accionar tu propuesta?

Ansiedad

Es muy fácil generar ansiedad en los usuarios de un sitio web. La falta de credibilidad, la complejidad del mensaje, una experiencia de uso pobre o confusa… Aunque no lo hayas valorado nunca, sufres ansiedad (en mayor o menor grado) visitando la mayoría de los sitios web en los que navegas a lo largo del día: encontrar lo que buscas, leer el párrafo que te interesa, evitar la publicidad…

Distracción

Los puntos de fuga de una landing page son elementos delicados. A veces, el efecto de engagement que generan es positivo. Otras, suponen un factor de distracción crítico para la tasa de conversión.

Booking.com: urgencia y relevancia

Vamos a hacer un proceso de reserva completo para ver qué nos vamos encontrando por el camino. Será interesante.

Buscamos “Hotel en Valencia”. Por supuesto, el primer anuncio es suyo. Aquí ya encontramos los primeros elementos de urgencia. Los sitelinks: “Reserva ahora”, “Reserva para esta noche”, etc.

Anuncio de AdWords de Booking.com
Anuncio de AdWords de Booking.com

Click y adentro. La página de aterrizaje que nos ofrece es diferente a su homepage. Es una página centrada en las reservas para Valencia. A tope de relevancia. Una foto de la playa de Valencia, un “¡A los clientes les encanta Valencia!”. Y en el pie de foto, el primer elemento de relevancia con clara identidad Booking: “En el último mes, más de 1 millón de personas dijo que recomendaría Booking.com a sus amigos y familiares”.

Landing Page para Valencia de Booking.com
Landing Page para Valencia de Booking.com

¡Atención! Acaba de saltar una ventana modal: “Ahorra hasta un 50% en Valencia”. Detectan mi inactividad y me dan un toque de atención: urgencia.

Modal en Booking.com: urgencia
Modal en Booking.com: urgencia

Hago la búsqueda y aquí empieza lo bueno. Empieza la lista de resultados con una cabecera que te deja claro que no tienes mucho margen para decidir:

Elementos de urgencia a primera vista en Booking.com
Elementos de urgencia a primera vista en Booking.com

En los 4 primeros resultados encontramos mensajes de este tipo:

Factor de urgencia en ficha de producto
Factor de urgencia en ficha de producto
  1. Primero, te enfrenta a «tu competencia”: usuarios que están considerando “robarte” esa habitación. Te incita a “ganar”, a obtener un premio, porque “Hay 3 personas mirando en este momento”. En rojo te avisan de que el producto es popular entre los usuarios. Ni más ni menos que 9 usuarios han comprado este producto limitado hoy.
  2. Segundo, te aclaran que la oferta es limitada. Es una “Ganga de hoy”. Mañana ya no.
  3. Después te avisa de que están “bajos de stock”. O te decides pronto, o dejarás de tener este hotel en tu lista de posibilidades. El mensaje está en rojo, contiene “muy”, “solo” y exclamaciones. Urgencia de toda la vida.
  4. Y por último, suavizan un poco la carga de ansiedad generada. Eliminan el riesgo de la decisión de compra, porque puedes cancelar más tarde y obtener la oferta de hoy.

Entre los resultados de nuestra búsqueda, nos encontramos con “productos” (hoteles) sin stock, sin habitaciones. ¿Por qué los muestran si no se pueden reservar? ¿No deberían guardar ese espacio para productos disponibles? Es otro elemento que genera urgencia, te demuestran que la demanda es alta.

"Productos sin stock" en Booking.com
«Productos sin stock» en Booking.com

No nos perdamos tampoco los call to action (llamas a la acción). 100% claridad, relevancia y urgencia.

Llamadas a la acción con urgencia
Llamadas a la acción con urgencia

Vamos a avanzar en el proceso de reserva. Entramos en la ficha de un hotel y nos fijamos en las valoraciones de los usuarios (factor de relevancia). El hotel elegido tiene una nota media de 7’9, pero su primera valoración no es la última en orden cronológico y tiene un 8’8 “Fabuloso”. Bravo.

Rescatamos algunos elementos más de urgencia:

Más persuasión en Booking.com
Más persuasión en Booking.com
Urgencia y relevancia en ficha de producto en Booking.com
Urgencia y relevancia en ficha de producto en Booking.com

También tienen en cuenta la relevancia. Antes de hacer click en “Reservar”,  un resumen de lo que estás a punto de comprar:

Relevancia en checkout
Relevancia en checkout

Si seguimos adelante con la reserva, los mensajes emergentes siguen apareciendo sin parar. Después de algunos segundos en la página de checkout, salta esta ventana:

Ventanas emergentes ante la inactividad
Ventanas emergentes ante la inactividad

Se acerca el formulario de reserva, cada vez más alertas:

Checkout persuasivo en Booking
Checkout persuasivo en Booking

Un detalle: cambio de pestaña y el “title” de la pestaña cambia y me da una llamada a la acción con aspecto de notificación  “(1) No te olvides de reservar”.

Pestaña del navegador Booking.com
Pestaña del navegador Booking.com

El diseño de Booking.com ha ido evolucionando con los años. Han sido siempre abanderados de la optimización de la tasa de conversión (CRO) y de las estrategias de AB testing, lo cual les permite estar en constante aprendizaje sobre el comportamiento de sus usuarios y adaptándose a sus intereses y sus necesidades. Potencian lo que saben que mueve o persuade a los clientes.

Si aplicamos el modelo LIFT de WiderFunnel para analizar qué hace Booking para maximizar la tasa de conversión, nos encontraremos con elementos que están impactando negativamente en los factores de ansiedad y de distracción, porque el equilibrio entre persuasión y persecución es delicado. Pero aquí la tasa de conversión es la que manda, ¿no?

Si este post te ha resultado interesante, quizá este otro donde resaltamos 5 best practices de CRO que podrías poner en duda también te gustará.

Pilares de una agencia CRO

En algún post anterior ya he tratado de describir los objetivos de una estrategia CRO. También he hablado del proceso y metodología de la optimización de tasa de conversión de un sitio web. Básicamente, un proceso iterativo: medir, analizar, priorizar, testear, implementar. Esto implica un montón de conocimientos, técnicos y teóricos, para ejecutar la mejor y más completa estrategia posible: usabilidad, análisis de datos web, diseño, copywriting, procesos de toma de decisión, publicidad y marketing…

Podemos afirmar, por tanto, que CRO es 100% multidisciplinar. El gestor de un proyecto de optimización ha de tener una visión global de cómo encajan todas estas disciplinas entre sí, qué aporta cada una al proyecto y en qué momento actúa cada una de ellas. Una gran agencia de Conversion Rate Optimization podría estar compuesto por los siguientes pilares o perfiles:

  • Diseño UX
  • Diseño UI
  • Desarrollo frontend y backend
  • Analista web
  • Psicología: neuromarketing, copywriter, emotion-driven design…
  • Marketing online (SEM, SEO) ¡y offline!

Hablemos de cómo influye cada uno de estos perfiles en una estrategia de optimización. Estos podrían ser los pilares de una agencia CRO.

Pilares de una agencia CRO
Pilares de una agencia CRO

 

Principales pilares de CRO


UX/UI

Es uno de los pilares centrales. Cuanto más especializados sean los perfiles dentro de la agencia, mejor (obviamente); la coordinación entre diseño de usabilidad e interfaz es clave para el éxito de una propuesta de diseño. En un proyecto de optimización, donde tratamos de descubrir por qué no convierten los usuarios que no convierten, el análisis de la usabilidad del sitio web resulta totalmente imprescindible. Y no sólo la usabilidad sino la funcionalidad, propuesta estética, arquitectura de la información, grid… Diseño web, en toda su amplitud.

Los responsables de UX y UI de la agencia estarán presentes en todas las fases del proyecto. Se encargan de descubrir los posibles puntos débiles del sitio web a través de análisis heurísticos, apoyados en mapas de calor, métricas claves para la usabilidad, etc. y serán los encargados de proponer cambios y mejoras para optimizar la experiencia de uso, proceso de compra y favorecer un crecimiento directo o indirecto de la tasa de conversión. Es decir, ya han pasado por las fases de trackeo, análisis y planteamiento de hipótesis. A partir de aquí, aportarán su know-how en la priorización de la estrategia de testing, se coordinan con el equipo de desarrollo para preparar los tests AB y las implementaciones finales.

 

Decisiones basadas en datos, sí, pero soluciones basadas en creatividad.

 

Heatmaps, scrollmaps, wireframes...
Heatmaps, scrollmaps, wireframes…

Desarrollo frontend y backend

Los desarrolladores de la agencia CRO son menos responsables a nivel estratégico, pero imprescindibles a nivel operativo. Implementar correctamente y minuciosamente las herramientas de medición y analítica web es una tarea bastante compleja si queremos análisis adecuados y profundos (Analytics puede ser tan engañoso…). Un desarrollador especializado en bussines data es un tesoro.

El equipo de desarrollo instala en el sitio web todas las herramientas que necesita el resto del equipo. Pero después serán los responsables de desarrollar, tanto a nivel de frontend como de backend, los tests AB (o multivariante) que se ejecutarán en el roadmap diseñado por el equipo de optimización. Y, finalmente, se encargarán de implementar aquellos cambios que, estratégicamente, se valoren como positivos para el rendimiento del negocio.

 

Analistas web

Este perfil está menos definido pero es de un alto valor. Sus habilidades pueden ser infinitamente diversas, por eso digo que está menos definido. Un analista web es un especialista en datos, sabe interpretar los números, discrimina valores engañosos y poco relevantes estadísticamente, segmenta adecuadamente a la audiencia… En una agencia CRO, puede ser el pilar clave sobre el que se cimente un proyecto de optimización. Alguien que interprete los datos cualitativos y cuantitativos de forma certera e identifique las debilidades y oportunidades del sitio web puede ser un aporte fundamental al éxito del proyecto. Acumula datos, tiene un histórico en la cabeza, sabe filtrar y es capaz de predecir comportamientos en base a números. Será la base de los proyectos, presente en todas las fases.

Análisis web
Análisis web

 

Marketing online: PPC managers, social community managers…

No todo lo que genera incrementos en la tasa de conversión se desarrolla dentro del sitio web. Las personas encargadas de conducir tráfico a nuestra página tienen la gran responsabilidad de hacer que ese tráfico sea el adecuado y tenga la mayor predisposición para la conversión. Un anuncio en AdWords que crea expectativa, redes sociales hablando de nuestra marca, un video en YouTube que viraliza, una campaña de email marketing con una llamada a la acción en el momento adecuado, una estrategia de SEO…

Generalmente nuestros gestores de cuentas de PPC, de perfiles creativos y analistas, se encuentran en el comienzo del proceso de compra, ellos son los responsables de la parte de “Awareness” y del “Interest” del embudo. En términos deportivos, son los que inician la jugada… y ya sabemos que pasa cuando el primer pase es malo 😉

 

Psicología del usuario: neuromarketing, copywriters…

¿Por qué los usuarios hacen lo que hacen? ¿Por qué no compran nuestro producto? A veces, la respuesta está clara, se basa en datos y te la dará el equipo de desarrollo, o el de UX, o el analista… Estás impactando a un público que no es el tuyo, un botón no funciona, o no parece un botón… Pero cuando ninguno de ellos tiene la respuesta, cuando todo en el sitio web está teóricamente bien (no nos engañemos, es la mayoría de las veces), entonces hay que buscar respuestas en otra base de conocimiento, hay que acudir a los procesos mentales de toma de decisiones. Los especialistas en neuromarketing y copywriting, coordinados con diseñadores y analistas, pueden descubrir fallos de comunicación de nuestro sitio web: cómo y por qué estamos generando ansiedad en el usuario, por qué no somos convincentes o persuasivos…

A nivel de neuromarketing se pueden plantear tests AB de lo más interesante: aquellos que tratan de manejar las emociones del usuario de nuestro sitio web.

 

Un momento… ¡no te olvides de nuestro experto en servidores!

Es difícil que haya uno de ellos in-house en una agencia de marketing. Pero en un proyecto de CRO puede ser fundamental. Los backenders y frontenders pueden hacer mucho por mejorar los tiempos carga. Pero tu experto en sistemas y servidores puede hacer otro tanto, a veces con efectos más notables.

Por si no lo tenías claro, el tiempo de carga y la tasa de conversión de un ecommerce tienen una relación de amor-odio, representada en gráficas como la siguiente:

Cómo afecta el tiempo de carga a la tasa de coneversión - via econsultancy.com
Cómo afecta el tiempo de carga a la tasa de conversión – via econsultancy.com

Formularios eficientes para una mejor tasa de conversión

En este artículo vamos a valorar algunas prácticas recomendadas en la conceptualización e implementación de un formulario eficiente en un sitio web buscando una mejor experiencia de usuario.

Un formulario puede significar cerrar una venta o, al menos, iniciar el proceso de una venta. Dependiendo del modelo de negocio, el paso para rellenar formulario puede encontrarse más arriba o más abajo del embudo de conversión: puede ser una microconversión o puede cerrar el embudo con una venta (TOFU, BOFU…). Vamos a pensar en algunos ejemplos sencillos:

  • En un ecommerce, un usuario que quiere comprar un producto tendrá que finalizar su compra con un formulario. ¡Qué importante es este formulario!
  • En la landing page de una campaña de publicidad de una compañía SaaS, un formulario puede significar que un usuario se lanza a probar una demo de nuestro producto. Este usuario está mucho más cerca de convertirse en un cliente.
  • En un blog, que vive del volumen de tráfico, fidelizar a un usuario a través de la suscripción supone visitas recurrentes de gran valor. Y, efectivamente, esta suscripción se realiza a través de un formulario.

Ejemplo de un formulario de generación de leads
Ejemplo de un formulario de generación de leads

Descuidar la experiencia de usuario, en general, de un sitio web alejará al negocio del éxito con total seguridad. Descuidar aspectos de UX/UI del formulario de conversión de un sitio web puede marcar la diferencia.

A continuación, vamos a hablar sobre usabilidad y eficiencia en la conceptualización, diseño y desarrollo de formularios online. Existen miles de estudios sobre elementos muy específicos de un formulario, años de análisis y testeo de rendimiento, así que haremos una valoración general de los aspectos claves que pueden determinar el éxito de un formulario eficiente:

Estructura del formulario: mejor en 1 columna

Durante años se ha insistido (mucho) en la importancia de mantener la información “above the fold”. Todavía es una discusión latente, de hecho. Esto nos llevaba a utilizar todo tipo de trucos para aprovechar al máximo el espacio vertical del navegador. Si llevas más 3 o 4 años entre mockups, frontenders, UX… sabrás de lo que te hablo y tendrás el mismo trauma que yo.

Pues bien, uno de esos trucos para evitar el scroll en un sitio web, era componer los formularios en 2 columnas, obligando al usuario a hacer el esfuerzo extra de interpretar el flujo de contenido en 2 direcciones: de arriba a abajo y de izquierda a derecha, o al revés. Puede que parezca obvio, pero todavía es más obvio si el flujo es unidireccional y, además, seguimos el orden habitual en la navegación online (de arriba a abajo). Se deduce de esta argumentación que la mejor forma de plantear el diseño de un formulario es en 1 columna, con un campo debajo de otro. Esto, hablando de experiencia en dispositivos móviles, es mucho más fácil de imaginar y de aceptar. Más adelante, en este artículo, lo comentamos.

Pero ¡ojo!, un formulario excesivamente largo en una página que exige mucho scroll vertical puede ser un obstáculo importante para la conversión. El usuario se encuentra ante una tarea de la que desconoce su complejidad y duración. Ante este nuevo problema, es importante abordar el siguiente punto del artículo para plantear formularios eficientes en base a su longitud.

Ejemplo de formulario en 2 columnas
Ejemplo de formulario en 2 columnas

Estudia la longitud del formulario: solo los datos necesarios

¿Cuántas veces hemos leído que “cuantos menos campos, mejor”? Yo, infinitas. Pero luego me encuentro con que cada modelo de negocio es un mundo diferente y que, a veces, formularios más extensos suponen mayores tasas de conversión. Y, también, nos encontramos con formularios que, con tasas de conversión aceptables, nos devuelven leads de baja calidad para el negocio y nos hace invertir demasiado tiempo (y dinero) en la discriminación posterior de estos contactos, haciendo disminuir el ROAS. Un formulario con menor tasa de conversión pero que resulta en leads más cualificados también es un formulario eficiente.

Dicho esto, la longitud de un formulario se ha de determinar, fundamentalmente, por los datos estrictamente necesarios para una conversión válida para el modelo de negocio. Si decides eliminar el campo “teléfono” de tu formulario de generación de leads pero luego te resulta imposible finalizar una venta por email, el campo teléfono es para ti un campo imprescindible. Es lógico que el negocio quiera saber el máximo de datos de un cliente (o potencial cliente), pero hay que definir bien cuáles son estrictamente necesarios para conseguir leads de calidad.

Además, también es fundamental diferenciar claramente los campos obligatorios de los opcionales. Hemos entendido que los campos marcados con un asterisco * son aquellos que son obligatorios. Pero, una vez más, obligamos al usuario a un doble esfuerzo de interpretación. ¿Por qué no hacerlo más obvio? Marca los campos opcionales como “OPCIONAL”, es más fácil de interpretar y, además elimina la ansiedad que generan los asteriscos y su obligatoriedad.

Marcar campos obligatorios vs. campos opcionales - by https://www.fusionbox.com
Marcar campos obligatorios vs. campos opcionales – by https://www.fusionbox.com

Siguiendo con el hilo del punto anterior del artículo sobre la estructura de los formularios en una columna: ¿qué ocurre cuándo un formulario es excesivamente largo y genera un scroll demasiado largo? Esto provoca ansiedad e incertidumbre en el usuario, que se enfrenta a una tarea de duración incierta pero aparentemente larga. Qué se puede hacer:

  1. Es importante ordenar de forma lógica los campos del formulario y, además,  agruparlos en bloques según su naturaleza (datos personales, datos de pago, direcciones…).
  2. Dividir el formulario en diferentes pasos elimina el grado de ansiedad, ya que el usuario se enfrenta a tareas más sencillas y secuenciadas.
  3. Muestra el nivel de progreso de la tarea. Dile al usuario cuánto le queda para acabar, en qué paso se encuentra, cuántos pasos le quedan.

La propuesta de valor de un formulario: encabezados y llamadas a la acción

No hay mucho que explicar, pero es algo que se olvida con facilidad. Podemos ser muy convincentes y muy persuasivos a lo largo de todo el story telling de nuestro sitio web, nos empeñamos en ello. Pero llegamos al formulario y le dedicamos un triste y frío encabezado como “Registro”. Sin una propuesta de valor, sin ofrecer nada a cambio. Recuerda que te encuentras en la puerta de una posible venta, ya lo decía al principio del artículo.

La propuesta de valor de un formulario
La propuesta de valor de un formulario

Ocurre algo parecido con las llamadas a la acción. Es importante ser claro y obvio, ¿por qué no? Si estamos ante un formulario para solicitar una demo de un software, seguro que es mejor que la llamada a la acción sea “Solicitar Demo” en lugar de “Enviar”, porque eso es exactamente lo que hace ese botón. Sí, también envía los datos del formulario. Pero “Enviar” no supone ninguna propuesta de valor para nuestro usuario. Y mucho menos una recompensa.

Claridad en el etiquetado y los mensajes de ayuda (floating labels)

Las etiquetas (<label>) son una parte fundamental de la usabilidad de un formulario. Describen el dato solicitado en su campo correspondiente, así que deben ser claras, fáciles de leer e interpretar. Algunas best practices sobre las etiquetas para formularios eficientes:

  1. Claridad: utiliza nomenclaturas comunes y reconocibles (“nombre”, “email”, “comentarios”…).
  2. Situa la etiqueta sobre el campo, mejor que en línea a su izquierda. Facilita la lectura según el flujo de información de arriba a abajo y evita la bidireccionalidad de la lectura (arriba-abajo, izquierda-derecha). En dispositivos móviles esta práctica es casi obligatoria. (Esto genera mayor contenido en vertical y más scroll, lo sé…)
  3. No sustituyas las etiquetas por placeholders. Es tentador por su aspecto minimalista, pero recuerda que el placeholder desaparece una vez que el usuario está sobre el campo y obligas al usuario a un pequeño esfuerzo de memoria extra innecesario. Complementa placeholders con etiquetas flotantes:

Ejemplo de labels flotantes en vivaconversion.com
Ejemplo de labels flotantes en vivaconversion.com

Feedback visual y validación de los campos

Reducir el tiempo que cuesta completar la tarea de rellenar un formulario se traduce en aumentar la tasa de conversión. Reducir la ansiedad y la incertidumbre del usuario frente a esta tarea también se traduce en mejora de la tasa de conversión. Un formulario produce incertidumbre a un usuario cuando este ejecuta la acción de envío del formulario porque no tiene claro qué ocurrirá a continuación, si lo ha hecho todo bien, si funcionará… Produce ansiedad cuando el formulario devuelve un error y el usuario no es capaz de identificar cómo arreglarlo o cree que le llevará demasiado tiempo.

En el diseño de la experiencia de uso de un formulario, nos podemos adelantar a estas pequeñas catástrofes y reducir su impacto. Cinco prácticas muy recomendadas:

1. Ayudas e instrucciones sencillas

Si un campo tiene unos requisitos propios (solo admite números, por ejemplo), déjalo claro. No esperes a que el usuario lo adivine.

2. Validación de los campos en tiempo real

Muy sencillo de explicar (no tanto de implementar). El usuario entra en el campo, lo rellena y pasa al siguiente. En ese instante en el que el usuario da por acabada la tarea de rellenar ese campo, la aplicación le dice si el campo es válido o no. Así lo puede corregir en ese mismo momento, antes de ir a la acción y esperar una validación posterior. Si hacemos esto con todos los campos del formulario, el usuario puede estar seguro de que cuando finalice el formulario, todos los campos estarán correctamente cumplimentados.

Ejemplo de validación de formularios en tiempo real - deezer.com
Ejemplo de validación de formularios en tiempo real – deezer.com

3. Mensajes de error junto a cada campo

Seguro que te has topado con un formulario que te ha devuelto una lista de errores (después de accionarlo) en la cabecera del sitio web: te has olvidado un campo, el teléfono no es válido… Si el formulario tiene 4 campos, no es un gran problema. Pero en un formulario de finalización de compra, con multitud de campos relevantes, puede ser un obstáculo importante para la eficiencia de un formulario.

Lo mínimo que podemos hacer por nuestro usuario es destacar los campos no validados y mostrar el mensaje de error asociado junto a ellos. Cada error con su campo. Fácil.

4. Feedback visual

Hay muchas formas de dar una buena respuesta visual en el manejo de formularios online. Destacamos dos:

  1. Muestra de alguna forma que un campo es válido (un borde verde, un check, etc.)
  2. Cuando el usuario finaliza el formulario y pulsa en el botón de acción, demuestra que algo está pasando: un mensaje “enviando formulario…”, desactiva el botón…

5. Valores por defecto inteligentes: Endowed Progress effect

Descrito en 2006 por los Joseph C. Nunes and Xavier Dreze, el Efecto de Progreso Otorgado (Endowed Progress Effect) es un fenómeno por el cual a la gente que se le provee un avance “artificial” en la consecución de un objetivo muestra mayor persistencia en alcanzar dicho objetivo.

En otras palabras, los usuarios son más proclives a completar una tarea si obtienen un avance artificial previo, en lugar de enfrentarse a una tarea desde el comienzo.

¿Cómo traducimos esto a la experiencia de uso de formularios? Sencillo, utilizando valores por defecto en aquellos campos donde el usuario tenga que enfrentarse a una elección. Dos ejemplos sencillos:

  1. Si el 90% de nuestros usuarios es de Francia, en el combo de selección de País, la opción pre-marcada es Francia.
  2. Si le preguntamos al usuario algo que probablemente desconozca como: “¿Qué tipo de almohada utilizará?”; ofrécele una opción pre-marcada, para que pueda obviar la pregunta sin bloquear el resto del formulario.

Formularios en dispositivos móviles

Todo lo que hemos abordado hasta ahora es independiente del dispositivo en el que el usuario esté llevando a cabo la ejecución de la tarea de rellenar un formulario.

Es especialmente importante mantener las etiquetas siempre visibles junto al campo para ayudar al usuario a identificar los campos en todo momento, incluso si quiere revisar los campos que ya ha rellenado.

Por otro lado, también es fundamental aprovechar las ventajas de las herramientas nativas de los dispositivos móviles (teclados numéricos, configuración de teclados para emails, etc.). Utilizar campos con types específicos hará mucho más sencilla y rápida la tarea de rellenar el formulario.

Ejempos de teclados adaptados al tipo de input
Ejempos de teclados adaptados al tipo de input

La importancia de medir y el riesgo de confiar ciegamente en las best practices

¿Cuáles son los puntos críticos de un formulario?

Aplicar lo mismo que le funciona a tu competencia (y al 60% del mercado) es un buen punto de partida. Tu propia experiencia, el mejor know-how, un buen análisis y las mejores best practices son, sin duda, los ingredientes de un buen proyecto de usabilidad. Pero los mejores y más valiosos insights nos lo darán nuestros propios usuarios a lo largo del tiempo: la cruda realidad. Analizar, aprender y mejorar: data-driven design.

Hablando de eficiencia en formularios: la mejor forma de saber qué campos son críticos y cuáles deberías plantearte eliminar es conocer la experiencia real de nuestros usuarios. La mejor forma de saber cuánto les cuesta rellenar nuestro formulario es medirlo. Medirlo todo. Extraer conclusiones y aplicar mejoras de forma continua: CRO (Optimización de la tasa de conversión).

¿Cómo trackear el comportamiento de los usuarios en un formulario?

Fundamentalmente, estas son las métricas que nos pueden hablar del rendimiento de un formulario online:

  1. tiempo medio para completar el formulario
  2. tiempo medio para completar cada campo
  3. tasa de abandono en cada campo
  4. tasa de conversión

De entre las muchas herramientas para analizar formularios, nombraremos tres muy diferentes entre sí y que pueden complementarse dependiendo de los requisitos del modelo de negocio o las especificaciones técnicas del propio formulario.

  1. Hotjar: reconoce automáticamente los formularios de una URL proporcionada y mide los tiempos medios por campo, las tasas de abandono, la tasa de modificaciones de cada campo y la tasa de conversión.
  2. Formisimo: es la herramienta más específica para formularios con segmentaciones de usuarios bien estructuradas y capaz de trackear formularios bajo cualquier tecnología (muchas herramientas tienen serios problemas con AJAX).
  3. Google Analytics: ya conocemos GA. No le hace falta presentación. Eso sí, para obtener estas métricas tan específicas de las que hablamos, nos va a hacer falta una buena configuración de seguimiento de eventos. Con Google Tag Manager, mejor.

Analytics y diseño: 9 métricas fundamentales en UX/UI

¡Ojo! No sólo de datos vive el creativo: un análisis meramente cuantitativo puede cegar la toma de decisiones. Olvidar aspectos emocionales en el desarrollo de un proyecto de diseño y usabilidad puede suponer el fracaso de una campaña de publicidad. Los datos cuantitativos nos hablan del qué, cuándo y dónde. Los cualitativos del porqué. Y aquí los números pierden relevancia.

La relación entre UX Research, diseño y Analytics

Las métricas que extraemos de la monitorización de un sitio web han de servir, fundamentalmente, para detectar los problemas que encuentran los usuarios y los obstáculos que dificultan la consecución de nuestros objetivos.

Detectado un problema, el análisis cualitativo y cuantitativo nos ayudará a generar una propuesta creativa para su solución. Esto es, en parte, user-centered design, pero también data-driven design. En viva! nos declaramos fans de ambos conceptos.

Aplicando metodologías data-driven al diseño web nos encontramos la necesidad constante de establecer y medir KPIs

Esto nos obliga a mantener una conversación permanente con el equipo de Marketing, los Account Managers y Business Intelligence.

En proyectos de Conversion Rate Optimization, la iteración cobra mucha más relevancia: encontrar los obstáculos hacia la conversión requiere la monitorización constante del sitio web.

Los datos, cualitativos y cuantitativos nos ayudan a realizar hipótesis de mejora y a tomar decisiones.

Data-driven design process - by analyticshero.com

En este artículo vamos a enumerar 9 métricas cuantitativas (numéricas) que podemos extraer de Google Analytics para facilitar la toma de decisiones del equipo de UX/UI.

No tienen por qué ser directamente KPIs, sino signals (señales) tal y como se indentifican en el framework HEART de Google.

Métricas de UX y UI esenciales para tu negocio

En esta infografía de Cooler Insights se muestra la influencia de algunas métricas de UX a lo largo del embudo de conversión de un sitio web:

Digital Marketing Funnel u métricas de UX - by coolerinsights.com
Digital Marketing Funnel – by coolerinsights.com

1. Tasa de conversión / Conversion Rate (CR)

La madre de las métricas de UX. Es un dato peligroso porque es la primera que va a supervisar el equipo de ventas pero no siempre es el principal indicador del funcionamiento de un sitio web (ya sea ecommerce o una landing page de lead generation).

Esto se puede explicar de varias formas (como hace este artículo de Smart Insights), pero me quedo con el simple hecho de que no todas las conversiones tienen el mismo valor y puede que una tasa de conversión alta no signifique un alto rendimiento de un sitio web.

Lectura relacionada: Cómo registrar el valor de las conversiones en Google Ads

Dicho esto, la tasa de conversión es la métrica que, de forma general, nos ayudará a determinar el rendimiento de un sitio web: De todos nuestros usuarios, ¿qué porcentaje se convierten en clientes?

Una conversión es la consecución única de un objetivo que generalmente será algo como: venta, registro o contacto. Así pues, la tasa de conversión es el ratio de conversiones por usuarios de nuestro sitio.

Tasa de conversión (Conversion Rate) = Conversiones / Visitas

Es muy importante que definamos qué es una conversión en nuestro sitio. De esta forma, nuestra tasa de conversión puede traducirse, por ejemplo, en los siguientes objetivos:

  1. Usuarios registrados
  2. Ventas únicas
  3. Leads: contactos realizados
Conversión en un formulario - vivaconversion.com
Conversión en un formulario – vivaconversion.com

En Google Analytics habrá que definir y configurar los objetivos que vamos a medir como conversiones. No es una métrica por defecto, ya que cada sitio web tiene sus propios objetivos. Google lo explica bien aquí.

2. Tasa de rebote / Bounce Rate

La tasa de rebote mide el ratio de usuarios que abandonaron el sitio web habiendo visitado únicamente la página que estamos trackeando.

Es decir, la tasa de rebote de nuestra página de contacto mide el porcentaje de usuarios que llegaron directamente aquí y, sin haber visitado ninguna otra sección de nuestro sitio, abandonaron.

Sirve para medir el nivel de engagement de una página de aterrizaje (landing page).

Para sitios web con una sola página (ni siquiera una thankyou page), la tasa de rebote siempre será del 100% y, en ese caso, no podremos utilizar esta métrica en nuestra toma de decisiones.

3. Tasa de salida / Exit Rate

Esta métrica mide el porcentaje de usuarios que abandonaron el sitio web desde la página que estamos trackeando, el ratio de sesiones en las que la última página fue la que estamos midiendo.

Es fácil, la página de salida de un sitio y una sesión es la última que se vio en dicha sesión.

Nos puede ayudar a determinar qué páginas están provocando el abandono de nuestros usuarios. Una página donde la navegación sea confusa o donde el contenido no corresponda con lo que promete el título o simplemente no sea de calidad.

4. Tiempo medio de sesión / Session duration

El nombre lo dice todo: tiempo medio de la sesión. O sea, la media de tiempo que pasan los usuarios en nuestro sitio web.

Para un sitio donde el contenido es masivo y dinámico, esta métrica es fundamental.

Para un ecommerce, el tiempo medio de sesión combinado con otras métricas de UX puede ayudar a comprender el proceso de decisión de compra de los usuarios, la facilidad de uso y comprensión de nuestro sitio.

Tiempos de sesión muy altos con tasas de conversión muy bajas pueden indicar que el proceso de compra supone un obstáculo de usabilidad.

Si, además, comprobamos tasas de salida muy altas en nuestra página de carrito, podemos empezar a pensar en revisar la experiencia de uso de nuestro proceso de checkout.

5. Páginas vistas por sesión / Page per session

Poco que explicar, ¿no? Está muy relacionado con el tiempo medio de sesión, pero todavía nos habla más del nivel de interacción de los usuarios.

En blogs y sitios de contenido, el número medio de páginas/sesión puede hablar directamente del éxito del sitio web: cuantas más páginas por sesión, mayor atracción se provoca en los lectores/consumidores/usuarios. Y, con más probabilidad, se convertirán en usuarios recurrentes.

En tiendas online, el número de páginas por sesión puede ayudarnos a saber lo rápido y fácilmente que los usuarios encuentran el producto que buscan. Y también puede ayudarnos a explicar el ticket promedio de nuestras ventas, así como a elaborar estrategias de venta cruzada.

6. Sesiones / Sessions

No es la métrica más importante para el equipo de diseño y usabilidad. Pero conocer la muestra estadística de la que intentamos extraer conclusiones sí que puede ser relevante para conocer la significancia estadística de los datos.

Conocer el patrón de comportamiento de un usuario en un sitio web con poco tráfico es mucho más complicado.

¿Conoces la extensión Page Analytics para Google Chrome?
¿Conoces la extensión Page Analytics para Google Chrome?

7. Visitantes nuevos vs. recurrentes

La experiencia de uso de un visitante nuevo no debería ser igual que la de un visitante recurrente. Ahora mismo es el caballo de batalla de muchos sitios web: la personalización de la oferta.

Del usuario que vuelve ya sabemos muchas más cosas que del que llega nuevo: sabemos lo que espera de nosotros y lo que le gusta.

Esta útil métrica de Google Analytics nos ayudará a medir, además, el nivel de fidelización que estamos consiguiendo con el diseño, la usabilidad y la experiencia de uso de nuestro sitio web.

8. Ratio de Clicks / Click Through Rate (CTR)

El CTR es fundamental, sobre todo, en el diseño de publicidad gráfica online.

El Ratio de Clicks mide el porcentaje de usuarios que hacen click en un anuncio o banner respecto al total de usuarios que lo visualizan.

Ratio de clicks (CTR) = clics / impresiones

Click on Display ad - métricas de UX
Click on Display ad

9. Ticket promedio / Average Order Value

No hay vuelta de hoja: cuánto más alto el ticket promedio, mejor. El ticket promedio (AOV) es el valor medio de nuestras ventas únicas, el valor medio de los carritos procesados.

¿Y qué relación directa puede haber entre una decisión de UX y el ticket promedio?

La empresa debe determinar un ticket promedio según su volumen de tráfico para garantizar la viabilidad del negocio.

Y en este caso no se trata de aumentar la tasa de conversión, sino de que la conversión sea de más valor.

Es decir, que nuestros usuarios compren más productos o más caros. La experiencia de uso y el diseño del sitio ha de favorecer que el usuario esté dispuesto a añadir más productos al carrito o a añadir aquellos de mayor valor.

Decisiones basadas en datos, sí, pero soluciones basadas en creatividad.

…y, por supuesto, ¡todo bien segmentado!

Ya lo decíamos al principio del artículo, hablamos de métricas de UX numéricas como señales del rendimiento de los KPIs de nuestro sitio web.

No hemos hablado directamente de KPIs. Podrían coincidir, pero probablemente no lo harán.

Así que, para acercarnos mejor a conclusiones certeras, es fundamental segmentar todas estas métricas. Google Analytics nos ayudará a extraer informes detallados dependiendo de:

  • dispositivos (móvil, escritorio, tableta)
  • navegador y sistema operativo
  • datos demográficos
  • fuente del tráfico (PPC, orgánico, social,…)
  • etc.

Por ejemplo, puedes enviar datos de transacciones a Google Analytics mediante un protocolo de medición.

Si quieres saber más o configurar tus analíticas de negocio, ponte en contacto con nosotros y te ayudaremos.

Data-driven design: decisiones basadas en datos

Las estrategias y la toma de decisiones basadas en datos minimizan los riesgos, evitando apoyar el 100% del argumento de una decisión en know-how, criterios personales y lógica de negocio; y si el histórico de datos es estadísticamente relevante, ese riesgo se reduce más. Y cuando hablamos de riesgo y diseño, hablamos de la probabilidad de que un diseño funcione o no, no de que guste o no. Nuestra propuesta le puede gustar al CEO, le puede gustar a nuestros amigos y, por supuesto, nos puede gustar al equipo de diseño. Pero si el diseño de nuestro sitio web no ayuda a cumplir los objetivos de nuestro negocio, nos encontramos con un diseño que no funciona.

Antes de seguir, una definición del término data-driven, extraída directamente de Wikipedia:

The adjective data-driven means that progress in an activity is compelled by data

Es decir, una actividad data-driven es aquella que progresa dirigida por datos. Para rematar, lo voy a combinar con la definición de diseño web ofrecida por Wikipedia, lo que nos deja una explicación de data-driven design bastante comprensible:

El data-driven design (o diseño web dirigido por datos) es una actividad que consiste en la planificación, diseño, implementación y mantenimiento optimización continua de sitios web. Abarca diferentes aspectos como el diseño gráfico web, diseño de interfaz y experiencia de usuario y el proceso de toma de decisiones está guiado por métricas e indicadores clave.

Decisiones basadas en datos e investigación, no en opiniones (encuestas, Analytics, A/B testing)

De acuerdo, pero ¿qué datos utilizar para un diseño web data-driven?

Aquí hay demasiada tela que cortar. Para no hacer un artículo eterno, ahí va una enumeración rápida y muy simplificada de 5 métricas fundamentales para el equipo de UX:

  1. Tiempo medio de sesión
  2. Páginas/sesión
  3. Usuarios nuevos vs. recurrentes
  4. Tasa de conversión
  5. Tasa de rebote

Proceso iterativo: nunca un diseño es el definitivo

El diseñador web más creativo y genial del mundo nunca creará una interfaz perfecta. El experto en usabilidad no desarrollará la experiencia de uso perfecta. Esto, para el equipo de diseño de la agencia, es un alivio. Resta presión. Pero también obliga a estar en una búsqueda constante de la mejora progresiva, no parar el proceso en la implementación del producto.

Proceso iterativo de diseño - infografía de Corrine Ellsworth Beaumont
Proceso iterativo de diseño – infografía de Corrine Ellsworth Beaumont

Las diferentes disciplinas del diseño tienen mucho en común. La actividad de diseño es, conceptualmente, la misma para todas. Haciendo un esfuerzo mental, hagamos una analogía entre el diseño de un e-commerce y el diseño del mando de Play Station. Cuando Sony les pidió a los diseñadores industriales el diseño del mando de la Play 2, estos aplicaron los datos que ya habían obtenido del diseño de su primera versión. Es decir, data-driven design, basado en pruebas con usuarios, encuestas…

Si aquel equipo de diseño encargado del primer mando de la PlayStation creyó haber diseñado algo perfecto, suponemos que debieron reconsiderar esta opinión. Y, además, varias veces:

La evolución del diseño del mando de Play Station
La evolución del diseño del mando de Play Station

Framework HEART para un enfoque UX parametrizable:

Qué es HEART

HEART es un framework para medir la calidad de la experiencia de usuario. Surgió de la necesidad de establecer objetivos UX y de medirlos y fue desarrollado por el equipo de usabilidad de Google.

El framework HEART de Google es aplicable a sitios web, aplicaciones (móviles, software en general…) y a sus propias funcionalidades. Es decir, se puede segmentar al detalle para métricas más precisas. Aplicado a sitios web, que es nuestro campo de batalla, este framework trata de hacer más fácil la medición del éxito de un diseño, estableciendo objetivos claros y parametrizables, ya que los datos extraíbles de herramientas de análisis de tráfico web (veáse Google Analytics) suponen una gran cantidad de información que requiere mucho tiempo de discusión para establecer el rendimiento global de un diseño y de la experiencia de usuario que éste proporciona.

Los indicadores o métricas se dividen en 5 categorías (Happiness, Engagement, Adoption, Retention, Task success) que engloban los objetivos globales que se le pueden presuponer a una propuesta de diseño:

  • Happiness: Categoría cualitativa que trata de medir el nivel de satisfacción creado en el usuario. ¿Le ha resultado fácil e intuitivo? ¿Agradable, atractivo?
  • Engagement: Medición cuantitativa del nivel de interacción del usuario con la aplicación, incluyendo tiempo de sesión, páginas vistas, recurrencia, profundidad de la navegación.
  • Adoption: Medición de la captación de usuarios o clientes.
  • Retention: Nivel de recurrencia y fidelidad de los usuarios del sitio web. ¿Vuelven? ¿Siguen comprando? ¿Recomiendan? ¿Son usuarios activos?
  • Task success: engloba los objetivos más directos y que tienen que ver con la consecución exitosa de una o varias tareas por parte del usuario, como rellenar un formulario, comprar cierto producto, realizar una búsqueda…

Cómo aplicar HEART

Con el fin de sopesar el éxito y el rendimiento de una propuesta UX, el framework HEART establece métricas asociadas a objetivos que permitan tomar decisiones orientadas por datos. Dentro de cada una de las categorías descritas (H E A R T), el equipo define uno o más objetivos y asocia su consecución a una métrica concreta, determinando los indicadores genéricos que tendrán que tener en cuenta para trackear el progreso de dichos objetivos. Por puntos:

  • Goals / Objetivos: la clave de establecer los objetivos de un sitio web es pensar desde el top of the funnel (TOFU). Marcar como objetivo algo tan low of the funnel (LOFU) como “aumentar la facturación de la empresa” no permitirá utilizar con éxito el framework HEART.
  • Signals / Indicadores: lo podemos asociar al concepto de KPI (Key Performance Indicator), que utilizamos constantemente en nuestras estrategias de CRO (Conversion Rate Optimization). Los indicadores se definen para dar una visión general del éxito (o fracaso) del objetivo al que se asocia.
  • Metrics / Métricas: la traducción cuantitativa de un objetivo y su indicador. Definiremos una métrica que permita determinar la mejor o peor consecución de un objetivo.

Un ejemplo

El equipo de diseño y usabilidad determina, en conversación directa con el equipo de ventas, que nuestro sitio web tiene que generar interés en los usuarios. Tenemos mucho contenido y queremos que nuestros usuarios consuman cuanto más mejor.

Así pues, ya tenemos la categoría donde vamos a englobar nuestro objetivo: Engagement.

Nuestro objetivo está claro: atraer y enganchar a los usuarios.

Un buen indicador será el tráfico total en la web. También las veces que nos mencionen o compartan en redes sociales. Si notamos un aumento del tráfico general, será una buena señal para la consecución de nuestro objetivo. Y las métricas más apropiadas para medir nuestro objetivo serán el tiempo por sesión y las páginas por sesión.

Analytics puede ser un buen amigo del equipo de diseño

Como conclusión, 5 razones a favor de las métricas aplicadas al diseño web, a favor del data-driven design:

  1. Las métricas son la forma más efectiva de defender una propuesta diseño. ¿Cumple los objetivos? Dejemos que respondan los números.
  2. Las métricas te dirán si un diseño funciona o no. Os podrá enamorar vuestra propuesta, pero ¿y a vuestros usuarios? Este artículo de Crazy Egg os puede hacer reflexionar: Why Ugly Website Design Often Converts (Better).
  3. Testear para medir: evita riesgos.
  4. Los jefes y los clientes aman las métricas. Incrementos, gráficas ascendentes…
  5. Data-driven y creatividad no son incompatibles. De hecho, son complementarios y se necesitan el uno al otro. Me quedo con esta frase de un diseñador creativo de Google y Twitter que habla de la conexión de los datos y la creatividad:

Reduce each decision to a simple logic problem. Remove all subjectivity and just look at the data (…) And that data eventually becomes a crutch for every decision, paralyzing the company and preventing it from making any daring design decisions

Google Optimize: la herramienta de CRO para Analytics

Google Optimize es una herramienta integrada en la suite Analytics 360 y es el servicio creado por Google para AB testing. Optimize permite crear, gestionar y revisar experimentos en un website para obtener feedback directo de los usuarios y comprobar el rendimiento de diferentes variantes de diseño, funcionalidad o contenido.

Siendo parte de la Suite Analytics 360, está nativamente integrado con Google Analytics, lo cual obliga a ser propietario (permisos de administrador) de una cuenta en Analytics para crear “un contenedor” (no para darse de alta) asociado a dicha cuenta.

Precedentes de Google Optimize 360

El término CRO (Conversion Rate Optimization: optimización de la tasa de conversión) es relativamente reciente; el concepto de experimentación en marketing, no. Google lleva varios años ofreciendo herramientas para optimización y testeo de páginas web, pero parece que han dado un paso definitivo con Optimize. Las búsquedas de “Conversion Rate Optimization” suben y suben progresivamente:


Google lanzó su herramienta Google Website Optimizer en 2007. En concepto, Website Optimizer servía para lo mismo que Optimize. Como muestra, un screenshot:

Google Website Optimizer Screenshot
Google Website Optimizer Screenshot

Con Google Website Optimizer se podían crear experimentos en un sitio web de tipo AB Test y Multivariate, eligiendo la división de los usuarios que se dirigen a cada variante y ajustando como objetivo una URL de destino de la conversión o el Click Through Rate de un elemento específico. Bastante completo. Requería conocimientos más avanzados de programación, pero todas las herramientas de medición de hace 10 años tenían el mismo handicap.

Google “integró” su Website Optimizer en Analytics en 2012. Prácticamente se eliminó la posibilidad de edición de código para experimentar, forzando a testear siempre 2 URLs diferentes o a utilizar la API (para eso seguro que necesitas conocimientos avanzados!). Para entonces, Optimizely ya empezaba a tener su mercado como herramienta especializada en optimización de la tasa de conversión.

Entonces la gente de marketing empezó a ponerse seria respecto a la experimentación, a la optimización constante de KPIs y a una medición precisa. Y los diseñadores y desarrolladores se empezaron a poner serios con la usabilidad (UX) y empezaron a tomar decisiones en base a los datos. Y a Google le ha costado mucho dar el paso hacia una herramienta específica para CRO, ellos sabrán por qué.

En 2016 lanzaron Optimize 360 y desde ese momento, como era de esperar, el crecimiento ha sido rápido. Lanzaron una beta. Meses después lanzaron la versión gratuita (en beta también) accesible previa invitación. Y a principios de 2017 anunciaron que lanzaban la versión definitiva accesible para todo el mundo. Se movieron rápido.

Optimize vs Optimize 360

Cuando Google irrumpe en el mercado, se avecina tsunami. Y si lanza una versión gratuita, las piernas tiemblan.

Para necesidades de optimización básicas, la versión gratuita ofrece una solución útil y funcional. Optimize 360 está claramente destinado a grandes sitios web, que pueden permitirse el lujo de microsegmentar sus experimentos sin que se dilaten mucho en el tiempo.

Fundamentalmente las diferencias entre ambos planes son:

  • Uno es gratis y el otro no 😉
  • Con el gratuito no se puede segmentar por audiencias de Analytics (datos demográficos)
  • Configuración de objetivos personalizados. Sólo se puede hacer en 360.

De todas formas, aquí va la tabla comparativa oficial:

Comparativa de características Google Optimize vs 360
Comparativa de características Google Optimize vs 360

Qué tiene Google Optimize a favor

  • Algunos dirán que no es un punto a su favor. Pero ser propiedad de Google te garantiza una comunidad de soporte bastante potente. La versión 360 promete soporte personalizado, pero seguro que su competencia puede esto más y mejor, así que no diría que esto sea un +1 para Optimize 360.
  • Manejar la API de Analytics no es fácil. Integrar una herramienta externa de testing en Google Analytics puede ser complejo. Pero Google Optimize, dentro de la Suite de Analytics, tiene esa integración de forma nativa. De hecho, no podrás medir resultados de un experimento si no lo vinculas con una cuenta de Analytics (aunque esto podría ser una desventaja también…)
  • Han desarrollado un editor WYSIWYG (What you see is what you get) sencillo pero potente. Optimizely o Abtasty tienen editores bastante potentes también.
  • Integración directa con Google Tag Manager. En 2 pasos.

Puntos débiles de Google Optimize

  • Saben lo que hacen. Dan donde duele: la versión gratuita no permite medir objetivos personalizados. Sólo conversiones predefinidas en Analytics y otros objetivos preseleccionados (tasa de rebote, páginas vistas).
  • No hay una API disponible. No podremos integrar experimentos antes de renderizar nuestro sitio web, algo que Optimizely X hace muy bien.

Primeros pasos en Google Optimize

La configuración y el alta en Optimize es muy fácil. Al fin y al cabo, es un producto de Google. Lo conocemos, mejoran sus interfaces constantemente.

De una forma muy resumida, os dejamos el camino que hay que seguir hasta nuestro primer AB test.

  1. Darse de alta en la página de Google Optimize
  2. Crear una cuenta (la cuenta hace referencia a tu agencia, a tu cliente, a tu dominio…). Podríamos hacer una similitud con lo que representa un MCC en Google Adwords.
  3. Crear un contenedor (el contenedor hace referencia a un sitio web sobre el que vamos a hacer experimentos. Por ejemplo: “Nuestro blog”)
  4. Integrarlo en nuestro sitio: insertando un snippet o a través de Google Tag Manager.
  5. Linkear el contenedor con una cuenta de Analytics (son 2 clicks, no más)
  6. Venga ¡a crear experimentos!

En otro post, haremos un tutorial más desarrollado de esta herramienta de Google para CRO. Prometido.

CRO para vender más y gastar menos

Decisiones basadas en datos, en números. Lo vemos todos los días y cada vez más extendido a todos los ámbitos y todos los sectores. Data-driven decision making, data-driven business, data-driven strategies. Está de moda. Y nosotros nos alegramos (sobre todo el equipo de diseño y usabilidad) porque nos hace más fácil predicar con el ejemplo.

Un sitio web es algo vivo y es una herramienta de venta para cualquier negocio. Desde una landing page de captación de leads hasta un e-commerce suponen la herramienta de comunicación directa con los clientes. Una tasa de conversión del 2% supone que 98 de cada 100 personas que visitan nuestro sitio abandonan sin haber cumplido nuestro objetivo de venta. La Optimización de la Tasa de Conversión (CRO, acrónimo en inglés) se enfoca en saber por qué y cómo mejorar esa situación.

Qué es CRO y cómo puede ayudar a tu negocio online

Antes de todo, definamos qué entendemos por conversión. Una conversión en un sitio web es la acción de un usuario que supone el cumplimiento de un objetivo definido por el vendedor: rellenar un formulario, suscribirse a una lista de correo, solicitar una demo, comprar un producto… Hay tantos tipos de conversiones como tipos de negocio. Y no todos suponen una venta directa. El embudo de venta (sales funnel) puede ser muy complejo y nuestro sitio web puede ser un punto intermedio en todo el proceso.

La tasa de conversión es el ratio de conversiones por usuarios en la web. CR = Conversiones/Usuarios

CRO (Conversion Rate Optimization: optimización de la tasa de conversión) es vender más sin invertir más en captación de tráfico. CRO es un proceso estratégico de marketing digital para mejorar el rendimiento y maximizar la tasa de conversión en un sitio web.

Las medias de la tasa de conversión en comercio electrónico varían según el sector, pero siempre podemos echar un ojo a estadísticas globales para tener una aproximación de nuestros objetivos. En este sencillo gráfico de Statista.com se ve la evolución de la tasa de conversión a nivel mundial en ecommerce durante 2016.

Conversion Rate average Online Shoppers - 2016- by Statista
Conversion Rate average Online Shoppers – 2016- by Statista

Si gestionas una tienda online con un cierto recorrido, ya habrás pasado por la fase de construir una experiencia de usuario (UX/UI, diseño, usabilidad, programación…) y por la fase de atraer tráfico hasta tu sitio (posicionamiento, inbound marketing…). Ahora que el público entra en tu comercio e interactúa con él, es el momento de ofrecerles la mejor experiencia posible para convencerles de comprar: optimizar la tasa de conversión.

Una estrategia de CRO para ecommerce te ayudará a:

  • Construir el buyer persona de tu negocio
  • Conocer a los usuarios de tu sitio web
  • Identificar los puntos débiles de tu sitio. ¿Cómo te hace perder dinero?
  • Testear hipótesis de mejora mediante AB o MVT testing.
  • Aumentar ROAS
  • Vender más

Otra forma de captación de clientes es a través del formulario de una landing page. No todo es venta directa de productos. Si queremos que la gente que nos visita, interesada en nuestro servicio, nos deje sus datos, una buena estrategia es crear una landing page para lead generation y utilizarla como destino de una campaña Pay Per Click (AdWords, por ejemplo). Una campaña bien definida atraerá tráfico de calidad a nuestra landing page, donde debemos centrar nuestros esfuerzos en convertir a ese visitante en cliente. Es importante aplicar ciertos criterios de diseño a una página orientada a la captación de leads, pero el proceso debe ser iterativo, debemos aprender del comportamiento de los usuarios para mejorar el rendimiento de nuestra campaña y conseguir contactos de calidad. Este proceso iterativo es Conversion Rate Optimization, que puede ayudarnos a:

  • Conseguir una mejora progresiva del quality score de nuestros anuncios
  • Optimizar la calidad de los leads
  • Maximizar la tasa de conversión de forma progresiva
  • Aumentar ROAS
  • Vender más

Como decíamos antes, existen tantos tipos de conversiones como tipos de negocio. Muchas veces, focalizar nuestro esfuerzo en la tasa de conversión nos hace olvidar métricas que pueden ser claves en el rendimiento de nuestro sitio web y que pueden estar afectando de manera crítica a la tasa de conversión. Un proceso de CRO también es importante para:

  • Identificar KPIs de nuestro sitio web
  • Conocer los segmentos de usuarios de nuestra web e identificar sus necesidades
  • Optimizar nuestro embudo de ventas (sales funnel) y conversion path
  • Mejorar la percepción de nuestra marca a través de experiencias de uso más satisfactorias

WordStream ha creado esta infografía para ilustrar las medias de tasa de conversión en Google AdWords por industria:

Infografía: media de tasas de conversión en AdWords. By Wordstream.
Infografía: media de tasas de conversión en AdWords. By Wordstream.

Los beneficios de una estrategia de CRO

Si has leído el primer punto del post, ya debes tenerlo bastante claro. Pero vamos a aportar una visión más global de lo que ofrece la Optimización de la Tasa de Conversión al marketing digital:

  1. Construye el buyer persona de tu negocio: conoce mejor a los usuarios que se interesan por tu negocio y ofréceles exactamente lo que buscan. Desarrolla tu buyer persona (este artículo te explica cómo), te ayudará a crear estrategias ajustadas a las necesidades e intereses de tu público objetivo. Conociendo el comportamiento de los usuarios de tu sitio web puedes saber mucho sobre ellos, sobre sus intereses y sus actitudes, lo que facilita definir al buyer persona.
  2. Mejora Quality Score, reduce CPA (Cost Per Acquisition): el objetivo final es aumentar la tasa de conversión. Más conversiones para el mismo tráfico supone disminuir el coste de cada venta y, además, optimizando el contenido de una landing page  a mejorar el Quality Score de los anuncios, lo que mejorará la posición media.
  3. Vende más sin invertir más. Mejora el ROAS (return on ad spend): ya tienes el tráfico, ya has invertido en SEM y en SEO. Ya te has colocado en una buena posición y has conseguido atraer la atención de los usuarios. Aplicando CRO el objetivo es que, sin invertir más, vendas más.
  4. Decisiones basadas en datos, no en opiniones personales: a veces, el proceso de toma de decisiones dentro de una empresa es demasiado complicado. Cuellos de botella, diferencias de criterio… Con los datos en la mano, hay decisiones mucho más fáciles de tomar cuando hablamos de diseño y usabilidad. Y, cuando la decisión sigue sin estar clara, ejecutamos un test AB (o un multivariable MVT) y dejamos que los datos tomen la decisión por nosotros.

Tu sitio web también necesita optimización

A no ser que hayas alcanzado el límite de tu capacidad de venta (¡enhorabuena!), siempre hay margen de mejora, siempre hay espacio de crecimiento.

Infografía: ejemplo simplificado de CRO
Infografía: ejemplo simplificado de CRO

Un ejemplo sencillo: hemos invertido 5000 € en AdWords durante este mes. Hemos conseguido 6000 visitas y hemos conseguido 120 ventas (conversiones). Cada venta nos supone una inversión de 41,6 € y tenemos una tasa de conversión del 2 %. Sin invertir más y mediante una estrategia de Conversion Rate Optimization, elevamos la tasa de conversión al 2,5 %; de esas 6000 visitas ahora conseguimos 150 ventas. Cada venta ahora supone una inversión de 33,3 €, un 20 % menos.

La optimización de tasas de conversión va a ser una práctica imprescindible en los próximos años. Las grandes compañías llevan años aplicando técnicas de CRO, aunque la terminología no estuviera 100 % definida. Test AB, optimización de tiempos de carga, personalización de contenidos… obviar estas estrategias supondrá verse superado indudablemente por nuestra competencia.