Los dispositivos móviles cada vez cumplen más funciones. Ya no sólo nos sirven para realizar llamadas y enviar mensajes de texto, sino que también nos sirven para escuchar música, organizar nuestras actividades diarias, jugar y navegar por internet. Debido a la gran importancia que están adquiriendo los dispositivos móviles en nuestra vida diaria, el diseño web ha sufrido grandes cambios y ha tenido que adaptarse a las nuevas necesidades de los usuarios.
Un elemento que casi siempre se encuentra en un sitio web son los formularios. Ya sea en la página de contacto o en la opción para suscribirse a un boletín semanal, estos formularios web ayudan a recolectar la información necesaria y hacen el proceso sencillo. Como es obvio, estas opciones también deben estar disponibles para los usuarios que navegan usando su dispositivo móvil, pero hay que tener en cuenta una serie de consideraciones, empezando por el tamaño de la pantalla. En este artículo te decimos cómo optimizar tu formulario web para dispositivos móviles.
Incluye sólo los campos absolutamente necesarios
En internet, los usuarios están acostumbrados a la rapidez, no sólo en el tiempo de respuesta de sus páginas. Esta demanda de los usuarios también se aplica a los formularios web. Ya sea que desean suscribirse a un boletín, enviar un mensaje o realizar una compra, los usuarios esperan que el proceso sea sencillo y rápido. Por esta razón, debes asegurarte que los formularios que incluyas sólo contengan los campos que sean absolutamente necesarios.
Simplificar tus formularios e incluir sólo la información necesaria es conveniente tanto para los usuarios que navegan por internet desde sus ordenadores como los que lo hacen desde algún dispositivo móvil.
Usa formularios verticales
Los dispositivos móviles tienen una pantalla más pequeña que los ordenadores. Es importante tener en cuenta este detalle al momento de diseñar formularios. Una práctica bien aceptada es hacer que el formulario esté alineado verticalmente en vez de horizontalmente. Esto ayuda a que se adapte de manera natural al formato de los smartphone.
Esta práctica evita que los usuarios tengan que mover la pantalla para ver los campos. De esta manera, al ingresar pueden ver todos los campos que deben ser rellenados y siguen a la vista mientras completan la información. También, es menos probable que dejen un campo vacío por error, ya que ven todo el formulario saben que información ha sido completada y cuál es la que falta.
Haz uso de menús desplegables
En los dispositivos móviles, los usuarios deben desplazarse para poder ver una página completa. Si tu formulario tiene más de cuatro campos (como podría ser el caso de una tienda online, por ejemplo), entonces es probable que el usuario tenga que desplazarse para poder ver todo el formulario. En ciertos casos, esta situación puede evitarse al incluir menús desplegables.
Los menús desplegables son súper útiles pues reducen el tiempo que el usuario pasa rellenando un formulario y les facilita la tarea pues ya no tienen que ingresar la información manualmente.
Considera la opción de autocompletado
No sólo los menús desplegables son una opción viable cuando hablamos de optimización de formularios. También puedes incluir la opción de autocompletado, de modo que mientras el usuario va ingresando la información, va cerrando las posibles alternativas. Incluir esta característica es de mucha ayuda cuando el campo admite muchas opciones, aunque no indeterminadas. Es decir, existe un número fijo de opciones posibles. Por ejemplo, podría ser útil en los campos donde se agrega el país, pero no en el campo de los nombres pues el número de opciones es mucho mayor.
Combina los campos de tu formulario
Los campos para un formulario se suelen separar en un dato por campo. Por ejemplo, nombre, apellido, dirección de correo electrónico, lugar de residencia, etc. En líneas generales, esto tiene mucho sentido pues permite que el usuario se enfoque en un solo dato por campo y evita confusiones. Sin embargo, en los dispositivos móviles, debido al tamaño de la pantalla, esta disposición de los campos no es la ideal.
En este punto es necesario considerar la posibilidad de unir ciertos campos, como por ejemplo el campo de “nombre” y “apellido” podrían fusionarse y simplemente llamarse “nombre completo” o “nombre y apellido” para evitar confusiones. Recuerda que también puedes colocar indicaciones en los formularios para guiar al usuario, de esta manera aseguras que completen la información correcta en el primer intento.
No te olvides del botón
Sin importar que tipo de formulario estés creando, al final del proceso hay un botón. Dependiendo de tu formulario este mensaje puede variar, pero es importante que este botón resalte sobre el resto de tu página. El color que elijas para este botón también tiene mucho que ver con el resto del diseño de la página. Si dentro de tu paleta de colores has considerado un color de acento, entonces es probable que ya tengas este detalle resuelto. Sin embargo, si no es así, piensa cuidadosamente qué color podrías elegir. Es importante también realizar pruebas de color.
Al realizar pruebas con el botón ten en cuenta que no sólo es un elemento que debe resaltar, sino que colocarás un texto encima de este botón. Por esta razón, elegir un color demasiado saturado no es una elección apropiada.
Informa al usuario sobre el proceso
En el caso de los formularios es importante informar al usuario. En muchos sitios se emplean señales de alerta cada vez que no se ha completado un dato, marcan el campo e incluso algunos sitios te dirigen inmediatamente al campo que hace falta ser rellenado. En los dispositivos móviles también sucede lo mismo, se debe hallar la forma de informar al usuario sobre el progreso.
Gran parte de la información que se entrega al usuario se hace por medio de elementos interactivos como por ejemplo, colocar un visto bueno en los campos que han sido rellenado o incluir un mensaje informando sobre el éxito del proceso (es decir, que el proceso ha sido completado en su totalidad).
Otra forma de informar al usuario es incorporar una barra de progreso, de esa manera el usuario sabe en qué parte del proceso se encuentra. Por supuesto, esta opción es ideal en procesos que suelen ser más largos y detallados, como el de las compras online, por ejemplo.
Toma en cuenta la velocidad
Un punto que nunca debes olvidar en diseño web es la velocidad y el tiempo de carga. Especialmente en dispositivos móviles pues los usuarios esperan una misma experiencia de usuario que en ordenadores. Y uno de los grandes factores que impacta en la experiencia de usuario es la velocidad de carga de tu sitio.
Realiza pruebas y verifica que la velocidad de carga en el proceso de compra o suscripción sea la adecuada y se mantenga dentro de los límites.
