Patrones de diseño frustrantes: filtros rotos

Los filtros están en todas partes . Si bien a menudo pensamos que aparecen al reservar vuelos o comprar en línea, los filtros se usan con frecuencia en casi todas las interfaces que presentan más de un puñado de puntos de datos.

Sin embargo, no es necesariamente solo la gran cantidad de datos lo que es difícil de entender; es la complejidad y la falta de consistencia que los datos suelen implicar lo que requiere cierto filtrado, un escenario tan común en las cuadrículas de datos, los paneles empresariales, el seguimiento de vacunas y los registros de registros públicos.

Diseño para la gama cómoda

Como clientes, usamos filtros para reducir un gran conjunto de opciones a una selección más manejable y altamente relevante. Tal vez solo unas pocas docenas de comprobantes de pago en lugar de miles, o solo un puñado de blusas en lugar de toda la colección.

Tenemos atributos específicos de interés, una intención específica, que necesitamos comunicar de alguna manera a la interfaz. Lo hacemos dividiendo nuestra intención en un conjunto de características disponibles. Esa intención puede ser bastante específica o bastante general, pero en ambos casos, el diseño debe minimizar el tiempo necesario para que los clientes pasen del estado predeterminado (cuando no se seleccionan filtros) al estado final (cuando todos los filtros se aplican correctamente).

Sin embargo, esa es solo una parte de la historia. Aplicar filtros relevantes es la parte fácil, pero mostrar solo los resultados relevantes suficientes es un poco más difícil. De hecho, para cada interfaz y para cada intención, tenemos en mente un rango cómodo particular, que es un número preferido de opciones que creemos que podemos manejar relativamente sin esfuerzo.

Este abanico de opciones no tiene por qué caber en una sola pantalla, ni mostrarse en una sola página, ni limitarse a una pequeña lista que podamos recordar fácilmente. Puede ser cualquier cosa, desde docenas hasta cientos de elementos dispersos en varias páginas.

Lo importante es que esta gama cumple con nuestras expectativas de que:

• estamos viendo opciones muy relevantes,
• podemos entender fácilmente lo que estamos explorando,
• podemos detectar las diferencias entre todas las opciones, y
• podemos procesar todo dentro de un plazo razonable y previsible.

A diferencia de la clasificación, que simplemente reorganiza los resultados de acuerdo con algunos atributos preferidos ( límites suaves ), los filtros siempre representan límites estrictos. Limitan estrictamente el alcance de los resultados. No hay suficientes filtros adecuados y los usuarios disparan muy por encima del rango cómodo; demasiados filtros y los usuarios terminan con cero resultados y abandonan el sitio por completo.

El rango cómodo varía significativamente de un producto a otro. La pista de dónde se encuentra se puede inferir de cuán diferentes son realmente las opciones. En las pruebas de usabilidad, vemos que las personas no tienen problemas para explorar entre 20 y 30 tipos de vehículos, entre 40 y 50 tipos de zapatillas, entre 70 y 80 ramos de flores o incluso para hojear entre 100 y 200 comprobantes de pago. Sin embargo, se sienten completamente abrumados al explorar 15 tipos diferentes de Sharpies o pilas AAA. Como regla general, parece que cuanto más diferentes son las opciones, más cómodos nos sentimos con un conjunto de opciones un poco más grande.

La última pregunta, entonces, es cómo encontrar ese delicado equilibrio, cuando nuestra interfaz ayuda a los usuarios a llegar rápidamente a los resultados justos . Una respuesta a esa pregunta radica en algo que suena terriblemente obvio: eliminar cualquier obstáculo en el camino de los usuarios hacia ese rango cómodo. Sin embargo, es más fácil escribirlo que hacerlo, especialmente cuando tiene docenas o incluso cientos de filtros que deben ser accesibles en dispositivos móviles, en computadoras de escritorio y en cualquier lugar intermedio.

La complejidad del filtrado

A primera vista, filtrar no parece una tarea particularmente compleja. Por supuesto, podemos tener largos debates sobre los elementos de formulario correctos para diferentes tipos de filtros (autocompletar, radios, conmutadores, menús desplegables de selección, controles deslizantes y botones, solo por nombrar algunos), pero en esencia, todos los elementos de formulario son simplemente básicos. entrada, ¿verdad?

Bueno, resulta que hay algunas facetas de la experiencia que hacen que el diseño de filtros sea bastante difícil :

• Los filtros pueden venir en varios sabores y formas, para precios, calificaciones, colores, fechas, horas, tamaño, marca, capacidad, características, nivel de experiencia, rango de edad, síntomas, estado del producto, etc.
• los filtros suelen venir en grandes cantidades y deben mostrarse en todas las pantallas,
• los filtros a menudo tienen diferentes estados (seleccionado, no seleccionado, deshabilitado)
• los filtros a menudo necesitan valores predeterminados sensibles y deben recordar la entrada del usuario,
• los filtros pueden ser interdependientes , y estas dependencias deben ser obvias,
• los filtros pueden ser difíciles de validar , por ejemplo, cuando los usuarios pueden escribir datos complejos, como la hora o las fechas,
• los filtros deben admitir y mostrar mensajes de error significativos,
• y tantos otros

Los filtros nunca existen por sí solos ; de una forma u otra, siempre están conectados a los resultados sobre los que actúan. Esta conexión a menudo hace que los filtros y los resultados coincidentes sean algo síncronos , ya que estos últimos dependen de la rapidez con la que la interfaz de usuario registra una entrada y cuánto tiempo necesita para procesarla correctamente.

Ahora, abordar todas las sutiles complejidades de cada uno de estos desafíos es un trabajo monumental, sin embargo, algunos problemas son un poco más frustrantes que otros, lo que hace que la experiencia general sea dolorosa y molesta y, por lo tanto, causa un alto abandono y altas tasas de rebote. Exploremos algunos de los críticos.

Evite los pequeños paneles desplazables

Después de unas pocas sesiones de usabilidad con clientes que intentan usar filtros en su propio dispositivo, uno puede detectar algunas frustraciones comunes que se repiten una y otra vez. Uno de los patrones más molestos proviene de largas secciones de filtros que contienen docenas de opciones. Estas opciones a menudo se esconden en un pequeño panel desplazable, que muestra 3 o 4 opciones a la vez y requiere desplazamiento vertical para explorar las opciones.

Estas secciones a menudo hacen que los clientes se desplacen verticalmente, lentamente, con precisión, con un enfoque y una precisión extremos. Como lo hacen en el móvil, algunos filtros se activan por error, lo que hace que el cliente se concentre aún más. Un ejemplo clásico de este patrón es el filtro "Marcas", que a menudo contiene cientos de opciones, ordenadas por popularidad o por alfabeto.

Una opción alternativa sería mostrar hasta 7-10 opciones a la vez con un acordeón que se expandiría y mostraría todas las opciones al tocar/hacer clic. Estas opciones no tienen que mostrarse en toda su altura, pero pueden vivir en un panel desplazable más grande . Pero entonces no deberían activarse desplazándose por el panel.

También es una buena idea complementar el filtro con un autocompletado de búsqueda y una vista alfabética si algunas de las opciones populares están resaltadas en la parte superior. Un buen ejemplo de ello es Rozetka.ua, un minorista de comercio electrónico de Ucrania (ver arriba).

Proporcione siempre respaldo de entrada de texto para controles deslizantes

Siempre que los usuarios puedan definir un amplio rango de valores, ya sea un rango de precios en una tienda minorista, la duración máxima de un viaje en tren o una cobertura mínima/máxima para un plan de seguro, probablemente usaremos algún tipo de control deslizante . Todos los controles deslizantes tienen una cosa en común: son maravillosos cuando queremos alentar a los clientes a explorar muchas opciones rápidamente, pero son bastante frustrantes cuando el usuario tiene algo específico en mente y, por lo tanto, necesita ser un poco más preciso.

Solo piense en la frustración por la que generalmente tenemos que pasar cuando subimos un poco el precio, de $ 200 a $ 215, o agregamos otra hora a la duración de un vuelo. Hacerlo con un control deslizante es difícil porque requiere una precisión increíble, y eso siempre produce errores y causa frustración.

Ya hemos cubierto cómo diseñar un control deslizante perfecto en detalle, pero probablemente la característica más importante que necesita cada control deslizante es admitir diferentes velocidades de interacción. De hecho, hay algunos tipos comunes de interacción:

