Sistemas de filtros y UX

En el mundo actual en el que vivimos, los sistemas de filtros es una función obligatoria en toda buena interfaz de contenidos que se precie. 

Pongámonos en una situación hipotética en la vida real para poder comprender su importancia. Imagina que entras en unos grandes almacenes para comprar una camisa. Pero este espacio no está ordenado, clasificado, ni existen carteles indicando la sección de productos en la que te encuentras. Una tarea aparentemente fácil sería un suplicio, teniendo que vagar indefinidamente buscando el artículo que necesitas. 

Ahora, imagina que te encuentras en otro gran almacén, donde sus productos sí se encuentran ordenados y disponen de carteles, pero debido a su gran tamaño, te pierdes fácilmente. Los trabajadores a los que poder preguntar sobre el paradero de una sección serían nuestros filtros, ese pequeño empujoncito al usuario que nos ayuda a encontrar lo que queremos rápidamente. 

El sistema de filtros digitales parece ser usado expresamente para interfaces propias de e-commerces, pero hemos de ser conscientes de que estas herramientas son usadas en la mayoría de interfaces que implican una base de contenido extendida, siendo altamente eficaces en herramientas de datos o dashboard.

Para que unos filtros funcionen correctamente, la información a tener en cuenta debe de estar correctamente clasificada, nombrada y colocada en su respectiva sección, pero como diseñadores de experiencias de usuario, hemos de tener consideraciones especiales a la hora de crear o implementar un correcto sistema de filtros en nuestras interfaces.  

Posicionamiento

Nuestro sistema de filtros debe de ser colocado teniendo en cuenta el contexto en el que se encuentra; pensemos que el usuario espera que, en una sección donde se está desplegando un espacio con información dentro, ya sea una tabla, unas cards de producto, o gráficas de información, este debe de ser acompañado con un sistema de filtrado visible y colocado antes del contenido. Analizando el espacio clásico de las páginas web, tenemos 3 opciones:

• Filtro global. Cuando se cuenta con un “sidecar” o menú lateral como recurso de navegación, la colocación de filtros ahí permite una mayor escalabilidad en espacio, la anidación de valores y el contenido a filtrar. Sin embargo, si se emplea esta opción, hemos de asegurarnos que el sistema afecte a contenidos que alberga toda la página, si no podemos confundir a los usuarios.
• Filtros específicos. Los filtros específicos o inline conviven en la interfaz con los espacios de los datos: por ejemplo, dentro de un panel de métricas, cada uno de ellos con variables de datos diferentes – no pueden ser filtrados todos de forma global. Incorporando esta opción, permite la personalización de filtrado de un bloque en concreto, con un desplegable de opciones para este dato. Sin embargo, un inconveniente a tener en cuenta es que se ve limitado por el espacio de cada uno de los datos.
• Barra de filtrado. Quizás la opción más popular y balanceada en cuanto a contexto y escalabilidad, puesto a que permite el filtrado global o de una única variable, y que se dota de una buena visibilidad. Su único inconveniente es que al no seguir el scroll del usuario, pueda verse limitado en escalabilidad. 

Acción

En los sistemas de filtros, debemos de tener en cuenta también el aspecto del accionamiento al filtrado, y destacamos distintas opciones:

• Filtrado automático. Una vez seleccionada una variable, el sistema de filtrado se accionará automáticamente, mostrando los resultados coincidentes. Si bien, implica menos acciones tomadas por el usuario, se ve limitado en ocasiones donde se requieren más filtros específicos en juego. 
• Filtrado manual. Este implica al usuario a introducir los filtros deseados, uno a uno. Este es un sistema ideal si se requiere de un filtrado complejo de varias variables, pues el usuario puede buscar desplazarse en el contenido, y elegir sin distracciones de la actualización automática y continua, antes de dirigirse al accionable que ejecute el filtrado, ya sea un botón o un icono. Las dos vertientes de este sistema dependen de su complejidad: el filtrado manual que permita la selección de un solo filtro a la vez, o el que permite el filtrado grupal, que implica distintas variables, y que tiene una búsqueda más concisa y eficaz; este último perfecto para bancos de datos grandes. 

Resultados

A la hora de comunicar resultados al usuario, debemos de tener en cuenta 3 cuestiones vitales sobre la información del sistema de los filtros aplicados:

• Mantén aquellos filtros activos visibles en su contexto original.
• Indicar siempre qué filtros tienen una selección anidada en su interior. 
• En caso de ser posible, siempre indicar agrupado el grupo de filtros que están aplicados. 

Otro elemento clave a la hora de comunicar comentarios es mostrar el número de resultados, saber el número concreto de valores compatibles proporciona a los usuarios comentarios sobre la eficacia de sus aportaciones para reducir la lista de resultados y ahorrar tiempo, moldeando y mejorando los términos de búsqueda globales (algo que en términos de feedback).

Ahora bien, imaginemos que no existen coincidencias con los filtros seleccionados. Idealmente, no es recomendable indicar que no se han encontrado resultados; esto puede incentivar al usuario a “tirar la toalla” en su búsqueda. La decisión correcta desde diseño es señalar durante el proceso de filtrado un cálculo de los resultados coincidentes antes de lanzarlos a pantalla, y en caso de no encontrar, bloquear el flujo de filtrado; esto motivará al usuario a cambiar los factores de filtrado hasta hallar los resultados deseados.

Para terminar, lanzamos unas recomendaciones sobre uso y tipología de filtrados que pueden optimizar la experiencia de usuario:

El uso de dropdowns o desplegables en filtros reduce la carga visual de tu página; piensa que los filtros tienen el propósito de ordenar y mejorar la visibilidad de datos, por lo que un diseño ordenado y limpio a través del uso de dropdowns con visualización limitada promueve una consistencia con su propósito.

Mantener una cantidad de filtros definida, reducida y concisa. No es necesario una  serie interminable de filtros, puesto que es un indicativo que la información no está correctamente categorizada y clasificada. 

Es conveniente añadir un refuerzo visual para alertar al usuario de qué filtro está activado y cuál no para evitar confusiones. Además, la posibilidad de limpiar rápidamente los filtros que se han utilizado mejora enormemente la usabilidad de nuestra funcionalidad. 

Concluyendo, los sistemas de filtros, además de ser una característica técnica de las interfaces, también son un facilitador esencial para mejorar la experiencia de las personas usuarias. Al optimizar estos sistemas, conseguimos que la información sea más accesible, y empoderamos a los usuarios a tomar decisiones informadas rápidamente.

Foto de portada de Tyler Nix en Unsplash.