Conceptos básicos: diseño de formularios para dispositivos móviles
Objetivos del artículo
Conoce los 6 principios básicos para diseñar formularios de registro para dispositivos móviles.
¿Por qué es importante el diseño de formularios para dispositivos móviles?
Los compradores en línea usan cada vez 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 en línea se realizaron desde un dispositivo móvil, y este número 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 computadoras de escritorio.
Los 6 conceptos básicos del diseño de formularios para móviles
- Mantén el formulario breve y al punto
- Estructura el formulario para que coincida con las expectativas del usuario
- Ayuda a los usuarios a navegar por el 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
- Toma en cuenta los colores y el contraste
Mantén el formulario breve y al punto
Con los formularios para dispositivos móviles, menos siempre es más. Aunque pueda ser tentador aprender todo lo posible sobre un suscriptor de una sola vez (su nombre, correo electrónico, cumpleaños, etc.), los formularios móviles largos pueden generar una tasa de finalización más baja.
Limita lo más posible la cantidad de elementos o campos del formulario que alguien necesita completar.
- Número recomendado de campos de entrada: 1-3 por página
- Número recomendado de botones de llamado a la acción: 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 por correo electrónico 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 los suscriptores potenciales. Además, tener un paso separado para SMS es una mejor práctica de cumplimiento al recopilar varios tipos de consentimiento en 1 formulario.
Como alternativa, puedes conocer más sobre tus suscriptores volviendo a segmentarlos más adelante en el recorrido del cliente. Quizá preguntes por el cumpleaños de tus suscriptores actuales mostrando otro formulario después de 30 días, o quizá lo preguntes como parte de tu serie de bienvenida.
Estructura el formulario para que coincida con las expectativas del usuario
La gente espera que los formularios sigan 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 dispositivos móviles.
Pide primero la información menos personal
Aunque todos los campos de un formulario sean obligatorios, sigue siendo extraño pedirle el cumpleaños a alguien antes de su nombre.
En general, solicita información de la menos a la más personal. Por ejemplo:
- Nombre
- Correo electrónico o número de teléfono
- cumpleaños
Usa una estructura de una sola columna en dispositivos móviles
Un diseño de una sola columna significa que todas las entradas, los campos y los botones siguen una sola línea en el formulario. Si bien los formatos de varias columnas están bien para usarlos en computadoras de escritorio, pueden hacer que los formularios móviles se vean desordenados o saturados. Los formularios de una sola columna también son más fáciles de revisar en dispositivos móviles.
Formulario de una sola columna | Formulario de varias columnas |
 |  |
