Ícones, grandes aliados do projetista.

Introdução

A escrita ocidental, baseada em um alfabeto composto de unidades mínimas (letras) que devem ser associadas para formar palavras, que por sua vez associam-se para formar frases, é inapropriada para transmitir mensagens instantâneas. "Há uma lombada adiante; diminua a velocidade" é uma frase comprida demais. A reação, após sua leitura e compreensão, pode chegar tarde demais.

Para superar esta limitação de nossa escrita surgiram os ícones. 

O que é um ícone?

Um í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: perigos, alertas, opções, ações, etc.

Examplo de ícone

Examplo de ícone

Examplo de ícone

Exemplos de ícones

Os ícones tem sido amplamente utilizados em diversos setores: na sinalização automobilística, na contracapa de listas telefônicas, em veículos de transporte de carga, etc. Possuem a vantagem, ainda, que podem ser facilmente interpretados por pessoas não alfabetizadas, o que em países em via de desenvolvimento com altos índices de analfabetismo representa uma característica altamente desejável.

Mas para serem compreendidos, e obter o efeito pretendido, um ícone deve estar associado a elementos conhecidos no contexto sócio-cultural do usuário.

Provavelmente o ícone acima lembre ao leitor o controle de um aparelho de som, ou de vídeo, ou de um DVD. Mas para um morador de um vilarejo perdido dos Andes, por exemplo, onde não há energia elétrica e as condições sócio-econômicas são muito ruins, nada vai significar.

Tipos de ícones

Segundo Norman, há três tipos de ícones:

Teclado

Os que representam os objetos que serão manipulados
Classificar Os que representam as operações ou os operadores

Clip

Os que representam operadores atuando sobre objetos

Os ícones podem também representar símbolos de aparelhos existentes na vida real cuja função é similar à da aplicação.

Relógio Relógio

Efetividade

A efetividade de um ícone depende da habilidade do usuário em reconhecer o que o ícone representa e associa-lo ao comando que será invocado. Quanto menor for o tempo de resposta, maior será a efetividade do ícone.

Segundo Norman, ícones altamente convencionais, concretos, que representam objetos e ações são mais efetivos que àqueles que se referem a analogias ou abstrações.

Ícone convencional

Ícone abstrato

Ícone convencional, concreto, de alta efetividade

Ícone abstrato, de significado confuso.Contato? Telepatia? Qual o significado?

A efetividade de um ícone pode ser incrementada com texto (desde que breve e preciso). Exemplo:

Bateria Fraca

Outra alternativa para incrementar a efetividade de um ícone é oferecer, ao deter ou passar o cursor do mouse por cima do ícone, uma breve mensagem que esclareça a função que será iniciada ao clica-lo (exemplo à direita). Entretanto, é imprescindível que o usuário conheça a finalidade da função associada.

Vantagens

Há várias vantagens associadas à utilização de ícones no projeto do diálogo com o usuário.

  • Um ícone, desde que corretamente projetado, dispensa leitura, análise, reconhecimento ou tradução.
  • É compreensível até por pessoas não alfabetizadas
  • É compreendido rapidamente: “Estudos na compreensão de sinalização rodoviária demonstram que um ícone pode ser reconhecido ao dobro de distância e na metade do tempo que um sinal escrito”
  • Contribui à facilidade de (re)aprendizado
  • Projetados adequadamente, contribuem à optimização de espaço na tela

Desvantagens

  • Complexidade de criação (mas há extensas bibliotecas com ícones já prontos)
  • Poluição visual, desde que usados sem critério
  • Espaço (quanto mais ícones, menos espaço para a área de trabalho do usuário)

Quando usar ?

Ícones podem ser utilizados com diversas finalidades:

  • Para ativar menus (ex: o famoso ícone "Start" do Windows)
  • Para iniciar a execução de ações
  • Para manipular janelas
  • Para mudar de modo de operação
  • Para revelar o estado de dados
  • Para representar arquivos, diretórios, estruturas

Como usar ?

  • Limite o número de ícones àquelas ações freqüentes; a utilização excessiva de ícones pode contribuir à poluição visual
  • Quando um ícone é clicado, destaque-o daqueles que o rodeiam. Observe, à direita, parte da caixa de ferramentas do Photoshop. Qual o modo corrente de operação? A resposta é imediata. Nota dez.
  • Destaque o ícone do background
  • Não pode haver, na mesma aplicação, dois ícones parecidos.
  • Cuidado com os ícones "cross-transaction": um mesmo ícone, ou ícones similares, não podem representar ações divergentes em aplicações diferentes.
  • Cor e sombreamento podem ser usados para realçar um ícone. Considere a variação na capacidade cognitiva dos usuários da aplicação.
  • Animação? Sim, mas com MUITO critério. Fatores de distração, em aplicações comerciais, são geralmente desaconselháveis (há exceções, que comentaremos oportunamente).

Agrupamento

Uma “caixa de ferramentas” é um conjunto de ícones, agrupados segundo certo critério, que oferecem ao usuário as opções mais utilizadas da aplicação. Se seu significado não é óbvio, o agrupamento de ícones somente é aconselhado para usuários dedicados que usam a aplicação com freqüência. Rogers aconselha organizar os ícones en clusters, agrupando-os segundo um critério comum, mas preservando sua identidade dentro do grupo. A caixa de ferramentas do MS Word (à direita), é um exemplo de uma excelente implementação.

Conclusão

Os ícones são um grande aliado do projetista. Sua capacidade de compreensão imediata torna-os extremamente úteis para destacar ações, sinalizar eventos,  representar estados.

  • Ao decidir quais ícones usar e quais as ações às quais estarão associados, considere as características de usa audiência.
  • Use, mas não abuse; a utilização excessiva de ícones pode contribuir à poluição visual
  • Cores devem utilizadas com muita cautela, ou sua aplicação pode virar um carro alegórico.


Gostaríamos de ouvir sua opinião sobre este artigo.

Conteúdo Ruim   Bom   Excelente
Utilidade Baixa   Média   Alta

[ Entre em contato ] com o(a) autor(a) deste artigo

[ Convide um amigo ] ou colega a ler este artigo

[ Imprima ] este artigo

(c) 2003-2006 IBRAU - Instituto Brasileiro de Amigabilidade e Usabilidade. Todos os direitos reservados.