Diretrizes de estilo de visualização de dados para Suplementos do Office

Boas visualizações de dados ajudam os usuários a encontrarem informações em seus dados. Eles podem usar essas informações para contar histórias que informam e convencem. Este artigo fornece diretrizes para ajudá-lo a criar visualizações de dados eficazes em seus suplementos para o Excel e outros aplicativos do Office.

Recomendamos que utilize a IU Fluente para criar o cromado para as visualizações de dados. A Fluent UI inclui estilos e componentes que se integram perfeitamente com o aspeto e funcionalidade do Office.

Elementos de visualização de dados

As visualizações de dados partilham uma estrutura geral e elementos visuais comuns e interativos, incluindo títulos, etiquetas e gráficos de dados, conforme mostrado na figura seguinte.

Gráfico de linhas com título, eixos, legenda e área de desenho etiquetada.

Títulos de gráfico

Siga estas diretrizes para títulos de gráficos.

  • Deixe seus títulos de gráfico bem legíveis. Posicione-os para criar uma hierarquia visual em relação ao restante do gráfico.

  • Em geral, use maiúsculas nas frases (a primeira letra da primeira palavra em letra maiúscula). Para criar o contraste ou reforçar hierarquias, você poderá usar todas em maiúsculas, mas use isso com moderação.

  • Incorpore a rampa do tipo Fluent UI para tornar os seus gráficos consistentes com a IU do Office, que utiliza o Segoe. Você também pode usar outra fonte para diferenciar o conteúdo do gráfico da interface do usuário.

  • Use tipos sem serifa com contadores grandes.

Rótulos dos eixos

Deixe os rótulos dos eixos escuros para serem lidos claramente, com um bom contraste entre as cores do plano de fundo e do texto. Verifique se não estão tão escuros que competem com a tinta dos dados.

Cinza claro é mais eficaz para rótulos dos eixos. Explore as seguintes paletas de cores neutras da IU Fluent.

Tinta dos dados

Os pixels que representam os dados reais em um gráfico são chamados de tinta dos dados. Esse deve ser o foco central da visualização. Evite o uso de sombras, contornos pesados ou elementos de design desnecessários que distorcem ou competem com os dados. Use gradientes apenas quando os valores dos dados estiverem vinculados aos valores das cores. Evite gráficos tridimensionais, a menos que um valor mensurável e objetivo seja associado a uma terceira dimensão.

Cor

Escolha cores que acompanham os temas do sistema operacional ou aplicativo em vez de cores codificadas. Ao mesmo tempo, certifique-se de que as cores que aplicar não distorcem os dados. O uso incorreto de cores nas visualizações de dados pode resultar em distorção de dados e leitura incorreta de informações.

Para ver as práticas recomendadas para o uso de cores nas visualizações de dados, consulte o seguinte:

Linhas de grade

As linhas de grade geralmente são necessárias para a leitura precisa de um gráfico, mas elas devem ser apresentadas como um elemento visual secundário, aprimorando a tinta dos dados e não competindo com ela. Use linhas de grade estáticas finas e leves, a menos que elas tenham sido projetadas especificamente para alto contraste. Você também pode usar interação para criar linhas de grade dinâmicas, que aparecem no contexto quando um usuário interage com um gráfico.

Cinza claro é mais eficaz para linhas de grade. Explore as seguintes paletas de cores neutras da IU Fluent.

A imagem a seguir mostra uma visualização de dados com linhas de grade.

Visualização de dados do gráfico de linhas com linhas de grelha.

Legendas

Adicione legendas, se for necessário:

  • Distinguir entre séries.
  • Apresentar alterações de dimensionamento ou valor.

Certifique-se de que as legendas melhoram a tinta digital dos dados e não competem com a mesma. Coloque as legendas:

  • Recue à esquerda acima da área de plotagem por padrão, se todos os itens de legenda se ajustarem acima do gráfico.
  • No canto superior direito da área de desenho, se todos os itens de legenda não se ajustarem acima do gráfico, torne-o deslocável, se necessário.

