Práticas recomendadas para projetar visualizações

Desobstruindo seus aplicativos

Excesso de informações em um aplicativo torna mais difícil ver o que é importante. O estilo de interface do usuário moderno de hoje tem um design mais limpo, simples e direto. Um design simplificado conduz sutilmente o leitor e permite que ele permaneça focado.

Menos é mais

Em geral, os usuários tentam incluir muitas informações em um aplicativo. Gráficos de linhas com várias medidas podem ser confusos e difíceis de interpretar. Tente criar várias visualizações menores para distribuir essas informações na página. Isso também permite que o leitor compare e contraste de forma eficiente as visualizações que estão lado a lado. Outra opção é usar dimensões e medidas alternativas para permitir que o leitor rapidamente alterne entre as medidas sem deixar a visualização muito atulhada. Para obter mais informações, consulte Alterando os dados de uma visualização.

Existem várias maneiras de melhorar a estética e a funcionalidade do seu aplicativo. Dependendo do seu público-alvo e de quais dados você deseja destacar, a estratégia de design da sua visualização pode ter um grave impacto sobre a interpretação dos dados por parte dos leitores.

Conheça seus limites

Os consumidores das suas visualizações podem estar trabalhando com espaço de tela ou resolução limitados. O Qlik Sense usa um design ágil para lidar com essas limitações. No entanto, se o espaço da tela ou a resolução for muito limitado, certas acomodações de design serão necessárias. Essas podem incluir:

• Um subconjunto de dados que estão sendo exibidos em gráficos de barras e gráficos de linha. Quando o número de valores de dimensão excede a largura da visualização, um minigráfico com uma barra de rolagem é exibido.
• Menus recolhidos para selecionar filtros de dados. Quando o número de valores de dimensão excede o espaço disponível para o painel de filtros, o menu é recolhido. Os consumidores do aplicativo precisam clicar no nome da dimensão no título do painel de filtros para abrir um novo painel. Em seguida, eles podem fazer suas seleções no novo painel. Além disso, quando há espaço limitado, os nomes de dimensões podem aparecer como elipses nos títulos do painel de filtros. Os consumidores do aplicativo precisam clicar nas elipses para exibir o nome do painel de filtros.
• Nomes truncados nas legendas do gráfico. Os nomes que são muito longos para o espaço disponível para dimensões e medidas são truncados. Uma elipse é adicionada ao final do nome truncado. Os consumidores de aplicativos podem passar o ponteiro do mouse sobre o nome truncado para exibir o nome completo.
• Legendas, rótulos e títulos ausentes.

Os consumidores do aplicativo podem expandir visualizações para solucionar alguns desses problemas. No entanto, recomendamos que você teste seus aplicativos em dispositivos nos quais eles possam ser consumidos. Você também pode usar várias ferramentas para testes, como o modo de design ágil no Firefox (Ctrl + Shift + M). Se necessário, é possível mover as visualizações para novas pastas, reduzir a quantidade de dados mostrada nas visualizações e assim por diante.

Acessibilidade de cor

O espectro de cores é mais estreito para pessoas com deficiência visual relacionadas a cores. Elas podem interpretar sua visualização de forma diferente da que você pretendia.

Por exemplo, algumas pessoas veem as cores vermelha e verde mais como amarela ou marrom. Essa forma de deficiência visual de cor vermelha-verde é a mais comum. É importante mencionar isso, uma vez que o vermelho tem uma conotação negativa em visualizações de dados, especificamente em finanças.

Um status de KPI vermelho ou verde pode causar confusão. É possível usar formas com cores como indicadores de desempenho para tornar seus designs mais acessíveis. Por exemplo, use um círculo vermelho vazio para indicar algo ruim, um círculo verde preenchido para indicar algo bom e um triângulo como símbolo de aviso que só aparece quando um status de KPI está em um nível inaceitável.

Linhas, barras e fatias de pizza podem ser difíceis de distinguir quando as cores estão distorcidas.

Para obter mais informações, consulte Alterando a aparência de uma visualização.

Posicionamento de filtro e ícone

Filtros e ícones são uma parte essencial da visualização de dados, mas pode ser difícil saber onde colocá-los ou como classificá-los. Muitas vezes, você pode antecipar onde o usuário começará a ler com base em alguns princípios de design bem estabelecidos.

Posicionamento à esquerda

Vários sites populares usam blocos e filtros de navegação no lado esquerdo. Isso se deve ao fato de que muitos idiomas são lidos da esquerda para a direita. Como resultado, o lado esquerdo da tela é onde esses leitores observam com mais frequência. Os usuários que estão pesquisando conteúdo tendem a gravitar em direção ao lado esquerdo da tela. Quanto mais à direita os objetos estiverem, menos os usuários olharão para eles. Se todos os seus filtros e ícones estiverem empilhados verticalmente à esquerda, eles terão o mesmo peso.

Como alternativa, com idiomas em que o texto é escrito da direita para a esquerda, o contrário é verdadeiro. Isso deve ser mantido em mente se os seus aplicativos forem traduzidos para esses idiomas.

Posicionamento no topo

Outra opção de posicionamento comum para ícones e filtros é ao longo do topo de um aplicativo. Não posicionar filtros ou ícones à esquerda dá mais espaço para visualizações maiores com menus que distraem a atenção. Quando filtros e ícones são posicionados acima das visualizações, eles também são vistos como separados do conteúdo abaixo. Isso pode ajudar a mostrar ao leitor que você está priorizando os filtros ou o ícone. Se todos os seus filtros e ícones estão lado a lado no topo, aquele que estiver mais à esquerda terá mais importância e será priorizado pelo leitor.

Para obter mais informações, consulte Estruturando um aplicativo usando pastas.

Hierarquia das informações

Às vezes, você quer que o leitor priorize certas visualizações no lugar de outras. É possível mostrar hierarquias de informações usando algumas práticas recomendadas de design essenciais. Por exemplo, pode usar diferentes tamanhos para enfatizar algumas visualizações. As informações maiores são vistas como mais importantes: ao aumentar a fonte ou o tamanho do gráfico, você pode mostrar ao leitor onde procurar primeiro.

O posicionamento da página também tem a sua função na hierarquia das informações. As informações na parte superior da página são percebidas como mais importantes do que aquelas na parte inferior, pois são lidas primeiro. Informações na primeira página são percebidas como mais importantes que as informações na última página.

Adição de contexto a KPIs

KPIs são uma ótima maneira de comunicar algumas das grandes insights dentro do seu aplicativo. No entanto, valores de KPIs não fornecem contexto para os números e cálculos que estão acontecendo nos bastidores. Uma luz verde ao lado de um KPI não diz ao leitor se a meta foi alcançada por pouco ou se você a superou significativamente.

Para ajudar a dar contexto aos seus KPIs, inclua informações de suporte ao lado do valor em um texto menor. Por exemplo, você pode comparar o valor do KPI atual com o valor do ano anterior. Você também pode adicionar um pequeno gráfico de barras sem eixos ou valores para fornecer informações sobre as tendências atuais.

Evite as armadilhas da visualização de dados

Para obter os benefícios das visualizações de dados, você deve evitar as armadilhas. Aqui estão algumas das mais comuns:

Abuso das cores

Não exagere nas cores. Saiba que a cor errada no lugar errado pode causar confusão em vez de clareza. Além disso, a mesma cor pode significar coisas diferentes em regiões distintas do mundo.

Uso incorreto de gráficos de pizza

Evite colocar gráficos de pizza lado a lado para comparação. Tente não colocar informações excessivas neles.

Poluição visual

O excesso de informação frustra o objetivo de uma apresentação clara. Use no máximo nove indicadores-chave do desempenho e remova toda a poluição visual.

Estilo no lugar da substância

Uma visualização bonita não é necessariamente a mais eficaz. Use as práticas recomendadas de design o tempo todo.

Dados inválidos

Detecte e corrija problemas em seus dados antes de apresentá-los. Não deixe sua visualização assumir a culpa pelas informações erradas.