Cómo optimizar los formularios emergentes y flyout para móviles

Qué aprenderás

Aprenda a diseñar sus formularios de registro para móviles teniendo en cuenta las mejores prácticas de Klaviyo para que pueda asegurarse de que sus formularios emergentes y desplegables están optimizados para los visitantes móviles. 

Los compradores en línea utilizan cada vez más sus dispositivos móviles para descubrir nuevas tiendas, examinar productos y realizar compras, por lo que es más importante que nunca asegurarse de que su sitio web se ve tan bien en móviles como en ordenadores de sobremesa, y eso incluye sus formularios de inscripción. 

Antes de empezar

En Klaviyo, puede crear formularios que se muestren en todos los dispositivos (lo que significa que son visibles en dispositivos de escritorio y móviles), o puede crear formularios sólo para móviles que sólo se muestren en dispositivos móviles.

Si su 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. Utilice 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 construye su 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 desplegables que aparezcan en dispositivos móviles. Son útiles independientemente de si su formulario se muestra en todos los dispositivos o sólo en los móviles. Para obtener una visión más profunda sobre los formularios de inscripción específicamente en dispositivos móviles, diríjase a Conceptos básicos: diseño de formularios para móviles.

Mejores 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: 

• Que sea breve y dulce: considere la posibilidad de utilizar un formulario de varios pasos si tiene muchos campos.
  • Si su formulario recoge el consentimiento por SMS, recoja el correo electrónico en el primer paso, seguido del 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úrese de que es fácil de cerrar, para que los visitantes no se sientan frustrados y abandonen su sitio. 
  • El uso de un formulario teaser 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 que la imagen lateral se muestre sólo en Móvil. 
  
• Utilice etiquetas concisas para cada uno de sus campos de entrada (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á 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 su página de inicio u otras páginas de destino. Los formularios que aparecen en las páginas de destino de las búsquedas orgánicas habituales no deben tapar el contenido de su 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, establezca la temporización de su formulario en Basado en reglas y, a continuación, establezca un tiempo de retardo más largo (por ejemplo, cuando un visitante está saliendo de la página).
• Añada un teaser que aparezca antes de mostrar el formulario.

Optimización de 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 para interactuar con otros elementos de la página mientras el formulario está abierto. Esto hace que las ventanas emergentes sean más perturbadoras, pero también de mayor conversión. 

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

1. Impida que el formulario se cierre cuando un comprador móvil haga clic fuera del área del formulario para disminuir los cierres accidentales de formularios.
   • Navegue hasta Orientación y comportamientos.
   • Desplácese hasta Dispositivos.
   • En Haga clic fuera del formulario para cerrarlo, desactive el interruptor Móvil.
     
2. Asegúrese de que el icono de cierre de su formulario (el botón X) es lo suficientemente grande, incluso en una pantalla pequeña como la de un dispositivo móvil.
   • Pulse sobre el icono de cierre en la vista previa del formulario para ajustar su tamaño.
   • Pruebe cómo se ve el formulario en su propio dispositivo móvil para asegurarse de que es fácil de encontrar y de pulsar.
     Por ejemplo, el icono de cierre del formulario de la izquierda puede resultar difícil de pulsar en un dispositivo móvil. Sin embargo, el icono de cierre del formulario de la derecha es más grande y fácil de encontrar. 
     
3. Separe visualmente su ventana emergente del resto de su sitio, utilizando un color superpuesto, una sombra paralela o ambos.
   • Navegue hasta la pestaña Estilos.
   • En la sección Fondo del formulario, defina el Color de superposición para utilizar una superposición semiopaca que atraiga la atención hacia su formulario y atenúe el contenido de su sitio mientras el formulario esté abierto.
   • Configure una sombra paralela para proporcionar un sombreado sutil alrededor de su formulario y separarlo del contenido circundante.
4. Ajuste los márgenes de su 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ácese hasta Estilos de formulario.
   2. Aumente el margen izquierdo/derecho en función de cómo se vea en la vista previa.

Optimización de los elementos volantes 

Cuando aparece un formulario desplegable, los visitantes móviles pueden seguir interactuando con su sitio detrás del formulario, a menos que la Superposición móvil esté activada. Pueden optar por 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 su formulario desplegable para un dispositivo móvil:

1. Configure su formulario para que salga volando por la parte superior o inferior de la pantalla.
   • Navegue hasta la sección Estilos.
   • Seleccione Posición de la ventana móvil y, a continuación, elija Acoplar a la parte inferior o Acoplar a la parte superior.
     Cuando se selecciona esta opción, su formulario saldrá volando desde la parte superior o inferior de la pantalla y cubrirá una parte de la pantalla de borde a borde.
     
2. Separe visualmente su formulario flyout del resto de su sitio mediante una superposición móvil, una sombra paralela o ambas.
   • Navegue hasta la pestaña Estilos.
   • Desplácese hasta los ajustes de Fondo del formulario.
   • Active la superposición móvil para que los compradores móviles no puedan hacer clic en ningún otro elemento de su sitio hasta que rellenen o cierren el formulario. Tenga en cuenta que la superposición móvil no aparecerá cuando el formulario desplegable se visualice en un ordenador de sobremesa.
   • Active la sombra paralela para proporcionar un sombreado sutil alrededor de su formulario y separarlo del contenido circundante. Tenga en cuenta que la configuración de la sombra afecta tanto a la versión móvil como a la de escritorio de su formulario.
     

Próximos pasos

Una vez que haya optimizado sus formularios para dispositivos móviles, pruebe a realizar pruebas A/B con los diseños de sus formularios para conocer mejor las preferencias de los visitantes de su sitio web. 

Recursos adicionales 

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