A importância da UI (User Interface) para boas experiências.
Como utilizamos técnicas de UI para projetar uma ótima experiência para usuários da terapia online
Esse artigo foi realizado em conjunto com Marcio Rebouças
Introdução
Para falarmos sobre User Interface e como ela tem um papel fundamental em qualquer projeto visual, precisamos entender que ela é o resultado de um processo de User Experience (experiência do usuário). Onde podemos ter as informações mais importantes do produto validadas pelo usuário nos mostrando os caminhos que temos que seguir, então caso você queira ver como foi todo esse processo clique aqui em baixo:
Primeiramente esse artigo não reflete regras ou caminhos que você deve seguir, mas sim somente a representação de como construimos o nosso projeto.
O que é UI?
User Interface ou Interface do usuário é um conjunto de formas que o usuário interage com um produto ou máquina. É a parte visual de uma interface, tudo que você poderá visualizar, sentir ou tocar e que leva o usuário a realizar determinada ação.
Por isso é muito importante para o usuário que as decisões que ele precisará realizar na interface estejam faceís de ser encontrada e intuitiva.
O nosso processo
Iniciamos o processo de concepção da interface com anotações e técnicas de esboço de funcionalidades e oportunidades encontradas durante o processo de UX Research. Após a priorização das soluções, realizamos o protótipo de baixa, média e alta fidelidade com os fluxos dos usuários, definição da identididade visual e guia de estilos da marca.
Para saber mais sobre o nosso processo de UX Research clique aqui:
Anotações
Nessa etapa, anotamos as principais oportunidades que foram encontradas durante o processo de UX ( user experience ) e coletamos as principais ideias e funcionalidades que estariam presentes na primeira versão do produto.
Método MoSCoW
Buscamos alguns metodos que nos ajudariam a categoriza-las e o metodo mais compativel com o que estavamos precisando foi o MoSCoW. Ele é uma tecnica de priorização que baseia-se em 4 pilares:
- Must Have (Tenho que fazer)
- Should Have (Devo fazer)
- Could Have (Poderia fazer)
- Won’t have (Não vou fazer)
Assim a ordem de importância vai de forma decrescente do Must Have sendo a prioridade até o Won’t have que seria os descartados nesse primeiro momento.
Alternativas de solução
Antes de iniciarmos qualquer ideia de solução, precisávamos determinar o que seria e como ela seria apresentada.
Desenhos Livres
Ao definirmos as prioridades começamos esboçar desenhos e anotações no papel. Nessa etapa de desenho livre tiramos 60 minutos para criarmos conceitos e funcionalidades que queriamos que o nosso produto tivesse. Após o termino dos 60 minutos a dupla comparou os desenhos e viu semelhanças e diferenças , é um processo importante para discussão das principais funcionalidades.
Crazy 8’s
O processo do Crazy 8’s (8 minutos malucos) foi um dos mais divertidos e desafiadores métodos que fizemos. Ele nos ajudou a sair da zona de conforto e encontrar as melhores opotunidades e ideias menos óbvias. O método consiste em tirar o máximo de ideias do papel em um espaço curto de tempo.
Após terminarmos esssas etapas votamos nas melhores ideias e discutimos possiveis ideias para a solução.
Wireframes
Após a definição das principais funcionalidades, iniciamos o protótipo de baixa fidelidade com os wireframes, que são esboços iniciais visuais de tela de um projeto, podem ser realizada no papel ou em ferramentas de prototipação como Figma. O principal objetivo é ser usado como um esqueleto de todo o projeto .
Os protótipos são separados por desenhos de baixa, média e alta fidelidade. Os de baixa fidelidade se preocupam mais com fluxos do usuário e hierarquia das informações, o de média fidelidade faz a definição dos textos, espaçamentos distribuiçoes dos elementos e animações. Já o alta fidelidade é o mais proximo da versão final visual do produto.
Grids
Os grids são elementos fundamentais em uma boa construção de hierarquia visual pois eles nos permitem manter uma consistência durante todo o projeto. A função principal é organizar as informações dentro de uma estrutura, na produção do protótipo em colaboração percebemos que o grid tinha um papel fundamental na organização dos elementos da interface, onde se evitava retrabalho na aplicação de regras básicas de alinhamento e espaçamento.
Criação Marca
Após a finalização do protótipo de média fidelidade, criamos a identidade visual da marca e estabelecemos todos os componentes visuais do produto. O primeiro passo foi selecionar os principais nomes e estabelecer e abordagens que a marca representa.
Os principais pontos chaves são :
- Saúde
- Segurança
- Acolhimento
Após um brainstorming com a definição da marca, selecionamos 3 principais nomes : Hug, Ally e Aura. O nome que se encaixou com os aspectos que estavámos buscando e que fosse de fácil pronúncia foi Ally, seu significado é aliado, que era exatamente o que queríamos, uma marca que fosse aliada dos pacientes na escolha e procura dos psicólogos.
Logo
Para a criação do logo utilizamos métodos básicos do design como pesquisas, referências, conceitos e esboços até chegarmos na versão final do logo. Com linhas suaves e arrendodas para criar algo simples e confiável, a junção cria a percepção de um abraço e um coração como forma de símbolo de acolhimento.
Style Guide
O Style Guide ou Guia de estilo é um documento que contempla as principais regras de design de uma marca ou produto. Ele é usado como referência para as equipes manterem consistência da marca e evitarem que haja criação de elementos que fogem dos padrões das marcas nas alterações e construções de novas funcionalidades da interface.
O guia de estilo é composto por:
- Paleta de cores;
- Tipografia
- Grids
Paleta de cores
A paleta de cores é essencial para uma marca transmitir as sensações e posicionamentos através das cores. Para isso escolhemos uma paleta que trouxesse um posicionamento de segurança e seriedade, mas com uma sensação de calma e tranqulidade.
Testamos inúmeras combinações para chegarmos nas cores finais, utilizamos sites para ajudar nessa etapa como coolors, mycolor.space e colorhunt. As cores definidas foram verde, laranja, preto e branco.
Tipografia
Para escolhermos a tipografia que mais se encaixava com a marca, utilizamos sites como font pair e 1stwebdesigner que dão exemplos de combinações de fonts. Depois de olharmos os exemplos decidimos que o estilo que mais se encaixava era Poppins com a Open Sans, que tem um toque mais suave, moderno e de fácil leitura, além de serem webfonts um aspecto importante para carregamento em servidores.
Design System
O design system é um núcleo de um projeto de design escalável, com ele pudemos evitar retrabalho e ter um controle otimizado sobre todo os aspectos visuais do nosso projeto. Podendo controlar componentes como botões, formulários, selectors, radio buttons, de forma simples e rápida.
Protipo alta fidelidade
Com todas essas etapas realizadas seguimos para a versão final do produto, onde já podemos colocar cores, tipográfia e focar mais para o lado visual do protótipo com todas as decisões baseadas nas pesquisas. É uma etapa mais divertida e animada para qualquer designer pois podemos observar nosso projeto ganhando vida.
Conclusão
Somente o lado visual do projeto não é o fator mais importante para um produto de sucesso, e sim todo proceso estruturado de UX até as decisões da interface visual. Porém, o UI Design é um processo tão importante quanto qualquer um, é nele que todas as decisões de design serão materializadas transmitindo confiança e segurança para concluir as tarefas com facilidade, criando uma boa experiência para o usuário.
Os principais aprendizados do projeto foram:
- O Design System é fundamental em um processo escalonavel de design.
- Desenhos e esboços no papel foram essenciais para obter ideias de forma rápida e pratica.
- Utilizar grids para verificar espaçamentos e determinar colunas de conteudos.
- Utilizar ferramentas de prototipação como Figma, auxiliam na construção de fluxos responsivos e intuitivos.
Caso queira entrar em contato estamos a disposição:
