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.