- A prática de design de incluir ícones por padrão em cada item de menu está se espalhando e causa ruído visual desnecessário
- Google Sheets e o sistema de menus da versão Tahoe do macOS são casos representativos, com ícones adicionados a quase todos os itens
- Em alguns menus, não fica claro o critério para definir a presença de ícones e isso se sobrepõe ao indicador de alternância, causando desorganização no alinhamento
- Por outro lado, ícones que ajudam na compreensão visual — como no menu de alinhamento de janelas do Finder — são úteis, então a decisão de usar ícones precisa levar em conta o contexto
- O problema é que a Apple abandonou o princípio de suas próprias diretrizes de interface que recomendava “evitar o uso arbitrário de ícones”
Crítica ao abuso de ícones em menus
- O padrão de anexar ícones a todos os itens de menu está se tornando padrão e torna as interfaces excessivamente complexas
- Assim como no Google Sheets, em que os menus “File”, “Edit” e “View” têm ícones em todos os itens
- Essa abordagem leva ao hábito de criar ícones para “preencher espaço”
- No fim, é uma simples padronização que não considera o contexto de cada menu nem a carga cognitiva (cognitive load)
- O uso de ícones deve ser selecionado com cuidado conforme o contexto
- É preciso decidir se os ícones realmente aumentam a usabilidade ou apenas provocam confusão
- O caminho de “colocar ícones em todos os menus” é pouco refletido
Mudanças no macOS Tahoe
- O macOS permaneceu distante desse modelo por bastante tempo, mas ícones foram introduzidos em toda a estrutura de menus no macOS Tahoe
- No menu Apple e nos menus “Safari”, “File” e “View” do Safari, só alguns itens exibem ícones
- Enquanto “Settings” tem ícone e “Privacy Report” não tem, há falta de consistência
- No menu File do Safari, somente alguns grupos recebem ícones e recuos, enquanto outros não
- No menu “View”, o indicador de marcação (toggle) e os ícones aparecem juntos, deixando o alinhamento desalinhado
- No menu “View” do Mail, texto, toggle e ícones também se misturam, formando uma estrutura visual complicada
- Não está claro o motivo da presença dos ícones nem os critérios para escolhê-los
Casos excepcionais em que os ícones são úteis
- Em casos como o menu de alinhamento de janelas do Finder, em que é possível entender rapidamente o arranjo espacial por meio de símbolos, os ícones trazem grande ganho de eficiência
- Em vez de textos como “Top Left”, “Bottom & Top” e “Quarters”, os ícones de layout visual proporcionam entendimento imediato
- Nesses casos, os ícones são um exemplo positivo de uso que melhora a eficiência cognitiva
- Ou seja, os ícones precisam ser uma escolha contextual, não o padrão
Contradição com as diretrizes da Apple
- As Human Interface Guidelines de 992, 2005 e 2020 da Apple diziam que “não se deve usar ícones arbitrários em menus”
- Incluem o alerta de que isso pode causar “confusão visual” e desorientar usuários
- Os “exemplos do que não fazer” dessas diretrizes se parecem com os menus atuais do macOS Tahoe
- A Apple acabou violando seus próprios princípios
Conclusão
- A quantidade excessiva de ícones espalhados pelos menus gera ruído visual
- Ao mudar para uma direção de “incluir ícones em todos os menus”, a Apple dificulta o argumento de reduzir ícones
- “Se não houver uma razão válida, o padrão deve ser não ter ícones”
- Hoje, ironicamente, considera-se que estamos na era dos ícones tomando conta dos menus e a expressão usada é um “socorro”
3 comentários
Por ser uma informação não verbal, até parece algo bom... mas também dá a sensação de um texto gerado por IA...
Na verdade, quanto mais usado é um aplicativo, mais as pessoas tendem a procurar figuras ou cores em vez de texto. Dependendo do tamanho da tela, pode variar entre usar ambos em paralelo ou apenas ícones, mas no geral acho melhor que eles estejam presentes.
Opinião do Hacker News
Do ponto de vista de acessibilidade e localização, a combinação de ícone + texto é a mais ideal
Usar ícones só para preencher espaço é um problema, mas, se ícone e texto não combinam, a carga cognitiva aumenta ainda mais
Em testes com o texto oculto, a combinação de ícone + texto também foi a mais eficaz
Usar ícones de forma consistente beneficia tanto usuários visuais quanto linguísticos, além de ajudar em ambientes com viewport estreito
No fim, acho que a questão é: “há disposição para pagar o custo de design?”
Quando fica difícil ler texto, os ícones ajudam muito
Cerca de 20% da população dos EUA é analfabeta, e essas pessoas usam tecnologia memorizando ícones e posições de botões
Só com ícones é difícil entender o significado, mas, com os dois juntos, parece que o cérebro inteiro entra em ação
Acho que a presença de ícones no menu existe para fazer correspondência visual com a mesma função na barra de ferramentas
Se não há ícone no menu, isso funciona como sinal de que também não há na barra de ferramentas
Tanto o menu quanto a barra de ferramentas eram personalizáveis, e cada item era composto por ícone + rótulo
Hoje em dia há packs de ícones (Font Awesome, Material Icons etc.) demais, então os desenvolvedores tendem a escolher o ícone “mais ou menos parecido”
Nossa equipe também às vezes cria ícones personalizados, mas o custo é alto, então na maior parte do tempo só procuramos algo aceitável na enorme biblioteca do Google
Sobre a ideia de “se não houver motivo para adicionar um ícone, não coloque por padrão”, acho que usuários com memória visual forte conseguem encontrar mais rápido menus usados com frequência ao lembrar do ícone
Eu, pessoalmente, costumo memorizar atalhos, então me preocupo mais com conflitos de hotkeys do que com ícones
No Gmail antigo, os ícones de link e anexo eram quase iguais, então eu me confundia com frequência, mas recentemente mudou para um formato de clipe de papel e ficou muito melhor
O que mais me incomodou no exemplo foi a inconsistência de recuo entre as seções do menu
Se só alguns itens têm ícone, só essas linhas ficam recuadas; se não têm, não ficam; mas, quando há marca de seleção, tudo fica recuado, gerando um desequilíbrio
Eu esperava que a Apple tratasse esse tipo de detalhe de forma mais refinada, então foi decepcionante
Um quadrinista que eu seguia antigamente enfatizava a importância do design por silhueta, e os ícones atuais sofrem do mesmo problema
O dashboard da AWS está cheio de ruído visual, porque os ícones quase não se distinguem entre si
Em contraste, designs como os de jogos de cartas, que diferenciam por cor e forma ao mesmo tempo para que até usuários daltônicos consigam reconhecer, são excelentes
O Google Sheets faz isso bem, mas os outros exemplos não
Veja este artigo, o colapso das diretrizes de design e como restaurar os ícones
Por causa disso, sinto que a usabilidade do macOS caiu bastante
Todas as abas do navegador parecem iguais, então não dá para distinguir qual aba corresponde a qual trabalho
Gosto do exemplo de ícones no Google Docs
Mesmo sem ler o texto, dá para localizar rapidamente tipos de ação como adicionar/remover
Primeiro encontro a posição aproximada pelo ícone e depois confirmo a função específica pelo texto
Isso reduz o tempo de navegação no menu e diminui a carga cognitiva
Provavelmente existe algum ticket de “melhorar ícones” enterrado em algum lugar
No exemplo do Google Docs, é muito mais rápido achar o ícone de link do que “Insert Link”
Funções como recuo ou alinhamento também são fáceis de localizar graças aos ícones padronizados
Isso também ajuda usuários não anglófonos
Por exemplo, alguém com pouca familiaridade com japonês pode encontrar a função desejada mais facilmente graças aos ícones
Eu costumo colocar ícones em quase todos os itens de menu
Como resultado, houve redução da fadiga mental e ficou mais rápido selecionar
Quanto mais complexo o menu, mais útil também pode ser adicionar cores para usar mais sentidos
Só que os ícones precisam ter formas realmente significativas
Mesmo que não tenham significado, encontrar o “segundo item” dentro do mesmo conjunto de ícones é muito mais rápido do que ler texto
Se só alguns itens têm ícone, eles parecem ser funções especiais ou usadas com frequência
Acho isso bem mais útil do que quando todos os itens têm ícone
Funciona como uma espécie de tooltip reverso
Mas, para destacar só itens específicos, acho que uma distinção visual consistente ou a ordem de alinhamento é mais eficaz do que ícones
Itens usados com menos frequência podem ser escaneados mais devagar mesmo