Qmeeting SP - Design para Business Intelligence

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.

Introdução

As imagens abaixo são de capturas de tela de "splash" de alguns softwares hoje em dia:

Isso te surpreende?

Introdução

As imagens abaixo são de capturas de tela de "splash" de alguns softwares hoje em dia:

Isso te surpreende?

Introdução

As imagens abaixo são de capturas de tela de "splash" de alguns softwares hoje em dia:

Isso te surpreende?

Introdução

As imagens abaixo são de capturas de tela de "splash" de alguns softwares hoje em dia:

Isso te surpreende!!!

Design para QlikView:

Erros mais comuns

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

Design para QlikView: Erros mais comuns

CONTRASTEDefina manchas de contraste…1

Header

Filtros 1

Filtros 2

Dados

Design para QlikView: Erros mais comuns

CONTRASTEPor onde começar?1

Design para QlikView: Erros mais comuns

CONTRASTEUm ajuste simples e o usuário já sabe para onde olhar:1

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

Design para QlikView: Erros mais comuns

CORCom relação ao uso de cores, o que pode ser melhorado?2

Design para QlikView: Erros mais comuns

CORCom relação ao uso de cores, o que pode ser melhorado?2

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

Design para QlikView: Erros mais comuns

DECORAÇÕES INÚTEISQuais objetos ou efeitos visuais podem ser eliminados?3

Design para QlikView: Erros mais comuns

DECORAÇÕES INÚTEISQuais objetos ou efeitos visuais podem ser eliminados?3

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

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

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

Design para QlikView: Erros mais comuns

INTERFACE5

Design para QlikView: Erros mais comuns

INTERFACE5

Design pra quem?

Defina o público

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

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?

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)

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.

Data Art x Visualização de Dados

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

Data Art x Visualização de Dados

Data Art / Infografia:

Tem como principal objetivo chamar a atenção para o gráfico

Data Art x Visualização de Dados

Visualização de Dados:

Tem como principal objetivo passar a informação de forma

rápida

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?

Data-Ink Ratio

Data-Ink Ratio

Imagine um relatório impresso num papel A4...

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.

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)

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)

Data-Ink Ratio

x

QlikView para Smartphones

QlikVew para Smartphones

Small Devices Version?

QlikVew para Smartphones

Qual device? Para qual tamanho de tela estamos desenvolvendo?

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/

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

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

QlikVew para Smartphones

No QlikView, as abas para smartphones devem ser

exibidas com a seguinte condicional:

=if(ClientPlatform() like '*mobile*',1,0)

QlikVew para Smartphones

O tamanho de gráficos e fontes deve ser pelo menos o dobro do

tamanho da versão “Desktop”:

QlikVew para Smartphones

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.

SOBRE A CLUSTER

O que fazemos?

Redesign de Aplicações

REDESIGN (ANTES)

REDESIGN (DEPOIS)

REDESIGN (ANTES)

REDESIGN (DEPOIS)

Prototipação de novas aplicações

PROTOTIPAÇÃODefinição das áreas de conteúdo, navegação…

PROTOTIPAÇÃOEstudo da melhor visualização/gráfico para cada análise desejada…

PROTOTIPAÇÃODistribuição dos gráficos na tela, aba por aba…

PROTOTIPAÇÃOEntrega de wireframes e template QVT do design final

Interfaces para Smartphones e Tablets

INTERFACE MOBILEVersões desktop e mobile no mesmo QVW, com interfaces independentes

Quality Assurance de Design e Visualização de Dados

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

Design de família de aplicações

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

Relatórios personalizados em PDF

Design de relatórios em PDF

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)

CONTATO

Thiago Pessatotwitter: @pessatopessato@clusterdesign.com.brclusterdesign.com.br

(48) 8453-9882 / (48) 3206-5665