Comunicação visual pra web

Universidade do Sul de Santa Catarina

Comunicação Visual para Web
Disciplina na modalidade a distância

Palhoça
UnisulVirtual
2007

Apresentação

Parabéns, você está recebendo o livro didático da disciplina de
Comunicação Visual para Web.

Este material didático foi construído especialmente para este
curso, levando em consideração o seu perﬁl e as necessidades
da sua formação. Como os materiais estarão, a cada nova
versão, recebendo melhorias, pedimos que você encaminhe suas
sugestões sempre que achar oportuno via professor tutor ou
monitor.

Recomendamos, antes de você começar os seus estudos, que
veriﬁque as datas-chave e elabore o seu plano de estudo pessoal,
garantindo assim a boa produtividade no curso.

Lembre: você não está só nos seus estudos, conte com o Sistema
Tutorial da UnisulVirtual sempre que precisar de ajuda ou
alguma orientação.

Desejamos que você tenha um excelente êxito neste curso!

Equipe UnisulVirtual

Vera Niedersberg Schuhmacher

Livro didático

Design instrucional
Flavia Lumi Matuzawa

3ª edição revista

Palhoça
UnisulVirtual
2007

Copyright © UnisulVirtual 2007
Nenhuma parte desta publicação pode ser reproduzida por qualquer meio sem a prévia autorização desta instituição.

004.61
S41 Schuhmacher, Vera Niedersberg
Comunicação visual para web I: livro didático / Vera Niedersberg
Schuhmacher ; design instrucional
Flavia Lumi Matuzawa, [Leandro Kingeski Pacheco]. – 3 ed. rev.
Palhoça : UnisulVirtual, 2007.
296 p. : il. ; 28 cm.

Inclui bibliograﬁa.

1. Internet (Redes de computação). 2. Comunicação visual.
I. Matuzawa, Flavia Lumi. II. Pacheco, Leandro Kingeski. III. Título.

Ficha catalográfica elaborada pela Biblioteca Universitária da Unisul

Créditos
Unisul - Universidade do Sul de Santa Catarina
UnisulVirtual - Educação Superior a Distância

Campus UnisulVirtual Bibliotecária Higor Ghisi Luciano Priscila Santos Alves Lamuniê Souza
Rua João Pereira dos Santos, 303 Soraya Arruda Waltrick Pedro Paulo Alves Teixeira Liana Pamplona
Palhoça - SC - 88130-475 Rafael Pessi Logística de Materiais Marcelo Pereira
Fone/fax: (48) 3279-1541 e Cerimonial de Formatura Vilson Martins Filho Jeferson Cassiano Almeida da Costa Marcos Alcides Medeiros Junior
3279-1542 Jackson Schuelter Wiggers (coordenador) Maria Isabel Aragon
E-mail: cursovirtual@unisul.br Equipe Didático-Pedagógica Eduardo Kraus Olavo Lajús
Site: www.virtual.unisul.br Coordenação dos Cursos Angelita Marçal Flores Priscilla Geovana Pagani
Adriano Sérgio da Cunha Carmen Maria Cipriani Pandini Monitoria e Suporte Silvana Henrique Silva
Reitor Unisul Aloísio José Rodrigues Caroline Batista Rafael da Cunha Lara (coordenador) Vilmar Isaurino Vidal
Gerson Luiz Joner da Silveira Ana Luisa Mülbert Carolina Hoeller da Silva Boeing Adriana Silveira
Ana Paula Reusing Pacheco Cristina Klipp de Oliveira Caroline Mendonça Secretária Executiva
Vice-Reitor e Pró-Reitor Cátia Melissa S. Rodrigues (Auxiliar) Daniela Erani Monteiro Will Dyego Rachadel Viviane Schalata Martins
Acadêmico Charles Cesconetto Dênia Falcão de Bittencourt Edison Rodrigo Valim
Sebastião Salésio Heerdt Diva Marília Flemming Enzo de Oliveira Moreira Francielle Arruda Tecnologia
Itamar Pedro Bevilaqua Flávia Lumi Matuzawa Gabriela Malinverni Barbieri Osmar de Oliveira Braz Júnior
Chefe de gabinete da Reitoria Janete Elza Felisbino Karla Leonora Dahse Nunes Josiane Conceição Leal (coordenador)
Fabian Martins de Castro Jucimara Roesler Leandro Kingeski Pacheco Maria Eugênia Ferreira Celeghin Ricardo Alexandre Bianchini
Lilian Cristina Pettres (Auxiliar) Ligia Maria Soufen Tumolo Rachel Lopes C. Pinto Rodrigo de Barcelos Martins
Pró-Reitor Administrativo Lauro José Ballock Márcia Loch Simone Andréa de Castilho
Marcus Vinícius Anátoles da Silva Luiz Guilherme Buchmann Patrícia Meneghel Tatiane Silva
Ferreira Figueiredo Silvana Denise Guimarães Vinícius Maycot Serafim Edição – Livro Didático
Luiz Otávio Botelho Lento Tade-Ane de Amorim
Campus Sul Marcelo Cavalcanti Vanessa de Andrade Manuel Produção Industrial e Suporte Professora Conteudista
Diretor: Valter Alves Schmitz Neto Mauri Luiz Heerdt Vanessa Francine Corrêa Arthur Emmanuel F. Silveira Vera Niedersberg Schuhmacher
Diretora adjunta: Alexandra Orsoni Mauro Faccioni Filho Viviane Bastos (coordenador)
Michelle Denise Durieux Lopes Destri Viviani Poyer Francisco Asp Design Instrucional
Campus Norte Moacir Heerdt Flavia Lumi Matuzawa
Diretor: Ailton Nazareno Soares Nélio Herzmann Gerência de Relacionamento Projetos Corporativos Leandro Kingeski Pacheco
Diretora adjunta: Cibele Schuelter Onei Tadeu Dutra com o Mercado Diane Dal Mago
Patrícia Alberton Walter Félix Cardoso Júnior Vanderlei Brasil Projeto Gráfico e Capa
Campus UnisulVirtual Patrícia Pozza Equipe UnisulVirtual
Diretor: João Vianney Raulino Jacó Brüning Logística de Encontros Secretaria de Ensino a Distância
Diretora adjunta: Jucimara Roesler Rose Clér E. Beche Presenciais Karine Augusta Zanoni Diagramação
Marcia Luz de Oliveira (secretária de ensino) Rafael Pessi
Design Gráfico (Coordenadora) Ana Luísa Mittelztatt
Equipe UnisulVirtual Cristiano Neri Gonçalves Ribeiro Aracelli Araldi Ana Paula Pereira Revisão
(coordenador) Graciele Marinês Lindenmayr Djeime Sammer Bortolotti Revisare
Administração Adriana Ferreira dos Santos Guilherme M. B. Pereira Carla Cristina Sbardella
Renato André Luz Alex Sandro Xavier José Carlos Teixeira Franciele da Silva Bruchado
Valmir Venício Inácio Evandro Guedes Machado Letícia Cristina Barbosa Grasiela Martins
Fernando Roberto Dias Zimmermann Kênia Alexandra Costa Hermann James Marcel Silva Ribeiro

Sumário

Apresentação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 03
Palavras da professora . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 07
Plano de estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

UNIDADE 1 – Psicologia da comunicação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
UNIDADE 2 – Cores na Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
UNIDADE 3 – Etapas do processo de Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
UNIDADE 4 – Por que usabilidade? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
UNIDADE 5 – Avaliando a usabilidade de Websites . . . . . . . . . . . . . . . . . . . . . . . . . . .111
UNIDADE 6 – Navegação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .135
UNIDADE 7 – A compatibilidade na resolução de monitores e websites . . . . . . .151
UNIDADE 8 – Conteúdo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .169
UNIDADE 9 – Imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .197
UNIDADE 10 – Tipografia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
UNIDADE 11 – O futuro da Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247