• cuando los clientes quieren explorar muchas opciones rápidamente, un buen control deslizante con una pista y un pulgar funciona perfectamente bien;
• cuando los clientes quieren ser más precisos en su exploración, podemos ayudarlos agregando motores paso a paso (+/-) para saltos granulares hacia adelante y hacia atrás,
• cuando los clientes tienen un valor exacto en mente, podemos ayudar proporcionando campos de entrada de texto para valores mínimos/máximos, para que los usuarios puedan escribir valores directamente sin tener que usar el control deslizante,
• en todos estos casos, las soluciones deben ser accesibles y admitir la interacción solo con el teclado.

Eche un vistazo al ejemplo de Lloydsbank a continuación. Una calculadora de préstamos personales admite maravillosamente todo tipo de interacción. Además, observe los estilos de enfoque cuando se activa el pulgar y los rangos que se muestran debajo del control deslizante de la tasa de interés en la parte superior para indicar hacia dónde navega actualmente el cliente. La tasa de interés cambia dependiendo de cuánto dinero le gustaría pedir prestado al cliente.

Otro ejemplo interesante de un control deslizante bien diseñado proviene de Sofasizer de Made.com, que le permite filtrar sofás según las dimensiones que deben tener. En lugar de utilizar un conjunto de campos de entrada, Made.com optó por utilizar una interfaz visual con un icono de "Cambiar tamaño". Puede arrastrar el controlador para ajustar el tamaño, o puede escribir valores exactos en los campos de entrada de alto y ancho.

Nunca desplace automáticamente a los usuarios en una sola entrada

Has estado allí antes. Tal vez en la ráfaga de emoción se dirige a la tienda minorista, hace clic en todos los enlaces de categoría correctos, desliza el dedo hacia la izquierda y hacia la derecha a través de la subnavegación y observa con ojo de águila esa nueva y brillante computadora portátil con la que finalmente está listo para comprometerse. Lo que le espera a continuación podría no ser la experiencia que esperaba disfrutar. Eche un vistazo al ejemplo a continuación. ¿Puedes identificar lo que parece estar sucediendo?

En este ejemplo de Dell.com, cuando elige las características de su computadora portátil, solo se registra una sola entrada a la vez. Si está seleccionando varias opciones rápidamente, solo se aplicará la última entrada. Y a medida que se registra una entrada, la página se actualiza y el cliente salta hasta la parte superior de la barra lateral de filtrado. Eso significa que cuantos más filtros desee usar, y generalmente navegue de arriba a abajo, más tendrá que seguir desplazándose hacia abajo para encontrar el filtro correcto.

Una razón por la que esta implementación es tan común no es porque queremos desplazar automáticamente a los clientes a la parte superior del área de filtros , sino porque queremos llevarlos hacia la parte superior de los resultados de los productos con los filtros aplicados. Estar atrapado en algún lugar en el medio de la lista no será particularmente útil una vez que haya aplicado nuevos filtros. Y, de hecho, es mejor mostrar la parte superior de los resultados con cada actualización de filtro, pero eso no significa que también debamos desplazar automáticamente los filtros.

De hecho, incluso si desea especificar solo de 6 a 10 funciones de esta manera, deberá embarcarse en una lucha de desplazamiento bastante obstinada contra el desplazamiento automático , con solo un filtro registrado a la vez. Es posible tocar o hacer clic en varios filtros a la vez, pero en este caso, lamentablemente, la interfaz de usuario no responderá como se esperaba. La experiencia general es bastante frustrante y desorientadora, también porque el sitio web se siente lento y siempre se necesita más y más esfuerzo para continuar filtrando. No es el mejor ejemplo de minimizar el tiempo desde el estado predeterminado hasta el estado final.

Una forma de abordar estos problemas sería eliminar por completo el desplazamiento automático de los filtros y encontrar una mejor manera de indicar que solo se puede realizar una entrada a la vez. Por ejemplo, podríamos congelar toda la interfaz y así deshabilitar cualquier entrada hasta que los nuevos datos regresen del servidor. Luego, tendríamos que esperar a que se inyectaran nuevos resultados en el DOM, y solo entonces tendríamos que recuperar la interfaz de usuario. Si bien es un poco más claro que la solución anterior, resulta que tiene problemas por sí solo.

