Cómo convertirse en un diseñador centrado en la conversión

¿Así que quieres ser un diseñador de plantillas de landing page? Puede pensar que lo tiene fácil: después de todo, las plantillas de página de destino son solo una página. Eso es mucho más fácil que diseñar un sitio web completo. Pero las reglas de diseño cambian bastante al crear páginas de destino centradas en la conversión.

¿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 eliminar algunas definiciones:

Una página de destino es una página web independiente, 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 encuentran orgánicamente su sitio o que necesitan hacer referencia o verlo en el modo de investigación de su ciclo de compra. Son no bueno para campañas de marketing.

Las campañas de marketing se basan en un solo propósito: compre esto, suscríbase a él y, como tal, necesita 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, redes sociales) se debe a algo llamado relación de atención.

La proporción de atención es la proporción de puntos de interacción (enlaces) en una página, al número de acciones previstas en esa página (que para una campaña siempre es 1). En una página de inicio, esto suele ser de alrededor de 40: 1, lo que significa que hay 39 acciones de distracción y 1 acción deseada.

Por otra parte, una página de destino enfocada tiene una relación de atención de 1: 1. Por esta razón, los comercializadores inteligentes utilizan una página de destino dedicada específica para cada promoción para cada campaña que ejecutan.

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

Se acabaron los días en los que era aceptable diseñar una hermosa experiencia web, coloque el cepillo y salga con un cheque en su bolsillo.

La conversión es una de las palabras más populares 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 su propósito, impacto y éxito pueden ser, y están siendo, medidos. Si no participa 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. La copia juega un papel enorme. Pero la mejor copia del mundo no ayudará si su visitante se distrae, se ofende, todos sabemos que el mal diseño puede ser francamente ofensivo o confundido.

Al combinar algunos principios de diseño simples y un poco de psicología básica, puede cambiar completamente su enfoque a la experiencia web de diseño que tanto deleite como convierta.

A esto lo llamo diseño centrado en la conversión. CCD para abreviar.

Este es un curso intensivo de CCD, por lo que hablaré sobre los 7 principios, haré un seguimiento de algunos Psych 101, y luego mostraré algunas plantillas de landing page hermosas y de alta conversión que las ponen en práctica para que pueda aprender con el ejemplo.

Listo para convertirse en un diseñador centrado en la conversión?

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

Los principios son simples. Apréndalos, practíquelos y verá cómo aumentan sus tasas de conversión..

Principio 1: Encapsulación

Envolver cosas es una práctica inteligente. Funciona para la cabeza en temperaturas frías, papas al horno en caliente y hace que la Navidad sea más divertida. Así que toma lo más importante de tu página (tu objetivo de conversión) y envuélvelo para demostrar que merece la atención de tus visitantes..

Principio 2: Contraste

Así que muchos vendedores hablan sobre el color del botón. Esto es un error. Un buen Diseñador centrado en la conversión sabe que el color del botón es irrelevante. Es el contraste lo que cuenta. Si tiene una página de color verde principalmente, un botón rojo saltará a sus visitantes. No se preocupe de que se vea enojado; tus clientes potenciales no son toros.

Principio 3: Señales de dirección

En algunas culturas, se considera grosero señalar. No en tierra de conversión. Cuando alguien llega a su página de destino, su diseño debe apuntar hacia la meta que desea que alcancen. Usa flechas y triangulación para crear puntos focales. Con la fotografía, use la línea de visión para dirigir la atención a su Llamada a la acción (CTA).

Principio 4: Espacio en blanco

Este es simple. No abarrotes las cosas juntos. La falta de espacios en blanco es un diseño ofensivo. Al dejar que los ojos de la gente respiren (¿pueden hacerlo?), Crea una experiencia más agradable que le dará unos preciosos segundos extra para comunicar el mensaje de su 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 usted presentar la información con un buen diseño. La proximidad al objetivo de conversión de la página de destino es clave cuando se trata de señalar la escasez. Al asegurarse de que su visitante entienda que tiene una fecha límite, puede hacer que ese clic sea un poco más probable.

Expedia hace un gran trabajo aquí al usar la encapsulación para resaltar la declaración de escasez ("¡Solo quedan 3 boletos a este precio!") En la imagen de abajo.

Principio 6: Probar antes de comprar

¿Alguna vez has "probado" una uva en un supermercado? Eso es un anticipo de la calidad y ayuda a las personas a tomar decisiones de compra informadas. Los ejemplos en el ámbito digital incluyen un capítulo de un libro electrónico o una presentación visual que cubre algunos aspectos destacados de un informe de la industria, un curso en línea o un video de prueba o tráiler para un próximo evento. Amazon realmente establece el estándar con sus vistas previas del libro "Look Inside".

Al abrir su producto al escrutinio antes de la compra, usted aparece con autoridad y credibilidad. Esto aumenta la confianza y puede ser un factor importante para impulsar las conversiones..

Como diseñador centrado en la conversión, debe 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. Hacen una copia de seguridad de sus reclamaciones y, cuando se hacen correctamente, hablan con sus visitantes desde la perspectiva de un consumidor con ideas afines. Los testimonios son el enfoque más popular. Al igual que el principio 5, este es principalmente un elemento escrito, pero puede usar aspectos del diseño de contenido inteligente, en particular la jerarquía, para alentar a las personas a leerlos..

