o design de ícones para o web site “iconografia da ilha de...

6º CONAHPA – João Pessoa – PB – 04 a 06 de setembro de 2013

O design de ícones para o web site “Iconografia da Ilha de Santa Catarina”

The icon design for “Iconography of Santa Catarina Island” web site

Claudia Regina BATISTA1

Universidade Federal de Santa Catarina/UFSC

Vania Ribas ULBRICHT 2 Universidade Federal de Santa Catarina/UFSC

Resumo Este artigo apresenta o processo de desenvolvimento e a avaliação da compreensibilidade dos ícones aplicados sobre botões na interface do web site sobre a iconografia da Ilha de Santa Catarina. A avaliação da compreensibilidade dos ícones está fundamentada na Ergonomia Informacional e foi realizada com o intuito de verificar se o significado pretendido (função do botão) é comunicado com eficácia, ou seja, se é facilmente compreendido pelo usuário. O web site sobre a iconografia da Ilha de Santa Catarina possui conteúdo educativo e informativo e está sendo desenvolvido a partir de uma pesquisa na Universidade Federal de Santa Catarina. Palavras-chave: Design da informação. Ícones. Iconografia regional. Abstract This article shows the development process of icons that will be applied in the interface of web site about iconography of Santa Catarina Island. An evaluation of the comprehensibility of icons was performed with the objective to verify if the meaning of icon is communicated with effectiveness. This evaluation is based in the Informational Ergonomics. The web site about the iconography of Santa Catarina Island has educational and informational content and this web site is being developed from a research at the Federal University of Santa Catarina. Keywords: Information design. Icons. Regional iconography.

1 [email protected] 2 [email protected]


1. Introdução

A linguagem da imagem, embora possa ser composta de vários elementos ou signos,

passíveis de vários significados, é recebida global e imediatamente. A compreensão da força

da imagem, aliada à evolução dos meios de comunicação (impressão, cinema, televisão,

internet), aumentou o uso da linguagem visual. Cada vez mais, o signo visual penetra nos

domínios do que era apenas verbal (ou palavra escrita), pois a percepção global e imediata

permitida por ele é adequada à velocidade tida como necessária à sociedade contemporânea.

(BATISTA et al., 2002)

Devido o poder de transmitir uma informação imediatamente ao usuário, as imagens

são amplamente utilizadas nas aplicações Web, nas interfaces de softwares e em outros

produtos digitais. As imagens aplicadas sobre botões de comando, genericamente

denominadas de “ícones”, representam uma função, ou seja, comunicam uma ação (por ex.:

habilitar/desabilitar áudio). Elas devem ser claras, legíveis e inteligíveis.

Neste contexto, apresenta-se a pesquisa que propôs a concepção, desenvolvimento e

avaliação dos ícones/imagens que serão disponibilizadas na interface do web site Iconografia

da Ilha de Santa Catarina.

Este artigo apresenta o processo de desenvolvimento dos ícones, baseado em Horton

(1994); e também trata da etapa de avaliação da compreensibilidade dos ícones, cuja metodologia

foi fundamentada na Ergonomia Informacional, baseada em Formiga e Moraes (2002), e Horton

(1994).

2. O web site sobre a Iconografia da Ilha de Santa Catarina

O web site sobre a Iconografia3 da Ilha de Santa Catarina possui caráter educativo e

informativo; encontra-se em fase de desenvolvimento e está vinculado à uma pesquisa na

Universidade Federal de Santa Catarina.

No web site, cerca de 90% do conteúdo é apresentado através da linguagem visual

(fotografias, ilustrações, esquemas, entre outros). A Iconografia da Ilha de Santa Catarina foi

dividida em cinco categorias:

- Elementos da Paisagem Natural;

- Elementos Arquitetônicos e Urbanísticos;

- Elementos Culturais Singulares;

- Elementos da Cultura Gastronômica;

3 Iconografia é uma forma de linguagem visual que utiliza imagens para representar determinado tema.


- Símbolos Festivos.

A partir da definição das categorias acima mencionadas, foi proposta a estrutura de

navegação do web site Iconografia da Ilha de Santa Catarina, conforme ilustra a figura 1.

Figura 1: Estrutura da navegação do web site Iconografia da Ilha de Santa Catarina

Página Principal

Paisagem Natural

