Conceptos básicos: diseñar formularios para dispositivos móviles
Qué aprenderás
Aprende los 6 principios básicos del diseño de formularios de registro para dispositivos móviles.
¿Por qué es importante el diseño de formularios para dispositivos móviles?
Los compradores online cada vez usan más sus dispositivos móviles para descubrir nuevas tiendas, explorar productos y hacer compras. Solo en EE. UU., más del 35 % de las compras online se hicieron desde un dispositivo móvil, y esta cifra sigue creciendo cada año.
Para asegurarte de convertir a estos clientes en suscriptores, es fundamental que tus formularios de registro se vean igual de bien en dispositivos móviles que en ordenadores.
Los 6 conceptos básicos del diseño de formularios para móviles
- Mantén el formulario breve y al grano
- Estructura tu formulario para ajustarlo a las expectativas de los usuarios
- Ayuda a los usuarios a navegar por tu formulario
- Elige bloques de contenido que funcionen bien en dispositivos móviles
- Haz que tu formulario sea fácil de abrir, leer y completar en dispositivos móviles
- Ten en cuenta tus colores y su contraste
Mantén el formulario breve y al grano
Con los formularios para móviles, menos siempre es más. Aunque puede resultar tentador aprender todo lo que puedas sobre un suscriptor de una sola vez (su nombre, email, fecha de nacimiento, etc.), los formularios largos para móviles pueden dar lugar a una tasa de finalización más baja.
Limita todo lo posible el número de elementos o campos del formulario que alguien necesita completar.
- Número recomendado de campos: 1-3 por página
- Número recomendado de botones de llamada a la acción (CTA): 1-2 por página
¿Qué hago si necesito más de 3 campos?
Si necesitas más de 3 campos, por ejemplo, si quieres recopilar el consentimiento de email y SMS al mismo tiempo, considera usar un formulario de varios pasos.
Un formulario de varios pasos te permite recopilar más información sin abrumar a posibles suscriptores. Además, tener un paso independiente para SMS es una práctica recomendada de cumplimiento al recopilar varios tipos de consentimiento en 1 formulario.
Como alternativa, puedes aprender más sobre tus suscriptores reorientándolos más adelante en el recorrido del cliente. Quizá preguntes por el cumpleaños de tus suscriptores actuales mostrándoles otro formulario después de 30 días, o quizá lo preguntes como parte de tu serie de bienvenida.
Estructura tu formulario para ajustarlo a las expectativas de los usuarios
La gente espera que los formularios sigan una cierta lógica, y puede ser frustrante (o simplemente muy raro) si un formulario no lo hace.
A continuación encontrarás consejos para estructurar un formulario para móviles.
Solicita primero la información menos personal
Aunque todos los campos de un formulario sean obligatorios, sigue siendo extraño pedir la fecha de nacimiento de alguien antes que su nombre.
En general, solicita información de la menos personal a la más personal. Por ejemplo:
- Nombre
- Email o número de teléfono
- Cumpleaños
Usa una estructura de una sola columna en móvil
Un formato de una sola columna significa que todas las entradas, los campo y los botones siguen una sola línea en el formulario. Aunque los formatos de varias columnas se pueden usar en ordenadores, pueden hacer que los formularios móviles se vean desordenados o abarrotados. Los formularios de una sola columna también son más fáciles de escanear en el móvil.
Formulario de una sola columna | Formulario de varias columnas |
 |  |
