Conceptos básicos: diseño de formularios para 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. 

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.

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: 

1. Nombre
2. correo electrónico o número de teléfono
3. cumpleaños

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

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. 

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.

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.

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. 

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. 

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, 

Incluye un mensaje de éxito después de que alguien envíe el formulario para que el usuario sepa que lo ha hecho correctamente. 

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. 

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. 

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 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. 

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. 

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. 

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).