Crie painéis incríveis no AI/BI

Introdução

Toda empresa tem uma identidade de marca que reflete o que ela representa, moldada por seu logotipo, cores, fontes e tom. Nossos clientes mais conhecidos, como a Rivian e a Wineshipping, aplicam essa identidade de forma consistente em todos os pontos de contato: marketing, apresentações de slides, sites e produtos. Essa consistência é o que gera confiança com seus clientes e parceiros.

Os dashboards são um meio crucial pelo qual as equipes de negócios compartilham dados com tomadores de decisão e parceiros externos. Os criadores de dashboards desenvolvem essa experiência para ajudar os visualizadores a entender seus dados e revelar insights importantes. Para que os dashboards pareçam confiáveis e profissionais, os criadores precisam torná-los coesos e alinhados à marca. Os temas de dashboard permitem atualizar a aparência de dashboards individuais para que correspondam à sua visão.

Os temas de workspace vão além, aplicando um tema consistente em todos os dashboards do workspace, que o herdam automaticamente. Isso, é claro, pode ser estendido e/ou modificado localmente conforme necessário. Neste post, vamos explorar algumas práticas recomendadas de design e criar um tema personalizado para refletir a marca.

Usaremos as diretrizes de marca da empresa fictícia Wanderbricks como exemplo para criar um dashboard.

Quer acompanhar? A Wanderbricks é uma empresa fictícia de viagens e hotelaria com um conjunto de dados de exemplo disponível em todos os workspaces do Databricks. Você pode recriar o dashboard do zero usando os prompts do Genie Code em cada seção, ou apenas acompanhar a leitura e aplicar as ideias no seu próprio dashboard. Comece abrindo um novo dashboard e inserindo este prompt. Ele cria uma visualização de métrica local com base no esquema samples.wanderbricks com as dimensões e medidas que usaremos ao longo do texto.

#1 — Crie um layout com base nas necessidades dos usuários finais

Configurando sua grade

O objetivo do seu dashboard deve determinar quantas colunas haverá no layout da sua grade. O AI/BI oferece uma grade flexível de 12 colunas que você pode subdividir em 3, 4 ou 6 colunas, dependendo das suas necessidades. Dashboards técnicos e densos, com muitos widgets, se beneficiam de um layout de 6 colunas, acomodando mais widgets na tela. Por outro lado, um dashboard executivo poderia usar um layout de 3 colunas para reduzir a carga cognitiva.

Criando hierarquia

Ao visualizar um dashboard, o olho humano naturalmente faz uma varredura para encontrar as informações mais importantes antes de ler. Dependendo do design do seu dashboard, o olho seguirá um dos dois caminhos pela tela: um padrão em F ou um padrão em Z.

Para dashboards com muitas imagens e visualizações, o olho naturalmente segue um padrão em Z pelos layouts visuais, começando no canto superior esquerdo com títulos e filtros, cortando na diagonal para baixo e terminando no canto inferior direito com visualizações detalhadas e tabelas.

Para dashboards com mais texto ou tabelas, pode surgir um padrão em F. O olho varre a primeira linha completamente e depois desce pelo lado esquerdo. Em ambos os padrões, o princípio é o mesmo: coloque o que é mais importante onde o olho bate primeiro.

Redimensione para dar ênfase

Se tudo no seu dashboard tiver o mesmo tamanho, nada se destaca. Os visualizadores precisam de pistas visuais para saber onde focar primeiro. Estabeleça uma hierarquia clara tornando suas métricas mais críticas e visualizações principais maiores, deixando os elementos secundários em segundo plano.

Tente aplicar isso ao dashboard da Wanderbricks. O primeiro prompt cria uma página de visão geral executiva seguindo a hierarquia que acabamos de cobrir, e o segundo adiciona uma página técnica mais densa para mostrar como os mesmos princípios se adaptam a um público diferente.

#2 — Selecione a fonte para o tom e a legibilidade

