La guía para el diseño inteligente de ventanas emergentes

Los usuarios a menudo se molestan con molestar ventanas emergentes que requieren que llenen formularios o respondan preguntas, pero ¿son todos tan malos? Hay ventanas emergentes que ayudan a los usuarios, dan consejos u ofrecen descuentos en productos.

Entonces, un surgir suele ser una pequeña ventana que aparece repentinamente en primer plano de la interfaz visual de una página web. Las ventanas emergentes pueden ser un anuncio, un bloque de información, un formulario de contacto, etc. Es más probable que sean pequeñas y con colores contrastantes, pero definiremos todos los elementos del diseño de las ventanas emergentes y los factores que influyen en cómo los usuarios las perciben en secuencia. no todo a la vez.

Ventanas emergentes

Apariencia brillante

Las ventanas emergentes pueden servir para diferentes objetivos y esto influye en la forma en que se inicia una ventana emergente. Si es un anuncio o un banner promocional, aparecerá sin acciones, solo en un período de tiempo determinado después de que abra una página web. El otro caso es una ventana emergente informativa. Debe iniciarse con un clic. Una ventana emergente informativa tiene una función explicativa, por ejemplo, ayuda a completar un formulario. Las ventanas emergentes también pueden ser un bloque de contenido adicional con información secundaria sobre este o aquel punto, para que solo los usuarios interesados ​​lo lean. Esto puede ayudarlo a organizar el contenido y mantener las reglas de espaciado en su sitio web. Es mejor una ventana emergente con un formulario de contacto que no aparezca de repente, porque los usuarios no la tratarán bien. El pop de contacto debe abrirse con un botón específico, esto sería perfecto.

El Mundo al Revés con Pop Ups simples
Hay cuatro bloques de colores con descripciones de servicios en esta página web. Cada bloque se complementa con una sección informativa emergente. Es fácil iniciarlo haciendo clic y cerrarlo con un botón de cruz.

¿Cuanto más grande, mejor?

El tamaño es importante para muchos elementos de diseño de sitios web, ¿hay ventanas emergentes en esta lista? Definitivamente están ahí, pero la pregunta es si una ventana emergente debe ser pequeña o grande. Para comparar: una pequeña ventana emergente, digamos 30-40% de una página web completa, será precisa, atractiva y no bloqueará visualmente el resto del contenido. Aún así, si desea que su ventana emergente capte la atención de todos los usuarios y haga que el contenido sea altamente visible, es mejor que haga que esta ventana sea enorme y ocupe aproximadamente el 80% del espacio de la página web. Un truco más para usar: si una ventana emergente es bastante pequeña, difumine u oscurezca el fondo. Conducirá a una mejor exposición visual de una pequeña ventana.

Blog de Photodoto con un bonito diseño emergente
Lo que vemos aquí es una ventana emergente bastante buena hecha en las proporciones correctas al tamaño de la página web. Destaca sobre el fondo gracias a su elección de colores brillantes y al efecto de fondo oscurecido.

Juego de colores

El color es una parte esencial en todos los aspectos del diseño web, es cierto. Pero, ¿qué elección de color está ganando para las ventanas emergentes? La mejor paleta de colores es la que se basa en el contraste. Finalmente, el objetivo de cualquier ventana emergente es hacer que la gente actúe, por lo que debe diseñar un botón de CTA / código de promoción o cualquier otro detalle que lleve a acciones en colores brillantes. En este caso, el color principal de la ventana emergente debe ser neutro, como blanco, gris o marrón.

Diseño de sitios web agrícolas con pop-up amarillo brillante
Este diseño emergente contrasta, pero de una manera ligeramente diferente a la que discutimos. No usa dos colores opuestos, es monocromático con un tono amarillo pegadizo. Se ve muy bien contra un fondo oscuro.

Contenido

El contenido de una ventana emergente es muy pequeño, por lo que su tarea principal es ser convincente y muy sabio. Estas 2 o 3 líneas de texto que escriba en esta sección decidirán el futuro de su campaña online. Algunas palabras convincentes que puede usar son: guardar, gratis, resultados, querer, listo, necesitar, obtener, probar, negociar, rebajar, negociar, rápido, ahora, apúrate, ser la primera, la última oportunidad, etc.

Me encanta el sitio web de Lou con el concurso emergente
La ventana emergente de este sitio web francés tiene un botón CTA persuasivo. Significa «jugar y ganar» en inglés.

Dar una opción

