Cómo convertirse en un diseñador centrado en conversiones

¿Así que quieres ser diseñador de plantillas de páginas de destino? Puedes pensar que lo tienes fácil - después de todo, las plantillas de página de destino son sólo una sola página. Eso es mucho más fácil que diseñar un sitio web completo. Pero las reglas del diseño cambian bastante al construir páginas de destino centradas en conversiones.

¿Qué es una página de destino?

Antes de entrar en los principios de diseño detrás de las páginas de destino, vamos a sacar algunas definiciones del camino:

Una página de destino es una página web independiente, y es específica de la campaña. Su intención es conseguir que tus visitantes completen una sola acción. No es tu sitio web, y ciertamente no es tu página de inicio.

Los sitios web son estaciones centrales de marca y son para personas que orgánicamente encuentran tu sitio o que necesitan hacer referencia o mirarlo en el modo de investigación de su ciclo de compra. No son buenos para las campañas de marketing.

Las campañas de marketing se basan en un único propósito - comprar esto, suscribirse a eso - y como tal necesitan una experiencia más centrada. La razón más importante para usar una página de destino frente a una página de inicio para el objetivo de cualquier tráfico de campaña (PPC, correo electrónico, social) es debido a algo llamado relación de atención.

La relación de atención es la relación entre los puntos de interacción (enlaces) de una página y el número de acciones previstas en esa página (que para una campaña siempre es 1). En una página de inicio esto es típicamente alrededor de 40:1 lo que significa que hay 39 acciones de distracción y 1 acción deseada.

Una página de destino enfocada por otro lado tiene una relación de atención de 1:1. Por esta razón, los vendedores inteligentes utilizan una página de destino dedicada específica de la promoción para cada campaña que ejecutan.

¿Qué significa esto para mí como diseñador?

Atrás quedaron los días en que era aceptable diseñar una hermosa experiencia web, poner el pincel y marcharse con un cheque en el bolsillo.

La conversión es una de las palabras más calientes en la web en este momento. Cada página web que diseñas es ahora una pieza de "contenido responsable". Con esto quiero decir que el propósito, impacto y éxito pueden ser, y se están siendo, medidos. Si esto no está jugando un papel en la conversión exitosa de visitantes en clientes, no se ha diseñado correctamente.

El diseño no es el único factor en las altas tasas de conversión. Copiar juega un papel enorme. Pero la mejor copia del mundo no ayudará si tu visitante está distraído, ofendido – todos sabemos que el mal diseño puede ser francamente ofensivo – o confuso.

Al combinar algunos principios de diseño simples y algunos conocimientos de psicología básica, puedes cambiar completamente tu enfoque para diseñar una experiencia web que deleite y convierta.

Yo llamo a esto Diseño centrado en la conversión. CCD para abreviar.

Este es un curso intensivo en CCD, así que discutiré los 7 principios, te pondré en práctica en un poco de Psiquiatría 101, y luego te mostraré algunas plantillas de páginas de destino hermosas y de alta conversión que los ponen en práctica para que puedas aprender con el ejemplo.

¿Listo para convertirte en un diseñador centrado en conversiones?

Los 7 principios del diseño centrado en la conversión

Los principios son simples. Aprende, practícalos y verás que tus tasas de conversión se disparan.

Principio 1: Encapsulación

Envolver las cosas es una práctica inteligente. Funciona para tu cabeza en temperaturas frías, patatas horneadas en caliente, y hace que la Navidad sea más divertida. Así que toma lo más importante en tu página (tu objetivo de conversión) y envuélvelo en algo para demostrar que es digno de la atención de tu visitante.

Principio 2: Contraste

Muchos vendedores hablan del color de los botones. Esto es un error. Un buen diseñador centrado en conversiones sabe que el color de los botones es irrelevante. Lo que cuenta es el contraste. Si tienes una página de color principalmente verde, un botón rojo saltará a tus visitantes. No te preocupes porque luzca enojado; tus clientes potenciales no son toros.

Principio 3: Señales de dirección

