Práticas recomendadas de design de menu multinível

A navegação e a localização são aspectos centrais do design da experiência do usuário. Se os usuários não conseguirem chegar aonde querem ou encontrar o que precisam, ficarão frustrados e poderão decidir procurar em outro lugar. Em sites com arquitetura de informações especialmente complexa, os menus multiníveis são uma maneira eficaz de melhorar a navegação e a localização, oferecendo experiências na Web eficientes que promovem a confiança no produto e aumentam as conversões.

Como os produtos e os dispositivos nos quais são usados ​​variam muito, não existe uma solução única para todos que produza o menu multinível perfeito. No entanto, existem regras práticas que ajudarão você a criar menus de vários níveis que aprimoram a navegação e a localização em qualquer tamanho de tela.

Dicas de design para qualquer tamanho de tela

Um bom menu multinível deve levar os usuários aonde eles precisam ir rapidamente, apresentando informações de maneira clara e intuitiva. Antes de entrarmos em diretrizes específicas de tamanho, vejamos algumas práticas que se aplicam a todos os menus.

Use no máximo dois níveis de submenus. Mais de dois níveis de submenus provavelmente confundirão e sobrecarregarão os usuários. Manter a navegação relativamente plana melhora a localização para os usuários e reduz a carga cognitiva necessária para lembrar onde eles estão. Se a estrutura da página do site for profunda, considere adicionar um menu de navegação local ao topo das páginas relacionadas. Por exemplo, a Zoho, que projeta produtos complexos de suporte a negócios, colocou um menu local específico do produto na parte superior de cada página do produto, logo abaixo do menu principal. Enquanto o menu principal na parte superior enumera as principais ofertas do Zoho, os menus locais fornecem acesso a páginas com informações mais detalhadas, como casos de uso e preços.

Sinalizar submenus com ícones. Gerencie as expectativas dos usuários sempre deixando claro quando há submenus disponíveis. As escolhas familiares incluem um pequeno ícone de ângulo para baixo ou um ícone de triângulo. Além disso, considere inverter os ícones de ponteiro quando os submenus estiverem abertos.

Organize as informações de forma intuitiva. Certifique-se de que a hierarquia das informações esteja alinhada com os modelos mentais dos usuários. Em um site de comércio eletrônico, por exemplo, considere se é mais provável que um comprador espere que os itens sejam organizados por marca ou tipo de item. Se um usuário clicar na categoria “Sapatos”, ele espera que o submenu apresente opções para tênis, sandálias e botas? Ou eles esperam ver um submenu listando todas as marcas de sapatos que a loja oferece? Observar sua pesquisa de usuários e sua pesquisa de concorrentes esclarecerá isso.

Certifique-se de que os usuários saibam onde estão o tempo todo. Sempre destaque o link no menu principal que corresponde à página em que o usuário está. Se a página atual estiver em um submenu, destaque também o link do submenu e o item pai no menu principal. Por exemplo, se alguém usando um site do governo para renovar sua carteira de motorista navegasse do link “Residentes” no menu principal para o link “Serviços de motorista” no submenu e depois para uma página com um formulário de renovação, tanto o “ Residentes” e os links “Serviços de motorista” permaneceriam destacados.

Mantenha a cópia simples. Um menu não é o lugar para jogos de palavras inteligentes; certifique-se de que os rótulos dos links tenham um forte cheiro de informação. Isso significa manter os nomes dos rótulos simples e descritivos para que os usuários saibam imediatamente o que encontrarão quando clicarem. Quanto mais clara a cópia, mais rapidamente os usuários encontrarão o que precisam.

Priorize a legibilidade. Use uma fonte simples sem serifa e garanta o espaçamento adequado entre os itens para evitar confusão. Certifique-se de que o plano de fundo seja opaco o suficiente para bloquear o que estiver por trás do menu. Mas não ignore a marca geral do site. Embora a legibilidade esteja em primeiro lugar, certifique-se de que o estilo do menu complementa o restante da aparência do site.

Torne o clique e o toque acessíveis. Para tornar o menu acessível para usuários com deficiências de controle motor fino, siga as diretrizes do Material Design do Google e formate os elementos clicáveis ​​com pelo menos 48 x 48 pixels de tamanho.

Dicas de design para desktops

Mesmo com uma tendência crescente para dispositivos móveis, ainda há muitos motivos pelos quais os clientes podem exigir sites para desktop com todos os recursos. Por exemplo, eles podem precisar disponibilizar mais informações on-line do que é viável para um site móvel, como um site de uma universidade ou instituição financeira. Ou sua pesquisa pode mostrar que seus usuários simplesmente confiam mais em desktops.

