Ícones em UI Design: dicas de como utilizar esse recurso nos seus projetos

Confira alguns princípios básicos que vão te auxiliar na hora de utilizar ícones em suas interfaces.

Origem

A palavra ícone vem do Grego “eikon” e significa imagem. Muito antes do surgimento do design de experiência, os ícones já eram usados como ferramenta de comunicação. Seu objetivo era comunicar eficientemente uma mensagem através de uma linguagem visual comumente compreendida.

Os primeiros ícones eram imagens de objetos com os quais os usuários estavam familiarizados, como objetos de escritório e programas de software. Eles são, por definição, independentes da linguagem, o que significa que eles podem ser reconhecidos sem texto para indicar seu significado.

A simplicidade de uso e intuitividade tornaram os ícones muito populares. Seus simbolismos foram reconhecidos em todo o mundo e estabeleceram padrões que ainda hoje seguimos.

Quando usados da maneira correta, eles podem se tornar pequenas chaves para a usabilidade e navegação intuitiva. A criação de elementos numa interface responde às necessidades do usuário criando algo fácil de entender e de usar.

Como utilizar os ícones numa UI

Dica 01: mantenha os ícones simples

Mantenha os ícones o mais simples possível e evite complexidades desnecessárias. Eles devem identificar conceitos simples do ambiente em que serão usados.

Um bom exemplo é o ícone da sacola em ecommerces.

​​Dica 02: combine os ícones com palavras

As pessoas processam mais rapidamente recursos visuais do que textos, especialmente quando já conhecem os significados desses símbolos. Mas você pode confiar que um único ícone vai transmitir a mesma mensagem para todos? Em muitos casos, as palavras esclarecem a mensagem de um ícone e dão às pessoas confiança nos resultados de suas interações. Mesmo para ícones universais, incluir um texto é geralmente mais seguro.

Dica 03: Consistência

Concentre-se em elementos comuns para usar em seus ícones. A primeira coisa a considerar é a paleta de cores. Não mais do que três cores para manter o design clean. Não tenha medo de repetir elementos em todos os seus ícones. Repetição ajuda os usuários a identificar ícones e associá-los a uma ação. O peso e estilo do ícone também são decisivos na hora de manter a consistência.

Dica 04: escolha ícones familiares

A compreensão de um ícone pelo usuário é baseada em suas experiências anteriores. Ao decidir incluir ícones na sua interface, pesquise primeiro e se familiarize com o que está sendo usado em plataformas do mesmo segmento.

Dica 05: utilize espaçamento em volta do ícone

Tenha sempre pelo menos 1 cm x 1 cm no mínimo em torno do ícone para legibilidade e fácil toque em celulares. Quando grandes o suficiente, os ícones funcionam bem em telas mobile onde o espaço é limitado.

Dica bônus

Ao escolher os ícones para sua interface tenha em mente os seguintes itens:

Clareza — o significado do ícone é facilmente compreensível ao usuário;

Significativo — o ícone comunica valor informativo;

Reconhecível — o símbolo visual do ícone é reconhecido pelos usuários;

Simples — o ícone não está sobrecarregado com elementos gráficos e é rapidamente percebido e entendido sem muito esforço;

Atraente — o ícone satisfaz as expectativas estéticas e estabelece um apelo visual harmônico;

Não ofensivo — o ícone não tem significados ocultos ou erros de percepção que possam parecer ofensivos ou rudes para qualquer usuário;

Consistente — o ícone corresponde ao conceito estilístico geral do layout para o qual ele é aplicado.

Experimente desenvolver um styleguide de ícones para o seu próximo projeto utilizando essas dicas. Existe muita coisa ainda pra ser abordada neste tema, mas vamos deixar isso para um próximo post.

Um abraço e até mais.