Nunca congele la interfaz de usuario en una sola entrada

Cada vez que congelamos la interfaz de usuario en una sola entrada, ralentizamos activamente a nuestros clientes para expresar su intención. De hecho, hacemos que sea un poco más engorroso para ellos especificar lo que les interesa, priorizando la visualización de resultados sobre la entrada. Sin embargo, eso parece ser una priorización incorrecta. Echemos un vistazo al ejemplo a continuación.

En Sears.com, cada vez que se realiza una selección, no solo se bloquea completamente la interfaz de usuario; los usuarios también son empujados a la parte superior de la página. Eso es especialmente frustrante para los filtros que incluyen acordeones (enlace "ver más" en "Marca", por ejemplo). Con cada nuevo filtro, el usuario debe desplazarse hacia abajo y abrir el acordeón para encontrar ese atributo en particular que desea seleccionar. Walmart (ver ejemplo a continuación) sigue el mismo patrón.

En estos casos, debemos confiar en JavaScript para alternar entre los estados congelado y de trabajo de manera confiable, incluso si los datos no han regresado del servidor, si regresan lentamente o si están mal formados. Esa es una suposición bastante frágil en la que confiar.

Ahora, por supuesto, no sabemos cuándo el usuario ha terminado con su entrada, pero es razonable asegurarse de que durante toda la interacción con los filtros, el cliente nunca tenga que esperar a que una interfaz responda . Ahora, si miramos un poco más de cerca los tres ejemplos anteriores, notaremos una similitud. Todos ellos aplican automáticamente cada filtro al momento de la selección, deshabilitando cualquier otra selección hasta que regrese la nueva página de resultados.

Sin embargo, es muy común que los clientes agreguen múltiples filtros rápidamente , a veces en la misma categoría. El comportamiento de la interfaz de usuario no admite bien esta intención.

Entonces, ¿tenemos alguna alternativa? Una alternativa obvia es entregar al usuario la decisión sobre cuándo deben actualizarse los resultados. Eso podría significar agregar un botón "Aplicar" y alentar a los clientes a seleccionar todos los filtros primero antes de ver los resultados. Pero no es necesariamente la única opción. En realidad, resulta que podemos hacer ambas cosas: ver resultados actualizados mientras interactuamos con el filtro sin demora. Solo necesitamos pasar de la visualización sincrónica de resultados a su contraparte asincrónica.

Mostrar siempre los resultados de forma asíncrona

Ya mencionamos que los filtros y los resultados coincidentes a menudo son algo sincrónicos. Sin embargo, podríamos dividir las partes de la interfaz de usuario y renderizarlas por separado, de forma asíncrona. En ese caso, en cada entrada de filtro, los resultados coincidentes podrían actualizarse de forma asíncrona, mientras que los filtros siempre permanecen accesibles y en el mismo lugar. Con cada nueva entrada de filtro, el usuario vería un destello de transmisión de contenido nuevo.

El ejemplo de BestBuy anterior muestra ese patrón en acción. A medida que seleccionamos filtros en la barra lateral izquierda, se aplican en segundo plano mientras podemos seguir seleccionando más y más filtros si así lo decidimos. La lista de productos se actualiza de forma asíncrona: nunca hay un estado deshabilitado ya que el nuevo contenido se completa en la lista de resultados coincidentes cada vez que los datos regresan del servidor.

Podríamos hacerlo un poco más obvio al mostrar que se cargan nuevos productos a medida que se aplican nuevos filtros. Un buen ejemplo de eso es Coolblue, con una interfaz de usuario de filtrado de barra lateral asincrónica que aparece en el lado izquierdo.

Vale la pena enfatizar en este punto que cada entrada en el área de filtros debe registrarse y luego aplicarse a la lista de productos. Hemos notado que para muchos clientes ese es un comportamiento esperado, a menos que mantenga un botón flotante "Aplicar" cerca del área de filtros.

Evitar cambios de diseño en la entrada de filtro

Siempre que la interfaz no bloquee la entrada, por supuesto, los clientes esperan poder establecer una serie de filtros uno tras otro. Sin embargo, dependiendo de dónde estén ubicados los filtros, a veces pueden encontrar cambios de diseño accidentales , por lo que deben orientarse en la página nuevamente, desplazarse hacia arriba y hacia abajo para encontrar dónde se quedaron y luego continuar con la siguiente entrada. Eche un vistazo al ejemplo a continuación. ¿Cuál parece ser el problema en VictoriaPlum (que se muestra a continuación)?

