Sistema de Filtro y Ordenamiento
Propósito
El Sistema de Filtro y Ordenamiento proporciona una metodología para diseñar interfaces de descubrimiento que ayudan a los usuarios a navegar grandes conjuntos de datos o catálogos de productos. Mientras que la implementación técnica maneja la lógica, este sistema define la composición espacial y las señales visuales de las herramientas de descubrimiento. Asegura que los usuarios puedan refinar fácilmente su vista, entender el estado actual del filtrado y cambiar entre modos de priorización (ordenamiento) sin perder el contexto ni sentirse abrumados.
Casos de Uso
- Diseñar la capa de descubrimiento en la barra lateral o barra superior de sitios de comercio electrónico.
- Organizar páginas complejas de resultados de búsqueda (SERP) para directorios o centros de recursos.
- Implementar "Cajones de Descubrimiento" para interfaces de aplicaciones móviles.
- Crear navegación por facetas para documentación con mucho contenido o archivos de blogs.
Cuándo NO Usar
- Conjuntos de datos pequeños (<12 elementos): Si todo el contenido cabe en una sola vista, agregar filtrado y ordenamiento introduce un costo de interacción innecesario.
- Flujos de trabajo de ruta única: Donde se espera que el usuario siga una secuencia lineal en lugar de explorar un catálogo.
- Tablas de datos sin procesar: Donde es probable que los usuarios usen la función "Buscar" nativa del navegador o herramientas avanzadas tipo hoja de cálculo (aunque un ordenamiento de alto nivel aún ayuda).
Entradas
- Inventario de Facetas: Una lista de todos los atributos por los que los usuarios pueden filtrar (por ejemplo, Tamaño, Color, Calificación, Precio).
- Clasificación por Prioridad: Qué facetas son "Primarias" (usadas por el 80% de los usuarios) vs. "Secundarias" (especificaciones de nicho).
- Tipos de Control: Mapeo de tipos de datos a controles de interfaz de usuario (por ejemplo, Casillas de verificación para selección múltiple, Controles deslizantes de rango para precio).
- Contexto de Diseño: El espacio horizontal y vertical disponible (del
sistema-de-rejilla-responsiva).
Salidas
- Plano de Diseño de Descubrimiento: Ubicación definida para la barra de filtros (Barra lateral vs. Barra superior) y la cuadrícula de resultados.
- Especificación de Componente de Faceta: Diseño visual para casillas de verificación, muestras de color y entradas de rango dentro del contexto de descubrimiento.
- Mapa de Estados: Tratamientos visuales para filtros activos (chips/píldoras), estados de carga (esqueletos) y estados vacíos.
- Estrategia Adaptable: Un plan de cómo los filtros se transforman de escritorio (por ejemplo, barra lateral) a móvil (por ejemplo, cajón inferior).
Flujo de Trabajo
1. Seleccionar el Patrón de Diseño Principal
Elige una disposición espacial según el número de facetas:
- Barra Lateral (Izquierda/Derecha): Mejor para 5+ facetas. Proporciona alta visibilidad y acceso persistente a las herramientas de descubrimiento.
- Barra Superior Horizontal: Mejor para 1–4 facetas. Maximiza el ancho para los resultados, pero puede saturarse si se añaden más facetas después.
- Superposición/Cajón: Mejor para móviles o interfaces de escritorio "limpias" donde el descubrimiento es una tarea secundaria.
2. Definir la Jerarquía Visual de las Facetas
Aplica los principios del sistema-de-jerarquía-visual a la lista de filtros:
- Encabezados de Grupo: Usa títulos en negrita y concisos (por ejemplo, Categoría, Marca).
- Tamaño de los Controles: Asegúrate de que las casillas de verificación y los enlaces de texto tengan suficiente ritmo vertical (normalmente un espacio de
--space-s). - Inicialmente Expandido vs. Colapsado: Expande las 3 facetas más usadas; colapsa el resto para ahorrar espacio vertical.
3. Diseñar el Sistema de "Estado Activo"
Los usuarios siempre deben saber qué filtros están aplicados:
- Resumen (Píldoras/Chips): Coloca una lista horizontal de filtros activos encima de los resultados o en la parte superior de la barra lateral.
- Limpiar Todo: Proporciona una acción única y prominente para restablecer toda la vista.
- Retroalimentación Visual: El contenedor de resultados debe indicar que se está "actualizando" (por ejemplo, opacidad al 20% o una pantalla esqueleto) cuando se activa/desactiva un filtro.
4. Establecer las Señales de Ordenamiento
Distingue entre inclusión (Filtrado) y priorización (Ordenamiento):
- Ubicación: Mantén el ordenamiento en la parte superior derecha o superior izquierda del área de resultados, separado de los filtros.
- Etiquetado: Usa etiquetas claras como "Ordenar por: Precio (Menor a Mayor)" en lugar de solo "Precio."
5. Planificar para el Descubrimiento en Móvil
- El Disparador de Descubrimiento: Usa un botón fijo (por ejemplo, "Filtrar y Ordenar") en la parte inferior o superior de la pantalla.
- El Patrón de Cajón: Abre los filtros en un cajón de pantalla completa o inferior para maximizar el tamaño de los objetivos táctiles.
- Inmediato vs. Por Lotes: Decide si la vista móvil debe actualizarse al instante (Facetada) o requiere un botón "Mostrar X Resultados" para aplicar.
Reglas de Decisión
- La Regla del "80/20": Muestra solo los 5 valores principales para cualquier faceta; usa un enlace "Mostrar Más" para revelar el resto.
- Barra Lateral vs. Barra Superior: Si tu lista de facetas requiere desplazamiento en una pantalla de laptop estándar, usa una Barra Lateral. Si cabe en una línea, usa una Barra Superior.
- Persistencia de la Selección: Los filtros aplicados deben permanecer visibles incluso si se desplazan fuera de la barra lateral (por ejemplo, usando una barra de chips fija).
- Alternativa para Estado Vacío: Nunca permitas que una combinación de filtros lleve a un punto muerto; proporciona siempre un botón "Restablecer" o alternativas sugeridas.
Restricciones
- Accesibilidad: Todos los controles de filtro deben tener anillos de enfoque visibles y ser operables mediante teclado. Usa
aria-expandedpara facetas colapsables yaria-live="polite"en el contenedor/contador de resultados para que los usuarios de lectores de pantalla sepan cuándo se han actualizado los resultados. - Responsividad: Los filtros deben apilarse o moverse a un cajón en móvil para evitar el desbordamiento horizontal o "apretar" la cuadrícula de contenido. Prefiere consultas de contenedor sobre puntos de interrupción de ventana gráfica cuando la barra de filtros pueda aparecer en más de un contexto de diseño (por ejemplo, barra lateral vs. widget integrado).
- Contraste: Asegúrate de que los estados activos/seleccionados (por ejemplo, una casilla marcada o un chip azul) cumplan con la relación de contraste 3:1 respecto al fondo.
Patrones de Falla Comunes
- El "Filtro Misterioso": Los usuarios no pueden saber qué filtros están activos porque no hay una barra de resumen de píldoras/chips.
- La "Barra Lateral Infinita": Una barra lateral tan larga que se convierte en una tarea gestionarla, a menudo causada por no usar "Mostrar Más" para listas largas.
- El Hacinamiento Móvil: Intentar meter una barra lateral de escritorio en una vista móvil, haciendo que la cuadrícula de resultados sea ilegible.
- Falta de Retroalimentación de "Aplicado": Activar/desactivar un filtro sin que la cuadrícula de resultados indique visualmente un cambio (incluso si el cambio es rápido).
- El Punto Muerto: Filtrar hasta cero elementos y no proporcionar ninguna forma de volver atrás.
Criterios de Validación
- Existe una distinción clara entre Filtrado (inclusión) y Ordenamiento (priorización).
- Los filtros activos se resumen visualmente (por ejemplo, chips/píldoras).
- Las facetas más usadas están expandidas por defecto; las demás son colapsables.
- Una acción "Limpiar Todo" o "Restablecer" es fácilmente accesible.
- El sistema proporciona un patrón de descubrimiento específico para móvil (por ejemplo, Cajón).
- Los estados de carga (esqueletos/spinners) están definidos para cuando los resultados se actualizan.
- Todos los controles cumplen con el tamaño mínimo del objetivo táctil (24x24px mínimo según WCAG 2.2 SC 2.5.8, preferiblemente 44x44px) y los requisitos de accesibilidad por teclado.