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

Objetivos del artículo

Aprende a diseñar el formulario de registro para móviles teniendo en cuenta las mejores prácticas de Klaviyo, para garantizar que el formulario emergente y el formulario desplegable estén optimizados para visitantes en dispositivos móviles.

Las personas que compran en línea 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 asegurarse de que el sitio web se vea tan bien en dispositivos móviles como en computadoras de escritorio, y eso incluye el formulario de registro.

Antes de empezar

En Klaviyo, puedes crear formularios que se muestran en todos los dispositivos (lo que significa que son visibles en computadoras de escritorio y dispositivos móviles) o puedes crear formularios solo para móviles que solo se muestran 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 apariencia 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 escritorio y móvil mientras creas tu formulario. El ícono de escritorio mostrará cómo se ve el formulario para los compradores en escritorio, mientras que el ícono de dispositivo móvil muestra lo que ven los compradores en dispositivo móvil.

En esta guía se cubrirán las mejores prácticas para crear formularios emergentes y desplegables que aparecen en dispositivos móviles. Son útiles independientemente de si el formulario se muestra en todos los dispositivos o solo en móviles. Para obtener una descripción más detallada sobre los formulario de registro específicamente en dispositivos móviles, ve a conceptos básicos: diseño de formularios móviles.

Mejores prácticas generales para formularios

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

• Manténlo breve y conciso: considera un formulario de varios pasos si tienes muchos campos.
  • Si el formulario recopila el consentimiento para SMS, recopila el correo electrónico en el primer paso y luego 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 fácil.
• Asegúrate de que sea fácil de cerrar para que los visitantes no se frustren y abandonen el sitio.
  • Usar un adelanto del formulario les da a los compradores la posibilidad de cerrar y volver a abrir el formulario según lo deseen.
• Si el formulario está configurado para mostrarse en todos los dispositivos (lo que significa que los compradores en computadoras de escritorio y dispositivos móviles lo verán) e incluye una imagen lateral, deja que la imagen lateral se muestre solo en Móvil.
  

• Usa etiquetas concisas para cada uno de los campos de entrada (p. ej., 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 estás solicitando.

SEO y formularios móviles

Es importante considerar las mejores prácticas de SEO para dispositivos móviles, en especial al crear formularios en la página de inicio u otras páginas de destino. Los formularios que aparecen en páginas de destino comunes de búsqueda orgánica no deben cubrir el contenido de tu sitio ni interrumpir la experiencia de quien visita; de lo contrario, la página podría ser penalizada por los algoritmos de búsqueda. Obtén más información sobre los intersticiales intrusivos y el SEO.

Para evitar esto:

• En la pestaña Segmentación y comportamientos, configura la programación del formulario en Según reglas y luego establece un retraso mayor (p. ej., cuando un visitante está saliendo de la página).
• Agrega un adelanto que se muestre antes de mostrar el formulario.

Optimización de ventanas emergentes

Un formulario emergente aparece en el centro de la pantalla de un comprador y, a menudo, cubre gran parte de la página, lo que dificulta que pueda interactuar con otros elementos de la página mientras el formulario está abierto. Esto hace que los formularios emergentes sean más disruptivos, pero también con una mayor conversión.

Para optimizar el funcionamiento de los popups en dispositivos móviles:

1. Desactiva el cierre del formulario cuando un comprador desde un dispositivo móvil haga clic fuera del área del formulario para reducir los cierres accidentales del formulario.
   • Ve a Segmentación y comportamiento.
   • Desplázate hacia abajo hasta Dispositivos.
   • En Hacer clic fuera del formulario para cerrarlo, desactiva el interruptor Móvil.
     

2. Asegúrate de que el ícono de cierre del 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 ícono 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 ícono de cierre en el formulario de la izquierda puede ser difícil de presionar en un dispositivo móvil. Sin embargo, el ícono de cierre en el formulario de la derecha es más grande y fácil de encontrar.
     

3. Separa visualmente la ventana emergente del resto del sitio, con un color de superposición, una sombra paralela o ambos.
   • Navega hasta la pestaña Estilos.
   • En la sección Fondo del formulario, configura Color de superposición para usar una superposición semitransparente que dirija la atención al formulario y atenúe el contenido del sitio mientras el formulario está abierto.
   • Configura una Sombra paralela para proporcionar un sombreado sutil alrededor del formulario y separarlo del contenido circundante.
4. Ajusta los márgenes del formulario para que se vea más como 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. Aumenta el margen izquierdo/derecho según cómo se vea en la vista previa.

Optimizar flyouts

Cuando aparece un formulario desplegable, las visitas desde dispositivos móviles aún pueden interactuar con el 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 el formulario desplegable para un dispositivo móvil:

1. Configura el 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 luego elige Anclar abajo o Anclar arriba.
     Cuando se selecciona esta configuración, el formulario se desplegará 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 desplegable del resto de tu sitio con una superposición móvil, una sombra paralela o ambas opciones.
   • Navega hasta la pestaña Estilos.
   • Desplázate hasta la configuración de Fondo del formulario.
   • Activa Mobile Overlay para que los compradores en dispositivos móviles no puedan hacer clic en ningún otro elemento del sitio hasta que completen o cierren el formulario. Ten en cuenta que Superposición móvil no aparecerá cuando el formulario desplegable se vea en una computadora de escritorio.
   • Activa Sombra paralela para agregar un sombreado sutil alrededor del formulario y separarlo del contenido circundante. Ten en cuenta que la configuración de Sombra paralela afecta tanto a las versiones móvil como de escritorio del formulario.
     

Siguientes 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 comprender mejor las preferencias de los visitantes de tu sitio.

Recursos adicionales

• Primeros pasos con los formularios de registro
• Comprender la configuración para descartar formularios
• Conceptos básicos: diseño de formularios para dispositivos móviles
• Cómo usar formularios emergentes para recopilar el consentimiento para enviar SMS