Diseño de filtros y clasificación para una mejor experiencia de usuario

Filtro de barra lateral. estructura alámbrica de la interfaz de usuario

Cuando trabajaba en una empresa en un proyecto SAAS, me enfrenté a un desafío que nunca pensé que pudiera ser tan complicado. Había una página de Historial de ventas, lista de envíos, lista de clientes, informes y estadísticas… Todas las listas tenían filtrado y clasificación especiales con diferentes condiciones como fechas, estados, categorías, etc. Comencé a buscar mejores prácticas y probé su usabilidad. Entonces, decidí compartir algunos de mis hallazgos.

¿Por qué necesitamos filtrar y ordenar?

El filtrado ayuda a reducir una lista grande de elementos según criterios específicos. Por ejemplo, en un sitio web de comercio electrónico, un usuario puede querer filtrar artículos por tamaño, color, precio o marca para que le resulte más fácil encontrar lo que busca. Sin filtrado, el usuario tendría que buscar manualmente en toda la lista, lo que llevaría mucho tiempo y sería frustrante.

En este articulo Hablaré de la versión de escritorio. No móvil. De hecho, el móvil es otro tema. Escribiré sobre el filtro para aplicaciones móviles más adelante en otro artículo. (Mantente seguido en medium o linkedin)

Si eres diseñador UX probablemente hayas pensado en estos:

¿Dónde colocar los componentes del filtro, la barra superior o la barra lateral? ¿Qué debería pasar si se selecciona alguno de los elementos del filtro? ¿Cómo sabrá el usuario qué filtros están seleccionados? ¿Dónde colocar los botones como “Aplicar”, “borrar” o “restablecer filtro”? ¿Cómo diseñar un filtro complejo con muchos criterios?

Conceptos básicos para entender

Hay algunos conceptos comunes que hay que entender para todo tipo de filtros.

1. Si no hay nada marcado, significa que se mostrará todo. Algunos sitios web (por ejemplo, algunos sitios de reservas de aerolíneas) muestran todos los filtros marcados de forma predeterminada.

Filtrar casillas de verificación Nada seleccionado = Todo seleccionado

2. En la mayoría de los casos, la categoría NO debe ser de selección múltiple mediante casilla de verificación.
Por ej. Los juguetes y los alimentos son artículos totalmente diferentes. No tiene sentido mostrarlo en la misma lista. Más bien, conviértalo en enlaces de menú.

La categoría no se puede incluir en el filtro. El primer usuario debe seleccionar la categoría del menú.

3. Hay dos formas de permitir a los usuarios filtrar:

Automáticamente actualizar la lista después de cada selección: filtrado interactivo (conocido como recarga Ajax)Filtrado por lotes — seleccione varios filtros y luego haga clic en el botón “Aplicar filtro” o “Mostrar resultado”.

Ambos métodos tienen sus pros y sus contras. Pero hoy en día la mayoría de los sitios web utilizan la primera variante: filtrado interactivo (actualización automática del contenido).

Ahora hablemos de diferentes variantes de filtro.

Los filtros de la barra lateral son comunes en la mayoría de los sitios web. A continuación se muestran algunos ejemplos de la web:

Ejemplos de filtros de barra lateral de diferentes dominios

Aquí está el filtrado de barra lateral más simple:

Filtro sencillo por marca

El ejemplo anterior muestra que solo hay un botón “Restablecer” después de verificar el filtro. No se necesita nada adicional.

Pero, ¿qué hacer si hay muchos grupos de filtros (por marca, tamaño, precio) con una larga lista de casillas de verificación?

Estructura alámbrica de filtro de barra lateral

Se recomienda no mostrar la lista completa de opciones de filtro disponibles (casillas de verificación o enlaces). Muestre solo entre 5 y 6 casillas de verificación/enlaces más importantes y oculte otros debajo del botón expandible “Mostrar más”.

También puedes hacer que todo el grupo sea plegable haciendo clic en su título como se muestra arriba en la captura de pantalla. En términos de desarrollo web se llama acordeón.

Algunos sitios web utilizan el desplazamiento para ver una larga lista de opciones de filtro. Pero no es recomendable.

Entonces, ¿qué debería pasar cuando se comprueba algo?

En primer lugar, no olvide mostrar el cuadro de carga cada vez que se aplica el filtro.

Contenido de actualización automática

