Os ícones adicionam forma e função aos seus designs de IU quando usados corretamente. Eles podem acelerar as interações do usuário por serem imediatamente reconhecíveis e também podem adicionar estilo e interesse visual aos designs de interface do usuário.
Usar ícones não precisa ser complicado. Mesmo alguns ícones bem posicionados podem melhorar a experiência do usuário, quando feitos corretamente. Confira essas dicas de iconografia e práticas recomendadas antes de implementá-las em seu próximo design de IU.
1. Mantenha os ícones simples
Não complique demais os designs de seus ícones . Mantenha-os o mais simples possível, especialmente em tamanhos menores. Os melhores ícones são formas e pictogramas simples que os usuários podem identificar instantaneamente.
2. Torne-os reconhecíveis
Os ícones devem ser imediatamente reconhecíveis. Se os usuários ficarem se perguntando o que significa um ícone, isso vai contra o seu propósito. Não deixe os usuários se perguntando o que um ícone deve ser, pois isso só os levará a se perguntarem qual é a finalidade do ícone, prejudicando a experiência geral do usuário.
3. Dê significado aos ícones
As imagens usadas para ícones devem ter um significado de fácil compreensão. O significado deve estar diretamente vinculado à função do ícone, como um ícone de casa para a página inicial. Embora as metáforas às vezes sejam facilmente decifradas pelos usuários, ícones mais literais geralmente são mais rápidos de reconhecer.
4. Certifique-se de que eles são escalonáveis
Os ícones costumam ser usados em tamanhos pequenos, mas ocasionalmente você pode encontrar casos de uso em que deseja usar versões maiores (ou até menores). Por esse motivo, certifique-se de que seus ícones tenham uma boa aparência, independentemente do tamanho em que são exibidos. Você pode usar ícones progressivamente mais complexos conforme o tamanho aumenta, mas certifique-se de não deixá-los complicados.
5. Torne os ícones acessíveis
Se você não estiver usando rótulos de texto para acompanhar seus ícones, certifique-se de implementar as tags alt adequadas para que sua funcionalidade ainda esteja acessível às pessoas que usam leitores de tela.
Em uma linha semelhante, certifique-se de que seus ícones tenham contraste e tamanho suficientes para serem acessíveis. Você também deve se certificar de que os alvos de toque ao redor dos ícones sejam suficientes para que os usuários que possam ter problemas de controle motor fino ainda toquem na área pretendida.
6. Cuidado com a cor
Como regra geral, os ícones devem ter uma única cor. Além disso, não use cores diferentes para cada um de seus ícones, a menos que isso contribua diretamente para torná-los mais utilizáveis. Na maioria dos casos, você pode usar uma cor diferente para indicar um ícone ativo, enquanto o resto são de outra cor.
7. Sempre use vetores
Ao criar ícones personalizados, você deve sempre criá-los em formato de imagem vetorial. Dessa forma, eles podem ser facilmente dimensionados sem perder a clareza ou nitidez. Ao salvá-los para uso em produtos digitais, o tipo de arquivo SVG é a melhor escolha, pois preserva a escalabilidade do ícone, bem como a transparência.
A próxima melhor alternativa ao SVG é salvá-los como arquivos PNG sem perdas, pois eles manterão a transparência e a qualidade não se deteriorará.
8. Mantenha os ícones uniformes
Seus ícones devem ser uniformes em estilo e tamanho. Usar ícones que não têm um estilo consistente confundirá os usuários e fará com que sua interface pareça confusa. Usar ícones que não são do mesmo tamanho terá um efeito semelhante.Quando se trata de tamanho, o peso visual é mais importante do que as dimensões exatas em pixels.
Quando se trata de tamanho, porém, o peso visual é mais importante do que as dimensões exatas em pixels. Para esse fim, você pode criar ícones que tenham um peso visual menor, um pouco maior do que os ícones mais pesados.
Compare ícones de estrela e quadrados, por exemplo. Se você torná-los exatamente com as mesmas dimensões em pixels, o quadrado parecerá realmente maior devido à sua aparência mais sólida. Ao estender os braços da estrela um pouco além das dimensões do quadrado, você cria ícones que parecem ter o mesmo tamanho. Apenas certifique-se de colocá-los em recipientes com as mesmas dimensões para que o posicionamento e o espaçamento adequados sejam mantidos.
9. Priorize a clareza
Os usuários não devem ficar se perguntando o que é um ícone, muito menos o que ele representa. Certifique-se de que as imagens que você usa sejam imediatamente perceptíveis para os usuários e que eles não estejam tentando descobrir o que seus ícones deveriam ser.
Você também deseja certificar-se de que as funções que seus ícones representam são claras. Sempre que você usar qualquer coisa diferente de ícones universais (veremos isso em breve), considere adicionar rótulos de texto para explicar o que o ícone faz. É incrivelmente útil para novos usuários e garante que eles não fiquem confusos sobre o que os diferentes ícones fazem.
10. Use ícones universais
Quando se trata de iconografia, não tente reinventar a roda. Claro, ícones únicos e criativos podem adicionar interesse visual à sua interface de usuário. Mas se os usuários não os entendem ou são difíceis de decifrar, você está prejudicando a experiência geral do usuário.
Para funções comuns, atenha-se aos ícones que as pessoas reconhecem. Aqui estão alguns exemplos de ícones universalmente reconhecidos:
- Ícone da casa para a página inicial
- Três linhas horizontais para indicar um menu de hambúrguer
- Uma lupa para pesquisa
- Um lápis para editar ou modificar o conteúdo
- Um polegar para cima ou coração para gostar de algo
- Um coração ou estrela para algo favorito
- Um favorito para salvar um favorito
- Uma flecha saindo do topo de um quadrado para compartilhar algo
- Uma seta apontando para um quadrado para fazer o download de algo
- Uma engrenagem ou engrenagem para configurações
- Um ícone de cadeado para mostrar que algo é seguro
Existem outros que são específicos do contexto (como formas para controles do reprodutor de mídia), mas este é um bom lugar para começar. Se você estiver usando a funcionalidade mencionada na lista, geralmente é melhor usar um ícone universalmente reconhecido. Se você se desviar de um ícone universal, certifique-se de adicionar um rótulo de texto para ajudar os usuários.
Use essas regras para projetar ícones de IU bem-sucedidos
Nem todo design de IU precisa incluir ícones, mas quando usados corretamente, eles podem melhorar a experiência do usuário ao mesmo tempo em que fornecem apelo estético adicional para seus sites e outros produtos digitais.