Alternativas desplegables para mejores formas (móviles)

El uso de menús desplegables en los formularios puede parecer obvio: no ocupan mucho espacio en la interfaz de usuario, validan automáticamente la entrada, todos los navegadores y plataformas los admiten, son fáciles y baratos de implementar, y los usuarios los conocen lo suficientemente bien.

Al mismo tiempo, sin embargo, los menús desplegables (o selectos) son uno de los patrones de forma mal utilizados con mayor frecuencia y "deberían ser la interfaz de usuario de último recurso", según Luke Wroblewski y muchos otros.

Veamos algunas de las limitaciones y preocupaciones:

  • En un menú desplegable, las opciones disponibles no estarán visibles hasta que haga clic o toque para abrirlo. Además, la longitud de la lista está oculta a primera vista, es decir, los usuarios no pueden predecir si un menú desplegable contendría 2 o 50 elementos.
  • Seleccionar una opción de una lista desplegable (especialmente en dispositivos móviles) es un proceso de varios pasos: debe tocar el menú desplegable para abrir la lista de opciones, luego desplazarse y escanear los elementos para seleccionar uno, y luego cerrar el menú desplegable.
  • Los menús desplegables pueden hacer que los diseñadores sean flojos: es muy fácil agregar todas las opciones posibles a una lista desplegable sin ninguna prioridad (por cierto, lo que lo hace realmente similar al menú de hamburguesas).
  • Los menús desplegables más largos, como un selector de país, pueden ser una pesadilla para explorar, especialmente en dispositivos móviles donde la búsqueda por teclado generalmente no está disponible.
  • Desplazarse por las opciones puede ser doloroso en algunas pantallas móviles donde el área visible y desplazable de la lista es pequeña:
En iOS, la cantidad de opciones visibles puede ser sorprendentemente baja a primera vista

La buena noticia es que hay muchos controles de entrada alternativos que funcionarán mejor para usted en muchos casos.

Considere la cantidad de opciones

Para decisiones binarias (activar / desactivar), el menú desplegable es una muy mala elección. Lo que necesita es una casilla de verificación o un interruptor de palanca.

Si su menú desplegable solo contiene las opciones Sí / No o Activar / Desactivar, utilice un interruptor más simple

Para un pequeño número de opciones mutuamente excluyentes, se recomiendan botones de radio o controles segmentados para que todas las opciones disponibles sean visibles a la vez, sin tener que abrir la lista.

Los controles segmentados muestran las opciones seleccionadas y alternativas a la vezEl número de opciones visibles depende del ancho de la pantalla y la longitud de las etiquetas de las opciones, pero no se recomienda tener más de 5 elementos.

Para una gran cantidad de opciones bien especificadas, cuando los usuarios sepan exactamente lo que están buscando, considere una solución de "comenzar a escribir ..." donde la lista de opciones filtradas se muestra después de la primera o dos letras.

En lugar de desplazarse por la lista, permita que los usuarios comiencen a escribir y solo muestren las opciones filtradas

Para listas grandes y diversas, intente utilizar los datos de usuario existentes para priorizar las opciones y solo enumere las primeras opciones más populares para el usuario. De esta manera, existe la posibilidad de que el 90% de los usuarios encuentren su preferencia al instante y solo el 10% tenga que seleccionar Otro y luego especificarlo en la siguiente pregunta.

Aunque

Considere la entrada esperada

Una de las ventajas de una lista desplegable es que los usuarios no tienen que escribir mucho. Sin embargo, si la entrada esperada no es demasiado larga y se solicita con frecuencia (como datos personales), generalmente es más fácil escribirla en lugar de seleccionarla de una lista:

Ingresar un año de nacimiento en un dispositivo móvil es más fácil con un teclado numérico que desplazándose por una larga lista

En general, ingresar un valor numérico en un dispositivo móvil suele ser más eficiente con un teclado numérico.

Aunque el orden de clasificación de un menú desplegable numérico es claro, aún podría ser más fácil escribir que desplazarse

Si es importante validar la entrada del usuario, el enfoque "comenzar a escribir ..." podría ser útil cuando el campo de entrada se usa para filtrar las opciones disponibles.

Al enumerar los estados de los EE. UU., Al escribir solo una letra se filtra bien la lista

La capacidad de buscar en la lista de opciones es especialmente útil cuando el orden de clasificación de los elementos no está claro.

El orden de clasificación de las monedas puede no ser claro para los usuarios, así que asegúrese de que también puedan buscar por nombre y código de moneda.

Se debe aplicar la misma técnica para la buena lista de países antiguos: en lugar de enumerar más de 200 elementos, permita a los usuarios comenzar a escribir y filtrar los resultados lo antes posible.

Para valores discretos que representan la cantidad (como el número de pasajeros o el número de artículos en un carrito de compras), un paso a paso permite a los usuarios aumentar o disminuir rápidamente el número con un solo clic o toque.

Para valores no discretos o valores ubicados en una escala, considere usar un control deslizante.

Mostrar el valor mínimo y máximo de la escala puede ayudar a comprender el contexto

Elegir una fecha con múltiples menús seleccionados puede ser una experiencia realmente dolorosa, así que para ingresar fechas cercanas, siempre use un selector de fechas. (¡Pero nunca lo use para ingresar fechas de nacimiento!)

Considere diseñar menús desplegables más inteligentes

No hace falta decir que los menús desplegables no siempre deben evitarse. Encontrará casos en los que un menú de selección es el control de entrada más apropiado y eso está bien, solo trate de hacerlo lo más amigable posible.

  • Use una etiqueta significativa: la etiqueta o descripción del menú debe ser clara y estar disponible incluso cuando la lista esté abierta. Dentro del menú de selección, use una etiqueta descriptiva que les diga a los usuarios lo que están seleccionando (es decir, "Seleccionar tipo" en lugar de "Por favor seleccione").
  • Ordene los elementos de manera sensata: según los datos del usuario, intente colocar las opciones más populares en la parte superior de la lista. O, incluso, preseleccione el más popular por defecto.
  • Utilice valores predeterminados inteligentes: los teléfonos y los navegadores conocen la ubicación del usuario, la fecha y toneladas de otra información. Use esos datos para preseleccionar la opción más probable para cada usuario.
  • Disminuya el número de campos y deje que la computadora haga el trabajo: si un usuario ingresa un código postal, la computadora ya podría conocer la ciudad y el estado, sin necesidad de preguntar. Si un usuario ingresa un número de tarjeta de crédito, la computadora ya podría saber que es una MasterCard, sin necesidad de preguntar.
  • Considere usar API: registrarse con un botón de Facebook Connect es más fácil que completar un formulario de registro. Pagar con Paypal es más fácil que tener que escribir los datos de su tarjeta de crédito.

Si desea obtener más información sobre el diseño de menús desplegables, consulte la brillante SXSW Keynote de Golden Krishna y Eric Campbell:

Si disfrutaste esta historia, mira también las alternativas del menú de hamburguesas. O mis consejos de Instant UX. Los comentarios son bienvenidos en Twitter, y me complace conectarme en LinkedIn. Las opiniones y opiniones son totalmente mías.