Para concluir o estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .261
Referências . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .263
Sobre a professora conteudista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .267
Respostas e comentários das atividades de auto-avaliação . . . . . . . . . . . . . . . . . . . . .269
Anexo 1 - Imagens coloridas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .281

Palavras da professora

Você já tentou acessar um site de banco para realizar
um pagamento e não conseguiu? Ao sair do site sem
efetuar a transação desejada sentimo-nos em pleno
século XXI reféns da tecnologia e não apoiados por ela
(como foi amplamente prometido!). Durante a última
década ocorreu uma transformação exuberante em
atividades antes feitas de forma manual como linhas de
produção de indústrias, carros informatizados, educação
e principalmente o advento da Internet. Grande parte
das atividades da vida moderna inserem os recursos
computacionais no dia a dia do cidadão comum. A
facilidade e o conforto na utilização tornou-se um
problema sério, o cidadão trava um combate diário na
utilização das facilidades propostas por tais tecnologias.

Observe um cidadão na fila de um caixa eletrônico, tente
observar quantos destes conseguem chegar ao final da
operação desejada de forma harmoniosa. Observe os
seguintes sintomas: vergonha, frustração, raiva, e em
muitos casos a desistência do cliente.

Por que isto acontece? Uma grande parcela de culpa
reside no projeto da interface e no diálogo da interação
com o usuário. Em muitas situações a preocupação é
centralizada nas funcionalidades do sistema sendo o
design gráfico e o próprio projeto de interação colocados
em um plano secundário. Quando a interação ocorre em
um Website a dificuldade em localizar a informação,
efetuar a transação ou mesmo a aparência “desagradável”
do site induzem o usuário a sair facilmente do portal,
que na maioria das vezes não retorna. O internauta é
impaciente, situações vagas, incoerentes e confusas o
levam a sair do site e continuar sua busca em outros
endereços.


Durante a disciplina será possível conhecer melhor o projeto de
design centrado no usuário assim como a introdução a conceitos
que minimizem situações de desconforto e que facilitem a
interação do usuário adequando-o as necessidades do cliente.

É fundamental desde já que saibamos que o bom projeto de
interface garante a aceitação do cliente e o conseqüente sucesso
do produto. O projeto de design adequado ajuda de forma
inestimável a ﬁdelização do cliente ao site.

10

Plano de estudo

O plano de estudos visa a orientá-lo/a no desenvolvimento da
Disciplina. Nele, você encontrará elementos que esclarecerão
o contexto da Disciplina e sugerirão formas de organizar o seu
tempo de estudos.

O processo de ensino e aprendizagem na UnisulVirtual leva
em conta instrumentos que se articulam e se complementam.
Assim, a construção de competências se dá sobre a articulação
de metodologias e por meio das diversas formas de ação/
mediação.

São elementos desse processo:

o livro didático;
o Espaço UnisulVirtual de Aprendizagem - EVA;
as atividades de avaliação (complementares, a distância
e presenciais);
o Sistema Tutorial.

Ementa
Usabilidade. Ergonomia de interface e navegabilidade.
Psicologia da comunicação, arquitetura de informação e
mapa do site. Produção gráfica, diagramação, estética e sua
influencia na performance do site. Padronização gráfica.
Resolução de monitores e compatibilidade. Indicadores de
qualidade, tempo de visualização e projetos de otimização da
comunicação.


Objetivos da disciplina
Propiciar o desenvolvimento de sites mais eﬁcientes
centrados nos usuários.
Utilizar Instrumentos de elicitação de conhecimentos.
Esclarecer diretrizes para a concepção de Web sites
consistentes a partir de normas e padrões reconhecidos.
Apresentar técnicas e instrumentos de avaliação de
usabilidade para sites Web.

Carga horária
A carga horária total da disciplina é 60 horas/aula, 4
créditos, incluindo o processo de avaliação.

Agenda de atividades/ Cronograma
Veriﬁque com atenção o EVA, organize-se para acessar
periodicamente o espaço da Disciplina. O sucesso nos
seus estudos depende da priorização do tempo para a
leitura; da realização de análises e sínteses do conteúdo; e
da interação com os seus colegas e tutor.

Não perca os prazos das atividades. Registre no espaço
a seguir as datas, com base no cronograma da disciplina
disponibilizado no EVA.

Use o quadro para agendar e programar as atividades
relativas ao desenvolvimento da Disciplina.

12


Atividades obrigatórias

Demais atividades (registro pessoal)

13

1
UNIDADE 1

Psicologia da comunicação

Objetivos de aprendizagem
Estudar sobre a psicologia envolvida no processo de
comunicação visual.

Conhecer a teoria da Gestalt do objeto.

Ter conhecimento das implicações existentes no
mecanismo de memorização.

Ter conhecimento das implicações geradas a partir
de decisões de projeto e que são explicadas pela
psicologia.

Seções de estudo
Seção 1 O que é Gestalt?

Seção 2 Um pouco da história

Seção 3 Percepção da Forma

Seção 4 Os princípios da Gestalt

Seção 5 Os mecanismos de memorização

Seção 6 Restrições de tempo em relação à
memorização


Para início de conversa
Quando você olha para uma página Web, para uma figura ou
mesmo um documento impresso, você organiza o que está vendo,
tenta impor uma estrutura e fazer conexões. Seu cérebro tenta
decompor as imagens ao mesmo tempo em que tenta organizar
estas partes de acordo com suas similaridades de cor, tamanho,
textura e forma. Posteriormente, as partes são reagrupadas em
um conjunto que permite a compreensão do seu significado.

Durante esta unidade, você terá um contato muito próximo com
a teoria da Gestalt, muito conhecida como o estudo das formas
e que procura estabelecer relações por meio das quais as partes da
imagem são agrupadas na percepção visual.

No decorrer de seu estudo você fará uma incursão sobre os
princípios que dão forma à teoria e justificam sua utilização. Você
vai perceber que o bom uso dos princípios da Gestalt explica,
muitas vezes, o sucesso de técnicas de projeto visual.

Nesta unidade, você também explorará o universo da memória:
por que lembramos de fatos ocorridos há 10 anos mas não
lembramos de fatos lidos em uma revista a uma semana?

O complexo mecanismo da memória e sua boa utilização na
construção de um projeto de interface serão discutidos no
decorrer da unidade.

16

Comunicação Visual para Web I

SEÇÃO 1 – O que é Gestalt?
A palavra Gestalt tem origem germânica e signiﬁca forma,
forma regular ou ainda conﬁguração. A teoria da Gestalt surgiu
nas primeiras décadas deste século (1920), ao mesmo tempo em
que a Europa saía de um de seus períodos mais conturbados de
sua história - a Primeira Guerra Mundial.

Figura 1.1 A Primeira Guerra Mundial*

A Gestalt é uma escola de psicologia
experimental atuante principalmente
na área da teoria da forma. Suas
contribuições foram fundamentais
ao estudo da percepção, sensação do
movimento, linguagem, memória,
inteligência, entre outros.
Figura 1.2 O castelo**

Os Gestaltistas queriam compreender quais os processos *<http://www.
psicológicos que estavam envolvidos na ilusão de ótica. O guerrasnomundo.hpg.
que acontece ou como acontece quando um estímulo físico é ig.com.br/index2.htm>

percebido pelo ser humano com uma forma diferente do que ele é
na realidade. **<http://www.psicologia.
freeservers.com/gestalt/
movimento.html>
Na figura 1.2 você não tem a “impressão” de que todas
as pessoas estão o tempo todo subindo a escada? Por
quê? É uma ilusão de ótica de movimento contínuo.

Unidade 1 17


