Botão de menu: exemplos em e-commerce e prós e contras

Com cada vez mais pessoas a usar o telemóvel para fazer compras online, a responsividade e intuitividade é essencial em dispositivos móveis. O problema é que o espaço no ecrã de um telemóvel é escasso. Se os elementos de navegação do site estiverem amontoados ou forem confusos, os visitantes provavelmente desistem e vão comprar noutro lado.

É por isso que muitos sites e aplicações recorrem ao verdadeiro canivete suíço da navegação móvel: o botão de menu. O ícone de três linhas tornou-se o símbolo internacional para "mais opções de navegação aqui", pois condensa o menu de um site num botão robusto.

Saiba mais sobre o poder e as limitações do botão de menu: a sua história, as principais funcionalidades e como usá-lo de forma eficaz no seu design de site.

O que é um botão de menu?

Durante anos, o método padrão da navegação em sites foi o menu horizontal — uma fila de palavras para cada categoria estendida ao longo do topo do ecrã. Mas com o boom da navegação móvel no final da década de 2000 e início da de 2010 (impulsionada pelos avanços na tecnologia dos smartphones e ligação à internet móvel) os web designers precisavam de uma solução que aproveitasse melhor o espaço.

É então que surge o botão de menu (☰) — um ícone simples de linhas horizontais paralelas empilhadas — que permite aos utilizadores expandir e recolher as opções de navegação conforme necessário. Normalmente, o botão de menu encontra-se no canto superior esquerdo ou direito do site, ou aplicação.

A história do botão de menu

Em boa verdade, o botão de menu é anterior aos dispositivos móveis. No início da década de 1980, o designer Norm Cox criou-o para a interface gráfica de utilizador da estação de trabalho Xerox Star, precursora da interface original do Apple Macintosh. Cox queria um ícone simples e reconhecível para abrir uma lista de itens acionáveis com um clique.

Após a sua introdução inicial, o botão de menu teve uma utilização limitada e acabou por cair no esquecimento até à adoção generalizada dos telemóveis por volta de 2009. A necessidade de apresentar opções de menu em ecrãs pequenos sem sobrecarregar os utilizadores fez da compactação organizada do ícone de botão de menu a solução ideal.

A popularidade do botão de menu ficou cunhada quando o Twitter e outras aplicações móveis o adotaram, seguindo-se a sua utilização na aplicação Voice Memos do iPhone 3GS e no respetivo iOS 4, o que consolidou o seu papel como símbolo familiar de navegação oculta.

Vantagens e desvantagens do botão de menu

Os botões de menu são excelentes para dispositivos móveis, mas as barras de navegação e os menus com separadores podem servir melhor os utilizadores de computador. Eis o porquê:

Vantagens

O tamanho compacto do ícone de menu é a razão da sua existência. Poupa o precioso espaço do ecrã e desafoga o design do site, sobretudo em ecrãs mais pequenos como os dos smartphones. Ao clicar ou tocar no ícone de menu revela-se a navegação do site, seja através de um menu deslizante, de um menu suspenso ou de uma sobreposição em ecrã inteiro. Isto pode melhorar a experiência do cliente que navega no telemóvel.

Desvantagens

Embora a poupança de espaço seja inegável, há quem argumente que os menus em navegadores de computador podem prejudicar a descoberta de conteúdos. Se os utilizadores não estiverem familiarizados com o ícone do menu, podem passar-lhe ao lado por completo e ignoram conteúdos ou opções de navegação importantes no site.

Para resolver esta questão, considere implementar modelos de design responsivo com várias estruturas de menu para os diferentes dispositivos. Um site pode mostrar uma barra de navegação horizontal tradicional em computadores, mas mudar para um botão de menu em dispositivos móveis para poupar espaço no ecrã.

Exemplos reais: menus de site em ação

É fácil de perceber que um site aplicou o design responsivo, pois o botão de menu só aparece na versão móvel, enquanto na versão para computador surge um estilo de menu diferente. Eis alguns sites de e-commerce que usam botões de menu de forma eficaz:

TCB Jeans

A TCB Jeans opta pela simplicidade ao usar um botão de menu padrão de três linhas no topo do site móvel. Ao clicar nele, uma lista de ligações surge a partir do lado esquerdo, com itens como “Início”, “Produtos” e “Sobre nós”. A ligação “Produtos” tem um pequeno sinal de + ao lado, a indicar que há mais opções se tocar nela.

O site da TCB (versão desktop) também apresenta um botão de menu, o que permite usar uma fotografia de fundo que ocupa a largura total e promoções apelativas numa posição de destaque. Na versão para smartphone, o botão de menu surge como uma sobreposição, dando aos utilizadores uma pista visual de que o menu pode ser ocultado, para rever a página que está por trás. O design do botão de menu da TCB é:

• Limpo

É má ideia amontoar botões de menu num ecrã de telemóvel. Mais vale escondê-los no botão de menu.

• Familiar

O botão de menu é comum em sites móveis, por isso não gera confusão na maioria dos utilizadores.

• Deixa os produtos brilhar

Ao esconder o menu atrás do botão de menu, a fotografia dos produtos destaca-se e mostra logo os artigos que estão à venda.

Gymshark

O site da Gymshark é um ótimo exemplo de como um site de computador pode diferir da sua versão otimizada para dispositivos móveis. No computador não há botão de menu; no entanto, no telemóvel, o botão de menu aparece no canto superior esquerdo. Ao tocar nele, vê uma caixa de pesquisa e submenus de categorias de produtos. Para voltar à página inicial, basta tocar no ícone X no canto superior direito.

O botão de menu da Gymshark funciona bem porque dá prioridade ao que mais importa: primeiro mostra as promoções e as peças de roupa novas para captar a atenção na hora. Também é familiar, com o botão de menu colocado onde seria de esperar e seguido por uma lista simples e fácil de compreender.

Dicas para o sucesso do botão de menu

Os proprietários de sites que usam botões de menu podem considerar estas 6 dicas para melhorar a experiência do utilizador e as taxas de conversão:

Deixe-o sempre visível

Na maioria dos casos, o botão de menu é pequeno. Garanta que continua a ser fácil de detetar. Coloque-o no canto superior esquerdo ou direito do ecrã, onde os utilizadores costumam procurar. E mantenha a mesma posição em todas as páginas do site.

Mantenha-se fiel ao ícone de menu padrão

Use as três linhas horizontais paralelas amplamente reconhecidas (☰) para o botão de menu. Estes ícones estão por toda a parte e a maioria dos utilizadores compreende de imediato a sua função.

Dê prioridade à hierarquia dos itens do menu

Organize os itens do menu de forma lógica. Pode adicionar uma caixa de pesquisa e, a seguir, ordenar as categorias ou páginas mais importantes e mais consultadas, de cima para baixo.

Seja acessível e adaptado a dispositivos móveis

Garanta que o seu menu funciona bem em todos os dispositivos móveis e ecrãs táteis. Os itens do menu devem ter uma dimensão que permita tocar nos mesmos facilmente com o dedo.

Adicione animação e resposta visual

À medida que o utilizador interage com o menu, surgem efeitos subtis e pistas visuais. Por exemplo, as linhas podem rodar e transformar-se num X ou num + para indicar a abertura e o fecho. As linhas podem mudar de espessura ou expandir-se ligeiramente. Usar efeitos de desvanecimento e de deslocação acrescenta profundidade à medida que o utilizador interage. Também pode mudar a cor ou fazer o menu saltitar um pouco quando é tocado.

Teste e recolha feedback

Antes de finalizar o seu botão de menu, teste-o com utilizadores reais. Observe como interagem com o mesmo e recolha feedback.

Usar um botão de menu com outras ferramentas de navegação

Por vezes, a melhor forma de melhorar a usabilidade de um site é combinar diferentes botões e menus. Cada tipo tem as suas vantagens e desvantagens, mas, quando usados em conjunto, podem criar uma experiência de utilizador mais fluida e eficaz.

Os web designers de e-commerce podem usar combinações que facilitem a descoberta de produtos, com acesso claro e direto ao carrinho e ao processo de check-out. Verifique se é fácil de tocar em todos os elementos de navegação em ecrãs táteis. Teste várias combinações para ver o que funciona melhor com o seu público-alvo:

• Navegação superior

Use a navegação superior para categorias e funções essenciais, como a loja e o carrinho, reserve o botão de menu para funcionalidades de navegação menos frequentes, como “Sobre nós”, “Contacto”, “Apoio ao cliente” e “Políticas”. Assim, o ecrã principal fica limpo, mas continua a dar acesso rápido às páginas necessárias.

• Navegação por separadores

Use a navegação por separadores dentro de uma página de categoria de produtos para filtrar ou ordenar produtos, como “Novidades”, “Mais vendidos” e “Ordenar por preço”. Isto permite aos utilizadores aprimorar rapidamente a pesquisa de produtos após usarem o botão de menu para a navegação geral do site.

• Cabeçalho fixo

O cabeçalho fixo contém ligações de atalho essenciais para as principais categorias e mantém-se no topo do ecrã à medida que se desloca a página. O botão de menu seria usado para páginas secundárias.

Por exemplo, o site da Fly by Jing usa um botão de menu para as seleções gerais, mas a própria página da loja usa um menu de separadores com quatro opções ("Sauces", "Sets", "Pantry" e "Merch") para fazer uma ligeira melhoria e tornar o site mais intuitivo.