Estruturar seu aplicativo

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

  • Entender a importância de estruturar o conteúdo de seu aplicativo.
  • Explicar o processo de estruturação de seu aplicativo.
  • Determinar a estrutura do aplicativo Motivador e começar a corrigi-la.

Critérios para estruturar suas ideias

Você tem um ótimo conjunto de ideias para recursos que expressam o objetivo do Meu motivador e podem dar aos gerentes de vendas o que eles querem. Agora é necessário estruturá-los de acordo com vários critérios.

  • Prioridade. O que é mais importante para o público e o propósito?
  • Lógica. O que precisa ser entendido primeiro?
  • Nível de granulosidade. O que é mais geral e o que é mais específico?
  • Semelhança. Itens semelhantes devem ser organizados com itens semelhantes. Conteúdo distinto deve ficar separado.

Tendo isso em mente, você olha novamente para a lista de ideias da reunião com pizza. Você já priorizou a lista, ou seja, já é meio caminho andado. Vamos vê-la resumidamente.

  1. Placar e totais de atividade, com atividades concluídas e atrasadas.
  2. Tipo de atividade por semana.
  3. Ver as atividades conforme elas vão subindo para cada nível de gerência, do gerente de vendas até o VP de vendas, passando pelo gerente regional.
  4. Atividades de cada representante e de cada conta.
  5. Seções separadas para emails, chamadas e outros.
  6. Ver atividades a cada semana.
  7. Média de atividades como parâmetro de comparação.
  8. Detalhes para cada tipo de atividade.
    • Chamadas feitas e recebidas.
    • Prioridade do email.
    • Eventos concluídos e abertos.
    • Tarefas concluídas e abertas.

Parece uma lista minuciosa e bem ordenada, ou seja, não deve ser muito difícil determinar como organizá-la em um painel.

Conceitos de estrutura do aplicativo

Para ter inspiração sobre estruturas para suas ideias, primeiro vamos dar uma olhada em alguns conceitos de estruturação usando alguns aplicativos do Einstein Analytics como exemplo.

De forma bem geral, os aplicativos são estruturados em volta das pessoas que vão usá-los e do que elas querem aprender com os aplicativos. O Sales Analytics usa esse tipo de abordagem voltada para personalidades e oferece conteúdo amplo para servir a vários tipos de usuários: líderes de vendas, gerentes e representantes.

Uma estrutura voltada para pessoas mostrando os painéis de Líder de vendas, Gerente de vendas e Representante de vendas

Seja para servir a um ou mais tipos de usuários, um aplicativo pode usar uma estrutura voltada para tarefas organizada em torno do que os usuários querem fazer. O Service Analytics oferece conteúdo aprofundado para lidar com o gerente de atendimento. Seu conteúdo é organizado de acordo com as tarefas: examinar casos, medir o desempenho da equipe e analisar canais e contas.

Uma estrutura voltada para tarefas do aplicativo Service Analytics.

Com o Motivador, você concluiu que há só um tipo de usuário, uma personalidade, a dar suporte. Seu público de gerentes de vendas quer realizar tarefas como medir os colaboradores com melhor desempenho e analisar atividades por resumo (chamadas, emails, tarefas e eventos) e por conta. Você pode usar uma estrutura simples voltada para tarefas em seu único painel, como esta.

Estrutura do Motivador
Medir os colaboradores com melhor desempenho Analisar os resumos das atividades Analisar as atividades por conta
Placar mostrando as atividades de cada representante Cada tipo de atividade (emails, chamadas, tarefas, eventos) por semana Detalhes da conta
Média de atividades como parâmetro de comparação Atividades agrupadas no nível da gerência
Detalhes de cada atividade
  • Chamadas feitas/recebidas
  • Prioridade do email
  • Eventos concluídos/abertos
  • Tarefas concluídas/abertas

O gráfico mostra uma organização lógica da métrica de atividade de acordo com as prioridades determinadas por você e pela equipe. Isso pode ser usado na próxima fase do trabalho, ou seja, determinar como colocar a métrica em um painel.