Quantas cores você acredita terem sido usadas na figura 1.3?
Na verdade temos somente 2 tons de amarelo e 1 de azul, mas
parecem terem sido usadas bem mais, não é mesmo?

Para uma melhor compreensão,
visualize, no anexo 1, ao final do
livro didático, esta figura colorida.

<http://www.psicologia.
freeservers.com/ilusoes/colors1.
html> Figura 1.3 A ilusão das cores

Você costuma ir ao cinema? O movimento que vemos na tela
é uma ilusão de ótica causada pelo fenômeno da pós-imagem
retiniana. As imagens vão se sobrepondo em nossa retina e o que
As imagens não são apagadas percebemos é um movimento. Mas o cinema que você vê é na
imediatamente da retina. verdade uma seqüência de fotografias estáticas projetadas na tela.

Além de explicar por meio de suas premissas este tipo de “ilusão”,
a Gestalt sugere uma resposta ao porque de certas formas
agradarem mais que outras; apoiando-se na fisiologia do sistema
nervoso e na psicologia, comprovados por meio de experimentos e
pesquisas.

SEÇÃO 2 – Um pouco da história
Em seu início, havia duas correntes na Gestalt, a dos dualistas
e a dos monistas. Os dualistas acreditavam que perceberíamos
os elementos separadamente e só então eles formariam o todo,
através de uma ação do espírito, de uma percepção mental.
Um desenho seria visto como partes, mas a forma total que
percebemos estaria interligada pelo espírito que uniria seus
elementos.

Os monistas, por sua vez, sustentavam a idéia de que as
partes dependem mais do todo e que o todo determina a
ordem das partes. Para os monistas, forma e matéria não são
separáveis, portanto, os elementos de uma forma não existem

18


separadamente. As partes são vistas como elementos formadores
do todo. Em outras palavras, se modificarmos algum elemento o
todo também é alterado.

Quando em uma página mudamos a cor do fundo (figura 1.4)
percebemos a mudança do todo (os elementos se modificam) e
não apenas do fundo.


Figura 1.4 O conceito monista: o todo determina as partes

A concepção monista acabou sendo a teoria polarizadora. Seus
principais defensores Max Wertheimer, Kurt Koff ka e Wolfgang
Köhler acabaram por se tornar figuras de maior importância na
escola da Gestalt. Os princípios da Gestalt estenderam-se além
da psicologia, para áreas como a Física e a Filosofia.

SEÇÃO 3 – Percepção da forma

O dicionário define percepção como o ato de adquirir
o conhecimento de um fato, ser ou objeto, através dos
sentidos.

Segundo a Gestalt, a percepção da forma pelo cérebro é sempre
uma percepção global dos estímulos, ou seja, o cérebro não enxerga
elementos isolados. O olho humano tende a agrupar as várias
unidades de um campo visual para formar um todo, portanto,
enxergamos o todo e não partes dele. Na figura a seguir os dois

Unidade 1 19


círculos centrais são de igual tamanho, mas parecem diferentes.
Esta ilusão é provocada pela percepção total do conjunto. A
noção de tamanho do círculo se dá pela dependência dos demais
círculos.

Figura 1.5 Ilusão de ótica. Fonte: Filho (2003)

Nosso organismo percebe então um conjunto de elementos
como uma forma completa, em que os componentes estão
integrados entre si. Se decompormos algum elemento, estaremos
automaticamente destruindo o conjunto.

SEÇÃO 4 – Princípios da Gestalt
Entre os princípios da Gestalt, destaca-se como fundamental
referência para as composições gráﬁcas, o seguinte conceito:
“o todo é mais do que a soma das partes”. Isto equivale a dizer
que “A + B” não é simplesmente “(A+B)”, mas sim um terceiro
elemento “C”, que possui características próprias.

A partir de experimentos e resultados cientíﬁcos fundamentaram-
se diretrizes que regem a percepção humana das formas. Estas
leis apresentam conclusões sobre o comportamento natural do
cérebro no processo de percepção. Em outras palavras, estas leis
nos indicam o porquê de vermos as coisas de uma certa maneira e
não de outra.

20


Unidade
A unidade pode ser vista como um único elemento, que existe
por si só, ou pode ser vista como parte de um todo. Segundo
Filho (2003), quando a unidade é vista como um único elemento,
não existe agrupamentos ou mesmo relações entre os elementos.

S
Figura 1.6 - Unidade Figura 1.7 - Unidade

Na ﬁgura 1.6 é possível ver o grupo de pessoas como uma
unidade, mas pode-se também dizer que cada pessoa constitui
uma unidade, ou ainda uma sub-unidade, dentro do todo.

Na ﬁgura 1.7 tem-se o exemplo de uma unidade onde não ocorre
agrupamento. Neste caso, a unidade é formada por um único
elemento: a letra S.

Segregação

A segregação é a capacidade perceptiva de separar,
identificar, evidenciar ou destacar unidades formais
em um todo ou em parte dele (FILHO, 2003).

O uso de elementos como linhas, texturas, cores, sombras e outros
nos permitem realizar a segregação. Na imagem 1.8 podemos
segregar as principais unidades: o carro, a estrada e o fundo.
Mas é possível segregarmos a unidade automóvel em faróis, placa,
vidros, rodas, calotas etc. Esta decomposição pode continuar até
que todas as unidades visíveis tenham sido mapeadas.

Unidade 1 21



<http://images.google.com.
br/images?q=pessoas&hl=pt-
BR&lr=&start=100&sa=N>

Figura 1.8. Segregação

Proximidade

O princípio da proximidade descreve a tendência
dos elementos individuais de serem associados com
os elementos mais próximos, formando unidades.

Quando colocamos elementos próximos, em condições iguais,
a percepção do ser humano será reconhecê-los, formando um só
todo.

Observe a figura 1.9. Em um primeiro momento o que
exatamente você vê? Duas colunas ou quatro colunas?

aa aa aa aa
aa aa aa aa
aa aa aa aa
Figura 1.9 Proximidade

Nosso sistema nervoso organiza a ﬁgura como um todo e pelo
efeito da proximidade nos leva a interpretar 2 colunas distintas,
em 2 pares. As diferentes distâncias existentes nas 4 colunas nos
levam ao agrupamento das mais próximas.

22


Quanto menor a distância maior a unidade.

<http://www.pontofrio.com.
br/cgi-bin/loja.pl>
Figura 1.10 Proximidade

Na ﬁgura 1.10, as informações relacionadas a cada tipo de relógio
estão próximas, criando a intenção de agrupamento. Na leitura do
usuário ocorre a interpretação de que preço e descrição pertencem
à imagem mais próxima.

Similaridade
Elementos semelhantes tendem a se agrupar naturalmente. A
semelhança pode ser estabelecida pelo compartilhamento de
características visuais básicas como: cor, forma, tamanho entre outras.

Observe o seguinte exemplo:
Para uma melhor
compreensão, visualize,
OX OX OX OX aa aa aa aa no anexo 1, ao final do
livro didático, esta figura
OX OX OX OX ou aa aa aa aa colorida.
OX OX OX OX aa aa aa aa

Figura 1.11 Similaridade

Apesar dos espaços inter-elementos e inter-colunas terem sido
igualados, o agrupamento ocorre pela semelhança dos elementos.
No primeiro caso pela composição da semelhança da forma das
letras OX e no segundo pelo uso da cor.

Quanto maior a semelhança entre os estímulos, maior
a probabilidade de serem percebidos como um grupo
comum.

Unidade 1 23


A proximidade e semelhança são diretrizes que se completam
quando o assunto é agrupamento, mas a semelhança é o fator
mais forte de organização.

Continuidade
Conforme Filho (2003), a continuidade descreve a preferência
pelos contornos contínuos e sem quebra, ao invés de combinações
complexas de figuras irregulares.

