Conceptos básicos: diseño de formularios para móviles
Objetivos de aprendizaje
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 móviles?
Los compradores online utilizan cada vez más sus dispositivos móviles para descubrir nuevas tiendas, comerciar, examinar productos y realizar compras. Sólo en EE.UU., más del 35% de las compras en línea utilizaron un dispositivo móvil, y esta cifra sigue creciendo cada año.
Para asegurarte de que conviertes a estos clientes en suscriptores, es fundamental que tu formulario de registro se vea tan bien en el móvil como en el escritorio.
Los 6 fundamentos del diseño de formularios móviles
- Haz que el formulario sea breve y directo
- Estructura tu formulario para que responda a las expectativas del usuario
- Ayuda a los usuarios a navegar por tu formulario
- Elige bloques de contenido que funcionen bien en móvil
- Haz que tu formulario sea fácil de abrir, leer y rellenar en dispositivos móviles
- Considera tus colores y su contraste
Haz que el formulario sea breve y directo
Con los formularios móviles, menos siempre es más. Aunque puede ser tentador saber todo lo que puedas sobre un suscriptor de una sola vez (su nombre, correo electrónico, cumpleaños, etc.), los formularios móviles largos pueden dar lugar a una tasa de finalización más baja.
Limita al máximo el número de elementos o campos del formulario que alguien tiene que rellenar.
- Número recomendado de campos: 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 recoger el consentimiento por correo electrónico y SMS al mismo tiempo, considera la posibilidad de utilizar un formulario de varios pasos.
Un formulario de varios pasos te permite recabar más información sin abrumar al posible suscriptor. Además, tener un paso separado para los SMS es una buena práctica de cumplimiento cuando se recogen varios tipos de consentimiento en 1 formulario.
Alternativamente, puedes conocer mejor a tu suscriptor volviendo a dirigirte a él más adelante en el recorrido del cliente. Tal vez preguntes por el cumpleaños de tu suscriptor actual mostrándole otro formulario al cabo de 30 días, o tal vez lo preguntes como parte de tu serie de bienvenida.
Estructura tu formulario para que responda a las expectativas del usuario
La gente espera que los formularios sigan una lógica determinada, y puede ser frustrante (o simplemente extraño) que un formulario no lo haga.
A continuación encontrarás consejos para estructurar un formulario para móviles.
Pide primero la información menos personal
Aunque todos los campos de un formulario sean obligatorios, sigue siendo extraño preguntar la fecha de nacimiento de alguien antes que su nombre.
En general, pide la información de menos a más personal. Por ejemplo:
- Nombre
- correo electrónico o número de teléfono
- cumpleaños
Utiliza una estructura de una sola columna en móvil
Una sola columna significa que todo el campo, y los botones siguen una sola línea en el formulario. Aunque los formatos de varias columnas están bien para el escritorio, pueden hacer que los formularios móviles parezcan 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 columna | Formulario multicolumna |
 |  |
Coloca botones llamados a la acción (CTA) en la parte inferior de un formulario
El botón CTA debe estar al final del recorrido de exploración del espectador, para que sea lo último que vea. No quieres que tengan que desplazarse hacia arriba para completar el formulario, ni que tengan que buscar el botón.
Normalmente, el botón CTA se coloca en el centro o a la izquierda.
Pon el botón de cerrar en la esquina superior derecha
La razón por la que el botón de cerrar debe estar en la esquina superior derecha es sencillamente porque es ahí donde los usuarios esperan verlo.
Si lo colocas en otro lugar, como en la parte superior izquierda o cerca de la parte inferior, tus usuarios pueden pasar tiempo buscando la forma de cerrar el formulario, y frustrarse mientras buscan. Esto puede 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 que se conviertan en clientes.
Ayuda a los usuarios a navegar por tu formulario
Con el móvil, quieres ser lo más claro posible sobre lo que alguien tiene que 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 de tu 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 línea cuando se vea en cualquier dispositivo móvil, por lo que ser conciso es clave.
Utiliza marcadores de posición en cada campo de entrada de texto
En todos los campos en los que los usuarios tengan que introducir texto o números, incluye marcadores de posición para mostrar a tu audiencia cómo debe ser su entrada (por ejemplo, un ejemplo de correo electrónico, nombre, formato de fecha, etc.).
Esto ayuda a reducir el número de errores que alguien puede cometer. Trabajar con etiquetas y marcadores de posición facilita a los usuarios la navegación por tu formulario.
Utiliza un descriptivo llamado a la acción para los botones
Consejo de experto: 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 "Enviar" llamado a la acción, decir "Suscribirse al boletín" o "Registrarse en SMS" da una idea más clara de lo que hace el botón. Además, esto puede ayudarte a ahorrar un espacio precioso en la forma más pequeña.
Indica qué campos son obligatorios y cuáles opcionales
Decirle a tu cliente qué campos tiene que rellenar y cuáles no agiliza la experiencia del usuario. Puedes hacer que algunos 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 lo ha hecho correctamente.
Elige bloques de contenido que funcionen bien en móvil
Ciertos tipos de bloque de formulario son más aptos para móviles que otros. A continuación, enumeramos qué utilizar en el móvil y qué no.
Bueno para usar en el móvil | Malo para usar en el móvil |
Entradas de texto o números (correo electrónico, teléfono, fecha) | Casillas de verificación múltiples |
Botones de radio | Desplegables |
Botones Tap-to-text (para consentimiento para enviar SMS) |
Haz que tu formulario sea fácil de abrir, leer y rellenar en dispositivos móviles
En general, tu formulario debe ser fácil de usar en dispositivos móviles. La gente no debería tener que esforzarse para leer el texto o pulsar un botón concreto. Si esto ocurre, pueden sentirse frustrados y abandonar el formulario o tu sitio por completo.
Existen varias prácticas recomendadas a la hora de diseñar para móviles.
Haz que el tamaño de la fuente sea de al menos 16 píxeles
Utilizar un tamaño de fuente de 16 píxeles o más ayuda a garantizar la legibilidad del texto. De este modo, los usuarios no necesitan hacer zoom para leer.
16 píxeles es el tamaño de fuente mínimo recomendado para cualquier texto de tu formulario móvil, incluidas las etiquetas, los marcadores de posición y el texto de los botones.
Añade al menos 8 píxeles de espacio entre campos, botones, etc.
Deja suficiente espacio entre las acciones individuales de tu formulario para que los usuarios no tengan que esforzarse para hacer clic en el campo que desean. De lo contrario, pueden decidir abandonar en lugar de seguir intentándolo.
Cuando construyas tu formulario, intenta 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
Los "objetivos táctiles", como campos o botones, deben ser grandes y fáciles de pulsar.
El dedo medio de un adulto es de 11 mercado de mediana empresa (MM+), lo que equivale a unos 41,6 píxeles. Para tenerlo en cuenta, una buena práctica es hacer que los objetivos táctiles tengan al menos 48 píxeles.
Utiliza un formulario adelanto
Utiliza un formulario adelanto para que los visitantes móviles puedan abrir y cerrar el formulario como deseen mientras navegan, y para que el formulario no tape el contenido de tu sitio.
Ten en cuenta que Google penaliza los sitios con intersticiales intrusivos. adelanto ayudan a evitar esta penalización, pero también debes utilizar un tiempo de retardo largo con los formularios.
Considera tus colores y su contraste
Siempre querrás que los colores de tu formulario coincidan con los de tu marca, para que reflejen 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 un posible suscriptor o cliente.
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 o los objetos del primer plano y el fondo. Un buen contraste de color mejora la legibilidad de tu formulario, y es un componente clave de la accesibilidad. Utiliza un corrector de contraste de color para comprobar tu contraste de color.
El menor contraste es 1:1 y es imposible de leer (piensa en texto blanco sobre fondo blanco). El mayor contraste disponible es 21:1, o texto negro sobre fondo blanco. En otras palabras, cuanto mayor sea la relación, mejor será el contraste.
Según las Pautas de Accesibilidad al Contenido en la 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 elemento importante.
Lo ideal es que el contraste sea 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, elemento visual clave, etc.
Elige colores aptos para daltónicos
Es importante que todo el mundo pueda apreciar el contenido en el que trabajas tan duro. Utilizar 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 utilizar, ten en cuenta que hay muchos tipos de daltonismo (no es sólo el rojo y el 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 | | Azul verdoso 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
- Primeros pasos con los formularios de registro
Aprende a crear y personalizar formularios de registro en Klaviyo para publicarlos en tu sitio web y lograr interactuar con los compradores, recopilar correos electrónicos y números de teléfono, y establecer relaciones duraderas con tus clientes.
- Cómo recoger el consentimiento para enviar SMS con un formulario tap-to-text
Aprende a configurar un formulario de registro "tap-to-text" para recopilar números de teléfono de nuevos clientes potenciales. Con tap-to-text, 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. Sólo tienen que enviar el mensaje para suscribirse.
- Cómo crear un formulario de registro compatible con la ADA
Aprende a utilizar las funciones/características del asistente de accesibilidad en la pestaña Alertas de formulario del editor de formularios de registro para evitar algunos de los problemas más comunes de cumplimiento de las pautas de accesibilidad al contenido en la Web (WCAG). Las empresas que se esfuerzan por hacer que sus sitios web sean aptos para la ADA deben hacer referencia a las normas WCAG y seguirlas. El asistente de accesibilidad te guía en la creación de formularios de registro accesibles para todos los visitantes de tu sitio web.