En el pasado, los sitios web tenían muchos elementos innecesarios, a saber, páginas llenas de esquemas de color llamativos y feos, demasiado texto atascado en espacios pequeños y ventanas emergentes que aparecen y molestan a los visitantes.
Pero los diseñadores no sabían más en ese entonces o, más bien, solo estaban trabajando con las únicas tendencias de diseño y mejores prácticas que conocían.
Los tiempos han cambiado mucho desde entonces.
Los desarrolladores y diseñadores web ya no están limitados por la tecnología o la técnica, lo que significa que ya no hay excusas para un diseño deficiente. Esto se refiere a todos los elementos que se encuentran en un sitio de WordPress, desde la imagen del encabezado de la página de inicio hasta formas contactos, así como desde tipografía hasta pop-ups. Todo importa ahora cuando se diseña para la experiencia del usuario.
Hoy quiero centrarme en lo que hace que una ventana emergente sea efectiva, algo que veo como una parte esencial en el proceso de conversión. Específicamente, me gustaría echar un vistazo a la anatomía de una ventana emergente de WordPress efectiva y cómo este elemento emocionante puede aumentar su tasa de conversión.
El argumento para usar ventanas emergentes en WordPress
Las ventanas emergentes son un elemento de diseño interesante. Aunque interrumpen temporalmente la experiencia del usuario (lo que no suele ser muy apreciado), las que se hacen bien ofrecen algo tan atractivo o emocionante que a los visitantes no les importa perder un minuto para prestar atención.
Por supuesto, en este caso estamos hablando de ventanas emergentes generadoras de conversión que sirven para recopilar suscriptores a la newsletter o incitar a los visitantes a realizar compras. Sin embargo, las ventanas emergentes se pueden utilizar para diversos fines. Por ejemplo, puede compartir sus cookies o su política de privacidad, recomendar elementos relacionados después de que los visitantes agreguen algo al carrito o incluso pedirles que realicen una encuesta rápida.
En su mayor parte, si está utilizando una ventana emergente, probablemente desee que los visitantes tomen medidas. Después de todo, ¿por qué interrumpir su experiencia si la perturbación no es un uso útil de su tiempo? Según un estudio de casi dos mil millones de ventanas emergentes, encontraron que la tasa de conversión promedio para este tipo de ventanas emergentes era del 3,09%.
Ahora, eso plantea la pregunta: ¿las ventanas emergentes siguen siendo relevantes y efectivas? Si el mercado está tan saturado con ventanas emergentes de salida, barras de saludo, superposiciones de página completa y más, ¿vale la pena usar esta herramienta generadora de conversiones en su sitio de WordPress?
Claro !!!
Hay muchas buenas prácticas de diseño web que las ventanas emergentes tienen en cuenta. Por ejemplo:
- Las ventanas emergentes eliminan el desorden innecesario de las páginas de su sitio.
- Por lo general, se componen de imágenes limpias y texto mínimo.
- Las llamadas a la acción están bien diseñadas y se ofrecen simplemente en términos de redacción.
- Hay una pequeña curva de aprendizaje para sus visitantes, ya que la mayoría de las personas están familiarizadas con las ventanas emergentes y saben cómo interactuar con ellas.
- Las ventanas emergentes brindan una oportunidad divertida para infundir su sitio con animaciones, videos o pruebas sociales.
- Puedes crearlos fácilmente con plugins de WordPress alta calidad como Hustle o OptinMonster.
En general, una ventana emergente bien diseñada es ideal para captar la atención de los visitantes cuando más la necesita. Puede utilizarlos para enviar notificaciones o solicitudes oportunas. También puede utilizar los datos de los visitantes para atraerlos a realizar una compra.
La anatomía de una ventana emergente efectiva de WordPress
Obviamente, el éxito de las ventanas emergentes de su sitio de WordPress depende de que estén perfectamente diseñadas y tengan ofertas tan atractivas que los visitantes no puedan evitar interactuar. Así que echemos un vistazo a cómo se ve una fórmula ganadora para una ventana emergente efectiva.
1. estilo
Los diferentes tipos de ventanas emergentes tienden a ser más eficientes para convertir visitantes en suscriptores:
- Las ventanas emergentes de suscripción de correo electrónico tienen una tasa de conversión del 2,9%.
- Las ventanas emergentes de bienvenida (aquellas que ocupan toda la página al ingresar) se convierten en un 2,6%.
- Las ventanas emergentes activadas por desplazamiento convierten 1,9%.
- Las ventanas emergentes inteligentes o de saludo muestran una conversión de 0,5%.
Eso no significa que siempre tenga que usar una ventana emergente de suscripción de correo electrónico tradicional. Aquí hay un ejemplo del sitio de Neil Patel.
Este está bien hecho, porque está diseñado de manera simple, no intrusiva, et utiliza animaciones divertidas para llamar la atención en caso de que su huella mínima pase desapercibida. Tenga en cuenta que elegir un estilo no se trata de utilizar el más popular o el más conocido por sus tasas de conversión más altas. Se trata de encontrar un estilo que funcione para su sitio, sus visitantes, y que esté diseñado para complementar la experiencia intermedia.
2. color
El color, por supuesto, siempre jugará un papel importante en el diseño de sitios web. Al comprender la psicología detrás de los colores elegidos, puede crear ventanas emergentes más efectivas que se conviertan. Por supuesto, tampoco puede olvidar el esquema de color establecido para su marca, por lo que se trata de encontrar un equilibrio entre el diseño de una ventana emergente que se vea bien en el sitio, pero que también obliga a los visitantes a actuar.
3. composición
Es importante dar un paso atrás y ver la ventana emergente como un todo. Aunque el diseño de cada parte móvil en la ventana emergente es importante, al igual que la composición general de la ventana emergente.
Su ventana emergente debería:
- Ser simple y fácil de seguir.
- Diseñado con líneas limpias y bien equilibrado.
- Incluya imágenes relevantes y de alta resolución; idealmente, una sola imagen que resuma el tema de la oferta.
- Parece ser una extensión de su sitio y, obviamente, no está hecho a partir de una ventana emergente con opciones de personalización limitadas.
- Use una tipografía grande y fácil de leer.
4. texto
Luego tenemos el mensaje emergente. Si bien no está en el proceso de desarrollar el lenguaje que se aplica a estas cosas, hay una serie de mejores prácticas que aún debe tener en cuenta cuando se trata de llenar ventanas emergentes con texto.
Tenga en cuenta lo siguiente:
- Incluya siempre un título, un mensaje corto (una oración será suficiente) y una llamada a la acción.
- Use un lenguaje fuerte que atraiga las emociones de los visitantes.
- Ser breve. Si no puede escribirlo en menos de 30 palabras, este mensaje no pertenece a una ventana emergente.
- Use el mismo tono y personalidad que usa en su sitio.
- Ofrezca algo valioso que sus visitantes no encontrarán en ninguna otra parte del sitio.
- Utilice la urgencia si es posible. Si no puedes hacerlo con palabras, hazlo con color.
5. CTA
Actualmente, existe una extraña tendencia creciente en la que los sitios web brindan a los visitantes dos opciones de llamado a la acción. Entiendo por qué esta tendencia está creciendo, pero la he visto mal aplicada en tantos sitios web que espero que la tendencia desaparezca eventualmente.
Probablemente hayas visto esta mala aplicación tú mismo:
- La opcion positiva : Este dice, “¡Oh, gracias, gracias! ¡Sé que esta oferta está a punto de cambiar mi vida para mejor! "
- La opcion negativa : Este dice: "Me gusta tomar malas decisiones en la vida y agradezco que me frotes la cara". Déjame hacer clic en esta opción de autocrítica solo para recibir otra ventana que me pregunta nuevamente si quiero tomar esta terrible decisión. "
Esto no quiere decir que todas las ventanas emergentes con dos opciones de CTA estén mal diseñadas o tengan la intención de avergonzar al visitante. Tim Ferris tiene un buen ejemplo de un CTA de opción dual bien hecho:
Sin embargo, en general, diría que si está tratando de ser sarcástico o intimidar a sus visitantes en su decisión, salga de su sitio y colóquelo en Twitter. Su sitio web no es un lugar para eso y, con suerte, Twitter se lo tragará por completo.
Aparte de esa molestia, también sugiero que la llamada a la acción sea simple. Use un lenguaje simple que deje claro lo que los visitantes obtendrán al ingresar su correo electrónico o hacer clic en el botón. Además, mantenga el trabajo al mínimo: no más de dos campos para completar (es decir, correo electrónico y tal vez un nombre) y un botón para hacer clic.
Eso es todo por este tutorial, espero que te permita diseñar bien tus botones de llamada a la acción.