O cérebro tende sempre a enxergar a melhor continuação de retas
e curvas, assim pode-se direcionar o cérebro a enxergar imagens
de determinadas formas, de acordo com a necessidade.

Quando você observa a figura (a), abaixo, o que é perce bido são
duas linhas que se cruzam e não quatro linhas que se tocam em
um ponto.

a) b) z

x
y

Figura 1.12 Continuidade Fonte: Filho (2003)

Quando você vê a figura b, percebe que ela é composta de
3 elementos x, y e z. Quais dos elementos parecem uma
continuação? Qual elemento parece ser um anexo? Se você
respondeu que o elemento z parece um anexo, acertou! Ela fere
o princípio da boa continuação. Curvas que não seguem a boa
continuação natural perdem fluência e harmonia.

Uma figura com linhas internas contínuas tende a ser vista como
bidimensional, enquanto o desencontro de linhas internas nos
direciona à tridimensionalidade.

Fechamento
O princípio do fechamento descreve a tendência humana de unir
intervalos e estabelecer ligações. O cérebro humano interpreta o
estímulo visual de forma completa, como figuras fechadas mesmo
24


quando algumas informações de contorno estão ausentes. Essa
diretriz é fácil de explicar. Você lembra de ter visto ﬁguras que
apesar de formadas por contornos não-contínuos, enxergou como
unidades completas?

Figura 1.13 Fechamento

Existe a tendência psicológica de se unir intervalos e estabelecer
ligações. Na ﬁgura acima o que você vê? São três círculos
incompletos ou realmente existe o contorno do triângulo?

Figura/Fundo
Quando as partes integrantes de um todo são ligeiramente
diferentes, tendemos a assimilá-las ao todo, percebendo-as
de maneira uniforme. Por outro lado, quando as partes não
constituem um todo, a tendência perceptiva é no sentido de
contrastá-las com o fundo.

Para uma melhor
no anexo 1, ao final do
colorida.

Figura 1.14 Figura/Fundo

Quando colocamos uma cor cinzenta sobre um fundo branco,
parecerá mais escura do que se inserida em um fundo negro.

Unidade 1 25


Normalmente, distingue-se figura de fundo pelo fato da figura
ter uma forma e aparecer como objeto na frente. O fundo deve
ser, então, sem forma, parecendo se estender de maneira contínua
por trás da figura. No quadro Monalisa fica claro para o usuário
a interpretação da figura e do fundo.


*<http://images.google.com.br/
images>
**<http://www.geocities.com/
Area51/9839/ilusoes.htm>

Figura 1.15 Figura/Fundo* Figura 1.16 Figura/Fundo**

Na figura 1.15, a consideração do que é figura ou do que é fundo
faz com que o indivíduo interprete a figura como um homem
tocando sax ou o rosto de uma jovem mulher.

Pregnância
A lei da pregnância diz que todas as formas tendem a ser
percebidas em seu caráter mais simples, as forças de organização
tendem a se dirigir sempre no sentido da clareza, unidade e
equilíbrio (FILHO, 2003).

Uma casa pode ser vista por 2 formas geométricas: um retângulo
e um triangulo. E uma forma forte e pregnante, pois consegue
transmitir com muita simplicidade a informação.

26


Para uma melhor
colorida.

Figura 1.17 Pregnância da forma

É o princípio da simplificação natural da percepção. Quanto
mais simples, mais facilmente é assimilada, desta forma, a parte
mais facilmente compreendida em um desenho é a mais regular,
que requer menos simplificação. Quando a figura é pregnante, ela
exprime uma característica qualquer de forma forte, de maneira
que se destaque e seja de fácil compreensão.

Formas fechadas, simétricas, regulares atraem o olhar e se
destacam do fundo, quando a forma é pregnante, facilmente
conseguimos separá-la do fundo.

A imagem aérea da Cidade do México é de baixa
pregnância, o grande número de unidades formais e
a organização visual confusa dificultam a leitura e a
compreensão.

http://encarta.msn.com/media_
461539938_761569238_-1_1/
Aerial_View_of_Mexico_City.html

Figura 1.18 Baixa Pregnância da forma

Unidade 1 27


O Taj Mahal é um exemplo da boa pregnância da
forma. Podemos observar o uso da continuidade,
da ordem, da proximidade, da semelhança dos
elementos e do equilíbrio.


<http://www.gimcracker.com/ Figura 1.19 Boa Pregnância da forma
archives/Taj-Mahal.jpg>

Conheça mais sobre as leis da Gestalt

Bibliografia Gestalt - Publicações em língua
portuguesa
URL: http://www.gestalttheory.net/pubs/gestaltismo.html

International Society for Gestalt Theory and its
Applications - GTA
URL: http://www.gestalttheory.net/

Gestaltismo e Percepção
URL: http://www.psicologia.freeservers.com/gestalt/

28


SEÇÃO 5 – Os mecanismos de memorização
A visão humana é o sentido que provê o maior volume de
informações a serem processadas pelo cérebro, estima-se que
metade do potencial de processamento cerebral humano seja
utilizado na organização de informações visuais.

Nossos usuários de software percebem as informações por
meio de um sistema sensorial. Os novos recursos da tecnologia
permitem que esta percepção ultrapasse o sentido da visão,
fazendo uso da audição e do tato.

No mecanismo de percepção, olhos e cérebro atuam
em conjunto na interpretação das informações.

Ao percebermos as informações, as mesmas são codiﬁcadas,
processadas, usando-se argumentos de raciocínio, além de serem
armazenadas na memória para posterior recuperação.

A Memória
A memória é o mecanismo que nos permite recordar pessoas,
acontecimentos, coisas que aconteceram anteriormente.
Richard Järnefelt de
Desde que o ser humano iniciou sua trajetória em áreas de Helsinki, Finland,
pesquisa, o funcionamento e as circunstâncias em que ocorrem conquistou, em 1999,
a memorização são arduamente discutidas. Nas últimas o Guinessbook, com
décadas, muito se tem estudado a respeito das características um repertório de 3.000
músicas tocadas no piano,
e do funcionamento da memória humana. Estudos evoluíram,
sem partituras, apenas
permitindo a compreensão dos meios ﬁsiológicos de como o ser com o uso da memória.
humano armazena as informações, assim como as razões pelas Fonte: http://www.
quais podemos perdê-las. guinnessworldrecords.
com/gwr5/conten

Figura 20. Recorde no Guinessbook

Unidade 1 29


O uso deste conhecimento para os projetistas de software na
construção de projetos de Web permite uma melhor adaptação
do projeto às características e delimitações da memória humana,
considerando suas habilidades e capacidade em termos cognitivos.

A natureza da memória pressupõe dois fatores:
a codificação (estratégias de memorização) e a
recordação.

A codiﬁcação vai permitir a maior ou menor facilidade de se
recordar determinada informação. A recordação pode ser livre
ou por reconhecimento (somos expostos a pistas que no reavivam
a memória). Quando reproduzirmos o que entrou, recupera-se a
memória.
Segundo Schneiderman (1992), a memória humana pode ser
dividida em três partes, cada uma com diferentes características:

Memória Rápida ou de Curto Termo.
Memória de Trabalho ou Sensorial.
Memória Permanente ou de Longo Termo.

Memória de Curto Termo
A memória de curto termo armazena informações na memória
em apenas um curto espaço de tempo 10 a 25 segundos, no
máximo. É uma memória rápida, recebendo as informações de
entrada captadas pelos órgãos dos sentidos (olhos, ouvidos, olfato
e tato) e os passa ao sistema cognitivo.

Nesta memória são armazenadas respostas aos estímulos
como: informações expressas pela fala, movimentos e
ações. As informações são armazenadas por um período de
aproximadamente 10 segundos, armazenando poucas informações
a cada vez. A memória de curto termo guarda, em média, um
número de 7 informações captadas pelos órgãos dos sentidos
(BORGES, 2005).