Es muy bueno crear una ventana emergente que haga una pregunta y ofrezca dos respuestas simples «sí» o «no». Por ejemplo, desea que sus visitantes prueben una versión de demostración gratuita de su nuevo producto y tiene la pregunta «¿Le gustaría probar nuestro nuevo producto de forma gratuita?». Por supuesto, puede crear un solo botón de llamada a la acción con el texto ‘sí’, ‘probar’, ‘probar ahora’, ‘probar’, ‘obtener una prueba’, etc. Pero puede hacer dos botones (preferiblemente de diferentes colores) con el siguiente texto: ‘Sí, lo quiero’ y ‘No, no quiero nada gratis’. Estas son solo variantes aproximadas, pero el sentido es claro. En este caso, es necesario que los usuarios comprendan que ahora tienen una oportunidad, luego no habrá nada gratis.

La elección limitada incita a los usuarios a actuar y no dudar.

Formulario de entrada

Cualquier tipo de formulario es sospechoso para los usuarios porque solicita datos personales. No se trata de ventanas emergentes de formulario de contacto, donde los usuarios se guían por su decisión. Ahora, estamos hablando de los formularios que ofrecen a los usuarios suscribirse a un boletín informativo, obtener un libro electrónico o un curso gratis, obtener un descuento, etc. Existe la posibilidad de que las ventanas emergentes de 2 pasos funcionen mucho mejor. Usted hace una pregunta en la primera ventana emergente (como en el ejemplo que mencionamos anteriormente) y luego hay 2 escenarios para continuar. Abrirá otra ventana emergente con un formulario de entrada para aquellos que respondieron positivamente y simplemente cerrará la ventana para los usuarios que eligieron la respuesta negativa.

Sitio SentinelOne con formulario emergente rápido
El formulario web en una ventana emergente le permite solicitar un servicio de la empresa muy rápidamente con solo hacer clic en un botón y algunos campos vacíos para completar. Por cierto, revisa el botón CTA: ¡su color es realmente pegadizo!

Sitio web de Hatteras con ventana emergente de formulario de contacto simple
Presione el botón ‘Contáctenos’ en la página de inicio o en la página de contacto, y verá este diseño emergente mínimo con un formulario para completar. Haga clic en la cruz, si cambia de opinión.

Alternativa

Todo usuario tiene derecho a elegir y debes respetarlo. Mientras trabaja con la creación de ventanas emergentes, debe pensar en todos los resultados posibles. A algunos les gustará que aparezca tu ventana emergente, otros la odiarán, habrá algunas personas que la cerrarán automáticamente y luego buscarán dónde encontrarla nuevamente. Debe hacer que su ventana emergente sea fácil de cerrar (sin dar ninguna respuesta) para los usuarios que desean volver al sitio lo más rápido posible, ya que no están interesados ​​en ofertas y anuncios.

Entonces, el tiempo es un problema muy importante al que puede enfrentarse: cuándo hacer que aparezca la ventana emergente, ¿debería aparecer nuevamente después del cierre? La media dorada es hacer que aparezca una ventana emergente en aproximadamente 5 segundos después de que se abre un sitio web y si un usuario lo cierra, no debería aparecer nuevamente. Aún así, si el cierre fue accidental y la ventana emergente brinda información / descuento exclusivo, asegúrese de que aparezca con la frecuencia suficiente, por ejemplo, cada vez que un usuario abre el sitio (o una página determinada).

Sitio web de Xchop con una ventana emergente de chat en vivo
El chat en vivo es una buena manera de conectarse con sus usuarios, y este sitio web muestra cómo aprovechar al máximo el diseño emergente para comunicarse con los clientes. La ventana aparece automáticamente, pero puede usar una flecha hacia abajo para ocultarla.

La creatividad mata con una ventana emergente de Facebook
Esta variación del diseño emergente (que surge inmediatamente después de que se abre el sitio web) está destinada a llegar a más seguidores nuevos en Facebook. En caso de que no desee seguir a esta comunidad, use el botón de cruz en la esquina superior izquierda.

¿Que sigue?

Las ventanas emergentes no deberían alterar la experiencia del usuario. Lleve a los usuarios al lugar donde habían estado antes de que apareciera la ventana emergente. No se comprometa a reenviar a los usuarios a una página o sección que desea que visiten.

Conclusión

El diseño emergente tiene muchas reglas, pero la decisiva es hacerlo efectivo. Efectivo sería cuando se diseña, escribe y coloca correctamente. Haga que su ventana emergente sea un elemento útil del sitio web, ¡no destructivo!