• Eliane Félix

Descomplicando a Interface

Atualizado: 10 de nov.

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!






32 visualizações0 comentário