Inicio  /  Todo  5 formas de hacer que las ventanas emergentes se vean bien en dispositivos móviles (para su sitio web responsivo)

5 formas de hacer que las ventanas emergentes se vean bien en dispositivos móviles (para su sitio web responsivo)

5 formas de hacer que las ventanas emergentes se vean bien en dispositivos móviles (para su sitio web responsivo)

Las ventanas emergentes son una herramienta popular para captar clientes potenciales, promocionar ofertas y atraer visitantes. Sin embargo, cuando no están optimizadas para dispositivos móviles, pueden frustrar a los usuarios e incluso hacer que abandonen su sitio. La creación de ventanas emergentes compatibles con dispositivos móviles que se integren a la perfección con su diseño adaptable mejora la experiencia del usuario y aumenta las tasas de conversión.

A medida que el uso de dispositivos móviles continúa aumentando, los teléfonos inteligentes ahora representan 62 por ciento de minutos digitales gastados por los usuarios en los EE. UU., con computadoras de escritorio en un 29 por ciento y tabletas en un 9 por ciento. Reconociendo este cambio, Google implementó la indexación móvil como predeterminada para todos los sitios web el 1 de julio de 2019, lo que subraya la importancia de las prácticas de diseño responsivo para sitios web y aplicaciones web.

Para aprovechar la afluencia de tráfico móvil a su sitio, es esencial diseñar cuidadosamente una estrategia emergente que aliente a los usuarios a convertirse e ingresar al sitio. flujo de ventas Sin interrumpir la experiencia del usuario o, peor aún, perjudicar el rendimiento SEO de su sitio en las clasificaciones de Google. Una estrategia de ventanas emergentes bien pensada y optimizada para dispositivos móviles no solo atrae a los visitantes de manera efectiva, sino que también se alinea con las mejores prácticas para el rendimiento de los motores de búsqueda, lo que brinda una experiencia fluida que genera resultados.

Consideraciones importantes antes de implementar ventanas emergentes móviles

Google concede la máxima importancia a una experiencia de usuario perfecta y, por ello, ha emitido directrices estrictas en lo que respecta a la incorporación de popups en sitios web móviles. Considera que las ventanas emergentes en forma de anuncios intersticiales son intrusivas y obstructivas para la experiencia general del usuario mientras navega en un dispositivo móvil.

Por ello, ha delineado normas estrictas para mejorar la experiencia de búsqueda móvil. Estos implican penalizar a las páginas web que muestran ventanas emergentes obstructivas en las páginas de destino (aquellas en las que los usuarios terminan después de hacer clic en los resultados de búsqueda de Google).

Esto es lo que debes tener en cuenta al diseñar ventanas emergentes para que las clasificaciones de búsqueda del sitio web no se vean afectadas.

  • Las ventanas emergentes no deben cubrir el contenido principal de la página web mientras el usuario navega.
  • La ventana emergente debe tener la forma de un intersticial independiente que el usuario debe cerrar para acceder al contenido principal.
  • La parte superior del pliegue del diseño de la página no debe incluir únicamente la ventana emergente que hace que el usuario se desplace hacia abajo para acceder al contenido.

Uso de ventanas emergentes móviles para aumentar las conversiones

A pesar de que Google no favorece las ventanas emergentes móviles y la opinión del público en general sobre las ventanas emergentes es negativa, su importancia y capacidad para impulsar las conversiones del sitio web para tu negocio es innegable.

Si se hacen correctamente, las ventanas emergentes tienen el potencial de impulsar el registro de usuarios y generar ingresos favorables. Ya sea que esté diseñando un sitio web de comercio electrónico o un Sitio web B2B SaaS, diseñar ventanas emergentes efectivas que obliguen a los usuarios a hacer clic en ellas es fundamental desde el punto de vista empresarial.

Aquí hay 5 formas en que puede hacer que las ventanas emergentes en su sitio web responsivo se vean geniales en un dispositivo móvil sin afectar negativamente las clasificaciones de búsqueda.

Ventanas emergentes móviles Poptin
Plantilla de ventana emergente móvil del generador de ventanas emergentes Poptin

1. Diseña la ventana emergente para dispositivos móviles.

El diseño responsivo no significa que la misma ventana emergente que se muestra en el escritorio también funcione para dispositivos móviles. La cantidad de espacio de pantalla disponible en el caso de los teléfonos móviles es significativamente menor, por lo que tener el mismo conjunto de ventanas emergentes terminaría invariablemente saturando la interfaz de usuario, disminuyendo así la experiencia del usuario.

Además, las ventanas emergentes que se muestran en sitios web de escritorio no están sujetas a penalizaciones de Google, por lo que podría mostrar ventanas emergentes de página completa que cubran el contenido y no afectarían la clasificación de su página web. Una estrategia similar en dispositivos móviles para garantizar el diseño responsivo sería.

Diseñar diferentes ventanas emergentes para las versiones web y móvil de su sitio web le da una ventaja en el diseño y le brinda margen de maniobra para las pautas de Google.

2. Cuida el objetivo táctil

