Principais exemplos de visualização de dados e designs de painel
Publicados: 2022-03-11A visualização de dados e o design de painéis são arte e ciência e não são tão fáceis de criar quanto podem parecer à primeira vista. Como os principais designers de UX e designers visuais ilustram informações complexas sem confundir os usuários?
Três maneiras: uma melhor compreensão dos princípios de UX por trás de um bom design de painel, a aplicação da excelência gráfica e a prática.
O design do painel UX segue princípios específicos e melhores práticas. A excelência gráfica, por outro lado, requer um exame mais aprofundado.
A excelência gráfica é definida como:
- Uma apresentação bem projetada e eficiente de dados interessantes.
- Ideias complexas comunicadas com eficiência, clareza e precisão.
- Dando ao espectador o maior número de ideias, exigindo o mínimo de tempo em um pequeno espaço e usando a menor quantidade de tinta.
- Dizendo a verdade sobre os dados.
Um excelente recurso para uma melhor compreensão da excelência gráfica é o trabalho de Edward Tufte. Ele é considerado “O Leonardo da Vinci dos dados” e tem um grande número de trabalhos publicados, livros e palestras. David McCandless, que fundou o information is beautiful, um site que representa o que há de melhor em visualizações de dados e excelência gráfica, é outro excelente recurso.
Os princípios de design UX exemplar e excelência gráfica se aplicam tanto ao design do painel quanto às visualizações de dados. Aqui estão alguns dos principais exemplos de visualização de dados e design de painel.
Principais visualizações de dados
Março de 1812 de Napoleão
A visualização de Minard da marcha de Napoleão em 1812 é considerada um dos “melhores desenhos estatísticos já criados”: Criar uma visualização com tanta informação quanto Minard fez seria impossível se não fosse pela aplicação da excelência gráfica.
Esta visualização única mostra o número de tropas de Napoleão por localização, a temperatura experimentada pelas tropas e o caminho que as tropas fizeram de e para Moscou.
Mapa da Cólera de John Snow
Gráfico de 1854 de John Snow mostrando a localização dos 13 poços públicos de Londres e 578 mortes por cólera usando barras empilhadas perpendiculares à sua localização: é fácil de entender, revela a verdade nos dados e fornece ao usuário todas as informações necessárias para desenhar uma conclusão sobre as mortes por cólera.
História da música rock
Representando apenas uma fração de toda a visualização de dados, o gráfico abaixo mostra uma porção de mais de 30 estilos de música de mais de 700 artistas durante o período de 1955 a 1978.
Ele não representa apenas artistas e estilos, mas mostra influências, o volume de vendas de discos, categorias estilísticas e onde elas terminaram ou continuaram. Alcançar esse tipo de excelência gráfica não é pouca coisa.
Onde a população da Europa está crescendo e diminuindo
Uma visualização de dados top mostrando como lidar com uma imensa quantidade de dados de forma descomplicada, bem projetada e verdadeira. Há também filtros incluídos na versão interativa que permitem ainda mais exploração de dados, como taxas de natalidade.
Rotinas diárias de pessoas famosas icônicas
Essa visualização de dados não é apenas interessante, é um exemplo clássico de excelência gráfica. Em um único gráfico, podemos ver uma descrição detalhada dos hábitos diários, rituais, atividades e prioridades de pessoas famosas icônicas.
Usando um gráfico simples codificado por cores, essa visualização é fácil de entender, simples, eficaz e, acima de tudo, informativa.
Gráfico de idiomas do mundo
Esta visualização de dados clássica mostra o número de idiomas que existem no planeta, onde são falados e quem os fala em vários bolsões do mundo.
Sem um alto nível de excelência gráfica, seria difícil mostrar tantos dados de uma maneira tão elegante que também seja informativa e fácil de entender.
Principais designs de painel
Para que um dashboard seja considerado superior, ele deve atender a um conjunto de critérios específicos de UX:
- Convenções de nomenclatura claras e consistentes
- O fluxo e o layout dos dados priorizados
- As margens são adequadas para legibilidade
- Os dados não estão ocultos ou sobrecarregados
- Compreensível e fácil de ler
Painel de KPI de marketing
O exemplo abaixo é um excelente exemplo de como facilitar a compreensão de informações comerciais complexas. O esquema de cores restrito é agradável e o uso de cartões separados é suave aos olhos.
Uma das razões pelas quais este painel é um excelente design é sua relação de tinta de dados. Os dados e o espaço se complementam. Em vez de preencher a tela com mais gráficos, são usados cartões separados com pequenas abas. Essa é uma maneira engenhosa de manter as informações críticas disponíveis (ou seja, não escondê-las) ao mesmo tempo em que oferece ao usuário uma maneira fácil e instrutiva de visualizá-las em seus próprios termos.
Painel de listras
O painel Stripe é um excelente exemplo de práticas recomendadas de design de painel. É simples, responde às perguntas mais pertinentes do usuário e tem margens quase perfeitas em cada cartão.
Painel de telemedicina
A análise de telemedicina é conhecida por fornecer muitos dados brutos. Organizar esses dados em um painel significativo e informativo pode ser um desafio. Este exemplo usa as melhores práticas de UX de design de painel. As margens são duplicadas, as informações são apresentadas com perguntas e respostas e os dados não ficam ocultos.
Painel de ações
Os estoques podem ser difíceis de conceituar em um único painel devido ao número de pontos de dados competindo por espaço. Este exemplo de design de painel conseguiu obter uma aparência limpa e minimalista com todas as informações pertinentes na frente e no centro.
Painel de público-alvo da Web
O Google Analytics faz um ótimo trabalho com seus painéis; no entanto, pode ser necessária muita personalização para atingir um objetivo específico. Esse painel levou a análise a um novo nível, oferecendo uma visualização simples, fácil de entender, fácil de ler e útil, sem aumentar a carga cognitiva.
Painel de gerenciamento de documentação
Gerenciar documentos é difícil, mas mantê-los organizados e fáceis de navegar pode ser ainda mais difícil. Uma excelente solução é este painel que mantém as coisas simples, compreensíveis e surpreendentemente esparsas.
Mesmo com uma abordagem minimalista, este excelente exemplo de design de painel oferece ao usuário tudo o que ele precisa para entender e navegar no sistema de documentos.
Aplicativo de clima de semeadura de plantas - painel móvel
Este painel móvel é informativo e fácil de entender. Breadcrumbs ajudam na navegação e ícones com descrições de linguagem comum ajudam a criar um ótimo design de UX.
Painel de cartão de crédito – Painel móvel
Assim como os bancos, os painéis de cartão de crédito são notórios por UX ruim, especialmente em um dispositivo móvel. Este design de painel móvel muda em uma nova direção. As informações não são apenas bem organizadas, mas compreensíveis e ricas em recursos sem serem esmagadoras.
Visualização de dados superior e design de painel exigem excelência gráfica e compreensão e aplicação dos princípios de design de painel. Aplicados de forma congruente, os usuários se beneficiarão de visualizações de dados informativas e painéis que proporcionam uma experiência de usuário de alta qualidade.
• • •
Leia mais no Blog Toptal Design:
- Design do painel - Considerações e práticas recomendadas
- Visualização de Dados – Melhores Práticas e Fundamentos
- Inspire-se com essas visualizações de dados
- Atualize sua análise com essas inspirações de design de painel