Dicas de navegação do LuckyTemplates

Na postagem do blog de hoje, discutirei como criar uma experiência de navegação suave e fluida ao visualizar um painel. Pessoalmente, trato a navegação do LuckyTemplates como um conjunto complexo de vários botões com finalidades e aplicativos diferentes.

Esta é uma continuação da minha série sobre o desenvolvimento da transparência do relatório. Você pode conferir a primeira parcela onde falo sobre design de layout aqui .

Índice

• Quatro tipos de navegação do LuckyTemplates
• Posicionamento de Navegação Eficaz
• 3 soluções alternativas para navegação suplementar
• Efeito de colapso e expansão
• Usando Visuais Personalizados
• Conclusão

Quatro tipos de navega��ão do LuckyTemplates

Existem quatro tipos de navegação . A navegação do painel principal fornece acesso às principais seções ou objetos de análise. Este é o tipo de navegação que você notará nesta página de apresentação específica.

Um exemplo perfeito disso seriam os botões de navegação que alternam as páginas de uma análise de receita para uma análise de despesas digitais ou uma mudança de uma análise de uma demonstração de resultados para um relatório de dados baseados em volume operacional.

Além disso, você pode usar a navegação suplementar , que o leva à análise paralela dentro da mesma seção. Por exemplo, você analisa as despesas operacionais na visão geral e depois muda para uma análise da folha de pagamento ou mostra as despesas por departamento.

Você também pode ter botões adicionais que mudam a forma de visualizar um determinado dado. Por exemplo, alternar entre um gráfico de barras empilhadas e uma exibição tabular ou alternar entre análise de receita por tipo ou linha de negócios para receitas por contratante ou faturas. Também pode ser um botão que leva você ao mesmo gráfico com métricas diferentes.

No entanto, na maioria dos casos, é mais eficiente lidar com essas transições usando fórmulas DAX, como a , ou usando parâmetros de campo recém-adicionados.

E, finalmente, temos a navegação funcional, que oferece controle adicional sobre as páginas do relatório, incluindo recursos como retornar à página inicial, retornar a qualquer página usada anteriormente, redefinir todos os filtros atuais e retornar ao estado padrão em termos de seleção de filtro e configurações de visualização.

Há também a navegação drill-through , que permite detalhar um ponto específico ou categoria de dados para outra página com análise detalhada.

Posicionamento de Navegação Eficaz

Todos esses tipos de navegação ajudam você a estruturar e localizar com eficiência os painéis de navegação com botões no lugar certo do seu relatório.

Como você pode ver nesta página, o painel de navegação principal foi colocado na seção central superior direita do relatório. Este é um posicionamento de navegação eficaz porque reflete o movimento natural do olho das seções mais importantes à esquerda para as diferentes seções à direita.

Esta é uma forma de contar histórias e permite que o usuário final navegue naturalmente da esquerda para a direita. Colocar o painel principal à esquerda também é uma ótima maneira de localizar os botões principais.

A localização geralmente depende de alguns fatores, mas um deles é a contagem de determinadas seções em seu relatório, que determina o número final de botões únicos aplicados no painel de navegação.

Nesta página em particular, você pode ver um exemplo de colocação lado a lado de dois tipos diferentes de navegação. Os botões que atendem a destinos diferentes serão colocados próximos às visualizações específicas para fornecer uma mensagem fácil de entender. A aplicação desses botões afetará o visual, mas não os outros.

Se observarmos atentamente o painel de navegação principal, perceberemos que dentro de uma determinada página de relatório, um botão está no modo ativo e visualmente distinguível dos outros botões, que estão inativos. Como você pode ver à direita, existem algumas configurações diferentes aplicadas aos diferentes estados dos botões.

Embora definir e personalizar a navegação seja mais importante do que números precisos ou porcentagens para determinados estados, existem algumas regras gerais que, se aplicadas, podem melhorar muito a experiência do usuário.

Torne seu botão ativo a parte mais visível do painel de navegação.

Isso dependerá da cor do plano de fundo exibido atrás do botão.

