Conceptos básicos: diseño de formularios móviles
Qué aprenderás
Conozca los 6 principios básicos del diseño de formularios de inscripción para dispositivos móviles.
¿Por qué es importante el diseño de formularios móviles?
Los compradores en línea utilizan cada vez más sus dispositivos móviles para descubrir nuevas tiendas, examinar productos y realizar compras. Sólo en Estados Unidos, más del 35% de las compras en línea se realizaron a través de un dispositivo móvil, y esta cifra sigue creciendo cada año.
Para asegurarse de que convierte a estos clientes en suscriptores, es fundamental que sus formularios de inscripción se vean tan bien en el móvil como en el escritorio.
Los 6 aspectos básicos del diseño de formularios móviles
- Mantenga el formulario breve y directo
- Estructure su formulario para que responda a las expectativas del usuario
- Ayude a los usuarios a navegar por su formulario
- Elija bloques de contenido que funcionen bien en móviles
- Haga que su formulario sea fácil de abrir, leer y rellenar en dispositivos móviles
- Considere sus colores y su contraste
Mantenga el formulario breve y directo
Con los formularios móviles, menos siempre es más. Aunque puede resultar tentador conocer todo lo que pueda sobre un suscriptor de una sola vez (su nombre, correo electrónico, fecha de nacimiento, etc.), los formularios móviles largos pueden dar lugar a una tasa de finalización más baja.
Limite al máximo el número de elementos o campos del formulario que alguien tiene que rellenar.
- Número recomendado de campos de entrada: 1-3 por página
- Número recomendado de botones de llamada a la acción: 1-2 por página
¿Qué hago si necesito más de 3 campos?
Si necesita más de 3 campos, como por ejemplo si desea recoger el consentimiento por correo electrónico y SMS al mismo tiempo, considere la posibilidad de utilizar un formulario de varios pasos.
Un formulario de varios pasos le permite recopilar más información sin abrumar a los suscriptores potenciales. 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, puede aprender más sobre sus suscriptores reorientándolos más adelante en el recorrido del cliente. Quizá pregunte por el cumpleaños de sus suscriptores actuales mostrándoles otro formulario al cabo de 30 días, o quizá lo haga como parte de su serie de bienvenida.
Estructure su formulario para que responda a las expectativas del usuario
La gente espera que los formularios sigan una lógica determinada, y puede resultar frustrante (o simplemente extraño) que un formulario no lo haga.
A continuación encontrará consejos para estructurar un formulario para móviles.
Pida 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, pida la información de menos a más personal. Por ejemplo:
- Nombre
- Correo electrónico o número de teléfono
- Cumpleaños
Utilice una estructura de una sola columna en móvil
Una columna única significa que todas las entradas, campos y botones siguen una única línea en el formulario. Aunque los formatos de varias columnas están bien para su uso en ordenadores de sobremesa, pueden hacer que los formularios para 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 |
 |  |
