As Melhores Práticas Para Ter Dashboards Corporativos Atuais e

As Melhores Práticas Para Ter Dashboards
Corporativos Atuais e Aderentes ao Seu
Negócio
Apresentado por: Marcos José
[email protected]
#mstrworld
Agenda
• O que é Design Visual
• Princípios de Design
• Desafios
• Características de um Dashboard
• Boas Práticas
• Perguntas e Respostas
2
#mstrworld
O que é Design Visual ?
Quem ? (Papéis)
Quando ? (Tempos define granularidade
Público
e a sumarização)
Design
Visual
Conteúdo
Apresentação
O que ?
Como ?
(Exceções , alertas,
conteúdo baseado no
papel)
(Exibição de cores, widgets,
visualizações)
3
#mstrworld
"Pensando " Design Visual
Se feito corretamente, o usuário será capaz de:
• Compreender "por que" o problema ocorreu
• Determinar "o que" fazer sobre isso
4
#mstrworld
Princípios Básicos
LINHAS
CORES
PROPORÇÃO
CONTRASTE
3D
5
#mstrworld
Olhos sempre seguem as linhas
Use para destacar determinados
elementos
Use para dar ênfase e contexto
Legibilidade deve vir em primeiro lugar
Profundidade aumenta a percepção
Dashboards - Desafios comuns
• Requisitos do Dashboard – Nem sempre o que pedimos é
o que recebemos
• Falta de compreensão do "O que está disponível " na
ferramenta e / ou "O que pode ser feito " na ferramenta
• Concentrando-se em recursos de tecnologia e não na
informação em si
• A falta de expertise no design visual
• Demasiada ênfase na “aparência" do que na informação
6
#mstrworld
Compreendendo o Usuário
Usuários de dashboards na maioria das vezes estão à procura de:
7
•
Acesso rápido aos dados
•
Consumir a informação de forma fácil
•
Seu trabalho não gira em torno dashboards
•
Pouca paciência ou tempo para esperar as informações serem
processadas
•
Alguns usuários, como os analistas, querem ser autônomos até certo
ponto. Eles querem ser os únicos a deduzir a informação e não serem
apresentados as conclusões. Daí o termo: " Self Service "
#mstrworld
Psicologia de Dashboards
Dashboards, acreditamos , devem ter as seguintes características:
8
Informativo
Elegante
Fácil de usar
Dedutivo
Interativo
Acionável
#mstrworld
Informativo | Fácil de Usar | Interativo | Elegante | Dedutivo | Acionável
Qualquer coisa que converte os dados em percepções é
informativo
Design em torno de processos de negócios, não em torno de
Dados
Vamos considerar, os seguintes dados:
• Vendas - Este ano
• Vendas - No ano passado
• Vendas por categoria de produtos
• Vendas por estados (Geo localização)
9
#mstrworld
Informativo | Fácil de Usar | Interativo | Elegante | Dedutivo | Acionável
Vendas
Este Ano
$$$$$
Ano
Passado
$$$$
5
4
3
2
1
0
Venda
Meta
Ano 1 Ano 2 Ano 3 Ano 4
Vendas Estado
Vendas Produto
SP
RJ
DF
PR
10 #mstrworld
Eletro
Alimento
Vestuário
Calçado
Informativo | Fácil de Usar | Interativo | Elegante | Dedutivo | Acionável
O que nós fizemos foi colocar estas peças de informação em
conjunto para criar um Dashboard.
Mas realmente transformamos os dados em informações úteis ou
melhor ainda, percepções ?
11 #mstrworld
Informativo | Fácil de Usar | Interativo | Elegante | Dedutivo | Acionável
Vendas
Este Ano
$$$$$
Ano
Passado
$$$$
5
4
3
2
1
0
Venda
Meta
Ano 1 Ano 2 Ano 3 Ano 4
Então, o que esquecemos ?
Vendas Estado
Vendas Produto
SP
RJ
DF
PR
12 #mstrworld
Eletro
Alimento
Vestuário
Calçado
Informativo | Fácil de Usar | Interativo | Elegante | Dedutivo | Acionável
• Design em torno de processos de negócios, não em torno de
contexto de dados
• Siga uma linha de pensamento
• Começe em um nível mais sumarizado para uma exploração
detalhada de dados
• Home Page ou recipiente principal como ponto de partida
“Métricas mais importantes em primeiro lugar, seguido de
explicação de por que eles são assim, seguidas de métricas e
dados suplementares”.
13 #mstrworld
Informativo | Fácil de Usar | Interativo | Elegante | Dedutivo | Acionável
5 pontos para tornar seus painéis informativos :
1.
2.
3.
4.
5.
14 #mstrworld
KPIs – Selecionar os principais indicadores no contexto do negócio
• Estado atual do negócio
• Monitorar a evolução dos indicadores
• Evitar o que não é relevante
Tendências – (preditivo/antecipativo)
Comparações (referência/dispersão)
• Baseado no tempo
• Categorizado ou Geográfico
Alertas e exceções
• Thresholds (semáforos)
• Alertas
Performance Relativa
• A outras funções do negócios
• Métricas de competição (Metas/Ranks)
• Informações de concorrentes (% Market share)
15 #mstrworld
O que faz com que funcione ?
KPI Estado atual do
negócio
Monitorar a evolução
do indicador e
verificar sua
tendência
Detalhes no topo,
sequencia logica de
pensamento: O que
(app), quem
(usuario), como
(tempo gasto)
16 #mstrworld
17 #mstrworld
O que faz com que funcione ?
Urgente ! alertas
Indicadores no
contexto do
negócio (Time de
vendas, Lojas,
Clientes)
Simplicidade
global de
apresentação,
cores , arranjo,
todos os princípios
visuais aplicados
18 #mstrworld
Informativo | Fácil de Usar | Interativo | Elegante | Dedutivo | Acionável
Legível
19 #mstrworld
Compreensível
Navegável
Produtivo
Lógico
Informativo | Fácil de Usar | Interativo | Elegante | Dedutivo | Acionável
Elementos de Interatividade
Não Mais que 3 Cliques
Não Mais que 3 Seletores
Janela de Informação – Somente em elementos principais
Se houver uma “Drill” habilitado, os usuários devem ter uma maneira de
voltar para sua tela anterior de forma simples
O Excesso é sempre uma má ideia…
20 #mstrworld
Qual dispositivo de música você prefere ?
21 #mstrworld
Informativo | Fácil de Usar | Interativo | Elegante | Dedutivo | Acionável
• Forma é função
• Use icones atualizados
• Prefira ícones a textos
• Botões modernos (Mobile em alta)
• Evite muitas cores escuras juntas
• Use gradientes da mesma cor em vez de cores
contrastantes
22 #mstrworld
Informativo | Fácil de Usar | Interativo | Elegante | Dedutivo | Acionável
• Suporte a linguagem natural
• O que ?
• Quem ?
• Como ?
• Quando ?
• Onde ?
• Capacidade de enriquecimento “Self Service”
• Suporte ao fluxo de trabalho
• Capacidade de navegação em profundidade
23 #mstrworld
Informativo | Fácil de Usar | Interativo | Elegante | Dedutivo | Acionável
• Acionar é apoiar o fluxo de trabalho
• Transações: Anotações em indicadores, gráficos, tabelas,
visualizações para explicar uma anomalia
• De preferência, manter o número de ações em um painel limitado
para evitar sobrecarga e confusão
• Mantenha a opção de transação relevante ao problema,
informações extras devem permitir completar a transação (Data e
hora local, localização GPS, usuário, tempo).
24 #mstrworld
Demo
#mstrworld
26 #mstrworld
Lembre-se
• Não existe design perfeito, sempre podemos melhorar.
• Desconfie de design que não volta para você com feedback
(aparência ou funcionalidade) com pedidos de alterações e
melhorias, caso contrário é certo que foi pouco sucesso alcançado.
• Design bem sucedido sempre resulta em mais demanda.
• O teste real do design do seu aplicativo está na adoção.
• Adoção deve ser medida , pelo menos, nas seguintes etapas:
•
Imediatamente após o lançamento
• Periodicamente, em 3 ou 6 meses depois
27 #mstrworld
Obrigado !
#mstrworld