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

Qué aprenderás

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

Los compradores online usan cada vez más sus dispositivos móviles para descubrir nuevas tiendas, explorar productos y realizar compras, por lo que es más importante que nunca asegurarte de que tu sitio web se vea igual de bien en móviles que en ordenadores, 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 solo para móviles que solo se muestren en dispositivos móviles.

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

Esta guía tratará las prácticas recomendadas para crear formularios emergentes y desplegables que se muestren en dispositivos móviles. Son útiles tanto si tu formulario se muestra en todos los dispositivos como si solo se muestra en móviles. Para obtener una visión más detallada sobre el formulario de registro específicamente en dispositivos móviles, ve a conceptos básicos: diseño de formularios para móviles.

Prácticas recomendadas generales para formularios

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

• Que sea breve y conciso: considera un formulario de varios pasos si tienes muchos campos.
  • Si tu formulario recopila el consentimiento para SMS, recopila el email en el primer paso y, a continuación, el SMS en el segundo paso con Smart Opt-in para que los visitantes en dispositivos móviles puedan suscribirse con el método más sencillo.
• Asegúrate de que sea fácil de cerrar, para que los visitantes no se frustren y abandonen tu sitio.
  • Usar un teaser de formulario permite a los compradores cerrar y volver a abrir el formulario cuando quieran.
• Si tu formulario está configurado para mostrarse en todos los dispositivos (es decir, tanto los compradores de escritorio como de móvil lo verán) e incluye una imagen lateral, deja la imagen lateral para que se muestre solo en Móvil.
  

• Usa etiquetas concisas para cada uno de tus campos (p. ej., dirección de email, 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 prácticas recomendadas de SEO para móviles, sobre todo al crear formularios en tu página de inicio u otras páginas de destino. Los formularios que aparecen en páginas de destino habituales de búsqueda orgánica no deberían tapar el contenido de tu sitio ni interrumpir la experiencia de un visitante; de lo contrario, la página podría verse penalizada por los algoritmos de búsqueda. Más información sobre los intersticiales intrusivos y el SEO.

Para evitarlo:

• En la pestaña Segmentación y comportamientos, configura la temporización de tu formulario como Según reglas y, a continuación, establece un retraso mayor (p. ej., cuando un visitante esté saliendo de la página).
• Añade un teaser que se muestre antes de mostrar el formulario.

Optimizar los popups

Un formulario emergente aparece en el centro de la pantalla de un comprador, y suele cubrir gran parte de la página e impedir que interactúe con otros elementos de la página mientras el formulario está abierto. Esto hace que los pop-ups sean más molestos, pero también convierten más.

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

1. Evita que el formulario se cierre cuando un comprador desde el móvil haga clic fuera del área del formulario para reducir los cierres accidentales del formulario.
   • Ve a Segmentación y comportamientos.
   • Desplázate hacia abajo hasta Dispositivos.
   • En Click outside form to close, desactiva el interruptor Mobile.
     

2. Asegúrate de que el icono de cierre de tu formulario (el botón X) sea lo suficientemente grande, incluso en una pantalla pequeña como la de un dispositivo móvil.
   • Haz clic en el icono de cierre 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 sea fácil de encontrar y hacer clic.
     Por ejemplo, el icono de cierre del formulario de la izquierda puede ser 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. Separa visualmente tu ventana emergente del resto de tu sitio usando un color de superposición, una sombra paralela o ambas cosas.
   • Navega a la pestaña Estilos.
   • En la sección Fondo del formulario, configura el Color de superposición para usar una superposición semitransparente que dirija la atención a tu formulario y atenúe el contenido de tu sitio mientras el formulario esté abierto.
   • Configura una Sombra paralela para añadir un sombreado sutil alrededor del 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 dispositivos móviles y no vaya de borde a borde.
   
   1. En la pestaña Estilos, desplázate hacia abajo hasta Estilos del formulario.
   2. Aumentar el margen izquierdo/derecho en función de cómo se vea en la vista previa.

Optimización de flyouts

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

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

1. Configura tu formulario para que se deslice desde la parte superior o inferior de la pantalla.
   • Ve a la sección Estilos.
   • Selecciona Posición del desplegable móvil y, a continuación, elige Acoplar abajo o Acoplar arriba.
     Cuando se selecciona esta opción, el formulario se mostrará como desplegable desde la parte superior o inferior de la pantalla y cubrirá una parte de la pantalla de borde a borde.
     

2. Separa visualmente tu formulario desplegable del resto de tu sitio con una superposición móvil, una sombra paralela o ambas cosas.
   • Navega a la pestaña Estilos.
   • Desplázate hasta la configuración de Form Background.
   • Activa Mobile Overlay para que los compradores en móvil no puedan hacer clic en ningún otro elemento de tu sitio hasta que rellenen o cierren el formulario. Ten en cuenta que Superposición móvil no aparecerá cuando el formulario desplegable se vea en un ordenador.
   • Activa Sombra paralela para añadir un sombreado sutil alrededor de tu formulario y separarlo del contenido que lo rodea. Ten en cuenta que la configuración de Sombra paralela afecta tanto a las versiones para móviles como para ordenadores de escritorio de tu formulario.
     

Próximos pasos

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

Recursos adicionales

• Introducción a los formularios de registro
• La configuración del cierre de formularios
• Conceptos básicos: diseñar formularios para dispositivos móviles
• Cómo usar formularios emergentes para recopilar el consentimiento para enviar SMS