Cómo optimizar los formularios popup y menú desplegable para móviles

Objetivos de aprendizaje

Aprende a diseñar tu formulario de registro móvil teniendo en cuenta las mejores prácticas de Klaviyo para asegurarte de que tus formularios emergentes y de menú desplegable están optimizados para los visitantes móviles. 

Los compradores online utilizan cada vez más sus dispositivos móviles para descubrir nuevas tiendas, comerciar, examinar productos y realizar compras, por lo que es más importante que nunca que te asegures de que tu sitio web se ve tan bien en los dispositivos móviles como en los ordenadores de sobremesa, y eso incluye tu formulario de registro. 

Antes de empezar

En Klaviyo, puedes crear formularios que se muestren en todos los dispositivos (es decir, que sean visibles en dispositivos de escritorio y móviles), o puedes crear formularios sólo para móviles que sólo se muestren en dispositivos móviles.

Si tu formulario está configurado para mostrarse en todos los dispositivos, Klaviyo optimiza automáticamente algunos elementos, como el tamaño de las fuentes y las imágenes, para mejorar su apariencia para los compradores en dispositivos móviles; aunque, esta guía cubrirá las mejores prácticas adicionales a tener en cuenta. Utiliza el selector de vista de la esquina superior derecha del constructor de formularios para cambiar entre las vistas de escritorio y móvil a medida que construyes tu formulario. El icono de escritorio mostrará el aspecto del formulario para los compradores de escritorio, mientras que el icono de móvil muestra lo que ven los compradores de móvil.

Esta guía cubrirá las mejores prácticas para crear formularios emergentes y de menú desplegable que aparezcan en dispositivos móviles. Son útiles independientemente de si tu formulario se muestra en todos los dispositivos o sólo en los móviles. Para una visión más profunda sobre el formulario de registro específicamente en dispositivos móviles, dirígete a Conceptos básicos: diseño de formularios para móviles.

Buenas prácticas generales en materia de formularios

Muchas de las mejores prácticas para los formularios de escritorio se aplican también a los dispositivos móviles: 

• Hazlo breve y dulce: considera un formulario de varios pasos si tienes muchos campos.
  • Si tu formulario recoge el consentimiento para enviar SMS, recoge el correo electrónico en el primer paso, seguido de SMS en el segundo paso con Smart Opt-in para que los visitantes en dispositivos móviles puedan suscribirse de la forma más sencilla.
• Asegúrate de que sea fácil de cerrar, para que los visitantes no se sientan frustrados y abandonen tu sitio. 
  • Utilizar un formulario adelanto ofrece a los compradores la posibilidad de cerrar y volver a abrir el formulario cuando lo deseen.
• Si tu formulario está configurado para mostrarse en todos los dispositivos (es decir, todos los compradores de escritorio y móviles lo verán) e incluye una imagen lateral, deja la imagen lateral para que se muestre sólo en Móvil. 
  
• Utiliza etiquetas concisas para cada uno de tus campos (por ejemplo, dirección de correo electrónico, número de teléfono, etc.) que quepan en una sola línea para que los compradores puedan ver fácilmente qué información les estás pidiendo.

SEO y formularios móviles 

Es importante tener en cuenta las mejores prácticas de SEO para móviles, sobre todo al crear formularios en tu página de inicio u otra página de destino. Los formularios que aparecen en la página de destino de búsqueda orgánica común no deben tapar el contenido de tu sitio ni interrumpir la experiencia del visitante; de lo contrario, la página puede ser penalizada por los algoritmos de búsqueda. Más información sobre intersticiales intrusivos y SEO.

Para evitarlo:

• En la pestaña Orientación y comportamientos, establece la temporización de tu formulario en Basado en reglas y, a continuación, establece un tiempo de retardo más largo (por ejemplo, cuando un visitante está saliendo de la página).
• Añade un adelanto que se muestre Antes de mostrar el formulario.

Optimizar las ventanas emergentes

Un formulario emergente aparece en medio de la pantalla del comprador, a menudo cubriendo gran parte de la página y obstaculizando su capacidad de interactuar con otros elementos de la página mientras el formulario está abierto. Esto hace que las ventanas emergentes sean más molestas, pero también de mayor conversión. 