Elementos

Arquitetônicos e Urbanísticos

Elementos Culturais

Singulares

Cultura Gastronômica

Símbolos Festivos

Na página principal haverá uma breve explanação sobre a definição de iconografia e,

também, conterá a informação que o conteúdo do web site apresentará a Iconografia da Ilha

de Santa Catarina. Haverão cinco botões cuja função é dar acesso ao usuário às cinco

categorias. Sobre os botões serão aplicados ícones que comunicarão os temas das categorias.

Fez-se a opção pela comunicação visual em virtude desta estar em consonância com a

proposta do web site; pois observou-se que seria menos pertinente o uso de um menu

contendo o nome das cinco categorias (linguagem verbal escrita). As demais páginas contém

as imagens/fotografias que representam as cinco categorias (Paisagem Natural;

Arquitetônicos e Urbanísticos; Culturais Singulares; Cultura Gastronômica; Símbolos

Festivos).

3. Design de ícones

Como um tipo de metáfora, os ícones representam objetos físicos, ações ou conceitos

abstratos, familiares ao mundo real profissional dos usuários.

De acordo com Mullet e Sano (1995, p. 47), “compor um ícone significa simplificar a

imagem, excluir detalhes supérfluos, valorizar a forma, o equilíbrio, a proporção e a estética.

O contraste é fundamental para uma boa legibilidade e impacto visual. O ícone deve atrair a

atenção, ser fácil e imediatamente interpretado pelo usuário”.

Há diferentes caminhos de codificar significados em ícones e, segundo Horton (1994),

é possível realizar a representação gráfica através de:

a) Codificação direta:

- Do próprio objeto: “Se um objeto físico é familiar ao usuário, então este objeto deve

ser mostrado. Por exemplo: um computador, uma impressora” (HORTON, 1994, p. 34).


Horton (1994, p. 144) também salienta: “Para que o usuário identifique o objeto representado

com maior rapidez, deve-se escolher a vista que melhor caracteriza-o”.

- Da execução de uma ação: “Quando uma atividade envolve manipulação de um

objeto físico, pode-se representar em uma imagem a ação sendo executada, com o intuito de

mostrar ao usuário como se executa esta ação. Por exemplo: pressionar um botão; pessoa

lendo”. (HORTON, 1994, p. 35)

- Da expressão corporal: “Diversas posturas podem ser utilizadas em ícones para

transmitir ao usuário sensações, emoções, execução de uma ação, entre outras. As posturas a

serem representadas devem ser aquelas que as pessoas assumem espontaneamente, assim

serão facilmente identificadas pelo usuário. Por exemplo: vitorioso, cansado, correndo,

homem, mulher”. (HORTON, 1994, p. 37)

b) Relação ou Associação a um Objeto: “Geralmente, faz-se representações metafóricas

de tarefas do usuário. Uma metáfora propicia uma analogia por conceitos familiares ao

usuário, ou seja, este fará relação entre seres ou noções essencialmente semelhantes sob um

determinado aspecto” (HORTON, 1994, p. 37-38). Entretanto, ao utilizar metáforas, é

necessário analisar seu emprego para evitar situações ambíguas, pois o usuário pode efetuar

uma interpretação equivocada.

c) Identificações Textuais: “Quando letras, números, palavras, símbolos matemáticos

são facilmente identificados pelos usuários, pode-se utilizar em ícones. Exemplos:

interrogação, exclamação”. (HORTON, 1994, p. 48)

d) Analogia Espacial: A posição da imagem tem um significado figurativo.

- ( ←←←← ) Voltar / Retroceder em linha reta, significa ir da direita para a esquerda, ao

contrário do sentido da escrita ocidental.

- ( →→→→ ) Seguir em frente / Avançar, significa ir da esquerda para direita, de acordo com

o sentido da escrita ocidental.

- Seguir em frente / Avançar rotacionando, significa ir da esquerda para direita, de

cima para baixo, de acordo com o sentido horário.

- Voltar / Retroceder rotacionando, significa ir da direita para a esquerda, de baixo

para cima, de acordo com o sentido anti-horário.

e) Propriedades Gráficas: Levando-se em consideração que os ícones ocupam uma área

pequena, deve-se ter muita cautela ao utilizar preenchimento padrão bitmap, texturas e

