- Menus contextuais reduzem o ruído visual e diminuem o custo de interação, mas trazem o trade-off de baixo scent de informação e menor encontrabilidade
- São adequados para agrupar ações secundárias e complementares ligadas a objetos específicos como posts, fotos e eventos de calendário, e os ícones kebab (⋮) e meatball (⋯) costumam ser reconhecidos como “ver mais/outras ações”
- Quando o tamanho, o contraste ou a posição do ícone são inadequados, é comum que os usuários nem percebam o ícone ou interpretem mal seu significado, e esconder ações importantes transforma funções centrais em recursos difíceis de encontrar, piorando a experiência
- Para funcionar bem, é preciso adotar regras consistentes, como incluir apenas ações secundárias, posicionar perto do conteúdo relacionado, não esconder só uma ou duas ações, diferenciar do menu hambúrguer e garantir acessibilidade
- Um menu contextual bem projetado pode ser uma ferramenta para simplificar o layout e aumentar o foco, mas, quando usado em excesso ou de forma inadequada, pode aumentar confusão, cliques extras e carga de aprendizado, exigindo uso cuidadoso
Visão geral dos menus contextuais
- Um menu contextual é um menu que reúne um conjunto de ações relacionadas a um elemento específico da UI, uma área da tela, um fragmento de dados ou uma visualização do aplicativo
- Em um post, podem aparecer ações como Edit, Pin, Delete; em uma foto, Share, Download, Set as Background; em um evento de calendário, Delete, Reschedule, Duplicate, Invite
- Esses menus geralmente são usados para manter à mão funções secundárias que às vezes são necessárias, mas não precisam ficar sempre visíveis
- No desktop, costumam ser acionados por clique com o botão direito ou clique com dois dedos no trackpad; em interfaces touch, por long press; e, cada vez mais, pelos ícones kebab (⋮) e meatball (⋯)
Percepção e limites dos ícones kebab e meatball
- Participantes de pesquisas reconheceram, de forma geral, os ícones kebab (⋮) e meatball (⋯) como significando “há mais opções/outras ações escondidas”
- Essa percepção aparece tanto no mobile quanto no desktop e é entendida de forma mais consistente quando as diretrizes são bem seguidas
- Esses ícones são percebidos como um “interruptor que abre um conjunto de funções/ícones temporariamente ocultos”
- Ao mesmo tempo, esses ícones têm baixo scent de informação, então o usuário tende a clicar sem quase nenhuma pista concreta sobre quais opções específicas existem por trás deles
- Quando o ícone fica muito longe do conteúdo, é pequeno demais ou tem baixo contraste, também foram observados casos em que os usuários nem chegaram a perceber a existência do menu contextual
Vantagens e trade-offs dos menus contextuais
- Do lado das vantagens, menus contextuais ajudam a reduzir ruído visual, simplificar o layout e manter o foco
- Por outro lado, trazem os seguintes problemas de usabilidade
- Dificuldade de encontrar (queda de findability): se o ícone é pequeno, apagado ou fica longe da área de foco da tarefa, ele se torna um elemento fácil de passar despercebido
- Falta de scent de informação (Information Scent): como é difícil prever o que existe no menu, o usuário fica em um estado em que é difícil julgar se vale a pena clicar
- Possibilidade de interpretação equivocada: quando o posicionamento ou o uso são ruins, usuários podem confundir o ícone com um indicador de progresso ou um controle de carrossel
- Por isso, decidir usar ou não um menu contextual deve levar em conta o equilíbrio entre restrições de layout, expectativas do usuário e prioridade das tarefas
1. Coloque no menu contextual apenas ações secundárias e não essenciais
- Menus contextuais não são o lugar para ações centrais e muito frequentes, e sim para ações complementares e de menor prioridade
- A recomendação é ocultar, com base em pesquisa, funções que não façam parte do fluxo principal, mas ainda sejam usadas com alguma frequência
- É importante não esconder ações essenciais e muito usadas atrás de um menu contextual
- Como exemplo, o caso em que a interface de chat da AT&T colocava End Chat dentro do menu contextual é um mau exemplo de esconder a ação principal de encerramento
- Quando tarefas importantes ficam escondidas atrás de um menu, o usuário pode não encontrar a função ou experimentar incômodo repetitivo em tarefas executadas com frequência
2. Posicione o menu contextual perto do conteúdo que ele afeta
- Como os usuários interpretam relações entre elementos pela proximidade espacial, a posição do ícone do menu contextual deve deixar claro a qual objeto aquela ação pertence
- Se o menu se aplica apenas a um elemento específico, o ícone deve ficar dentro dele ou imediatamente ao lado
- Se a ação se aplica ao campo inteiro ou à transação inteira, ela deve ficar próxima da área onde as informações relacionadas estão agrupadas
- Deve-se evitar colocar o ícone em posições aleatórias ou em um ponto que não pareça conectado a nenhum elemento
- Como no caso da Ramp.com, em que um ícone kebab pequeno e de baixo contraste fica isolado no canto inferior direito da tela, tornando difícil entender a que elemento ele pertence e prejudicando tanto a encontrabilidade quanto a associação
3. Garanta visibilidade com tamanho e contraste suficientes
- Em telas densas ou aplicativos complexos, ícones de menu contextual muitas vezes são apresentados de forma tão sutil que praticamente desaparecem
- O ícone deve ter tamanho e contraste suficientes e, se possível, permanecer sempre visível, sem depender de hover
- Recomenda-se seguir diretrizes visuais validadas, com contraste de cor claro e bordas/fundos bem definidos
- Mostrar o ícone apenas no hover ou torná-lo excessivamente apagado em nome do minimalismo prejudica a encontrabilidade
- Como no exemplo da Ramp, em que o ícone kebab pequeno, com baixo contraste e distante é fácil de perder de vista
- Já no app mobile da Rippling, um caso em que o ícone fica dentro de uma caixa com borda, com pontos pretos sobre fundo branco, é um exemplo positivo por aumentar a percepção de que ele pode ser tocado e melhorar o scent de informação
4. Agrupe no menu contextual apenas ações relacionadas entre si
- As opções de um menu contextual devem reunir ações logicamente ligadas a um mesmo objeto, elemento ou nível hierárquico
- Por exemplo, para um arquivo, incluir apenas ações relacionadas ao arquivo, como Duplicate, Share, Delete
- Se possível, também é recomendável expor algumas ações diretamente ao lado do ícone para sugerir, como scent de informação, “que tipo de ações adicionais está escondido ali”
- Deve-se evitar misturar, em um único menu, ações globais com ações de um elemento específico, ou combinar ações sem relação entre si
- Essa mistura prejudica clareza, facilidade de encontrar, memória espacial e carga cognitiva
- Como no app desktop do Slack, em que o menu anexado à mensagem esconde apenas ações relacionadas à mensagem, enquanto ações sobre a thread inteira ficam em outro lugar, esse é um bom exemplo
5. Mantenha ícones e comportamentos consistentes em toda a interface
- O ícone de menu contextual deve manter, em todo o produto, a mesma função, o mesmo comportamento e a mesma aparência
- Se foi decidido usar o ícone meatball ou kebab para menu contextual, ele deve ser usado somente com esse significado e não reaproveitado para outros fins
- Deve-se evitar reutilizar o mesmo ícone para, em um lugar, expandir conteúdo oculto, em outro abrir um pop-up e, em outro ainda, abrir um painel lateral
- Esse tipo de uso prejudica o modelo mental e a confiança do usuário, além de reduzir aprendizado e memorização
- Nos resultados da Busca do Google, por exemplo, o ícone kebab em resultados patrocinados abre o modal My Ad Center, enquanto em resultados comuns abre um painel à direita, com comportamento e posição diferentes
- Como consequência, ações úteis como Like, Block, Report, Share, Save ficam escondidas e pouco descobertas, e o usuário passa a ter dificuldade para prever o que vai acontecer ao clicar no mesmo ícone
6. Se o ícone for ambíguo, reforce o significado com tooltip ou label
- Os ícones kebab e meatball são ícones abstratos com pouco significado intrínseco, então até uma pequena dica textual já pode melhorar bastante a usabilidade
- Sempre que possível, vale adicionar um rótulo visível ou uma tooltip no hover para informar com mais clareza que tipo de ação o menu contém
- Por exemplo, usar expressões claras com o elemento-alvo, como Post Actions ou Message Options
- Deve-se evitar rótulos vagos como Options ou textos como Ellipses, que apenas descrevem o formato do ícone
- Como no exemplo da Patagonia, em que a ação de ampliar a imagem foi mapeada para o ícone meatball e, no hover, o rótulo exibido era Ellipses, um caso que falha em transmitir significado
- Já no app desktop da Notion, uma tooltip como “Style, Export, and more…”, que sugere concretamente o tipo de ações existentes no menu, é um padrão positivo que aumenta muito o scent de informação
- Essa tooltip funciona de forma contextual, mudando de acordo com o conteúdo do menu
7. Use o ícone de menu contextual apenas para ações, não para expandir conteúdo
- Como os ícones meatball e kebab são reconhecidos como sinal de ações/opções adicionais, o ideal é não usá-los para expandir texto ou imagem
- Para expandir texto parcial ou ampliar imagem, recomenda-se usar rótulos textuais explícitos, como Read more ou Expand
- Como no exemplo das avaliações da Etsy, em que um ícone meatball abaixo da avaliação abre o texto completo, esse é um mau exemplo por ter baixo scent de informação
- Já o caso em que o Google Reviews oferece a mesma função com o link de texto More é uma forma mais adequada para uma ação de expansão de conteúdo
- O ícone kebab no topo do Google Reviews, que oferece apenas a ação Report, também viola a diretriz que aparece depois sobre não esconder apenas uma ou duas ações
8. Não use menu contextual para esconder apenas uma ou duas ações
- Sempre que possível, quando houver apenas uma ação ou poucas ações, é melhor expô-las diretamente na interface
- Esconder uma ou duas opções atrás de um menu quase não economiza espaço e só aumenta o número de cliques e o custo de encontrabilidade
- Isso é ainda mais evidente quando já existem ícones padrão conhecidos, como “x”, lixeira ou bandeira de denúncia, e eles acabam sendo escondidos de novo sob um meatball/kebab sem nenhum ganho real
- No caso do Weather.com, ao clicar no ícone kebab ele se transforma em um botão preto contendo apenas Delete
- Nessa situação, expor Delete diretamente desde o início usaria quase o mesmo espaço na tela, então não há motivo para escondê-lo
- Já no exemplo do Pinterest, ao passar o mouse sobre um pin, ações importantes como Save (botão no canto superior direito) e Share (ícone no canto inferior direito) são mostradas diretamente
- Esse padrão é positivo porque não esconde ações importantes dentro de um menu contextual e permite acesso imediato quando necessário
9. Não use o ícone hambúrguer como gatilho de menu contextual
- O ícone hambúrguer (☰) é amplamente reconhecido como símbolo de navegação global/principal, enquanto os ícones kebab e meatball (⋮·⋯) se consolidaram como padrão para ações contextuais ligadas a um item ou elemento específico
- A recomendação é usar o ícone hambúrguer apenas para a navegação global do site ou app, e reservar kebab e meatball para ações contextuais
- Deve-se evitar colocar um hambúrguer perto do conteúdo para guardar ações contextuais ou, no sentido oposto, usar kebab/meatball para ações globais como configurações de conta ou preferências gerais do site
- Essa mistura dilui o significado de ambos os padrões e quebra o modelo mental do usuário, gerando hesitação e omissões
- No exemplo do chat da Banana Republic, ao tocar no ícone hambúrguer no canto inferior esquerdo da janela de chat aparece apenas a ação contextual Save Transcript
- Esse caso não só usa o hambúrguer como menu contextual em vez de navegação global, como também esconde apenas uma ação, violando também a diretriz 8
10. Garanta acessibilidade por teclado e leitor de tela
- Menus contextuais devem poder ser usados também por pessoas que não usam mouse ou toque, exigindo uma estrutura que permita abrir e navegar pelo menu com teclado e leitor de tela
- O menu deve poder ser aberto e percorrido com Tab, Enter e teclas de seta, e seus itens também precisam ser lidos por leitores de tela, receber foco e ser executáveis
- Deve-se evitar menus acessíveis apenas por clique/toque ou interações customizadas que quebram padrões de acessibilidade
- Priorizar acessibilidade beneficia não só usuários com deficiência, mas também usuários avançados, além de contribuir para o cumprimento de padrões de design inclusivo
Conclusão
- Menus contextuais são uma ferramenta poderosa para manter a interface simples e, ao mesmo tempo, disponibilizar ações complementares quando necessário
- Eles são especialmente úteis para organizar o layout e permitir que opções extras sejam abertas apenas quando o usuário precisa, sem perder o foco na tarefa
- Mas, como são uma estrutura com descoberta e clareza limitadas, seu uso sempre exige cuidado
- Devem ser usados apenas para ações realmente secundárias, com atenção a posição, consistência, scent de informação e acessibilidade
- A mensagem central é equilibrar minimalismo visual e usabilidade real
- Menus contextuais entregam seu maior valor quando são usados como uma ferramenta para organizar a interface sem esconder o fluxo principal
1 comentários
Às vezes preciso mexer no frontend que roda na intranet interna da empresa e já levei bronca por ter colocado ícones como ☰ ⋮ ⋯ + no dashboard visto pelos executivos. Eles perguntavam para onde tinham ido certas funções, e quando eu dizia que era só apertar esse botão, respondiam que não dava para ver, que era para simplesmente escrever em texto e reclamavam disso... Teve uma vez em que acabei voltando para a interface dos anos 2000 que usávamos antes. Como em tudo, frontend é difícil mesmo.