4 Lições de design cognitivo para dashboards.

em set 17, 2014:por

Victor Ferrante

Victor Ferrante é formado em Publicidade e Propaganda pela PUC-SP, fascinado por e-Commerce e design. Colaborador da eNext e NextEcommerce.
Views202
Design-Cognitivo-para-Dashboards

Há pouco tempo a eNext lançou no mercado seu Dashboard para análise de KPIs, no qual eu fui responsável pela construção de identidade visual, e vim aqui compartilhar 4 lições que aprendi no processo de desenho do layout, fluxo de navegação e usabilidade.

1. Siga as leis da Gestalt.

A gestalt nos oferece uma série de leis que exemplificam como o cérebro percebe ou cria padrões e desenvolve conclusões das coisas que nossos olhos enxergam. A aplicação dessas leis, em qualquer coisa que fazemos, e principalmente quando lidamos com tabelas, gráficos e visualização de dados; ajudam, e muito, o cérebro a identificar os padrões em seus dados. Segue 2 leis que acho essencial para qualquer análise de dados:

Lei de Prägnanz:

Essa lei parte do princípio de que o cérebro tende a processar padrões simples (regulares, pares, ordenadas) mais rapidamente do que padrões complexos. Para ilustrar, imagine os 2 gráficos abaixo, em qual deles é mais rápido ver o top performance?

Design-Cognitivo-para-Dashboards:Lei de Pragnanz 1Design-Cognitivo-para-Dashboards:Lei de Pragnanz 2

Sem sombra de dúvidas no segundo gráfico, você já sabe quem é o top só de bater o olho, enquanto no primeiro talvez demore alguns segundos para perceber quem se destacou no período. Nesse caso, quando os dados são baseados em nomes/categorias é uma ótima ideia alinhá-los em ordem ascendente/descendente.

Design-Cognitivo-para-Dashboards:Lei de Pragnanz 3

Lei do ponto focal:

Essa lei afirma que em qualquer apresentação visual objetos distintos criam pontos focais. Por exemplo para focalizar a atenção de seu usuário em um dado específico, você pode criar um ponto focal utilizando-se de cores contrastantes.

Nesse gráfico indubitavelmente o primeiro lugar que você vai olhar será a barra amarela, logo seu foco será a quantidade de vendas chinesas (no exemplo)

2. Leve em consideração a ‘Memória de curto prazo’

De acordo com a HCI (Human-Computer Interactions) Community, devido às (infelizes) restrições da memória humana, o fluxo de interações em toda página da web devem ser desenhadas para minimizar a memória de curto prazo. Uma vez que a “Recuperação de Informação de Memória” (a RIM é a capacidade que o cérebro humano tem de identificar lugares, eventos, objetos ou pessoas já vistas) se sobrepõe à memória fotográfica (habilidade que o cérebro tem de se lembrar de imagens, sons ou objetos precisamente em alguns minutos) o dashboard deve prover toda a informação necessária para o usuário fazer uma análise específica na tela. Toda informação PRECISA estar ali, disponível, num piscar de olhos. (caso queiram saber mais sobre a psicologia)

3. Dê ênfase à leitura.

Para fazer qualquer tipo de análise, seja ela utilizando um dashboard ou uma tabela, o usuário precisa ter a capacidade de identificar e possuir estímulos visuais confiável e rapidamente. A interface deve funcionar como direcionadora do processo visual, ela deve guiar os olhos e não confundí-lo.

Design-Cognitivo-para-Dashboards: Dê ênfase para leitura

Nesse caso fica explícito o que quero dizer, apesar de muitas vezes a utilização de padrões, texturas e fotografias como fundo ser interessante visualmente, é indiscutível que a leitura fica prejudicada. Para ter uma leitura fácil, coesa e concisa o contraste entre fundo e texto deve ser forte.

Outra coisa a se pensar nessa categoria é a ideia de que nem todos os dados possuem o mesmo valor, é necessário mostrar ao usuário qual bloco de dados é mais importante/interessante para específico objetivo. É óbvio que a informação mais importante deve ficar antes da dobra da página (visível antes do primeiro scroll), e com maior contraste.

 

4. Faça uso de representações gráficas.

Design-Cognitivo-para-Dashboards:Faça uso de representações gráficas
Nós estamos condicionados à visualização. Não importa se é uma tabela lotada de números e dados em perspectiva, ou se é um infográfico todo colorido cheio de ícones ou qualquer coisa que ajudam a sobrepor as limitações do nosso cérebro, nós realmente valorizamos mais uma imagem do que palavras, como todos nós já ouvimos pelo menos uma vez na vida: uma imagem vale mais do que mil palavras.

Para facilitar a compreensão das categorias faça uso de ícones, somados a uma ou duas palavras que explicam ou adicionam significado umas as outras, elas devem ser independentes, mas ao mesmo tempo com significados sobrepostos, no caso da Sprout Social, o ícone de Mensagens é um envelope: Fica bem claro (para nós) que mesmo que não houvesse a palavra mensagens, aquele botão nos levaria para um lugar onde o foco é a comunicação. O mesmo acontece caso tiremos o envelope: somente a palavra Mensagens já possui significação própria, mas um somado ao outro acaba com as ambiguidades que possam ser encontradas.

Deixe um comentário

O que achou do conteúdo? Compartilhe sua opinião:

Gostou do nosso conteúdo?

Deixe seu e-mail aqui e receba as novidades do mercado

eNext Dashboard

eNext Dashboard

SLI Systems

SLI Systems

Calendário

 
JUL 25