Um menu de desktop deve ser fácil de digitalizar, oferecer interações claras e, claro, ser responsivo. Também deve ser o mais consistente possível com o site para dispositivos móveis, a fim de tornar a experiência intuitiva para visitantes recorrentes.

Os menus devem abrir ao clicar, não ao passar o mouse. Uma das decisões mais fundamentais que você precisará tomar é como os usuários acessarão o menu do site. Simplesmente passar o ponteiro sobre o item pai - o nome da categoria - será suficiente para acionar a aparência do menu ou os usuários precisarão clicar nele?

A abordagem de foco é popular, mas clicar para abrir é a melhor maneira de garantir que o menu funcione de maneira confiável e intuitiva em todos os dispositivos. A abordagem de clique permite que os sites funcionem de forma mais consistente em monitores de computador tradicionais e telas sensíveis ao toque e evita muitas frustrações que ocorrem com a abordagem de foco, incluindo:

• Túneis de flutuação estreitos. Um túnel flutuante é o caminho que um mouse deve seguir para navegar enquanto mantém o menu aberto. Se for muito estreito, o menu pode desaparecer antes que o usuário alcance o link desejado.
• Abertura acidental. Um menu suspenso é propenso a abrir inadvertidamente se um usuário tentar navegar por ele a caminho de outro local na página. Definir um breve atraso resolve esse problema, mas pode causar frustração quando o usuário deseja abrir o menu.
• UX inconsistente em telas sensíveis ao toque. Os menus suspensos não funcionam em telas sensíveis ao toque. Eles exigem uma correção de código para detectar telas sensíveis ao toque e alternar para tocar para abrir; à medida que a linha se torna cada vez mais indistinta entre laptop e tablet, essas soluções alternativas podem se tornar obsoletas.
• Perguntas sobre o que é clicável. Com menus flutuantes, os usuários nem sempre sabem se o link pai é clicável até tentarem clicar. Isso é o oposto de intuitivo.
• Acessibilidade. Os menus suspensos podem apresentar problemas para usuários que usam leitores de tela ou navegam pelo teclado.

Escolha o layout certo: Menu suspenso vs. Mega. Se o site para desktop usa um layout de menu tradicional (uma barra de menu horizontal situada na parte superior da página), há dois tipos de submenus que você pode considerar: um menu suspenso de coluna única padrão ou um mega menu de várias colunas.

Considere usar uma lista suspensa se a categoria pai contiver menos de oito links. Se o menu suspenso for longo o suficiente para exigir uma rolagem vertical, considere organizar as informações de maneira diferente, talvez como um mega menu ou refinando as categorias principais.

Um mega menu é um tipo de menu aninhado que normalmente usa um layout amplo que pode estender a largura do navegador. Você deve usar este tipo de menu se os submenus contiverem muitos links diferentes que possam ser agrupados em colunas. Normalmente, você vê menus como esse em grandes sites de comércio eletrônico.

Ao projetar um mega menu, considere o seguinte:

• Adicione imagens ou ícones para facilitar a digitalização das informações.
• Adicione títulos para agrupar páginas relacionadas.
• Adicione descrições se os nomes das categorias não forem evidentes.

Mega menus podem ser difíceis de ler e navegar em dispositivos móveis, mas às vezes a melhoria no UX em uma tela maior faz valer a pena fazer o trabalho extra para reconfigurar as informações para dispositivos móveis.

Adicione estados de foco claros. Mesmo com menus de clique para abrir, incluindo estados de foco claros para todos os elementos clicáveis, as interações são satisfatórias e asseguram aos usuários que os links estão ativos. Você pode tornar o plano de fundo da área clicável um pouco mais escuro para indicar um estado de foco. Apenas certifique-se de que a área de foco corresponda à área clicável. Se o teste mostrar que os usuários precisam de mais orientação ou contexto, considere adicionar nomes de rótulos mais descritivos ou uma dica de ferramenta, desde que não bloqueie nada importante.

Clique para fechar os submenus. Mantenha as coisas intuitivas fechando os menus quando os usuários clicam em outro lugar ou quando abrem outro submenu. É assim que os campos de entrada suspensos funcionam nos formulários, portanto, a maioria dos usuários achará isso familiar.

Ative a navegação pelo teclado na área de trabalho. Nem todo mundo usa um mouse para navegar, então o menu deve permitir que os usuários naveguem usando apenas um teclado. Isso significa que todos os links devem ter estados de foco distintos para que os usuários possam ver onde estão rapidamente. Normalmente, um quadro de cor mais escura funciona bem para indicar o estado de foco.