El diseño de ventanas emergentes para web y dispositivos móviles es fundamentalmente diferente debido a la diferencia en los tamaños de pantalla y el tipo de interacción del usuario que existe en ambos casos. Si bien los campos de entrada en el caso de la web pueden ser más pequeños para acomodar los clics del mouse, los mismos deben ser lo suficientemente grandes para incorporar objetivos táctiles.

Un objetivo táctil más pequeño da lugar al “síndrome del dedo gordo”. El usuario, en lugar de convertirse, puede acabar abandonando su sitio.

sitio web si no puede completar la acción deseada en los dispositivos móviles.

Como regla general, cada botón en el que se puede hacer clic en su sitio web móvil debe tener un tamaño mínimo de 44 × 30 px. Los dispositivos móviles no son el medio de entrada preferido del usuario. Si solicita registros de correo electrónico, asegúrese de que el campo de entrada sea lo suficientemente grande para que los usuarios puedan hacer clic con solo tocar un dedo y que el formulario de entrada tenga un flujo que ofrezca la menor fricción al usuario.

3. Limite el tamaño de las ventanas emergentes en dispositivos móviles

Un banner emergente en la parte inferior de la pantalla que no cubra el contenido principal de la página web es una estrategia popular para incorporar ventanas emergentes en la página de destino. Dado que no cubre el contenido principal del sitio web que se encuentra en la mitad superior de la página, no viola las especificaciones de Google.

También es menos obstructivo para los usuarios que una ventana emergente modal de página completa. El único desafío al incorporar esta estrategia de ventanas emergentes es que le queda una cantidad limitada de espacio disponible para brindar suficiente valor para que sus clientes realicen conversiones.

Dado que la ventana emergente es más pequeña, puede pasar desapercibida para el usuario. Además, los campos de entrada más pequeños pueden representar un desafío para los usuarios que quieran suscribirse a su lista.

Ventanas emergentes móviles Creador de ventanas emergentes Poptin

4. No bombardees al usuario con ventanas emergentes

Las ventanas emergentes que aparecen tan pronto como el usuario llega a su página web son un desvío instantáneo. Incorpórelos de tal manera que se activen más tarde durante el recorrido de navegación del usuario, una vez que haya tenido la oportunidad de consumir el contenido primero. No permita que la ventana emergente se muestre inmediatamente o segundos después de que llegue el visitante.

Otra estrategia viable es mostrar la ventana emergente en la segunda página que visita el usuario. De esta manera, no se violan las directrices de Google y, dado que el usuario ha tenido tiempo suficiente para consumir contenido valioso, las posibilidades de conversión también son mayores.

5. Comprenda la intención y proporcione valor

Las ventanas emergentes que ofrecen valor hacen que el usuario haga clic voluntariamente en ellas. Estas ventanas emergentes se integran en el recorrido del usuario a través de su sitio web móvil y también dan como resultado una experiencia de usuario perfecta.

Comprender la psicología del usuario y descifrar la intención con la que visita la página web le proporciona las pistas que necesita para redactar una propuesta de valor convincente. Luego se incorpora un botón de llamada a la acción en la página de destino en lugar de una ventana emergente. Al hacer clic en la CTA, aparece la ventana emergente.

A diferencia de otros tipos de ventanas emergentes en las que los usuarios hacen clic por frustración (para cerrarlas) o hacen clic accidentalmente debido a su ubicación, las ventanas emergentes de CTA están mejor integradas. Dado que los usuarios hacen clic voluntariamente en él, se garantiza una experiencia de usuario mejorada.

Independientemente de la estrategia que elija, el diseño de las ventanas emergentes y de todo el sitio web móvil debe realizarse teniendo en cuenta la experiencia general del usuario. Comprender la psicología del visitante y abordar sus necesidades es la clave para el éxito empresarial y el aumento de las conversiones.

El impacto de las ventanas emergentes móviles en el SEO y la experiencia del usuario

La creación de ventanas emergentes móviles que sean atractivas para los usuarios y compatibles con SEO es esencial para mantener las clasificaciones de búsqueda y las interacciones positivas en su sitio. Las ventanas emergentes mal diseñadas, especialmente aquellas que son intrusivas, pueden generar sanciones por parte de Google, lo que podría afectar significativamente sus clasificaciones de búsqueda y la retención de usuarios. A continuación, le mostramos cómo asegurarse de que sus ventanas emergentes móviles cumplan con los estándares de SEO y de experiencia del usuario (UX).

1. Ventanas emergentes optimizadas para SEO

Google prioriza la experiencia del usuario en sus algoritmos de búsqueda y, desde 2017, penaliza los sitios con anuncios intersticiales intrusivos en dispositivos móviles. Se trata de ventanas emergentes o superposiciones que obstruyen una gran parte del contenido, lo que dificulta el acceso de los usuarios a la información. Para evitar sanciones, asegúrate de que tus ventanas emergentes cumplan las directrices de Google:

  • Evite las ventanas emergentes de pantalla completa al ingresar: Google marca las ventanas emergentes que ocupan toda la pantalla y que aparecen inmediatamente cuando un usuario visita un sitio móvil. En su lugar, utilice ventanas emergentes más pequeñas y no intrusivas que cubran solo una parte de la pantalla o retrasen su aparición hasta que el usuario haya interactuado con el contenido.
  • Utilice activadores inteligentes en lugar de ventanas emergentes inmediatas: En lugar de mostrar una ventana emergente en cuanto alguien llega a su sitio, utilice activadores de desplazamiento, retrasos de tiempo o activadores de intención de salida para mostrar las ventanas emergentes en los momentos adecuados. Este enfoque garantiza que los usuarios puedan interactuar con su contenido primero, lo que mejora su experiencia y reduce las tasas de rebote.
  • Diseño para Accesibilidad: Asegúrate de que las ventanas emergentes se puedan cerrar fácilmente. Google espera que los usuarios puedan cerrar las ventanas emergentes sin frustrarse, por lo que debes proporcionar un botón con una "X" claramente visible y asegurarte de que la opción de cerrar esté disponible en todos los tamaños de pantalla.
  • Optimizar la velocidad de carga: Las ventanas emergentes que se cargan demasiado lentamente o demoran el contenido de la página pueden afectar negativamente la velocidad de carga de su sitio, que es un factor de clasificación en la indexación móvil de Google. Use diseños de ventanas emergentes livianos y pruebe las velocidades de carga para asegurarse de que su ventana emergente no ralentice la experiencia del usuario.

Punto clave: Para crear ventanas emergentes optimizadas para SEO, asegúrese de que sean mínimamente intrusivas, fáciles de cerrar y que solo aparezcan después de que el usuario haya tenido la oportunidad de interactuar con su contenido.

2. Equilibrar la conversión y la experiencia del usuario

Si bien las ventanas emergentes pueden ser muy eficaces para las conversiones, es fundamental equilibrar estos objetivos con la experiencia del usuario para evitar frustrar a los visitantes. A continuación, se indican algunas prácticas recomendadas para mantener este equilibrio:

  • Limite el número de ventanas emergentes: Mostrar demasiadas ventanas emergentes puede generar una experiencia de usuario negativa, especialmente en dispositivos móviles con pantallas más pequeñas. Concéntrese en una o dos ventanas emergentes bien ubicadas para evitar abrumar a los usuarios. Por ejemplo, puede usar una sola ventana emergente para recopilar registros por correo electrónico u ofrecer un descuento.
  • Adapte las ventanas emergentes al comportamiento del usuario: La segmentación de las ventanas emergentes en función del comportamiento del usuario (como el tiempo que pasa en la página o la cantidad de páginas vistas) hace que parezcan menos intrusivas. Por ejemplo, una ventana emergente con intención de salida Puede captar la atención sin interrumpir la experiencia de navegación. Utilice activadores de profundidad de desplazamiento para garantizar que las ventanas emergentes solo aparezcan cuando los usuarios hayan mostrado interés en el contenido.
  • Mantenga el contenido breve y centrado: Los usuarios de dispositivos móviles esperan información rápida y concisa. Limite el texto de la ventana emergente a unas pocas líneas y concéntrese en las partes más atractivas de su oferta. Evite el desorden y haga que su llamado a la acción (CTA) sea claro y práctico.
  • Pruebe sus ventanas emergentes A/B: Realice pruebas A/B para encontrar el equilibrio adecuado entre eficacia y experiencia del usuario. Pruebe distintos tiempos, ubicaciones y formatos para determinar qué enfoque genera conversiones sin sacrificar la interacción ni generar tasas de rebote elevadas.
  • Considere formatos alternativos: Si las ventanas emergentes estándar le parecen demasiado intrusivas, explore métodos alternativos como ventanas emergentes deslizables, barras de notificación o llamadas en línea. Estos formatos suelen combinarse a la perfección con el contenido y llaman la atención sin cubrir toda la pantalla.

Punto clave: Una estrategia equilibrada de ventanas emergentes mejora la experiencia del usuario y, al mismo tiempo, genera conversiones. Pruebe sus ventanas emergentes, mantenga el contenido al mínimo y utilice activadores basados ​​en el comportamiento para crear una interacción más natural.

Leer: Cómo asegurarse de que sus ventanas emergentes sean compatibles con SEO

Conclusión

Las ventanas emergentes optimizadas para dispositivos móviles son esenciales para cualquier sitio web responsivo que tenga como objetivo captar clientes potenciales e impulsar conversiones sin interrumpir la experiencia del usuario. Si se centra en la simplicidad, la ubicación adecuada, el tamaño, las opciones de salida fáciles y los activadores inteligentes, puede crear ventanas emergentes que se vean bien en dispositivos móviles y tengan eco en los usuarios. Las ventanas emergentes diseñadas cuidadosamente mantienen a los usuarios interesados ​​y aumentan sus posibilidades de lograr sus objetivos de conversión, al mismo tiempo que mantienen una experiencia de navegación positiva.

Rahul Varshneya es el cofundador y presidente de arkenea. Rahul ha aparecido como líder de pensamiento tecnológico en numerosos canales de medios como Bloomberg TV, Forbes, HuffPost, Inc, entre otros.