Inicio  /  Todos  / 5 formas de hacer que las ventanas emergentes se vean geniales en un dispositivo móvil (para su sitio web responsivo)

5 formas de hacer que las ventanas emergentes se vean geniales en un dispositivo móvil (para su capacidad de respuesta...

el 18 de julio de 2019
Ventanas emergentes móviles

Nuestro mundo se ha vuelto oficialmente móvil. Al analizar la proporción de minutos digitales gastados por los usuarios en los EE. UU. en diferentes dispositivos, los teléfonos inteligentes representaron 62 por ciento seguidas de las computadoras de escritorio con un 29 por ciento y las tabletas con un 9 por ciento de participación.

Impulsando el movimiento hacia una era móvil, Google ha anunciado que implementará su indexación móvil primero como predeterminada para todos los sitios web a partir del 1 de julio de 2019. Todos estos factores han hecho que la incorporación de prácticas de diseño responsivo al desarrollar sitios web y aplicaciones web sea imprescindible para todo.

Aprovechar la enorme cantidad de tráfico móvil que se produce cuando los usuarios acceden a su sitio web optimizado para dispositivos móviles requiere la elaboración inteligente de una estrategia emergente. Uno que obligue a los usuarios a convertir e ingresar su flujo de ventas sin afectar negativamente la experiencia del usuario o peor aún, el ranking SEO en Google.

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 debe garantizar 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 para impulsar las conversiones móviles

A pesar de que Google no favorece las ventanas emergentes móviles y la opinión de los usuarios 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.

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 los sitios web de escritorio no están sujetas a la penalización de Google, por lo que podría mostrar ventanas emergentes de página completa que cubran el contenido y no obstaculizarían la clasificación de su página web. Una estrategia similar en dispositivos móviles a la hora de 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 de contacto más pequeño da lugar al "síndrome del dedo gordo". El usuario, en lugar de realizar una conversión, podría terminar abandonando su 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. Mantenga limitado el tamaño de la ventana emergente

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.

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.

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.