Procure aplicar um preenchimento visível junto com uma borda clara se estiver usando layouts mais escuros. Se você usar um plano de fundo mais claro, selecione uma borda que envolva visivelmente o botão para diferenciá-lo do plano de fundo ao redor. Dois pixels com uma borda funcionam bem na maioria dos casos.

Todos os botões inativos restantes devem ter mais preenchimento de mesclagem, o que pode ser obtido definindo um alto nível de transparência.

A cor da fonte é importante aqui e deve ser clara o suficiente para dar a impressão de que ainda não está ativa. Mas, ao mesmo tempo, deve dar a impressão de que é clicável.

Se quisermos escurecer as cores da fonte dos botões inativos, eles parecerão incapazes de navegar para diferentes seções.

Depois disso, a parte crucial é aplicar o efeito correto durante o estado de hover. Para este caso específico, usei um fundo sólido em um esquema de cores azul esverdeado e uma borda mais grossa para dar a impressão de que o botão está pronto para ser usado.

Você também pode fazer alguns ajustes no tipo e no tamanho do telefone, como deixar os botões em negrito no modo de foco. No entanto, acho que é uma distração, então adoto uma abordagem mais implícita aqui.

Os efeitos visuais ao clicar no botão não são uma etapa crucial porque a duração do clique no botão ao navegar para outra página é marginal. O efeito não é visível. No entanto, definir o tamanho da fonte para ser um pouco menor do que o tamanho padrão no modo de foco funciona muito bem.

3 soluções alternativas para navegação suplementar

As navegações suplementares são usadas para navegar para uma análise semelhante. Vou destacar três maneiras diferentes de definir a navegação semelhante a um aplicativo da web.

Obviamente, podemos aplicar um marcador padrão ou um navegador de página , que é um novo recurso do LuckyTemplates, mas prefiro algumas soluções alternativas para tornar isso mais notável.

A primeira solução é incluir um botão simplista com a ferramenta de troca dupla. A segunda solução é como a primeira opção que usa dois botões sem bordas separadas, mas com um ícone adicional que indica a página selecionada. A terceira opção é usar os botões formatados e o ícone que é a solução ideal.

Agora vamos mergulhar no arquivo pbix para mostrar como você pode configurar facilmente uma primeira solução simplista com alternâncias. Digamos que você tenha duas tabelas diferentes. Você precisará de dois recursos visuais, dois botões separados e dois botões de alternância.

Como esta é a nossa primeira tabela, vamos deixar de fora o botão (que indica a escolha à esquerda) e ocultar o outro botão (que indica a escolha certa).

Vamos mover dois objetos diferentes, que são as imagens de cima, para ter mais controle e esconder um deles neste cenário.

No segundo cenário, vamos desligar a primeira mesa e ligar a segunda mesa. Vamos criar outro marcador e programar este botão específico para navegar até o segundo marcador.

Agora temos uma navegação pronta para uso que podemos usar para passar de uma exibição para outra.

E agora voltamos à nossa apresentação para ver uma maneira única de incorporar a navegação complementar. A ideia principal por trás do aplicativo é criar um efeito drill-through artificial que opera com base em métricas e não em categorias de dados.

Deixe-me mostrar na prática como podemos ajustar a visualização do relatório de forma rápida e eficaz, dependendo do que realmente queremos analisar.

Temos aqui a página de resumo onde podemos realmente estruturar a navegação. Isso nos dá a capacidade de mover para diferentes visualizações, dependendo das métricas que gostaríamos de analisar. Ao clicar nos cabeçalhos, podemos alterar a visualização específica.

Em termos de execução técnica, podemos apenas agrupar os quatro diferentes visuais de acordo com os nomes de determinadas medidas. No momento em que clicamos no marcador Number of Calls , ativamos esse marcador específico e ocultamos todos os diferentes objetos agrupados que não pertencem ao Number of Calls .

E, inversamente, se quisermos analisar o tempo médio de manuseio em minutos, podemos exibir apenas esta visualização específica e depois ocultar todas as outras.

Em seguida, temos um exemplo de um painel funcional que fornece ao usuário final controle adicional sobre as páginas do relatório.

Isso inclui o botão de atualização , o botão Voltar e o botão da página inicial . Como você pode ver, existem ícones dentro dos botões para dar ao usuário final a sensação de ativar uma navegação diferente.

Idealmente, o ícone também deve ser alterado até certo ponto ao passar o mouse sobre o botão fornecido. Isso pode ser alcançado definindo três camadas de objetos. Formas como retângulos arredondados, por exemplo, são colocadas no botão, ícones são colocados no meio e botões são colocados na parte superior.

O objeto superior (que é o botão) é definido como semitransparente no estado completo. Faz com que o objeto do meio (que é o ícone levemente acinzentado) indique a inatividade do botão. Depois de passar o mouse, o botão do objeto superior é definido como totalmente transparente, o que desbloqueia a aparência do ícone original.

No geral, passamos de um botão com ícone acinzentado para um botão com ícone de cor mais clara, que parece ter sido ativado.

Deixe-me mostrar como essa navegação funcional funciona ao usar relatórios do LuckyTemplates. Por exemplo, fizemos algumas escolhas de acordo com alguns filtros específicos. Podemos restaurar todas as informações e todas as visualizações para o estado padrão com apenas um clique de volta ao estado padrão.

Por outro lado, se você quiser voltar para a página anterior, basta usar o segundo botão para ajudá-lo a navegar de volta para ela.

E, finalmente, se você quiser voltar para a página inicial, pode fazê-lo clicando no botão da página inicial.

Efeito de colapso e expansão

Em termos de navegação por botões, gostaria de apresentar mais uma possível aplicação que pode ser eficaz do ponto de vista analítico e útil em termos de design de relatórios. Mostrarei como os botões e a navegação podem ser usados ​​para modificar as visualizações acionando um efeito de colapso e expansão.

Mostrarei como você pode aplicar o efeito de expandir e recolher em alguns visuais, como tabelas ou gráficos.

Ao clicar em um botão, você pode ver que reduzimos parcialmente a tabela para revelar outro tipo de gráfico, que neste caso específico é o gráfico de linha mostrando tendências (o gráfico inferior).

O legal aqui é que podemos selecionar vários contratados e obter imediatamente informações sobre receitas e lucros no gráfico de linhas.

Usando Visuais Personalizados

Gostaria de apontar dois recursos visuais adicionais que valem a pena mencionar. Esses visuais não estão disponíveis no painel visual padrão do LuckyTemplates, mas você sempre pode baixá-los no marketplace.

Estes são o Chiclet Slicer e o Hierarchy Slicer . Se você preferir se concentrar nos aspectos visuais de seus relatórios, essas segmentações podem corresponder aos outros botões de navegação porque possuem muitas opções de formatação no painel de formatação.

Geralmente, o Chiclet Slicer funciona bem ao selecionar ou filtrar dados categóricos ou alternar métricas. Você pode definir recursos como bordas arredondadas, usar uma cor diferente ao passar o mouse sobre o botão e alterar a cor do plano de fundo dos botões ativos e inativos.

As desvantagens, no entanto, incluem a incapacidade de alterar o tipo de fonte, nenhuma opção de ter um botão adicional com todas as opções selecionadas e um tempo de carregamento significativo em comparação com segmentações nativas.

O segundo, que é o Hierarchy Slicer , também possui ótimos recursos, como a capacidade de ajustar a cor das categorias ativadas, o que é muito útil ao criar relatórios de layout escuro.

A principal desvantagem, no entanto, é ter apenas o modo suspenso e o tempo de carregamento significativo. No entanto, vale a pena testar ambas as opções ao criar portfólios, relatórios de demonstração e relatórios de clientes.

Conclusão

Nesta postagem de blog, discutimos diferentes soluções para navegação de página em relatórios do LuckyTemplates. Ter uma ótima navegação em seus relatórios é crucial para uma ótima experiência do usuário. Felizmente, as dicas que discuti forneceram várias maneiras de fazer isso no LuckyTemplates. 

Fique atento à parte 3 da minha série sobre o desenvolvimento da transparência do relatório, onde discutirei a importância do DAX.

Tudo de bom,
Gustaw Dudek