Style Guide Conecte NUTRI -Utilizando UX/UI Design para conectar nutricionistas e pacientes
Esse artigo faz parte do case Conexões saudáveis, uma solução de qualidade alimentar, sobre como contribuímos para a conexão entre pacientes e nutricionistas durante a pandemia de COVID-19 — um estudo de caso em UX, realizado no curso do UX Unicórnio.
Encaramos o desafio de pensar uma continuidade dos atendimentos nutricionais, mantendo a qualidade dos serviços prestados, além de auxiliar as pessoas na conduta de hábitos saudáveis com uma alimentação de qualidade. E este artigo vai te contar como utilizamos o UI/UX Design para contribuir nesse desafio.
Conecte Nutri é uma forma simples e confiável de encontrar um nutricionista que entende suas necessidades, assim como uma maneira prazerosa de conseguir se manter no plano alimentar!
Entendemos que todas as pesquisas e informações levantadas sobre os usuários deveriam refletir diretamente na identidade do app, dessa forma te contaremos como os elementos da nossa interface refletem nosso desafio.
Se você quiser conhecer como foram feitas nossas pesquisas, acesse esse artigo aqui.
Em todas as sessões do nosso app aplicamos as Heurísticas de Nielsen e Leis de UX, de modo que a interação dos usuários pudesse ser aprendida com maior rapidez. Indicaremos aqui em quais momentos algumas dessas leis ficaram mais evidentes.
Branding
CONECTE NUTRI foi um nome escolhido para representar conexões, que ligam as pessoas à nutrição, à qualidade de vida e como o complemento diz, aos nutricionistas. A palavra conecte também abarca a tecnologia, a ideia de estar ligado a algo através da internet. A abreviação “nutri” indica a leveza apresentada já no nome, utilizamos o termo que os próprios usuários se referiam ao falar dos nutricionistas, assim acreditamos ter criamos uma relação de maior proximidade com eles.
Logotipo
Nosso logo é composto por uma caixa de textos, onde a palavra CONECTE foi colocada dentro de um retângulo fazendo alusão a um botão de conexão. E a palavra NUTRI representa a conexão direta que se pretende alcançar, entre os futuros pacientes à nutricionistas.
Style Guide
Cores
A cor primária escolhida foi o violeta. Israel Pedrosa diz em seu livro Dar cor à cor inexistente, que o violeta simboliza
“… a lucidez, a ação refletida, o equilíbrio entre a terra e o céu, os sentidos e o espírito, a paixão e a inteligência, o amor e a sabedoria. (…) Sua essência indica (…) a influência de uma pessoa sobre outra pela sugestão, a persuasão…”.
O violeta carrega também as qualidades das cores que lhe dão origem, vermelho e azul, equivalendo a força e a confiança. Essas são percepções que refletem a intenção de decisão, equilíbrio e acolhimento que dialogam diretamente com o espírito do nosso aplicativo. E as ideias da sugestão e da persuasão são formas de incentivar o usuário paciente a estar sempre no jogo e seguindo o plano!
A cor secundária escolhida foi o verde, que representa a cor da nutrição. Traz alusão às coisas naturais e saudáveis. Através de Israel Pedrosa entendemos também que o verde traria a tranquilidade e a leveza que o app pede.
Pensando em como as cores contribuiriam com as sessões da plataforma, definimos que as telas de gamificação, notificações, a sessão do S.O.S e dicas receberiam mais cor, acolhimento e alegria nas ilustrações. Já a sessão de agendamento de consulta e dashboards de acompanhamento e alimentação estariam envoltos nas cores primária e secundária trazendo um pouco mais de estabilidade e sobriedade que a sessão pede.
Tipografia
Escolhemos a fonte MONTSERRAT, por trazer uma boa legibilidade, não ter serifas e ser uma Webfonte. Aqui, foi aplicado a Lei de UX: Efeito da Usabilidade Estética, onde a fácil leitura torna a usabilidade mais agradável e percepção da interface como uma experiência positiva.
Botões
Utilizamos a 4ª Heurística de Nielsen para padronizar os botões, diferenciando-os através das primárias e secundárias e pelo contraste entre as cores do background e da tipografia.
“O tempo para interagir com um alvo é uma função da distância e tamanho do alvo.”
De acordo com a Lei de Fitts, os botões devem ter um tamanho em que o usuário tenha facilidade em entender que é um alvo clicável. Eles têm altura padrão de 45px, padding entre bordas e tipografia 24px (esquerdo/direito) e 11px (top/bottom), alinhados ao centro. Optamos também pela borda arredondada a fim de trazer mais leveza, tendo Border-Radius de 10px.
Formulários
A 4ª Heurística de Nielsen: Consistência e Padrões também foi pensada durante a construção dos formulários. Mantendo os padrões de tipografia e cores, os campos apresentam rótulos e estados quando necessário e mesmo arredondamento e espaçamentos dos botões.
Além dela, a 1ª Heurística de Nielsen: Visibilidade do Status do Sistema foi desenhada nos feedbacks, positivos e negativos, durante o preenchimento incorreto do campo. As cores definidas para sucesso, atenção e erro foram utilizadas a fim de reafirmar este feedback tornando-o mais acessível.
Outros Elementos
Um dos princípios de Gestalt, a Lei de Prägnanz teorizou que os usuários buscam por padrões em elementos visuais de forma simples e ordenada.
“As pessoas perceberão e interpretarão imagens ambíguas ou complexas como a forma mais simples possível, porque é a interpretação que requer o menor esforço cognitivo de nós.”
Todos os elementos foram pensados para facilitar a interpretação dos usuários, impedindo sobrecarregá-los de informações. A utilização de modelos visuais e mentais já existentes faz com que o usuário sinta-se familiarizado e mais confortável com a interface, pensamento que nos leva à Lei de Jakob, pensada e teorizada por Jakob Nielsen:
“Os usuários passam a maior parte do tempo em outros sites. Isso significa que os usuários preferem que seu site funcione da mesma maneira que todos os outros sites que eles já conhecem.”
Protótipo de Alta fidelidade
Definido o guia de estilos, foi criado o protótipo de alta fidelidade.
Para ter acesso ao protótipo navegável, veja abaixo ou clique aqui.
Quer acessar o case principal? Clique no link abaixo e veja Conexões saudáveis, uma solução de qualidade alimentar.
A equipe Conecte Nutri
Quer se conectar com a gente? Aqui estão nossos perfis do Linkedin:
