Mejora la Usabilidad de Formularios para Móviles

Mejora la Usabilidad de Formularios para Móviles

Muchos desarrolladores siguen diseñando formularios en sus Webs sin adaptarlos para móviles. No sólo hay que crearlos con Responsive Design y adaptar el tamaño de los botones y las fuentes, también hay que utilizar los inputs apropiados.

 

IMPACTO EN LAS CONVERSIONES

A nadie le gusta rellenar formularios. Y cuanto más largo y complicado parezca a primera vista, menos probable será que lo complete el usuario… especialmente en pantallas pequeñas como las de los SmartPhones.

9 de cada 10 dentistas prefieren rellenar el formulario de la derecha

Compara los dos ejemplos anteriores: mientras que en la versión «mala» de la izquierda sólo hay dos campos adicionales, la diferencia principal entre estos dos formularios es la manera en la que piden la información. El primero hace uso de menús desplegables para casi todos los campos mientras que el segundo utiliza inputs más apropiados.

Interactuar con menús desplegables (tanto en Móviles como en Desktop) es un proceso de múltiples pasos que a menudo requiere más esfuerzo del necesario. Primero hay que hacer click en el control, luego hay que hacer scroll hacia abajo (a menudo más de una vez), luego encontrar y seleccionar la opción y, finalmente, seguir con el siguiente paso.

INPUTS DEL TIPO NUMBER MODIFICADOS (STEPPERS)

Este tipo de inputs permiten incrementar o disminuir un valor en una cantidad fija, generalmente unidades. En el siguiente ejemplo, para seleccionar el número de pasajeros viene mejor utilizar un input de tipo Stepper porque así nos evitamos utilizar un menú desplegable, que requiere más clicks para seleccionar la opción deseada. Habitualmente las compañías limitan el número de pasajeros a un máximo de 8 y la gran mayoría selecciona uno o dos pasajeros.

Recuerda que cuanto más simple sea el input, mejor. Modificar demasiado el diseño original de un input hace que el usuario pueda confundir su funcionalidad con otra.

INPUTS DEL TIPO RADIO

Los inputs del tipo radio permiten seleccionar entre opciones relacionadas entre ellas pero que a su vez son excluyentes entre si. En el ejemplo, utilizamos un grupo de inputs del tipo radio (con diseño personalizado) en vez de un menú desplegable para seleccionar entre clases de pasajeros.

CONTROLES ADICIONALES

Los inputs de tipo number y radio no son los únicos que pueden utilizarse para sustituir a los menús desplegables.

Los de tipo switch (que en realidad son inputs de tipo checkbox modificados) permiten elegir entre dos opciones opuestas (por ejemplo: SI o NO). Por otra parte, los inputs de tipo range permiten elegir entre un rango de valores.

Mostrar múltiples botones hacen accesibles a tan solo un click las opciones que de otra forma estarían escondidas en un menú desplegable.

En algunos casos, es posible condensar múltiples menús desplegables en un único input. Por ejemplo, para seleccionar una fecha podemos sustituir 3 menús desplegables (día, mes y año) por un único input del tipo date personalizado con un date-picker o selector de fecha.

COMO ÚLTIMA OPCIÓN…

Que existan alternativas con mejor usabilidad que los menús desplegables no significa que no debas utilizarlos nunca. Un formulario bien diseñado utiliza los inputs más apropiados para cada pregunta y hay casos en los que un menú desplegable es la mejor opción.

Pero puesto que navegar por ellos se hace algo tedioso, ocultan las opciones por defecto, no soportan jerarquías y no permiten editar la respuesta, los menús desplegables no deberían ser tu primera opción.

¿DÓNDE PUEDO APRENDER MÁS?

Desde que descubrí Bootstrap (un Framework de HTML, CSS y JavaScript para Front-End) lo incluyo en todos mis proyectos. Te recomiendo que le eches un vistazo porque funcionalidades para Responsive Design y formularios bastante interesantes.

Lo bueno de Bootstrap es que es tan popular que muchos desarrolladores han creado librerías y plantillas que añaden funcionalidades. Una que también utilizo siempre es Material Design for Bootstrap que viene genial para crear Webs adaptadas para móviles.

Manual de Web Performance

Una guía de 30 páginas sobre cómo optimizar el rendimiento de tu Web para mejorar su velocidad y usabilidad.

Descarga para usuarios registrados

Descarga PDF