Mega Menus e Experiência do Usuário
O princípio principal por trás do uso de um mega menu deve ser a resposta a uma pergunta simples:
Um mega menu facilita a navegação das pessoas no meu site?
Você não deve simplesmente adicionar um porque eles são a última novidade. A adição de um mega menu ao seu site deve levar em consideração a experiência do usuário (UX). Se o seu mega menu tornará o processo de navegação mais suave e intuitivo, adicione um. Se isso não acontecer, ou se você simplesmente não precisar de tantos itens no menu, opte por um menu suspenso normal.
Outra pergunta que você pode querer se fazer ao decidir usar um mega menu é esta:
Um mega menu ajudará meu site a atingir seus objetivos?
Você pode estar pensando que esta é uma pergunta vaga e difícil de responder, mas todos os aspectos do design e do conteúdo do seu site devem estar relacionados ao que o seu site está tentando alcançar. Isso pode ser uma entre várias coisas:
- para vender produtos on-line
- para incentivar as pessoas a entrar em contato com você para comprar seus serviços
- para crescer uma sequência
- para promover uma instituição de caridade
- para criar uma comunidade
- para conseguir assinantes
- vender ingressos para eventos
Tenho certeza de que há muitos outros objetivos que um site poderia ter, mas esses são alguns dos mais comuns. Compreender o seu ajudará você a saber exatamente quais páginas do seu site você deseja que os usuários visitem para atingir seus objetivos.
Portanto, se você deseja que as pessoas comprem produtos online e tem uma loja grande e complexa, um mega cardápio pode ser a melhor opção. Mas se você tem um produto ou serviço muito específico e deseja direcionar as pessoas para a página de vendas para isso, um mega menu pode ser uma distração.
Antes de decidir adicionar um mega menu, reserve um tempo para considerar o que você deseja que seu site alcance, onde no site você deseja incentivar os visitantes a irem e que tipo de navegação os incentivará a fazer isso.
Abaixo estão alguns exemplos específicos de quando um mega menu pode melhorar seu site.
Quando usar um Mega Menu
Vamos dar uma olhada em alguns cenários em que mega menus são uma adição útil ao seu site.
1. Quando os usuários estão esperando um
Se o seu site for de varejo, os usuários estarão acostumados a ver mega menus e a usá-los para navegar pelos departamentos da loja.
Por exemplo, o site da John Lewis mostrado abaixo usa um mega menu diferente para cada seção principal da loja. O abaixo é para a seção de roupas femininas:
As pessoas estão acostumadas a usar mega menus em sites de grandes lojas de departamentos como essa e não ficarão confusas com isso. Se eu visitar o site em busca de um vestido, por exemplo, posso facilmente acessar essa seção do site com um clique.
2. Quando um menu suspenso seria muito grande
Em alguns casos, um menu suspenso, ou uma série deles, conteria tantas opções que prejudicaria a experiência do usuário.
Jakob Nielsen e Angie Li fizeram um estudo mostrando que, para grandes menus de navegação, os megamenus aprimoravam a UX em comparação com os menus suspensos. Isso ocorre porque um menu suspenso com muito conteúdo exigirá que o usuário role para baixo ou, às vezes, role para baixo e volte novamente. Isso leva mais tempo, sobrecarrega mais a memória de curto prazo e pode ser confuso.
Portanto, se o seu site precisa ter muitos elementos no menu de navegação, um mega menu pode melhorar a experiência do usuário. Mas certifique-se de que, se você usar um, estruture-o de uma forma intuitiva para os usuários e use dicas de design, como cores, efeitos de texto e fontes, para facilitar a navegação.
O site do jogo abaixo é um bom exemplo de uma série de mega menus, cada um relacionado a uma seção do site. Eles usaram espaçamento e efeitos de texto, como texto em negrito e planos de fundo, para tornar o menu intuitivo e fácil de navegar.
3. Quando o design do menu aprimora o site
Às vezes, você tem a oportunidade de adicionar mais do que apenas links de texto ao seu site.
O site Moleskine, mostrado abaixo, tem um mega menu com um diferencial. Além dos links de texto, traz fotos de alguns produtos importantes, que funcionam como links junto com o texto que os sobrepõe.
Isso incentiva o visitante a acessar essas páginas e torna o mega menu mais do que apenas um aspecto funcional do site – ele aprimora o design e ajuda a atingir os objetivos de vendas.
Quando não usar um mega menu
Haverá momentos em que você não deverá usar um mega menu. Aqui estão alguns exemplos.
1. Quando você não tem muitos links
Se o seu site não tiver centenas de páginas, um mega menu será um exagero. Para o site ou blog de uma pequena empresa comum, um mega menu apenas confundirá os visitantes – e também parecerá bastante vazio.
O site Envato Tuts+ usa uma combinação de mega menus e menus suspensos normais. Para as seções do site que não possuem muitos links, um menu suspenso normal faz o trabalho e cobre menos parte da página:
2. Quando sua página inicial nada mais é do que links
Se a sua página inicial é apenas uma página cheia de links para subpáginas, você também não precisa de um mega menu.
Um exemplo disso é o site do governo do Reino Unido, que tem uma página cheia de links como página inicial:
Depois de navegar mais no site, há um menu de navegação à esquerda que pode ser expandido:
Este também é um bom exemplo de não usar um mega menu em um contexto onde os usuários podem não estar esperando por isso. Os mega menus são menos comuns em sites do setor público do que no varejo, por exemplo.
3. Quando você deseja direcionar visitantes para uma página específica
Às vezes, seu site será projetado para vender apenas um ou dois produtos ou serviços ou para incentivar inscrições em uma lista de e-mails.
Se for esse o caso, você pode ter um banner na página inicial direcionando os visitantes para uma landing page.
Em casos como esses, você deseja manter a navegação mínima. Um mega menu dará aos visitantes tantas opções que será muito menos provável que eles visitem a página que você deseja. Portanto, mantenha sua navegação ao mínimo e concentre-se em direcionar os visitantes para sua página de destino.
O site Social Media Examiner é um bom exemplo disso. No momento, eles querem que os visitantes façam uma de duas coisas: inscrevam-se na lista de e-mails ou comprem um ingresso para a conferência. O banner reflete o segundo deles, e a frase de chamariz que ocupa a seção superior da página inicial reflete o primeiro.
Se eles oferecessem aos visitantes um grande mega menu, isso reduziria as chances de eles fazerem uma dessas duas coisas, então eles mantêm a navegação simples.
4. No celular
Será difícil criar um mega menu que seja legível em uma tela pequena. Para que funcionasse, você teria que tornar os links minúsculos, o que significa que as pessoas não conseguiriam tocá-los, ou introduzir a rolagem. Combinar um mega menu com rolagem pode ser confuso, pois é difícil saber onde termina o mega menu e começa o conteúdo da página.
É uma prática recomendada no celular usar um menu de hambúrguer: um menu que fica invisível até que você toque em um símbolo para ele. Muitas vezes é chamado de menu de hambúrguer por causa do símbolo: três linhas verticais parecem um hambúrguer.
O site da John Lewis apresentado acima tem um menu como este. Toque no símbolo e as opções do menu aparecem abaixo dele.
Coisas para manter em mente ao adicionar um mega menu ao seu site
Acabamos de discutir quando você deve ou não adicionar um mega menu ao seu site. Se você decidir que um mega menu melhorará a usabilidade do seu site, é hora de aprender algumas coisas importantes que vale a pena ter em mente antes de adicionar um ao seu site.
Os links devem ser bem organizados
Os mega menus geralmente contêm muitos links. Portanto, é importante que os links estejam bem organizados e divididos em seções adequadas. Isso fica evidente na captura de tela do mega menu no site da John Lewis. Os links na seção Mulheres são colocados em diferentes categorias de fácil navegação.
Você também quer ter certeza de que todos os links em um mega menu sejam fáceis de ler e clicar. Os links devem ter espaço suficiente entre eles para que os usuários não cliquem acidentalmente em algo que não desejam visitar. Eles devem conter texto limitado, mas ainda assim ser capazes de ajudar os usuários a entender para onde os levarão depois de clicados.
Você também pode adicionar algumas dicas visuais ao menu de navegação para ajudar os usuários a entender como os links são organizados. Por exemplo, um ícone de seta indicará aos usuários que clicar em um item específico do submenu mostrará vários novos links. Os itens que são ou não clicáveis devem ser facilmente distinguíveis.
Mega menus são complicados e consomem muitos recursos. Eles exigem muita marcação, CSS e JavaScript para funcionar em qualquer lugar conforme o esperado. Alguns mega menus também usam imagens generosamente. Isso pode ter um efeito adverso no tempo de carregamento do menu e também do site. Você não quer que seu cliente potencial se canse de esperar e depois vá até a concorrência. Portanto, manter o mega cardápio otimizado deve ser uma prioridade.
Como discutimos anteriormente, os mega menus não funcionam bem em dispositivos móveis devido ao tamanho pequeno da tela. Você deve considerar fornecer uma forma alternativa de navegação em telas menores para manter seu site responsivo. Por exemplo, você pode usar o menu hambúrguer em dispositivos móveis e talvez colocar imagens no menu de navegação em telas pequenas e usar apenas links básicos.
Os usuários usarão frequentemente o seu mega menu para pular de uma seção do site para outra. Você pode usar o conhecimento para aumentar o envolvimento do usuário adicionando com bom gosto algumas frases de chamariz ou promoções nos lugares certos.
O que pode parecer óbvio e correto em um mega menu para você pode não ser para os usuários. Portanto, é importante que você faça testes A/B consistentemente em seu mega menu para descobrir que tipo de layout oferece melhores resultados para sua situação.
Também é igualmente importante que você teste seu mega menu no maior número possível de navegadores e dispositivos. Mega menus são elementos de interface de usuário complexos e fazer com que tenham a aparência correta pode ser um pouco complicado. Enquanto você faz isso, certifique-se também de que todos os links do seu mega menu estão funcionando corretamente.
Para obter mais inspiração para criar seu mega menu, você pode conferir estes outros posts no Envato Tuts+:
Mega menus podem ser uma ótima maneira de melhorar a experiência do usuário do seu site. Se você tiver um site grande com muitos links, adicionar um ajudará os usuários a navegar. Se o seu site se enquadra nos requisitos, tente adicionar um mega menu hoje mesmo.
