Produto de dado denso falha na hierarquia, não no volume

Um produto denso não falha por carregar dado demais. Ele falha porque mostra tudo com o mesmo peso. Se todo campo tem o mesmo tamanho, a mesma cor e o mesmo espaço, o olho não sabe por onde começar, e a tela deixa de informar.

Hierarquia é decisão sobre importância

O Nielsen Norman Group define hierarquia visual (em inglês) como a estrutura que conduz o olho aos elementos mais importantes da página. Ela se constrói por cor e contraste, por escala e por agrupamento.

Numa tela densa, a decisão é quais três números conduzem a próxima ação. O resto dá apoio. Se nada fica em segundo plano, nada ganha destaque.

O mesmo artigo (em inglês) resume a ideia numa linha. Se tudo tem contraste, nada se destaca.

Peso e espaço antes de cor

A hierarquia depende de duas ferramentas: peso da tipografia e espaço.

O peso marca o número principal da linha, e a linha principal do grupo. O espaço separa grupos, porque elemento com mais área livre ao redor é lido como uma unidade. É o princípio de proximidade e região comum (em inglês), do mesmo artigo.

O Nielsen Norman Group (em inglês) recomenda no máximo três tamanhos de tipo e no máximo três variações de contraste num design complexo. Tela densa que respeita esse orçamento gasta cor em exceção, não em estrutura.

O custo da cor como camada única

A WCAG 2.2, critério de sucesso 1.4.1 no nível A (em inglês), determina que a cor não é usada como o único meio visual de transmitir informação.

Duas consequências valem para tabela. A primeira: célula verde e célula vermelha não dizem nada sozinhas, porque cor precisa de um segundo canal, que é o valor, a palavra, a seta. O Nielsen Norman Group (em inglês) registra que até 4,5 por cento da população geral tem alguma forma de daltonismo.

A segunda: cor não ordena valor. O mesmo artigo (em inglês) observa que as pessoas não percebem cores diferentes como estando numa sequência, então cor codifica categoria e nunca magnitude. Gradiente entre células pede ao leitor que ordene o que o olho não ordena.

Os dois artigos do NN/g divergem sobre quanto trabalho a cor pode fazer. O texto de hierarquia visual (em inglês) usa cor saturada para marcar o que importa. O texto de painéis e gráficos (em inglês) mantém a cor em papel secundário, reforçando o que outro canal já disse.

Cor também gasta atenção. Paleta de seis tons de alerta numa tela não deixa espaço para a linha que importa.

Agrupamento define o caminho de varredura

Agrupe colunas relacionadas e separe os grupos com espaço, não com borda. Espaço pesa menos que linha e funciona melhor em tela pequena.

O Carbon Design System (em inglês) orienta colocar tabela de dado na área principal de conteúdo, com espaço suficiente para exibir o dado sem truncar. Ele também alerta contra aninhar tabela dentro de tabela, ou dentro de contêiner que force truncamento. Tabela espremida não é tabela densa. É tabela quebrada.

Filtro e ordenação fazem parte da leitura

Filtro é como o leitor faz uma pergunta à tabela. Ordenação é como o leitor encontra o extremo.

Os dois pertencem ao ciclo de leitura, então os dois ficam visíveis ao lado do dado, com o estado ativo nomeado em palavras. Quando o filtro fica escondido atrás de um ícone sem rótulo, ler a tabela vira configurar a tabela.

Jakob Nielsen (em inglês) descreve a divisão. Tudo que o leitor precisa com frequência fica no primeiro nível, e a visão principal não pode carregar opção demais, ou deixa de concentrar atenção. Ele também observa que designs com mais de dois níveis de divulgação costumam ter usabilidade baixa.

Quando o filtro não devolve nada

Resultado vazio é estado da interface, não erro do leitor.

Kate Kaplan (em inglês) nomeia três funções do estado vazio: comunicar o status do sistema, ensinar o sistema e oferecer caminho direto para a tarefa principal.

Três casos pedem três mensagens. Ainda não existe dado. O dado existe e o filtro o excluiu. O filtro em si é inválido.

Cada caso pede a própria saída: criar o primeiro registro, limpar o filtro, corrigir o termo. Um painel em branco com um zero faz o leitor achar que o produto quebrou, e ele acredita no que vê.

Densidade de linha

Altura de linha é decisão de leitura, não preferência de estilo.

O Carbon (em inglês) mantém a linha de cabeçalho e as linhas de corpo na mesma altura, e alerta contra misturar alturas. Ele recomenda a altura extra grande só quando a linha carrega duas linhas de conteúdo.

Linha mais apertada encaixa mais contexto numa tela e separa menos as linhas. Um filete leve ou um fundo alternado devolve a linha sem dar peso ao texto. O guia de espaçamento e grade aplica a mesma regra à tela inteira.

Alinhamento de número

Número se lê dígito por dígito, então se alinha à direita. Texto fica à esquerda.

O GOV.UK Design System (em inglês) implementa isso com um formato de célula numérica, que alinha as colunas numéricas à direita.

Dois detalhes fecham o alinhamento. Decimais se alinham no separador, e a unidade fica no cabeçalho em vez de repetir em cada célula.

Leitura em tela pequena

O GOV.UK Design System (em inglês) oferece uma classe que reduz o tamanho do texto em tela pequena quando a tabela carrega muito dado, para cada valor ter mais área livre ao redor. A mesma página alerta contra usar a classe em tabela com pouco dado.

Menos colunas vence fonte menor. Fique com as duas ou três colunas que respondem à pergunta principal e leve o resto para o detalhe da linha.

Jakob Nielsen (em inglês) coloca adiar material secundário como diretriz central de design para mobile. A tela estreita é onde a decisão de hierarquia aparece.

Quando a tabela densa é a resposta certa

A tabela vence quando o leitor precisa do valor exato, quando a comparação corre em dois eixos e quando a exceção é o ponto.

O gráfico vence quando a pergunta é forma ou magnitude. O Nielsen Norman Group (em inglês) observa que visualização deve usar comprimento e posição em duas dimensões para comunicar informação quantitativa rápido. Uma barra responde qual valor é maior mais rápido que quarenta linhas.

O gráfico perde o valor exato. Ler uma barra até o terceiro dígito é chute. Então a alternativa visual perde em três casos. O leitor consulta um campo por linha, os valores são próximos e a ordem importa, ou o número vai ser digitado em outro lugar.

A tabela densa também é a resposta preguiçosa em dois casos. Primeiro, quando a pergunta é um agregado único que uma linha resolveria. Segundo, quando ninguém vai abrir uma linha.

O pior caso é usar a tabela para fugir da decisão sobre o que importa. É a mesma falha da tela sem hierarquia, com outra cara.