Ícones em Interfaces Digitais: o que são e seus atributos

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.
Giovana Schnorr Vendramini | 9 de julho de 2020

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 interfaces digitais?

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.

icones_IBM.svg

Ícones do 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.

Imagem retirada do 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.

Imagem retirada do 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.

icones_01.png

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.

  • Leia também: Entenda o processo de UX Design aplicado em produtos digitais
  • 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.