Iconografia e sua importância no design de interação

A quantidade de informação apresentada em uma interface e a quantidade de espaço na tela muitas vezes são inversamente proporcionais. Quando levamos essa experiência para o “mundo mobile“, essa discrepância é ainda maior. Com isso, existe a necessidade de otimizar e organizar de forma mais fácil e simples o design de interface do seu site ou sistema. Uma forma de solucionar esse problema pode ser a utilização de ícones.

O que é ícone?

Se analisarmos a partir da semiologia e semiótica, um ícone é um signo visual que representa outro objeto por semelhança. Sem aprofundar muito nesse aspecto e indo mais para o lado da sua representação gráfica, o ícone é um símbolo gráfico cuja visualização recupera, da memória de curto ou longo prazo, lembranças relacionadas a vários fatores.

Um ícone pode representar objetos, processos e ações/operações desde que corretamente projetado. Ele irá ajudar (e muito) na interação humano-computador pois o usuário irá identificar e escolher de forma rápida, fácil e direta a ação que deseja executar no sistema.

E como podemos usá-lo no design de interface?

Atualmente não dá para imaginar uma interface digital interativa sem a presença de ícones, tanto é que já até existe uma convenção para determinados usos. Por exemplo, a utilização de uma lupa para o campo “busca” em um sistema; o ícone de uma casa para indicar o link para a página principal de um site. Um lápis para indicar a edição de um conteúdo e assim vai.

Mas para utilizá-los de forma efetiva, temos que ficar atentos principalmente a ligação entre a sua forma e a ação que será executada por ele. O signo gráfico deve ter identificação direta ou metafórica com o que será executado. Para exemplificar isso, podemos citar o lápis como o ícone que irá editar um documento qualquer. Um lápis é um objeto que os humanos utilizam para escrever em um papel, logo é uma representação excelente para edição de documentos. Assim como uma lixeira representa apagar o documento, ou seja,  “jogar o documento no lixo”.

Agora, quando falamos em um sistema ou site, ele não terá apenas uma ação, um link, um item a ser selecionado. Serão diversas ações dentro de uma interface interativa onde o ícone não virá sozinho. Ele estará acompanhado de um agrupamento de ícones no mesmo padrão, chamado de iconografia, que será especialmente projetada para ser identificada pelo usuário como parte daquele sistema. Entre os diversos exemplos que temos na internet, podemos destacar algumas:

Iconografia do Android
iconography_overview

Iconografia do IOS
iconography_overview

Um projeto bem maneiro relacionado a iconografia é a Google Visual Assets Guidelines. Esse projeto consiste num manual de aplicação, padronização e desenvolvimento de ícones baseados claramente em flat design. Esse manual está dividido em 2 partes:
Part 1: Product icons and logo lockups e Part 2: User interface icons and Illustrations – Google Icon Design

Existem muitos outros exemplos de iconografia na web. Destaco um set com uma variedade enorme de ícones para usar em sistemas:

350 Pixel Perfects icons
350_icons

Além desse set, tem uma lista de sets bem interessante neste link.

Agora, se você procura um set de ícones com poderes para usar o CSS, experimente este site: Font Awesome.

Enfim, nos dias de hoje, uma iconografia bem projetada é essencial para qualquer interface.  Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.

Fontes

texto foi útil(2)Não achei útil esse texto(0)

About Luciano Skorianez

Designer desde 1999. Criei esse blog para disponibilizar estudos e recursos relevantes para todos que trabalham com design.


Leave a Reply