Os painéis são uma maneira única e poderosa de apresentar inteligência baseada em dados usando técnicas de visualização de dados que exibem dados relevantes e acionáveis, bem como estatísticas de rastreamento e indicadores-chave de desempenho (KPIs). Os painéis devem apresentar esses dados em um formato rápido e fácil de digitalizar, com as informações mais relevantes compreensíveis à primeira vista.

O termo nasceu do painel automotivo tradicional, e eles evoluíram para cumprir a mesma função no mundo digital. No livro dele , Stephen Few colocou da melhor forma:

Um painel de instrumentos é uma visualização das informações mais importantes necessárias para atingir um ou mais objetivos, consolidadas e organizadas em uma única tela para que as informações possam ser monitoradas de relance.

Dashboard mobile design por Mason Yarnell para Mixpanel

Neste artigo, delineamos exemplos estratégicos, analíticos, operacionais e informativos, bem como os princípios fundamentais que estão no centro de todo design de painel de controle de sucesso, independentemente do tipo.

Ter a abordagem certa para a visualização de dados é um recurso fundamental para estabelecer a base de um painel de controle de sucesso. A visualização de dados é a apresentação de dados por meio de gráficos e imagens. Seu principal objetivo é ajudar os tomadores de decisão a identificar padrões ou compreender conceitos difíceis que podem passar despercebidos em aplicativos baseados em texto.

No livro dele , Visualização de dados , Noah Iliinsky e Julie Steele declaram:

O propósito do designer ao projetar uma visualização de dados é criar um produto que seja bem recebido e de fácil compreensão para o leitor. Todas as escolhas de design e implementações particulares devem servir a este propósito.

Principais recursos dos grandes painéis de instrumentos

Um painel eficaz exibe informações úteis e acionáveis ​​em um piscar de olhos. Ele simplifica a representação visual de dados complexos e ajuda as partes interessadas a compreender, analisar e apresentar ideias-chave.

Painel do livro de contratos por ApeeScape designer Wojciech Dobry

Os grandes painéis são claros, intuitivos e personalizáveis.

• Eles comunicam informações rapidamente.
• Eles exibem informações de forma clara e eficiente.
• Eles mostram tendências e mudanças nos dados ao longo do tempo.
• Eles são facilmente personalizáveis.
• Os widgets e componentes de dados mais importantes são apresentados de forma eficaz em um espaço limitado.

Uma personalização inicial de dados visuais e informações para os principais requisitos do usuário ajudará a melhorar a usabilidade e eliminar a necessidade de diferentes usuários.

Elementos personalizáveis ​​do painel - Livro de Contrato por ApeeScape designer Wojciech Dobry

Grandes painéis fornecem tudo a um clique de distância.

• Todas as informações essenciais estão imediatamente acessíveis.
• Os dados são uma prioridade.
• As informações são exibidas claramente em uma hierarquia visual em uma tela.
• O design fornece uma visão geral consistente que inclui dados iniciais esparsos e claros com oportunidades adicionais para se aprofundar.
• Os itens (gráfico, tabela, formulário) são exibidos em uma visualização minimizada com a capacidade de exibir mais detalhes em uma janela modal ou ir para uma página com mais detalhes.
• O layout melhora a usabilidade com filtros, permitindo que os usuários personalizem como os dados são exibidos e filtrem o conteúdo usando tags, categorias e KPIs.

Dados detalhados extraídos de um painel em um modal, pelo designer ApeeScape Miklos Philips

A complexidade reduzida fornece clareza

Em um mundo sobrecarregado de dados, fornecer informações claras é uma das coisas mais difíceis de realizar. Apresentar apenas os dados mais relevantes nos painéis é essencial: quanto mais informações exibimos, mais difícil será para os usuários encontrarem o que precisam.

Quando confrontado com muitos dados para selecionar, os designers eles devem mostrar apenas o subconjunto mais relevante. Precisamos priorizar e eliminar cuidadosamente as métricas enganosas e pouco claras.

Decisões eficazes de design de painel de instrumentos devem ser guiadas por:

• os objetivos do projeto
• a natureza dos dados
• necessidades do usuário

Dashboard Design por ApeeScape Designer Stelian Subotin

Ao ler uma visualização (ou qualquer outro tipo de comunicação), o leitor tem uma capacidade cerebral limitada de se concentrar no problema. Parte dessa capacidade intelectual será dedicada a decodificar a visualização, qualquer capacidade cerebral restante pode ser usada para entender a mensagem (se o leitor ainda não desistiu frustrado).