Agregar un título explicativo sobre los testimonios (o logotipos de clientes, etc.) puede aumentar el poder de la prueba social.

Diseño centrado en la conversión en acción; 5 plantillas de página de destino

Con sus nuevas herramientas de diseño, echemos un vistazo a las cinco plantillas de la página de destino de Unbounce para inspirarte mientras creas tus propias plantillas..

1. Lockwood: Bienes Raíces

  • Encapsulacion El objetivo de la conversión es la forma, por lo que se coloca en la parte frontal y central y se encapsula en un contenedor que permite que el contenido crítico que se encuentra por encima se conecte visualmente..
  • Contraste El CTA se destaca claramente en la página con un vibrante color de contraste..
  • Señales direccionales Hay una flecha situada al final del área de contenido principal que dirige su mirada hacia el CTA, y el uso del mismo color naranja conecta los dos elementos.
  • Espacio en blanco A medida que avanzas por la página, tus ojos pueden pasar libremente por los bloques de contenido. Una fotografía espaciosa y espaciosa y una paleta minimalista se combinan para hacer que sea una experiencia agradable..
  • Escasez La afirmación de que solo quedan 3 de las unidades se coloca directamente debajo de la CTA como un recordatorio de que debe darse prisa. Si quieres ser más agresivo aquí, puedes probar una especie de * cringe * estallido de estrellas, solo recuerda mantenerte con clase. Eso sería una gran prueba A / B.
  • Prueba social Aquí se utiliza una prueba social apropiada, centrada en los premios de diseño, en lugar de un testimonio que tendría un impacto muy limitado.

2. Lasano: Salud y Bienestar

  • Encapsulamiento de formularios? Comprobar.
  • CTA contrastante? Comprobar.
  • Espacio en blanco? Comprobar.
  • Prueba social? Comprobar.
  • Señales direccionales Aquí notarás dos formas de señal direccional. El primero utiliza la línea de sitio de la mujer para dirigir su mirada de izquierda a derecha. Aún mejor sería si ella 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 declaración secundaria debajo del formulario que termina con una pequeña flecha de recordatorio que apunta hacia la copia de seguridad. Las cosas pequeñas no siempre tienen un gran impacto, pero cuando tienes varias cosas trabajando en concierto, pueden hacerlo..

3. Yuli: demostración de software

  • Encapsulamiento de formularios? Comprobar.
  • CTA contrastante? Comprobar.
  • Espacio en blanco? Comprobar.
  • Señales direccionales La parte superior de la página es donde se encuentra todo el contenido principal, por lo que se coloca una flecha con una solicitud en el punto donde se ha leído el contenido, que apunta a la CTA. También tenga en cuenta cómo se crea una especie de triángulo instructivo al reservar el color naranja para los elementos que hacen referencia al propósito de la página: "demostración gratuita", "únase a nosotros para una demostración gratuita", "reserve mi demostración ahora".
  • Prueba social Se usa un video esta vez para un mayor nivel de sofisticación. En una prueba A / B que corrí en la página de inicio de Unbounce.com, encontré que al reemplazar los testimonios de texto con una versión de video, las tasas de conversión aumentaron en un 25%. Aquí hay un combo de video y texto. Tenga en cuenta también que la plantilla utiliza la jerarquía de diseño de información para introducir los elementos de prueba social (el video y los logotipos del cliente debajo) con un título descriptivo.

4. Wanderlust: viajes

  • CTA contrastante? Comprobar.
  • Espacio en blanco? Comprobar.
  • Prueba social? Comprobar.
  • Encapsulacion Es un poco diferente en una página de destino de clics, ya que no existe un formulario, pero el CTA aún está posicionado con otra información crítica en un cuadro delimitador en el encabezado de la página. El elemento del pie de página también utiliza el contraste de color para encapsular la "declaración de argumento de cierre" con un CTA repetido.
  • Señales direccionales Es un poco exagerado, pero la Torre Eiffel se conecta un poco a la CTA. Y, de manera bastante inteligente, indica que al hacer clic en el CTA, se te llevará a París para pararte debajo de la torre. Qué romántico. En otro sentido, las fotos de características circulares dirigen su atención hacia abajo a través de la página hasta el CTA de cierre..

5. Polar: sin fines de lucro

  • Espacio en blanco? Comprobar.
  • Prueba social? Comprobar.
  • CTA contrastante Como en todos estos ejemplos, el CTA se destaca del resto del diseño. Observe también cómo se resalta el objetivo de la campaña (recaudar dinero mediante donaciones) utilizando el color naranja en el termómetro de destino. 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 la donación y las declaraciones emocionales "Se está acabando el tiempo para el oso polar" y "Predigo que podríamos ver veranos sin 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, hará que sus jefes / clientes se sientan muy felices cuando sus tasas de conversión aumenten..

Entonces, al diseñar las plantillas de la página de destino de Themeforest, ejecútelas de acuerdo con los siete principios de CCD y vea cómo se acumulan realmente..

Otras lecturas

  • The Ultimate Guide to Conversions Centered Design (libro electrónico)