Melhoria de menu de navegação
- Paula Costa
- 1 de abr.
- 3 min de leitura
Atualizado: 26 de mai.
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
O objetivo desta etapa foi entender o comportamento dos usuários dentro do portal para orientar decisões estratégicas de produto. Realizei um levantamento completo de todas as funcionalidades disponíveis, identificando quais eram as mais utilizadas, quais tinham baixa adesão e quais poderiam ser descontinuadas ou otimizadas.
Como fizemos: Utilizamos a ferramenta MixPanel para analisar métricas como:
Páginas mais acessadas
Tempo médio de navegação
Principais ações realizadas
Taxa de engajamento por funcionalidade
A partir desses dados, criamos um ranking de uso que serviu como base para definir prioridades de melhoria e foco nas próximas fases do projeto.
Cardsorting
Realizamos uma atividade de card sorting com usuários para validar e propor uma nova organização das funcionalidades do portal. Utilizamos a ferramenta Miro para conduzir as sessões, onde os participantes nos mostraram como esperavam encontrar cada funcionalidade, agrupando-as de forma lógica e intuitiva, inclusive sugerindo submenus.
Nosso principal objetivo era garantir que a nova estrutura de navegação causasse o menor impacto possível na experiência atual, ao mesmo tempo em que tornasse o layout mais claro, organizado e fácil de usar.
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.