qmeeting sp - design para business intelligence
DESCRIPTION
Design para Business IntelligenceTRANSCRIPT
![Page 1: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/1.jpg)
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.
![Page 2: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/2.jpg)
Introdução
As imagens abaixo são de capturas de tela de "splash" de alguns softwares hoje em dia:
Isso te surpreende?
![Page 3: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/3.jpg)
Introdução
As imagens abaixo são de capturas de tela de "splash" de alguns softwares hoje em dia:
Isso te surpreende?
![Page 4: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/4.jpg)
Introdução
As imagens abaixo são de capturas de tela de "splash" de alguns softwares hoje em dia:
Isso te surpreende?
![Page 5: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/5.jpg)
Introdução
As imagens abaixo são de capturas de tela de "splash" de alguns softwares hoje em dia:
Isso te surpreende!!!
![Page 6: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/6.jpg)
Design para QlikView:
Erros mais comuns
![Page 7: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/7.jpg)
Design para QlikView: Erros mais comuns
CONTRASTESe 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
![Page 8: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/8.jpg)
Design para QlikView: Erros mais comuns
CONTRASTEDefina manchas de contraste…1
Header
Filtros 1
Filtros 2
Dados
![Page 9: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/9.jpg)
Design para QlikView: Erros mais comuns
CONTRASTEPor onde começar?1
![Page 10: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/10.jpg)
Design para QlikView: Erros mais comuns
CONTRASTEUm ajuste simples e o usuário já sabe para onde olhar:1
![Page 11: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/11.jpg)
Design para QlikView: Erros mais comuns
CORCores 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õesdevem possuir cor distinta dos demais objetos;
Dadosdevem ter cores mais vibrantes ou com maior contraste;
2
![Page 12: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/12.jpg)
Design para QlikView: Erros mais comuns
CORCom relação ao uso de cores, o que pode ser melhorado?2
![Page 13: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/13.jpg)
Design para QlikView: Erros mais comuns
CORCom relação ao uso de cores, o que pode ser melhorado?2
![Page 14: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/14.jpg)
Design para QlikView: Erros mais comuns
DECORAÇÕES INÚTEISUma 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
![Page 15: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/15.jpg)
Design para QlikView: Erros mais comuns
DECORAÇÕES INÚTEISQuais objetos ou efeitos visuais podem ser eliminados?3
![Page 16: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/16.jpg)
Design para QlikView: Erros mais comuns
DECORAÇÕES INÚTEISQuais objetos ou efeitos visuais podem ser eliminados?3
![Page 17: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/17.jpg)
Design para QlikView: Erros mais comuns
VARIEDADE DE OBJETOSPizza, 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
![Page 18: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/18.jpg)
Design para QlikView: Erros mais comuns
VARIEDADE DE OBJETOSPizza, Bloco, Mekko, Radar, Linha, Barras...
Evite usar todo o tipo de gráfico no QlikView apenas para deixar a aplicação “bonita”.
4
![Page 19: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/19.jpg)
Design para QlikView: Erros mais comuns
INTERFACEQuando 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
![Page 20: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/20.jpg)
Design para QlikView: Erros mais comuns
INTERFACE5
![Page 21: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/21.jpg)
Design para QlikView: Erros mais comuns
INTERFACE5
![Page 22: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/22.jpg)
Design pra quem?
Defina o público
![Page 23: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/23.jpg)
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
![Page 24: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/24.jpg)
Defina o Público
Para ajudar a identificar estas questões, é
recomendável fazer um briefing com o cliente.
Para qual destes públicos
estamos desenvolvendo mesmo?
![Page 25: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/25.jpg)
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)
![Page 26: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/26.jpg)
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.
![Page 27: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/27.jpg)
Data Art x Visualização de Dados
![Page 28: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/28.jpg)
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
![Page 29: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/29.jpg)
Data Art x Visualização de Dados
Data Art / Infografia:
Tem como principal objetivo chamar a atenção para o gráfico
![Page 30: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/30.jpg)
Data Art x Visualização de Dados
Visualização de Dados:
Tem como principal objetivo passar a informação de forma
rápida
![Page 31: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/31.jpg)
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?
![Page 32: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/32.jpg)
![Page 33: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/33.jpg)
Data-Ink Ratio
![Page 34: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/34.jpg)
Data-Ink Ratio
Imagine um relatório impresso num papel A4...
![Page 35: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/35.jpg)
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.
![Page 36: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/36.jpg)
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)
![Page 37: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/37.jpg)
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)
![Page 38: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/38.jpg)
Data-Ink Ratio
x
![Page 39: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/39.jpg)
QlikView para Smartphones
![Page 40: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/40.jpg)
QlikVew para Smartphones
Small Devices Version?
![Page 41: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/41.jpg)
QlikVew para Smartphones
Qual device? Para qual tamanho de tela estamos desenvolvendo?
![Page 42: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/42.jpg)
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/
![Page 43: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/43.jpg)
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
![Page 44: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/44.jpg)
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
![Page 45: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/45.jpg)
QlikVew para Smartphones
No QlikView, as abas para smartphones devem ser
exibidas com a seguinte condicional:
=if(ClientPlatform() like '*mobile*',1,0)
![Page 46: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/46.jpg)
QlikVew para Smartphones
O tamanho de gráficos e fontes deve ser pelo menos o dobro do
tamanho da versão “Desktop”:
![Page 47: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/47.jpg)
QlikVew para Smartphones
![Page 48: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/48.jpg)
![Page 49: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/49.jpg)
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.
![Page 50: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/50.jpg)
SOBRE A CLUSTER
O que fazemos?
![Page 51: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/51.jpg)
Redesign de Aplicações
![Page 52: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/52.jpg)
REDESIGN (ANTES)
![Page 53: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/53.jpg)
REDESIGN (DEPOIS)
![Page 54: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/54.jpg)
REDESIGN (ANTES)
![Page 55: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/55.jpg)
REDESIGN (DEPOIS)
![Page 56: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/56.jpg)
Prototipação de novas aplicações
![Page 57: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/57.jpg)
PROTOTIPAÇÃODefinição das áreas de conteúdo, navegação…
![Page 58: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/58.jpg)
PROTOTIPAÇÃOEstudo da melhor visualização/gráfico para cada análise desejada…
![Page 59: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/59.jpg)
PROTOTIPAÇÃODistribuição dos gráficos na tela, aba por aba…
![Page 60: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/60.jpg)
PROTOTIPAÇÃOEntrega de wireframes e template QVT do design final
![Page 61: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/61.jpg)
Interfaces para Smartphones e Tablets
![Page 62: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/62.jpg)
INTERFACE MOBILEVersões desktop e mobile no mesmo QVW, com interfaces independentes
![Page 63: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/63.jpg)
Quality Assurance de Design e Visualização de Dados
![Page 64: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/64.jpg)
Q.A. de Design e Visualização de DadosDocumentação detalhada apontando melhorias em aplicações existentes
![Page 65: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/65.jpg)
Design de família de aplicações
![Page 66: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/66.jpg)
Design de família de aplicaçõesDefinição de modelo de layout a ser adotado em todas as aplicações da empresa
![Page 67: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/67.jpg)
Relatórios personalizados em PDF
![Page 68: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/68.jpg)
Design de relatórios em PDF
![Page 69: Qmeeting SP - Design para Business Intelligence](https://reader033.vdocuments.mx/reader033/viewer/2022051212/55980be31a28ab302c8b46f3/html5/thumbnails/69.jpg)
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)