Ícones em Interfaces Digitais

O uso de ícones facilita a identificação dos componentes de um layout e melhora a experiência dos usuários. Quer entender como usar e como desenhar ícones em interfaces e projetos digitais? Preparamos um conteúdo que aborda esse tema e que irá te ajudar a construir seus próximos designs.

Se você trabalha com produtos digitais já precisou criar ou escolher quais ícones usar em seus layouts e se deparou com um universo de possibilidades, certo?

Para que você consiga entender a diferença que os ícones trazem para os projetos, como funciona o processo de desenho e quais são os atributos que devem estar presentes nesse tipo de construção, preparei este artigo. 

Aqui, trago algumas boas práticas que podem auxiliar na criação desses ícones e aprimorar suas interfaces digitais.

O que é um ícone?

Em semiótica compreendemos que o ícone é um signo visual (uma imagem) que representa objetos por semelhança. Muito antes deste post — e até mesmo da escrita — a comunicação por meio de imagem era utilizada e compreendida para transmitir mensagens. 

Essas formas intuitivas e muitas vezes simples foram acompanhadas por séculos e estabeleceram padrões que ganharam espaço também no meio tecnológico, auxiliando assim na interação e na experiência do usuário com os produtos digitais.

Quais os atributos de um bom ícone para Design de Interfaces?

A utilização de ícones em interfaces digitais contribui positivamente quando eles são bem reconhecidos, facilitando a interação humana com o computador. Os elementos visuais auxiliam também no entendimento de textos, diminuindo o tempo de compreensão do usuário e resultando numa experiência mais rápida. Mas cuidado! Ícones mal feitos podem atrapalhar o propósito da interface, confundindo quem a utiliza.

Alguns atributos são importantes para garantir a qualidade dos ícones. Entenda abaixo os três principais:

1. Forma

O formato do ícone, seja um objeto do mundo real (como um cartão) ou uma representação metafórica (como uma seta) deve ser facilmente reconhecido pelo usuário. Para isso é preciso evitar ícones com muitos detalhes ou finos demais. Aposte na simplicidade.

fonte: design system da IBM

2. Leitura

O ícone precisa ser compreensível a ponto de transmitir a funcionalidade com clareza para o usuário. É interessante utilizar ícones "universais", pois a rápida compreensão desses ícones reduz a curva de aprendizagem de novos usuários. Outra opção é agregar palavras junto aos ícones, estabelecendo certa confiança a usuários mais receosos. 

fonte: design system do Material Design


3. Estética

O apelo estético do ícone deve ser atrativo e satisfazer as expectativas do usuário. 

Avalie a paleta de cores do seu projeto e não utilize mais que 3 cores no mesmo ícone. Confie em elementos geométricos e que possam ser redimensionados com facilidade, trazendo harmonia para a interface. Não se esqueça: seja consistente com o resto do layout. 

fonte: design System do Material Design


Outra dica é pensar bem e testar ao escolher ou confeccionar um ícone. Não deixe lacunas para outras percepções que possam ser insensíveis e ofensivas para uma parcela dos usuários.

Como desenhar um Ícone?

Para confeccionar ícones é recomendado o uso de grids e linhas guias. Essas ferramentas são essenciais e um excelente ponto de partida para estabelecer consistência e padrão. 

Veremos abaixo alguns desses grids. 


Pixel Grids

A grade de pixels estabelece regras claras de posicionamento. Com essas diretrizes você pode estabelecer proporções visuais flexíveis e consistentes para os ícones. Além disso, o encaixe dos pixels ajuda a renderizar ícones nítidos em telas de baixa resolução.

Keyshapes

As formas fornecem alguns modelos com formatos de círculo, quadrado, retângulo retrato e retângulo paisagem. Assim é possível delimitar uma estrutura padrão para os seus ícones, sem perder espaço para flexibilidade e criatividade. 

Orthogonals 

As linhas ortogonais são linhas-chave que cruzam o ponto central do ícone e criam vértices adicionais para usar em conjunto com o Pixel Grid e as Keyshapes.

Safe Area

A área de segurança mostra onde o conteúdo importante do ícone deve estar, enquanto a área inversa é a área a ser evitada.

__

Espero que as boas práticas citadas neste artigo contribuam e acrescentem valor em suas interfaces. Aproveito este espaço para compartilhar exemplos de bons ícones de grandes marcas como Apple, Google e IBM


Referências
http://luk.net.br/blog/?p=477

https://medium.com/ui-lab-school/%C3%ADcones-em-ui-design-dicas-de-como-utilizar-esse-recurso-nos-seus-projetos-cf6816cf2403

https://medium.com/ericcerqueira/o-processo-criativo-da-iconografia-acf2acf0aa77

https://brasil.uxdesign.cc/iconografia-e-a-regra-do-80-10-3f3fcc90fc4c

https://usabilityhub.com/guides/testing-iconography

https://medium.com/@minoraxis/icon-grids-keylines-demystified-5a228fe08cfd

Giovana Schnorr Vendramini

UX/UI Designer | Adoro divagar sobre os mais diversos assuntos. Sou fascinada por design, cultura geek, viagens e não saio de casa sem meus fones de ouvido.

Digitizar, digitalizar ou automatizar processos? Diferenças entre cada um.

Provas de conceito em projetos de inovação

Transformação digital na saúde