degrades, pois certamente esses recursos irão “poluir” visualmente a figura e,

consequentemente, a legibilidade e a clareza da imagem serão prejudicadas.

f) Características Dinâmicas:

- Vibração: É possível sugerir a vibração de objetos, mostrando linhas trêmulas,

também, como no exemplo, a propagação das ondas sonoras com linhas curvas.


- Movimento: Nesta situação, não se refere ao “gifs animados”, mas sim, pretende-se

sugerir o movimento e/ou traduzir a velocidade do objeto representado.

g) Imagens Bi ou Tridimensionais: “O ser humano vive em um mundo em três

dimensões, por isso é mais fácil reconhecer imagens tridimensionais. No entanto, uma boa

representação em 3D requer espaço e, certamente, com a pequena área disponível ao ícone,

torna-se difícil esta representação” (HORTON, 1994, p. 146). Assim, recomenda-se a

representação bidimensional para o desenvolvimento de ícones para websites, multimídias e

ambientes hipermídias.

3.1 Concepção dos ícones para o web site

No desenvolvimento dos ícones para o web site Iconografia da Ilha de Santa Catarina,

houve participação dos alunos do curso de Design da UFSC que estavam cursando a

disciplina Semiótica (2011-2), ministrada pela autora deste artigo.

Propôs-se uma atividade acadêmica voltada a concepção dos ícones, a qual foi

realizada em quatro etapas, descritas a seguir:

1a Etapa: Levantamento dos elementos que representam as cinco categorias

(elementos da Paisagem Natural; elementos Arquitetônicos e

Urbanísticos; elementos Culturais Singulares; elementos da Cultura

Gastronômica; Símbolos Festivos).

2a Etapa: Escolha dos elementos que melhor representam cada uma das cinco

categorias e elaboração de ilustrações sobre esses referidos elementos.

3a Etapa: Processo de refinamento da imagem em busca da melhor representação

gráfica para os significados pretendidos. São eliminadas linhas e adornos

supérfluos, partindo da ilustração até obter a síntese da imagem.

4a Etapa: Padronização das cinco imagens através do mesmo estilo gráfico,

enquadramento, tratamento cromático e aplicação de borda (que delimita

a área do botão).

A produção elaborada por sete grupos de alunos está apresentada no quadro 1. Após

análise das alternativas geradas, houve consenso entre docente e discentes, que a proposta

elaborada pelo grupo 1 apresentava melhor desempenho em virtude de expressar o significado

pretendido de forma clara, legível e inteligível, além de possuir qualidade visual gráfica.


Quadro 1 - Concepção dos ícones para o web site Iconografia da Ilha de Santa Catarina.

Grupos

Iconografia da Ilha de Santa Catarina Elementos da

Paisagem Natural

Elementos Arquitetônicos e

Urbanísticos

Elementos Culturais Singulares

Elementos da Cultura

Gastronômica

Símbolos Festivos

1

Sol e Praias Mercado Público Pesca Frutos do Mar Boi de Mamão

2

Sol e Praias Casario Boi de Mamão Frutos do Mar Festa da Ostra

3

Praias Mercado Público Renda de Bilro Frutos do Mar Boi de Mamão

4

Praias Mercado Público Bruxas da ilha da magia Frutos do Mar Festa do Divino

5

Praias Casario Boi de Mamão Frutos do Mar Carnaval

6

Sol e Praias Ponte Hercílio Luz Arte e Música Frutos do Mar Festas

7

Sol e Praias Catedral Bruxas da ilha da magia Frutos do Mar Boi de Mamão

3.2 Avaliação da Compreensibilidade dos Ícones

Numa interface gráfica, problemas relacionados ao baixo grau de eficácia da

comunicação visual comprometem a funcionalidade e colocam em risco a qualidade das

aplicações web.

Considerando esse fator, torna-se necessário verificar se os ícones a serem

disponibilizados na interface do web site Iconografia da Ilha de Santa Catarina possuem


eficiência na comunicação da mensagem pretendida. Ou seja, se o significado pretendido

(cinco categorias, ver fig. 2) é facilmente compreendido/interpretado pelo usuário.

Figura 2: Ícones do web site Iconografia da Ilha de Santa Catarina

Elementos da Paisagem Natural

Elementos Arquitetônicos e