En algunas culturas, se considera grosero señalar. No en el terreno de la conversión. Cuando alguien llega a tu página de destino, tu diseño debe apuntarlo hacia la meta que quieres que alcance. Utiliza flechas y triangulación para crear puntos focales. Con la fotografía, utiliza la línea de visión para dirigir la atención a tu llamada a la acción (CTA).

Principio 4: Espacio en blanco

Este es simple. No mezcles las cosas. La falta de espacio en blanco es un diseño ofensivo. Al dejar que los ojos de las personas respiren (¿pueden hacer eso?) creas una experiencia más satisfactoria que te dará unos segundos extra preciosos para comunicar tu mensaje de campaña.

Principio 5: Urgencia y escasez

Este es el primer principio basado en la psicología. Crear urgencia o escasez es principalmente un ejercicio escrito, pero depende de ti presentar la información usando un buen diseño. La proximidad al objetivo de conversión de la página de destino es clave cuando se trata de la escasez de señalización. Al asegurarte de que tu visitante entienda que tiene una fecha límite, puedes hacer que el hecho de que haga clic sea más probable.

Expedia hace un gran trabajo aquí usando encapsulación para resaltar la declaración de escasez ("¡Sólo 3 boletos por este precio!") en la imagen de abajo.

Principio 6: Prueba antes de comprar

¿Alguna vez has "probado" una uva en un supermercado? Eso es una vista previa de la calidad y ayuda a las personas a tomar decisiones de compra informadas. Algunos ejemplos en el ámbito digital incluyen un capítulo de un libro electrónico o una presentación de diapositivas que cubre algunos aspectos destacados de un informe de la industria, un curso en línea o un video de teaser/trailer para un próximo evento. Amazon realmente estableció el estándar con sus vistas previas de libros llamada "Look Inside" o "Mira adentro".

Al abrir tu producto al escrutinio antes de la compra, pareces autoritario y creíble. Esto aumenta la confianza, y puede ser un factor importante en el impulso de las conversiones.

Como diseñador centrado en conversiones, debes encontrar formas creativas de presentar estas vistas previas.

Principio 7: Prueba social

Los elementos de confianza son una parte crítica de cualquier página de destino. Respaldan tus reclamos y cuando se hacen correctamente, hablan con tus visitantes desde la perspectiva de un consumidor de mente afines. Los testimonios son el enfoque más popular. Al igual que el principio 5, esto es principalmente un elemento escrito, pero puedes utilizar aspectos del diseño de contenido inteligente - en particular la jerarquía - para animar a las personas a leerlos realmente.

Añadir un titular explicativo por encima de los testimonios (o logotipos de clientes, etc.) puedes aumentar el poder de la prueba social.

El diseño centrado en conversiones en acción; 5 Plantillas de página de destino

Armado con tus nuevas herramientas de diseño, echemos un vistazo a cinco plantillas de página de destino de Unbounce para inspirarte a medida que creas tus propias plantillas.

1. Lockwood: Bienes raíces

• Encapsulación: El objetivo de conversión es el formulario, por lo que se coloca en el centro y en el frente y se encapsula en un contenedor que permite que el contenido crítico por encima de él se conecte visualmente.
• Contraste: La llamada a la acción destaca claramente en la página con un color de contraste vibrante.
• Señales direccionales: Hay una flecha situada al final del área de contenido principal que dirige tu mirada a la llamada a la acción, y el uso del mismo color naranja conecta los dos elementos.
• Espacio en blanco: A medida que te mueves por la página, los ojos pueden descender libremente a través de los bloques de contenido. Una fotografía amplia y espaciosa y una paleta minimalista se combinan para que sea una experiencia agradable.
• Escasez: La afirmación de que sólo quedan 3 de las unidades se coloca directamente debajo de la llamada a la acción como un recordatorio de que debes darte prisa. Si quieres ser más agresivo aquí puedes probar un tipo de *descuento* - sólo recuerda mantenerte con clase. Eso sería una gran prueba A/B.
• Prueba social: Se utiliza aquí una prueba social adecuada, centrándose en los premios de diseño, en lugar de un testimonio que tendría un impacto muy limitado.

2. Lasano: Salud & Bienestar

