Usabilidad: Tag HTML SELECT

Desde hace un tiempo comencé a ver como lentamente empiezan a desaparecer el tag html SELECT que tan de moda estuvieron en cierta época y que ahora por varias razones, muy validas, comienzan a desaparecen lentamente hasta el punto de solo utilizarse en casos en que solamente se podría decir que son pura y exclusivamente necesarios.

El primer sitio que viene a mi cabeza cuando hablo de reemplazar los select por otras opciones es Mercado Libre, por ejemplo, donde antes había un select list para seleccionar como se ordenan los resultados, ahora aparecen los enlaces directamente para realizar esta misma tarea.

mercado libre

Y en este ejemplo ya podemos sacar algunas conclusiones de las ventajas que tiene en algunos casos no usar listas para mostrarle al usuario opciones. La principal que noto es que nos permite de un solo vistazo ver toda las opciones disponibles, si bien cualquier persona sabe como usar un listbox la acción requerida por el usuario es mas compleja que la de solo presionar un enlace. Se ahorran milésimas de segundo, pero no por poco no significa que sea una mejora con respecto a su versión anterior.

Y a la vez en el mismo Mercado Libre nos dan una pista de cuando si utilizar este componente, si hacemos una búsqueda por ejemplo de vehículos, en esta situación si nos mostrara una lista, la razón es que las opciones para filtrar la información son más, por lo tanto y por cuestiones de espacio si se utiliza el select:

busqueda autos

Por lo tanto y en el mismo sitio vemos dos situaciones distintas, en donde el sitio evalúa cuando desplegar un SELECT y cuando no. Algo que esta muy bien considerando que la decisión para efectuar esta practica esta mas que estudiada.

Las posibilidades son muchas, otra opción interesante es combinar los listbox con otra forma de representar la misma información, una razón para hacer esto y como muchos saben, los buscadores no siguen los enlaces que están presentes en los listbox, y como buen ejemplo de este hibrido me gustaría comentar como lo hace Top Rural:

hibrido

Aquí podemos ver como la misma información se puede acceder de dos formas, por un lado utilizando dos SELECT para ubicar la región y por otro lado simplemente presionando en el enlace generado en el mapa.

Como podrán ver existen muchas posibilidades para representar una selección, lo interesante, creo yo de ver estos ejemplos, es analizar cual de todas es la mejor para mejorar la experiencia de nuestros usuarios. Yo viendo los ejemplos llego a estas conclusiones:

  • Usar una lista cuando las opciones a desplegar son muchas y desplegarlas en otro formato solo llevaría a la confusión.
  • Cuando tenemos la posibilidad de agrupar/filtrar estas opciones en un orden lógico. Y esto es importante, si existe algo molesto con los SELECT con muchas opciones es tener que buscar opción por opción que es lo que queremos, por ejemplo si tenemos una selección por país es importante que tenga un orden alfabético, en cambio si la selección es por rango de precios, fecha, es bueno lo que hace mercado libre de ordenar por subconjuntos.
  • Cuando las opciones son pocas utilizar enlaces es buena idea, si se trata de filtros podemos utilizar el atributo nofollow para evitar duplicar el contenido.
  • Cuando hablamos de datos que el usuario conoce fácilmente una representación alternativa como puede ser un mapa puede ser una buena idea para agilizar la acción del usuario.

Categorizado en: