Sistema de Comparação e Matriz

O que Sistema de Comparação e Matriz faz?

Propósito

O Sistema de Comparação e Matriz fornece uma metodologia para projetar interfaces detalhadas de descoberta e avaliação. Enquanto pricing-table-ui-system lida com planos de alto nível e data-table-ui-system gerencia grandes conjuntos de dados, este sistema foca na comparação com alta densidade de atributos de alguns itens específicos (geralmente 2–5). Ele garante que os usuários possam avaliar produtos ou serviços complexos em dezenas de dimensões sem perder o lugar, se sentir sobrecarregados por dados ou ter dificuldades com layouts não responsivos.

Casos de Uso

• Comparação de Produtos em E-commerce: Comparação de especificações técnicas para eletrônicos, eletrodomésticos ou veículos.
• Matrizes de Funcionalidades SaaS: Detalhamento de capacidades da plataforma além dos cartões de preço de alto nível.
• Comparação de Serviços: Avaliação de diferentes planos de seguro, pacotes de viagem ou cursos educacionais.
• Ferramentas Internas: Auditoria de diferentes versões ou configurações de sistema lado a lado.

Quando NÃO Usar

• Precificação de Alto Nível: Para resumos simples de assinaturas de 3 níveis, use pricing-table-ui-system.
• Exploração de Grandes Conjuntos de Dados: Se o usuário precisar classificar e filtrar centenas de itens, use data-table-ui-system.
• Detalhes de um Único Item: Use article-layout-system ou card-ui-system para páginas de produto individuais.
• Progresso Linear: Para fluxos passo a passo, use step-progress-system.

Entradas

1. Conjunto de Comparação: Os 2–5 itens selecionados para avaliação.
2. Taxonomia de Atributos: Uma lista categorizada de todas as funcionalidades, especificações e pontos de dados a serem comparados.
3. Tipos de Dados: Um mapeamento de atributos para tipos de UI (ex.: Booleano/Marca de verificação, Numérico, Avaliação, Descrição de Texto).
4. Contexto da Seleção: Esta é uma página persistente ou uma sobreposição temporária acionada a partir de uma página de listagem de produtos?

Saídas

1. Especificação da Anatomia da Matriz: Definições para Cabeçalhos de Linha (atributos), Cabeçalhos de Coluna (itens) e Células de Dados.
2. Estrutura de Categorização: Regras para agrupar atributos em seções lógicas com cabeçalhos recolhíveis.
3. Plano de Navegação Fixa (Sticky): Regras comportamentais para manter o contexto durante a rolagem vertical e horizontal.
4. Mapa de Transição Responsiva: Uma estratégia para adaptar a matriz para dispositivos móveis (ex.: Troca de Itens vs. Empilhamento Vertical).

Fluxo de Trabalho

1. Estruturar a Estrutura da Grade

Defina o eixo principal da matriz:

• Colunas: Representam os itens sendo comparados.
• Linhas: Representam os atributos ou funcionalidades.
• Coluna Principal: A primeira coluna à esquerda contém os rótulos/cabeçalhos dos atributos.

2. Categorizar e Agrupar Atributos

Evite a "Fadiga de Comparação" organizando as linhas em clusters lógicos:

• Seções: Agrupe atributos relacionados (ex.: "Desempenho", "Conectividade", "Garantia").
• Capacidade de Recolher: Permita que os usuários recolham/expandam seções para focar em critérios específicos.
• Distinção Visual: Use mudanças sutis de fundo ou bordas para separar as seções.

3. Padronizar a Visualização de Dados

Aplique uma linguagem visual consistente para diferentes tipos de dados:

• Booleanos: Use marcas de verificação (✓) de alto contraste para inclusão e um travessão (—) ou estado vazio para exclusão.
• Avaliações: Use escalas de ícones consistentes (ex.: 5 estrelas).
• Texto com Nuances: Use um tamanho de fonte menor e legível para descrições, garantindo que o comprimento da linha seja gerenciado dentro da célula.
• Destaques: Diferencie visualmente as células onde um item claramente supera os outros (use com cautela para manter a neutralidade).

4. Implementar Contexto Fixo (Orientação)

Garanta que o usuário nunca perca o que está olhando:

• Cabeçalhos de Coluna Fixos: Mantenha os nomes e fotos dos itens visíveis no topo da janela de visualização conforme o usuário rola para baixo nas linhas.
• Cabeçalhos de Linha Fixos: Para matrizes largas no desktop, mantenha os rótulos dos atributos visíveis à esquerda conforme o usuário rola horizontalmente.

5. Planejar a Adaptação para Dispositivos Móveis

Matrizes são inerentemente horizontais; adapte-as para telas verticais:

• O Padrão "Seletor": Mostre a lista de atributos e 1–2 itens por vez, usando um menu suspenso ou interação de deslizar para alternar quais itens estão visíveis.
• O Padrão "Cartão Vertical": Transforme a matriz em uma sequência de cartões, repetindo os rótulos dos atributos para cada cartão (recomendado apenas para comparações muito simples).

Regras de Decisão

• A Regra dos Cinco: Limite o número máximo de itens em uma matriz lado a lado para 5 no desktop para evitar sobrecarga horizontal.
• Relevância do Atributo: Inclua apenas atributos que diferem entre pelo menos dois itens no conjunto. Se todos os itens tiverem o mesmo valor, considere mover essa informação para uma seção compartilhada "Funcionalidades Globais".
• Destaque do Cabeçalho: Os cabeçalhos dos itens (Coluna 1, 2, etc.) devem incluir uma pequena imagem do produto para fornecer reconhecimento visual instantâneo.
• Estados de Hover nas Linhas: Use um fundo de hover distinto para toda a linha para ajudar o olho a acompanhar as colunas.

Restrições

• Acessibilidade: Os cabeçalhos de linha devem ser devidamente associados às células usando scope="row" e scope="col". Garanta alto contraste para marcas de verificação e ícones. Cabeçalhos de linha/coluna fixos não devem obscurecer o indicador de foco do teclado de células ou controles abaixo deles (WCAG 2.2 SC 2.4.11). Qualquer alternador de itens ou controle suspenso no celular deve atender ao tamanho mínimo de alvo de 24x24px (SC 2.5.8).
• Responsividade: A rolagem horizontal deve ser intencional (ex.: dentro de um contêiner) e não quebrar o layout global da página.
• Peso Visual: A "Coluna Principal" (atributos) deve ter um tratamento visual ligeiramente diferente (ex.: fundo cinza claro ou texto em negrito) para se distinguir dos dados.

Padrões Comuns de Falha

• O Problema do "Cabeçalho Perdido": Rolar para baixo em uma matriz longa e esquecer qual item é qual.
• Sobrecarga de Atributos: Exibir 50+ linhas sem categorização, tornando impossível encontrar informações específicas.
• Compressão em Dispositivos Móveis: Tentar encaixar 4 colunas em uma tela de celular, tornando o texto ilegível.
• Símbolos Ambíguos: Usar ícones personalizados para "Sim/Não" que os usuários não entendem imediatamente.
• Alinhamento Inconsistente: Misturar ícones centralizados com texto alinhado à esquerda dentro da mesma coluna.

Critérios de Validação

• Os cabeçalhos dos itens permanecem fixos no topo da janela de visualização durante a rolagem vertical.
• Os atributos são agrupados em seções lógicas e recolhíveis.
• Os tipos de dados (Booleano, Avaliação, Texto) usam uma linguagem visual consistente.
• A "Coluna Principal" é visualmente distinta das colunas de dados.
• A visualização móvel fornece um mecanismo claro para comparar itens (ex.: alternância de itens).
• Estados de hover nas linhas são implementados para auxiliar o acompanhamento horizontal.
• Todos os ícones e texto atendem aos requisitos de contraste WCAG AA (4,5:1).
• Os cabeçalhos fixos não obscurecem os indicadores de foco nas células ou controles (WCAG 2.2 SC 2.4.11).
• Os controles de alternância de itens no celular atendem ao tamanho mínimo de alvo de 24x24px (WCAG 2.2 SC 2.5.8).