• ¿Encapsulación de formularios? Comprobado.
• ¿Contraste en la llamada a la acción? Comprobado.
• ¿Espacios? Comprobado.
• ¿Prueba social? Comprobado.
• Señales direccionales: Aquí notarás dos formas de indicación direccional. El primero utiliza la línea del sitio de la mujer para dirigir tu mirada de izquierda a derecha. Aún mejor sería si estuviera mirando hacia abajo y hacia la derecha, pero eso también podría hacer que se vea triste, lo que iría en contra del tema de la plantilla. En segundo lugar hay una instrucción secundaria debajo del formulario que termina con una pequeña flecha de recordatorio que te apunta hacia arriba. Las pequeñas cosas no siempre tienen un gran impacto, pero cuando tienes varias pequeñas cosas trabajando sin duda lo hacen.

3. Yuli: Demostración de software

• ¿Encapsulación de formularios? Comprobado.
• ¿Contraste en el llamado a la acción? Comprobado.
• ¿Espacios? Comprobado.
• Señales direccionales: La parte superior de la página es donde reside todo el contenido principal, por lo que se coloca una flecha - con una solicitud - en el punto donde se ha leído el contenido, apuntando a la llamada a la acción. Observa también cómo se crea una especie de triángulo instructivo reservando el color naranja para los elementos que hacen referencia al propósito de la página: "demo gratuita", "únete a nosotros para una demostración gratuita", "reservar mi demo ahora".
• Prueba social: Un vídeo se utiliza esta vez para un mayor nivel de sofisticación. En una prueba A/B que ejecuté en la página de inicio de Unbounce.com, encontré que al reemplazar testimonios de texto con una versión de video, las tasas de conversión aumentaron un 25%. Aquí hay una combinación de vídeo y texto. Observa también que la plantilla utiliza la jerarquía del diseño de información para introducir los elementos de prueba social (el vídeo y los logotipos de clientes debajo) con un título descriptivo.

4. Wanderlust: Viajes

• ¿Contraste en la llamada a la acción? Comprobado.
• ¿Espacios? Comprobado.
• ¿Prueba social? Comprobado.
• Encapsulación: Es ligeramente diferente en una página de destino a través de clicks ya que no hay ningún formulario, pero la llamada a la acción todavía se coloca con otra información crítica en un cuadro delimitador en el encabezado de página. El elemento footer también utiliza contraste de color para encapsular la "instrucción de argumento de cierre" repitiendo la llamada a la acción.
• Señales direccionales: Es un poco exagerado, pero la Torre Eiffel se conecta un poco con la llamada a la acción. Y más bien indica inteligentemente que al hacer clic en la llamada a la acción, serás llevado a París para pararte debajo de la torre. Qué romántico. En otro sentido, las fotos circulares de las características llevan el ojo hacia abajo a través de la página para lograr el cierre de la llamada a la acción.

5. Polar: No para el beneficio

• ¿Espacios? Comprobado.
• ¿Prueba social? Comprobado.
• Contraste de llamada a la acción: Como en todos estos ejemplos, la llamada a la acción destaca del resto del diseño. Observa también cómo se resalta el objetivo de la campaña (recaudar dinero a través de donaciones) utilizando el color naranja en el termómetro objetivo. Esto hace una conexión entre los objetivos emocionales y físicos (conversión) de la página.
• Urgencia y escasez: La combinación del objetivo de donación, y las declaraciones emocionales "El tiempo se está acabando para el oso polar" y "Predigo que podríamos ver veranos libres de hielo en el polo norte dentro de una década" crean tanto la urgencia como la inminente sensación de escasez.

En resumen

Ser un diseñador centrado en la conversión es la próxima evolución del diseño en los negocios, y armado con el aprendizaje de hoy en día, estarás haciendo que tu jefe o tus clientes sean muy felices cuando sus tasas de conversión suban.

Así que a medida que diseñes tus plantillas de página de destino de Themeforest, ejecútalas en los siete principios de CCD y mira como realmente crecen.

Lectura adicional

• La guía definitiva para el diseño centrado de las conversiones (ebook)