Sistema de Comparación y Matriz

¿Qué hace Sistema de Comparación y Matriz?

Propósito

El Sistema de Comparación y Matriz proporciona una metodología para diseñar interfaces de descubrimiento y evaluación detalladas. Mientras que pricing-table-ui-system maneja niveles de planes de alto nivel y data-table-ui-system gestiona grandes conjuntos de datos, este sistema se enfoca en la comparación densa en atributos de unos pocos elementos específicos (generalmente 2–5). Asegura que los usuarios puedan evaluar productos o servicios complejos a través de docenas de dimensiones sin perder su lugar, sentirse abrumados por los datos, o luchar con diseños no responsivos.

Casos de Uso

• Comparación de Productos en E-commerce: Comparación de especificaciones técnicas para electrónicos, electrodomésticos o vehículos.
• Matrices de Características SaaS: Desglose detallado de capacidades de la plataforma más allá de las tarjetas de precios de alto nivel.
• Comparación de Servicios: Evaluación de diferentes planes de seguro, paquetes de viaje o cursos educativos.
• Herramientas Internas: Auditoría de diferentes versiones o configuraciones del sistema lado a lado.

Cuándo NO Usar

• Precios de Alto Nivel: Para resúmenes simples de suscripción de 3 niveles, usa pricing-table-ui-system.
• Exploración de Grandes Conjuntos de Datos: Si el usuario necesita ordenar y filtrar cientos de elementos, usa data-table-ui-system.
• Detalles de un Solo Elemento: Usa article-layout-system o card-ui-system para páginas de productos individuales.
• Progreso Lineal: Para flujos paso a paso, usa step-progress-system.

Entradas

1. Conjunto de Comparación: Los 2–5 elementos seleccionados para evaluación.
2. Taxonomía de Atributos: Una lista categorizada de todas las características, especificaciones y puntos de datos a comparar.
3. Tipos de Datos: Un mapeo de atributos a tipos de UI (ej., Booleano/Marca de verificación, Numérico, Calificación, Descripción de Texto).
4. Contexto de Selección: ¿Es una página persistente o una superposición temporal activada desde una página de listado de productos?

Salidas

1. Especificación de Anatomía de la Matriz: Definiciones para Encabezados de Fila (atributos), Encabezados de Columna (elementos) y Celdas de Datos.
2. Marco de Categorización: Reglas para agrupar atributos en secciones lógicas con encabezados plegables.
3. Plan de Navegación Fija (Sticky): Reglas de comportamiento para mantener el contexto durante el desplazamiento vertical y horizontal.
4. Mapa de Transición Responsiva: Una estrategia para adaptar la matriz a móvil (ej., Intercambio de Elementos vs. Apilamiento Vertical).

Flujo de Trabajo

1. Estructurar el Marco de la Cuadrícula

Define el eje principal de la matriz:

• Columnas: Representan los elementos que se comparan.
• Filas: Representan los atributos o características.
• Columna Principal: La primera columna a la izquierda contiene las etiquetas/encabezados de los atributos.

2. Categorizar y Agrupar Atributos

Evita la "Fatiga de Comparación" organizando las filas en grupos lógicos:

• Secciones: Agrupa atributos relacionados (ej., "Rendimiento," "Conectividad," "Garantía").
• Plegabilidad: Permite a los usuarios colapsar/expandir secciones para enfocarse en criterios específicos.
• Distinción Visual: Usa cambios sutiles de fondo o bordes para separar secciones.

3. Estandarizar la Visualización de Datos

Aplica un lenguaje visual consistente a diferentes tipos de datos:

• Booleanos: Usa marcas de verificación (✓) de alto contraste para inclusión y un guión (—) o estado vacío para exclusión.
• Calificaciones: Usa escalas de iconos consistentes (ej., 5 estrellas).
• Texto Matizado: Usa un tamaño de letra más pequeño y legible para descripciones, asegurando que la longitud de línea se gestione dentro de la celda.
• Destacados: Distingue visualmente las celdas donde un elemento claramente supera a otros (usar con precaución para mantener la neutralidad).

4. Implementar Contexto Fijo (Orientación)

Asegura que el usuario nunca pierda la pista de lo que está viendo:

• Encabezados de Columna Fijos: Mantén los nombres de los elementos y las fotos visibles en la parte superior del viewport mientras el usuario se desplaza hacia abajo por las filas.
• Encabezados de Fila Fijos: Para matrices anchas en escritorio, mantén las etiquetas de atributos visibles a la izquierda mientras el usuario se desplaza horizontalmente.

5. Planificar la Adaptación Móvil

Las matrices son inherentemente horizontales; adáptalas para pantallas verticales:

• El Patrón "Selector": Muestra la lista de atributos y 1–2 elementos a la vez, usando un menú desplegable o interacción de deslizamiento para cambiar qué elementos son visibles.
• El Patrón "Tarjeta Vertical": Transforma la matriz en una secuencia de tarjetas, repitiendo las etiquetas de atributos para cada tarjeta (solo recomendado para comparaciones muy simples).

Reglas de Decisión

• La Regla de los Cinco: Limita el número máximo de elementos en una matriz lado a lado a 5 en escritorio para evitar saturación horizontal.
• Relevancia de Atributos: Solo incluye atributos que difieran entre al menos dos elementos del conjunto. Si cada elemento tiene el mismo valor, considera mover esa información a una sección compartida de "Características Globales".
• Prominencia de Encabezados: Los encabezados de los elementos (Columna 1, 2, etc.) deben incluir una pequeña imagen del producto para proporcionar reconocimiento visual instantáneo.
• Estados de Hover en Filas: Usa un fondo de hover distintivo para toda la fila para ayudar al ojo a rastrear a través de las columnas.

Restricciones

• Accesibilidad: Los encabezados de fila deben estar correctamente asociados con las celdas usando scope="row" y scope="col". Asegura alto contraste para marcas de verificación e iconos. Los encabezados de columna/fila fijos no deben oscurecer el indicador de foco del teclado de celdas o controles debajo de ellos (WCAG 2.2 SC 2.4.11). Cualquier control de cambio de elemento o menú desplegable en móvil debe cumplir con el tamaño mínimo de destino de 24x24px (SC 2.5.8).
• Responsividad: El desplazamiento horizontal debe ser intencional (ej., dentro de un contenedor) y no romper el diseño global de la página.
• Peso Visual: La "Columna Principal" (atributos) debe tener un tratamiento visual ligeramente diferente (ej., fondo gris claro o texto en negrita) para distinguirla de los datos.

Patrones de Falla Comunes

• El Problema del "Encabezado Perdido": Desplazarse hacia abajo en una matriz larga y olvidar qué elemento es cuál.
• Sobrecarga de Atributos: Mostrar 50+ filas sin categorización, haciendo imposible encontrar información específica.
• Compresión Móvil: Intentar meter 4 columnas en una pantalla móvil, volviendo el texto ilegible.
• Símbolos Ambiguos: Usar iconos personalizados para "Sí/No" que los usuarios no entienden de inmediato.
• Alineación Inconsistente: Mezclar iconos centrados con texto alineado a la izquierda dentro de la misma columna.

Criterios de Validación

• Los encabezados de los elementos permanecen fijos en la parte superior del viewport durante el desplazamiento vertical.
• Los atributos están agrupados en secciones lógicas y plegables.
• Los tipos de datos (Booleano, Calificación, Texto) usan un lenguaje visual consistente.
• La "Columna Principal" es visualmente distinta de las columnas de datos.
• La vista móvil proporciona un mecanismo claro para comparar elementos (ej., cambio de elemento).
• Los estados de hover en filas están implementados para ayudar al rastreo horizontal.
• Todos los iconos y texto cumplen con los requisitos de contraste WCAG AA (4.5:1).
• Los encabezados fijos no oscurecen los indicadores de foco en celdas o controles (WCAG 2.2 SC 2.4.11).
• Los controles de cambio de elemento en móvil cumplen con el tamaño mínimo de destino de 24x24px (WCAG 2.2 SC 2.5.8).