Urbanísticos

Elementos Culturais Singulares

Elementos da Cultura

Gastronômica Símbolos Festivos

3.2.1 Métodos e técnicas

Para avaliar a facilidade de compreensão imediata dos ícones que serão aplicados sobre

botões na interface do web site Iconografia da Ilha de Santa Catarina, foi utilizada uma

metodologia baseada no “Método de Compreensão” de Formiga; Moraes (2002), o qual é

fundamentado na Ergonomia Informacional; e nas diretrizes para concepção, desenvolvimento

e avaliação de ícones, de Horton (1994).

Conforme Horton:

Associações de imagem-significado medem quão aproximadamente o usuário associa uma imagem visual a um conceito verbal. Esses testes ajudam-nos a colher imagens que despertarão confiavelmente as associações certas na mente do visualizador. Esses testes de imagem-significado são rápidos e fáceis. Eles podem ser feitos no papel ou até automatizados. [...] Os testes de significado-para-imagem mostram ao usuário uma imagem e perguntam: “O que esta imagem significa?”. Eles testam associações que um usuário já possui para uma imagem visual. (HORTON, 1994, p. 297)

Na sequência, são apresentadas as etapas estabelecidas para a avaliação da

compreensibilidade dos ícones:

- definição dos objetivos da avaliação da compreensibilidade dos ícones;

- escolha do público que irá participar da avaliação (amostra);

- elaboração do “Instrumento de Avaliação” impresso, para apresentar os

ícones aos participantes da avaliação;

- aplicação do “instrumento de avaliação”;

- análise dos resultados.


● Objetivos da Avaliação

A Avaliação da Compreensibilidade dos Ícones tem como objetivos verificar:

- se o participante identifica o significado do tema do botão;

- o período de tempo que o participante leva para apresentar a resposta;

- se o participante identifica outro significado ao ícone (ambiguidade);

- se o participante não atribui nenhum significado ao ícone apresentado.

● Escolha de Público para Simulação

De acordo com Horton (1994, p. 194), “o público utilizado para simulação deverá,

necessariamente, ter o mesmo perfil do público a que se destina o projeto em questão”.

● Instrumento de Avaliação

O Instrumento de Avaliação possui formato A6 (105 x 148 mm), foi impresso e

estruturado da seguinte forma:

- capa: identificação do participante (nome e R.G.);

- 2ª página: apresentação sintética do web site Iconografia da Ilha de Santa Catarina;

- 3ª página: contento o texto apresentado conforme figura abaixo:

Figura 3: Terceira página do Instrumento de Avaliação

ATENÇÃO! Nas páginas seguintes serão

apresentadas, individualmente, as imagens que serão aplicadas sobre botões na interface do web site Iconografia da Ilha de Santa

Catarina.

IMPORTANTE! O objetivo da avaliação é:

TESTAR AS IMAGENS SOBRE OS BOTÕES.

Você ou seus conhecimentos NÃO estão sendo testados.

Escreva abaixo:

QUAL É O SIGNIFICADO DA IMAGEM?

- A partir da 4ª página: apresenta-se uma imagem por página; cada imagem terá a dimensão

de 2,8 cm de largura X 2,8 cm de altura (tamanho mínimo recomendado pela ISO

9186/2000); e uma linha para que o participante anote o resultado de sua interpretação.

● Aplicação do Instrumento de Avaliação:

Para aplicar o Instrumento de Avaliação deve-se proceder conforme as orientações a seguir:

- cada participante deverá ser informado sobre o contexto abordado no web site Iconografia

da Ilha de Santa Catarina;


- Horton (1994) recomenda que é necessário esclarecer que não são os conhecimentos do

participante que estão sendo avaliados, mas sim a imagem (se transmite um significado de

forma clara). Isto contribui para que o participante sinta-se à vontade, evitando tensão,

inibição e/ou frustração, caso não consiga atribuir um significado à imagem. Portanto,

antes de fornecer o material impresso aos participantes, deve-se efetuar tais

esclarecimentos;

- o instrumento de avaliação será aplicado individualmente, aos participantes;

- cada participante deve ser orientado a observar a imagem e, assim que a identificar, ele

deve anotar o seu significado no material impresso fornecido;

- aquele que aplica o instrumento de avaliação deve observar atentamente as reações de

