Melhoria de menu de navegação
- Paula Costa
- 1 de abr.
- 3 min de leitura
Atualizado: 1 de abr.
Empresa | Gofind |
Foco | Melhoria de usabilidade |
1. O problema
O portal Gofind é uma plataforma com diversas funcionalidades de performance para os nossos clientes. Nele é possível ver dados analíticos, de demanda, gestão de produtos dentre outros. Ele no entanto enm sempre teve tantas funcionalidades e rapidamente foram evoluindo a quantidade de ofertas que os clientes poderiam adiquirir para ter acesso. De forma que o antigo menu trazia alguns problemas para a evolução.
2. Entrevistas
Além dos problemas encontrados através da análise de usabilidade fizemos algumas entrevistas com usuários para descobrir outros prontos. Eis alguns pontos que elencamos como mais recorrentes entre os usuários:
Termos não globais
Descobrimos que a plataforma utilizava termos que alguns usuários somente sabiam por conta de treinamentos. Como por exemplo "Mapa de ruptura" (submenu de mapas) ou "Prospecção"que usuários entendiam por diferentes nomes como por exemplo oportunidades ou leads.
Funcionalidades escondidas
Como o menu antes tinha pouco espaço, os desenvolvedores colocaram algumas funções de forma que encaixasse em algum tipo de contexto dos itens principais de menu.
Exemplo: Para o usuário fazer postagens de produtos no Google, eles fizeram a correlação com produtos e colocaram a função dentro do menu produtos. Porém, os usuários sempre recorriam ao suporte para indicar o caminho para elas, ou deixar o URL salvo no navegador. Intuitivamente não dava pra encontrar.
Funcionalidades esquecidas
Existiam funcionalidades dentro do portal que não eram utilizadas e nem mesmo mais ofertadas.
3. Pesquisa
Mapeamento de funcionalidades
Foi feito um grande levantamento de tudo que tinha no portal e elencamos como as mais utilizadas e as menos utilizadas. Através da ferramenta MixPanel pudemos fazer esse ranking.
Cardsorting
Através da ferramenta Miro, fizemos cardsorting com os usuários para fazer uma nova segmentação de funcionalidades, ou seja, os usuários nos apontavam onde eles encontrariam cada uma das funções listadas, incluindo distribuindo em submenus.
4. Solução
Menu que expansível e compacto: Para tornar uma experiência adaptativa, adicionamos a possibilidade do usuário compactar o menu. Ou seja, ele por padrão viria aberto, mas o usuário poderia escolher compactar para ter uma visibilidade melhor de gráficos e tabelas.
Criamos submenus para melhor segmentar as funcionalidades de acordo com os resultados dos testes cardsorting.
Iconografia para facilitar a comunicação e reconhecimento das funcionalidades.
5. Testes
Os testes foram conduzidos com usuários internos da Gofind e clientes reais, em sessões remotas individuais com compartilhamento de tela. No total, participaram 3 clientes recrutados e 5 usuários internos.
Metodologia
1. Identificação dos ícones. Utilizamos card sorting para que os usuários associassem significados aos ícones e avaliamos a clareza visual.
2. Navegação assistida com missões. Criamos cenários para validar a usabilidade da interface e esclarecer dúvidas sobre sua intuitividade, com foco em:
A compreensão intuitiva da função de compactação do menu.
A facilidade em localizar menus frequentemente acessados.
Possíveis falhas na interface que impactassem a experiência do usuário.
Clareza na navegação por submenus.
Compreensão do menu de configurações.
Resultados e ajustes
Os testes apresentaram um desempenho positivo, mas identificamos oportunidades de melhoria:
Alguns ícones precisaram ser redesenhados para maior clareza no contexto de uso.
A funcionalidade de retrair o menu não era intuitiva para alguns usuários, levando à implementação de um tutorial animado exibido na primeira navegação para explicar essa interação.
6. Desenvolvimento
Após os ajustes finais, documentamos um manual de design interativo para os front-ends.
Regras de interatividade: Explicando de maneira escrita e também visual como seriam os comportamentos de ações do usuário.
Conteúdo de cada sub-menu.
Versão Dark mode.
Ajuste de adaptação das interfaces para o novo menu: Algumas telas precisaram ser padronizadas, como por exemplo títulos, breadcrumbs, espaçamentos e navegação.
Exemplos para a documentação. Material completo é restrito.