Pero hay un pequeño problema con el filtrado interactivo (página de recarga automática):
Cuando el usuario desea filtrar por varias marcas y ciertos tamaños, cada casilla de verificación recarga el contenido. Imaginemos que el usuario quiere filtrar por 10 criterios, eso significa 10 recargas inútiles. Cada recarga significa enviar una solicitud al servidor. Entonces, ¿cómo evitar recargas inútiles?
Aquí está el truco: muestra una carga falsa después de cada selección durante 1 segundo o menos. Durante el período de carga falsa, el usuario también puede seleccionar otros filtros. Por ej. El usuario selecciona una casilla de verificación, luego, durante la carga, puede seleccionar otra y otras casillas de verificación. Después de realizar la selección múltiple, aparece una carga falsa durante 1 segundo sin enviar la solicitud para asegurarse de que el usuario no esté seleccionando ningún filtro. Luego se aplicará el filtro enviando una solicitud.

Algunos sitios web prefieren el filtrado por lotes haciendo clic en “Aplicar” o “Mostrar resultado”.
También es útil para el usuario saber la cantidad de resultados dentro del botón como “Mostrar 12 resultados” antes de que se vuelva a cargar la página.

Aplicar manualmente haciendo clic en el botón

Ambas opciones tienen sus pros y sus contras. Pero hoy en día es muy popular la primera versión: contenido de actualización automática, especialmente para el filtro de la barra lateral.

Aquí hay algunas recomendaciones después de aplicar el filtro:

Informe al usuario cuántos artículos en total están disponibles según ese filtro.
(Por ejemplo: 10 elementos encontrados) Permita que el usuario borre todos los filtros con un solo clic en el botón “Borrar todo” Muestre al usuario qué filtros se han aplicado. El usuario puede olvidar que se le han aplicado algunos filtros de la barra lateral y que ese filtro está oculto en el enlace “mostrar más”. Hay un elemento de la interfaz de usuario llamado “chip”. Mostraremos el filtro aplicado como “chip” en la parte superior. Los “chips” se pueden eliminar individualmente.

Algunos sitios web no muestran el filtro aplicado en la parte superior (como “chips” extraíbles). Entonces depende de la situación. Si su aplicación o cualquier sitio web como catálogo tiene demasiados criterios de filtrado, entonces es mejor mostrar los filtros aplicados como “chips”.
Más sobre patatas fritas:
https://mui.com/material-ui/react-chip/
https://m2.material.io/components/chips

Una cosa más a tener en cuenta acerca de mostrar el filtro aplicado:
Imaginemos que algunos criterios de filtrado son similares. Por ejemplo: Filtrar por: “Número de asientos” y “Número de ruedas”. Entonces ambos son números. Otro ejemplo: Filtrar por “País de fabricación” y filtrar por “País de envío”. Ambas listas son similares. En ese caso, es importante mostrar el título del filtro aplicado en cada “chip” extraíble. Aquí hay un ejemplo:

Filtrar por opción única (botón de opción)

Hemos visto filtrado por casillas de verificación en las que el usuario puede elegir muchas opciones. Pero ¿qué pasa si le damos al usuario una opción única?
Podemos hacerlo mediante el botón de opción.
Más sobre los botones de opción:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

Por ejemplo: filtrar por condición del producto: “Nuevo”, “Usado”, “Devuelto”. El usuario puede seleccionar solo una opción.
De forma predeterminada, deberíamos darle al usuario la opción de ver todas las opciones.

Aquí tienes las mejores prácticas para ello.

Filtrar por precio

Hay dos formas de filtrar por precio. Escribiendo manualmente o deslizando el control deslizante de rango arrastrando el controlador.

Filtrar por precios ejemplos de estructura alámbrica

Este tipo de filtro se utiliza en paneles de control de administración, sitios de comercio electrónico y listas de datos complejas. Esto es más desafiante para los diseñadores de UX y los desarrolladores web. La lista de opciones está oculta. Entonces el usuario debe abrir el menú desplegable para ver las opciones de filtro. Este tipo de filtro es bueno si desea ofrecer al usuario un contenido más amplio.

Ejemplos de filtro de barra superior horizontal

La barra de filtro en la parte superior también puede ser interactiva (contenido que se actualiza automáticamente) o filtrar por lotes haciendo clic en “Aplicar” o “Mostrar resultado”.

En el cuadro desplegable podemos colocar cualquier componente de la interfaz de usuario: casillas de verificación, botones de opción o campos de entrada o simplemente una lista de menú.

Barra de filtro básica:

Normalmente mostramos todas las opciones de forma predeterminada. Entonces, el valor del botón desplegable muestra “Cualquiera” o “Todos”.

barra de filtro

Cuando se seleccionan las opciones de filtro, la página se recargará (filtro interactivo)

Barra de filtro cuando se selecciona

En el ejemplo anterior, “Marca” son casillas de verificación de selección múltiple, donde el usuario puede seleccionar múltiples opciones y cerrar el cuadro desplegable.

Pero la parte “Condición” es solo de selección única (lista de menú). El menú desplegable se cerrará una vez que se haga clic en la opción.

