Conceptos básicos: 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. 

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.

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: 

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

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

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. 

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.

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.

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. 

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. 

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, 

Incluya un mensaje de éxito después de que alguien envíe el formulario para que el usuario sepa que ha tenido éxito. 

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. 

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. 

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

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. 

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. 

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