Design para Business Intelligence

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!!!

6. Design para QlikView:
Erros mais comuns

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

9. Design para QlikView: Erros mais comuns
CONTRASTE
Por onde começar? 1

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

20. Design para QlikView: Erros mais comuns
INTERFACE 5

21. Design para QlikView: Erros mais comuns
INTERFACE 5

22. Design pra quem?
Defina o público

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.

27. Data Art x Visualização de Dados

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?

33. Data-Ink Ratio

34. Data-Ink Ratio
Imagine um relatório impresso num papel A4...

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)

38. Data-Ink Ratio
x

39. QlikView para Smartphones

40. QlikVew para Smartphones
Small Devices Version?

41. QlikVew para Smartphones
Qual device? Para qual tamanho de tela estamos desenvolvendo?

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”:

47. QlikVew para Smartphones

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.

50. SOBRE A CLUSTER
O que fazemos?

51. Redesign de Aplicações

52. REDESIGN (ANTES)

53. REDESIGN (DEPOIS)

54. REDESIGN (ANTES)

55. REDESIGN (DEPOIS)

56. Prototipação de novas aplicações

57. PROTOTIPAÇÃO
Definição das áreas de conteúdo, navegação…

58. PROTOTIPAÇÃO
Estudo da melhor visualização/gráfico para cada análise desejada…

59. PROTOTIPAÇÃO
Distribuição dos gráficos na tela, aba por aba…

60. PROTOTIPAÇÃO
Entrega de wireframes e template QVT do design final

61. Interfaces para Smartphones e Tablets

62. INTERFACE MOBILE
Versões desktop e mobile no mesmo QVW, com interfaces independentes

63. Quality Assurance de Design e
Visualização de Dados

64. Q.A. de Design e Visualização de Dados
Documentação detalhada apontando melhorias em aplicações existentes

65. Design de família de aplicações

66. Design de família de aplicações
Definição de modelo de layout a ser adotado em todas as aplicações da empresa

67. Relatórios personalizados em PDF

68. Design de relatórios em PDF

69. NOSSOS CLIENTES
Já atuamos em clientes como:
• Grupo Brookfield (RJ)
• Grupo JBS (SP)
• Grupo Technos (RJ)
• Ministério do Planejamento (DF)
• Ministério Público RS / PR / SC
• Presidência da República (DF)
• Red Bull (SP)
• TCE-RS (RS)
• TCU (DF)
• Terra Networks (RS)
• TV Globo (RJ)

70. CONTATO
Thiago Pessato
twitter: @pessato
pessato@clusterdesign.com.br
clusterdesign.com.br
(48) 8453-9882 / (48) 3206-5665