Para otimizar a legibilidade e a acessibilidade, mapeie os marcadores de legenda para a forma de gráfico relevante. Por exemplo, use marcadores de legenda em círculo para gráfico de bolhas e de plotagem de dispersão. Use marcadores de legenda de segmento de linha para gráficos de linhas.

Dicas de ferramenta e rótulos de dados

Verifique se as dicas de ferramentas os e rótulos de dados têm espaço suficiente em branco e variação de tipos. Use algoritmos para minimizar oclusão e conflito. Por exemplo, uma dica de ferramenta pode ser exibida à direita de um ponto de dados por padrão, mas ser exibida à esquerda se forem detectadas bordas à direita.

Princípios de design

A equipe de Design do Office criou o conjunto de princípios de design a seguir, que usamos ao criar novas visualizações de dados para o pacote de produtos do Office.

Princípios de design visual

  • As visualizações devem honrar e aprimorar os dados, facilitando a compreensão. Realce os dados, adicionando elementos de suporte somente conforme o necessário para fornecer o contexto. Evite embelezamentos desnecessários, como sombras e contornos, lixo de gráficos ou distorção de dados.
  • As visualizações devem incentivar a exploração fornecendo comentários visuais interessantes. Use padrões de interação bem estabelecidos, controles de interface e feedback claro do sistema.
  • Incorpore princípios de design consagrados. Use princípios tipográficos e de design de comunicação visual estabelecidos para aprimorar a forma, a legibilidade e o significado.

Princípios de design de interação

  • Design para permitir a exploração.
  • Permitir interações diretas com objetos que revelam novas informações (classificação ao arrastar, por exemplo).
  • Use modelos de interação simples, diretos e familiares.

Para obter mais informações sobre como criar visualizações de dados interativas e amigáveis, confira Princípios e armadilhas de interface do usuário.

Princípios de design de animação

A animação segue o estímulo. Os elementos visuais devem se mover na mesma direção e com a mesma velocidade. Isso se aplica a:

  • Criação do gráfico
  • Transição de um tipo de gráfico para outro
  • Filtragem
  • Classificação
  • Adição ou subtração de dados
  • Revisão ou segmentação de dados
  • Redimensionamento de um gráfico

Crie uma percepção de causalidade. Quando preparar animações:

  • Prepare uma coisa de cada vez.
  • Prepare as mudanças nos eixos antes da mudança na tinta dos dados.
  • Prepare e anime objetos como um grupo se eles estiverem se movendo na mesma velocidade e na mesma direção.
  • Prepare elementos de dados em grupos de não mais do que 4 a 5 objetos. Os espectadores têm dificuldade de acompanhar mais de 4 e 5 objetos independentemente.

A animação adiciona significado.

  • Animações aumentam a compreensão do usuário das alterações nos dados, fornecem contexto e atuam como uma camada de anotação não verbal.
  • A animação deve ocorrer em um espaço de coordenadas significativo da visualização.
  • Personalize a animação para o visual.
  • Evite animações gratuitas.

A animação segue os dados.

  • Preserve o mapeamentos de dados. Se uma área estiver vinculada a uma medida, mantenha essa área na transição.
  • Manter uma linguagem de design de animação consistente. Sempre que possível, mapeie a animação da visualização de dados para a linguagem de design de animação do Office. Use animações semelhantes para tipos de gráfico semelhantes.

Acessibilidade nas visualizações de dados

  • Não utilize a cor como a única forma de comunicar informações. As pessoas que são daltônicas não serão capazes de interpretar os resultados. Use forma, tamanho e textura, além de cor quando possível para comunicar informações.
  • Torne todos os elementos interativos, como botões de ação ou listas de escolha, acessíveis a partir de um teclado.
  • Envie eventos de acessibilidade para leitores de tela para anunciar alterações de foco, dicas de ferramentas e assim por diante.

Confira também

  • Last updated on