Barra de filtro seleccionada

Filtro avanzado

Aquí hay otro enfoque de UX para filtros. Texto de etiqueta dentro del botón de selección.

Barra de filtro en la parte superior (estructura alámbrica)

Solución UX de barra de filtro

Los “chips” en la parte superior te ayudan a ver todos los filtros aplicados de un vistazo. Porque el usuario puede olvidar qué filtros se han aplicado. Y es fácil de quitar. También debes dar siempre la opción de eliminar todo el filtro con un solo clic: “Restablecer filtro”.

Barra de filtros con botón “Todos los filtros”

¿Qué pasa si hay muchos grupos de filtros? Para los usuarios no es necesario ver todos los filtros en la parte superior. A veces el usuario nunca utilizará ciertos filtros.
Muestra sólo los filtros más importantes. El resto se puede abrir haciendo clic en el botón “Todos los filtros” o “Mostrar todo”

Filtrar con el botón mostrar todo

Barra lateral de filtro abierta por el botón “Mostrar todo”

Otra forma de mostrar una ventana modal en el centro de la pantalla.
Por ejemplo: Ebay y LinkedIn utilizan este enfoque:

Ventana de diálogo Filtrar todo de Ebay

Podemos poner cualquier componente en la ventana modal. Por ejemplo: cuadros desplegables, casillas de verificación, etc. Aquí hay un ejemplo:

¡Recordar! Es una buena práctica mostrar todos los filtros en la ventana modal. No muestre solo los filtros restantes (ocultos) en la ventana modal. ¿Por qué? Porque si muestra solo algunos filtros en la ventana modal, ¿qué debería suceder si el usuario hace clic en el botón “Borrar filtro” o “Restablecer”? ¿Deberíamos borrar todos los filtros o solo los filtros “visibles” en la barra superior? ¿O deberíamos borrar solo los filtros en modal? Ésta es una cuestión discutible.

Cuadro desplegable avanzado con botones de búsqueda y acción

Cuando el usuario abre un menú desplegable, ¿cómo cerrarlo?
– Haga clic en el mismo lugar donde abrió
– Haga clic fuera del área del menú desplegable.
A veces esto puede confundir a los usuarios. Cuando hice algunas pruebas de usabilidad. Algunos usuarios no sabían cómo cerrar el menú desplegable después de abrirlo.

Otro problema: si muestra una lista completa de países como lista desplegable, es muy difícil encontrar y seleccionar entre la lista de 200 países.

Aquí está la solución desde mi perspectiva:

Lista de filtros desplegables con capacidad de búsqueda

En la captura de pantalla anterior, puede ver que hay un botón “Restablecer”. Puedes poner “Cancelar” o “Cerrar” también dependiendo de la situación. Si nada ha cambiado en la lista, entonces el botón “Cerrar” tendrá sentido. Si el usuario cambia la lista de filtros, entonces “Restablecer” es más útil que “Cerrar”.

Otro ejemplo con filtro de precios:

Menú desplegable con filtro de precios en la barra de filtros en la parte superior

Otra forma de mostrar la lista de filtros aplicados.

En el sitio web de eBay hay un cuadro desplegable especial que muestra toda la lista de criterios de filtro aplicados, conocidos como “chips”.

Ebay tiene un menú desplegable para mostrar los filtros aplicados

Este enfoque ayuda a ahorrar algo de espacio adicional en el contenido.

Filtrar con rango de fechas

Filtrar por fecha también es importante para algunas aplicaciones. Si es propietario de un sitio web de comercio electrónico. Es posible que tenga un panel de administración para ver el historial de ventas.
Cómo puedes ver todas las ventas realizadas entre las fechas xx e yy.

Selector de rango de fechas

Aquí hay una mejor solución para la fecha: primero dé la opción de selección rápida, como “Hoy”, “Ayer”, “Este mes”, “Último mes”, “Este año” y, por último, “Período personalizado”.

Filtro de selección de fecha

Según mi investigación de usabilidad, es fácil para los usuarios seleccionar “Fecha de inicio” y “Fecha de finalización” por separado. No desde el cuadro de selección de fecha única. Pero podría ser diferente para su caso.

Otro método para mostrar el filtro de fecha en un único menú desplegable con selecciones rápidas:

Si es diseñador de UX, tenga en cuenta qué componentes utiliza su equipo de desarrollo. No lo compliques demasiado. Habla con el desarrollador front-end si estás haciendo algo nuevo.

Aquí hay alguna documentación sobre los selectores de fechas:
https://mui.com/x/react-date-pickers/date-range-picker/
https://rsuitejs.com/components/date-picker/
https://mui.com/x/react-date-pickers/date-range-picker/

Filtrar con condiciones personalizadas

Hay algunos…