QlikView

Design para QlikView: Erro 3 – Decorações inúteis

Uma ferramenta analítica não é um site institucional e não tem como principal objetivo demonstrar o quão atraente é a sua identidade visual. Não se preocupe em deixar a aplicação com a cara do site do cliente!

Com pouco tempo de uso da aplicação, mesmo clientes que exijam e gostem de visuais “atraentes” em um primeiro momento, vão cansar daquela interface cheia de adornos.

Fotos devem ser usadas apenas se forem essenciais para a interpretação dos dados e mesmo assim em tamanho reduzido. Exemplo: fotos de produtos diferentes para comparação de desempenho de vendas, etc.

Na imagem abaixo, as bordas, sombras e degradês dos fundos e dos medidores tipo “velocímetro” atrapalham a leitura dos dados.

tela-qlikview
A aplicação abaixo foi bem construída, porém a imagem de fundo atrapalha a visualização do mapa.

demo-qlikview

Cuide para não exagerar na hora de pensar no “look and feel” da aplicação. O ideal é que a interface seja o mais limpa possível, evitando que decorações carreguem demais o visual e acabem cansando o usuário.

Standard
QlikView

2 ferramentas gratuitas para ajudar no Design para QlikView

Depois de uma pausa de 10 dias para férias e 3 semanas seguidas viajando em função de projetos pela Toccato, estou retomando o blog com um post sobre dicas de ferramentas gratuitas que ajudam no trabalho de design de aplicações QlikView:

Greenshot

http://getgreenshot.org/
Fiquei sabendo desta ferramenta através do pessoal da Qlik. Serve para capturar “screenshots” de maneira personalizada, onde você pode escolher a seleção exata do que “printar” e salvar diretamente como png, jpg, mandar por email, copiar para a área de trabalho, etc. Uso bastante para fazer mockups das telas que serão desenvolvidas no QV.

ColorOracle

http://colororacle.org/
Simula a visão de uma pessoa com daltonismo, onde o tipo mais comum é aquele em que a pessoa não consegue distinguir verde do vermelho. Como 10% dos homens sofrem deste mal (1% apenas para as mulheres), é prudente considerar essas questões também no design das aplicações. Um agravante no caso do QlikView é que as seleções ativas, por padrão, ficam realçadas em verde.
Durante o desenvolvimento de uma aplicação sempre uso essa ferramenta para “scanear” as abas por inconsistências de cores. Como uso cores através de variáveis, quando encontro cores muito próximas (na visão de um daltônico), é só fazer um pequenos ajuste nas variáveis e pronto. É um pequeno detalhe que pode fazer toda a diferença para 1 em cada 10 homens.

Standard
Data Visualization, Tipos de gráficos, Visualização de Dados

Utilizando gráfico de dispersão no QlikView

Pesquisando sobre bons exemplos de visualização de dados no Brasil, encontrei este excelente estudo feito pela Época em 2011. Através do uso de um gráfico de dispersão, é possível identificar claramente a relação entre o investimento na campanha e o resultado das urnas nas eleições para Deputado Federal de 2010: quanto maior a arrecadação (em reais), maior a chance de o candidato se eleger. Os pontos marcados em vermelho representam candidatos eleitos em 2010.

grafico-de-dispersao-qlikview
Este objeto apresenta a possibilidade de alternar a visão entre “gráfico” e “tabela”, o que evidencia ainda mais o poder da visualização de dados. Perceba como a tabela não permite identificar essa relação de forma tão rápida quanto o gráfico.

grafico-de-dispersao-qlikview-tabela
De todo modo, o gráfico de dispersão pode ser melhorado, já que alguns pontos podem se sobrepor, escondendo valores.

Baixei os dados em Excel e construí o gráfico de dispersão usando o QlikView. Utilizando o “Nome” como dimensão e as expressões [Número de votos] e [Dinheiro arrecadado]. Na expressão [Número de votos] personalizei as cores dos pontos de modo que fiquem vermelhos quando o candidato foi eleito.