30


— Que tal repetirmos um experimento realizado em 1956 por
Miller? Faça um ditado de 30 palavras com seu amigo mais
próximo. Finalizado o ditado, peça para que ele escreva todas as
palavras que ele consegue recordar.
E então? Qual foi o resultado?

Este teste nos dá uma idéia da quantidade de informação
armazenada na memória de curto termo!

Memória de Trabalho ou Sensorial
A memória sensorial também é conhecida como memória de
trabalho. Na memória sensorial são trabalhadas as informações
captadas pela memória de curto termo e posteriormente enviadas
à memória permanente. A memória de trabalho pode armazenar
informações por um tempo, podendo variar de minutos a dias,
mas mesmo assim a informação será posteriormente eliminada
(BORGES, 2005).

Você já estudou para fazer um concurso ou vestibular?
Cursinhos são especialistas em criar mecanismos para
conectar e organizar informações de forma que as
mesmas permaneçam na memória permanentemente,
permitindo que você as recupere mais tarde (dias,
meses, anos).

Você lembra de alguma situação quando estudou para uma
avaliação escolar e uma semana depois não lembrava mais do
conteúdo? Tente descrever a fisiologia da célula ou os nomes dos
rios que fazem parte da Região Norte!

Quando o assunto não é considerado fundamental ou
importante para o indivíduo, o mesmo não estabelece
mecanismo de codificação. Desse modo, este conteúdo
dificilmente irá atravessar as fronteiras da memória
sensorial. Lembramos do conteúdo até realizar a prova,
uma semana depois, apesar de uma boa nota, não
lembramos mais do assunto e dificilmente repetiríamos
a boa nota sem estudar novamente.

Unidade 1 31


A memória de curto termo recupera informação na memória
permanente. Mas quais mecanismos podemos usar para
registrarmos ou recuperarmos a informação na memória
sensorial? Podemos usar metáforas, analogias, regras e tudo
aquilo que de alguma maneira chame a atenção do indivíduo.
Lembram das famosas musiquetas cantadas por professores de
química e física?

Memória de Longo Termo
Quando armazenamos uma informação na memória de longo
termo, ela permanece para sempre. Além da possibilidade de
recuperação, também temos a característica relacionada a sua
capacidade, até hoje não temos como quantiﬁcar as informações
que podem ser armazenadas nela ou mesmo seu espaço.

Algumas informações são recuperadas diretamente da
memória permanente para a memória de curto prazo,
sem passar pela memória sensorial.

Isto acontece porque são informações utilizadas pelo individuo há
muito tempo e de forma repetida. Se neste momento, perguntar
para você qual o seu nome? Quando você nasceu? Qual o
nome de sua esposa(o) ou namorada(o)? Essas seriam respostas
imediatas, já estão a um longo tempo com você e não são
necessários mecanismos de recuperação.

Fala, Audição Fala, Movimento

Memória de Trabalho
Memória de Curto Termo ou Sensorial

Memória de Longo Termo ou Permanente

Figura 21. Esquema de Funcionamento da Memória segundo Schneiderman (1992)

32


SEÇÃO 6 – Restrições de tempo em relação à
memorização
Ben Schneiderman (1992) realizou vários estudos relacionados
ao mecanismo de memorização e percepção. Estes resultados nos
fornecem dicas para a boa utilização da memória em projetos de
interfaces. Nestes estudos, o pesquisador aponta a insatisfação
de usuários com mecanismos de interface, em que o tempo de
resposta é superior a 2 segundos.

A razão para isto é que o ser humano guarda informações na
memória de curto termo por no máximo 15 segundos. Quando
o usuário espera além deste tempo, ele precisa recordar o que
estava fazendo, o que torna a interação mais difícil e lenta. O
grande problema é que de acordo com a tarefa os tempos de
resposta aceitáveis são diferentes, veja os resultados coletados por
Schneiderman (1992) e Galitz (1993):

digitar, movimentar o cursor, ou selecionar com o mouse:
50-150 milissegundos;
tarefas simples como o iniciar um brower: menos de 1
segundo;
introduzir dados para buscas de dados: 1-4 segundos;
tarefas complexas como cálculos, registros : 8-30
segundos.

O tempo de resposta é crucial para um bom projeto, assim como
o uso, ao longo do projeto, de mecanismos de codiﬁcação que
permitam tornar o site interessante e inesquecível.

Dicas para a boa utilização da memória do usuário

Evite a carga de elementos de multimídia que levam um
intervalo de tempo longo para serem carregados em conexões
de baixa velocidade. O limite de tempo ideal para operações de
carga é 15 segundos.

SEGUE

Unidade 1 33


Insira indicadores de feedback (barras de progressão, ampulhetas
girando, quando não é possível determinar o tempo necessário até
o término da tarefa) quando o tempo de processamento é longo.

Figura 22. Indicadores de feedback

O sistema deve reagir após uma ação, em um tempo máximo de
0,1 segundo.

1,0 segundo é o tempo limite para que o fluxo de pensamento do
usuário permaneça ininterrupto.

10 segundos é o tempo limite para manter a atenção do usuário
focada num diálogo.

10 segundos é o tempo que a memória de curto tempo se mantém
carregada com alguma informação captada pelo sistema cognitivo.

As informações devem estar visíveis ao usuário por um período
que permita sua identificação e reconhecimento (páginas que
somem rapidamente sem dar oportunidade de identificação são
esquecidas com a mesma velocidade).

Projetistas devem criar mecanismos para associação de ações.
Por exemplo, para voltar a um ponto anterior deve haver uma
indicação explícita, como uma tecla Voltar.

Operações freqüentes acabam sendo memorizadas na memória de
longo termo e a escolha de ícones para ações deve ser consistente.

Nos dois exemplos* o uso do carrinho para indicar
o ato de comprar em sites de ecommerce são
facilmente interpretados, pois já foram memorizados
pela repetição de uso em diferentes sites.

Figura 23. Ícones

Projetistas devem tomar um cuidado redobrado com operações
que, pela repetição, tornam-se óbvias para o projetista e acabam
não sendo explicadas para o usuário, mas que na verdade não são
óbvias para ele.

Fonte: SCHNEIDERMAN (1992)

*www.americanas.com; www.pontofrio.com.br

34


Você está curioso(a) sobre aspectos relacionados ao
mecanismo de memorização? Dê uma espiadinha
nestes artigos, eles são muito interessantes.

Notícia é destaque hoje e esquecida amanhã
http://www.comciencia.br/reportagens/memoria/05.shtml

A memória
http://www.comciencia.br/reportagens/memoria/15.shtml

Síntese

Durante a unidade foi possível perceber a importância da noção
de unidade da Gestalt na psicologia da percepção, e também a
importante relação sujeito-objeto. Quando percebemos as imagens
ocorre o resultado da interação luz na retina, com a tendência de
organizar da melhor forma possível os estímulos externos.

Você pôde perceber, por meio das diferentes leis, que ilusões
de ótica são criadas pelo uso da forma, que é possível brincar
com idéias de agrupamento utilizando a proximidade e/ou
similaridade, que não é necessário desenhar uma forma
completamente para que a mesma se torne uma informação para
o usuário (continuidade).

Observou que a lei fundamental da teoria da Gestalt é a
pregnância da forma, em que o objeto apresenta o máximo
de equilíbrio, clareza e uniﬁcação visual pelo uso da máxima:
simplicidade.

Você também aprendeu que a memória é organizada em uma
estrutura de três elementos, a memória de curto termo, longo
termo e de trabalho. Agora já é possível entender a importância
do tempo de resposta no projeto da interface e da necessidade
de usarmos mecanismos de projeto que chamem a atenção do
usuário de forma que a informação seja inesquecível para ele.