Cada vez que los usuarios interactúan con un filtro, una vez que ingresan los nuevos elementos del producto, se produce un pequeño cambio en el área de filtrado. Por lo general, hay tres razones por las que sucede:

• en cada entrada de filtro, las secciones de filtro que ha ampliado el cliente colapsan automáticamente,
• los filtros que estaban disponibles anteriormente dejan de estar disponibles y se ocultan, lo que reduce la altura del área de filtrado,
• la descripción general de los filtros aplicados se encuentra sobre el área de filtros, por lo que, a medida que aumenta de tamaño con cada filtro nuevo, también empuja los filtros hacia abajo.

Para evitar el primer problema, debemos mantener el estado de los acordeones y mantenerlos abiertos, incluso si el usuario ha configurado un nuevo filtro o ha actualizado la página. También debemos mantener la configuración de filtrado al actualizar o navegar. De hecho, vemos clientes que esperan que los filtros se sigan aplicando incluso si regresan a categorías o páginas anteriores (por ejemplo, con el botón "Atrás").

Para el segundo problema, si los filtros ya no están disponibles, en lugar de ocultarlos automáticamente, podemos deshabilitarlos, pero también explicar por qué están deshabilitados (una pista amigable podría ayudar) y qué se debe hacer para volver a habilitarlos. . Luego también podemos agregar una opción para "Ocultar todas las opciones no disponibles".

Finalmente, podríamos querer reconsiderar la posición de los filtros aplicados sobre el área de filtros. Sin embargo, realmente no hay muchas opciones en las que podrían vivir, y una mejor opción parece ser el área sobre los resultados de filtrado.

Mostrar filtros encima de los resultados

Para evitar cambios de diseño por completo, podemos mostrar los filtros aplicados sobre los resultados del producto . Eso mantendría el área de filtrado estable y predecible durante toda la interacción del usuario. De hecho, no tiene que ser visible en todo momento. Crate & Barrel, en el ejemplo a continuación, permite a los clientes ocultar y mostrar filtros a pedido, mientras que los filtros aplicados se agregan al área dedicada arriba de los productos. Tenga en cuenta que también está disponible una opción para borrar todos los filtros. (Sin embargo, la página del producto ha cambiado desde que se grabó el video).

Otra opción es convertir todas las secciones de filtro en superposiciones y mostrarlas al tocar o hacer clic sobre los resultados. De hecho, incluso podría usar filtros flotantes , de modo que cuando un cliente se desplaza hacia abajo en la página, los filtros aún están accesibles todo el tiempo.

Un ejemplo de este patrón es Adidas (ver la imagen de abajo). La barra de filtros es persistente; incluso cuando los usuarios se desplazan hacia abajo en la página, la superposición del filtro no se cerrará automáticamente ; requiere la entrada del usuario, nuevamente entregando el control al usuario. Sin embargo, se cierra automáticamente una vez que se selecciona uno de los filtros. Si el usuario desea seleccionar varios filtros, debe volver a abrir el mismo grupo de filtros una y otra vez. Mantener los filtros persistentes podría ser una mejor idea. Aún así, el resultado: sin cambios de diseño, sin desplazamientos frustrantes en pasillos estrechos, y los filtros siempre están accesibles.

No quiere decir que mostrar filtros encima de los resultados siempre sea mejor por defecto. En Asos, cada entrada de filtro provoca saltos a la parte superior de la página, por lo que los clientes deben desplazarse manualmente hacia abajo para continuar filtrando. En lugar de volver a renderizar toda la página, tendría más sentido volver a renderizar el área de filtros y la lista de productos por separado.

Sin embargo, en general, las dos primeras opciones (Crate & Barrel y Adidas) parecen funcionar muy bien y dejan más espacio para mostrar los productos, al tiempo que evitan todos los problemas que discutimos anteriormente. Ese es un patrón bastante confiable para usar cuando queremos evitar obstáculos o confusión. Pero aún podemos hacer un poco más, por ejemplo, con un buen botón "aplicar".

Mostrar el número de resultados en el botón "Aplicar"