grafico-de-dispersao-qlikview-3

Para deixar os pontos vermelhos, coloquei um condicional na Cor de Fundo da expressão, conforme abaixo:   If([Eleito (1, eleito; 0, não eleito)]=1, RGB(255,0,0), RGB(100,100,100))

grafico-de-dispersao-qlikview-2

A opção de utilizar o círculos com borda está nas Propriedades do objeto, na aba “Estilo”.

grafico-de-dispersao-qlikview-3-instrucao
Uma alternativa seria utilizar os pontos preenchidos, mas usando um código “ARGB” (“A” de “Alpha”, ou transparência). Essa transparência permite ver quando os pontos se sobrepõem, como demonstrado na figura abaixo.

grafico-de-dispersao-qlikview-4

If([Eleito (1, eleito; 0, não eleito)]=1, ARGB(90,255,0,0), ARGB(90,100,100,100))

Note que tanto no gráfico original da Época, quanto nos meus exemplos, a escala do eixo Y é logarítimica (e não aritmética). Mas este é um assunto para outro post…

Standard
QlikView

Design para QlikView: Erro 2 – Usando poucas cores (ou cores demais)

Usar cores em excesso pode deixar seu painel de fato “bonito”…  e eventualmente arruinar com as melhores práticas de design para Business Intelligence. Da mesma maneira, deixar uma aplicação monocromática ou com tons “próximos” pode atrapalhar a leitura dos dados.

Para ilustrar o uso correto das cores na codificação da informação (no nosso caso, para BI / QlikView), vale citar uma frase famosa do Edward Tufte, um dos gurus no assunto:

“…avoiding catastrophe becomes the first principle in bringing color to information: Above all, do no harm.”

(em bom português: evitar uma catástrofe torna-se o primeiro princípio em trazer cor à informação. Acima de tudo, não cause danos.)

qlikview-cores-destaque

Usar muitas cores em uma aplicação pode deixar a leitura das informações mais importantes prejudicada.

Quando se trata de aplicações QlikView, as cores devem ser utilizadas para “entiquetar” e não para deixar os objetos “bonitos”. Para isso, defina categorias de informação, agrupadas por função e ordenadas por importância.