Dicas de design para telas de celular

Se você ainda não estiver projetando mobile-first, precisará otimizar o menu para um dispositivo portátil. Os layouts de menu tradicionais raramente funcionam bem em telas muito pequenas - se você simplesmente encolher a barra de menus da área de trabalho, ninguém poderá lê-la. Essas diretrizes ajudarão você a fazer uma transição bem-sucedida para a tela pequena.

Simplifique o menu principal. Como as telas dos smartphones são muito pequenas, muitas das informações que você encontraria em um menu da área de trabalho terão que ser ocultadas inicialmente. A barra de menu principal terá que ser muito simples, mas é uma boa ideia mostrar os links mais importantes para melhorar a localização. Você pode afixar a barra de menu na parte inferior ou superior da tela.

Adicione um acionador de menu. Como todo ou parte de um menu móvel pode estar oculto, os usuários precisarão de uma maneira de encontrá-lo. Adicionar um ícone de hambúrguer à barra de menu ou em um botão flutuante de fácil acesso é uma solução popular, que muitos usuários reconhecerão. No entanto, o menu de hambúrguer não é a única opção. Se você estiver projetando para usuários mais velhos, pode ser melhor usar uma caixa com a palavra “Menu”, por exemplo. Ou, se você quiser tornar os recursos do site mais proeminentes, talvez queira exibi-los em um menu com guias na parte superior ou inferior.

Coloque o menu em uma barra lateral. Há muitas maneiras diferentes de criar um menu móvel. Você pode usar um layout de largura total, que funciona em qualquer situação; uma gaveta inferior, que é melhor quando há apenas alguns links; ou um menu circular de canto, que é uma opção futurista para um pequeno menu sem submenus. Uma boa opção é usar uma barra lateral com um fundo escuro e translúcido que bloqueie o conteúdo da página, removendo assim as distrações e permitindo que os usuários toquem facilmente para fechá-la. Considere também usar uma animação de slide da esquerda para evitar uma experiência chocante. Para menus da barra lateral e da gaveta inferior, certifique-se de que o menu seja rolável verticalmente para que nada seja cortado em telas menores ou no modo paisagem.

Permita que os usuários fechem o menu facilmente. Os usuários podem clicar intuitivamente em um menu para fechá-lo, mas considere adicionar um botão X também. Você pode transformar o ícone do hambúrguer em um X ou adicionar um no canto superior direito do menu.

Use seções de expansão para submenus únicos. Considere usar seções de expansão se o menu tiver apenas um nível de submenus. Você pode expandi-los abaixo do item pai e usar uma cor de fundo diferente para maior clareza. Você também pode permitir que os usuários expandam vários submenus ao mesmo tempo. Considere usar um ângulo para baixo ou um ícone de triângulo no lado direito do item pai para indicar que um submenu está disponível.

Substitua mega menus e vários submenus por menus sobrepostos. Se você precisar expandir mais de um submenu ou reconfigurar um mega menu, opte por uma abordagem de sobreposição: em vez de expandir um submenu abaixo ou ao lado do pai, faça com que o submenu substitua o pai. Com esta abordagem, você terá que incluir um link “Voltar” em todos os painéis, exceto no primeiro nível. Para o menu de nível superior, considere usar um ícone de ângulo reto ou uma seta para a direita para itens pai.

Submenus pré-abertos. Na área de trabalho, é útil destacar a página atual e seu pai. Em telas pequenas, considere dar um passo adiante. Se um usuário tocar para abrir o menu principal e a página em que está atualmente estiver dentro de um submenu, considere abrir automaticamente o submenu também, para que o usuário entenda onde está em relação ao restante dos itens do menu.

Mantenha-o claro e consistente

A navegação é um componente crucial da experiência do cliente. Os usuários não querem fazer uma caça ao tesouro ou gastar mais tempo percorrendo os menus do que o necessário. Se eles não encontrarem facilmente o que precisam, eles podem comprometer os recursos do seu cliente com uma chamada de suporte ou, pior ainda, levar seus negócios para outro lugar.

Um menu multinível bem projetado é um componente-chave de qualquer site com uma arquitetura de informações complexa. Embora essas diretrizes nunca devam substituir a pesquisa e o teste do usuário, elas servirão bem em uma ampla variedade de casos de uso.

Leia mais no Blog da Toptal:

• O Guia Completo para Arquitetura da Informação
• Design responsivo: melhores práticas e considerações
• Princípios de Arquitetura da Informação para Celular (com Infográfico)