Unidade 1 35


Atividades de auto-avaliação

1) Qual o significado da Pregnância, para um indivíduo, no mecanismo de
percepção?

2) Em que situação a lei da semelhança e da proximidade são
complementares em um projeto de página? Procure um exemplo
deste aspecto na internet e cite o endereço.

3) Procure um exemplo do uso da lei do fechamento em logotipos ou
páginas na internet, cite o exemplo e o respectivo endereço.

36


4) Relacione as formas abaixo com as leis da Gestalt (pregnância, figura/
fundo, proximidade, semelhança, continuidade, fechamento):

a) b)

Para uma melhor
colorida.

c) d)

e) f)

g)

Unidade 1 37


5) Relacione os temas relacionados ao armazenamento da memória:

[A] Memória de Curto Termo;
[B] Memória de Trabalho;
[C] Memória de Longo Termo;

a) ( ) Armazena a informação por um espaço de 10 a 25
segundos;

b) ( ) permite o armazenamento de informações por um longo
período;

c) ( ) armazena informações por horas e até dias;

d) ( ) é a memória responsável por enviar informações para a
memória permanente;

e) ( ) armazena informações relacionadas aos sentidos como
fala, audição;

f) ( ) é a memória responsável por recuperar informações da
memória permanente;

g) ( ) armazena, no máximo, sete informações e as apaga da
memória rapidamente.

6) Em termos de projeto de interface Web, quais artifícios você pode
utilizar para sensibilizar o usuário fazendo com que o mesmo se
“recorde” do diálogo existente na sua página?

38


Saiba mais

AMARO, Fausto. Mecanismos de memória.
www.ncs.iscsp.utl.pt/apontamentos/index.php?dir=3%BA%20Ano/&file=Psicologia.rtf

Recomendações para design.
http://www.fast-consulting.com/GUI%20Design%20Handbook/gdhb_menubar.htm

Publicações sobre Gestalt em língua portuguesa.
http://www.gestalttheory.net/pubs/gestaltismo.html

FILHO, Gomes J. Gestalt do Objeto. São Paulo:
Escrituras, 2003.

Unidade 1 39

2
UNIDADE 2

Cores na Web

Objetivos de aprendizagem
Entender o mecanismo fisiológico de reconhecimento das
cores.

Perceber os cuidados necessários para o uso da cor na Web.

Compreender os efeitos e as influências da cor durante o
projeto de interface.

Seções de estudo
Seção 1 Mas o que é cor?

Seção 2 A visão humana da cor

Seção 3 Teoria das cores

Seção 4 Definição da cor de fundo da página

Seção 5 Recomendações para o uso de cores na Web


Para início de conversa
A unidade Cores na Web traz à tona a importância do uso da cor
no projeto de Web sites. Muitas vezes consideramos a cor apenas
como um fator estético, mas se você observar os objetos que você
usa no cotidiano, vai perceber aspectos interessantes: o botão de
ligar e desligar do controle remoto de sua tv é vermelho, quantas
cores existem no teclado do seu celular? O painel do seu carro faz
uso de no mínimo três cores, por quê?

O uso da cor proporciona uma importante dimensão na
comunicação visual, se a utilizamos com sabedoria melhora a
interpretação de uma mensagem, se mal utilizada pode prejudicá-la.

Quando vamos escolher as cores a serem utilizadas em nossos
sites acabamos, às vezes, por perder o sono à noite até tomarmos
a decisão. Qual cor? Quantas cores? Quais combinam? As cores
da empresa, o gosto do cliente, nossas decisões durante o projeto
nos colocam em ciladas virtuais.

As escolhas relacionadas ao uso da cor vão além dos meros
aspectos pessoais. O uso eﬁciente da cor depende de fatores que
variam de particularidades como: recursos visuais disponíveis,
fatores humanos e do próprio contexto de uso e do ambiente onde
a mesma será utilizada.

Durante a unidade vamos explorar este mundo colorido, a
maneira como vemos, como interpretamos, tentando entender
melhor para aplicar mais adequadamente a cor nos projetos de
sites para Web.

SEÇÃO 1 – Mas o que é cor?
Em 1966, Newton descobriu
Figura 2.1
que a luz branca do sol pode ser
decomposta com o auxílio de um prisma de cristal em radiações
de larguras variáveis (magenta, alaranjado, amarelo, verde, azul
ciano, anil e violeta). Sem luz não existe cor!

42


A impressão destas radiações sobre a retina do olho é o que
distinguimos como cor. A cor pode ser deﬁnida como um
comprimento de onda.

O comprimento de onda para o vermelho é de 580 nm
(nanômetros), para o verde 540 nm e para o azul 440 nm.

Quando você vê um arco-íris, você está vendo a luz
solar decomposta nestas 7 cores. Você sabe o que
funciona como prisma neste caso? As gotículas de
água!


Figura 2.2 - Decomposição da luz <http://www.dailytimes.com.
pk/default.asp?page=story_
26-7-2005_pg9_9>

SEÇÃO 2 – A visão humana da cor
O olho humano é o órgão responsável pela recepção da visão.
O olho é formado pelo globo ocular que é uma esfera com
aproximadamente 2,5 cm de diâmetro. Quando você ﬁ xa o olhar
sobre um objeto, a imagem deste objeto atravessa a córnea, depois
passa pela íris - que é responsável por regular a quantidade de luz
recebida por meio da pupila.

Unidade 2 43


<http://pt.wikipedia.org/wiki/Globo_ocular>

Figura 2.3 - Globo Ocular

Após atravessar o cristalino, a imagem é focada sobre a retina
(invertida, depois o cérebro acerta isto!). Você conhece o
mecanismo de uma máquina fotográfica? Nosso globo ocular
pode ser comparado a uma máquina fotográfica, onde o cristalino
seria a objetiva, a íris o diafragma e a retina seria a placa ou
película. Quando a imagem chega ao cristalino, ela é ajustada,
sendo levada para trás ou para frente, permitindo que ela se
projete sobre a retina.

Nossa retina está provida de duas espécies de células
sensíveis à luz: os bastonetes e os cones.

Cones e bastonetes
Os bastonetes permitem a visão para intensidades luminosas
muito pequenas (noite, crepúsculo). Recebem apenas impressão
de luminosidade e nenhuma impressão cromática. Por isto
quando saímos da cama à noite, no escuro, os objetos coloridos
aparecem sem cor, nossa visão está por conta dos bastonetes. Os
bastonetes (120 milhões de células) não percebem diferenças finas
de forma e cor.

Os cones permitem a impressão colorida em claridades média
e grande (visão diurna), a imagem fornecida é mais nítida e
detalhada. Existem três tipos de cones (três milhões de células)
no olho humano, cada um distingue uma cor diferente: vermelho,
verde ou azul.

Você sabia que a quantidade de cones vermelho,
verde ou azul é 40:20:um? É por este motivo que sua
sensibilidade para o azul é muito menor do que para
o vermelho. Em outras palavras, você vê um número
maior de tons de vermelho do que azuis.

44


Campo visual
A capacidade de percepção das cores está diretamente relacionada
ao campo visual. A distribuição das células fotoreceptoras não
é uniforme. Olhe a ﬁgura 2.5, na área central existem apenas
células do tipo cone (1), no campo central (2) existem células do
tipo cone e bastonetes, na área periférica encontram-se apenas
bastonetes (3).