- Noah Iliinsky e Julie Steele (visualização de dados)

O principal objetivo de um painel é tornar as informações complexas acessíveis e fáceis de digerir. Portanto, a interface que apresenta os dados deve ser clara e simples para minimizar a carga cognitiva dos usuários e o tempo de busca.

A arquitetura da informação deve apresentar primeiro os dados essenciais, ao mesmo tempo que permite o acesso a medidas de apoio ou secundárias. Um sistema de detalhamento progressivo deve ser projetado, começando com uma visão geral e depois entrando em mais detalhes - torna mais fácil priorizar os dados e cria clareza.

Dashboard mobile design por Jan Losert

Determinação dos objetivos do painel e visualização dos dados apropriados

Projetos de painel de instrumentos bem-sucedidos começam com um conjunto bem definido de objetivos que enfoca o problema a ser resolvido e a chave que deve ser aprendida para remover do conjunto de dados. Definir essas metas vem de uma compreensão clara das tarefas que o usuário deve executar.

Bons objetivos de design promovem uma execução eficiente e precisa. Usando o framework S.M.A.R.T para o estabelecimento de metas coloca o foco naqueles que são específico , mensurável , acionável , realista Y baseado no tempo .

Algumas perguntas importantes a serem feitas ao determinar os objetivos:

• Quantas etapas os usuários devem seguir para atingir uma meta específica?
• A interface é intuitiva o suficiente para que o usuário atinja seu objetivo por conta própria?
• De quais informações o usuário precisa para atingir seu objetivo com sucesso?

Para determinar qual pode ser o objetivo de um design de painel específico, defina-o perguntando: 'Que problema específico esse design resolverá para o usuário?' A resposta fornecerá informações sobre quais métricas, propriedades, valores, imagens e dados são importantes.

Dashboard Design por ApeeScape Designer Miklos Philips

O design centrado em metas concentra-se em soluções para problemas reais e é a base de todo design de painel de controle. Ele começa com uma compreensão clara das metas de negócios, considera as metas do usuário e, em seguida, transmite as principais informações que precisam ser comunicadas.

Contexto no design do painel

Um dos maiores desafios no design do painel é atender a várias pessoas. Depois que cada função do usuário é definida, é fundamental entender onde suas necessidades se sobrepõem e onde divergem.

A comunicação eficaz é o princípio básico de todo design de painel de instrumentos bem-sucedido. Antecipar possíveis cenários em que os usuários podem se encontrar contribuirá para um melhor entendimento das circunstâncias do usuário.

Sempre tenha em mente o contexto dos usuários ao projetar: identifique seus conhecimentos técnicos, sua familiaridade com o sistema geral, seus objetivos, etc.

Dashboard Design por ApeeScape Designer Miklos Philips

Certifique-se de fazer as seguintes perguntas ao tentar determinar o comportamento e o contexto do usuário:

• O layout leva em consideração a direção em que o visitante está acostumado a ler?
• A interação com o painel requer conhecimento técnico?
• Os usuários poderão realizar a maioria das ações com apenas alguns cliques?
• O design se alinha ao contexto do usuário, criando menus detalhados? Você usa iconografia e paletas de cores sugestivas?

A paleta de cores usada no design de um painel também deve ser considerada como um contexto. Muitos painéis de produtos SaaS business-to-business são projetados em uma interface de usuário com tema escuro porque são usados ​​por horas a fio.

IUs com tema escuro podem ajudar a reduzir o cansaço visual e oferecer suporte a clareza visual na interface. No entanto, essa abordagem requer uma avaliação cuidadosa da direção do design - as compensações e riscos potenciais, conforme descrito em uma postagem anterior do blog de design: Duas coisas a não fazer na IU escura .

Os layouts, análises e infográficos da IU do painel funcionam bem em uma IU escura, mas precisam ser 'manuseados com cuidado' para garantir contraste suficiente. (de Alex Gilev )

Melhor design de painel com pesquisa de usuário

A pesquisa do usuário ajuda a criar um ambiente no qual os usuários são apresentados a dados relevantes, claros e concisos. Isso os ajuda a pensar sobre o conteúdo e os dados que procuram, em vez de como usá-los e acessá-los.

