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 el 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. En esta guía se cubrirán otras prácticas recomendadas que conviene tener en cuenta. Usa el selector de vista en la esquina superior derecha del creador de formularios para alternar entre las vistas de escritorio y móvil mientras creas el formulario. El ícono de escritorio mostrará cómo se ve el formulario para los compradores en computadoras de escritorio, mientras que el ícono de móvil muestra lo que ven los compradores en dispositivos móviles.

Esta guía cubrirá prácticas recomendadas para crear formularios emergentes y desplegables que aparecen en dispositivos móviles. Son útiles sin importar si el formulario se muestra en todos los dispositivos o solo en dispositivos móviles. Para una descripción más detallada sobre los formularios de registro específicamente en dispositivos móviles, ve a conceptos básicos: diseño de formularios para dispositivos 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 correo electrónico y SMS, recopila el correo electrónico en el primer paso y, luego, el SMS en el segundo paso. Usa Smart Opt-in para una experiencia de registro móvil más sencilla. Smart Opt-in requiere que SMS esté habilitado en la cuenta y un plan de SMS de pago; consulta la guía vinculada para conocer los requisitos de configuración.
• 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 permite que los compradores vuelvan a abrir un formulario que cerraron. Configura el adelanto como Mostrar después de cerrar el formulario o Mostrar antes de mostrar el formulario y después de cerrarlo.
• Si tu 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, mantén la imagen configurada como Escritorio en Editar estilos > Imagen lateral. Esto oculta la imagen lateral en dispositivos móviles y deja más espacio para el contenido del formulario.
  

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

• Abre Segmentación y comportamiento > Visualización. En Temporalización, configura Mostrar formulario como Según reglas, activa Después de un retraso e ingresa el retraso en segundos. Si habilitas otras reglas de temporalización, activa Solo mostrar si se cumplen todas las condiciones seleccionadas para que otra regla de temporalización no muestre el formulario antes de que haya pasado el retraso.
• Agrega un adelanto y configura la opción de visualización en Mostrar antes de mostrar el formulario y después de cerrarlo.

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 > Mostrar.
   • Desplázate hacia abajo hasta Haz clic fuera del formulario para cerrarlo.
   • Desmarca En dispositivos móviles para evitar que los toques fuera del pop-up lo cierren.
     

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.
   • Selecciona Editar estilos para abrir el panel Estilos.
   • En la sección Color de superposición, elige un color semitransparente para dirigir la atención al formulario y atenuar el contenido del sitio mientras el formulario está abierto.
   • Configura una sombra paralela para aplicar 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. Selecciona Editar estilos y luego desplázate hacia abajo hasta Margen.
   2. Aumenta los márgenes horizontales según cómo se vea el formulario en la vista previa para dispositivos móviles.

Optimizar flyouts

Cuando aparece un formulario desplegable, quienes visitan el sitio en 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.
   • Selecciona Editar estilos para abrir el panel Estilos.
   • Selecciona Posición del desplegable móvil y luego elige Anclar a la parte inferior o Anclar a la parte superior.
     En dispositivos móviles en orientación vertical, el formulario se desplegará desde la parte superior o inferior de la pantalla y cubrirá una parte de la pantalla de borde a borde. En orientación horizontal, se usa la posición desplegable normal.
     

2. Separa visualmente el formulario desplegable del resto de tu sitio con una superposición móvil, una sombra paralela o ambas opciones.
   • Selecciona Editar estilos para abrir el panel Estilos.
   • Desplázate hasta la configuración de Superposición en móvil y Sombra paralela.
   • Activa Superposición móvil para bloquear la interacción con el resto del sitio mientras el formulario desplegable permanece abierto. La superposición no aparece cuando se ve el formulario desplegable 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 las versiones para dispositivos móviles como para computadoras de escritorio del formulario.
     

Siguientes pasos

Cuando esté todo listo para publicar tus cambios:

1. Haz clic en Publicar o programar en el editor de formularios.
2. Resuelve cualquier alerta que esté bloqueando. Si aparecen opciones de programación, selecciona Publicar ahora. Haz clic en Publicar ahora para publicar tus cambios.

Revisa el formulario publicado en tu dispositivo móvil y asegúrate de cumplir con sus condiciones de segmentación y visualización.

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 recopilar el consentimiento para enviar SMS con un formulario de tocar para enviar mensaje