Na região da fóvea (1) ocorre a projeção da imagem do objeto
focalizado. Nós enxergamos com nitidez somente objetos focados
na fóvea. Essa permite que a luz atinja os fotorreceptores sem
passar pelas demais camadas da retina, maximizando a acuidade
visual.
É a capacidade de o
Os bastonetes, ausentes na fóvea, são encontrados principalmente olho de distinguir entre
na retina periférica (2,3), sendo responsáveis pela transmissão de dois pontos próximos,
informações para as células ganglionares. e depende de diversos
fatores, em especial
No fundo do olho está o ponto cego, insensível à luz, não há do espaçamento dos
cones nem bastonetes, dele emergem o nervo óptico e os vasos fotorreceptores na retina
e da precisão da refração
sangüíneos da retina.
do olho.

Para uma melhor
compreensão,
visualize, no anexo
1, ao final do livro
didático, esta figura
colorida.
Figura 2.4. - Campo Visual (WICKER, 2000).

Segundo Winkler (2000), a área central da visão (1) é a
responsável pela leitura e deve receber máxima percepção e
contraste. O campo central (2) deve contrastar com a área
central, com uma relação de 2:1, e o campo visual periférico
não deve exceder de 10:1. A área periférica percebe apenas
movimentos e vultos.

Unidade 2 45


Você já chegou ao cinema após o início da sessão?
Saiu da ante-sala com muita claridade e entrou na sala
de projeção exatamente no momento em que a cena
estava muito escura? Como você se sentiu? Aquela
cegueira momentânea é causada pela acomodação
dos cones e pelo aumento da sensibilidade dos
bastonetes. O inverso também acontece, imagine
você saindo de uma sala com baixa luminosidade para
um gramado em um dia de sol intenso.

Formação de imagens coloridas na retina
Durante todo o processo da percepção visual o cristalino se
modifica, se adapta, de modo a focalizar sobre a retina a imagem
do objeto visualizado. A acomodação e a convergência do
cristalino dependem da cor do objeto visualizado. Isto acontece
porque as ondas verde, azul e vermelha convergem a diferentes
distâncias da retina.

Na figura 2.5 é possível observar que as ondas vermelhas
convergem além da superfície da retina, enquanto os
comprimentos de onda verdes sobre a retina e azuis convergem
antes da retina. Quando focalizamos objetos avermelhados,
o cristalino se torna mais convexo, como se o objeto estivesse
próximo do observador. Quando focalizamos um objeto azul,
o cristalino fica menos convexo (mais relaxado), como se objeto
estivesse distante (WINCLER, 2000).

visualize, no anexo 1, ao final
do livro didático, esta figura
colorida.

Figura 2.5 - Foco sobre a retina
Fonte: Apostila de técnicas de apresentação - Roberto Cabral de Mello Borges - UFRGS. 2003.

46


O uso de cores intensas causa fadiga visual justamente pela
necessidade constante de adaptação do cristalino. Imagine
o uso do azul e do vermelho simultaneamente, as diferentes
profundidades de foco seriam fatigantes!

A cegueira para algumas cores
Você sabia que o daltonismo é uma deficiência na visão que
dificulta a percepção de uma ou de todas as cores (na sua variação
mais comum o daltônico não distingue o vermelho do verde)?

O daltonismo é uma deficiência quase que
exclusivamente masculina, para 10% da população
masculina apenas 1% das mulheres apresentam o
problema. No projeto Web, temos que considerar esta
parcela da população fazendo uso da luminância, de
forma a permitir a diferenciação da cor.

Que tal você verificar sua acuidade visual? Qual número você vê
nas esferas? Este teste tenta detectar a deficiência da percepção da
cor – o daltonismo.

Para uma melhor
compreensão,
visualize, no anexo
colorida.

<http://chost.sites.uol.
com.br/Principal/teste_
de_daltonismo.html>
Figura 2.6 - Teste de visão

Imagino que agora você esteja se perguntando: como o indivíduo
daltônico diferencia as luzes verdes e vermelhas do semáforo,
já que para esse indivíduo as duas cores são apenas variações do
cinza? Em tempo, os números nas esferas são o 5 e o 6.

Unidade 2 47


SEÇÃO 3 – Teoria das cores
Muitas teorias procuram explicar o fenômeno da visão cromática,
mas todas elas se baseiam na observação de que o olho humano
pode detectar quase todas as graduações de cores, quando as
luzes monocromáticas vermelho, verde e azul são misturadas
apropriadamente.

As cores se dividem em três grupos: primárias,
secundárias e terciárias.

Cores primárias
São as cores que não podem ser formadas por nenhuma mistura.
São elas: azul, amarelo e vermelho. Quando misturadas de forma
variável produzem todas as cores do espectro.

Cores secundárias
São formadas por duas cores primárias misturadas em partes iguais.

Cores terciárias
São as intermediárias entre uma cor secundária e qualquer das
duas primárias que lhe dão origem (PEDROSA, 1982).

Observe a ﬁgura baixo, construída por Fabris, em 1973. As cores
primárias estão no centro, as secundárias (verde, laranja e violeta)
no segundo triângulo. O terceiro ciclo se complementa com as
cores terciárias.


Figura 2.7 - Círculo das cores (FABRIS, 1973)
48


Cores complementares
São as cores opostas no disco de cores. O vermelho é
complementar do verde, o azul é complementar do laranja.

As cores complementares são usadas para dar força e equilíbrio
a um trabalho, criando o máximo de contraste. As cores
complementares são as que dão mais contrastes entre si, se
queremos destacar um amarelo, devemos colocar junto dele um
violeta.

Para uma melhor
compreensão,
visualize, no anexo
colorida.
Figura 2.8. - Cores complementares (Vera Schuhmacher)

Cores análogas
São as que aparecem lado a lado no disco de cores. São análogas
porque há nelas uma mesma cor básica.

O amarelo-ouro e o laranja-avermelhado têm em
comum a cor laranja. Elas são usadas para dar a
sensação de uniformidade, profundidade, movimento,
luz e sombra.

Podemos considerar análogas três cores que se apresentam em
seqüência, no círculo das cores, como: o laranja, laranja-vermelho
e vermelho.

Unidade 2 49


Para uma melhor
compreensão,
visualize, no anexo
colorida.

Figura 2.9. - Círculo das cores (WINCKLER, 2000)

Figura 2.10. - Cores Análogas (Vera Schuhmacher)

O contraste das cores

A sensação da cor depende de três parâmetros: o
croma, a intensidade e o matiz (GUIMARÃES, 1997).

Matiz
É a característica que diferencia uma cor de outra, por exemplo, o
amarelo do azul, o verde do violeta.

Refere-se a maior ou menor quantidade de luz presente na cor.
Quando se adiciona preto a determinado matiz, esse se torna
gradualmente mais escuro, e essas graduações são chamadas
escalas tonais. Para se obter escalas tonais mais claras,
acrescenta-se branco. Observe o que ocorre na ﬁgura 2.8, quando
acrescentamos branco a cor.

50


Para uma melhor
compreensão,
visualize, no anexo
colorida.

Figura 2.11. Escalas tonais (Vera Schuhmacher)

Croma
É a qualidade específica de saturação da cor, que indica o seu grau
de pureza. Mas o que é saturação? Imagine um copo de leite
puro. Agora imagine você adicionando a este leite cinco colheres
de chocolate em pó. O leite vai ficar bastante escuro. Agora você
começa adicionando leite a esta mistura, a cor vai clareando,
mas ainda é marrom, quanto mais leite você adicionar mais claro
vai ficar o leite. Se você adicionar 10 litros de leite à mistura, é
provável que o líquido fique quase branco.

Podemos dizer que a saturação refere-se à quantidade
de branco em uma cor.

Quando diminuímos a saturação a imagem acaba por ficar em
preto e branco,com o grau de saturação em 0.

Para que você possa visualizar essa transição, consulte
o arquivo publicado na Midiateca. Ele apresenta uma
imagem com diversos tons de saturação.

Mas quando ocorre ao contrário e aumentamos a saturação, a
imagem acaba por ficar quase com um aspecto irreal.

Unidade 2 51


