Calmamente UI Design
O processo de desenvolvimento da interface do estudo de caso UX: “Calmamente: simplificando o acesso ao atendimento psicológico remoto no país.”
A equipe escolheu a ferramenta Figma para realizar o design de interfaces do aplicativo. A escolha foi feita devido a possibilidade de interação instantânea entre os membros da equipe e por ser uma ferramenta gratuita para os primeiros projetos.
Foi criada uma biblioteca de estilos no Figma para tipografia, cores, ícones, botões e componentes, além disso, foi utilizado o Grid do Bootstrap e Grid de 8 pontos. Todos esses detalhes foram pensados para garantir agilidade, consistência, flexibilidade e escalabilidade no trabalho do designer e para certificar um handoff organizado para o desenvolvedor front-end.
Foram utilizadas duas fontes para realização desse projeto. A fonte Montserrat foi utilizada no nome do aplicativo, nos títulos e palavras com escala igual ou maior a 16px. É uma fonte limpa, que passa tranquilidade e possui uma leitura fácil. Para parágrafos e palavras com escala menor que 16px, foi utilizada a fonte Open Sans, que é pequena, versátil e super clean.
As duas fontes estão na biblioteca do Google Fonts, que garante, além de um fluxo de informação sem deixar o design leve, um boa legibilidade para uso digital e mais agilidade de carregamento na web.
A escolha se deu a partir da análise de outros serviços ligados a saúde mental — evitando estranheza para os usuários, por serem fontes familiares — , disponibilização gratuita, velocidade de carregamento — fontes sem serifa — e a garantia de reprodução fiel em todos os dispositivos.
A proporção das fontes foi definida a partir da base de 16px para o paragrafo (P) e da escala modular de 3:4, também conhecida como quarto perfeito. (modularscale.com)
A construção da biblioteca no Figma foi feita de forma com que a tipografia contemple a entrelinha pra cada corpo (120% para títulos e 150% textos) e peso de fonte.
As cores são elementos extremamente importantes, uma vez que podem remeter a diversos sentimentos e sensações. Sabendo disso e analisando as personas e jornadas, foram estabelecidos alguns sentimentos e sensações que gostaríamos que os usuários do aplicativo tivessem enquanto utilizavam o mesmo.
Calmaria, tranquilidade, bem-estar, equilíbrio, harmonia, paz, sossego, serenidade, relaxamento, repouso e controle emocional foram alguns dos sentimentos escolhidos.
A partir dessas palavras e da busca por imagens que representassem essas sensações, percebemos um padrão de cores pastéis (azul, lilás e rosa), além do amarelo que remete ao otimismo e o azul escuro que transmite seriedade.
Dessa maneira, chegamos até a paleta de cores ao lado, que conseguiu reunir esses tons e validar os testes de acessibilidade e contraste.
Para complementar o estudo ligado as cores foi feito uma pesquisa (benchmark) sobre os principais serviços ligados a saúde mental — todos utilizam tonalidades parecidas — e um aprofundamento sobre a psicologia das cores—para a maioria das pessoas o lilás sugere purificação, limpeza, paz e equilíbrio, enquanto o azul reduz a pressão arterial e tem um efeito calmante.
A partir da paleta inicial, surgiu a paleta de cores do aplicativo. Para cada uma das cores foram criadas tonalidades -1 (subtraindo brilho e acrescentando saturação) e +1 (subtraindo saturação). A cor lilás (#D6BDD4) foi definida como primária, o azul (#ECF7FE) como secundária e o amarelo (#FFFCEF) e azul escuro (#323D52) como tons claro e escuro. Foram estabelecidas também cores de ajuda para serem utilizadas em mensagens de aviso.
Finalizando a escolha das cores, foi estabelecida a relação entre cores de texto e fundo, com contraste, para backgrounds escuros e claros. Foram utilizadas as Diretrizes de Acessibilidade de Conteúdo da Web (WCAG) que abrangem uma ampla gama de recomendações para tornar o conteúdo da Web mais acessível.
A partir dessas diretrizes, aplicando as cores escolhidas, obtivemos relações de contraste de 6,2 à 10,6, que é extremamente positivo para a validação.
Para o background foi utilizado o branco (#FFFFFF) que contrasta bem com as letras em azul (#ECF7FE) e permite uma visualização das telas mais agradável, pois o contraste entre essas cores não é tão grande quanto o padrão preto e branco.
Os botões foram criados a partir das necessidades percebidas no protótipo de baixa fidelidade e utilizando as cores primárias e secundárias, variando as tonalidades. Os botões seguem um estilo minimalista e por terem sido criados como componentes, podem ser alterados facilmente em todos os layouts e a biblioteca pode ser ampliada.
Quando é necessário realizar uma ação antes de clicar no botão, há um auxílio visual para o usuário: no caso abaixo, a cor dos botões sugere que eles não são clicáveis, estão inativos. O usuário precisa aguardar até que sua sala esteja liberada para acesso. Faltando 5 minutos para a consulta, o botão torna-se ativo, sendo possível realizar a ação.
Os formulários acompanham o estilo minimalista e por terem sido criados como componentes, podem ser alterados facilmente em todos os layouts e a biblioteca pode ser ampliada.
Houve a preocupação de sinalizar todos os inputs — com ícones, cores e mensagens quando necessárias — de acordo com cada situação que possa ser enfrentada ao preencher o formulário, tornando-os acessíveis e fácies de compreender.
Os ícones escolhidos foram pensados de maneira que transmitisse tranquilidade, leveza e aconchego, características importantes conforme conceitos definidos.
Dessa forma, foram utilizados elementos vazados, linhas finas e cantos arredondados. Os ícones preenchidos são utilizados quando estão selecionados.
Houve cuidado para que os ícones mantivessem um padrão de correspondência entre o sistema e o mundo real (2ª heurística de Nielsen), utilizando o que já é conhecido pelos usuários.
Os ícones de sucesso, erro, atenção e informação foram associados sempre as cores de ajuda, para facilitar a identificação.
O layout foi criado de forma modular, baseado no Design Atômico, tanto para auxiliar hierarquias, escaneamento, compreensão e ritmo, quanto para garantir escalabilidade. Visando uma melhor experiência para o usuário, foram utilizados alguns dos princípios da Gestalt, que exploram as maneiras como as pessoas percebem as informações.
Lei da Proximidade: coisas que estão próximas parecem ser mais relacionadas entre si do que se estiverem distantes.
Foram agrupados átomos que estava próximos, criando moléculas. Posteriormente as moléculas agrupadas se tornaram um só organismo, que formou o “card” de cada psicólogo no aplicativo.
Lei da Similaridade: coisas parecidas são percebidas como parte do mesmo grupo e tendem a ser associadas à mesma função.
Lei da Continuidade: elementos que são posicionados em uma linha ou curva são percebidos como mais relacionados do que se não estivessem dispostos desta forma.
Foi colocado uma sequência de organismos que reúnem informações iniciais sobre os psicólogos. Pela Lei da Similaridade eles são percebidos como elementos com a mesma função e pela Lei da Continuidade, o organismo cortado enfatiza a função de rolagem para ver mais itens.
Lei da Figura-fundo: a percepção humana instintivamente percebe objetos como estando ou à frente ou ao fundo.
Foi criada uma camada de cor com transparência na tela, para que a atenção fique focada no aviso.
Lei da Região Comum: quando objetos são posicionados dentro da mesma região fechada, estes são percebidos como parte do mesmo grupo.
Informações referentes aos prontuários só aparecem após clicar em um ícone para expandi-las, reduzindo o conteúdo apresentado no primeiro momento, revelando-o apenas se e quando solicitado. Além disso, as informações ficam todas agrupadas dentro de uma região de cor diferente, reforçando sua similaridade.
Lei do Ponto Focal: qualquer elemento que se destacar visualmente vai capturar e prender a atenção de quem está vendo.
Utilizamos o principio do ponto focal para dar atenção ao agendamento da consulta, uma vez que é o objetivo principal do aplicativo.
Aprendizados
O processo de criação do Guia de Estilos é extremamente importante, pois serve como um guia visual que ajuda a manter toda a equipe alinhada. Isso oferece um ponto de partida flexível — uma vez que é facilmente alterado — para ajudar a definir como o estilo visual será aplicado no produto de uma maneira acessível e que os clientes possam compreender.
Pensar em UI design é pensar em projetar uma interface que não gere momentos de insegurança para o usuário, que deixe claro quais serão os resultados de suas ações e garantir que o mesmo realize todas as tarefas de forma simples e eficiente, em outras palavras, fazer com que o usuário “não precise de um manual de instruções”.
UI Design carrega mensagem e função. Os gostos pessoais do designer devem ser muito bem colocados, uma vez que é preferível projetar pensando nos princípios de experiência, nos valores da marca e nos objetivos do produto. A UI é mais do que só um detalhe em todo o processo: é parte fundamental de toda a experiência.
Dessa forma, o processo de desenvolvimento da interface torna-se algo fundamental e necessário no entendimento total de uma solução.
Cases de aprofundamento
Confira o case principal e todos os cases de aprofundamento do projeto aqui:
Conheça a equipe Calmamente
Agradecimento
Ficamos muito felizes por você ter lido até aqui!
Críticas construtivas são muito bem vindas!
Sinta-se livre para bater quantas palmas quiser, assim saberemos que você gostou do exercício. 😄