.jpeg)
El diseño centrado en la conversión se sitúa en la intersección entre el marketing y el diseño web.
Diseñar para la conversión —sea lo que sea que esto signifique para tu negocio, ya sean ventas, descargas o suscripciones a boletines— consiste en combinar principios de diseño con una comprensión de la psicología humana para guiar suavemente a los visitantes hacia la acción.
Para impulsar las conversiones web, necesitas algo más que estética: debes crear experiencias de usuario cuidadosamente pensadas, teniendo en cuenta las acciones y los resultados. Ahí es donde entra en juego el diseño centrado en la conversión.
¿Qué es el diseño centrado en la conversión?
El diseño centrado en la conversión (CCD, por sus siglas en inglés) incorpora técnicas basadas en la psicología, métodos de diseño centrado en el usuario y conocimientos técnicos de diseño web para optimizar cada paso del recorrido del usuario. El objetivo es guiar a los usuarios sin problemas a través de flujos que culminen en conversiones. "Conversión" no significa solo una venta: conviertes a un visitante cada vez que realiza una acción que deseas, como suscribirse a un boletín, hacer clic en una llamada a la acción (CTA) de "Más información" o añadir un artículo a su carrito de compras.
Desarrollado originalmente por Oli Gardner de Unbounce, el CCD es un marco de diseño para crear campañas de alta conversión en las que diseñas experiencias digitales centradas en animar a los usuarios a realizar acciones específicas. Implica un conjunto de estrategias de optimización de la tasa de conversión (CRO) que abarcan el diseño, el color, la estructura del recorrido del usuario y el contenido visual. Con el enfoque adecuado, puedes crear una experiencia fluida y atractiva que resulte agradable para los usuarios y optimice tu tasa de conversión.
Los 7 principios del diseño centrado en la conversión + consejos para implementarlos en el diseño web
Según Oli Gardner, existen siete principios fundamentales del diseño centrado en la conversión:
- Crea un foco de atención
- Construye una estructura
- Mantén la coherencia
- Muestra los beneficios
- Atrae la atención
- Diseña para generar confianza
- Reduce la fricción
Oli desarrolló estos siete principios específicamente para ayudar a los diseñadores a crear páginas de destino de alta conversión, pero puedes aplicarlos en cualquier otra parte del sitio.
Para cada principio, hemos ofrecido algunos consejos sobre cómo aplicarlo y un ejemplo del principio en acción.
1. Destaca el objetivo
Probablemente tengas varios objetivos de conversión en mente al crear un sitio web. Pero si los usuarios se enfrentan a múltiples llamadas a la acción que compiten entre sí, es probable que se confundan y se vayan. Elige el objetivo más importante y construye en torno a él, utilizando señales visuales para presentar ese objetivo como algo claro y tentador.
Consejo 1: Elimina todo lo que no guíe a los usuarios hacia el objetivo.
Consejo 2: Oculta la información no esencial en secciones plegables o animaciones que se revelan al pasar el cursor.
Consejo 3: Considera incluir varios botones con microcopy diferente (por ejemplo, "Regístrate ahora" y "Pruébalo gratis") que lleven a la misma página. Esto atrae a usuarios con distintos objetivos y preferencias, dirigiéndolos finalmente hacia la misma meta de conversión.
El sitio de Reform Digital para las joyas de Hiba Hayek destaca el botón de llamada a la acción (CTA) enmarcándolo con ejemplos colgantes de su trabajo. El CTA es grande, está centrado, rodeado de mucho espacio en blanco y diseñado con los colores de mayor contraste de la paleta del sitio.
El microcopy del CTA, "Fine jewellery" (Alta joyería), es estratégicamente ambiguo, por lo que atrae a visitantes con diversos objetivos. Algunos querrán ver alta joyería, otros comprarla y otros más aprender sobre el trabajo de Hiba, pero todos harán clic en el mismo botón para avanzar al siguiente paso.
2. Usa el diseño de página para contar una historia
Los mejores diseños web incluyen una combinación de elementos estándar y personalizados. Usar convenciones de diseño y navegación estandarizadas ayuda a los usuarios a navegar por el sitio de forma intuitiva y a avanzar sin problemas hacia sus objetivos. Sin embargo, el diseño también debe reflejar la naturaleza del producto, servicio o empresa, así como la arquitectura de información del sitio.
Por ejemplo, un sitio de comercio electrónico debe seguir las convenciones estándar de las páginas de listado de productos y de pago: si falta el precio en los listados o no está claro cómo añadir artículos al carrito, las conversiones se verán afectadas. Pero si el producto es complejo o inusual, los visitantes necesitarán más información de lo habitual para decidir si comprarlo.
Y si el sitio vende un servicio en lugar de un producto, ayuda guiar a los visitantes a través del proceso y mostrarles cómo se puede personalizar el servicio antes de pedirles que den el siguiente paso. Un sitio B2B, por el contrario, puede incluir algunos casos de estudio en una etapa temprana del recorrido del usuario.
Consejo 1: Señala las jerarquías visuales de formas convencionales, como mediante el tamaño y el grosor de la fuente, para que los visitantes no se confundan ni pierdan tiempo tratando de entender qué sucede. Sigue patrones de diseño estándar —como el patrón en Z para páginas con poco texto y el patrón en F para páginas con más texto— para ayudar a los usuarios a escanear el contenido fácilmente y encontrar lo que necesitan.
Consejo 2: Considera cuidadosamente la ubicación de los botones de CTA. En las páginas de destino, coloca el CTA principal "por encima del pliegue" (visible sin necesidad de desplazarse hacia abajo) para que quede claro de inmediato qué quieres que hagan los visitantes. Los campos de suscripción a boletines suelen funcionar mejor debajo de las publicaciones del blog o artículos, ya que los lectores quieren saber qué tipo de contenido recibirán antes de registrarse.
El portafolio de diseño de Nikki Foster se abre con una encantadora animación que muestra la habilidad de la diseñadora y transmite tranquilidad a los visitantes: una mujer (presumiblemente Nikki) se balancea en una hamaca bajo un gato dormido, alcanzando al gato de vez en cuando. Curiosamente, el primer CTA de la página es un campo de suscripción al boletín, lo que comunica a los visitantes que a Nikki le interesa más contribuir a la comunidad que presionar para conseguir clientes.
Los visitantes luego se desplazan a través de información sobre Nikki que incluye valores e intereses, algunos ejemplos de trabajos anteriores y una lista de logotipos de marcas con las que ha colaborado, llegando finalmente a un formulario de contacto donde los interesados pueden ponerse en contacto. Esta secuencia cuenta la historia de una ilustradora y diseñadora experta que sigue sus principios, sabe lo que hace, es humilde y no necesita esforzarse desesperadamente por conseguir clientes.
3. Busca un diseño coherente en todo tu sitio y materiales de marketing
Mantén la cohesión del diseño utilizando un lenguaje visual unificado en todas las páginas de tu sitio. Repetir colores, tipografía, estilo de redacción e iconografía permite que los visitantes se centren en tu mensaje sin distraerse con elementos cambiantes o inconsistentes. Las experiencias de usuario uniformes también generan credibilidad ante los clientes potenciales, ya que demuestran profesionalismo y cuidado.
Para lograr un alto nivel de congruencia, sigue una paleta de colores, guía de estilo o sistema de diseño claramente definidos y asegúrate de que tus elementos de diseño de interfaz de usuario (UI) se ajusten a un estilo consistente.
Consejo 1: Trabaja con el equipo de marketing para buscar la coherencia en las representaciones de la marca fuera del sitio web, incluidos anuncios y otros materiales promocionales. De esta manera, los visitantes que lleguen al sitio desde estas fuentes externas reconocerán el lenguaje visual de tu página y se sentirán como en casa tan pronto como lleguen.
Consejo 2: Incorpora sutilmente aspectos de tu marca en todo el sitio haciendo eco de las elecciones de diseño y la voz de la marca en elementos como testimonios, formularios de registro y botones de CTA.
Chris Mitchell ha diseñado el sitio de la agencia de marketing Intelus integrando el degradado azul verdoso de su logotipo en varios elementos, como los botones de llamada a la acción y los fondos de los iconos. Incluso la barra de progreso superior luce el mismo degradado. Esta coherencia le da al sitio un aire armonioso y profesional.
El sitio web del marketer
Nuestro ebook gratuito exclusivo para marketers. Descubre cómo el no-code elimina los cuellos de botella de los desarrolladores y permite que los equipos de marketing modernos tomen el control total de su sitio web.
4. Elige las imágenes adecuadas
Evita usar imágenes que sean puramente decorativas o demasiado genéricas. En su lugar, utiliza los elementos visuales para comunicar claramente la propuesta de valor de tu producto o servicio. Por ejemplo, elige fotografías o ilustraciones que muestren el resultado final de un servicio o que evoquen la emoción que la marca quiere que sus clientes asocien con sus productos.
Consejo 1: Usa fotos profesionales de alta calidad de personas usando el producto o recibiendo el servicio, asegurándote de mostrarlo en un contexto natural y positivo. Evita las imágenes de archivo siempre que sea posible: los estudios de seguimiento ocular demuestran que la mayoría de los usuarios simplemente las ignoran.
Consejo 2: No hace falta que todas las imágenes sean positivas. Usar una imagen que muestre un problema del cliente demuestra que empatizas con sus dificultades y fortalece vuestra relación.
La página de inicio de la marca de cuidado de la piel Solis presenta una imagen central que muestra el resultado final de usar sus productos: una mujer que luce satisfecha con su piel sana y natural. Juice Agency también enmarca esta foto con dibujos de plantas para subrayar la conexión de la marca con la naturaleza.
5. Dirige la atención de los usuarios hacia las llamadas a la acción
Utiliza pistas visuales para captar la atención de los lectores y dirigirla hacia la información clave y las llamadas a la acción. Estas pistas incluyen:
- Color. Usa colores contrastantes para resaltar elementos accionables como las llamadas a la acción. Desatura los elementos visuales que sean necesarios pero que puedan distraer, como los logotipos de otras marcas.
- Animaciones. Usa animaciones sutiles (como efectos al pasar el ratón) para animar a los usuarios a interactuar con el sitio en lugar de solo hacer scroll.
- Tipografía. Guía a los lectores a través de los caminos de conversión usando jerarquías de texto con diferentes grosores y tamaños de fuente.
- Pistas direccionales. Usa flechas, líneas guía y otras formas de dirigir la mirada de los visitantes hacia donde quieres que vayan.
- Espacio negativo. Deja espacio en blanco alrededor de tus llamadas a la acción para que resulten más atractivas.
- Diseño de botones. Haz que los botones sean más fáciles de clicar redondeando sus bordes. Usa diferentes estilos para diferenciar funciones; por ejemplo, usa colores invertidos para las llamadas a la acción principales y secundarias.
Consejo 1: Resalta tus llamadas a la acción con una versión muy saturada de tu color principal. Usa ese mismo color en otras partes del sitio para mantener la coherencia, pero desaturado fuera de los botones.
Consejo 2: Usa la mirada en las imágenes para dirigir la atención de los visitantes. Si alguien en una foto mira hacia una dirección concreta, la mayoría de la gente seguirá esa mirada de forma natural. Aprovecha este reflejo colocando una llamada a la acción justo donde parece estar mirando la persona.
El sitio de Ikon Property, diseñado por Studio Kanda, utiliza elementos visuales potentes para guiar la mirada de los visitantes por la página. Las rayas verticales blancas y negras de la pared dirigen la vista rápidamente hacia la parte inferior, donde se encuentra el titular de la página. Después, la mirada se desplaza de forma natural hacia el botón de llamada a la acción cercano.
El sitio de Ikon Property es también un ejemplo fantástico de unidad visual: las barras verticales blancas del logotipo se repiten tanto en el papel pintado como en la tipografía robusta Mānuka Condensed Black.
6. Genera credibilidad ante tus clientes
Las relaciones sólidas con los clientes impulsan las conversiones, y para construir una relación, debes demostrar que eres de fiar. Incorpora elementos en tus diseños que establezcan fiabilidad y confianza, como testimonios auténticos, reseñas, insignias, pruebas gratuitas, garantías de devolución y certificaciones de privacidad. Asegúrate de que tu página sobre nosotros incluya tus credenciales y explique por qué los visitantes deberían confiar en ti.
Generar credibilidad también significa asegurarse de que el recorrido del usuario no tenga fallos. Si el tiempo de carga de la página es algo elevado, considera usar una animación de carga para indicar a los usuarios que su solicitud se está procesando y hacer que la espera sea lo más amena posible.
Consejo 1: Usa un widget para importar reseñas automáticamente desde Google, Yelp y otras plataformas a tu sitio. Algunos visitantes pueden dudar de la veracidad de los testimonios estándar, así que demuestra a los escépticos que no solo eliges a los clientes felices incorporando esta prueba social objetiva.
Consejo 2: En sitios de comercio electrónico, usa una insignia (o varias) en el proceso de pago para indicar a los compradores que su dinero está en buenas manos.
En la parte superior de la página, el sitio de Embacy Agency para la empresa de software SaaS Labs muestra los logotipos desaturados de empresas reconocidas que han otorgado premios y reconocimiento a SaaS Labs. Estos logotipos están diseñados para ser una pieza clave de información para los visitantes: son un indicador potente del éxito de la empresa y sugieren que el producto es de muy alta calidad.
7. Crea flujos de usuario fluidos
Elimina los pasos innecesarios, los fallos y los inconvenientes que se interponen entre los visitantes y las acciones que deseas que realicen. Supervisa la velocidad de tu sitio y su capacidad de respuesta en diferentes dispositivos, y actualízalo regularmente para mejorar estas funciones. En sitios de comercio electrónico, optimiza la experiencia de usuario (UX) de tu página de pago y permite que los usuarios filtren y ordenen las páginas de listado de productos.
Consejo 1: A nadie le gusta rellenar formularios. Haz que los tuyos sean lo más sencillos posible rellenando campos automáticamente y dividiendo los formularios largos en varias etapas con un indicador de progreso claro.
Consejo 2: Usa microinteracciones para guiar a los usuarios a través del flujo. Las animaciones al pasar el cursor, los efectos de clic y toque, y los efectos de desplazamiento muestran a los usuarios qué hacer, proporcionan comentarios inmediatos sobre las acciones y les permiten personalizar aspectos de la experiencia de usuario.
El flujo de usuario que Adam Weidenbaum creó para la empresa de persianas Everhem guía a los usuarios a través del proceso de elección de una persiana y su personalización según sus necesidades. Adam dividió este largo flujo en fragmentos más pequeños de tres pasos y simplificó aún más los elementos visuales al poner secciones plegables a disposición de los usuarios.
Esta página también cuenta con el apoyo visual de una atractiva foto del tipo de persiana que el cliente está comprando, lo que anima a las personas que han iniciado el flujo y se están impacientando a mantener su objetivo final en mente y no abandonar la página. Este es un ejemplo de un diseño centrado en la conversión (CCD) bien pensado que anima a los usuarios a avanzar de forma constante, completar todos los pasos y convertir.
Da vida a los principios de CCD con Webflow
Al guiar a los visitantes sin problemas a través de flujos intuitivos adaptados a sus necesidades, puedes transformar a los navegadores pasivos en clientes activos y a los clientes activos en visitantes recurrentes. El potente CMS de Webflow te permite crear, personalizar y optimizar rápidamente sitios web que ponen en práctica los principios de CCD. Aprovecha las capacidades de Webflow para elevar el potencial de conversión de tu sitio web: seguro que verás cómo tus tasas de conversión aumentan constantemente.
