Densidade de informações em SaaS B2B: projetando painéis para usuários avançados e novatos
Como projetar painéis e tabelas B2B densos que os especialistas possam verificar rapidamente sem sobrecarregar os novos usuários: modos de densidade, hierarquia, divulgação progressiva.
Ponto principal
Interfaces densas não são o problema; os desorganizados são. Os especialistas querem mais informações por tela, então forneça-as com uma hierarquia forte, alinhamento consistente e gráficos que usem posição e comprimento. Proteja os novatos com padrões sensatos e divulgação progressiva e deixe as pessoas escolherem um nível de densidade, como fazem sistemas de design como o Carbon para tabelas.
A densidade é um recurso para especialistas
Pessoas que usam uma ferramenta B2B o dia todo, como analistas, agentes de suporte e operadores, muitas vezes preferem ver mais de uma vez, porque rolar e alternar entre guias lhes custa tempo. Tornar tudo espaçoso para obter uma captura de tela limpa pode tornar o trabalho mais lento. O objetivo é obter informações densas, mas fáceis de digitalizar.
Deixe as pessoas escolherem a densidade
Os sistemas de design agora incorporam densidade aos componentes. A tabela de dados Carbon da IBM, por exemplo, oferece cinco alturas de linha, desde extra pequena (24px) para layouts altamente densos até extragrande (64px) para digitalização mais fácil, com médio (40px) como padrão.
- Oferece duas ou três configurações de densidade, lembradas por usuário.
- Altere o espaçamento e a altura das linhas, não o tamanho da fonte ou o contraste.
- Mantenha os alvos de toque grandes o suficiente em dispositivos sensíveis ao toque, independentemente da densidade.
A hierarquia torna a densidade legível
Nielsen Norman Group define painéis como visualizações que fornecem informações rápidas sobre as quais as pessoas podem agir rapidamente e recomenda a codificação de quantidades com comprimento e posição 2D, que as pessoas leem mais rapidamente. Na prática: coloque os poucos números que orientam as decisões no topo, alinhe tudo em uma grade, use cores apenas para significado (status, alertas) e alinhe os números à direita para que possam ser comparados.
Proteja os novatos sem atrasar os especialistas
A divulgação progressiva mantém as opções avançadas disponíveis, mas fora do caminho. Inicie novos usuários com uma visualização padrão focada, deixe-os adicionar colunas, filtros e widgets conforme necessário e salve visualizações para que os especialistas possam retornar à sua configuração densa instantaneamente.
Movimento em interfaces densas
Em telas com muitos dados, o movimento deve explicar a mudança, não decorar: destacar um valor que acabou de ser atualizado, animar uma linha em sua nova posição classificada ou mostrar uma transição de gráfico para que as pessoas possam acompanhar o que foi movido. Seja breve e evite animações contínuas que concorram com os dados.
Princípios-chave para lembrar
- Os especialistas se beneficiam de telas densas; desorganização é o verdadeiro problema
- Ofereça configurações de densidade alterando o espaçamento, não o tamanho ou o contraste do tipo
- Use comprimento e posição para números; cor apenas para significado
- A divulgação progressiva protege os novatos
- Use o movimento para explicar mudanças nos dados, não para decorar
Perguntas frequentes
Fontes
- Data table usage — Sistema de Design de Carbono (IBM)
- Dashboards: Making Charts and Graphs Easier to Understand — Nielsen Norman Group
- Progressive Disclosure — Nielsen Norman Group