Coloque botones de llamada 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 quiere 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.
Coloque el botón de cierre en la esquina superior derecha
La razón por la que el botón de cierre debe estar en la esquina superior derecha es simplemente porque es ahí donde los usuarios esperan verlo.
Si lo coloca en otro lugar, como en la parte superior izquierda o cerca de la parte inferior, sus usuarios pueden pasar tiempo buscando la forma de cerrar el formulario y frustrarse mientras buscan. Esto podría hacer que se fueran con una impresión negativa de su marca, lo que significa que es menos probable que visiten su sitio en el futuro o que se conviertan en clientes.
Ayude a los usuarios a navegar por su formulario
Con el móvil, quiere ser lo más claro posible sobre lo que alguien tiene que hacer, cómo debe hacerlo y lo que ya ha hecho.
Coloque etiquetas concisas encima (y cerca) de cada campo
Coloque una etiqueta directamente encima de cada campo de su formulario que describa claramente qué información deben proporcionar.
Además, coloque 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 visualiza en cualquier dispositivo móvil, por lo que ser conciso es clave.
Utilice marcadores de posición dentro de cada campo de entrada de texto
En todos los campos en los que los usuarios tengan que introducir texto o números, incluya marcadores de posición para mostrar a su público 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. El trabajo conjunto con etiquetas y marcadores de posición facilita a los usuarios la navegación por su formulario.
Utilice una llamada a la acción descriptiva para los botones
Pro-tip: 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 "Enviar", decir "Suscribirse al boletín" o "Inscribirse para recibir SMS" da una idea más clara de lo que hace el botón. Además, esto puede ayudarle a ahorrar un espacio precioso en la forma más pequeña.
Indique qué campos son obligatorios y cuáles opcionales
Decir a sus clientes qué campos tienen que rellenar y cuáles no agiliza la experiencia del usuario. Puede hacer que ciertos elementos del formulario sean obligatorios y otros opcionales,
Incluir un mensaje de éxito
Incluya un mensaje de éxito después de que alguien envíe el formulario para que el usuario sepa que ha tenido éxito.
Elija bloques de contenido que funcionen bien en móviles
Ciertos tipos de bloques de formularios son más aptos para móviles que otros. A continuación le indicamos qué debe 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) | Multi casillas de verificación |
Botones de radio | Desplegables |
Botones Tap-to-text (para el consentimiento de SMS) |
Haga que su formulario sea fácil de abrir, leer y rellenar en dispositivos móviles
En general, su formulario debe ser fácil de utilizar 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 podrían abandonar el formulario o su sitio por completo.
Existen varias prácticas recomendadas a la hora de diseñar para móviles.
Haga 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 mínimo de fuente recomendado para cualquier texto de su formulario móvil, incluidas las etiquetas, los marcadores de posición y el texto de los botones.
Añada al menos 8 píxeles de espacio entre campos, botones, etc.
Deje suficiente espacio entre las acciones individuales de su formulario para que los usuarios no tengan dificultades para hacer clic en el campo que desean. De lo contrario, puede que decidan abandonar en lugar de seguir intentándolo.
A medida que construya su formulario, intente que sea lo más difícil posible para los usuarios cometer un error. Pruebe la experiencia del usuario en distintos tipos de dispositivos.
Haga que los objetivos táctiles tengan al menos 48 píxeles
Cualquier "objetivo táctil", como campos de entrada o botones, debe ser grande y fácil de pulsar.
El dedo medio de un adulto mide 11 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.
Utilice un formulario teaser
Utilice un teaser de formulario 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 su sitio.
Tenga en cuenta que Google penaliza los sitios con intersticiales intrusivos. Los teasers ayudan a evitar esta penalización, pero también debe utilizar un tiempo de retardo largo con los formularios.
Considere sus colores y su contraste
Siempre querrá que los colores de sus formularios coincidan con los de su marca, para que reflejen su marca.
Sin embargo, es igual de importante que las combinaciones de colores sean accesibles para todos los usuarios. De lo contrario, corre el riesgo de alejar a posibles suscriptores o clientes.
A la hora de elegir sus colores, hay 2 consideraciones clave.
Elija colores de alto contraste
El contraste de color es la diferencia de luz entre el texto o los objetos en primer plano y el fondo. Un buen contraste de colores mejora la legibilidad de su formulario y es un componente clave de la accesibilidad. Utilice un corrector de contraste de color para comprobar su contraste de color.
El contraste más pequeño es de 1:1 y es imposible de leer (piense en texto blanco sobre fondo blanco). El mayor contraste disponible es de 21:1, es decir, 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 en la Web (WCAG), el contraste mínimo de color 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.
Lo ideal sería que el contraste fuera 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 textos más grandes, elementos visuales clave, etc.
Elija colores aptos para daltónicos
Es importante que todo el mundo pueda apreciar el contenido en el que usted trabaja tan duro. El uso de determinadas combinaciones de colores puede dificultar o incluso imposibilitar la lectura del formulario 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, tenga en cuenta que hay muchos tipos de daltonismo (no es sólo el rojo y el verde).
Combinaciones de colores que debe 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
- 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 recoger el consentimiento por SMS con un formulario tap-to-text
Aprenda 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 su formulario de inscripción para abrir automáticamente su aplicación de mensajería de texto en la que Klaviyo ha añadido un mensaje. Sólo tienen que enviar el mensaje para suscribirse.
- Cómo crear formularios de inscripción adaptados a la ADA
Aprenda a utilizar la función de asistente de accesibilidad de la pestaña Alertas de formulario del editor de formularios de inscripción 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 y seguir las normas WCAG. El asistente de accesibilidad le guiará en la creación de formularios de inscripción accesibles para todos los visitantes de su sitio web.