Como explorar suas métricas sem complicar a vida do seu usuário (e a sua).

Todo mundo está explorando diferentes maneiras do que fazer com seus dados. Dashboards, Analytics, Big data, Data Visualization — esses termos vêm sendo cada vez mais usados no cenário digital, mas ainda é fácil se perder na hora de desenhar tanta informação.

Aqui vou mostrar alguns exemplos de práticas que podem melhorar bastante o processo de criar interfaces orientadas a esses dados.

1. Organize suas ideias

"Tudo muito lindo, mas cadê os dados A, B e C?" — cliente

Ta aí uma frase muito fácil de ouvir quando seu design não está alinhado com as expectativas do seu usuário. Mostre o que ele precisa ver primeiro, e estruture o resto da sua interface baseado na história do usuário ou na sua arquitetura de informação.

Pense na ideia de “moldar a página”. Quando você começa com uma distração ou dados que não são relevantes, sua audiência terá problemas para identificar não só o que cada elemento significa, mas também o contexto inteiro da página.

Estruture seus dashboards. Pense: que história estou contando com essa informação? Isso é um princípio importante a se pensar quando se pensa em UX. O que sua audiência irá entender quando ver essa informação? Como irá se comportar?

Se a métrica A é a mais importante para meu usuário, é necessário colocar mais 4 métricas competindo espaço ao lado, ou é melhor focar o dashboard para que o cliente tenha uma melhor leitura e interpretação da métrica principal?

Planeje uma storyline para a interface. Dê prioridade para organizar informações de modo que seja relevante para quem usa. Evite colocar muitas informações espalhadas para disputar a atenção do leitor.

Com uma rápida olhada em sites de design, a gente consegue ver uma infinidade de dashboards lindamente desenhados, mas a grande maioria têm, ou muita (muita mesmo) ou pouca informação. Ou são grandes conjuntos de widgets com dados e métricas sem hierarquia nenhuma, ou gráficos mais desenhados do que os dados precisam.

A informação da sua interface precisa passar por uma seleção do que é mais importante (e relevante) e o que pode atrapalhar na análise do projeto.

É difícil olhar um dashboard com várias informações, parecendo um painel de controle da Nasa. Existe lugar para todos tipo de customização, mas as vezes, visualizar tudo ao mesmo tempo pode ser desnecessário (e confuso).

Resumindo: estruture sua informação de forma mais pertinente e foque o seu design nos pontos chave e depois dê prioridade para informações secundárias.

2. Diferentes informações para diferentes usuários

É muito fácil se perder em meio de muitos gráficos, números e indicadores. Dispor suas informações e seu layout focando nas suas personas ajuda você (e seus clientes) a se concentrar nos pontos mais relevantes do projeto de forma mais hábil e assertiva. Utilizar personas ao montar o designs irá ajudar a guiar decisões sobre vários aspectos do produto (navegação, interação e até mesmo o visual).

Uma das primeiras coisas a se fazer na hora de criar um dashboard de informações é identificar logo de cara quais personas são ideais para serem trabalhadas e organizar a arquitetura de informação do seu projeto focado nelas.

Analistas, gerentes, executivos, consultores são tipos comuns de personas que têm o seu próprio fluxo de trabalho e necessidades diferentes com a informação.

Tipos distintos de usuários têm necessidades de informações diferentes para atingir seus objetivos. Abaixo temos uma amostra de como moldar a informação e disponibiliza-la de forma que atenda as necessidades de cada tipo de usuário de uma mesma plataforma:

Note como o conteúdo de cada dashboard demostra as informações de forma mais pertinente para cada persona, focando nos seus objetivos.Note como o conteúdo de cada dashboard demostra as informações de forma mais pertinente para cada persona, focando nos seus objetivos.

3. A melhor visualização

Uma das coisas que mais encontramos online são designs que usam gráficos só para favorecer a estética do layout, de forma não estratégica. E essa tendência continua crescendo. Não é difícil encontrar gráficos de pizza que deveriam ser barras, ou barras que deveriam ser linhas e por aí vai.

Claro, orientar esses dados e transformar-los em uma interface atraente e de prática leitura não é uma tarefa fácil. É demorado, complicado e garantido que vamos passar bem mais horas organizando as informações do que finalmente desenhando interfaces e dashboards.

Mas sem balde de água fria — Aqui vão algumas dicas para desenhar esses dados um pouco melhor:

Mãos na massa

Ah a grande planilha do excel… Não é a coisa mais sexy do mundo (e provavelmente o terror de muitos designers), mas sem dúvida o melhor lugar pra começar.

