10 recomendaciones para mejorar la usabilidad en los formularios para móviles

Cuando desarrollamos una página web para dispositivos móviles, debemos tener en cuenta que los formularios requieren una mayor adaptación respecto a la versión de escritorio. Esto se debe, principalmente a la dificultad que tiene  el proceso de la entrada de datos. Como sabe y experimenta cualquier usuario todos los días, escribir textos en los teclados virtuales de los smartphones es una tarea tediosa, así que conviene que intentemos facilitarlo al máximo. En este artículo, damos una serie de consejos que mejorarán la experiencia de nuestros usuarios cuando acceden a un formulario desde un dispositivo móvil.

  • Minimiza la entrada de texto. Cuanto menos sea necesario escribir, mejor. Presentar alternativas como cajas de selección, botones de radio, sliders, etc. son cosas a tener muy en cuenta.
  • Minimiza el número de campos. A no ser que sea totalmente imprescindible, cuanto menor sea el número de campos del formulario, menos pereza tendrá el usuario a la hora de rellenarlo.
  • Utiliza los campos input del HTML5. Los campos INPUT en HTML5 nos facilitan y mejoran la interfaz de entrada de datos, dependiendo del tipo de campo y de los caracteres que tengan que introducirse. Por ejemplo, permiten cambiar la disposición del teclado virtual y que muestre unas teclas u otras por defecto.
  • Alinea etiquetas arriba. Debido al espacio reducido en las pantallas móviles, deberíamos incluir el texto explicativo a cada campo en la parte de arriba, en lugar de ponerlo en el lateral.
  • Elimina contenido accesorio. Deberíamos de eliminar elementos como tips o pop-ups, que si bien no molestan en la versión escritorio, pueden resultar un estorbo en la de móviles.
  •  Evita formularios multicolumna. Por el espacio reducido que nos lleva a alinear las etiquetas, deberíamos organizar nuestros formularios en una única columna. Además, facilita al usuario  el orden en el que la información debe escribirse.
  • Recuerda datos introducidos anteriormente. De manera predeterminada, los formularios HTML no implementan la funcionalidad de recordar datos la segunda vez que rellenamos determinados campos, pero si utilizas algún lenguaje de programación como Javascript, en el lado del cliente, o PHP en el lado del servidor, podrás hacer que tu sitio web sea lo suficientemente inteligente como para no solicitar datos que ya se conocen de antemano.
  • Obtén automáticamente algunos datos. Debemos hacer uso de tecnologías como HTML5 para obtener de forma automática información del usuario. Por ejemplo, utilizando la geolocalización, evitaremos que el usuario tenga que escribir datos como su país, ciudad, etc.
  • Usa los campos INPUT con autocompletar. En ocasiones, es más cómodo utilizar un INPUT con autocompletar que un SELECT. Como  ejemplo, te ponemos la selección de los pueblos de una provincia, en el que tecleando las primeras letras accederás antes a lo que quieres, que buscándolo en una interminable lista.
  • Permite ver las contraseñas.  Por defecto, siempre recomendamos ocultar la clave escrita, pero sabiendo que los errores tipográficos son frecuentes con los teclados virtuales, añadir elementos que nos permitan ver la clave que estamos escribiendo puede ser de gran ayuda para el usuario.

Existen muchos más consejos útiles para la creación de formularios, especialmente si tenemos en cuanta las especificaciones de cada proyecto, pero este decálogo es una buena base para conseguir diseños simples y agradables para el usuario.

Share on FacebookTweet about this on TwitterShare on LinkedIn