Mejora la Usabilidad de Formularios para Móviles

Para mejorar la usabilidad de formularios en móviles, evita los menús desplegables y usa el input más apropiado para cada pregunta: steppers para cantidades pequeñas, inputs radio para opciones excluyentes, switches para sí/no, ranges para rangos numéricos y date-pickers para fechas. Los menús desplegables requieren múltiples clicks, ocultan las opciones y son tediosos en pantallas pequeñas.

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 para cada caso.

Impacto en las conversiones

A nadie le gusta rellenar formularios. 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.

El problema de los menús desplegables

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:

1. Hacer click en el control.
2. Hacer scroll hacia abajo (a menudo más de una vez).
3. Encontrar y seleccionar la opción.
4. Seguir con el siguiente paso del formulario.

Alternativas a los menús desplegables

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 sí. 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: switch, range, múltiples botones

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

Tipo de input	Cuándo usarlo
Stepper	Cantidades pequeñas con incrementos fijos (1-8 pasajeros)
Radio	Pocas opciones excluyentes entre sí (clase de billete)
Switch	Dos opciones opuestas (sí/no, activar/desactivar)
Range	Rango de valores numéricos (precio, edad)
Múltiples botones	Hacer accesibles las opciones a un solo click
Date-picker	Fechas, sustituyendo 3 desplegables (día/mes/año)

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

Mostrar múltiples botones hace 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.

Cuándo sí usar un menú desplegable

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 (por ejemplo, listas largas como países).

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

Preguntas frecuentes

¿Por qué los menús desplegables son malos en móvil?

Porque interactuar con ellos es un proceso de múltiples pasos: hacer click en el control, scroll para encontrar la opción, seleccionarla y volver al formulario. Encima ocultan las opciones por defecto, no soportan jerarquías y no permiten editar la respuesta sin reabrirlos.

¿Cuándo sí debería usar un menú desplegable?

Cuando la lista es muy larga (por ejemplo, países o monedas) y no caben razonablemente como botones o radios. Que existan alternativas mejores no significa que no debas usarlos nunca; sólo que no deberían ser tu primera opción.

¿Qué tipo de input uso para seleccionar entre dos opciones opuestas?

Un switch, que en realidad es un input checkbox modificado. Es ideal para SÍ/NO o activar/desactivar y se entiende a primera vista, mucho mejor que un dropdown con dos opciones.

¿Cómo simplifico la selección de fechas en un formulario móvil?

Usa un date-picker. Permite sustituir 3 menús desplegables (día, mes, año) por un único input que muestra un calendario interactivo. Reduce el número de interacciones drásticamente.

Conclusiones clave

• Los menús desplegables son tediosos en móvil: requieren al menos 3-4 interacciones por campo.
• Steppers son ideales para cantidades pequeñas (1-8 unidades).
• Inputs radio funcionan mejor que un dropdown cuando hay pocas opciones excluyentes.
• Switches sirven para opciones binarias (sí/no, on/off).
• Date-pickers sustituyen 3 desplegables (día/mes/año) por un único input.
• Cuanto más simple sea el input, menos confunde al usuario.