Escolher uma fonte para um dashboard é uma decisão tanto funcional quanto estética. A identidade da sua marca e o seu público devem ser considerados na escolha da fonte. Um público mais técnico pode gostar de algo expressivo como a Space Grotesk, enquanto um dashboard executivo se beneficia de algo mais familiar e conservador, como a Arial. O objetivo não é apenas o estilo, mas definir o tom.

Os dashboards tendem a ser densos em informações, por isso a legibilidade vem em primeiro lugar. Recomendamos fontes sem serifa (sans-serif), pois elas reduzem o cansaço visual. O AI/BI oferece suporte nativo a algumas opções de fontes sem serifa seguras para a web prontas para uso, incluindo Arial, Tahoma e Verdana.

Se quiser usar sua própria fonte, agora você pode adicionar uma fonte local ao seu dashboard. Isso é especialmente útil quando os dashboards são incorporados às suas ferramentas internas para manter a consistência. Para este dashboard, usaremos uma fonte local e a definiremos como Space Grotesk.

Para garantir a legibilidade, escolha cores de fonte que mantenham um alto contraste com o fundo do widget. Use uma ferramenta de acessibilidade como o verificador de contraste de cores da Adobe para verificar. No modo claro, evite usar o preto puro (#000000), pois ele pode parecer muito forte contra um fundo brilhante (#FFFFFF). No modo claro, um tom ligeiramente suavizado como #08141A contra #EBEBEB geralmente cria uma experiência de leitura mais confortável. No modo escuro, você pode tentar usar #EBEBEB contra #08141A para evitar o contraste excessivo.

O AI/BI oferece suporte a um conjunto de fontes seguras para a web e de código aberto que você pode aplicar com o Genie Code. Para fontes de marca, use a opção de fonte local em Configurações > Fonte > Usar fonte local. Experimente este prompt para começar com uma opção de código aberto e definir as cores da sua fonte.

#3 — Defina as cores da UI

A regra 60-30-10 é um princípio fundamental na teoria das cores para criar designs equilibrados e visualmente harmoniosos. Os designers usam essa regra em muitos contextos – desde a escolha das cores para um cômodo da casa até a definição do branding de uma nova empresa. Essa regra de design ajuda você a definir sua paleta de cores com três categorias de cores e dá à sua paleta o equilíbrio apropriado de quanto cada uma deve ser usada em um design holístico:

• 60% é a sua cor dominante que define o tom geral do dashboard e será a cor de fundo da sua tela, dos widgets e das bordas.
• 30% é a sua cor secundária que apoia o seu fundo com contraste. No seu dashboard, esta será a cor da sua fonte e a paleta de visualização de dados.
• 10% é a sua cor de destaque, destinada a chamar a atenção onde você precisa. Use-a para destacar elementos interativos como filtros, abas e botões no seu dashboard.

Abaixo, discutiremos como aplicar esse princípio para escolher cores bonitas para o seu dashboard.

Cores de fundo neutras

Ao manter as cores de fundo próximas do neutro, permitimos que as cores de visualização de dados se comuniquem com precisão, sem introduzir vieses indesejados. Para o modo claro, mantenha os fundos dos widgets próximos ao branco (#FCFCFD) com uma cor ligeiramente mais escura para o fundo da tela (#EBEBEB). Isso cria separação sem distração. Quando o contraste é sutil, o dashboard é lido como um todo coeso, em vez de uma grade de elementos isolados. Definir as cores das bordas para corresponder ao fundo do widget reduz a poluição visual, especialmente em layouts densos.

Personalização por widget

Para enfatizar certos widgets e destacá-los, você pode substituir as propriedades do tema de um widget. Nas configurações de estilo do widget, atualize a cor de fundo e da borda para #1F354B. Além disso, atualize a cor da fonte para #EBEBEB para garantir um alto contraste.

Cor de seleção marcante

A cor de seleção é usada para destacar elementos interativos como filtros, abas e botões. Selecione uma cor que seja facilmente distinguível do texto e das cores de fundo. Você pode derivá-las facilmente usando as cores da sua marca. Usando o #15AFDD da nossa marca como cor base no Adobe Color, podemos tentar derivar uma cor de seleção definindo a harmonia de cores como quadrada, resultando em cores como #DE7914 e #3A7689. Escolher uma cor azul (como #2272B4) geralmente é uma escolha segura - é análoga à cor do hiperlink associada a links interativos na web.

Modo escuro

Todo tema de AI/BI suporta os modos claro e escuro. Configure ambos os modos alternando o seletor de modo claro/escuro. Para configurar o modo claro, você pode usar a cor da marca #1E343F para o fundo da tela e #08141A para o fundo do widget. No modo claro, a cor mais brilhante para o widget geralmente é recomendada, pois oferece alto contraste. Para a cor da fonte, usaremos #E8EFF1 para proporcionar alta legibilidade.

Tente aplicar o princípio 60-30-10 ao dashboard Wanderbricks. Este prompt define fundos neutros para a tela e os widgets, oculta as bordas combinando-as com a cor do widget e adiciona um azul complementar para elementos interativos.

#4 — Crie uma paleta de visualização que seja a sua cara

Com as cores da interface estabelecidas para os modos claro e escuro, a etapa final é selecionar a paleta de visualização.

Uma paleta de visualização de dados bem equilibrada une todo o dashboard e dá vida a ele. A paleta pode incluir cores da marca, mas precisará de ajustes, pois elas podem ser inutilizáveis para visualizações. Estima-se que 4,5% da população global apresenta algum tipo de daltonismo, por isso é importante projetar uma paleta que seja acessível para daltônicos. Se você quiser testar algumas paletas padrão do setor, recomendamos dar uma olhada no colorbrewer. Algumas coisas importantes a considerar ao projetar sua própria paleta:

1. Dependendo do caso de uso, uma paleta deve ter de 5 a 9 cores. Neste dashboard, criaremos uma paleta de 5 cores usando o Adobe Color.
2. As cores devem ser distinguíveis tanto no modo claro quanto no escuro, portanto, evite cores extremamente brilhantes ou extremamente escuras.
3. Como o daltonismo para vermelho/verde é comum, evite colocar essas cores próximas uma da outra na paleta.

Para a nossa paleta de visualização personalizada do Databricks, começamos com a cor da nossa marca (#15AFDD) no Adobe Color. Aplicamos a harmonia de cores “quadrada” para derivar 4 cores adicionais (#83DE14, #DE7914, #BE14DE, #3A7689) que estão uniformemente espaçadas na roda de cores. A partir daí, no Adobe Color, você pode fazer mais alguns ajustes:

• Altere os tons clicando no hex de cor individual e movendo gradualmente o controle deslizante de matiz.
• Ajuste o brilho das cores na paleta clicando no hex da cor e atualizando o controle deslizante de brilho. O objetivo é manter as cores distintas, especialmente os pares adjacentes.
• Teste as cores resultantes no verificador de daltonismo do Adobe Color para simular como sua paleta aparece em condições comuns, incluindo Deuteranopia, Protanopia e Tritanopia.
• Teste no AI/BI em dashboards reais nos modos claro e escuro.

A paleta de cores final que temos é #15AFDD, #2375A8, #52A870, #C85070, #C89930.

Assim que sua paleta passar nas verificações de acessibilidade, aplique-a para ver seus gráficos ganharem vida. Esta é a paleta que escolhemos após passá-la pelo simulador de daltonismo do Adobe Color e testá-la nos modos claro e escuro.

Conclusão

Decisões de design que parecem pequenas isoladamente se somam rapidamente. Uma fonte consistente, uma paleta de cores intencional e um layout criado para permitir que os visualizadores leiam facilmente. Juntos, eles transformam um dashboard em algo em que as pessoas confiam. Os temas do workspace ajudam a dimensionar isso em toda a sua organização, de modo que as boas práticas de design se tornem o ponto de partida para cada dashboard.

O dashboard que analisamos está disponível aqui se você quiser explorá-lo por conta própria. Se você ainda não está usando dashboards de AI/BI, saiba que somos integrados nativamente ao Databricks.

Tem ideias ou feedback? Compartilhe conosco.

Baixe o dashboard para explorar por conta própria

(Esta publicação no blog foi traduzida utilizando ferramentas baseadas em inteligência artificial) Publicação original