Alguns painéis precisam funcionar ou podem ser personalizados sem esforço para usuários em diferentes funções, observando o mesmo painel básico. A pesquisa do usuário é importante porque ajuda a determinar os objetivos do usuário, modelos mentais, contexto ambiental e pontos problemáticos. São fatores que têm grande influência no design final do painel.

Dashboard Design por ApeeScape Designer Stelian Subotin

O designer de experiência do usuário, pesquisador e autor Mike Kuniavsky observa que é 'o processo de compreensão do impacto do design em um público'.

Um designer deve definir os diferentes tipos de usuários e entender onde estão seus objetivos e onde eles diferem. Quais informações são mais acionáveis ​​para um tipo de usuário em comparação com outro? Eles devem considerar se é necessário um design diferente de um tipo de usuário para outro ou se existe uma solução para um caso de uso mais geral.

Com isso em mente, é uma boa ideia começar com wireframes rudimentares e passar para protótipos que podem ser testados com usuários reais durante uma fase de pesquisa do usuário. Uma curta fase de pesquisa do usuário com apenas cinco usuários pode fornecer informações realmente valiosas e economizará muito tempo online.

Dashboard wireframe por Aaron sananes

Divulgação progressiva no design do painel de instrumentos

o divulgação progressiva é uma técnica usada para prender a atenção do usuário, reduzindo a desordem. A criação de um sistema de divulgação progressiva ajuda a criar um ambiente centrado no usuário, ajudando a priorizar a atenção do usuário, evitar erros e economizar tempo. Ele também permite que os usuários se concentrem nos principais recursos que lhes interessam e não sejam forçados a revisar todos os recursos, mesmo aqueles de que não precisam ou com os quais não se importam.

A divulgação progressiva é uma prática recomendada de design de painel que também reduzirá consideravelmente as taxas de erro; melhorar a eficiência e ajudar os usuários a melhorar seus compreensão de painéis quando um sistema é baseado na priorização de recursos.

Painel desenhado por Jan Losert

A divulgação progressiva difere recursos avançados ou raramente usados ​​para um monitor secundário, tornando os aplicativos mais fáceis de aprender e menos sujeitos a erros. - Jakob Nielsen

A animação é uma ótima maneira de atender a uma variedade de necessidades do usuário ao mesmo tempo em que atende a várias funções. É uma ótima opção para usar enquanto os dados e imagens estão carregando e é uma solução de divulgação progressiva avançada.

Animação é o processo de criação da ilusão de movimento; é uma dinâmica que cria uma sensação de progresso e feedback constante, reduzindo a incerteza do usuário e aumentando o desempenho percebido.

Painel de Virgil Pana

Vantagens de usar divulgação progressiva em painéis:

• Reduza a incerteza e a ansiedade do usuário (mostrando sinais de progresso, os usuários têm a garantia de que tudo está funcionando como planejado)
• Dê aos usuários algo para olhar (visualização de dados parcial) em vez de fazê-los esperar
• Fornece aos usuários uma expectativa clara das próximas etapas e cria uma compreensão de como as informações são apresentadas hierarquicamente

Os possíveis problemas com divulgações progressivas e uploads de dados incluem:

• Usar indicadores e divulgações de maneira inadequada. Tempos de carregamento curtos e etapas inúteis criarão distração e trabalharão contra os princípios de usabilidade.
• Um atraso na recuperação de dados sem um indicador de progresso claro pode levar à incerteza do usuário e taxas de rejeição mais altas.
• Usar indicadores de progresso estáticos é uma solução sem sentido e não fornece informações suficientes sobre o progresso, o que também pode levar à incerteza do usuário e taxas de rejeição mais altas.

Painel desenhado por Mason Yarnell

Resumo

Os painéis são uma maneira poderosa de comunicar dados e outras informações, especialmente com um design centrado no usuário e focado no objetivo, que segue as melhores práticas para design de painel e visualização de dados adequada. Embora cada painel seja diferente e tenha seus próprios objetivos, requisitos e limitações, seguir estes princípios fundamentais o ajudará a criar designs excepcionais, independentemente dos detalhes:

• O primeiro e mais importante é ter empatia com os tipos de usuários e entender seus objetivos.
• Transmita uma história clara aos usuários por meio do uso de imagens, tags, técnicas de divulgação progressiva e animação sugestivas.
• Facilite as coisas complexas aplicando técnicas de pesquisa do usuário.
• Revele dados e informações no momento apropriado, em um sistema de avaria.
• Use a visualização de dados para expressar informações de uma forma significativa.