Da estrutura ao layout

Agora que você sabe que tipo de estrutura usar, precisa começar a pensar em como distribuir os recursos. Você tem várias ideias sobre os recursos que podem atender às necessidades de seu público. Agora é necessário ter um plano concreto para expressar essas ideias em uma hierarquia lógica. Você precisa organizar os recursos em um fluxo simples do geral e/ou mais importante para o específico e/ou menos importante.

Aqui, você deve determinar se precisará de um ou mais painéis. Alguns aplicativos exigem muitos, como os aplicativos padrão Sales e Service Analytics. Outros precisam só de um, ou de alguns, como o Adoption e o Financial Services Analytics. Como vimos, um aplicativo é definido pelo seu objetivo, não pela quantidade de ativos.

Como exemplo, veja o plano original da hierarquia e do fluxo do Sales Analytics.

O fluxo do aplicativo Sales Analytics

Ele começa com o que a maioria do público precisa: ver o panorama geral do desempenho das vendas. Em seguida, ele apresenta exibições detalhadas do panorama de acordo com um fluxo lógico, começando com o progresso em direção à meta, o KPI mais importante para a equipe de vendas. É óbvio que o aplicativo precisa de vários painéis para expressar esse fluxo.

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.

Padrões de design para layout de painel

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 padrão de design de layout em F mostrando componentes arranjados no formato da letra F.

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).

Um padrão de design de layout em Z mostrando componentes arranjados no formato da letra Z.

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.

Padrão lado a lado, com componentes arranjados ao lado uns dos outros.

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.

Um esboço da estrutura do painel do Motivador

Ótimo! Você estruturou seu aplicativo. Agora é hora de corrigir o Motivador.

Minha transformação do Motivador – parte 2: encontrados no espaço

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.

  1. Acesse o painel Meu motivador que você usou na unidade anterior.
  2. Se o painel não estiver aberto no designer de painéis, clique no botão Editar (Botão Editar na parte superior do painel).
  3. No painel de widgets à esquerda, arraste um widget de contêiner (Ícone de widget de contêiner no painel de widgets do lado esquerdo do painel) para a tela do painel abaixo da métrica de Total de atividades. Captura de tela mostrando o widget de contêiner sendo arrastado para a tela do painel Dica Dica Os contêineres são ótimos para manter os widgets relacionados agrupados quando são movidos. Use-os à vontade!
  4. Use as alças de redimensionamento (Uma das caixas nas bordas do widget que você pode arrastar para redimensioná-lo) no contêiner para redimensionar o contêiner para o mesmo tamanho das três métricas. Widget de contêiner na tela do painel Dica Dica Se você perder o contêiner de vista, clique ou passe o cursor do mouse sobre onde ele deve estar e ele aparecerá!
  5. Arraste a métrica de Total de atividades para o contêiner abaixo dela. Métrica arrastada para o widget de contêiner
  6. Repita a etapa 5 para as métricas Atividades atrasadas e Atividades concluídas. Agora que todas as métricas estão no contêiner, mova o contêiner para mover os widgets ao mesmo tempo.
  7. Passe o cursor do mouse sobre a borda do contêiner até que o cursor mude para uma cruz de setas; mantenha clicado. Captura de tela mostrando métricas dentro do contêiner, com o cursor passando por cima da borda do contêiner
  8. Mantenha Shift pressionado e arraste o contêiner para logo abaixo dos filtros ao mesmo tempo. Captura de tela mostrando três métricas na parte superior do painel Dica Dica Quando você mover um widget, pressione Shift para mover outros widgets do lugar automaticamente. Chamamos isso de Refluxo.
  9. Salve seu painel atualizado e visualize-o.

Bem melhor, certo? E muito simples também. Mas longe de estar perfeito: você percebe que as caixas de KPI do resumo não são da mesma cor ou do mesmo tamanho. Você está pulando para a próxima parte do processo de design: acabamento da superfície. Veremos isso na próxima unidade, que é a última parte do processo de design.