Gráfico de fatores-chave: o maior desafio de escolha de cores até hoje

Expressar uma informação sem texto e só com imagens é como brincar de Imagem & Ação com gestos. Esse é o desafio de um gráfico.

Esse é o Gustavo Silva, colírio da Tracksale, brincando de Imagem & Ação durante nosso evento de apresentação dos resultados do Q4. Na cena, ele faz gestos para a palavra “gráfico”, e alguém adivinha bem rápido.

No processo de criar um gráfico de fatores-chave para nosso produto (Se você ainda não conhece este gráfico, estamos preparando um vídeo e um artigo que vai explicar tudo a respeito), nos deparamos com um desafio: as cores.

Nossa primeira iteração estabeleceu cores sólidas para cada um dos quadrantes do gráfico. Além disso, as categorias (consideradas fatores-chave) também seriam preenchidas com as cores definidas pelos usuários.

Iteração 1: Proposta inicial do gráfico de fatores-chave. Muitas cores, pouco contraste, muita informação.

Esta abordagem de cores trazia uma série de problemas:

1. As cores utilizadas passavam a impressão de algo amador, o que preocupou principalmente a nossa equipe de data science. O gráfico de fatores-chave traz informações extremamente valiosas, e cores ao estilo jardim-de-infância certamente tirariam a sua “seriedade”;
2. Havia cores demais, trazendo a sensação de muita informação;
3. Sérios problemas de contraste entre os rótulos do gráfico e os backgrounds de cada quadrante;

Em um trabalho conjunto com Amir Khatibi, data scientist da Tracksale, e a equipe de Sucesso de Cliente, criamos uma nova proposta para o gráfico:

• Deslocamos os rótulos de cada quadrante para seus pontos mais extremos, assim como notamos em um de nossos concorrentes;
• Abrimos mão de amarelo e azul e tentamos utilizar apenas vermelho e verde

Iteração 2, após trabalho em conjunto. Gráfico mais sóbrio, porém inacessível para pessoas daltônicas.

Eis que o próprio time de Customer Success levanta uma questão importantíssima: as cores não funcionariam para pessoas daltônicas, pois muitas delas não conseguiriam perceber uma diferença relevante entre as cores vermelha e verde. Além disso:

1. Continuamos sem resolver o problema de muitas cores;
2. O gráfico, que antes parecia “infantil” demais, agora soava muito sério. Além disso, não havia uma explicação para as cores mais escuras no topo;

Então, pensamos em utilizar gradientes para cada um dos quadrantes, de forma que as cores, à medida que se aproximavam do centro do gráfico, convergissem à cor branca:

Iteração 3: key drivers com quatro quadrantes: verde, azul, amarelo e vermelho (em sentido horário).

Porém, esta abordagem trazia alguns problemas:

• Falta de fidelidade de cor: ao testarmos em monitores e ângulos de visão diferentes, as cores simplesmente sumiam;
• Ainda havia muitas cores: não conseguimos reduzir o número de cores;

Nós fizemos um benchmarking de alguns concorrentes. O concorrente S, por exemplo, aplica basicamente 3 cores: azul para as categorias, e dois verdes (que formam um gradiente). Se resumir a 3 cores era o que precisávamos, mas o gradiente formado apenas por cores verdes não iria expressar, por exemplo, as partes mais críticas (Priorizar e Planejar).

Porém, notamos que havia problemas com certas cores, por causa da taxa de contraste. Após alguns ajustes, chegamos a esta etapa:

A conclusão é: Keep It Simple, Stupid. Mais que entender a importância da simplicidade, nós percebemos que costumamos complexificar demais a vida e, portanto, não conseguimos tomar decisões. Quando damos um passo para trás e nos abrimos para soluções simples, conseguimos tomar decisões.

5 dicas na hora de apresentar dados visualmente

1. A forma como apresentamos dados faz parte do nosso branding;
2. O foco sempre tem que ser simplicidade: elimine distrações;
3. Legendas e linhas dos eixos nem sempre são necessários;
4. Exiba dados de forma resumida. Informação demais não informa;
5. Mais que textos ou gráficos, precisamos deixar o conceito claro.

Dicas de inspirações e melhores práticas

Recomendamos fortemente que você leia o artigo Practical Rules for Using Colors in Charts, do Stephen Few. Neste artigo, Stephen trouxe exatamente o que nós precisávamos para decidir como iríamos aplicar as cores em gráficos.

Outro link recomendado é o Trendy Web Color Palettes and Material Design Color Schemes & Tools, onde você encontra inspirações de paletas de cor. Já o artigo The Underestimated Power Of Color In Mobile App Design, da Smashing Magazine, traz conceitos importantíssimos da teoria de cores, e como eles podem ser aplicados principalmente em aplicativos mobile.