1. Design e Visualização
de Dados para QlikView
AVISO LEGAL:
O conteúdo desta apresentação bem como as imagens nela contidas não podem, em nenhuma hipótese, ser
utilizado ou divulgado sem prévia autorização.
2. Introdução
As imagens abaixo são de capturas de tela de "splash" de alguns softwares hoje em dia:
Isso te surpreende?
3. Introdução
As imagens abaixo são de capturas de tela de "splash" de alguns softwares hoje em dia:
Isso te surpreende?
4. Introdução
As imagens abaixo são de capturas de tela de "splash" de alguns softwares hoje em dia:
Isso te surpreende?
5. Introdução
As imagens abaixo são de capturas de tela de "splash" de alguns softwares hoje em dia:
Isso te surpreende!!!
7. Design para QlikView: Erros mais comuns
CONTRASTE
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…
1
8. Design para QlikView: Erros mais comuns
CONTRASTE
Defina manchas de contraste… 1
Header
Filtros 1
Filtros 2
Dados
10. Design para QlikView: Erros mais comuns
CONTRASTE
Um ajuste simples e o usuário já sabe para onde olhar: 1
11. Design para QlikView: Erros mais comuns
COR
Cores devem ser utilizadas para “etiquetar” e não para deixar os objetos “bonitos”.
Defina categorias de informação:
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;
2
12. Design para QlikView: Erros mais comuns
COR
Com relação ao uso de cores, o que pode ser melhorado? 2
13. Design para QlikView: Erros mais comuns
COR
Com relação ao uso de cores, o que pode ser melhorado? 2
14. Design para QlikView: Erros mais comuns
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!
3
15. Design para QlikView: Erros mais comuns
DECORAÇÕES INÚTEIS
Quais objetos ou efeitos visuais podem ser eliminados? 3
16. Design para QlikView: Erros mais comuns
DECORAÇÕES INÚTEIS
Quais objetos ou efeitos visuais podem ser eliminados? 3
17. Design para QlikView: Erros mais comuns
VARIEDADE DE OBJETOS
Pizza, Bloco, Mekko, Radar, Linha, Barras...
Evite usar todo o tipo de gráfico no QlikView apenas para deixar a aplicação “bonita”.
Se a mensagem é a mesma, use o
mesmo tipo de gráfico ou objeto.
4
18. Design para QlikView: Erros mais comuns
VARIEDADE DE OBJETOS
Pizza, Bloco, Mekko, Radar, Linha, Barras...
Evite usar todo o tipo de gráfico no QlikView apenas para deixar a aplicação “bonita”.
4
19. Design para QlikView: Erros mais comuns
INTERFACE
Quando uma interface de análise não é atraente, o usuário é colocado em um
estado de espírito que não é propício para seu uso efetivo.
Inconscientemente ele gera uma barreira ao uso da ferramenta.
Não assuste os usuários com
interfaces pouco atraentes.
5
23. Defina o Público
Antes de iniciar o projeto de desenvolvimento de uma aplicação QlikView, é
fundamental entender o que e para quem estamos desenvolvendo.
Normalmente, da parte do cliente, há
inúmeras pessoas envolvidas:
• equipe de TI
• equipe de negócios
• diretores e gestores
• responsável pelo projeto
24. Defina o Público
Para qual destes públicos
estamos desenvolvendo mesmo?
Para ajudar a identificar estas questões, é
recomendável fazer um briefing com o cliente.
25. Defina o Público
Possíveis perguntas para elaboração do briefing:
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)
26. Defina o Público
Importante:
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.
28. Data Art x Visualização de Dados
Visualização de dados, Data art, Infografia...
São conceitos distintos mas com um objetivo em
comum: transmitir informação de forma visual
29. Data Art x Visualização de Dados
Data Art / Infografia:
Tem como principal objetivo chamar a atenção para o gráfico
30. Data Art x Visualização de Dados
Visualização de Dados:
Tem como principal objetivo passar a informação de forma
rápida
31. Data Art x Visualização de Dados
A imagem abaixo foi retirada da edição de 25/11/2013 da revista Época.
Data Art ou Visualização de dados?
35. Data-Ink Ratio
Segundo Edward Tufte, um pouco de tinta gasto na folha é para imprimir
dados, e outro tanto de tinta não é de dados (cabeçalho, notas de rodapé, etc.)
Ele chamou esta proporção de "data-ink ratio"
Segundo este conceito, o total de tinta gasto numa folha
de relatório deveria ser igual total de tinta de dados.
36. Data-Ink Ratio
Este princípio aplica-se perfeitamente ao desenho de painéis, o que
chamou-se de "Data-Pixel Ratio" (Stephen Few)
O gráfico abaixo tem baixo "data-ink ratio" (ou seja, "tinta" sobrando)
37. Data-Ink Ratio
Os mesmos dados, mas agora com alto "data-ink ratio" (ou seja, quase não
há "tinta" sobrando - ou ainda, tudo o que é desnecessário no gráfico foi
eliminado)
42. QlikVew para Smartphones
Identifique o menor tamanho de tela dos celulares dos usuários.
Acesse, a partir do aparelho do usuário, o site http://screenresolution.org/
43. QlikVew para Smartphones
Para descobrir a área útil de
tela a ser utilizada no QlikView:
Descontar a barra de sistema do smartphone e a barra de topo do browser
80 px
44. QlikVew para Smartphones
Para descobrir a área útil de
tela a ser utilizada no QlikView:
Descontar a barra de sistema do smartphone e a barra de topo do browser
Área útil final do SAMSUNG Galaxy Note 2:
360 x 640 560 pixels
45. QlikVew para Smartphones
No QlikView, as abas para smartphones devem ser
exibidas com a seguinte condicional:
=if(ClientPlatform() like '*mobile*',1,0)
46. QlikVew para Smartphones
O tamanho de gráficos e fontes deve ser pelo menos o dobro do
tamanho da versão “Desktop”:
49. SOBRE A CLUSTER
Nascemos para ajudar usuários de QlikView
a enxergar melhor seus dados de negócio.
A empresa oferece uma abordagem de design ao mundo do Business
Intelligence, atuando exclusivamente com a solução QlikView.