cada participante, desde o instante em que visualiza a imagem até o momento em que ele

inicia a anotação do significado, para registrar o tempo de resposta;

● Critérios para Classificação das Respostas:

O objetivo da utilização das imagens é transmitir imediatamente a informação ao usuário,

deste modo definiu-se quatro variáveis vinculadas aos objetivos da avaliação: (1ª)

identificação rápida da imagem, (2ª) identificação lenta da imagem, (3ª) identificação

ambígua e (4ª) não identificação, conforme descrição apresentada no Quadro 2:

Quadro 2 - Critérios para classificação das respostas

Cód. Variável Tempo Classificação Considerações

Identificação rápida da imagem

Até 2 s Excelente Tempo considerado ideal para identificação. Até 5 s Muito Bom

Identificação lenta da imagem

Até 10 s Bom Resultado positivo, contudo o usuário demora para identificar a imagem.

Até 15 s Aceitável Até 20 s Regular

Identificação ambígua da imagem

Desconsiderado Ruim Resultado negativo, pois o usuário atribui outro significado à imagem, fora do contexto pretendido.

Imagem não identificada

Desconsiderado Ruim Resultado negativo, pois o usuário não consegue atribuir um significado à imagem ou há erro em sua resposta

Tempo em segundos.

3.2.2 Resultados da avaliação e análise

A avaliação da compreensibilidade dos ícones para o web site Iconografia da Ilha de

Santa Catarina foi aplicada à uma amostra composta por 30 pessoas com perfil similar ao

usuário.


Ícone “Elementos da Paisagem Natural”

Gráfico 1 – Tempo de resposta e identificação do ícone “Elementos da Paisagem Natural"

Análise: Este ícone foi aprovado, pois 80% dos participantes apresentaram respostas

corretas obtendo classificação excelente e muito boa. Respostas consideradas corretas:

natureza, paisagem, paisagem natural. Contudo 20 % dos participantes apresentaram resposta

ambígua, associando a imagem a praia, turismo/férias. A interpretação não está errada, mas

esse não é o significado pretendido.

Ícone “Elementos Arquitetônicos e Urbanísticos”

Gráfico 2 – Tempo de resposta e identificação do ícone “Elementos Arquitetônicos e Urbanísticos"

Análise: Apenas 20% dos participantes apresentaram respostas corretas obtendo

classificação excelente e muito boa. 60% dos participantes também apresentaram respostas

corretas, contudo levaram um tempo maior para interpretar o ícone, obtendo classificação

boa e aceitável. Respostas consideradas corretas: arquitetura, monumentos arquitetônicos,

monumento histórico. Contudo 20 % dos participantes apresentaram resposta ambígua,


associando a imagem ao mercado público, cultura/igreja, centro histórico. A interpretação

não está errada, mas esse não era exatamente o significado pretendido.

Ícone “Elementos Culturais Singulares”

Gráfico 3 – Tempo de resposta e identificação do ícone “Elementos Culturais Singulares"

Análise: Apenas 10% dos participantes apresentaram respostas corretas obtendo

classificação muito boa. 25% dos participantes também apresentaram respostas corretas,

contudo levaram um tempo maior para interpretar o ícone, obtendo classificação aceitável.

Respostas consideradas corretas: cultura, cultura local, atividade cultural. Contudo 65 % dos

participantes apresentaram resposta ambígua, associando a imagem aos nativos, pesca,

pescador, trabalhador, contador de histórias, manezinho, Mané da Ilha, açoriano. A

interpretação não está errada, mas esse não era exatamente o significado pretendido. Diante

dos resultados apresentados, sugere-se que o tema escolhido para representar essa categoria

seja substituído por outro elemento tal como: renda de bilro, bruxa da ilha da magia, entre

outros.

Ícone “Elementos da Cultura Gastronômica”

Gráfico 4 – Tempo de resposta e identificação do ícone “Elementos da Cultura Gastronômica"



corretas. Ressalta-se que 65% interpretaram a imagem instantaneamente, obtendo

classificação excelente e muito boa. Respostas consideradas corretas: alimentação,

gastronomia, culinária, qualidade gastronômica, gastronomia local, culinária da região,

comida.

Ícone “Símbolos Festivos”

Gráfico5 – Tempo de resposta e identificação do ícone “Símbolos Festivos"


