Descomplicando a Interface
Atualizado: 10 de nov. de 2022
Como usei UI para melhorar a experiência do usuário ao navegar no site
A empresa
A Prosk8 Informática é um canal de vendas da Prosoft que está no mercado há mais de 20 anos e tem como objetivo desenvolver softwares para apoiar empresários contábeis.
Quando entrei na empresa percebi alguns “erros de interface”, porém como não tinha ainda tanta experiência em UI / UX fiz apenas alguns ajustes dentro do meus conhecimentos (Eu sou formada em Marketing e como eu tinha acesso ao site da empresa, pude mudar algumas coisas).
Hoje depois de ter mais conhecimentos em UX/UI pude atualizar a interface.
Brechas da interface
O que eu precisa resolver no site era a questão do baixo contraste, os logos eram “soltos”, tinha muita informação em uma tela só, os textos eram bem extensos, havia muitas imagens o que dificultava a leitura, não tinha padronização de botões/espaçamentos/cores, faltava também um respiro para a página (sem white space).
Uma outra coisa que eu também senti falta foi uma página de Fale conosco, tinha apenas o número da empresa porém sem destaque, o que existia era apenas alguns formulários espalhados pela interface, como podemos ver abaixo:
Veja também o vídeo da interface antiga
Depois de listar todos os pontos de melhoria, comecei a pensar em possíveis soluções.
Usei uma ferramenta para mapear o comportamento dos usuários em nosso site, para saber quais eram os fluxos que eles estavam fazendo, se estavam conseguindo achar o que queriam ou se estavam apenas “brigando com a interface”
Guia de estilo
Depois que colhi os resultados e decidi como seria a interface (nesse momento o rabiscoframe me ajudou muito!), comecei a fazer um guia de estilo para ter uma padronização em todas as telas.
Cores
Escolhi as cores com base na logo da marca para serem as primárias e como secundária azul, por conversar bem com o verde.
Também foram definidas a paleta de cinza para textos, uma paleta de brancos e cores auxiliares, como a de erro, sucesso e atenção.
Tipografia
A tipografia escolhida foi Noto Sans para textos de destaque e open sans para textos corridos.
A decisão da fonte foi por já estar no Google Fonts e ser mais fácil de carregar, além da leitura ser fácil para o usuário, pois são textos sem serifa.
Botões
Para facilitar o trabalho e a manutenção da hierarquia das telas, fez-se necessário também o desenvolvimento de um guia de estilos para os botões.
Wireframes
Com todo o guia de estilos definidos foi hora de pôr a mão na massa, comecei elaborando todo o wireframe antes de partir para o site final, pois assim evitaria transtornos e atrasos, pois é muito mais fácil alterar um esboço do que alterar o site final.
Soluções da Interface
A primeira coisa que percebi com o mapa de calor do site foi que algumas páginas não eram visitadas e a arquitetura da informação do menu precisava ser revisada. Para solucionar esse problema deixei as primeiras abas com o que os clientes mais procuravam no site.
O site tinha aproximadamente 44 páginas e dificultava muito a navegação do usuário, pois o fluxo que precisavam ser feitos para completar uma determinada ação eram longos. Deixamos todas as informações importantes e os fluxos menores fazendo o site cair para 7 páginas.
Usei imagens mais pontuais e não como background.
O texto usei parágrafos com poucos caracteres por linha para evitar o cansaço na leitura.
Além da padronização de cores, botões, textos e espaçamentos, fiz o uso do white space (espaço de respiro/espaço em branco) para não deixar a interface tão poluída.
O logo da empresa agora também está mais evidente no menu fixo.
A aba soluções ao invés de ter várias páginas foi reduzida a uma, assim o usuário pode visualizar mais rapidamente todas as soluções que a empresa oferece.
Outro fator que é bem importante para a empresa são os treinamentos que oferecem, por essa razão inclui um calendário mensal com todos os treinamentos expostos de uma única vez, assim o usuário não precisa dar muito scroll na página para achar o treinamento que deseja realizar.
Ainda em treinamentos coloquei abaixo do calendário vídeos com as principais dúvidas dos usuários para facilitar na hora de escolha e inscrição nos treinamentos.
O site não tinha botões com chamadas para ação, agora as principais chamadas dos botões são: conhecer as soluções que a empresa oferece, entrar em contato para solicitar proposta comercial e pra quem é cliente se tornar SLA Premium.
Para finalizar, inclui uma aba com o fale conosco , blog para escrever as principais notícias e ícones das redes sociais da empresa.
Navege no site
Considerações finais
Fiquei feliz com o resultado, temos aqui uma interface mais limpa e objetiva, acredito que o fluxo do usuário está melhor e as informações melhores dispostas.
Agora o próximo passo é testar a nova interface e ir melhorando de acordo com a necessidade.
Obrigada por ter chegado até aqui!
