Você é que escolhe quantos painéis serão necessários com base no que vai ajudar a contar a história de seu aplicativo da melhor maneira. Independentemente do que você decidir, é necessário estabelecer as especificidades do layout do painel, seja de um ou de vários. Veremos como fazer isso a seguir.
Várias outras pessoas também tiveram que pensar em como expressar uma estrutura de conteúdo como a que você acabou de inventar. Por causa disso, existem alguns padrões de página consagrados que você pode considerar para encurtar o processo de criar um layout de página para o painel. Se seu aplicativo envolve mais de um painel, cada um pode seguir um desses padrões.
Vários painéis seguem o que é chamado de padrão F, pois ele lembra a letra F. Com esse layout, você pode colocar um resumo ou KPI de alta prioridade no painel esquerdo (no lado esquerdo do F). Outras visualizações de métrica mais granulares ficam posicionadas à direita (os dois traços horizontais da letra). Mais detalhes aparecem à direita e abaixo. Normalmente, as alterações que o usuário fizer no sumário, ou as visualizações mais granulares, como alterar uma seleção de filtro, também filtram os detalhes (com rótulos Detalhes e Lista acionável na imagem). No Analytics, chamamos isso de facetamento: alterar uma seleção de filtro em um widget de painel também altera o filtro de qualquer outro widget facetado no painel.
Um layout de padrão Z envolve uma varredura da página de cima para baixo. As informações de resumo ficam na parte superior central da página. As visualizações de apoio ficam abaixo do resumo e ocupam toda a largura da área de conteúdo. O facetamento do resumo e a visualização filtrarão os painéis mais detalhados (na imagem, Visualização, Detalhes e Lista acionável).
Outro layout comum: O padrão lado a lado, útil principalmente se você comparar duas métricas, já que pode colocá-las lado a lado. O usuário olha da esquerda para a direita e vice-versa para comparar as métricas. Um facetamento feito em uma das visualizações filtraria a outra visualização da mesma forma.
O que funciona melhor para o painel do Motivador? Você pode esquecer o padrão lado a lado, já que não está comparando nada. Talvez o padrão Z, mas, considerando tudo o que você terá que apresentar, o Z poderá ficar muito longo e forçar o usuário a rolar para baixo a fim de ver informações importantes.
Parece que o F é o melhor padrão para você, mas com algumas modificações. Você pode colocar o placar na esquerda e a parte superior do F pode mostrar as somas de atividades com detalhamentos de atividade por atividade abaixo disso. Abaixo de tudo isso pode ficar a lista de detalhes da conta.
Você decide experimentar. Você não se considera um artista, mas pode desenhar caixas no formato de um F e rotulá-los com suas ideias de recursos. Veja o que você criou.
Quando você tocou no painel da última vez, corrigiu um problema óbvio relativo ao objetivo. Agora, corrija um problema óbvio de estrutura. Mais uma vez: você não vai fazer tudo para ter uma estrutura perfeita. Siga alguns passos na direção certa para saber o que fazer quando for a hora de desenvolver seu próprio aplicativo.
Mova a métrica de resumo de atividades da parte inferior para a parte superior do painel, onde ela claramente deve estar. Depois de fazer isso, a barra horizontal superior do layout em F ficará no devido lugar.
No painel de widgets à esquerda, arraste um widget de contêiner ( ) para a tela do painel abaixo da métrica de Total de atividades. Dica Os contêineres são ótimos para manter os widgets relacionados agrupados quando são movidos. Use-os à vontade!
Use as alças de redimensionamento ( ) no contêiner para redimensionar o contêiner para o mesmo tamanho das três métricas. Dica Se você perder o contêiner de vista, clique ou passe o cursor do mouse sobre onde ele deve estar e ele aparecerá!