Casi se siente un poco arcaico tener un botón "Aplicar" para filtros en momentos en que nos estamos acostumbrando a interacciones fluidas y fluidas, fundidos de entrada y animaciones cronometradas. Sin embargo, si queremos llevar a los clientes hacia un rango cómodo, difícilmente hay una mejor manera de hacerlo que mostrar la cantidad de resultados lo antes posible .

Ikea presenta filtros en la parte superior de los resultados. A veces, los filtros aparecen en una superposición desplegable y, a veces, como una píldora debajo de los filtros. Pero la mayoría de las veces, a diferencia de los ejemplos anteriores, cuando se selecciona un filtro, muestra una superposición de megafiltro en la barra lateral a la derecha con todas las opciones de filtrado disponibles agrupadas allí. A medida que el cliente avanza a través de los filtros, la lista de productos se actualiza en segundo plano de forma asíncrona. Más importante aún, observe el botón "Aplicar" cuya etiqueta cambia según la entrada.

Con cada entrada de filtro, se envía una nueva solicitud al servidor, recuperando el número de resultados y luego mostrando ese número en la interfaz de usuario. Esa es una excelente manera de dar a los usuarios una idea muy clara de qué tan lejos o qué tan cerca están de su rango cómodo.

Otro ejemplo es Galaxus.ch (ver más abajo), un minorista de comercio electrónico suizo que brinda una experiencia de primera clase cuando se trata de filtrado. Los filtros se muestran encima de los resultados del producto; aparece una superposición de filtro al tocar/hacer clic. Sin ralentizaciones, tiempos de respuesta rápidos y una hermosa integración de filtros activos con el área de filtros. Un gran ejemplo de referencia que vale la pena considerar al diseñar cualquier tipo de filtro.

En general, tener un botón "Aplicar" junto con actualizaciones en tiempo real del área de contenido parece funcionar mejor. Realmente combina lo mejor de ambas soluciones: muestra los resultados inmediatamente cuando llegan, mientras mantiene los filtros accesibles en todo momento.

Evite las pantallas divididas en dispositivos móviles

Los problemas que hemos explorado en el artículo se aplican por igual a las pantallas grandes y pequeñas. Sin embargo, en pantallas pequeñas, y especialmente en conexiones lentas, estos problemas se vuelven aún más críticos. La mayoría de las veces, las interfaces tienden a bloquear toda la interfaz de usuario en una sola entrada de filtro, lo que provoca retrasos masivos para los clientes en movimiento (por ejemplo, Crutchfield, Walgreens). Por otro lado, es común dividir la pantalla para mostrar una superposición de filtros, mientras se sigue mostrando la lista de productos actualizada en segundo plano (por ejemplo, Nordstrom).

Sin embargo, en general, podría ser una mejor idea experimentar si una superposición de página completa para los filtros funcionaría mejor. Brinda más espacio para experimentar con una vista de varias columnas, o tal vez incluso mostrar un área deslizable para elegir filtros sin tener que moverse entre páginas separadas. De hecho, usar acordeones que puedan colapsarse y expandirse en lugar de llevar al usuario a una página separada podría ser una buena idea, similar a lo que hemos discutido con los mega menús desplegables.

A diferencia del escritorio, tener un botón "Aplicar" en todos estos ejemplos es importante, y puede hacerlo un poco más útil agregando la cantidad de productos como una etiqueta en el botón y manteniendo el botón fijo en la parte inferior mientras el usuario se desplaza hacia abajo. .

Lista de verificación de diseño de filtrado

Como de costumbre, aquí están todas las cosas a tener en cuenta al diseñar cualquier tipo de filtro: un pequeño ayudante para evitar perder detalles importantes antes de entablar conversaciones con sus colegas diseñadores y desarrolladores. También puede encontrar una baraja completa de listas de verificación de patrones de diseño de interfaz inteligente en su verdaderamente Smashing Magazine.