Cair de cabeça na planilha, e gastar algumas horas do seu planejamento para garimpar esses dados vai te ajudar a começar a pensar nas relações que cada métrica tem e como elas se comunicam entre si.

De novo, não é a parte mais fácil do processo, mas não tenha medo de mexer e cruzar todas as informações, achar padrões, revirar todos os aspectos desses dados. Leva tempo mas vale a pena. É nessa parte que começam a surgir as ideias.

Depois de um tempo, a gente percebe que alguns tipos de gráficos funcionam melhor com certos tipos de informações. Mas como saber isso?

O melhor jeito é analisar os seus dados. Um exemplo pegando dois tipos básicos de informações:

Temos os dados discretos (discrete data), que são informações que só levam valores fechados e pode haver um infinito número de valores. Tipo a quantidade de curtidas em uma publicação, ou o total de visualizações em um vídeo.

E temos os dados continuos, que representam dados que são medidos, tipo o peso de uma pessoa, ou aumento da temperatura durante o ano.

Gráficos em barras representam melhor informações quantitativas, deixando os valores ser interpretados de forma mais rápida e objetiva. Enquanto isso, gráficos em linha conseguem demonstrar melhor o crescimento e dinamismo de uma informação, sendo melhor em dados continuos.

4. Dentro ou fora da caixa?

Por fim, todo designer chega naquela pergunta: O que eu faço?

Trabalhando com todas essas interfaces recheadas de informações, constantemente me pergunto como posso melhorar o modo de dispor esses dados. Algumas vezes parece que gráficos de barra, linha e pizza são ideais para certos tipos de métricas, mas podem passar uma sensação de “normal demais” ou de caminho mais seguro.

Um gráfico simples

Claro, existem tipos de gráficos que são “pau pra toda obra” e tem os best fit. Barras e linhas acomodam bastante tipos de dados, mas são genéricos e todo designer adora “sair da caixa”.

Pessoalmente eu acredito que a customização de gráficos pode sim melhorar a interação do usuário com a interface, desde que o design não vá muito além do que a informação permite.

como dizem por aí: Less is more.

Por exemplo, o pessoal do Information is Beautiful consegue melhorar bastante o display das informações em um gráfico de um modo bem simples e interativo:

http://www.informationisbeautiful.net/visualizations/based-on-a-true-true-story/

Nesse gráfico de barra, eles conseguem mostrar a percentagem de um filme que é baseado em fatos reais e ao mesmo tempo mostra qual parte do filme essa cena pertence.

http://www.informationisbeautiful.net/visualizations/senseless-conflict-deaths-per-hour/

Nesse outro gráfico, temos uma abordagem diferente demonstrando uma perspectiva visual sofisticada e ao mesmo tempo, uma interpretação rápida e assertiva das informações. Vale a pena notar como essa disposição torna prático a comparação dos dados presentes.

É importante pensar na customização da visualização quando os dados precisam (mas é sempre bom ter um plano B caso seu usuário não esteja preparado para uma abordagem mais sofisticada).

5. Mas e aí?

Mas então pra que a gente coloca todas essas informações na tela? — Para as pessoas tomarem decisões, investigar, prever o futuro, o que seja. O ponto é: Seu usuário não tá ligando para cores bonitinhas ou interações legais nos seus dashboards, ele quer fazer o trabalho dele.

Então o negócio é o seguinte: depois que você colocar tudo em tela, tudo bonitinho e tal, se pergunte — Mas e aí? — repare cada gráfico, widget, informações e tire algumas conclusões disso sobre o seu design. Se achar que algo não é importante, ou "tanto faz", é um sinal para repensar as informações que estão lá, e simplificar.

Acontece de fazer um dashboard que parece um "mission control" da NASA, mas o questionamento do seu cliente é: quero saber se minha estratégia funciona. Onde que vejo isso? ou Preciso dos Kpis A B e C, cadê eles?

Nesse ponto você percebe que deu uma viajada no job.

As vezes tudo que o seu cliente precisa é um display simples, claro e direto mostrando "Você economizou x% nesse mês" e abaixo algumas informações secundárias que o ajudam a tomar decisões focadas na primeira informação. Mas claro, lembre-se que existem várias personas para considerar quando está criando.

Para você que só viu as imagens e pulou até o final:

Design é um trabalho de balancear suas idéias e informações focando no seu usuário.

Foque em apresentar seus dados de modo interessante, mas sem distrações desnecessárias.

Organize suas idéias e objetivos para não se perder na bagunça.

E escolha o melhor gráfico para representar seus dados para simplificar o trabalho e atingir as expectativas do seu usuário final.

research, draw, create, repeat. UX @ Hotmart

research, draw, create, repeat. UX @ Hotmart