No importa el tema o el propósito, cada propietario de un sitio web debe pensar en la conversión en algún momento. Simplemente puede colocar su llamado a la acción en algún lugar de su sitio web y esperar lo mejor, pero si desea aprovechar al máximo su sitio web y las conversiones, es mejor reservar algo de tiempo para concentrarse en el diseño de conversión.
El diseño de conversión, también conocido como Conversion Centric Design (CCD), es una filosofía de diseño que se enfoca en crear una experiencia para llevar a los visitantes hacia un objetivo comercial. En lugar de solo esperar que los visitantes respondan a su CTA, funciona activamente para conducir a los visitantes a través del embudo de ventas y al resultado deseado. Simplemente tiene sentido: mejorar el diseño de conversión mejorará las tasas de conversión.
El diseño de conversión es una forma de marketing que combina principios de diseño con psicología de conversión para guiar el diseño de su sitio web. A partir de esta combinación, se han desarrollado principios específicos para impulsar la conversión utilizando el diseño de su sitio web. Echemos un vistazo a esos principios de diseño.
Siete principios de diseño
Hay siete principios de diseño utilizados con el diseño centrado en la conversión. Los cuatro primeros son elementos de diseño:
- Encapsulación
- contraste y color
- Señales direccionales
- espacio en blanco
Y los tres últimos son elementos psicológicos:
- Urgencia y escasez
- Pruebe antes de comprar
- Prueba social
Estos principios de diseño se pueden ver en el diseño de la página de destino y también se pueden usar con banners y barras laterales, o en cualquier otro lugar donde desee centrarse en la conversión.
Encapsulación
Coloca tu CTA en una ventana o un marco. Puede hacer esto con formas como círculos y elementos como contraste y color para crear señales direccionales.
Contraste y Color
Imagen de opicobello / shutterstock.com
Asegúrate de que tu botón CTA tenga suficiente contraste para destacar. Comience con el contraste y pruebe los colores para obtener el mejor rendimiento. Considere también un formulario que aparece fuera de la página. Algunos sostienen la teoría del color, mientras que otros sostienen que el color es secundario al contraste. Recomiendo usar pruebas A/B para ver qué funciona mejor para ti.
Como referencia, aquí hay un vistazo a la psicología del color.
- Negro: serio
- Marrón: sano
- Rojo: peligro, emoción
- Azul oscuro: calmante, confiable
- Azul claro: fresco, juvenil
- Oro: conservador, elegante
- Gris: integridad, maduro, neutral.
- Verde: reconfortante, crecimiento, positivo.
- Metálico: elegante, rico
- Naranja: positivo
- Pasteles: sensibles, suaves, juveniles
- Rosa: juvenil, cálida.
- Púrpura: real
- Blanco: puro, limpio, honesto
- Amarillo: positivo, precaución
Puede usar estos colores con combinaciones contrastantes para crear drama o la sensación de seguridad. El objetivo es atraer el tipo correcto de atención.
Señales direccionales
Dirija a sus visitantes a través de su presentación a su llamado a la acción. Use señales visuales para señalar a los visitantes en la dirección correcta. Dirija su punto focal usando señales como caminos o flechas >> con una etiqueta para darles direcciones. Las personas o los animales que miran en cierta dirección incitan a los lectores a mirar en esa dirección.
espacio en blanco
Recuerda usar espacios en blanco. Esta es el área vacía alrededor de un objeto que permite que todos los elementos se destaquen y no se pierdan entre la multitud. Demasiados elementos amontonados harán que cada elemento sea demasiado difícil de ver. Los espacios en blanco le dan al diseño algo de espacio para que los visitantes puedan concentrarse en lo que usted quiere que hagan. Si sus ojos solo tienen algunas cosas en las que enfocarse, es más probable que vean lo que usted quiere que vean y hagan clic en lo que usted quiere que hagan clic.
Urgencia y escasez
Añade algo de urgencia. A veces, las personas tienden a pensar demasiado y a demorarse antes de tomar una decisión. Si saben que la oferta siempre estará ahí, no tendrán prisa por aceptarla a menos que la necesiten de inmediato. Hágales saber que la oferta no siempre estará allí.
Esto puede ser algo tan simple como mostrar cuántos productos de un producto están disponibles en stock, cuándo aumentará el precio, cuántos asientos están disponibles para un evento, cuánto tiempo antes de que venza un paquete, etc. Esta información debe colocarse cerca el botón de llamada a la acción. Haz que la urgencia sea real. No les dé 90 segundos para decidir, pero luego comience el contador de nuevo. Ser realista.
Pruebe antes de comprar
Ofrezca a los visitantes una vista previa del producto. Esto podría ser una presentación de diapositivas con imágenes de alta resolución, un video, un capítulo de muestra de un libro electrónico como descarga de PDF o como una publicación de blog con un CTA (con la publicación que se muestra en la página de destino), etc. Esto hace que su producto más creíble. Esto les dará más confianza en su producto y les ayudará a tomar una decisión, lo que a su vez evitará que tenga que lidiar con devoluciones, malos comentarios, etc. Sea creativo en su presentación para el adelanto.
Prueba social
Mostrar correctamente la prueba social es fundamental para el diseño de conversión. Respalda sus afirmaciones de personas reales que han usado sus productos. Añade autenticidad, credibilidad y credibilidad. Muestra que tienes seguidores y que otros creen en ti y en tu producto. Sin embargo, la prueba social también puede ser difícil de usar. Si se usa incorrectamente, puede dificultar las conversiones. Los testimonios de los clientes deben verse y sentirse reales y honestos y no como si hubieras elegido solo lo que quieres mostrar.
¿Por qué utilizar el diseño de conversión?
Una página de inicio rápida de Divi
El desorden es tu enemigo. Hace que sus lectores se distraigan y no presten atención a su oferta. Muchos propietarios de sitios web usan un diseño que les gusta y luego intentan agregar un CTA. El problema suele ser que el diseño no se creó teniendo en cuenta la conversión o una llamada a la acción. ¿ Recuerdas dónde está Waldo ? ¡No hagas tu CTA Waldo!
Usando los principios de diseño de conversión, puede diseñar el sitio web teniendo en cuenta la conversión y no se sentirá como si lo estuviera agregando después del hecho. El diseño de conversión reduce el desorden y permite que tus visitantes vean lo que tú quieres que vean: tu CTA.
Algunos puntos a considerar
Una buena campaña tendrá un índice de atención de uno, lo que significa que tendrá una acción prevista sin distracciones. Si hay otros 19 enlaces, la relación de atención será de 20:1, dando a los lectores 20 clics posibles y un clic previsto. Desea una proporción de 1: 1, dándoles un clic posible con un clic previsto. Con menos enlaces para distraer al lector, es más probable que noten tu CTA y respondan favorablemente.
La copia web también juega un papel importante en la conversión, pero una gran copia será ignorada si el diseño distrae, desordena, confunde, es demasiado llamativo o simplemente es feo.
Tu CTA debe estar en la mitad superior de la página. Debe captar la atención del lector, pero no ser una distracción.
El aspecto más importante de una página de destino es la tasa de conversión que terminas obteniendo. Las páginas de destino tienen un propósito: convertir. Así que probablemente debería cumplir con ese requisito, ¿no crees?
Las barras laterales a menudo contienen CTA, como suscripciones a boletines, anuncios, enlaces sociales, suscriptores de RSS o incluso comentarios. Pero no todos los sitios web se beneficiarán de una barra lateral. Algunos lectores ni siquiera los notan. Al igual que cualquier CTA, debe estar en la mitad superior de la página. Debe ser llamativo, por lo que deberá prestar atención al color y al contraste. Si usa su barra lateral correctamente, impulsará su CTA.
Parte del diseño de conversión es probar el rendimiento. Cada elemento de una conversión debe ser probado y mejorado. Si no está convirtiendo a los visitantes en clientes, entonces se debe reevaluar el diseño.
Cómo Divi puede ayudar con el diseño de conversión
Divi es un gran tema para el diseño de conversión. Hace que el diseño para la conversión sea rápido y fácil. Ten en cuenta que cada página tiene un propósito, por lo tanto cada página tiene un foco de conversión. Los diseños integrados de Divi tienen este enfoque preconstruido en ellos.
Si desea reorganizar los elementos de su página, simplemente arrastre y suelte hasta que tenga el diseño que desea. Los diseños son limpios y fáciles de editar. Para obtener más información sobre el uso de Divi para diseñar para la conversión, consulte el artículo Cómo diseñar para la conversión utilizando el tema Divi .
Probar el diseño de conversión con Divi Leads
La característica más nueva de Divi, Divi Leads, puede ayudarlo a mejorar su diseño de conversión mediante la prueba del rendimiento de los elementos de su página. Al probar secciones, filas y módulos, puede probar su diseño de conversión en páginas de destino, barras laterales y más. En esta sección, echaremos un vistazo a las pruebas de algunos elementos de conversión y veremos cómo los resultados de las pruebas pueden mejorar el diseño.
En estas pruebas, estoy usando suscripciones a boletines como CTA. Al diseñar formularios para boletines, es mejor mantenerlos breves y limpios. No preguntes por su nombre y apellido, dirección, etc., si no es crucial para tu campaña. Simplemente pregunte por su correo electrónico o nombre y correo electrónico. Cuantos más campos tengan que completar, más abrumados se sentirán y, en última instancia, menos probabilidades de convertir.
Una nota rápida sobre los resultados de estas pruebas: estoy simulando las pruebas solo para mostrarle los gráficos. En realidad quisiera más datos antes de tomar una decisión. Cuantos más datos tenga, más precisa será la prueba. Además, muchas cosas podrían considerarse una conversión. Depende del objetivo de su sitio.
Diseño de Conversión en Landing Pages
Estoy usando el diseño de página de destino estándar de Divi y luego reemplazando los módulos de Llamada a la acción con un cuadro de texto que contiene códigos abreviados para Bloom . Me doy cuenta de que Divi incluye un módulo de suscripción por correo electrónico, pero quiero usar las funciones de diseño de Bloom. El módulo de suscripción de correo electrónico de Divi, Bloom o cualquier formulario de suscripción al boletín funcionarán. Incluso podría probarlos todos uno contra el otro para ver qué le da la mejor conversión.
Quiero realizar varias pruebas. El primero es colocar la imagen y el formulario de suscripción uno al lado del otro frente a uno por encima y otro por debajo. El ganador de esa prueba pasará a la siguiente prueba.
Agregando el shortcode de Bloom.
Después de colocar todos mis módulos, entré en cada módulo y coloqué el código abreviado para mi formulario de suscripción al boletín de Bloom.
Fila 1
La fila 1 coloca el formulario debajo de la imagen. Decidí que este formulario permitía a los lectores inscribirse en un evento, así que también coloqué un contador de números para mostrar cuántos asientos hay disponibles. De esta manera, los lectores sabrán que tienen que registrarse rápidamente si quieren asistir.
El resultado es un diseño limpio que llama la atención sobre el formulario de registro.
Fila 2
La fila 2 coloca el formulario de registro debajo de la imagen con el contador de números debajo del formulario.
La página es limpia y llama la atención tanto la imagen como el formulario de registro. Ahora solo necesito ejecutar la prueba por un tiempo y ver cuál de los dos diseños me da la mejor conversión.
Resultados
La tasa de clics muestra que la fila 1 fue más popular que la fila 2. Con la misma cantidad de impresiones, la fila 1 recibió el doble de clics, lo que le dio a la fila 2 una tasa de rebote más alta. La fila 1 es la ganadora obvia en este caso. Luego, puedo continuar probando el diseño usando diferentes colores para el formulario, texto diferente, diseños de formulario diferentes, etc.
Afortunadamente, también podemos usar Divi Leads para probar un diseño con barras laterales. Divi tiene una característica de diseño interesante cuando se trata de barras laterales. Puede usar la barra lateral normal o puede elegir un diseño con su propia barra lateral. También puede desactivar la barra lateral (eliminando el módulo o ajustando la configuración para que no sea visible en ciertos dispositivos), para que pueda probar cuál funciona mejor para su diseño. Otra ventaja de usar un diseño con su propia barra lateral es que puedes crear una barra lateral para páginas y publicaciones específicas.
Para esta prueba, cargué un diseño de blog con una barra lateral derecha. Luego configuré el diseño de la página de configuración de publicación de Divi para que no incluyera una barra lateral. Esto es excelente para probar ubicaciones y elementos de la barra lateral. En esta prueba, sigo probando los formularios de correo electrónico.
La configuración dentro de la barra lateral me permite elegir qué área de widgets quiero usar. De esta manera, puedo cargar diferentes widgets dentro de las distintas áreas de widgets y probar entre ellos. Para la primera barra lateral, elegí Sidebar. Para la segunda barra lateral, elegí la barra lateral 6.
Creé varios formularios de registro de correo electrónico diferentes, cada uno con diferentes colores y estilos. Luego, creé una prueba A/B para ver qué formulario de suscripción al boletín informativo fue el más exitoso. Estoy usando Bloom (que tiene su propia función de prueba A/B), pero elegí hacer la prueba A/B con Divi Leads para poder hacer cambios con otros widgets.
Si bien todos los diseños integrados de Bloom se verán geniales, aún puede realizar pruebas A/B de sus propios estilos, colores, campos, etc. para ver qué funciona mejor.
Resultados
La segunda barra lateral tuvo menos impresiones pero más clics.
Podemos ver que la primera barra lateral tenía una tasa de rebote más alta. Terminé la prueba y usé la segunda barra lateral. Continuaré probando y usando la barra lateral que obtenga la mayor cantidad de conversiones.
Una vez que haya determinado qué formulario quiero conservar, podría probar toda la sección con una sección con la barra lateral a la izquierda o con una sección sin barra lateral pero con el formulario dentro de la sección para ver cuál funciona mejor. En última instancia, mis opciones de diseño y distribución estarán determinadas por la conversión.
Pensamientos finales
El diseño de conversión es fácil con WordPress y Divi. Divi Leads te brinda las herramientas para mejorar tus diseños. Usando los principios de diseño de conversión, puede usar Divi Leads para probar sus diseños y obtener las mejores conversiones posibles.
¡Tu turno! ¿Incorporas los principios del diseño de conversión en tu sitio web de WordPress? ¿Tienes algo que añadir? Háganos saber en los comentarios.
Imagen en miniatura del artículo de Vadym Nechyporenko / shutterstock.com