1. ¿Podemos evitar un icono de filtro y mostrar los filtros tal como son?
2. Si no, ¿qué icono elegimos para indicar el filtrado?
3. ¿El ícono + relleno es lo suficientemente grande para tocar cómodamente?
4. ¿Ponemos el icono arriba, abajo o flotante (móvil/escritorio)?
5. ¿Qué sucede exactamente cuando el usuario hace clic/toca el icono?
6. ¿Cómo cambiará el ícono al tocar/hacer clic?
7. ¿Tendremos algún tipo de animación o transición al hacer clic?
8. ¿Aparecerán los filtros como página completa/superposición parcial o deslizable?
9. ¿Podemos evitar el filtrado de la barra lateral, ya que suele ser lento?
10. ¿Exponemos filtros populares o relevantes de forma predeterminada?
11. ¿Mostramos el número de resultados esperados para cada filtro?
12. ¿Podemos usar un deslizador horizontal para movernos entre filtros?
13. ¿Podemos evitar los menús desplegables y usar solo botones/chips + conmutadores?
14. Para filtros complejos, ¿brindamos búsqueda dentro de los filtros?
15. ¿Utilizamos iconos para explicar las diferencias entre varios filtros?
16. ¿Utilizamos los elementos correctos para los filtros, por ejemplo, controles deslizantes, botones, conmutadores?
17. ¿Los filtros se aplican automáticamente (sí, para diapositivas)?
18. ¿Los filtros se aplican manualmente en la confirmación ("Aplicar") (sí, para superposiciones)?
19. ¿Cómo comunicamos los filtros ya seleccionados?
20. ¿Los filtros seleccionados pueden aparecer como píldoras, chips o etiquetas removibles?
21. ¿Recomendamos filtros relevantes basados ​​en la selección?
22. ¿Hacemos un seguimiento de la incompatibilidad entre los filtros seleccionados?
23. ¿Cómo aparecen los mensajes de error o las advertencias en la interfaz de usuario?
24. ¿Permitimos que los clientes restablezcan todos los filtros rápidamente, a la vez?
25. ¿Los filtros (o el botón de filtros) flotan en el desplazamiento en el dispositivo móvil/escritorio?
26. ¿Pueden los usuarios tocar en el mismo lugar para abrir/cerrar filtros?

Terminando

Con demasiada frecuencia, la experiencia de filtrado en la web se rompe y es frustrante, lo que hace que a los clientes les resulte innecesariamente difícil obtener esa brillante y cómoda gama de resultados relevantes. Cuando diseñe el próximo filtro, eche un vistazo a algunos de los problemas comunes que quizás desee evitar y, con suerte, evite toda la frustración que surge de las implementaciones rotas e inaccesibles.

• Diseñe para la cómoda gama de opciones, para el caso en que un cliente desee agregar varios filtros rápidamente, uno tras otro.
• Para grupos de filtros extensos, evite los pequeños paneles desplazables y muestre entre 7 y 10 opciones a la vez con un acordeón que se expandiría y mostraría todas las opciones al tocar o hacer clic. Agregue una función de autocompletado de búsqueda y una vista alfabética también.
• Siempre agregue pasos (+/-) y campos de entrada de texto cuando use controles deslizantes,
• El cliente a menudo desea establecer una serie de filtros del mismo tipo. Nunca desplace automáticamente a los usuarios en una sola entrada y nunca colapse un grupo de filtros automáticamente.
• Nunca congele la interfaz de usuario en una sola entrada y nunca haga que su cliente espere a que una interfaz responda cuando configure los filtros.
• Siempre actualice los filtros y muestre los resultados de forma asíncrona , de modo que en cada entrada de filtro, los resultados coincidentes se puedan actualizar de forma asíncrona, mientras que los filtros siempre permanecen accesibles y en el mismo lugar.
• Evite siempre los cambios de diseño en la entrada del filtro y considere mostrar filtros sobre los resultados.
• En dispositivos móviles, el botón "Aplicar" podría estar pegajoso en la parte inferior de la pantalla. Actualice el conteo de productos y muéstrelos en el botón.

Artículos de la serie

Si encuentra útil este artículo, aquí hay una descripción general de artículos similares que hemos publicado a lo largo de los años, y algunos más están por venir.

• acordeón perfecto
• Configurador receptivo perfecto
• Selector de cumpleaños perfecto
• Selector perfecto de fecha y hora
• Perfecto Mega-Desplegable
• Comparación perfecta de características
• Control deslizante perfecto
• Libro de patrones de diseño de formularios de Adam Silver, publicado en SmashingMag
• Suscríbete a nuestro boletín electrónico para no perderte los próximos.