A navegação de um website é um critério essencial para o seu sucesso. Para isso, os menus de navegação existem para orientar os visitantes de forma eficaz. Devem ser claros e acessíveis para que a sua visita seja o mais tranquila e agradável possível.
Mesmo que na web existam todos os tipos de menus – mais originais que os outros: hambúrgueres, horizontais, verticais, stickys… – eles são eficazes para tudo isso? E qual escolher?
Projetar cuidadosamente a interação com os vários elementos de painel e menu pode simplificar efetivamente a navegação em seu site.
O trabalho dos designers, ergonomistas e desenvolvedores é fornecer aos usuários uma experiência ideal e ajudá-los a alcançar uma jornada tranquila do início ao fim de sua navegação.
Na Adimeo, trabalhamos em projetos web centrados no usuário. Reunimos algumas práticas recomendadas para você projetar menus de navegação amigáveis para UX adaptados à sua solução. Vamos descobri-los juntos.
O que é um menu de navegação?
O menu de navegação (ou barra de navegação) fornece acesso ao conteúdo principal de um site através de um conjunto de links que redirecionam para as diferentes páginas ou seções de um site . Geralmente é colocado horizontalmente na parte superior da página ou verticalmente no lado esquerdo da página.
Por que é importante trabalhar bem no menu de navegação?
O menu de navegação é o mapa de seus usuários . Sem ele, é impossível que eles encontrem o caminho e naveguem no site. Ao montar um menu bem pensado de acordo com suas necessidades e usos, você melhora a ergonomia de suas interfaces digitais , facilita o uso e, assim, prolonga o tempo que seus usuários passam no site! O objetivo é que o internauta se sinta confortável o suficiente em um site para navegar de página em página e aumentar as chances de se tornar um prospect.
Além disso, desde maio passado, o Google julga a qualidade da experiência do usuário graças ao Core Web Vitals para o referenciamento de sites. Ter uma boa estratégia de UX não apenas ajuda você a converter um usuário com mais facilidade, mas também tem uma classificação mais alta nos resultados de pesquisa.
Como melhorar a experiência do usuário (UX) de um menu?
Para melhorar a experiência de um usuário em seu site, você precisa entender suas necessidades e comportamentos em seu site . Como eles percebem cada elemento do seu site? Como eles navegam entre cada página e entre cada bloco?
Entenda seus usuários através da teoria do UX Design
Entre os 8 princípios do UX Design, três deles são particularmente interessantes para imaginar e construir o menu de navegação ideal:
- 1. A Lei de Miller (ou Lei de Miller) afirma que o número médio de objetos que podem ser memorizados é 7 mais ou menos 2.
O que você deve lembrar:
- É importante limitar a quantidade de informações oferecidas ao usuário se quisermos que ele entenda imediatamente a escolha que lhe é oferecida e/ou o que ele deve fazer.
- “ Chunking ” ajuda os usuários a reter e memorizar facilmente os elementos presentes na página. Ao organizar e agrupar itens em pequenos grupos, o cérebro tem mais facilidade para processar e memorizar informações.
O exemplo mais conhecido de segmentação é anotar números de telefone! Separados por espaços, pontos ou traços, o conjunto de números é muito mais legível e memorável.
- 2. A lei de Pareto (ou Lei de Pareto) afirma que 80% das tarefas são geralmente realizáveis graças a 20% das funcionalidades ou que 80% de seus usuários usam 20% de suas funcionalidades.
Resumindo: concentre-se nos recursos mais impactantes do seu site! Quais categorias de páginas atraem mais interesse de seus visitantes? Como eles poderiam ser integrados de forma relevante no menu de navegação?
- 3. O Efeito da Posição Serial teoriza que os usuários são mais propensos a lembrar o primeiro e o último itens de uma série.
Pense nisso ao trabalhar em seu menu de navegação (e em qualquer elemento do seu site): facilitar o acesso a funções importantes ajuda a melhorar a experiência do usuário . Você já reparou que na maioria dos menus (incluindo os do Instagram) o primeiro item é a página inicial e o último é o perfil?
Um bom menu é um menu mobile-first
Hoje, cada vez mais usuários da Internet estão consultando um site no celular. Em 2020, o tráfego de Internet móvel representou 54% do tráfego total de Internet global , mais da metade.
Portanto, é importante projetar seu site para que seu layout se adapte de acordo com a resolução da tela em que é exibido e, principalmente, para exibição em dispositivos móveis. Isso é chamado de design responsivo .
Os melhores recursos do mundo e o conteúdo perfeito podem passar totalmente despercebidos se as pessoas não acessarem sua página…
Os diferentes tipos de menus
Passemos agora à apresentação dos diferentes tipos de menus que existem!
Le menu de navigation principal
O menu de navegação principal geralmente está localizado na parte superior da página ou lateralmente, em um lado da página. É o primeiro ponto de acesso a todo o site. Ele ajuda os visitantes a navegar em seu site.
Aqui estão alguns exemplos do menu de navegação principal:
Menus suspensos (ou menus lineares)
Também conhecido como menus suspensos, o menu suspenso é composto por um conjunto de menus selecionáveis : a seleção de um menu abre uma lista contendo subitens.
O menu suspenso é usado principalmente para agrupar produtos, coleções ou páginas. Por exemplo, se você tiver muitos produtos e/ou serviços, poderá adicioná-los a um intervalo e usar o menu suspenso no menu principal para organizar tudo em títulos e subtítulos . Dessa forma, seus visitantes terão mais facilidade em se encontrar em todas as suas ofertas.
| Vantagens | Limites |
| Fácil de configurar, não requer nenhum layout específicoEconomiza espaço na telaOs usuários estão acostumados com isso ( lei de Jakob ) | Certifique-se de reforçar a affordance da alça para atrair o usuário a clicarO acesso a diferentes itens é desigual ( Lei de Fitt )Não oferece uma visão global: tempo de busca para o novo visitante |
O site Navigo apresenta uma lista suspensa apenas para uma opção. Resultado: sem sobrecarga cognitiva e navegação clara e organizada. Observe, no entanto, que não há descrição das subopções.
Menus retangulares (ou mega menus)
Nos últimos anos, os “mega menus” se espalharam a uma velocidade vertiginosa na web. Eles são mais particularmente encontrados em sites de comércio eletrônico.
O mega menu tem como objetivo fornecer acesso a um máximo de seções de um site, independentemente da página em que você está. Eles permitem um modo de navegação transversal mais fácil .
| Vantagens | Limites |
| Tempo médio reduzido para alcançar itens do que se eles fossem colocados em uma listaRevelando os diferentes níveis do site em um piscar de olhosEstruturando as opções de navegaçãoPossível variação de tipografias para priorizar e ilustrar itensCorrespondência para leitura na web (digitalização em F)Engajamento aprimorado | Certifique-se de limitar o número de opções: risco de sobrecarga cognitivaEstruture e priorize itens para guiar a navegação |
Exemplo :
A Fnac, com esta opção de menu, permite conter todas as entradas sem obstruir a navegação principal. A implantação é feita da esquerda para a direita: na direção da leitura e permite inserir 3 níveis para uma visão geral.
No entanto, a ausência de pictogramas para distinguir as categorias e todos os itens leva à sobrecarga cognitiva.
As barras laterais
Sidebar fixe (ou menu latéral)
Se o menu de navegação vertical à esquerda ou à direita permitir várias seções estendidas, ainda é recomendável não exceder 9 seções principais para acesso de primeiro nível. O objetivo é poder ocultar o menu lateral usado para navegação.
| Vantagens | Limites |
| Permite exibir muitos itensVisibilidade imediata se colocado à esquerda | Usuários menos acostumados a esse tipo de navegaçãoNão corresponde à leitura em F, ao contrário dos menus superiores |
Por outro lado, no Google Drive, a navegação principal na barra lateral deixa muito espaço para a barra de pesquisa no menu superior, com boa distinção de áreas visuais.
Gaveta da barra lateral e trilho de navegação
A gaveta de navegação é uma das formas mais comuns de fornecer ao usuário acesso a diversos destinos e ajuda a gerenciar a quantidade de espaço disponível em diferentes dispositivos e joga com design responsivo .
| Vantagens | Limites |
| Exibição de um grande número de itensVisibilidade imediata se colocado à esquerdaCapacidade de dobrá-lo e economizar espaço na telaCompreensão do usuário graças ao pictograma | Usuários menos acostumados a esse tipo de navegaçãoNão corresponde à leitura em F, ao contrário dos menus superioresNão pode se adaptar a todos os tipos de arquiteturaNavegação mais oculta |
Exemplo :
No site Kayak, as categorias são bem diferenciadas e a hierarquia é bem estabelecida graças aos divisores.
Graças ao contraste configurado quando você clica em um item, você sabe em qual página está. Os pictogramas aparecem quando o menu é dobrado. Rótulos curtos e concisos são adicionados à abertura do menu.
menus de hambúrguer
O uso do menu de hambúrguer (ou hambúrguer) é muito popular há alguns anos, embora seu uso seja debatido (seus resultados em termos de engajamento, satisfação e velocidade de percepção às vezes são piores do que outros tipos de menus). Primeiro representado com 3 linhas horizontais e denominado ” Hamburger “, este tipo de ementa evoluiu rapidamente em várias formas com nomes que abrem o apetite (Bento, Almôndegas, Kebab…).
Na origem de sua criação, o uso cada vez maior de dispositivos móveis obrigou designers e ergonomistas a repensar a ergonomia das interfaces . De fato, sendo os tamanhos de tela menores do que no tablet ou computador, o objetivo era permitir o acesso à navegação simplificada.
Hoje, esse menu ainda é usado porque, como qualquer menu de navegação, trata-se de contexto, uso do usuário e objetivos do site/aplicativo.
| Vantagens | Limites |
| Economizando espaço no cabeçalho Reconhecimento universal de pictogramasExibição de um grande número de itens de navegação | Os usuários ficam menos inclinados a navegar se não conhecem o princípioA compreensão da navegação é posterior a um site com navegação visívelAo contrário da barra de toque (mobile) ou do menu superior (desktop), não permite que você saiba onde está |
Navegação baseada em gestos
A navegação por gestos é um método de navegação para celular ou tablet que abandona os botões de retorno e home em favor de uma interface baseada em gestos . Esse tipo de menu garante uma interação mais suave , embora em alguns dispositivos recursos como o botão Voltar possam estar ocultos.
A navegação consiste em deslizar , deslizar e beliscar com dois dedos , entre outras coisas . Este é o menu que é frequentemente encontrado em smartphones Apple e Android.
| Vantagens | Limites |
| Habilita uma interface limpa; não “desordenado” por elementos de navegaçãoGestos universais (zoom, delete, scroll) ( lei de Jakob )Permite que o produto se destaque dos demais | Os usuários ficam menos inclinados a navegar se não conhecem o princípioA compreensão da navegação é posterior a um site com navegação visívelAo contrário da barra de toque (mobile) ou do menu superior (desktop), não permite que você saiba onde está |
E os rodapés em tudo isso?
O menu de navegação do rodapé (na parte inferior da página) tem várias vantagens:
- Permite clarear o menu principal criando links para páginas que você não pode ou não deseja exibir no menu na parte superior da página (FAQ, Termos de uso, Política de devolução, etc.),
- Ele participa do bom referenciamento do site criando uma malha interna sólida .
É também um bom complemento de informação onde pode encontrar: um motor de busca, redes sociais, CTAs (pedido de demonstração, chamada ou conteúdo premium) ou os seus valores. A área do rodapé não deve, portanto, ser negligenciada!
Agora você tem todos os cartões em mãos para oferecer uma experiência de navegação coerente e fluida aos seus usuários!
É possível que certos tipos de menus o tenham convencido mais do que outros. No entanto, é necessário construir interfaces digitais de acordo com o tipo de website mas também com as expectativas e necessidades dos utilizadores. É aqui que entram os testes de UX e A/B para ajudar a orientar a implementação da navegação na web.
Claro que é importante promover um design atrativo, claro, legível, organizado e que sirva ao seu conteúdo, mas também deve servir à navegação do usuário final.
A definição de buyer personas e suas jornadas de compra, bem como o teste do usuário, muitas vezes são negligenciados (ou até esquecidos) ao criar um site. Ainda – e especialmente no contexto de redesenho ou criação de um menu de navegação – essas boas práticas são essenciais para obter um menu que facilite a leitura e a experiência do usuário .
