Icones na sua interface, algo à ser pensado

Quem não gosta de uma aplicação bonita? intuitiva, que seja fácil de usar e bonita, simplicidade alcançada com aquele toque de beleza, sem textos, apenas imagens intuitivas, mas as vezes os textos são inevitáveis, e as vezes o texto não é recomendado, cada caso a seu caso e temos como exemplo nome de uma ação, ou objeto.

Acha Melhor escrever um objeto, ou apenas colocar a sua imagem, e descrever ela na tag alt para não esquecer da acessibilidade claro, ou descrever toda a imagem, e ter um grande espaço ocupado por texto, fazendo perder parte da area de informações?


Ações: Uso de texto



Uso de Texto em ações

Observe a coluna ações, aonde temos o texto “Editar | Deletar”, com 131 pixels de largura, como diz o texto, são ações de deletar e excluir. Esse espaço de 131 pixels pode ser diminuido e muito, com a utilização de icones, sem perder o real sentido de suas propriedades, que são de exclusão e edição. Mas para fazer essa modificação é necessária à representação de icones com características visuais claras, ou seja, algo que realmente represente, seja do tipo de que quando olha identifica automáticamente sem necessidade de pensar, porque como diz o Steve Krug, Não Me Faça Pensar!.

Veja um exemplo com utilização de icones ao invéz de texto:


Ações: Uso de Icones



Uso de Icones

Temos uma àrea para as ações menores, com icones de representações fortes, e de fácil entendimento, de edição e exclusão como foi usado anteriormente, e uma àrea maior para a coluna razão social, tendo mais informações, evitando assim ter que clicar no registro apenas para obter uma informação ocultada pela falta de espaço na tela. Existe aquele ditado dizendo que um ovo comido é um pinto perdido, no nosso caso é um clique perdido, cliente satisfazido!

De 60 pixels redimencionados para a coluna da razão social, fez com o que informações fiquem mais claras, isso facilita muito, mas sempre mantendo o padrão de não me faça pensar, com imagens simples, um X para indicar a exclusão, e um lápis indicando a edição (lapis, borracha, hein? pescou?! são variantes de icones que podem ser usado para a ação de edição).

Existem aqueles icones que falam mais que mil palavras, e aqueles que tem multiplos sentidos, como por exemplo um icone de email pode se transformar em múltiplos significados e ações, na imagem abaixo tem uma sequência de icones, com base parecida, mas com propriedades diferentes:


Cores e Prioridades



Prioridades e cores

Observe os primeiros icones (à esquerda), tem cores mais fortes, mais marcantes e que chamam mais a atenção, agora entraremos na parte de cores dos icones, isso irá lhe ajudar a escolher o icone certo, para a area certa, e hora cera.

Os icones de cores vermelhas (à esquerda) são de prioridade alta, pedindo toda a atenção necessária. Eles usam como base principal o amarelo, e o vermelho.

Pra melhor compreensão do amarelo, e do vermelho, voltemos as aulas de 5? série, aonde agente aprende sobre cores, quentes, frias, assim saberemos o porque das cores, além delas serem berrantes!

Sabemos que as cores são divididas em quentes e frias. As cores quentes são as cores solares:

Amarelo, Laranja, Vermelho.

Cores quentes : Amarelo , Laranja, Vermelho

As cores frias são as do mar e do céu:

azul, verde, violeta.

Cores quentes : Azul, verde, violeta

Mensagens que requer atenção, você usará as cores quentes, e mensagems com uma prioridade menor ou baixa, as cores serão as frias, azul e verde! Isso é Observado em mensagens de atenção nos navegadores também! na imagem abaixo pode ver com uma excessão o Opera, mas o Mozilla Firefox e Internet Explorer usando cores quentes em avisos gerados pelo programador em seu código HTML, um alerta, utiliza em seus icones o amarelo, indicando atenção em nível médio alto, um nivel de atenção requerido pela função alert(“”); do Javascript.

Alerta em navegadores

Quanto à erros, serão usados imagens de tons vermelhos, isso é aplicavel em interface para web, quanto para desktop, mas chegamos ao ponto de saber fazer as coisas serem notadas, más quandoagente precisar fazer algo ficar algo mais leve? Que não necessite de tanta atenção, apenas está ali para a unica utilidade, ser clicado e levar a algum destino, para isso existem os tons de cinza!

Quando agente usa cinza, não o preto, o cinza mesmo, damos a visão pra quem esta utilizado de que aquilo em cinza, não é tão importante, nem tão inutil que esteja ali por um acaso como enfeite, é apenas aquilo e nada mais!


O Cinza



Exemplo 3 - O Cinza (Grayscale)

Veja, os icones em cinza podem também agradar, dar um ambiente amistoso, leve, sem deixar forte com o preto, ou claro demais com o branco, o cinza também é melhor visto com pessoas com um tipo de deficiência visual, esse tipo de deficiência esta no grupo de Visão Subnormal ou Baixa Visão:


É considerado portador de baixa visão aquele que apresenta desde a capacidade de perceber luminosidade até o grau em que a deficiência visual interfira ou limite seu desempenho.
Fonte: Deficiência Visual


Pessoas nesse grupo, tem uma melhor identificação com o cinza preto, etc, incociêntemente pode estar ajudando essas pessoas a terrem uma inclusão na sua interface, então sempre que puder, de bastante atenção a questão das cores em utilização, e um carinho especial com os tons de cinza, também conhecidos como Grayscale.


Links



O Joãozinho aqui vai te ajudar, vai deixar alguns link para download de icones!





Esses são os principais, famosos e mais conhecidos, apartir dai você vai achar mais no site dos autores, e assim vai navegando no mundo dos icones!

Estourando os timpanos
Banda: Franz Ferdinand [ last.fm ]
Disco: Black Session 2004
Musica: Cheating on you

[audio:http://blog.joaovagner.com.br/wp-content/uploads/2006/02/cheating_on_you.mp3]

Abraços

João Vagner
Web Developer
http://www.joaovagner.com.br