Coloca los botones de llamada a la acción (CTA) en la parte inferior de un formulario
El botón de CTA debería estar al final del recorrido de escaneo del espectador, para que sea lo último que vea. No quieres que tengan que desplazarse hacia arriba para completar el formulario o que tengan que buscar el botón.
Normalmente, el botón de CTA se coloca en el centro o en el lado izquierdo.
Coloca el botón de cierre en la esquina superior derecha
El motivo por el que el botón de cierre debe estar en la esquina superior derecha es simplemente porque ahí es donde los usuarios esperan verlo.
Si lo colocas en otro lugar, como en la esquina superior izquierda o cerca de la parte inferior, tus usuarios pueden perder tiempo buscando una forma de cerrar el formulario y frustrarse mientras lo hacen. Esto podría hacer que se vayan con una impresión negativa de tu marca, lo que significa que es menos probable que visiten tu sitio en el futuro o se conviertan en clientes.
Ayuda a los usuarios a navegar por tu formulario
En el móvil, debes ser lo más claro posible sobre lo que alguien debe hacer, cómo debe hacerlo y lo que ya ha hecho.
Coloca etiquetas concisas encima (y cerca de) cada campo
Coloca una etiqueta directamente encima de cada campo del formulario que describa claramente qué información deben proporcionar.
Además, pon las etiquetas cerca de los campos que describen, para que quede claro que ambos están juntos.
Cada etiqueta debe ocupar menos de una sola línea al verla en cualquier dispositivo móvil, por lo que la concisión es clave.
Usa marcadores de posición dentro de cada campo de entrada de texto
En todos los campos en los que los usuarios deban introducir texto o números, incluye texto de marcador de posición para mostrar a tu audiencia cómo debería ser su entrada (p. ej., un email de ejemplo, un nombre, un formato de fecha, etc.).
Esto ayuda a reducir el número de errores que alguien podría cometer. Trabajar con etiquetas y marcadores de posición facilita a los usuarios navegar por tu formulario.
Usa una llamada a la acción (CTA) descriptiva para los botones
Consejo profesional: los botones también deben tener etiquetas. Ser más descriptivo en el texto del botón también ayuda al usuario.
Por ejemplo, en lugar de una simple llamada a la acción de «Enviar», decir «Suscríbete a la newsletter» o «Regístrate en SMS» da una idea más clara de lo que hace el botón. Además, esto puede ayudarte a ahorrar espacio valioso en un formulario más pequeño.
Indica qué campos son obligatorios y cuáles son opcionales
Indicar a tus clientes qué campos deben completar y cuáles no agiliza la experiencia del usuario. Puedes hacer que algunos elementos del formulario sean obligatorios y que otros sean opcionales,
Incluye un mensaje de éxito
Incluye un mensaje de éxito después de que alguien envíe el formulario para que el usuario sepa que se ha enviado correctamente.
Elige bloques de contenido que funcionen bien en dispositivos móviles
Algunos tipos de bloques de formulario son más compatibles con dispositivos móviles que otros. A continuación, enumeramos lo que debes usar en móvil y lo que no.
Bueno para usar en dispositivos móviles | No es bueno usarlo en el móvil |
Entradas de texto o numéricas (email, teléfono, fecha) | Varias casillas de verificación |
Botones de radio | Desplegables |
Botones de enviar mensaje rápido (para el consentimiento por SMS) |
Haz que tu formulario sea fácil de abrir, leer y completar en dispositivos móviles
En general, tu formulario debería ser fácil de usar en dispositivos móviles. Las personas no deberían tener que esforzarse para leer el texto o hacer clic en un botón específico. Si esto sucede, pueden frustrarse y podrían abandonar el formulario o tu sitio por completo.
Hay varias prácticas recomendadas al diseñar para móviles.
Haz que el tamaño de fuente sea de al menos 16 píxeles
Usar un tamaño de fuente de 16 o más píxeles ayuda a garantizar que el texto sea legible. De esta manera, los usuarios no necesitan ampliar para leer.
16 píxeles es el tamaño mínimo de fuente recomendado para cualquier texto de tu formulario para móviles, incluidos las etiquetas, los marcadores de posición y el texto del botón.
Añade al menos 8 píxeles de espacio entre campos, botones, etc.
Deja suficiente espacio entre acciones individuales en tu formulario para que a los usuarios no les cueste hacer clic en el campo que quieren. De lo contrario, pueden decidir irse en lugar de seguir intentándolo.
Mientras creas tu formulario, intenta que sea lo más difícil posible para los usuarios cometer un error. Prueba la experiencia del usuario en diferentes tipos de dispositivos.
Haz que las áreas táctiles tengan al menos 48 píxeles
Cualquier «área táctil», como campos de entrada o botones, debe ser grande y fácil de pulsar.
El dedo medio de un adulto mide 11 Mercado de medianas empresas, que son aproximadamente 41,6 píxeles. Para tener esto en cuenta, una práctica recomendada es crear objetivos táctiles de al menos 48 píxeles.
Usa un teaser de formulario
Usa un teaser de formulario para que los visitantes en móvil puedan abrir y cerrar el formulario como quieran mientras navegan, y para que el formulario no cubra el contenido de tu sitio.
Ten en cuenta que Google aplica una penalización a los sitios con intersticiales intrusivos. Los teaser ayudan a evitar esta penalización, pero también deberías usar un retraso prolongado con los formularios.
Ten en cuenta tus colores y su contraste
Siempre conviene que los colores del formulario coincidan con tu marca, para que refleje tu marca.
Sin embargo, es igual de importante que las combinaciones de colores sean accesibles para todos los usuarios. De lo contrario, corres el riesgo de alejar a posibles suscriptores o clientes.
Al elegir los colores, hay 2 consideraciones clave.
Elige colores de alto contraste
El contraste de color es la diferencia de luz entre el texto u objetos en primer plano y el fondo. Un buen contraste de color mejora la legibilidad de tu formulario y es un componente clave de la accesibilidad. Usa un comprobador de contraste de color para comprobar tu contraste de color.
El contraste más bajo es 1:1 y es imposible de leer (por ejemplo, texto blanco sobre fondo blanco). El contraste más alto disponible es 21:1, o texto negro sobre fondo blanco. En otras palabras, cuanto mayor sea la proporción, mejor será el contraste.
Según las Pautas de accesibilidad al contenido web (WCAG), el contraste de color mínimo es de 4,5:1 para texto pequeño, imágenes y texto en imágenes, y de 3:1 para texto grande o elementos importantes.
Idealmente, el contraste debería ser aún mayor. Según las WCAG, un mínimo mejor es:
- 7:1 para texto más pequeño, imágenes o imágenes de texto
- 4,5:1 para texto más grande, elementos visuales clave, etc.
Elige colores aptos para personas con daltonismo
Es importante que todo el mundo pueda apreciar el contenido en el que trabajas tanto. Usar determinadas combinaciones de colores puede hacer que el formulario sea difícil o incluso imposible de leer para algunos grupos.
Combinaciones aptas para daltónicos | |||
Azul y naranja |   | Azul y amarillo |  |
Azul y rojo |  | Naranja y amarillo | |
Azul y marrón |  | ||
En cuanto a cuáles no usar, ten en cuenta que hay muchos tipos de daltonismo (no se trata solo de rojo y verde).
Combinaciones de colores que debes evitar | |||
Verde y rojo |  | Azul y morado |  |
Rojo y naranja | | Azul y gris |  |
Verde y naranja | | Morado y rojo | |
Rojo y marrón | | Verde azulado y rosa |   |
Verde y marrón | | Azul verdoso y gris | |
Verde y azul | | Amarillo y rosa | |
Verde claro y amarillo |  | Rosa y gris | |
Verde y gris | | Gris y marrón | |
Verde y negro |  | Naranja y marrón | |
Rojo y negro | | ||
Recursos adicionales
- Introducción a los formularios de registro
Descubre cómo crear y personalizar formularios de registro en Klaviyo para publicarlos en tu sitio web y así poder interactuar con compradores, recopilar correos y teléfonos, y construir relaciones duraderas con los clientes.
- Cómo obtener el consentimiento para enviar SMS con un formulario de envío de mensaje rápido
Descubre cómo configurar un formulario de registro de tocar para enviar un mensaje de texto para recopilar números de teléfono de posibles clientes nuevos. Con la función de tocar para enviar un mensaje de texto, los visitantes del sitio pueden hacer clic en un botón de tu formulario de registro para abrir automáticamente su aplicación de mensajería de texto, donde Klaviyo ha añadido un mensaje. Solo tienen que enviar el mensaje para suscribirse.
- Cómo crear formularios de registro compatibles con la ADA
Descubre cómo usar la función del asistente de accesibilidad en la pestaña Alertas de formularios del editor de formularios de registro para evitar algunos de los problemas de cumplimiento de las pautas de accesibilidad del contenido web (WCAG) más comunes. Las empresas que se esfuerzan por hacer que sus sitios web sean compatibles con la ADA deben consultar y seguir las normas WCAG. El asistente de accesibilidad te guía para crear formularios de registro que sean accesibles para todos los visitantes de tu sitio.