- Filtros e Informações de contexto (grid, eixos, labels, etc.) devem ter cores neutras (usualmente cinza);
- Botões devem possuir cor distinta dos demais objetos;
- Dados devem ter cores mais vibrantes ou com maior contraste (precisa “saltar aos olhos”;

No exemplos abaixo, o uso da cor pode ser melhorado…


qlikview-cores-1

- Azul escuro usado no fundo é o mesmo dos botões de seleção de topo;
- Gráficos minimizados na lateral são “botões” e têm a mesma cor dos títulos dos objetos (que não são botões);
- Gráficos abertos têm grid e eixos com cores fortes.

qlikview-cores-2

- Rótulos dos filtros com cores vibrantes (semelhante aos botões);
- Gráficos com degradê;
- Botões com a mesma função porém com cores diferentes;
- Indicadores de desempenho na tabela destacando elementos em demasia

Cores de fundo de uma aplicação QlikView

Em tempo, se você tem dúvida quanto ao uso de cores escuras ou claras para o background das suas aplicações, sugiro a leitura deste post. Em resumo, o artigo sugere que se use sempre cores claras (branco ou cinza claro, preferencialmente) e cores escuras somente se o seu painel for utilizado em ambiente escuro, o que não é comum.

Por último, mas não menos importante: evite utilizar gráficos de barras no modo “Multicolorido” quando for medir a mesma coisa. Deixar gráficos de barras com mais de um cor só faz sentido se você estiver usando medidas diferentes, ou ainda, se estiver usando cores específicas para uma categoria (valor de dimensão), por exemplo.

qlikview-graficos-multicolorados

 

Standard
QlikView

Design para QlikView: erros mais comuns

O QlikView é uma ferramenta de fácil manuseio e rapidez extrema na construção de interfaces. Tais características fazem da velocidade de desenvolvimento um enorme diferencial da ferramenta frente à concorrência, porém, para que “velocidade” não seja confundida com “pressa”, alguns conceitos de design não devem ser esquecidos.

Em uma série de 5 posts, ilustrarei os principais erros cometidos durante o desenvolvimento de aplicações em QlikView.

Erro 1 – Contraste: Destacando todos os objetos de forma igual

Se tudo o que é exibido na tela é primordialmente importante e tratado visualmente da mesma maneira, nada será destacado.

Ajude o usuário a focar seus olhos naquilo que é mais importante em uma aplicação QlikView: os dados

Defina manchas de contraste…

qlikview-erros-comuns-contraste-manchas

A área de maior contraste deve ser onde os dados são exibidos, sejam gráficos ou tabelas. Depois os Filtros e por fim o cabeçalho de identificação.

No exemplo abaixo, sem considerar cores e disposição dos elementos, o que mais prejudica esta aplicação é a falta de contraste adequado entre os elementos na tela. A dúvida que surge no usuário é: Por onde começar?

qlikview-erros-comuns-contraste-antes

Um ajuste simples no contraste e o usuário já sabe para onde olhar:

qlikview-erros-comuns-contraste-depois

Standard
Data Visualization, Visualização de Dados

Data-Ink Ratio: cada pixel na tela requer uma razão.

Edward Tufte introduziu um conceito em seu clássico livro de 1983 “The Visual Display of Quantitative Information” que ele chamou de “data-ink ratio“.

Quando dados quantitativos são apresentados na forma impressa, um pouco da tinta que aparece na página apresenta dados. Outro tanto de tinta apresenta o conteúdo visual que não é de dados.

 

data-ink-ratio-formula

 

Ele recomendou aplicar esse conceito como um princípio de projeto: “Maximize a proporção de tinta de dados. Cada pedaço de tinta em um gráfico requer uma razão”.

Este princípio aplica-se perfeitamente ao desenho de painéis digitais, o que chamou-se de “Data-Pixel Ratio” (Stephen Few)

A tabela abaixo tem baixo “data-ink ratio” (ou seja, “tinta” sobrando):

data-ink-ratio-tabela-1

Os mesmos dados podem ser exibidos com alto “data-ink ratio” (ou seja, quase não há “tinta” sobrando – ou ainda, quase tudo o que é desnecessário no objeto foi eliminado):

data-ink-ratio-tabela-2

 

O exemplo abaixo demonstra a aplicação do conceito em um gráfico de barras.

data-ink-ratio-grafico-2

Standard
Data Visualization

Portal da Transparência: nem tão transparente assim.

Depois de muito tempo sem acessar o Portal da Transparência do Governo Federal, resolvi dar uma conferida nos números consolidados de 2013.
Sem entrar na análise da interface gráfica do portal em si – que pode ser melhorada e muito – busquei encontrar uma visão geral dos números, sem entrar nos detalhes, por isso procurei logo por gráficos.

post-portal-transparencia-1

O Portal só traz gráficos relativos a quanto o Governo Federal repassa para o programa Bolsa Família, Transferências totais por Localidade ou por Função.
Fiquei curioso para ver como a União repartiu o bolo de dinheiro entre as Federações. A primeira frustração é ver que os dados de 2013 estão atualizados somente até Março. Me deti a uma análise no repasse de 2012. Como moro em Santa Catarina, logo me chamou a atenção que a região SUL recebeu somente 10% dos repasses de 2012. O Nordeste soma 37%.

post-portal-transparencia-2

Minha segunda frustração foi justamente quando busquei saber qual percentual cada região repassou para o Governo e então cruzar estas informações, afinal, o cidadão tem o direito de saber quanto sua região contribuiu para a União e quanto recebeu de volta. Nada. Não há informação em outra tela ou gráfico, e muito menos as duas informações consolidadas em um único objeto de análise, o que seria ideal.
Um exemplo de visualização desta informação está demonstrada na figura abaixo (dados fictícios) e foi construída usando o QlikView.

post-portal-transparencia-exemplo

Intencional ou não, esta falta de informação prejudica uma análise mais rica dos dados. A interface, navegação e os objetos de análise de dados utilizados também podem ser melhorados seguindo as melhores práticas (substituir o gráfico de rosca por barras; limpar bordas, grids e efeitos do gráfico de barras na análise ano a ano, e assim por diante).

A propósito, o portal disponibiliza informações sobre as Receitas da União, porém não por localidade, e não de forma gráfica, como mostra a figura abaixo.

post-portal-transparencia-3

Standard
QlikView

Design para o público certo: a importância do Briefing

Antes de iniciar o projeto de desenvolvimento de uma aplicação QlikView, é fundamental entender para quem estamos construindo a interface e o que se espera dela.

Normalmente, da parte do cliente, há inúmeras pessoas envolvidas em um projeto de app QlikView, desde a equipe de TI, equipe de negócios, diretores e gestores, até o responsável pelo projeto, ou seja, a pessoa que escolheu você ou a empresa onde você trabalha para prestar o serviço.

Com tantas pessoas envolvidas, não é raro encontrar o profissional que está desenvolvendo a aplicação tentando atender a todos. Mesmo que tenha sido levantada uma lista de requisitos e indicadores a serem considerados, é fundamental para o sucesso do projeto detalhar o grau de importância de cada um destes indicadores com quem de fato irá usar a aplicação.

Para ajudar a identificar estas questões, é recomendável fazer um briefing com o cliente. Possíveis perguntas são:

  • Qual é o perfil do público? (cargo, faixa etária, familiaridade com softwares de gestão, etc)
  • Como o público lê as informações atualmente? (se utilizam outro softwares, planilhas, etc.)
  • O público tem familiaridade com o QlikView?
  • Qual a resolução de tela mais utilizada?
  • Quais os dispositivos a serem considerados? (smartphones, tablets, etc.)
  • Existe identidade visual da marca do cliente?
  • Quais as principais perguntas que os usuários farão? (pelo menos de 3 a 4 perguntas por aba)
design-briefing-qlikview

Imagem: Divulgação / QlikTech

O briefing visa esclarecer pontos sobre o perfil do público final, os principais questionamentos que este público fará (os quais a aplicação deve responder de forma rápida e simples), referências gráficas para desenvolvimento do estilo visual, dentre outros. Ter estas respostas documentadas é importante para que, ao final do projeto, sejam revisadas. Quanto mais fiel ao briefing, maior será o grau de satisfação dos usuários.

Nota: diferentemente do levantamento de métricas e KPI’s (geralmente descritas no anteprojeto) que é um documento técnico, o briefing tem um caráter informal e visa qualificar as informações levantadas no anteprojeto.

Standard
Data Visualization, QlikView, Tipos de gráficos, Visualização de Dados

Uma alternativa aos gráficos de Pizza (ou “Part-to-Whole”)

Gráficos do tipo Part-to-Whole (ou “Parte do todo”) são usados para exibir a proporção que cada parte contribui para o todo, geralmente em percentual (a soma das partes deve dar 100%).

O gráfico mais utilizado para exibir percentuais de um todo é o “gráfico de pizza”. Surpreendentemente, há inúmeras razões para não utilizar este tipo de gráfico:

  • Os seres humanos têm dificuldade em comparar áreas, e ainda mais dificuldade quando as partes têm ângulos diferentes (tente comparar no exemplo (A) abaixo se o percentual da Company B é maior do que a Company E, e o quão maior ele é);
  • Utilizar legenda com os valores ao lado da mesma (B) é uma alternativa válida, porém não é a mais indicada, já que a “pizza” se torna totalmente dispensável (a legenda transmite toda a informação necessária);
  • Quando as “fatias” são muito pequenas, as mesmas ficam imperceptíveis (se exibidos, os dados também ficam sobrepostos);
  • Ao utilizar legenda, o usuário é forçado a mover os olhos do círculo para a legenda (e vice-versa) a todo o instante, a fim de identificar as partes, o que atrapalha a sua experiência.

graficos-part-to-whole-pizza

A melhor maneira de transmitir uma informação é sempre a mais simples possível, portanto, deve-se questionar: “é possível transmitir a informação acima de uma maneira que o usuário identifique e compare melhor as partes que compõe os 100% da participação de lucros?”

Em um gráfico de barras, a tarefa de comparar estas partes certamente é mais fácil:

graficos-part-to-whole-barras

No gráfico (C), a diferença no comprimento das barras é rapidamente percebido pelo usuário. Além de utilizar a barra contendo o total (100%), é fundamental deixar claro no título do gráfico que trata-se de percentuais de um total. Ordenar as barras da maior para a menor também é recomendado neste caso.

De todo modo, alguns usuários podem não perceber que trata-se de um gráfico de barras onde o total é 100%, portanto a variação (D) é útil para sinalizar que este não é um gráfico de barras comum (eles normalmente têm espaçamento entre as barras). O fato de as barras estarem encostadas demonstra que elas fazem parte do mesmo “todo”.

 graficos-part-to-whole-barras-3

 O exemplo (E) apresenta uma possibilidade ainda melhor de visualização, já que oculta a barra de 100% (as demais barras são redimensionadas, ficando maiores). A informação “Total: 100%” pode ser incluída como “Texto no gráfico” (“Propriedades” > “Apresentação”) e posicionada abaixo do eixo da dimensão. As cores do “Eixo X” foram alteradas no QlikView para destacar os valores (em “Propriedades”> “Expressões”, desabilitar a opção “Valores sobre os Dados” e habilitar “Texto no Eixo).

Há um caso, porém, onde o uso de barras “empilhadas” é recomendado para demonstrar “Partes de um todo”: quando o “total” não é expresso em percentual, mas em valores absolutos onde deseja-se demonstrar o total e também uma ideia de grandeza das partes que a compõem.

Embora não sejam precisas, as barras empilhadas (F) são úteis para demonstrar informações secundárias, além do total (principal informação).

graficos-part-to-whole-barras-2

 Observação: nos exemplos acima, as cores das barras são diferentes e seguem um padrão nos demais objetos da aplicação (cada companhia tem uma cor distinta). Normalmente, as barras – quando agrupadas – devem ser da mesma cor.

Standard
QlikView

Abrindo 2014 com uma pincelada sobre 2013

O ano que acaba amanhã foi de muito trabalho e trouxe reconhecimento e crescimento profissional. Além de ter participado de diversos e importantes projetos de BI utilizando QlikView em grandes clientes, participei de um concurso mundial de aplicações em QlikView, ficando em segundo lugar.

Eu e mais dois colegas da Toccato desenvolvemos o “Adoption in Brazil”, uma aplicação com base em dados disponíveis na internet para demonstrar que no Brasil há mais de 5 pretendentes para adoção para cada criança órfã. Por ter ficado em segundo lugar no concurso, a aplicação está disponível na página de “demos” da QlikTech.

adoption-in-brazil-2

adoption-in-brazil-3

Além da visibilidade e reconhecimento que um prêmio deste porte oferece, poder trabalhar com um tema tão relevante e importante foi bastante motivador, e certamente vamos dar continuidade para enriquecer ainda mais o poder de análise  através de novos cruzamentos de dados.

Confira os destaques na mídia a respeito da aplicação:

TV:

TV Globo/ RBSTV SC
RIC Record
BAND

Notícias:

G1
Diário Catarinense
clicRBS
Toccato Tecnologia
ESAG – UDESC

Standard