Coloca los botones de llamado a la acción (CTA) en la parte inferior de un formulario
El botón de CTA debe estar al final del recorrido de escaneo del espectador, para que sea lo último que vea. No quieres que tenga que desplazarse hacia arriba para completar el formulario, ni que tenga que buscar el botón.
Por lo general, el botón de llamado a la acción se coloca en el centro o del lado izquierdo.
Coloca el botón de cierre en la esquina superior derecha
La razón por la que el botón de cerrar 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, es posible que los usuarios dediquen tiempo a buscar una forma de cerrar el formulario y se frustren mientras buscan. Esto podría hacer que se vayan con una impresión negativa de la marca, lo que significa que es menos probable que visiten el sitio en el futuro o se conviertan en clientes.
Ayuda a los usuarios a navegar por el formulario
En dispositivos móviles, lo mejor es 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 arriba de cada campo en el formulario que describa claramente qué información deben proporcionar.
Además, coloca las etiquetas cerca de los campos que describen, para que quede claro que ambos están relacionados.
Cada etiqueta debe ocupar menos de una sola línea cuando se vea en cualquier dispositivo móvil, así que ser conciso es clave.
Usar marcadores de posición dentro de cada campo de entrada de texto
En cada campo donde los usuarios necesiten ingresar texto o números, incluye marcadores de posición para mostrarle a tu audiencia cómo debe verse su entrada (p. ej., un correo electrónico de ejemplo, nombre, formato de fecha, etc.).
Esto ayuda a reducir la cantidad de errores que alguien podría cometer. Cuando se usan juntos, las etiquetas y los marcadores de posición facilitan que los usuarios naveguen por el formulario.
Usa un llamado a la acción descriptivo para los botones
Tip 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 un simple llamado a la acción de "Enviar", decir "Suscribirse al boletín" o "Registrarse para SMS" da una idea más clara de lo que hace el botón. Además, esto puede ayudarte a ahorrar un espacio valioso en el formulario más pequeño.
Indica qué campos son obligatorios y cuáles son opcionales
Indicarle a tus clientes qué campos deben completar y cuáles no hace que la experiencia del usuario sea más fluida. Puedes hacer que ciertos elementos del formulario sean obligatorios y otros opcionales.
Incluir 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 envió 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 qué usar en dispositivos móviles y qué no.
Bueno para usar en dispositivos móviles | Malo para usar en dispositivos móviles |
Entradas de texto o números (correo electrónico, teléfono, fecha) | Casillas de verificación múltiples |
Botones de radio | Menús desplegables |
Botones de tocar para enviar texto (para consentimiento de SMS) |
Haz que tu formulario sea fácil de abrir, leer y completar en dispositivos móviles
Por lo general, el formulario debe 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, podrían frustrarse y abandonar el formulario o el sitio por completo.
Hay varias prácticas recomendadas al diseñar para dispositivos móviles.
Establece el tamaño de fuente en al menos 16 píxeles
Usar un tamaño de fuente de 16 píxeles o más ayuda a garantizar que el texto sea legible. De esta manera, los usuarios no tienen que hacer zoom para leer.
16 píxeles es el tamaño mínimo de fuente recomendado para cualquier texto en el formulario móvil, incluidos las etiquetas, los marcadores de posición y el texto del botón.
Agrega al menos 8 píxeles de espacio entre campos, botones, etc.
Deja suficiente espacio entre acciones individuales del formulario para que a los usuarios no les cueste hacer clic en el campo que desean. De lo contrario, podrían decidir irse en lugar de seguir intentándolo.
Mientras creas el formulario, trata de hacer que sea lo más difícil posible que los usuarios cometan un error. Prueba la experiencia del usuario en distintos tipos de dispositivos.
Haz que los objetivos táctiles tengan al menos 48 píxeles
Cualquier "zona de toque", como campos de entrada o botones, debe ser grande y fácil de hacer clic.
El dedo promedio de una persona adulta mide 11 mercado de mediana empresa (MM+), lo que equivale a aproximadamente 41.6 píxeles. Para tener esto en cuenta, una práctica recomendada es que los objetivos táctiles tengan al menos 48 píxeles.
Usa un adelanto de formulario
Usa un adelanto del formulario para que los visitantes móviles puedan abrir y cerrar el formulario como quieran mientras navegan, y para que el formulario no cubra el contenido del sitio.
Ten en cuenta que Google penaliza a los sitios con intersticiales intrusivos. Los adelantos ayudan a evitar esta penalización, pero también deberías usar un retraso prolongado con los formularios.
Toma en cuenta los colores y el contraste
Siempre conviene que los colores del formulario coincidan con la marca, para que la reflejen.
Sin embargo, es igual de importante que las combinaciones de colores sean accesibles para todos los usuarios. De lo contrario, te arriesgas a alejar a posibles suscriptores o clientes.
Al elegir tus 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 del formulario y es un componente clave de la accesibilidad. Usa un verificador de contraste de color para revisar el contraste de color.
El contraste más bajo es 1:1 y es imposible de leer (piensa en 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 WCAG, un mínimo mejor es:
- 7:1 para texto 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 daltónicos
Es importante que todos puedan apreciar el contenido en el que trabajas tan duro. El uso de ciertas combinaciones de colores puede hacer que el formulario sea difícil o incluso imposible de leer para algunos grupos.
Combinaciones aptas para personas con daltonismo | |||
Azul y naranja |   | Azul y amarillo |  |
Azul y rojo |  | Naranja y amarillo | |
Azul y café |  | ||
En cuanto a cuáles no usar, ten en cuenta que hay muchos tipos de daltonismo (no solo rojo y verde).
Combinaciones de colores que se deben evitar | |||
Verde y rojo |  | Azul y morado |  |
Rojo y naranja | | Azul y gris |  |
Verde y naranja | | Morado y rojo | |
Rojo y café | | Verde azulado y rosa |   |
Verde y café | | Verde azulado y gris | |
Verde y azul | | Amarillo y rosa | |
Verde claro y amarillo |  | Rosa y gris | |
Verde y gris | | Gris y café | |
Verde y negro |  | Naranja y café | |
Rojo y negro | | ||
Recursos adicionales
- Getting started with sign-up forms
Learn how to create and customize sign-up forms in Klaviyo to publish on your website so you can engage shoppers, collect emails and phone numbers, and build long-lasting customer relationships.
- How to collect SMS consent with a tap-to-text form
Learn how to set up a tap-to-text sign-up form to collect phone numbers from new prospects. With tap-to-text, site visitors can click a button in your sign-up form to automatically open their text messaging app where Klaviyo has added a message. They only need to send the message to subscribe.
- How to create ADA-friendly sign-up forms
Learn how to use the accessibility assistant feature in the Form Alerts tab of the sign-up forms editor to avoid some of the most common web content accessibility guidelines (WCAG) compliance issues. Companies striving to make their websites ADA-friendly should reference and follow WCAG standards. The accessibility assistant guides you in creating sign-up forms that are accessible for all of your site visitors.