corretas. 45% interpretaram a imagem instantaneamente, obtendo classificação muito boa.

45% dos participantes também apresentaram respostas corretas, contudo levaram um tempo

maior para interpretar o ícone, obtendo classificação boa e aceitável. Respostas consideradas

corretas: festa folclórica, festa típica, festas, festividades, símbolo festivo, festas regionais,

folclore. Contudo 10 % dos participantes apresentaram resposta ambígua, pois identificaram

o Boi-de-mamão, festa do boi-de-mamão e não chegaram ao significado pretendido.

4. Considerações finais

Foram válidos os resultados obtidos na avaliação da compreensibilidade dos ícones

desenvolvidos para a interface do o web site Iconografia da Ilha de Santa Catarina, pois foi

possível detectar situações que podem gerar erros durante a interação do usuário. Ressalta-se

que esta etapa propicia um valioso feedback para os desenvolvedores da interface gráfica. E

neste estágio, é possível realizar um redesign para aprimorar os ícones que não tiveram um

bom desempenho durante a avaliação.

Visando garantir a identificação dos ícones aplicados sobre os botões de acesso aos

conteúdos, recomenda-se a utilização do recurso tool-tip: “uma pequena descrição de um


objeto que aparece na tela ao se posicionar o cursor do dispositivo de apontamento sobre ele”.

(CYBIS, 2002, p. 65)

A pesquisa que propôs o levantamento da Iconografia da Ilha de Santa Catarina e a

construção do web site encontra-se em fase de desenvolvimento, com conclusão prevista para

dezembro de 2013.

3. Referências

BATISTA, C. R., ULBRICHT, V. R. Contribuições da semiótica no desenvolvimento de ícones para interfaces. Educação Gráfica (Bauru), v.6, p.59 - 70, 2002.

BATISTA, C. R., FIGUEIREDO, L. F., ULBRICHT, V. R. A Revolução da informação visual na era digital. Educação Gráfica (Bauru), v.6, p.25 - 32, 2002.

BATISTA, C. R., ULBRICHT, V. R. Abordagem Semiótica no Desenvolvimento de Interfaces Interativas para Ambientes Hipermídias de Aprendizagem. Anais do INGEGRAF 2002 - XIV Congreso de Ingenieria Grafica, Santander, 2002.

CYBIS, Walter de Abreu. Abordagem ergonômica para IHC: ergonomia de interfaces humano-computador. Florianópolis: LabIUtil - Laboratório de Utilizabilidade INE/UFSC. Disponível on-line em www.labiutil.inf.usfc.br/apostila.html (acesso em 05/06/02).

FORMIGA, Eliana de Lemos FORMIGA; MORAES, Anamaria de. Métodos da ergonomia informacional e resultados de pesquisa de avaliação de compreensibilidade de símbolos gráficos para serviços de saúde. Anais do ABERGO 2002. VII Congresso Latino-Americano de Ergonomia, XII Congresso Brasileiro de Ergonomia e I Seminário Brasileiro de Acessibilidade Integral. ABERGO – Associação Brasileira de Ergonomia; UFPE – Universidade Federal de Pernambuco. Recife, 2002. CD-ROM.

GUILD. Downloadable Disability Access Symbols: The twelve symbols below promote and publicize accessibility for people with disabilities. Disponível em: <https://www.graphicartistsguild.org/resources/disability-access-symbols/ > Acesso em: 8 nov. 2011.

ISO/IEC. The International Organization for Standardization and the International Electrotechnical Commission – ISO/IEC 11581 – part 1-6. Information technology – User-system interfaces and symbols – Icon symbols and functions. 1995.

ISO. The International Organization for Standardization – ISO 9186-1:2007 Graphical symbols -- Test methods -- Part 1: Methods for testing comprehensibility.

LONDON. Access Symbols. Disponível em: <http://www.inclusivelondon.com/disabledaccess.aspx> Acesso em: 8 nov. 2011.

HORTON, William. The icon book: Visual symbols for computer systems and documentation. New York: John Wiley & Sons, Inc., 1994.

MULLET, Kevin; SANO, Darrell. Designing visual interfaces: Communication, oriented, techniques. California: Sun Microsys.

o design de ícones para o web site “iconografia da ilha de...

Documents