10 septiembre 2021

Los filtros son un elemento habitual cuando nos encontramos con un producto que tiene muchos datos que mostrar, como por ejemplo una página web de venta de electrodomésticos. En ese sitio web es muy probable que podamos filtrar por categoría, marca, color, dimensiones, precio u otras características más complejas, como el tipo de carga de una lavadora o su clase energética.

Pero tenemos que tener mucho cuidado a la hora de diseñar, ya que la combinación de la gran cantidad de datos y la complejidad de los filtros puede llevar a una mala experiencia de usuario.

El objetivo de los filtros es reducir un gran conjunto de opciones a una selección más manejable y relevante para el usuario. La clave está en encontrar las mejores opciones, consiguiendo que la información sea más relevante y se puedan visualizar las diferencias entre unas opciones y otras. 

Cuando los usuarios están filtrando las opciones lo que buscan es encontrar su rango cómodo, que es el número de opciones que cada usuario cree que puede administrar con relativa facilidad. También tenemos que tener en cuenta que dependiendo del tipo de producto que ofrezcamos, el rango cómodo será diferente. 

Por ejemplo, es muy probable que una misma persona sea capaz de navegar entre 30 tipos diferentes de vehículos, pero se abrume si tiene que explorar entre 15 tipos diferentes de bolígrafos azules. La regla general es que cuanto más diferentes entre sí sean las opciones, más fácil será navegar entre ellas.

Consejos de diseño de filtros

A la hora de diseñar los filtros de un producto, es muy importante tener en consideración todos aquellos aspectos que puedan perjudicar a la experiencia de usuarios. Estos son algunos de los puntos que tenemos que tener en cuenta:

Evitar los paneles desplazables

Si el filtro tiene demasiadas opciones y se presentan en un panel con desplazamiento vertical, puede resultar frustrante. Si además este panel se encuentra en el móvil también podemos provocar que los usuarios hagan clic donde no desean

Esto se puede solucionar añadiendo un cuadrado de búsqueda o una vista alfabética para facilitar la tarea de filtrado.

Añadir la opción de escribir con texto en los controles deslizantes

Cuando los usuarios tengan la opción de definir un rango de valores con un control deslizante, también debemos añadir la opción de escribir el rango concreto con texto. Esto es para evitar las posibles frustraciones que podemos generar en los usuarios si pretenden buscar un rango muy específico.

No congelar la interfaz de usuario cada vez que se hace una selección

Si un usuario está, por ejemplo, mirando lavadoras, lo normal es que quiera aplicar un filtro detrás de otro para asegurarse de que los resultados que está visualizando satisfacen sus necesidades. Sin embargo, si cada vez que realiza una selección se bloquea la interfaz de usuario, el proceso se convertirá en frustrante y tedioso. 

Una alternativa es agregar un botón “aplicar” para que los usuarios puedan seleccionar todos los filtros que deseen antes de ver los resultados.

Mostrar los resultados de forma asincrónica

Otra posible solución al problema anterior es dividir las partes de la interfaz de usuario, consiguiendo que al aplicar los filtros los resultados se actualicen de forma asincrónica. De esta forma podremos seleccionar todos los filtros que deseemos mientras la lista se va actualizando en segundo plano.

Mostrar número de resultados en el botón “aplicar”

Si nuestro objetivo es conseguir que los clientes creen su propio rango cómodo, podemos mostrar el número de resultados en el botón “aplicar” conforme se añaden los filtros.

Los filtros son un elemento que pueden hacer que la experiencia del usuario sea frustrante, por lo que tenemos que poner especial atención cuando los estemos diseñando. 

Conoce los conceptos clave de la UX con UX-PM Nivel 1: Adoptar UX.

Implanta herramientas y buenas prácticas UX en tus proyectos digitales, teniendo en cuenta las características únicas de cada proyecto.

Más información sobre convocatorias en UX Learn.


En Torresburriel Estudio desarrollamos las capacidades técnicas de tu equipo en temas de usabilidad, experiencia de usuario y diseño de producto a través de nuestros cursos online y presenciales.