Saltar al contenido

Sobre Filtros y Filtrado II

En la parte I expusimos las bases sobre las que se apoya un buen sistema de filtrado. Abordamos en esta nota un conjunto de ideas complementarias sobre cómo crear filtros.

Filtros en un dispositivo móvil

Sumado a los 4 principios fundamentales expuestos en la primera parte de esta nota hay un conjunto de consideraciones relevantes a la hora de concebir y diseñar un buen sistema de filtrado.

Móvil

Lo que en el escritorio es complicado, en el móvil lo es el triple, porque no hay espacio para mostrar a la vez los ítems a filtrar y los filtros. Algunas recomendaciones al respecto:

  • Cuando los filtros se activan, utilizar toda la pantalla o al menos toda la que sea necesaria. Mantener una franja de los ítems que están debajo solo empobrece la interacción sin sumar información relevante.
  • Cuando hay filtros aplicados, mostrarlos aunque sea utilizando un espacio mínimo. Si son muchos, mostrar dos o tres y sugerir visualmente que hay más.
  • Cuidar el doble el tiempo de respuesta, dado que los filtros muchas veces disparan consultas que pueden demorar, tener en cuenta que en el móvil todo siempre es más lento. Considerar especialmente para el móvil si actualizar a cada click o junto al final con un botón tipo “filtrar”.

Ordenar

Buscar y filtrar pueden ser concebidos como formas específicas de ordenar, con una diferencia sutil pero relevante: mientras que en la búsqueda y en el filtro el modelo mental es “está en el resultado” o “no está en el resultado”, ordenar se asocia con una prioridad en la lista para cada elemento.

En la práctica Google, el omnipresente buscador de nuestro planeta, es en realidad un ordenador: devuelve los primero resultados (hasta un máximo de 40.000) que coinciden con la clave, ordenados por la probabilidad de ser útiles.

Tenemos que tener presente siempre que el orden es más útil que el filtrado de tipo incluido/excluido y considerar para todos los casos una forma lo más útil posible de ordenar los ítems que fueron incluidos.

Inclusive si definimos que no hay un orden porque no tenemos forma de aportar valor al ordenar, deberíamos garantizar que el mismo filtro arroje siempre el mismo orden.

Interactivo o botón

Al implementar un sistema de filtrado siempre surge la disyuntiva entre la opción de aplicar cada filtro al seleccionarlo o agregar un botón “filtrar” o similar y aplicarlos todos juntos.

Parece obvio que si el sistema responde de forma instantánea la primera opción es mejor, porque al final es idéntica a la primera con un click menos y permite ver en tiempo real la evolución. Pero los sistemas no responden de forma instantánea, de hecho muchas veces no responden de forma siquiera satisfactoria.

Por lo tanto, si la respuesta a la aplicación de un filtro está por debajo de los 2 segundos, siempre por debajo de los 2 segundos, no hay problema en aplicarlos interactivamente. No son 2 segundos en el notebook de última generación conectado por fibra óptica al servidor, sino 2 segundos entregados de forma consistente a prácticamente la totalidad de los escenarios de uso.

Si el tiempo de respuesta está por encima de 2 segundos, hay que pensar bien, porque una demora atrás de la otra produce una calidad de interacción pésima y lo que iba a ser mejor se transforma en algo mucho peor.

Selección múltiple

Muchos sistemas de filtros cometen el error de asumir que el usuario sabe exáctamente lo que busca: un sedan 4 puertas de 2018 con entre 50.000 y 60.000 km con un precio entre 9.500 y 10.000 dólares. Para un usuario que sabe exactamente lo que busca un sistema de filtros con opciones exactas es lo mejor.

Pero a los usuarios les da lo mismo si es sedan o hatch. Muchas veces tienen disyuntivas como un sedan más nuevo o un SUV más completo pero algo más viejo y consideraciones en las que buscan comparar y valorar alternativas distintas. ¿Cambiamos el auto o nos vamos de viaje?