Optimizar el funcionamiento de las ventanas emergentes en dispositivos móviles:

1. desactivar/inhabilitar que el formulario se cierre cuando un comprador móvil hace clic fuera del área del formulario para disminuir los cierres accidentales de formularios.
   • Navega hasta Orientación y Comportamientos.
   • Desplázate hasta Dispositivos.
   • En Haz clic fuera del formulario para cerrarlo, desactiva/inhabilita el interruptor Móvil.
     
2. Asegúrate de que el icono de cierre de tu formulario (el botón X) es lo suficientemente grande, incluso en una pantalla pequeña como la de un dispositivo móvil.
   • Haz clic en el icono de cerrar en la vista previa del formulario para ajustar su tamaño.
   • Prueba cómo se ve el formulario en tu propio dispositivo móvil para asegurarte de que es fácil de encontrar y de pulsar.
     Por ejemplo, el icono de cerrar del formulario de la izquierda puede ser difícil de pulsar en un dispositivo móvil. Sin embargo, el icono de cerrar del formulario de la derecha es más grande y fácil de encontrar. 
     
3. Separa visualmente tu ventana emergente del resto de tu sitio, utilizando un color superpuesto, una sombra paralela, o ambos.
   • Navega hasta la pestaña Estilos.
   • En la sección Fondo del formulario, establece el Color de superposición para utilizar una superposición semiopaca que atraiga la atención hacia tu formulario y atenúe el contenido de tu sitio mientras el formulario esté abierto.
   • Configura una Sombra Caída para proporcionar un sombreado sutil alrededor de tu formulario y separarlo del contenido circundante.
4. Ajusta los márgenes de tu formulario para que se parezca más a un formulario emergente en los dispositivos móviles y no vaya de borde a borde.
   
   1. En la pestaña Estilos, desplázate hasta Estilos de formulario.
   2. Aumenta el margen Izquierda/Derecha en función de cómo se vea en la vista previa.

Optimizar las ventanas emergentes 

Cuando aparece un formulario de menú desplegable, los visitantes móviles pueden seguir interactuando con tu sitio detrás del formulario, a menos que la Superposición móvil esté activada. Pueden elegir cerrar el formulario, rellenarlo o dejarlo abierto mientras siguen navegando. En general, esto hace que los flyouts sean menos intrusivos que las ventanas emergentes. 

Para optimizar tu formulario de menú desplegable para un dispositivo móvil:

1. Configura tu formulario para que salga volando por la parte superior o inferior de la pantalla.
   • Navega hasta la sección Estilos.
   • Selecciona Posición en el menú desplegable Móvil y, a continuación, elige Acoplar a la parte inferior o Acoplar a la parte superior.
     Cuando se selecciona esta opción, tu formulario saldrá volando desde la parte superior o inferior de la pantalla y cubrirá una parte de la pantalla de borde a borde.
     
2. Separa visualmente el formulario de tu menú desplegable del resto de tu sitio mediante una superposición móvil, una sombra paralela o ambas.
   • Navega hasta la pestaña Estilos.
   • Desplázate hasta la configuración del Fondo del formulario.
   • Activa la Superposición móvil para que los compradores móviles no puedan hacer clic en ningún otro elemento de tu sitio hasta que rellenen o cierren el formulario. Ten en cuenta que la superposición Móvil no aparecerá cuando el formulario del menú desplegable se visualice en un ordenador de sobremesa.
   • Activa la Sombra paralela para proporcionar un sombreado sutil alrededor de tu formulario y separarlo del contenido circundante. Ten en cuenta que la configuración de la sombra afecta tanto a la versión móvil como a la de escritorio de tu formulario.
     

Siguientes pasos

Una vez que hayas optimizado tus formularios para dispositivos móviles, haz pruebas A/B con los diseños de tus formularios para comprender mejor las preferencias de los visitantes de tu sitio. 

Recursos adicionales 

• Primeros pasos con los formularios de registro
• Comprender la configuración del formulario de despido 
• Conceptos básicos: diseño de formularios para móviles
• Cómo utilizar el formulario emergente para recoger el consentimiento para enviar SMS