Luminosidade
É a quantidade relativa de claro ou escuro em uma escala
do preto ao branco. É fundamental para a percepção de
profundidade.

Contraste
É a base à distinção da forma, tamanho, posição, volume e
aparência dos objetos. Ele pode ser obtido através de diferenças
do matiz e ilumina ção. O contraste pode ser usado para alterar a
sensação de tamanho entre objetos.

Um exemplo é quando queremos parecer mais magros e usamos
roupa preta. As cores contrastantes são diretamente opostas no
disco das cores; como o azul e o amarelo.

Para uma melhor
compreensão,
visualize, no anexo
colorida. Figura 2.14. Contraste das cores

Compare os diferentes efeitos produzidos pelo contraste do fundo
para o mesmo quadrado vermelho.

O quadrado vermelho parece mais brilhante (preto), menos
brilhante (laranja) ou ainda maior (preto), de acordo com o fundo
utilizado.

Saiba mais
Não deixe de acessar o site Color in Motion no
endereço <http://www.mariaclaudiacortes.com/>. O
site é uma experiência interativa sobre a comunicação
e o simbologismo da cor. Você vai aprender em
que situações determinadas cores expressam uma
informação, suas cores complementares e como elas
são utilizadas em diferentes países.

52


Que tal brincar com um aplicativo que gera esquemas
e combinações de cores? Cada esquema se baseia
em uma cor usada como base, que é combinada e
complementada por cores adicionais, calculadas
por meio de algoritmos que permitem a melhor
combinação ótica. Esta ferramenta Color Scheme está
disponível em <http://wellstyled.com/tools/>.
Divirta-se !!

SEÇÃO 4 – Sistema e representação das cores
As cores são representadas de maneira diferente se o dispositivo
reflete ou emite luz. Objetos que não emitem luz refletem uma
parte da luz que incide sobre eles e absorvem a outra parte.

A sensação da cor é relativa e variável, segundo a natureza da
fonte luminosa e do objeto. Se uma laranja lima é iluminada por
uma luz azul, esta se transforma em verde; neste caso a reflexão
do amarelo se soma a da luz azul e ambas as cores são refletidas
misturadas.

Assim, os dispositivos que representam cores seguem
o modelo subtrativo, quando não emitem luz, e
aditivos quanto emitem luz.

Dispositivos que misturam pigmentos coloridos (impressora,
Scanner), seguem o modelo subtrativo, cujas cores primárias são:
amarelo, magenta e ciano. A mistura de todas as cores produz
o preto. Dispositivos baseados na emissão de luz (monitor,
data-show) seguem o modelo aditivo, cujas cores primárias são
vermelho, verde e azul-violeta. O branco é obtido pela mistura de
todas as cores.

Unidade 2 53


São modelos aditivos o HSV, o HLS e RGB. Entre os modelos
subtrativos, o mais empregado é o CMYK. O sistema RGB é o
padrão de cores na WWW. É um sistema cartesiano (x, y, z) onde
cada cor primária (Red, Green e Blue) representa um dos eixos do
cubo RGB. O modelo CMYK é formado pelas cores ciano (Cyan),
magenta (Magenta), amarelo (Yellow) e preto (blacK). É utilizado em
dispositivos de impressão.
Há diferenças entre cores representadas em monitores do mesmo
padrão RGB. Diversos fatores causam as diferenças, entre eles, o
gamut, ou seja, o grau de contraste entre os valores intermediários
de cinza de uma imagem. O valor de gamut do Macintosh é de 1.8 e
de um PC é 2,2. Imagens geradas em um Mac parecerão muito mais
escuras na plataforma PC, enquanto as geradas no PC parecerão
apagadas e sem brilho no Mac.

“Signal detection theory”, um
SEÇÃO 5 – Definição da cor de fundo da página
modelo estatístico elaborado na
década de 50. Segundo a teoria de detecção de sinais, o cérebro humano
interpreta e organiza a informação que recebe em forma ótima,
quando no campo visual há um número mínimo de cores e
formas: quanto menos “ruído”, mais claro é o “sinal”.

Quando você escolhe o padrão de cores de um site é importante
observar alguns aspectos relacionados por Schneirman (2000):

Assunto da página: é um site voltado ao entretenimento?
É um site voltado para venda de imóveis?
Público alvo: há algum fator de homogeneização? Sexo
(maioria homens ou mulheres), idade (é uma página
que pretende atingir o público infantil ou para jovens
procurando diversão noturna), experiência (os usuários
são funcionários de uma empresa com ou sem experiência
no uso da internet/intranet)? Existem outros fatores a
serem considerados? Ou os usuários formam uma platéia
altamente heterogênea? (usuários de um sistema de caixa
eletrônico de um banco, por exemplo)

54


Ambiente: qual é ou grau de estresse ao qual os usuários
estão submetidos (elevado, como em um sistema de
bolsas de valores?)? Qual é a luminosidade do ambiente?

Veja a seguir alguns exemplos.

Para uma melhor
compreensão,
visualize, no anexo
colorida.

<http://disney.go.com/
home/today/index.html>

Figura 2.15. Website da Disney

<http://sepultura.uol.
com.br/v6/>

Figura 2.16. Website da banda Sepultura

Unidade 2 55


A cor básica de fundo (o Matiz), da página inicial do site
Disney, é azul. Uma cor que, além de transmitir conﬁança,
calma e estabilidade, é perfeitamente visível para a grande
maioria da população. Note que apesar do impacto visual não
há muitas cores: fora o azul básico, utilizaram-se o verde,
branco e laranja (todas cores positivas, emocionais). O negro foi
abolido da página. As áreas com menor saturação da cor básica
estão nas bordas.

O site do grupo de rock Sepultura é basicamente negro. Combina
perfeitamente com o grupo e com a expectativa dos usuários do
site, fãs da banda. Note que, novamente, há poucas cores.

O site “Mais Você” é adequado ao consumidor principal: a
mulher. Cores suaves, femininas, esteticamente limpo.

<http://maisvoce.globo.com/
perfil_apresentadora.jsp>

Figura 2.17. Website Mais Você

Observe, agora, duas versões diferentes de uma mesma página:

Para uma melhor
compreensão,
visualize, no anexo
colorida.
Figura 2.18. Website Lancome
56


Para uma melhor
compreensão,
visualize, no anexo
colorida.

Figura 2.19. Website Lancome

A versão figura 2.18 é suave, delicada, de uma feminilidade
pouco agressiva. Já a versão da figura 2.19 modificou
completamente a mensagem: a feminilidade é agressiva, as
cores são fortes, vibrantes, até o vermelho (associado à paixão,
ao sexo, ao amor), que não estava presente em nenhum dos seus
matizes na versão anterior. Observe como a figura 2.18 é parte
do conjunto e não cria desvio de atenção. Já a figura 2.19 provoca
tanto impacto que é quase impossível observar o todo sem deixar
de notar a foto, que surtirá um impacto muito maior no leitor.
Observe que além das cores e da postura das imagens, também o
alinhamento do texto foi modificado.

Nos 5 sites apresentados, observamos que a escolha das cores
considera, principalmente, o perfil do público alvo e a economia
na quantidade de cores. Marmion (2004) sugere ser possível
estabelecer as seguintes orientações:

utilize a menor quantidade possível de cores para o fundo
de seu site;
se for utilizar mais de uma cor, utilize cores próximas do
espectro, que não criem contraste (fator de distração);
a percepção da cor é afetada pela luminosidade do
ambiente. Considere as fontes de iluminação — naturais
e artificiais — do local;

Unidade 2 57

Comunicação visual pra web

Recommended

Recommended

More Related Content

What's hot

What's hot (13)

Similar to Comunicação visual pra web

Similar to Comunicação visual pra web (20)

Comunicação visual pra web