Los buenos sistemas de filtros deben permitir la búsqueda exploratoria y uno de los atributos principales para ello es permitir selección múltiple: más de una variante para cada opción.

Resultados Vacíos

Es razonable asumir que un sistema de filtrado produce resultados vacíos. Pero si el universo de información sobre el que se filtra es pequeño, la probabilidad de arrojar resultados vacíos es muy alta.

La mejor solución a este problema va en linea con la Heurística 5, prevenir el error haciendo que al seleccionar una opción se deshabiliten dinámicamente las que no van a arrojar resultados. Y mucho mejor si explican visualmente por qué están deshabilitadas.

Pero deshabilitar las opciones dinámicamente no siempre es posible: no se puede por ejemplo si se filtra con un botón “filtrar”. En estos casos es importante buscar alternativas que reemplacen la pantalla vacía. Por ejemplo, debajo del mensaje de que no se encontraron filtros, mostrar resultados de la misma consulta con un filtro menos o mostrar sugerencias de combinaciones de filtrado similares que sí producen resultados. En general, tratar la pantalla de resultados vacíos como un momento en el que defraudamos al usuario y esforzarse por hacer algo que lo compense.

Algunos ejemplos de filtros en sitos de automotores

Car One

Car One Desktop
En el escritorio, CarOne no utiliza los filtros para mostrar información
Car One Movil
El móvil de CarOne es clásico
Car One Movil filtros
Con los filtros desplegados desaprovecha la oportunidad de brindar información a pesar de que deja parte de la pantalla sin utilizar.

OLX

OLX desktop
Los filtros en el escritorio proveen información y están correctamente ordenados.
Olx movil
En el móvil los filtros más usados están desplegados siempre
OLX movil filtros
Al desplegar todos los filtros nos encontramos con un verdadero navegador de filtros.

Mercadolibre

Mercadolibre Desktop
Los filtros de Mercadolibre brindan información y está bien ordenados en el escritorio. Tienen un problema de contraste que les hace perder legibilidad.
Mercadolibre movil
El móvil es clásico, con un botón de filtros.
Mercadolibre movil filtros
Los filtros desplegados en el móvil no están jerarquizados y no muestran información relevante antes de interactuar con ellos.

Laikado

Laikado desktop
Los filtros en el escritorio brindan información pero están ordenados. Un campo para buscar dinámicamente al digitar sería mejor que activar la búsqueda con un botón. Las cantidades tienen un problema de contraste.
Laikado movil
El móvil es clásico con un botón de filtros.
Laikado movil filtros
Los filtros desplegados no están jerarquizados ni muestran información relevante antes de interactuar.

Gallito.com

Gallito desktop
Los filtros de Gallito.com en el escritorio brindan información y está bien ordenados. Los números entre paréntesis tienen bajo contraste
Gallito movil
El móvil es clásico, con botón de filtros
Gallito movil filtros
Al desplegar los filtros en móvil, mantiene el orden y la información del escritorio. Sería mejor aún si utilizara toda la pantalla.

El País (Colombia)

El Pais desktop
Los filtros en el escritorio desaprovechan todas las oportunidades de crear una interacción de calidad.
El Pais movil
El móvil es clásico, pero el botón está erróneamente etiquetado como “Buscar anuncios”
El Pais movil filtros
Al desplegar los filtros en móvil se repiten todos los errores del escritorio

Leer la primera parte: Sobre Filtros y Filtrado I

Leer el artículo relacionado: Menús vs. Filtros

____

¡Nuevo!

Curso de accesibilidad: Herramientas de evaluación WCAG 2.1

Un curso que te permitirá comprender qué es la Accesibilidad, conocer las WCAG 2.1, publicadas por la W3C que son el estándar internacional de accesibilidad y conocer herramientas para aplicarlas y evaluarlas.

Próximo comienzo: 27 de Octubre

Solicitar InformaciónInscripciones

Deja una respuesta

Tu dirección de correo electrónico no será publicada.