Faxina Flash — UI Design
--
Este artigo traz o processo de UI Design detalhado do estudo de caso Faxina Flash: Recriando a demanda de trabalho de diaristas durante pandemia, desenvolvido dentro do programa UX Unicórnio.
Vale ressaltar que este artigo ainda está em fase de desenvolvimento. Ainda estarei desenvolvendo a justificativa para botões, cards e ícones.
Marca Faxina Flash
Após organizar todos os wireframes, iniciei o guia de estilos a partir da marca Faxina Flash, que busca transmitir, eficiência e rapidez no serviço oferecido, além de ressaltar o brilho, característica principal de uma limpeza bem feita.
Durante o Benchmarking, pude observar que os concorrentes utilizam paleta de cores semelhantes que costumam seguir tons azuis ou verdes, porém existem outros serviços que utilizam outras cores como vermelho, rosa ou roxo.
Pensando nesse aspecto, inicialmente a escolha das cores da marca se deu pelo azul e o verde, pois desejava transmitir confiança e renovação através delas, mas me deparei com problemas de contraste na interface, por este motivo precisei revisar e realizar algumas alterações das cores.
Decidi trabalhar uma paleta monocromática com variações de tom de turquesa para manter a mensagem que a marca deseja transmitir a seus usuários e também oferecer menor atrito para usuários daltônicos.
Styleguide: Cores
Para definir as cores e os tons, utilizei a ferramenta Hihayk para escolher a cor primária e secundária que seriam utilizadas no projeto:
A partir das cores selecionadas, gerei a variação de cada uma delas a partir da alteração dos valores de HSB (Hue/Brightness/Saturation) do próprio Figma.
Como cor de destaque e dos Call to Actions escolhi um tom de laranja com base no conceito de cores complementares do círculo cromático.
O tom do laranja foi ajustado manualmente através de um plugin para garantir boa legibilidade através do contraste.
Defini as cores de alerta com base na ferramenta Color Palette Generator de Ryan Clark.
Styleguide: Tipografia
O artigo “A importância da performance das páginas na experiência do usuário” publicado por Fabrício Teixeira afirma que o tempo de carregamento pode afetar diretamente na experiência do usuário.
O tempo de carregamento longo pode comprometer o engajamento dos usuários de um serviço e afetar o ROI de uma empresa.
Quando o projeto tem mais de uma fonte, a tendência é que o tempo de carregamento aumente, então o ideal é usar até dois tipos de fontes. No entanto, decidi desenvolver meu projeto com uma única família tipográfica usada no Material Design: Roboto.
Escolhi usá-la com escala de 1.333 (perfect fourth) e por ela permitir estabelecer hierarquia visual através do peso tipográfico que vai do Thin até o Black.
A grande vantagem de utilizar Google Fonts nos projetos é que grande parte dos serviços utilizam estas fontes, então o carregamento da fonte é feita apenas uma vez, já que ela fica salva no cache.
Styleguide: Grids
Os grids são utilizados para designs responsivos e auxiliam no posicionamento dos elementos usados para construir a interface do serviço. Neste projeto escolhi seguir pelas Guidelines do Material Design e utilizar grids de 4 colunas com gutter de 16px.
Styleguide: Biblioteca
Depois de definir as cores, tipografia e grids criei uma biblioteca dentro do Figma com a finalidade de manter a consistência visual e agilizar alterações de vários componentes em casos de necessidade.
Ter um projeto organizado agiliza o trabalho dos desenvolvedores, pois os ajuda a visualizar e entender o que será necessário fazer em código.
Formulários: Os campos de formulários também foram construídos para seguirem os padrões do Material Design com a finalidade de manter a consistência visual.
Para evitar indicar estados de sucesso, alerta ou erro apenas pelas cores, utilizei ícones empregados como auxílio visual para usuários daltônicos. Desta forma eles não.
Styleguide: Ícones
Durante o Benchmarking pude observar que nem todos os concorrentes faziam uso dos ícones.
No entanto, segundo as informações reunidas na primeira pesquisa quantitativa, uma parcela considerável das usuárias (43%) têm ensino fundamental e médio incompleto, então a decidi empregar o uso dos ícones com intenção de oferecer auxílio visual nesse sentido.
Nenhuma das entrevistadas ou das usuárias que aceitaram participar dos testes de usabilidade correspondiam a este perfil, então no momento não tenho a validação de que este recurso esteja cumprindo o papel que foi proposto.
Outro ponto que acho válido ressaltar é sobre o fato de os ícones não terem sido completamente trabalhados ainda devido ao tempo que tinha para finalizar o projeto.
Os ícones apresentam grande quantidade de pequenos detalhes que podem prejudicar a interpretação quando utilizados em tamanho reduzido, por isso pretendo trabalhar neles com a finalidade de reduzir a quantidade de detalhes e atingir uma melhor leitura das imagens em todos os tamanhos.
Próximos passos…
Este case ainda está em fase de desenvolvimento, ainda estarei explicando sobre as decisões de design acerca de botões, cards (design atômico) e familiaridade (empregada para reduzir a curva de aprendizagem por parte do usuário, pois o uso é facilitado através do reconhecimento de elementos e experiências já vistas antes).
Muito obrigada por me acompanhar até aqui!
