Tornar seu aplicativo atraente

Objetivos de aprendizagem

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

• Entender por que o design da superfície do aplicativo é o último passo do processo.
  
• Aprender os elementos da superfície de um aplicativo.
  
• Analisar problemas na superfície do aplicativo de exemplo Motivador e corrigir alguns deles.
  
• Ver a versão final do aplicativo.
  

Os últimos serão os primeiros

Como falamos no início, é fácil começar criando elementos de painel e aplicativo lindos. O Analytics Studio oferece várias maneiras fáceis de desenvolver explorações, escolher tipos de gráfico elegantes, dimensionar e posicionar widgets de painel, alterar tamanho e cores de fontes e muito mais.

Como você já viu, os gráficos mais bonitos não ajudam seu público em nada se não forem desenvolvidos no contexto certo. O que queremos dizer com contexto? O contexto envolve as ideias e o objetivo do aplicativo, e sua estrutura planejada.

Você já estabeleceu essas partes do Motivador. Agora é hora de pensar no acabamento, para tornar a superfície do aplicativo mais cativante sobre seus elementos de base. Mesmo que você não trabalhe nele até o final do processo, essa é a parte do aplicativo que seus usuários veem primeiro. É melhor fazê-la brilhar, para que seu público queira usar todos os recursos que deram tanto trabalho para criar.

Como criar apelo visual

Agora é hora de pensar realmente na aparência que o aplicativo deve ter. É aqui que você faz escolhas estéticas para dar apelo visual, o que pode aumentar o apego emocional dos usuários a seu aplicativo. Veja os elementos que você pode controlar para fazer os recursos ficarem tão incríveis que os usuários não veem a hora de experimentar.

• Os tamanhos e as formas usadas: Elas refletem a importância dos recursos e estão equilibrados entre si? Elas usam o espaço de maneira eficiente?
  
• Os tipos de gráficos usados: Eles são as maneiras certas de visualizar os dados apresentados? Eles são consistentes, por exemplo, gráficos de tipos semelhantes usados em dados de tipos semelhantes (e gráficos diferentes usados em dados diferentes)?
  
• Alinhamento, espaço e posicionamento: Os elementos estão dispostos de maneira ordenada e agradável? Eles são diferentes entre si a ponto de ser possível identificar onde um começa e outro termina? Há muito espaço (ou pouco) separando os elementos?
  
• Cores: A paleta de cores é agradável e harmoniosa? Os elementos que precisam ser destacados estão coloridos eficientemente? Os elementos semelhantes estão coloridos consistentemente?
  
• Fontes: Os tamanhos e tipos estão consistentes, com os mesmos níveis de informação apresentados usando os mesmos tamanhos e fontes?
  
• Identidade visual: Se aplicável, você incorporou os elementos de identidade visual da equipe ou da empresa?
  

Como tornar o Motivador mais motivante

Com esses elementos em mente, vamos pensar nas partes do painel do Motivador que podem ser, bem, desmotivantes. Tem partes da superfície que são obviamente erradas (você chegou a perceber algumas antes).

• Não é possível ver o nível de detalhe das atividades de que precisamos. Talvez seja necessário incluir outros tipos de gráfico.
  
• E por que as barras de atividades diferentes (chamadas, emails e outros) são tão grandes? É claro que o espaço que elas ocupam poderia ser usado de maneira mais eficiente e dar espaço a outras métricas úteis (como médias ou parâmetros de comparação, detalhes sobre cada tipo de atividade, entre outras coisas).
  
• O tamanho do tipo está inconsistente. As métricas à esquerda têm tamanhos diferentes. Existe algum padrão aqui? Ou isso é aleatório? Não dá para dizer.
  
• Algumas partes do painel se fundem. Nome do proprietário é parte de um widget que inclui vários valores numéricos.
  
• As cores e os tamanhos das seções que mostram os totais não fazem sentido.
  

Minha transformação do Motivador – parte 3: tamanho e cores são importantes

Agora estamos em uma fase do design em que começamos a corrigir essas coisas. No final da última etapa da transformação, você viu que as caixas de resumo mostrando as atividades atrasadas, as concluídas e os seus totais tinham tamanhos e cores incorretos. Vamos voltar para o Analytics Studio e corrigir isso.

1. Abra o painel Meu motivador no designer de painel.
   
2. Redimensione a métrica Total de atividades para ter quatro células de largura.
   
3. Arraste a métrica Atividades atrasadas uma célula para a esquerda.
   
4. Amplie a métrica Atividades concluídas uma célula para a esquerda. Seus widgets de métrica agora têm o mesmo tamanho. 
   

Mas eles não têm a mesma cor.

5. Clique na métrica Total de atividades.
   
6. No painel de propriedades do widget à direita, clique em Estilo do widget para expandi-lo.
   
7. Em Cor de segundo plano, clique na cor atual e selecione azul escuro. 
   

8. O texto do widget também está em uma cor escura, ou seja, ficou difícil de ler. Isso é fácil de resolver. No painel de propriedades do widget, clique em Title (Cargo) para expandi-lo. Altere Title Color (Cor do cargo) para branco.
   
9. Agora, expanda Number (Número) e atualize Number Color (Cor do número) para branco. Assim fica melhor.
   
10. Repita as etapas 5 a 9 para alterar as cores de segundo plano e texto nas métricas Atividades atrasadas e Atividades concluídas.
    
11. Salve seu painel atualizado e visualize-o. Uau! Agora as métricas estão realmente aparecendo. 
    

Há mais um ajuste que você pode fazer aqui. Essas métricas ainda estão um pouco desconectadas e você realmente quer que elas sejam vistas como uma coisa só. Lembra do widget de contêiner que você usou para mover os widgets em conjunto? Ele pode ajudar aqui.

1. Edite o painel.
   
2. Para selecionar o widget de contêiner, passe o mouse sobre a borda do contêiner abaixo de uma das métricas e clique quando o cursor virar uma cruz de setas.
   
3. No painel de propriedades do widget à direita, clique em Estilo do widget para expandi-lo.
   
4. Altere a cor do segundo plano para o mesmo azul escuro que foi usado nas métricas.
   
5. Salve seu painel atualizado e visualize-o.
   

Agora, as métricas parecem fazer parte da mesma história.

Motivador, agora transformado

Estamos chegando lá. Você identificou o público, o objetivo e os recursos do aplicativo. Você entendeu como o Motivador não atendeu às expectativas do design. E fez algumas correções em todos os níveis: objetivo, estrutura e superfície.

Agora está claro que seu aplicativo está chegando perto das metas de design. Mas também está claro que falta boa parte do caminho. Não podemos levar você lá passo a passo. Isso vai além do escopo deste módulo do Trailhead. Apresentamos a você as noções básicas de design e ensinamos algumas técnicas para ajudá-lo a começar a expressar suas ideias.

Mas podemos mostrar o Motivador transformado por nossa equipe de design. Assim, sem mais demora, volte para o Analytics Studio e abra o painel do Motivador 2.

Ótimo! Você pode ver logo de cara como a transformação final é melhor que a original.

• Aprimoramentos de objetivo. Ele agora inclui o tão importante placar à esquerda, um filtro de intervalo de tempo e vários outros detalhes sobre todos os tipos de atividade. Além disso, ele inclui detalhes de conta.
  
• Aprimoramentos de estrutura. Os KPIs resumidos estão na parte superior, para onde os movemos. Além disso, os KPIs para cada membro da equipe estão no canto superior esquerdo, onde ficam mais visíveis e fáceis de acessar. E o espaço está distribuído de maneira muito mais adequada: em vez de barras largas representando os totais de cada atividade, o mesmo espaço é ocupado agora por vários detalhes para todas as atividades. Além disso, os elementos semelhantes estão agrupados e os diferentes estão separados.
  
• Aprimoramentos de superfície. A estética está correta e faz com que seus usuários fiquem empolgados com o aplicativo. As cores funcionam em harmonia. É fácil escolher elementos na nova paleta de cores. Os tamanhos de tipo estão consistentes. Elementos semelhantes estão com tamanhos, cores e distribuição semelhantes. Tudo parece bem profissional.
  

Legal, verdade? É claro que trapaceamos um pouquinho e levamos você diretamente para a linha de chegada. Mas esperamos que você consiga ver como chegamos lá. E também esperamos que, usando os recursos indicados neste módulo, você possa chegar lá sozinho com um pouco de tempo e determinação.

O trabalho do administrador designer nunca termina

Talvez isso seja suficiente por enquanto. Mas, como administrador da DTC, você verá que o que é suficiente por enquanto nunca será suficiente para sempre. Seus usuários esperam ver aprimoramentos, e sempre dá para tornar um aplicativo mais útil, não é?

Por exemplo, você ouviu falar do recurso de páginas do Analytics Studio, que pode facilitar o uso dos painéis dividindo o conteúdo em várias páginas. Elas contam uma história criando um caminho dinâmico ao longo do seu painel. Cada atividade no Motivador poderia ganhar sua própria página, e você pode adicionar detalhes úteis, como ver o progresso de cada representante em direção à meta, negócios fechados ganhos e perdidos e receita total. Isso pode ajudá-los a entender como as atividades contribuem para o desempenho das vendas e ver se determinados tipos de atividade têm mais impacto que outros.

Mas isso fica para outro dia. Sua jornada inesperada pelo mundo do design já está acabando. Só falta responder a estas perguntas e ganhar seu emblema muito merecido.

Recursos

• Create Dashboard Pages na Ajuda do Salesforce.