Design do painel - Considerações e práticas recomendadas

Ouça a versão em áudio deste artigo

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 de automóveis tradicional, e eles evoluíram para servir a mesma função no mundo digital. Em seu livro, Stephen Few colocou melhor:

Um painel é uma exibição visual das informações mais importantes necessárias para atingir um ou mais objetivos; consolidados e organizados em uma única tela para que as informações possam ser monitoradas rapidamente.

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

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

Em seu livro, Data Visualization , Noah Iliinsky e Julie Steele afirmam:

O objetivo do designer ao projetar uma visualização de dados é criar uma entrega que seja bem recebida e facilmente compreendida pelo leitor. Todas as escolhas de design e implementações específicas devem servir a esse propósito.

Principais características dos grandes painéis

Um painel eficaz mostra rapidamente informações úteis e acionáveis. Ele simplifica a representação visual de dados complexos e ajuda as partes interessadas a entender, analisar e apresentar insights importantes.

Ótimos 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 efetivamente apresentados em um espaço limitado.

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

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

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

A complexidade reduzida fornece clareza

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

Quando confrontados com muitos dados para selecionar, os designers devem exibir apenas o subconjunto mais relevante. Precisamos priorizar e remover cuidadosamente métricas enganosas e pouco claras.

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

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

Ao ler uma visualização (ou qualquer outro tipo de comunicação), seu leitor tem uma quantidade limitada de inteligência para se dedicar ao problema. Parte dessa capacidade intelectual será dedicada a decodificar a visualização; qualquer poder cerebral restante pode ser usado para entender a mensagem (se o leitor ainda não desistiu de frustração). Noah Iliinsky e Julie Steele (visualização de dados)

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

A arquitetura de informações deve apresentar os dados essenciais primeiro, permitindo acesso a métricas de suporte ou secundárias. Um sistema de detalhamento progressivo deve ser projetado, começando com uma visão geral e depois entrando em mais detalhes – isso facilita a priorização de dados e cria clareza.

Determinando metas do painel e exibindo dados apropriados

Ao projetar painéis, designers de painéis bem-sucedidos começam com um conjunto bem definido de metas com foco no problema a ser resolvido e nos principais insights acionáveis ​​que as pessoas precisam obter dos dados.

Bons objetivos de projeto promovem uma execução eficiente e precisa. Empregar a estrutura SMART para definição de metas coloca o foco em objetivos específicos , mensuráveis , acionáveis , realistas e baseados em tempo .

Algumas perguntas importantes a serem feitas ao determinar as metas de design do painel:

• Quantas etapas os usuários precisam dar para atingir uma meta específica?
• A interface é intuitiva o suficiente para que o usuário alcance seu objetivo por conta própria?
• 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, recursos visuais e dados são importantes.

O design centrado em metas concentra-se em soluções para problemas reais e é a base para todos os grandes designs de painéis. Comece com uma compreensão clara dos objetivos de negócios, considere as metas do usuário e, em seguida, transmita as principais informações que precisam ser comunicadas.

Contexto no design do painel

Um dos maiores desafios do design de painéis é atender a várias pessoas. Depois que cada função de usuário é definida, torna-se 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 bem-sucedido. A previsão de possíveis cenários em que os usuários podem se encontrar contribuirá para uma melhor compreensão das circunstâncias do usuário.

Sempre mantenha o contexto dos usuários em mente ao projetar – identifique seu conhecimento técnico, sua familiaridade com o sistema em geral, seus objetivos e assim por diante.

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

• O design considera a direção em que o visitante está acostumado a ler?
• A interação com o dashboard requer conhecimento técnico?
• Os usuários conseguirão realizar a maioria das ações em apenas alguns cliques?
• O design se alinha com o contexto do usuário criando menus de detalhamento; 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 do usuário com tema escuro porque são usados ​​por várias horas seguidas.

UIs com temas escuros podem ajudar a reduzir o cansaço visual e dar suporte à clareza visual na interface. No entanto, adotar essa abordagem requer uma avaliação cuidadosa da direção do design - as vantagens, desvantagens e armadilhas potenciais, conforme descrito em um artigo anterior do blog de design: Dark UI Dos and Don'ts.

Melhor design de painel com pesquisa do usuário

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

Alguns painéis precisam funcionar – ou ser personalizáveis ​​sem esforço para usuários de diferentes funções olhando para 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. Esses são fatores que influenciam muito o design final do painel.

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

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

Tendo isso em mente, é uma boa ideia começar com wireframes rudimentares e passar para protótipos que possam ser testados com usuários reais durante uma fase de pesquisa de usuários. Insights realmente valiosos podem surgir de uma curta fase de pesquisa de usuários com apenas cinco usuários – e isso economizará uma enorme quantidade de tempo no futuro.

Divulgação progressiva no design do painel

A divulgação progressiva é uma técnica usada para manter a atenção do usuário reduzindo a desordem. A criação de um sistema de divulgação progressiva auxilia na criação de um ambiente centrado no usuário, o que ajuda 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 são importantes para eles e não sejam forçados a passar por todos os recursos, incluindo os que não precisam ou nos quais não estão interessados.

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

A divulgação progressiva transfere recursos avançados ou raramente usados ​​para uma tela secundária, tornando os aplicativos mais fáceis de aprender e menos propensos a erros. -Jakob Nielsen

A animação é uma ótima maneira de satisfazer uma variedade de necessidades do usuário e, ao mesmo tempo, cumprir várias funções. É uma ótima opção para usar enquanto dados e visuais estão sendo carregados e é uma solução avançada de divulgação progressiva.

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

Vantagens de usar divulgação progressiva em dashboards:

• Reduzir a incerteza e a ansiedade do usuário (exibindo sinais de progresso, os usuários têm certeza de que tudo está funcionando conforme o esperado)
• Fornecer aos usuários algo para ver (exibição parcial de dados) em vez de fazê-los esperar
• Fornecer aos usuários uma expectativa clara das próximas etapas e criar uma compreensão da maneira como as informações são apresentadas hierarquicamente

Problemas potenciais com divulgações progressivas e carregamento de dados incluem:

• Utilizar indicadores e divulgações de forma 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 claro de progresso pode levar à incerteza do usuário e a taxas de rejeição mais altas.
• O uso de indicadores estáticos de progresso é uma solução com pouco significado e não oferece informações suficientes sobre o progresso, o que também pode levar à incerteza do usuário e maiores taxas de rejeição.

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 centrado em metas que segue as práticas recomendadas de design de painel e a visualização de dados adequada. Embora cada painel seja diferente e tenha seus próprios objetivos, requisitos e limitações, seguir esses princípios fundamentais ajudará na criação de designs excelentes, independentemente das especificidades:

• Em primeiro lugar, tenha empatia com seus tipos de usuários e entenda seus objetivos.
• Transmita uma história clara para os usuários usando visuais sugestivos, rótulos, técnicas de divulgação progressiva e animação.
• Facilite as coisas complexas aplicando técnicas de pesquisa de usuários.
• Revele dados e informações no momento apropriado, em um sistema de detalhamento.
• Use a visualização de dados para expressar informações de maneira significativa.

• • •

Leia mais no Blog Toptal Design:

• eCommerce UX – Uma visão geral das melhores práticas (com infográfico)
• A Importância do Design Centrado no Homem no Design de Produto
• Os melhores portfólios de UX Designer – Estudos de caso e exemplos inspiradores
• Princípios heurísticos para interfaces móveis
• Design Antecipatório: Como criar experiências de usuário mágicas