Comunicação Visual para Web I

capa_impressao_colorida.
pdf 1 18/01/12 11:20
ISBN 978-85-7817-224-4
9 788578 172244
Universidade do Sul de Santa Catarina
Comunicao Visual para Web I

Disciplina na modalidade a distncia
Palhoa
UnisulVirtual
2011
Book.indb 1 18/01/12 11:15

Crditos
Universidade do Sul de Santa Catarina | Campus UnisulVirtual | Educao Superior a Distncia
Avenida dos Lagos, 41 Cidade Universitria Pedra Branca | Palhoa SC | 88137-900 | Fone/fax: (48) 3279-1242 e 3279-1271 | E-mail: cursovirtual@unisul.br | Site: www.unisul.br/unisulvirtual
Reitor Coordenadores Graduao Marilene de Ftima Capeleto Patrcia de Souza Amorim Karine Augusta Zanoni
Ailton Nazareno Soares Alosio Jos Rodrigues Patricia A. Pereira de Carvalho Poliana Simao Marcia Luz de Oliveira
Ana Lusa Mlbert Paulo Lisboa Cordeiro Schenon Souza Preto Mayara Pereira Rosa
Vice-Reitor Ana Paula R.Pacheco Paulo Mauricio Silveira Bubalo Luciana Tomado Borguetti
Sebastio Salsio Heerdt Artur Beck Neto Rosngela Mara Siegel Gerncia de Desenho e
Bernardino Jos da Silva Simone Torres de Oliveira Desenvolvimento de Materiais Assuntos Jurdicos
Chefe de Gabinete da Reitoria Charles Odair Cesconetto da Silva Vanessa Pereira Santos Metzker Didticos Bruno Lucion Roso
Willian Corra Mximo Dilsa Mondardo Vanilda Liordina Heerdt Mrcia Loch (Gerente) Sheila Cristina Martins
Diva Marlia Flemming Marketing Estratgico
Pr-Reitor de Ensino e Horcio Dutra Mello Gesto Documental Desenho Educacional
Lamuni Souza (Coord.) Cristina Klipp de Oliveira (Coord. Grad./DAD) Rafael Bavaresco Bongiolo
Pr-Reitor de Pesquisa, Itamar Pedro Bevilaqua
Ps-Graduao e Inovao Jairo Afonso Henkes Clair Maria Cardoso Roseli A. Rocha Moterle (Coord. Ps/Ext.) Portal e Comunicao
Daniel Lucas de Medeiros Aline Cassol Daga Catia Melissa Silveira Rodrigues
Mauri Luiz Heerdt Janana Baeta Neves
Aline Pimentel
Jorge Alexandre Nogared Cardoso Jaliza Thizon de Bona Andreia Drewes
Pr-Reitora de Administrao Jos Carlos da Silva Junior Guilherme Henrique Koerich Carmelita Schulze Luiz Felipe Buchmann Figueiredo
Acadmica Jos Gabriel da Silva Josiane Leal Daniela Siqueira de Menezes Rafael Pessi
Marlia Locks Fernandes Delma Cristiane Morari
Miriam de Ftima Bora Rosa Jos Humberto Dias de Toledo
Eliete de Oliveira Costa
Joseane Borges de Miranda Gerncia de Produo
Pr-Reitor de Desenvolvimento Luiz G. Buchmann Figueiredo Gerncia Administrativa e Elosa Machado Seemann Arthur Emmanuel F. Silveira (Gerente)
e Inovao Institucional Marciel Evangelista Catneo Financeira Flavia Lumi Matuzawa Francini Ferreira Dias
Renato Andr Luz (Gerente) Geovania Japiassu Martins
Valter Alves Schmitz Neto Maria Cristina Schweitzer Veit
Ana Luise Wehrle Isabel Zoldan da Veiga Rambo Design Visual
Maria da Graa Poyer
Diretora do Campus Mauro Faccioni Filho Anderson Zandr Prudncio Joo Marcos de Souza Alves Pedro Paulo Alves Teixeira (Coord.)
Universitrio de Tubaro Moacir Fogaa Daniel Contessa Lisboa Leandro Roman Bamberg Alberto Regis Elias
Milene Pacheco Kindermann Nlio Herzmann Naiara Jeremias da Rocha Lygia Pereira Alex Sandro Xavier
Onei Tadeu Dutra Rafael Bourdot Back Lis Air Fogolari Anne Cristyne Pereira
Diretor do Campus Universitrio Patrcia Fontanella Thais Helena Bonetti Luiz Henrique Milani Queriquelli Cristiano Neri Gonalves Ribeiro
da Grande Florianpolis Roberto Iunskovski Valmir Vencio Incio Marcelo Tavares de Souza Campos Daiana Ferreira Cassanego
Hrcules Nunes de Arajo Rose Clr Estivalete Beche Mariana Aparecida dos Santos Davi Pieper
Gerncia de Ensino, Pesquisa e Marina Melhado Gomes da Silva Diogo Rafael da Silva
Secretria-Geral de Ensino Vice-Coordenadores Graduao Extenso Marina Cabeda Egger Moellwald Edison Rodrigo Valim
Adriana Santos Ramm Janana Baeta Neves (Gerente) Mirian Elizabet Hahmeyer Collares Elpo Fernanda Fernandes
Solange Antunes de Souza Aracelli Araldi Pmella Rocha Flores da Silva
Bernardino Jos da Silva Frederico Trilha
Diretora do Campus Catia Melissa Silveira Rodrigues Rafael da Cunha Lara Jordana Paula Schulka
Elaborao de Projeto Roberta de Ftima Martins Marcelo Neri da Silva
Universitrio UnisulVirtual Horcio Dutra Mello Carolina Hoeller da Silva Boing
Jucimara Roesler Jardel Mendes Vieira Roseli Aparecida Rocha Moterle Nelson Rosa
Vanderlei Brasil Sabrina Bleicher Noemia Souza Mesquita
Joel Irineu Lohn Francielle Arruda Rampelotte
Equipe UnisulVirtual Jos Carlos Noronha de Oliveira Vernica Ribas Crcio Oberdan Porto Leal Piantino
Jos Gabriel da Silva Reconhecimento de Curso
Jos Humberto Dias de Toledo Acessibilidade Multimdia
Diretor Adjunto Maria de Ftima Martins Vanessa de Andrade Manoel (Coord.) Srgio Giron (Coord.)
Moacir Heerdt Luciana Manfroi
Rogrio Santos da Costa Extenso Letcia Regiane Da Silva Tobal Dandara Lemos Reynaldo
Secretaria Executiva e Cerimonial Rosa Beatriz Madruga Pinheiro Maria Cristina Veit (Coord.) Mariella Gloria Rodrigues Cleber Magri
Jackson Schuelter Wiggers (Coord.) Sergio Sell Vanesa Montagna Fernando Gustav Soares Lima
Marcelo Fraiberg Machado Pesquisa Josu Lange
Tatiana Lee Marques Daniela E. M. Will (Coord. PUIP, PUIC, PIBIC) Avaliao da aprendizagem
Tenille Catarina Valnei Carlos Denardin Claudia Gabriela Dreher Conferncia (e-OLA)
Mauro Faccioni Filho (Coord. Nuvem)
Assessoria de Assuntos Smia Mnica Fortunato (Adjunta) Jaqueline Cardozo Polla Carla Fabiana Feltrin Raimundo (Coord.)
Internacionais Ps-Graduao Ngila Cristina Hinckel Bruno Augusto Zunino
Coordenadores Ps-Graduao Anelise Leal Vieira Cubas (Coord.) Sabrina Paula Soares Scaranto
Murilo Matos Mendona Alosio Jos Rodrigues Gabriel Barbosa
Anelise Leal Vieira Cubas Thayanny Aparecida B. da Conceio
Assessoria de Relao com Poder Biblioteca Produo Industrial
Pblico e Foras Armadas Bernardino Jos da Silva Salete Ceclia e Souza (Coord.) Gerncia de Logstica Marcelo Bittencourt (Coord.)
Adenir Siqueira Viana Carmen Maria Cipriani Pandini Paula Sanhudo da Silva Jeferson Cassiano A. da Costa (Gerente)
Walter Flix Cardoso Junior Daniela Ernani Monteiro Will Marlia Ignacio de Espndola Gerncia Servio de Ateno
Giovani de Paula Renan Felipe Cascaes Logsitca de Materiais Integral ao Acadmico
Assessoria DAD - Disciplinas a Karla Leonora Dayse Nunes Carlos Eduardo D. da Silva (Coord.) Maria Isabel Aragon (Gerente)
Distncia Letcia Cristina Bizarro Barbosa Gesto Docente e Discente Abraao do Nascimento Germano Ana Paula Batista Detni
Patrcia da Silva Meneghel (Coord.) Luiz Otvio Botelho Lento Enzo de Oliveira Moreira (Coord.) Bruna Maciel Andr Luiz Portes
Carlos Alberto Areias Roberto Iunskovski Fernando Sardo da Silva Carolina Dias Damasceno
Cludia Berh V. da Silva Rodrigo Nunes Lunardelli Capacitao e Assessoria ao Fylippy Margino dos Santos Cleide Incio Goulart Seeman
Conceio Aparecida Kindermann Rogrio Santos da Costa Docente Guilherme Lentz Denise Fernandes
Luiz Fernando Meneghel Thiago Coelho Soares Alessandra de Oliveira (Assessoria) Marlon Eliseu Pereira Francielle Fernandes
Renata Souza de A. Subtil Vera Rejane Niedersberg Schuhmacher Adriana Silveira Pablo Varela da Silveira Holdrin Milet Brando
Alexandre Wagner da Rocha Rubens Amorim
Assessoria de Inovao e Jenniffer Camargo
Gerncia Administrao Elaine Cristiane Surian (Capacitao) Yslann David Melo Cordeiro Jessica da Silva Bruchado
Qualidade de EAD Acadmica Elizete De Marco
Denia Falco de Bittencourt (Coord.) Jonatas Collao de Souza
Angelita Maral Flores (Gerente) Fabiana Pereira Avaliaes Presenciais
Andrea Ouriques Balbinot Juliana Cardoso da Silva
Fernanda Farias Iris de Souza Barros Graciele M. Lindenmayr (Coord.)
Carmen Maria Cipriani Pandini Juliana Elen Tizian
Juliana Cardoso Esmeraldino Ana Paula de Andrade
Secretaria de Ensino a Distncia Kamilla Rosa
Maria Lina Moratelli Prado Angelica Cristina Gollo
Assessoria de Tecnologia Samara Josten Flores (Secretria de Ensino) Simone Zigunovas
Mariana Souza
Osmar de Oliveira Braz Jnior (Coord.) Cristilaine Medeiros Marilene Ftima Capeleto
Giane dos Passos (Secretria Acadmica) Daiana Cristina Bortolotti
Felipe Fernandes Adenir Soares Jnior Tutoria e Suporte Maurcio dos Santos Augusto
Felipe Jacson de Freitas Delano Pinheiro Gomes Maycon de Sousa Candido
Alessandro Alves da Silva Anderson da Silveira (Ncleo Comunicao) Edson Martins Rosa Junior
Jefferson Amorin Oliveira Andra Luci Mandira Claudia N. Nascimento (Ncleo Norte- Monique Napoli Ribeiro
Phelipe Luiz Winter da Silva Fernando Steimbach Priscilla Geovana Pagani
Cristina Mara Schauffert Nordeste)
Fernando Oliveira Santos
Priscila da Silva Djeime Sammer Bortolotti Maria Eugnia F. Celeghin (Ncleo Plos) Sabrina Mari Kawano Gonalves
Rodrigo Battistotti Pimpo Lisdeise Nunes Felipe Scheila Cristina Martins
Douglas Silveira Andreza Talles Cascais Marcelo Ramos
Tamara Bruna Ferreira da Silva Evilym Melo Livramento Daniela Cassol Peres Taize Muller
Marcio Ventura Tatiane Crestani Trentin
Fabiano Silva Michels Dbora Cristina Silveira Osni Jose Seidler Junior
Coordenao Cursos Fabricio Botelho Espndola Ednia Araujo Alberto (Ncleo Sudeste) Thais Bortolotti
Coordenadores de UNA Felipe Wronski Henrique Francine Cardoso da Silva
Diva Marlia Flemming Gisele Terezinha Cardoso Ferreira Janaina Conceio (Ncleo Sul) Gerncia de Marketing
Marciel Evangelista Catneo Indyanara Ramos Joice de Castro Peres Eliza B. Dallanhol Locks (Gerente)
Roberto Iunskovski Janaina Conceio Karla F. Wisniewski Desengrini
Jorge Luiz Vilhar Malaquias Kelin Buss Relacionamento com o Mercado
Auxiliares de Coordenao Juliana Broering Martins Liana Ferreira Alvaro Jos Souto
Ana Denise Goularte de Souza Luana Borges da Silva Luiz Antnio Pires
Camile Martinelli Silveira Luana Tarsila Hellmann Maria Aparecida Teixeira Relacionamento com Polos
Fabiana Lange Patricio Luza Koing Zumblick Mayara de Oliveira Bastos Presenciais
Tnia Regina Goularte Waltemann Maria Jos Rossetti Michael Mattar Alex Fabiano Wehrle (Coord.)
Jeferson Pandolfo
Book.indb 2 18/01/12 11:15

Vera Niedersberg Schuhmacher

Livro didtico
Design instrucional
Flavia Lumi Matuzawa
Leandro Kingeski Pacheco
3a edio
Palhoa
UnisulVirtual
2011
Book.indb 3 18/01/12 11:15

Copyright UnisulVirtual 2011
Nenhuma parte desta publicao pode ser reproduzida por qualquer meio sem a prvia autorizao desta instituio.
Edio Livro Didtico

Professor Conteudista
Vera Niedersberg Schuhmacher
Design Instrucional
Flavia Lumi Matuzawa
Leando Kingeski Pacheco
Assistente Acadmico
Eloisa Machado Seemann (2 ed. rev. e atual.)
Aline Cassol Daga (3 edio)
ISBN
978-85-7817-224-4
Projeto Grfico e Capa

Equipe UnisulVirtual
Diagramao
Rafael Pessi
Frederico Trilha (3 edio)
Reviso Ortogrfica
Diane Dal Mago
004.61
S41 Schuhmacher, Vera Niedersberg
Comunicao visual para web I : livro didtico / Vera Niedersberg
Schuhmacher ; design instrucional Flavia Lumi Matuzawa, Leandro
Kingeski Pacheco ; [assistente acadmico Eloisa Machado Seemann, Aline
Cassol Daga]. 3. ed. Palhoa : UnisulVirtual, 2011.
183 p. : il. ; 28 cm.
Inclui bibliografia.
ISBN 978-85-7817-224-4
1. Internet (Redes de computao). 2. Comunicao visual. 3.

Psicolingstica. 4. Sites da Web Projetos. I. Matuzawa, Flavia Lumi. II.
Pacheco, Leandro Kingeski. III. Seemann, Eloisa Machado. IV. Daga, Aline
Cassol. V. Ttulo.
Ficha catalogrfica elaborada pela Biblioteca Universitria da Unisul
Book.indb 4 18/01/12 11:15

Sumrio
Apresentao. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Palavras da professora. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Plano de estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
UNIDADE 1 - Psicologia da comunicao. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

UNIDADE 2 - Cores na web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
UNIDADE 3 - Etapas do processo de design. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
UNIDADE 4 - Por que usabilidade? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
UNIDADE 5 - Avaliando a usabilidade de websites. . . . . . . . . . . . . . . . . . . . . 111
UNIDADE 6 - Navegao. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Para concluir o estudo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151

Referncias. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Sobre a professora conteudista. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Respostas e comentrios das atividades de autoavaliao. . . . . . . . . . . . . . 163
Biblioteca Virtual. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
ANEXO 1 - Imagens coloridas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Book.indb 5 18/01/12 11:15

Book.indb 6 18/01/12 11:15
Apresentao
Este livro didtico corresponde disciplina Comunicao Visual

para Web I.
O material foi elaborado visando a uma aprendizagem autnoma

e aborda contedos especialmente selecionados e relacionados
sua rea de formao. Ao adotar uma linguagem didtica
e dialgica, objetivamos facilitar seu estudo a distncia,
proporcionando condies favorveis s mltiplas interaes e a
um aprendizado contextualizado e eficaz.
Lembre-se que sua caminhada, nesta disciplina, ser

acompanhada e monitorada constantemente pelo Sistema
Tutorial da UnisulVirtual, por isso a distncia fica
caracterizada somente na modalidade de ensino que voc optou
para sua formao, pois na relao de aprendizagem professores e
instituio estaro sempre conectados com voc.
Ento, sempre que sentir necessidade entre em contato; voc tem

disposio diversas ferramentas e canais de acesso tais como:
telefone, e-mail e o Espao Unisul Virtual de Aprendizagem,
que o canal mais recomendado, pois tudo o que for enviado e
recebido fica registrado, para seu maior controle e comodidade.
Nossa equipe tcnica e pedaggica ter o maior prazer em lhe
atender, pois sua aprendizagem o nosso principal objetivo.
Bom estudo e sucesso!
Equipe UnisulVirtual.
Book.indb 7 18/01/12 11:15

Book.indb 8 18/01/12 11:15
Palavras da professora
Voc j tentou acessar um site de banco para realizar um

pagamento e no conseguiu? Ao sair do site sem efetuar a
transao desejada, sentimo-nos, em pleno sculo XXI, refns
da tecnologia e no apoiados por ela (como foi amplamente
prometido!). Durante a ltima dcada ocorreu uma transformao
exuberante em atividades antes feitas de forma manual, como
linhas de produo de indstrias, carros informatizados, educao
e, principalmente, o advento da internet.
Grande parte das atividades da vida moderna inserem os

recursos computacionais no dia a dia do cidado comum. A
facilidade e o conforto na utilizao tornaram-se um problema
srio; o cidado trava um combate dirio na utilizao das
facilidades propostas por tais tecnologias.
Observe os cidados na fila de um caixa eletrnico, tente observar

quantos deles conseguem chegar ao final da operao desejada
de forma harmoniosa. Observe os seguintes sintomas: vergonha,
frustrao, raiva e, em muitos casos, a desistncia do cliente.
Por que isso acontece? Uma grande parcela de culpa reside no

projeto da interface e no dilogo da interao com o usurio.
Em muitas situaes, a preocupao centralizada nas
funcionalidades do sistema, sendo o design grfico e o prprio
projeto de interao colocados em um plano secundrio.
Quando a interao ocorre em um website, a dificuldade

em localizar a informao, efetuar a transao ou mesmo
a aparncia desagradvel do site induzem o usurio a
sair facilmente do portal. Na maioria das vezes, o cliente
no retorna. O internauta impaciente, situaes vagas,
incoerentes e confusas o levam a sair do site e continuar sua
busca em outros endereos.
Book.indb 9 18/01/12 11:15

Durante a disciplina ser possvel conhecer melhor o projeto de

design centrado no usurio, assim como a introduo a conceitos
que minimizem situaes de desconforto e que facilitem a
interao do usurio, adequando-o s necessidades do cliente.
fundamental, desde j, que saibamos que o bom projeto de

interface garante a aceitao do cliente e o consequente sucesso
do produto. O projeto de design adequado ajuda de forma
inestimvel a fidelizao do cliente ao site.
Para uma melhor compreenso das figuras apresentadas neste

livro, voc poder consultar o Anexo 1, no final do livro, e
visualizar algumas delas apresentadas em cores.
Bom estudo!
Professora Vera Niedersberg Schuhmacher.
10
Book.indb 10 18/01/12 11:15

Plano de estudo
O plano de estudos visa a orient-lo no desenvolvimento da

disciplina. Ele possui elementos que o ajudaro a conhecer o
contexto da disciplina e a organizar o seu tempo de estudos.
O processo de ensino e aprendizagem na UnisulVirtual leva

em conta instrumentos que se articulam e se complementam,
portanto, a construo de competncias se d sobre a
articulao de metodologias e por meio das diversas formas de
ao/mediao.
So elementos desse processo:
o livro didtico;
o Espao UnisulVirtual de Aprendizagem (EVA);
as atividades de avaliao (a distncia, presenciais e de

autoavaliao);
o Sistema Tutorial.
Ementa
Usabilidade. Ergonomia de interface e navegabilidade.
Psicologia da comunicao, arquitetura de informao e mapa
do site. Produo grfica, diagramao, esttica e sua influncia
na performance do site. Padronizao grfica. Resoluo de
monitores e compatibilidade. Indicadores de qualidade, tempo
de visualizao e projetos de otimizao da comunicao.
Book.indb 11 18/01/12 11:15

Objetivos
Geral
O objetivo da disciplina desenvolver no aluno o senso crtico e
aptides necessrias acerca do desenvolvimento da comunicao
visual para web a partir do reconhecimento de fundamentos tericos
fundamentais como diretrizes de design, mecanismos de cognio,
usabilidade, uso de cores, tipografias, imagens e contedo.
Especficos
Propiciar o desenvolvimento de sites mais eficientes
centrados nos usurios.
Utilizar instrumentos de elicitao de conhecimentos.
Esclarecer diretrizes para a concepo de websites

consistentes, a partir de normas e padres reconhecidos.
Apresentar tcnicas e instrumentos de avaliao de

usabilidade para sites web.
Carga Horria
A carga horria total da disciplina 60 horas-aula.
Contedo programtico/objetivos
Veja, a seguir, as unidades que compem o livro didtico desta
disciplina e os seus respectivos objetivos. Estes se referem aos
resultados que voc dever alcanar ao final de uma etapa de
estudo. Os objetivos de cada unidade definem o conjunto de
conhecimentos que voc dever possuir para o desenvolvimento
de habilidades e competncias necessrias sua formao.
Unidades de estudo: 6
12
Book.indb 12 18/01/12 11:15

Unidade 1 - Psicologia da comunicao

Quando olhamos o mundo que nos envolve, percebemos a
quantidade de estmulos aos quais o ser humano est sujeito. O
ser humano seleciona e discrimina os estmulos e um mesmo
estmulo pode ser interpretado de diferentes modos, por
diferentes sujeitos. Nesta unidade, voc ter a oportunidade
de conhecer um pouco sobre correntes de pensamentos, que
procuram descrever o funcionamento de percepo da realidade
pelo ser humano e do uso de sua memria.
Unidade 2 - Cores na web

Quando discutimos cor, impossvel no pensarmos em questes
estticas ou mesmo relacionadas ao gosto do usurio ou
projetista. Nesta unidade, voc ir perceber que o uso da cor
bem mais complexo e completo, sendo seu uso fundamental como
elemento visual e diferencial. Aspectos fisiolgicos e estticos so
abordados, fundamentando diferentes decises de projeto.
Unidade 3 - Etapas do processo de design

Todo processo de desenvolvimento deve seguir uma baseline. A
baseline de um projeto descreve etapas e procedimentos a serem
realizados a cada etapa. Ao estudarmos esta unidade, estaremos
utilizando um modelo de desenvolvimento genrico para projetos
web. Sua utilizao proporciona um maior controle e gerncia
sobre as diversas etapas e uma significativa reduo de riscos.
Unidade 4 - Por que usabilidade?

Ao estudar a unidade 4, o aluno ir perceber a importncia de
conceitos de usabilidade no cotidiano do internauta. A aplicao
de conceitos faz a diferena entre um projeto utilizvel e um
projeto comprometido, que muitas vezes leva frustrao e
desistncia do usurio.
13
Book.indb 13 18/01/12 11:15

Unidade 5 - Avaliando a usabilidade de websites

A unidade 5 vai lev-lo ao universo da avaliao. To importante
como projetar e construir o projeto avali-lo. Nesta unidade,
sero discutidas diferentes metodologias de avaliao, permitindo
que o aluno realize suas prprias avaliaes, a partir da exposio
do material de referncia.
Unidade 6 - Navegao
O termo navegao nunca foi to debatido como a partir do uso
da internet. Navegar hoje sinnimo de modernidade, mas essa
navegao pode ser, por vezes, desgastante, frustrante e pouco
eficiente. Na unidade 6, voc vai abordar este tema crtico no
projeto de sites, assim perceber que pequenos cuidados podem
modificar completamente a forma de interao e mesmo a forma
como o cliente v e usa seu site. Nesta unidade, voc perceber
que os mecanismos de navegao disponibilizados devem diferir
de acordo com a proposta do site, e podem ser ricos de recursos
que facilitem a busca pela informao desejada.
Agenda de atividades/cronograma
Verifique com ateno o EVA, organize-se para acessar

periodicamente a sala da disciplina. O sucesso nos seus
estudos depende da priorizao do tempo para a leitura,
da realizao de anlises e snteses do contedo e da
interao com os seus colegas e professor.
No perca os prazos das atividades. Registre no espao

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.
14
Book.indb 14 18/01/12 11:15

Atividades obrigatrias
Demais atividades (registro pessoal)
15
Book.indb 15 18/01/12 11:15

Book.indb 16 18/01/12 11:15
1
unidade 1
Psicologia da comunicao
Objetivos de aprendizagem
Estudar sobre a psicologia envolvida no processo de
comunicao visual.
Conhecer a teoria da Gestalt do objeto.
Ter conhecimento das implicaes existentes no

mecanismo de memorizao.
Ter conhecimento das implicaes geradas a partir de

decises de projeto e que so explicadas pela psicologia.
Sees de estudo
Seo 1 O que Gestalt?
Seo 2 Um pouco da histria
Seo 3 Percepo da forma
Seo 4 Os princpios da Gestalt
Seo 5 Os mecanismos de memorizao
Seo 6 Restries de tempo em relao

memorizao
Book.indb 17 18/01/12 11:15

Para incio de estudo

Quando voc olha para uma pgina Web, para uma figura ou
mesmo um documento impresso, voc organiza o que est vendo,
tenta impor uma estrutura e fazer conexes. Seu crebro 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 so reagrupadas em
um conjunto que permite a compreenso do seu significado.
Durante esta unidade, voc ter um contato muito prximo com

a teoria da Gestalt, muito conhecida como o estudo das formas
e que procura estabelecer relaes por meio das quais as partes da
imagem so agrupadas na percepo visual.
No decorrer de seu estudo, voc far uma incurso sobre os

princpios que do forma teoria e justificam sua utilizao. Voc
vai perceber que o bom uso dos princpios da Gestalt explica,
muitas vezes, o sucesso de tcnicas de projeto visual.
Nesta unidade, voc tambm explorar o universo da memria:

por que lembramos de fatos ocorridos h 10 anos, mas no
lembramos de fatos lidos em uma revista h uma semana?
O complexo mecanismo da memria e sua boa utilizao na

construo de um projeto de interface sero discutidos no
decorrer da unidade.
18
Book.indb 18 18/01/12 11:15

Seo 1 - O que Gestalt?

A palavra Gestalt tem origem germnica e significa forma,
forma regular ou ainda configurao. A teoria da Gestalt surgiu
nas primeiras dcadas do sculo passado (1920), ao mesmo tempo
em que a Europa saa de um de seus perodos mais conturbados
da histria - a Primeira Guerra Mundial.
Figura 1.1 - A Primeira Guerra Mundial

Fonte: Guerras no mundo (2010).
Figura 1.2 - O castelo

Fonte: Freeservers (2010).
A Gestalt uma escola de psicologia experimental atuante

principalmente na rea da teoria da forma. Suas contribuies
foram fundamentais ao estudo da percepo, sensao do
movimento, linguagem, memria, inteligncia, entre outros.
Os gestaltistas queriam compreender quais os processos psicolgicos

que estavam envolvidos na iluso de tica. O que acontece ou como
acontece quando um estmulo fsico percebido pelo ser humano
com uma forma diferente do que ele na realidade.
Na Figura 1.2 voc no tem a impresso de que todas

as pessoas esto o tempo todo subindo a escada? Por
qu? uma iluso de tica de movimento contnuo.
Unidade 1 19
Book.indb 19 18/01/12 11:15

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 ter sido usadas bem mais, no mesmo?
Figura 1.3 - A iluso das cores

Fonte: Freeservers (2010).
Voc costuma ir ao cinema? O movimento que vemos na tela

uma iluso de tica causada pelo fenmeno da ps-imagem
retiniana. As imagens vo se sobrepondo em nossa retina e o que
As imagens no so apagadas percebemos um movimento. Mas o cinema que voc v na
imediatamente da retina. verdade uma sequencia de fotografias estticas projetadas na tela.
Alm de explicar por meio de suas premissas este tipo de iluso, a

Gestalt sugere uma resposta ao porqu de certas formas agradarem
mais que outras; apoiando-se na fisiologia do sistema nervoso e na
psicologia, comprovadas por meio de experimentos e pesquisas.
Seo 2 - Um pouco da histria

Em seu incio, havia duas correntes na Gestalt, a dos dualistas
e a dos monistas. Os dualistas acreditavam que perceberamos
os elementos separadamente e s ento eles formariam o todo,
por meio de uma ao do esprito, de uma percepo mental.
Um desenho seria visto como partes, mas a forma total que
percebemos estaria interligada pelo esprito que uniria seus
elementos.
Os monistas, por sua vez, sustentavam a ideia de que as

partes dependem mais do todo e que o todo determina a
ordem das partes. Para os monistas, forma e matria no so
separveis, portanto, os elementos de uma forma no existem
separadamente. As partes so vistas como elementos formadores
do todo. Em outras palavras, se modificarmos algum elemento, o
todo tambm alterado.
20
Book.indb 20 18/01/12 11:15

Quando em uma pgina mudamos a cor do fundo (Figura 1.4)

percebemos a mudana do todo (os elementos se modificam) e
no apenas do fundo.
Figura 1.4 - O conceito monista: o todo determina as partes

Fonte: Meu Livro... (2010).
A concepo monista acabou sendo a teoria polarizadora. Seus

principais defensores Max Wertheimer, Kurt Koffka e Wolfgang
Khler acabaram por se tornar figuras de maior importncia na
escola da Gestalt. Os princpios da Gestalt estenderam-se alm
da psicologia, para reas como a Fsica e a Filosofia.
Seo 3 - Percepo da forma
O dicionrio define percepo como o ato de adquirir

o conhecimento de um fato, ser ou objeto, atravs dos
sentidos.
Segundo a Gestalt, a percepo da forma pelo crebro sempre

uma percepo global dos estmulos, ou seja, o crebro no enxerga
elementos isolados. O olho humano tende a agrupar as vrias
unidades de um campo visual para formar um todo, portanto,
enxergamos o todo e no partes dele. Na figura, a seguir, os dois
crculos centrais so de igual tamanho, mas parecem diferentes.
Essa iluso provocada pela percepo total do conjunto. A noo
de tamanho do crculo se d pela dependncia dos demais crculos.
Unidade 1 21
Book.indb 21 18/01/12 11:15

Figura 1.5 - Iluso de tica

Fonte: Filho (2003).
Nosso organismo percebe ento um conjunto de elementos

como uma forma completa, em que os componentes esto
integrados entre si. Se decompormos algum elemento, estaremos
automaticamente destruindo o conjunto.
Seo 4 - Os princpios da Gestalt

Entre os princpios da Gestalt, destaca-se como fundamental
referncia para as composies grficas, o seguinte conceito:
o todo mais do que a soma das partes. Isso equivale a dizer
que A + B no simplesmente (A+B), mas sim um terceiro
elemento C, que possui caractersticas prprias.
A partir de experimentos e resultados cientficos fundamentaram-

se diretrizes que regem a percepo humana das formas. Essas leis
apresentam concluses sobre o comportamento natural do crebro
no processo de percepo. Em outras palavras, essas leis nos indicam
o porqu de vermos as coisas de uma certa maneira e no de outra.
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,
no existe agrupamentos ou mesmo relaes entre os elementos.
22
Book.indb 22 18/01/12 11:15

Na Figura 1.6 possvel ver o grupo de pessoas como uma

unidade, mas pode-se tambm dizer que cada pessoa constitui
uma unidade, ou ainda uma subunidade, dentro do todo.
Na Figura 1.7 tem-se o exemplo de uma unidade onde no ocorre

agrupamento. Neste caso, a unidade formada por um nico
elemento: a letra S.
Figura 1.6 - Unidade Figura 1.7 - Unidade

Fonte: Corporao Britnica Fonte: Elaborao da
de Radiodifuso (2010). autora (2010).
Segregao
A segregao 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 segregao. Na Figura 1.8, podemos
segregar as principais unidades: o carro, a estrada e o fundo.
Mas possvel segregarmos a unidade automvel em faris, placa,
vidros, rodas, calotas etc. Essa decomposio pode continuar at
que todas as unidades visveis tenham sido mapeadas.
Figura 1.8 - Segregao

Fonte: Motor Trend (2004).
Unidade 1 23
Book.indb 23 18/01/12 11:15

Na Figura 1.9, a seguir, vemos objetos formando uma unidade.

Mas possvel separ-los. Assim, possvel segregar as unidades:
Figura 1.9 - Objetos formando uma unidade

Fonte: Elaborao da autora (2010).
Proximidade
O princpio da proximidade descreve a tendncia

dos elementos individuais de serem associados com
os elementos mais prximos, formando unidades.
Quando colocamos elementos prximos, em condies iguais, a

percepo do ser humano ser reconhec-los, formando um s todo.
Observe a Figura 1.10. Em um primeiro momento, o

que exatamente voc v? Duas colunas ou quatro
colunas?
Figura 1.10 - Proximidade

Nosso sistema nervoso organiza a figura como um todo e pelo

efeito da proximidade nos leva a interpretar 2 colunas distintas,
em 2 pares. As diferentes distncias existentes nas 4 colunas nos
levam ao agrupamento das mais prximas.
24
Book.indb 24 18/01/12 11:15

Quanto menor a distncia maior a unidade.
Figura 1.11 - Proximidade

Fonte: Ponto Frio (2007).
Na Figura 1.11, as informaes relacionadas a cada tipo de

relgio esto prximas, criando a inteno de agrupamento. Na
leitura do usurio ocorre a interpretao de que preo e descrio
pertencem imagem mais prxima.
Similaridade
Elementos semelhantes tendem a se agrupar naturalmente. A
semelhana pode ser estabelecida pelo compartilhamento de
caractersticas visuais bsicas como: cor, forma, tamanho, entre outras.
Observe o seguinte exemplo:
OX OX OX OX aa aa aa aa
OX OX OX OX ou aa aa aa aa
OX OX OX OX aa aa aa aa
Figura 1.12 - Similaridade
Apesar dos espaos interelementos e intercolunas terem sido

igualados, o agrupamento ocorre pela semelhana dos elementos.
No primeiro caso, pela composio da semelhana da forma das
letras OX e, no segundo, pelo uso da cor.
Unidade 1 25
Book.indb 25 18/01/12 11:15

Quanto maior a semelhana entre os estmulos, maior

a probabilidade de serem percebidos como um grupo
comum (FILHO, 2003).
A proximidade e semelhana so diretrizes que se completam

quando o assunto agrupamento, mas a semelhana o fator
mais forte de organizao.
Continuidade
Conforme Filho (2003), a continuidade descreve a preferncia
pelos contornos contnuos e sem quebra, ao invs de combinaes
complexas de figuras irregulares.
O crebro tende sempre a enxergar a melhor continuao de retas

e curvas, assim, pode-se direcionar o crebro a enxergar imagens
de determinadas formas, de acordo com a necessidade.
Quando voc observa a figura (a), abaixo, o que percebe so duas

linhas que se cruzam e no quatro linhas que se tocam em um ponto.
x
y
Figura 1.13 - 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
continuao? Qual elemento parece ser um anexo? Se voc
respondeu que o elemento z parece um anexo, acertou! Ela fere
o princpio da boa continuao. Curvas que no seguem a boa
continuao natural perdem fluncia e harmonia.
Uma figura com linhas internas contnuas tende a ser vista como
bidimensional, enquanto o desencontro de linhas internas nos
direciona tridimensionalidade.
26
Book.indb 26 18/01/12 11:15

Fechamento
O princpio do fechamento descreve a tendncia humana de unir
intervalos e estabelecer ligaes. O crebro humano interpreta
o estmulo visual de forma completa, como figuras fechadas,
mesmo quando algumas informaes de contorno esto ausentes.
Essa diretriz fcil de explicar. Voc lembra de ter visto figuras
que apesar de formadas por contornos no contnuos, enxergou
como unidades completas?
Figura 1.14 - Fechamento

Existe a tendncia psicolgica de se unir intervalos e estabelecer

ligaes. Na figura, o que voc v? So trs crculos incompletos
ou realmente existe o contorno do tringulo?
Figura/Fundo
Quando as partes integrantes de um todo so ligeiramente
diferentes, tendemos a assimil-las ao todo, percebendo-as
de maneira uniforme. Por outro lado, quando as partes no
constituem um todo, a tendncia perceptiva no sentido de
contrast-las com o fundo.
Unidade 1 27
Book.indb 27 18/01/12 11:15

Figura 1.15 - Figura/Fundo

Fonte: Elaborao do autora (2010).
Quando colocamos uma cor cinzenta sobre um fundo branco,

parecer mais escura do que se inserida em um fundo negro.
Normalmente, distingue-se a figura de fundo pelo fato da figura

ter uma forma e aparecer como objeto na frente. O fundo deve
ser, ento, sem forma, parecendo se estender de maneira contnua
por trs da figura. No quadro da Monalisa, fica claro para o
usurio a interpretao da figura e do fundo.

Fonte: Pgina da Mnica ([200-]).

Fonte: Dantas (2010).
Na Figura 1.17, a considerao do que figura ou do que fundo

faz com que o indivduo interprete a figura como um homem
tocando sax ou o rosto de uma jovem mulher.
28
Book.indb 28 18/01/12 11:15

Pregnncia
A lei da pregnncia diz que todas as formas tendem a ser
percebidas em seu carter mais simples e as foras de organizao
tendem a se dirigir sempre no sentido da clareza, unidade e
equilbrio (FILHO, 2003).
Uma casa pode ser vista por 2 formas geomtricas: um retngulo

e um tringulo. E uma forma forte e pregnante, pois consegue
transmitir com muita simplicidade a informao.
Figura 1.18 - Pregnncia da forma

o princpio da simplificao natural da percepo. Quanto

mais simples, mais facilmente assimilada, dessa forma, a parte
mais facilmente compreendida em um desenho a mais regular,
que requer menos simplificao. Quando a figura pregnante, ela
exprime uma caracterstica qualquer de forma forte, de maneira
que se destaque e seja de fcil compreenso.
Formas fechadas, simtricas, regulares atraem o olhar e se

destacam do fundo. Quando a forma pregnante, facilmente
conseguimos separ-la do fundo.
A imagem area da Cidade do Mxico de baixa

pregnncia, o grande nmero de unidades formais e
a organizao visual confusa dificultam a leitura e a
compreenso.
Unidade 1 29
Book.indb 29 18/01/12 11:15

Figura 1.19 - Baixa Pregnncia da forma

Fonte: Mexica Azteca (2010).
O Taj Mahal um exemplo da boa pregnncia da

forma. Podemos observar o uso da continuidade,
da ordem, da proximidade, da semelhana dos
elementos e do equilbrio.
Figura 1.20 - Boa pregnncia da forma

Fonte: Schaeffer (2007).
Seo 5 Os mecanismos de memorizao

A viso humana o sentido que prov o maior volume de
informaes a serem processadas pelo crebro. Estima-se que
metade do potencial de processamento cerebral humano seja
utilizado na organizao de informaes visuais.
Nossos usurios de software percebem as informaes por

meio de um sistema sensorial. Os novos recursos da tecnologia
permitem que essa percepo ultrapasse o sentido da viso,
fazendo uso da audio e do tato.
30
Book.indb 30 18/01/12 11:15

No mecanismo de percepo, olhos e crebro atuam

em conjunto na interpretao das informaes.
Ao percebermos as informaes, elas so codificadas,

processadas, usando-se argumentos de raciocnio, alm de serem
armazenadas na memria para posterior recuperao.
A memria
A memria o mecanismo que nos permite recordar pessoas,
acontecimentos, coisas que aconteceram anteriormente.
Desde que o ser humano iniciou sua trajetria em reas de
pesquisa, o funcionamento e as circunstncias em que ocorrem
a memorizao so arduamente discutidas. Nas ltimas
dcadas, muito se tem estudado a respeito das caractersticas
e do funcionamento da memria humana. Estudos evoluram,
permitindo a compreenso dos meios fisiolgicos de como o ser
humano armazena as informaes, assim como as razes pelas
quais podemos perd-las.
Richard Jrnefelt de
Helsinki, Finland,
conquistou, em 1999,
o Guinessbook, com
um repertrio de 3.000
msicas tocadas no piano,
sem partituras, apenas
com o uso da memria.
Figura 1.21 - Recorde no Guinessbook

Fonte: Guinness World Records (2007).
O uso desse conhecimento para os projetistas de software na

construo de projetos de Web permite uma melhor adaptao
do projeto s caractersticas e delimitaes da memria humana,
considerando suas habilidades e capacidade em termos cognitivos.
A natureza da memria pressupe dois fatores:

a codificao (estratgias de memorizao) e a
recordao.
Unidade 1 31
Book.indb 31 18/01/12 11:15

A codificao vai permitir a maior ou menor facilidade de

se recordar determinada informao. A recordao pode ser
livre ou por reconhecimento (somos expostos a pistas que nos
reavivam a memria). Quando reproduzirmos o que entrou,
recupera-se a memria.
Segundo Shneiderman (1992), a memria humana pode ser
dividida em trs partes, cada uma com diferentes caractersticas:
Memria rpida ou de curto termo;

Memria de trabalho ou sensorial;
Memria permanente ou de longo termo.
Memria de curto termo

A memria de curto termo armazena informaes na memria
em apenas um curto espao de tempo de 10 a 25 segundos, no
mximo. uma memria rpida, recebendo as informaes de
entrada captadas pelos rgos dos sentidos (olhos, ouvidos, olfato
e tato) e os passa ao sistema cognitivo.
Nesta memria, so armazenadas respostas aos estmulos

como: informaes expressas pela fala, movimentos e
aes. As informaes so armazenadas por um perodo de
aproximadamente 10 segundos, armazenando poucas informaes
a cada vez. A memria de curto termo guarda, em mdia, um
nmero de 7 informaes captadas pelos rgos dos sentidos
(BORGES, 2005).
Que tal repetirmos um experimento realizado em 1956 por

Miller? Faa um ditado de 30 palavras com seu amigo mais
prximo. Finalizado o ditado, pea para que ele escreva todas
as palavras que ele consegue recordar.
E ento? Qual foi o resultado?
Esse teste nos d uma ideia da quantidade de informao

armazenada na memria de curto termo!
32
Book.indb 32 18/01/12 11:15

Memria de trabalho ou sensorial

A memria sensorial tambm conhecida como memria de
trabalho. Na memria sensorial so trabalhadas as informaes
captadas pela memria de curto termo e, posteriormente,
enviadas memria permanente. A memria de trabalho
pode armazenar informaes por um tempo, podendo variar
de minutos a dias, mas, mesmo assim, a informao ser
posteriormente eliminada (BORGES, 2005).
Voc j estudou para fazer um concurso ou vestibular?

Cursinhos so especialistas em criar mecanismos para
conectar e organizar informaes de forma que as
mesmas permaneam na memria permanentemente,
permitindo que voc as recupere mais tarde (dias,
meses, anos).
Voc lembra de alguma situao quando estudou para uma

avaliao escolar e uma semana depois no lembrava mais do
contedo? Tente descrever a fisiologia da clula ou os nomes dos
rios que fazem parte da Regio Norte!
Quando o assunto no considerado fundamental ou importante
para o indivduo, o mesmo no estabelece mecanismo de
codificao. Desse modo, esse contedo dificilmente ir
atravessar as fronteiras da memria sensorial. Lembramos do
contedo at realizar a prova, uma semana depois, apesar de
uma boa nota, no lembramos mais do assunto e dificilmente
repetiramos a boa nota sem estudar novamente.
A memria de curto termo recupera informao na memria

permanente. Mas quais mecanismos podemos usar para
registrarmos ou recuperarmos a informao na memria sensorial?
Podemos usar metforas, analogias, regras e tudo aquilo que, de
alguma maneira, chame a ateno do indivduo. Lembram das
famosas musiquetas cantadas por professores de qumica e fsica?
Unidade 1 33
Book.indb 33 18/01/12 11:15

Memria de longo termo

Quando armazenamos uma informao na memria de longo
termo, ela permanece para sempre. Alm da possibilidade de
recuperao, tambm temos a caracterstica relacionada a sua
capacidade. At hoje no temos como quantificar as informaes
que podem ser armazenadas nela ou mesmo seu espao.
Algumas informaes so recuperadas diretamente da

memria permanente para a memria de curto prazo,
sem passar pela memria sensorial.
Isto acontece porque so informaes utilizadas pelo indivduo 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, pois j esto a um longo tempo com voc e no so
necessrios mecanismos de recuperao.

Figura 1.22 - Esquema de funcionamento da memria, segundo Shneiderman (1992)

Fonte: Shneiderman (1992).
Seo 6 Restries de tempo em relao

memorizao
Ben Shneiderman (1992) realizou vrios estudos relacionados ao
mecanismo de memorizao e percepo. Esses resultados nos
fornecem dicas para a boa utilizao da memria em projetos de
interfaces. Nestes estudos, o pesquisador aponta a insatisfao
34
Book.indb 34 18/01/12 11:15

de usurios com mecanismos de interface, em que o tempo de

resposta superior a 2 segundos.
A razo para isto que o ser humano guarda informaes na

memria de curto termo por no mximo 15 segundos. Quando
o usurio espera alm desse tempo, ele precisa recordar o que
estava fazendo, o que torna a interao mais difcil e lenta. O
grande problema que, de acordo com a tarefa, os tempos de
resposta aceitveis so diferentes. Veja os resultados coletados por
Shneiderman (1992) e Galitz (1993):
digitar, movimentar o cursor ou selecionar com o mouse:

50-150 milissegundos;
tarefas simples como o iniciar um browser: menos de 1
segundo;
introduzir dados para buscas de dados: 1-4 segundos;
tarefas complexas como clculos, registros: 8-30 segundos.
O tempo de resposta crucial para um bom projeto, assim como
o uso, ao longo do projeto, de mecanismos de codificao que
permitam tornar o site interessante e inesquecvel.
Dicas para a boa utilizao da memria do usurio

Evite a carga de elementos de multimdia, que levam um
intervalo de tempo longo para serem carregados em conexes
de baixa velocidade. O limite de tempo ideal para operaes
de carga 15 segundos.
Insira indicadores de feedback (barras de progresso,
ampulhetas girando, quando no possvel determinar o
tempo necessrio at o trmino da tarefa) quando o tempo de
processamento longo.
Figura 1.23 - Indicadores de feedback

Unidade 1 35
Book.indb 35 18/01/12 11:15

O sistema deve reagir aps uma ao, em um tempo mximo

de 0,1 segundo.
1,0 segundo o tempo limite para que o fluxo de pensamento

do usurio permanea ininterrupto.
10 segundos o tempo limite para manter a ateno do

usurio focada num dilogo.
10 segundos o tempo que a memria de curto tempo se

mantm carregada com alguma informao captada pelo
sistema cognitivo.
As informaes devem estar visveis ao usurio por um perodo

que permita sua identificao e reconhecimento (pginas que
somem rapidamente sem dar oportunidade de identificao
so esquecidas com a mesma velocidade).
Projetistas devem criar mecanismos para associao de aes.

Por exemplo, para voltar a um ponto anterior, deve haver uma
indicao explcita, como uma tecla Voltar.
Operaes frequentes acabam sendo memorizadas na memria

de longo termo e a escolha de cones para aes deve ser
consistente.
Nos dois exemplos <http://www.americanas.com> e

<http://www.pontofrio.com.br>, o uso do carrinho para
indicar o ato de comprar em sites de e-commerce so
facilmente interpretados, pois j foram memorizados pela
repetio de uso em diferentes sites..
Figura 1.24 - cones

Projetistas devem tomar um cuidado redobrado com

operaes que, pela repetio, tornam-se bvias para o
projetista e acabam no sendo explicadas para o usurio, mas
que, na verdade, no so bvias para ele.
Fonte: Shneiderman (1992).
36
Book.indb 36 18/01/12 11:15

Sntese
Durante a unidade foi possvel perceber a importncia da noo

de unidade da Gestalt na psicologia da percepo e, tambm, a
importante relao sujeito-objeto. Quando percebemos as imagens
ocorre o resultado da interao da luz na retina com a tendncia de
organizar da melhor forma possvel os estmulos externos.
Voc pde perceber, por meio das diferentes leis, que iluses
de tica so criadas pelo uso da forma, que possvel brincar
com ideias de agrupamento, utilizando a proximidade e/
ou similaridade, que no necessrio desenhar uma forma
completamente para que a mesma se torne uma informao para
o usurio (continuidade).
Observou que a lei fundamental da teoria da Gestalt a pregnncia

da forma, em que o objeto apresenta o mximo de equilbrio, clareza
e unificao visual pelo uso da mxima: simplicidade.
Voc tambm aprendeu que a memria organizada em uma

estrutura de trs elementos, a memria de curto termo, longo
termo e de trabalho. Agora j possvel entender a importncia
do tempo de resposta da interface no projeto e da necessidade
de usarmos mecanismos de projeto que chamem a ateno do
usurio, de forma que a informao seja inesquecvel para ele.
Unidade 1 37
Book.indb 37 18/01/12 11:15

Atividades de autoavaliao
1) Qual o significado da Pregnncia, para um indivduo, no mecanismo de

percepo?
2) Em que situao a lei da semelhana e da proximidade so

complementares em um projeto de pgina? Procure um exemplo desse
aspecto na internet e cite o endereo.
3) Procure um exemplo do uso da lei do fechamento em logotipos ou

pginas na internet. Cite o exemplo e o respectivo endereo.
38
Book.indb 38 18/01/12 11:15

4) Relacione as formas abaixo com as leis da Gestalt (pregnncia, figura/

fundo, proximidade, semelhana, continuidade, fechamento):
a) b)
c) d)
e) f)
g)
Unidade 1 39
Book.indb 39 18/01/12 11:15

5) Relacione os temas relacionados ao armazenamento da memria:

[A] Memria de curto termo;
[B] Memria de trabalho;
[C] Memria de longo termo;
a) ( ) armazena a informao por um espao de 10 a 25 segundos;

b) ( ) permite o armazenamento de informaes por um longo
perodo;
c) ( ) armazena informaes por horas e at dias;
d) ( ) a mem ria responsvel por enviar informaes para a

memria permanente;
e) ( ) armazena informaes relacionadas aos sentidos, como fala,

audio;
f) ( ) a memria responsvel por recuperar informaes da

memria permanente;
g) ( ) armazena, no mximo, sete informaes e as apaga da

memria rapidamente.
6) Em termos de projeto de interface Web, quais artifcios voc pode

utilizar para sensibilizar o usurio, fazendo com que ele se recorde do
dilogo existente na sua pgina?
40
Book.indb 40 18/01/12 11:15

Saiba mais
Conhea mais sobre as leis da Gestalt em:
FILHO, Gomes J. Gestalt do objeto. So Paulo: Escrituras, 2003.
Pesquise publicaes sobre Gestalt. Busque por Sociedade para

a teoria de Gestalt e suas aplicaes ou, ainda, Gestaltismo e
Percepo.
Unidade 1 41
Book.indb 41 18/01/12 11:15

42
Book.indb 42 18/01/12 11:15

2
unidade 2
Cores na web
Entender o mecanismo fisiolgico de reconhecimento
das cores.
Perceber os cuidados necessrios para o uso da cor na

web.
Compreender os efeitos e as influncias da cor durante
o projeto de interface.
Sees de estudo
Seo 1 O que cor?
Seo 2 A viso humana da cor
Seo 3 Teoria das cores
Seo 4 Sistemas de representaes das cores
Seo 5 Definio da cor de fundo da pgina
Seo 6 Recomendaes para o uso de cores na web
Seo 7 Cores seguras da web
Book.indb 43 18/01/12 11:15

Para incio de conversa

A unidade Cores na Web traz tona a importncia do uso da cor
no projeto de websites. Muitas vezes consideramos a cor apenas
como um fator esttico, mas se voc observar os objetos que voc
usa no cotidiano, vai perceber aspectos interessantes: o boto 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 mnimo trs cores, por qu?
O uso da cor proporciona uma importante dimenso na

comunicao visual, se a utilizamos com sabedoria, melhora a
interpretao 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 deciso. Qual cor? Quantas cores? Quais combinam? As cores
da empresa, o gosto do cliente, nossas decises durante o projeto
nos colocam em ciladas virtuais.
As escolhas relacionadas ao uso da cor vo alm dos meros

aspectos pessoais. O uso eficiente da cor depende de fatores que
variam de particularidades como: recursos visuais disponveis,
fatores humanos e do prprio 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.
Seo 1 O que cor?

Em 1666, Newton descobriu que a luz branca do sol pode ser
decomposta com o auxlio de um prisma de cristal em radiaes
de larguras variveis. A cor que percebida pelos olhos a
refletida pelo objeto no qual o raio solar incide. Voc pode dizer
que o branco consiste na reunio de todas as cores, j o preto a
ausncia de cor.
44
Book.indb 44 18/01/12 11:15

A impresso dessas radiaes sobre a retina do olho o que

distinguimos como cor. A cor pode ser definida como um
comprimento de onda.
O comprimento de onda para o vermelho claro de 635 a 740

nm (nanmetros), para o verde claro de 520 a 565 nm e para o
azul claro de 450 a 500 nm.
Quando voc v um arco-ris, voc est vendo a luz solar

decomposta nessas 7 cores. Voc sabe o que funciona
como prisma nesse caso? As gotculas de gua!
Figura 2.1 - Decomposio da luz

Fonte: Tavares (2011).
Seo 2 A viso humana da cor

O olho humano o rgo responsvel pela recepo da viso.
O olho formado pelo globo ocular, que uma esfera com
aproximadamente 2,5 cm de dimetro. Quando voc fixa o olhar
sobre um objeto, a imagem deste objeto atravessa a crnea, depois
passa pela ris - que responsvel por regular a quantidade de luz
recebida por meio da pupila.
Unidade 2 45
Book.indb 45 18/01/12 11:15

Figura 2.2 - Globo Ocular

Fonte: Missagia (2010).
Aps atravessar o cristalino, a imagem focada sobre a retina

(invertida, depois o crebro acerta isto!). Voc conhece o
mecanismo de uma mquina fotogrfica? Nosso globo ocular
pode ser comparado a uma mquina fotogrfica, onde o cristalino
seria a objetiva, a ris o diafragma e a retina seria a placa ou
pelcula. Quando a imagem chega ao cristalino, ela ajustada,
sendo levada para trs ou para frente, permitindo que ela se
projete sobre a retina.
Nossa retina est provida de duas espcies de clulas

sensveis luz: os bastonetes e os cones.
Cones e bastonetes
Os bastonetes permitem a viso para intensidades luminosas
muito pequenas (noite, crepsculo). Recebem apenas impresso de
luminosidade e nenhuma impresso cromtica. Por isso, quando
samos da cama noite, no escuro, os objetos coloridos aparecem sem
cor, nossa viso est por conta dos bastonetes. Os bastonetes (120
milhes de clulas) no percebem diferenas finas de forma e cor.
Os cones permitem a impresso colorida em claridades mdia e

grande (viso diurna), a imagem fornecida mais ntida e detalhada.
Existem trs tipos de cones (trs milhes de clulas) no olho humano,
cada um distingue uma cor diferente: vermelho, verde ou azul.
Voc sabia que a quantidade de cones vermelhos,

verdes ou azuis 40:20:um? por esse motivo que sua
sensibilidade para o azul muito menor do que para
o vermelho. Em outras palavras, voc v um nmero
maior de tons de vermelho do que de azuis.
46
Book.indb 46 18/01/12 11:15

Campo visual
A capacidade de percepo das cores est diretamente relacionada
ao campo visual. A distribuio das clulas fotoreceptoras no
uniforme. Olhe a figura 2.3, na rea central existem apenas
clulas do tipo cone (1), no campo central (2) existem clulas do
tipo cone e bastonetes, na rea perifrica encontram-se apenas
bastonetes (3).
Na regio da fvea (1) ocorre a projeo da imagem do objeto

focalizado. Ns enxergamos com nitidez somente objetos focados
na fvea. Essa permite que a luz atinja os fotorreceptores sem passar
pelas demais camadas da retina, maximizando a acuidade visual.
Os bastonetes, ausentes na fvea, so encontrados principalmente a capacidade de o

olho distinguir entre
na retina perifrica (2,3), sendo responsveis pela transmisso de
dois pontos prximos
informaes para as clulas ganglionares. e depende de diversos
fatores, em especial
No fundo do olho est o ponto cego, insensvel luz, no h do espaamento dos
cones nem bastonetes, dele emergem o nervo ptico e os vasos fotorreceptores na retina
sanguneos da retina. e da preciso da refrao
do olho.
Figura 2.3 - Campo Visual

Fonte: Winckler, Borges, Basso (2000).
Segundo Winkler, Borges e Basso (2000), a rea central da

viso (1) a responsvel pela leitura e deve receber mxima
percepo e contraste. O campo central (2) deve contrastar
com a rea central, com uma relao de 2:1, e o campo visual
perifrico no deve exceder 10:1. A rea perifrica percebe
apenas movimentos e vultos.
Unidade 2 47
Book.indb 47 18/01/12 11:15

Voc j chegou ao cinema aps o incio da sesso?

Saiu da antessala com muita claridade e entrou na sala
de projeo exatamente no momento em que a cena
estava muito escura? Como voc se sentiu? Aquela
cegueira momentnea causada pela acomodao
dos cones e pelo aumento da sensibilidade dos
bastonetes. O inverso tambm acontece, imagine voc
saindo de uma sala com baixa luminosidade para um
gramado em um dia de sol intenso.
Formao de imagens coloridas na retina

Durante todo o processo da percepo visual, o cristalino se
modifica, adapta-se, de modo a focalizar sobre a retina a imagem
do objeto visualizado. A acomodao e a convergncia do
cristalino dependem da cor do objeto visualizado. Isto acontece
porque as ondas verde, azul e vermelha convergem a diferentes
distncias da retina.
Na figura 2.4 possvel observar que as ondas vermelhas

convergem alm da superfcie da retina, enquanto os
comprimentos de ondas 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
prximo do observador. Quando focalizamos um objeto azul, o
cristalino fica menos convexo (mais relaxado), como se o objeto
estivesse distante (WINCLER; BORGES; BASSO, 2000).
Figura 2.4 - Foco sobre a retina

Fonte: Borges (2003).
48
Book.indb 48 18/01/12 11:15

O uso de cores intensas causa fadiga visual justamente pela

necessidade constante de adaptao 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 deficincia na viso que
dificulta a percepo de uma ou de todas as cores (na sua variao
mais comum o daltnico no distingue o vermelho do verde)?
O daltonismo uma deficincia quase que

exclusivamente masculina, para 10% da populao
masculina apenas 1% das mulheres apresentam o
problema. No projeto Web, temos que considerar essa
parcela da populao, fazendo uso da luminncia, de
forma a permitir a diferenciao da cor.
Que tal voc verificar sua acuidade visual? Qual nmero voc v
nas esferas? Esse teste tenta detectar a deficincia da percepo
da cor o daltonismo.
Figura 2.5 - Teste de viso

Fonte: Chostakovis (2010).
Imagino que agora voc esteja se perguntando: como o indivduo

daltnico diferencia as luzes verdes e vermelhas do semforo, j
que, para esse indivduo, as duas cores so apenas variaes do
cinza? Em tempo, os nmeros nas esferas so o 5 e o 6.
Unidade 2 49
Book.indb 49 18/01/12 11:15

Seo 3 Teoria das cores

Muitas teorias procuram explicar o fenmeno da viso
cromtica, mas todas elas se baseiam na observao de que o
olho humano pode detectar quase todas as graduaes de cores,
quando as luzes monocromticas vermelho, verde e azul so
misturadas apropriadamente.
As cores se dividem em trs grupos: primrias,

secundrias e tercirias.
Cores primrias
So as cores que no podem ser formadas por nenhuma mistura.
So elas: azul, amarelo e vermelho. Quando misturadas de forma
varivel, produzem todas as cores do espectro.
Cores secundrias
So formadas por duas cores primrias misturadas em partes iguais.
Cores tercirias
So as intermedirias entre uma cor secundria e qualquer das
duas primrias que lhe do origem (PEDROSA, 1982).
Observe a figura 2.6, construda por Fabris, em 1973. As cores

primrias esto no centro, as secundrias (verde, laranja e violeta)
no segundo tringulo. O terceiro ciclo se complementa com as
cores tercirias.
50
Book.indb 50 18/01/12 11:15

Figura 2.6 - Crculo das cores

Fonte: Frabris; Germani (1973).
Cores complementares
So as cores opostas no disco de cores. O vermelho
complementar do verde, o azul complementar do laranja.
As cores complementares so usadas para dar fora e equilbrio a um

trabalho, criando o mximo de contraste. As cores complementares
so as que do mais contrastes entre si, se queremos destacar um
amarelo, devemos colocar junto dele um violeta.
Figura 2.7 - Cores complementares

Unidade 2 51
Book.indb 51 18/01/12 11:15

Cores anlogas
So as que aparecem lado a lado no disco de cores. So anlogas
porque h nelas uma mesma cor bsica.
O amarelo-ouro e o laranja-avermelhado tm em
comum a cor laranja. Elas so usadas para dar a
sensao de uniformidade, profundidade, movimento,
luz e sombra.
Podemos considerar anlogas trs cores que se apresentam em

sequncia, no crculo das cores, como: o laranja, laranja-vermelho
e vermelho.
Figura 2.8 - Crculo das cores

Fonte: Winckler, Borges, Basso (2000).
Figura 2.9 - Cores Anlogas

O contraste das cores
A sensao da cor depende de trs parmetros: o

croma, a intensidade e o matiz (GUIMARES, 1997).
Matiz
Segundo preceitos da colorometria, o matiz uma das trs
propriedades da cor. Ela permite classificar e distinguir uma cor
de outra. As outras duas propriedades que apoiam essa distino
so a saturao e a luminosidade.
52
Book.indb 52 18/01/12 11:15

Quando estudamos o matiz a partir da teoria das cores, o matiz

se refere cor pura, sem adio de branco ou preto.
Croma
a qualidade especfica de saturao da cor, que indica o seu grau
de pureza. Mas o que saturao? Imagine um copo de leite
puro. Agora imagine voc adicionando a esse leite cinco colheres
de chocolate em p. O leite vai ficar bastante escuro. Agora voc
comea adicionando leite a essa 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,
provvel que o lquido fique quase branco.
Podemos dizer que a saturao refere-se quantidade

de branco em uma cor.
Resumindo, a saturao indica a maior ou menor intensidade da

tonalidade, se a cor pura ou esbatida. A cor saturada (pura) no
contm a cor preta nem a branca.
Mas quando ocorre ao contrrio e aumentamos a saturao, a
imagem acaba por ficar quase com um aspecto irreal.
Luminosidade
a quantidade relativa de claro ou escuro em uma escala do preto
ao branco. fundamental para a percepo de profundidade.
Contraste
a base distino da forma, tamanho, posio, volume e
aparncia dos objetos. Ele pode ser obtido por meio de diferenas
do matiz e iluminao. O contraste pode ser usado para alterar a
sensao de tamanho entre objetos (GUIMARES, 2007).
Unidade 2 53
Book.indb 53 18/01/12 11:15

Um exemplo quando queremos parecer mais magros e usamos

roupa preta. As cores contrastantes so diretamente opostas no
disco das cores; como o azul e o amarelo.
Figura 2.10 - Contraste das cores

Fonte: Color Voodoo (2010).
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.
Seo 4 Sistemas de representaes das cores

As cores so representadas de maneira diferente se o dispositivo
reflete ou emite luz. Objetos que no emitem luz refletem uma
parte da luz que incide sobre eles e absorvem a outra parte.
A sensao da cor relativa e varivel, segundo a natureza da fonte

luminosa e do objeto. Se uma laranja lima iluminada por uma luz
azul, essa se transforma em verde; nesse caso, a reflexo do amarelo
se soma da luz azul e ambas as cores so refletidas misturadas.
Assim, os dispositivos que representam cores seguem

o modelo subtrativo, quando no emitem luz, e
aditivos, quanto emitem luz.
Dispositivos que misturam pigmentos coloridos (impressora,

Scanner), seguem o modelo subtrativo, cujas cores primrias so:
amarelo, magenta e ciano. A mistura de todas as cores produz
o preto. Dispositivos baseados na emisso de luz (monitor,
datashow) seguem o modelo aditivo, cujas cores primrias so
vermelho, verde e azul-violeta. O branco obtido pela mistura de
todas as cores.
54
Book.indb 54 18/01/12 11:15

So modelos aditivos o HSV, o HLS e RGB. Entre os modelos

subtrativos, o mais empregado o CMYK. O sistema RGB o
padro de cores na WWW. um sistema cartesiano (x, y, z), onde
cada cor primria (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). Ele
utilizado em dispositivos de impresso.
H diferenas entre cores representadas em monitores do
mesmo padro RGB. Diversos fatores causam as diferenas,
entre eles, o gamut, ou seja, o grau de contraste entre os valores
intermedirios de cinza de uma imagem. O valor de gamut do
Macintosh de 1.8 e de um PC de 2,2. Imagens geradas em um
Mac parecero muito mais escuras na plataforma PC, enquanto
as geradas no PC parecero apagadas e sem brilho no Mac.
Seo 5 Definio da cor de fundo da pgina

Segundo a teoria de deteco de sinais, o crebro humano
interpreta e organiza a informao que recebe em forma tima,
Signal detection theory,
quando no campo visual h um nmero mnimo de cores e um modelo estatstico
formas: quanto menos rudo, mais claro o sinal. elaborado na dcada de 50.
Quando voc escolhe o padro de cores de um site importante

observar alguns aspectos relacionados por Shneirman (2000):
Assunto da pgina: um site voltado ao entretenimento?

um site voltado para venda de imveis?
Pblico-alvo: h algum fator de homogeneizao?
Sexo (maioria homens ou mulheres), idade ( uma
pgina que pretende atingir o pblico infantil ou para
jovens procurando diverso noturna), experincia (os
usurios so funcionrios de uma empresa com ou sem
experincia no uso da internet/intranet)? Existem outros
fatores a serem considerados? Ou os usurios formam
uma plateia altamente heterognea? (usurios de um
sistema de caixa eletrnico de um banco, por exemplo)
Unidade 2 55
Book.indb 55 18/01/12 11:15

Ambiente: qual o grau de estresse ao qual os usurios

esto submetidos (elevado, como em um sistema de
bolsas de valores?)? Qual a luminosidade do ambiente?
Veja, a seguir, alguns exemplos.
Figura 2.11 - Website da Disney

Fonte: Disney (2010).
Figura 2.12 - Website da banda Sepultura

Fonte: Sepultura (2010).
A cor bsica de fundo (o Matiz) da pgina inicial do site Disney

azul. Essa uma cor que, almde transmitir confiana, calma
e estabilidade, perfeitamente visvel para a grande maioria da
populao. Note que, apesar do impacto visual, no h muitas
56
Book.indb 56 18/01/12 11:15

cores: fora o azul bsico,utilizaram-se o verde, branco e laranja

(todas cores positivas, emocionais). O negro foi abolido da pgina.
As reas com menor saturao da cor bsica esto nas bordas.
O site do grupo de rock Sepultura basicamente negro.Combina

perfeitamente com o grupo e com a expectativa dos usurios do
site, fs da banda. Note que, novamente, h poucas cores.
O site Mais Voc adequado ao consumidor principal: a

mulher. Cores suaves, femininas, esteticamente limpo.
Figura 2.13 - Website Mais Voc

Fonte: Mais Voc (2007).
Observe, agora, duas verses diferentes de uma mesma pgina:
Figura 2.14 - Website Lancome

Fonte: Lancme (2007).
Unidade 2 57
Book.indb 57 18/01/12 11:15

Figura 2.15 - Website Lancome

Fonte: Lancme (2007).
A verso figura 2.14 suave, delicada, de uma feminilidade

pouco agressiva. J a verso da figura 2.15 modificou
completamente a mensagem: a feminilidade agressiva, as
cores so fortes, vibrantes, at o vermelho (associado paixo,
ao sexo, ao amor), que no estava presente em nenhum dos seus
matizes na verso anterior. Observe como a figura 2.14 parte
do conjunto e no cria desvio de ateno. J a figura 2.15 provoca
tanto impacto que quase impossvel observar o todo sem deixar
de notar a foto, que surtir um impacto muito maior no leitor.
Observe que alm das cores e da postura das imagens, tambm o
alinhamento do texto foi modificado.
Nos 5 sites apresentados, observamos que a escolha das cores

considera, principalmente, o perfil do pblico-alvo e a economia
na quantidade de cores. Marmion (2005) sugere ser possvel
estabelecer as seguintes orientaes:
utilize a menor quantidade possvel de cores para o fundo

de seu site;
se for utilizar mais de uma cor, utilize cores prximas do
espectro, que no criem contraste (fator de distrao);
a percepo da cor afetada pela luminosidade do
ambiente. Considere as fontes de iluminao naturais
e artificiais do local;
58
Book.indb 58 18/01/12 11:15

se o fundo uma imagem, considere que, durante o

tempo de carga, elementos frontais (foreground) podem
no ser visveis por falta de contraste;
utilize fundos simples para no comprometer a
compreenso da pgina, a legibilidade do texto e o tempo
para ser carregada;
o fundo no deve chamar mais ateno do que a
informao.
Figura 2.16 - Site da Banda Buenos Aires

Fonte: Banda Buenos Aires Rock (2010).
Na figura acima, o fundo utilizado pela banda chama mais

ateno do que o texto com as informaes da banda. A
legibilidade prejudicada dificultando a leitura e a ateno.
Seo 6 Recomendaes para o uso de cores na Web

Como voc j viu, as cores exercem diferentes efeitos fisiolgicos
sobre o organismo humano e tendem a produzir vrios juzos e
sentimentos.
A cor um elemento fundamental em qualquer

processo de comunicao e merece uma ateno
especial.
Unidade 2 59
Book.indb 59 18/01/12 11:15

So apresentadas, a seguir, algumas recomendaes sobre o

uso da cor, coletadas em Parizotto (1997), Winckler (2002),
Robertson (1993) e Shneidermann (2000):
Recomenda-se o uso de um grupo limitado Desse modo, as pginas de um mesmo site estaro
de cores, dando ao usurio a opo de mud- mais propensas a terem um padro consistente.
las, mximo de cinco mais ou menos duas.
Use a cor como uma forma de informao Evite confiar na cor como o nico meio de expressar um
adicional ou aumentada. valor ou uma funo particular.
Use cor para realar ao invs de usar

sublinhado (e use sublinhado ao invs de Restrinja o uso do sublinhado para links, para no
itens piscando). confundir o usurio.
Sempre que possvel, evite usar cores muito As cores muito quentes parecem pulsar na tela e ficam
quentes, tais como o rosa e o magenta. difceis de focalizar.
Se for usado um fundo colorido, selecione as

cores do texto de modo a obter o contraste Isso aumenta a visibilidade e a legibilidade do texto.
mais forte entre o texto e o fundo.
O uso mnemnico da cor empregado respeitando os

esteretipos para criar fortes associaes para ajudar no
reconhecimento, na lembrana e no tempo de busca. No
Recomenda-se o uso mnemnico da cor. site Submarino, percebemos a diviso das sees fazendo
uso da cor para diferenci-las, a seo de brinquedos
rosa, a de eletrnicos azul, a seo abaixo a de games.
Figura 2.17 - Site Submarino

Fonte: Submarino (2010).
60
Book.indb 60 18/01/12 11:15

Esses elementos atraem a ateno do usurio e o seu

Use cores brilhantes e contrastantes com emprego deve ser reservado para reas importantes,
cautela. caso contrrio, o usurio pode achar mais difcil saber
para onde olhar e fica confuso.
Use cores monocromticas para o texto, As cores monocromticas so mais ntidas, aumentando
sempre que for possvel. a legibilidade e visibilidade do texto.
Recomenda-se o uso de uma cor neutra para As cores neutras (por exemplo, cinza-claro) aumentam a
fundos. visibilidade das outras cores.
Para relaes figura-figura e muitas figura-fundo, fortes

No use simultaneamente alto croma e cores contrastes de vermelho/verde, azul/amarelo, verde/azul
que estejam muito distantes no espectro solar. e ve rmelho/azul criam vibraes, iluses de sombras e
imagens posteriores.
Vermelho: pare, perigo, quente, fogo;

Amarelo: cuidado, devagar, teste;
Verde: ande, OK, livre, vegetao, segurana;
Azul: frio, gua, calmo, cu;
Use um cdigo de cores consistente e familiar,
com referncias apropriadas. Cores quentes (amarelo, laranja, vermelho, violeta):
ao,
resposta requerida, proximidade;
Cores frias (azul, turquesa, verde-mar,verde-alface):
status, informao de fundo, distncia;
Cinzas, branco e azul: neutralidade.
No que concerne ao aprendizado e compreenso, a cor

superior ao preto e ao branco em termos do tempo
Use a cor para aumentar a informao de processamento e de reaes emocionais, mas no h
mostrada em preto e branco. diferena na habilidade em interpretar a informao.
A cor mais aprecivel e a memria para informao
colorida tambm parece ser superior quela em preto e
branco.
Recomenda-se projetar primeiramente em A cor aumenta o processamento cognitivo e visual de

preto e branco e, ento, adicionar a cor. uma informao que funciona bem em preto e branco,
pois ajuda a localizar, classificar e associar imagens.
O uso intensivo de piscar (blink) um texto ou imagem

causa fadiga visual, dependendo das cores usadas para
Evite o uso de blink fundo e texto ou imagem, o olho precisa reposicionar
o correspondente sensor da cor a ser usada, em cada
instante do efeito de piscar, ou, dependendo das cores
usadas, reposicionar o foco a cada instante.
Unidade 2 61
Book.indb 61 18/01/12 11:15

Fundo preto no recomendado, pois h poucas cores

que contrastam e ele causa cansao visual. No caso
de impresso em P & B, a cor usada para o texto ou
Evite fundos escuros imagem pode ser convertida para escuro e se confundir
com o fundo (alm de gastar grande quantidade de
toner/tinta).
Pode-se acrescentar cores para casos alternativos, como

(mantendo-se os padres):
Link ainda no visitado, que fica na mesma pgina
No use cores alternativas para links (ncora) verde;

Link j visitado na mesma pgina rosa;
Link para o nodo hierarquicamente superior - laranja/
amarelo mbar.
Use as cores brilhantes em reas pequenas e cores

No torne a tela muito brilhante ou escura suaves em reas maiores.
Procure evitar cores que juntas causam verde/vermelho; verde/azul;

iluses ticas, como: azul/amarelo; vermelho/azul;
preto/branco; preto/verde;
branco/preto; ciano/magenta;
amarelo/preto; branco/marrom;
Use combinaes legveis para texto/fundo: verde/preto; amarelo/marrom;
branco/vermelho; verde/marrom;
preto/amarelo; ciano/marrom;
magenta/marrom.
use azul para reas grandes ou formas pequenas; azul

bom para fundo de tela;
Use as cores da fvea e perifricas
apropriadamente; a fvea fica na regio use vermelho e verde no centro do campo visual e no
central da retina; composta de cones na periferia;
sensveis ao detalhe:
use preto, branco, amarelo e azul na periferia do
campo visual.
Lembrar que cor mal utilizada pior do q ue no usar cores.
62
Book.indb 62 18/01/12 11:15

Seo 7 Cores seguras da web

Atualmente, temos computadores capazes de mostrar milhes de
cores simultaneamente. Isto nem sempre foi assim. At a dcada
de 90, a maioria dos equipamentos apresentava apenas 256 cores
diferentes de cada vez. Nesse caso, todas as cores eram simuladas
por essas 256, causando manchas e distores. Dessas 256, 216
so chamadas de cores seguras da web.
A utilizao das cores seguras feita pela utilizao de cores

cujos cdigos hexadecimais usam combinaes dos nmeros,
indicados no quadro seguinte: Nmeros hexadecimais
possuem base 16. A
denominao hexa vem
RGB 00 51 102 153 204 255 de hexa = 6 e deci = 10
que indica a base 16. Cada
Hex 00 33 66 99 CC FF nmero hexa pode ter um
valor de 0 a 9 ou A, B, C, D,
E, ou F. O nmero hexa
representado por quatro
bits de dados binrios.
Consulte no anexo 1, a figura 2.18 referente ao quadro Ex: o nmero decimal
1 representado por 1
que contm as 216 combinaes seguras, com os seus
em hexadecimal e 0001
cdigos hexadecimais. em binrio, j o nmero
10, representado por A
no cdigo hexadecimal
e 1010 em binrio, 15
representado pelo F e 1111
pelo binrio.
Sntese
Ao concluir esta unidade, voc traz como bagagem conceitos

relacionados teoria das cores e aspectos de sua utilizao. Voc
aprendeu que a viso humana da cor depende de aspectos fisiolgicos
e sua utilizao eficiente deve considerar essas limitaes.
Durante o estudo, verificou-se que as cores so reconhecidas

em posies diferentes da retina, antes (azul), depois (vermelho)
e sobre a retina (verde). Este reconhecimento faz com que o
usurio, ao se deparar com interfaces onde ocorre a mistura
destas trs cores, sinta fadiga visual.
Unidade 2 63
Book.indb 63 18/01/12 11:15

Ao escolher a cor da pgina, importante determinar o assunto

da pgina, o pblico-alvo e o ambiente no qual o site ser
utilizado. A determinao desses fatores apoia a escolha das cores
que interferem diretamente na aceitao do seu site pelo cliente.
O uso de contrastes, luminosidades e uma combinao assegura

melhorias na comunicao com o internauta, transformando a cor
em estmulo visual.
A cor pode ser usada para agrupar itens, transmitir informaes e

alertar o usurio sobre uma determinada situao. Para que essas
aes ocorram efetivamente, foram apresentadas, na unidade,
algumas recomendaes que procuram preservar o bom uso da
cor na web, relacionadas ao nmero de cores a serem utilizadas,
caractersticas de fundos considerados desejveis, utilizao de
cdigos de cores familiares entre outros.
Outro aspecto observado na unidade foi o uso da paleta de

cores seguras para web (216 combinaes). Esse uso garante ao
projetista que o usurio enxergue na tela de seu computador as
cores que voc est utilizando no projeto.
1) A acuidade visual dependente de vrios fatores. Quais so eles?
64
Book.indb 64 18/01/12 11:15

2) Relacione as propriedades abaixo com suas respectivas clulas: (B) para

bastonetes e (C) para cones:
a) ( ) permitem ao ser humano a viso diurna de forma ntida e colorida;
b) ( ) no fornecem nenhuma impresso cromtica;
c) ( ) so as clulas responsveis pela viso com baixa luminosidade;
d) ( ) so clulas que se distinguem por 3 tipos: o vermelho, o verde

e o azul;
e) ( ) estas clulas aparecem em grande nmero na rea perifrica do
olho;
f) ( ) estas clulas aparecem em grande nmero na rea central;
g) ( ) preenchem completamente a regio da fvea, a rea

responsvel pela leitura.
3) Como so formadas as cores secundrias
4) Qual a situao em que pode ser interessante o uso da cor

complementar ou da cor anloga?
5) Quais os trs fatores que devem ser considerados como fundamentais

na escolha das cores de um site?
Unidade 2 65
Book.indb 65 18/01/12 11:15

Saiba mais
No deixe de pesquisar na internet o site Color in Motion

O site uma experincia interativa sobre a comunicao e
o simbologismo da cor. Voc vai aprender em que situaes
determinadas as cores expressam uma informao, suas cores
complementares e como elas so utilizadas em diferentes pases.
Que tal brincar com um aplicativo que gera esquemas e

combinaes 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 combinao tica. Esta ferramenta Color Scheme est
disponvel em <http://wellstyled.com/tools/>.
Veja tambm Color, Contrast & Dimension, no seguinte

endereo: <http://poynterextra.org/cp/colorproject/color.html>.
Divirta-se !!
66
Book.indb 66 18/01/12 11:15

3
unidade 3
Etapas do processo de design
Entender o complexo processo de planejamento do
processo de design de um site.
Entender a importncia da documentao do processo

de desenvolvimento do design e implementao de
um site.
Esclarecer a importncia do levantamento de
informaes nas etapas de planejamento e definio.
Conhecer os artefatos que podem ser usados como

marcos para o controle do desenvolvimento do
projeto.
Sees de estudo
Seo 1 Iniciando o processo de design
Seo 2 Definio e planejamento
Seo 3 Detalhamento da arquitetura e design
Seo4 Construo e manuteno
Book.indb 67 18/01/12 11:15


As etapas de um processo de design so muitas vezes tortuosas.
Identificar quais profissionais so necessrios ao projeto, os custos,
o que deve ser analisado para iniciar o processo de design so
perguntas que ficam sem respostas em muitas equipes, e que, por
vezes, so esquecidas e, ao final do projeto, relembradas com pesar.
Quando voc inicia o projeto importante saber quais os passos

que sero seguidos, o quanto e o que falta para acabar. Por
outro lado, quando iniciamos, precisamos ter certeza de que no
esquecemos de avaliar nenhum item que possa fazer diferena em
termos de projeto, tempo e custo.
Nesta unidade, voc vai ter algumas dicas de como documentar

seu projeto, levantando quesitos que devem apoi-lo no controle
da qualidade, dos custos e proporcionando, j na etapa inicial,
uma anlise dos riscos envolvidos no desenvolvimento.
Seo 1 Iniciando o processo de design

O uso da internet e de todos os seus recursos considerado
a nova plataforma crtica do comrcio, da comunicao e da
informao. O desenvolvimento de um site traz diferentes
consequncias para a organizao, que vo de aspectos financeiros
a relaes pblicas.
Esse esforo de desenvolvimento pode produzir solues

vencedoras, como o caso do site de e-commerce <www.submarino.com>,
ou desastrosas, pela falta de planejamento ou mesmo recursos, que
acabam por ser desprezados pelo usurio.
O processo de design uma tarefa complexa e

dependente de vrios fatores. Uma estratgia que
funciona bem para um site pode estar totalmente
errada para outro.
68
Book.indb 68 18/01/12 11:15

Muitas empresas tm investido no uso de equipes com

conhecimentos multidisciplinares como tecnologia, marketing
e design. Essas equipes procuram criar estratgias corporativas
eficazes e inovadoras para aplicao na web, visando a atingir, de
forma satisfatria, o pblico-alvo.

Figura 3.1- Modelo de interaes entre membros de equipes interdisciplinares de desenvolvimento Web
Fonte: Adaptado de Bishu (2000).
Na figura acima, Bishu (2000) sugere grupos de especialidade,

como: clientes, designers, desenvolvedores e engenheiros de
usabilidade, trabalhando cooperativamente na produo do site.
O especialista de usabilidade colocado como um

mediador de informaes, garantindo a integrao
entre os membros da equipe e um processo de design
consistente com o modelo de interao do usurio.
O uso de diferentes vises e a participao de elementos, que

representem a populao que far uso do site, enriquecem o projeto.
Aps experincias positivas e negativas na produo de sites,
percebe-se que, alm da diversidade de elementos humanos em
diferentes especialidades, existe a necessidade de se observar um
modelo de desenvolvimento de forma planejada e disciplinada.
Antes de colocar a mo na massa, voc deve estar preparado

para seguir etapas que permitam a produo de artefatos
(subprodutos de etapas), que possam servir como sinalizadores da
evoluo do desenvolvimento do site. Esses artefatos, ao serem
inseridos em um cronograma, proporcionam uma viso global do
projeto, sua evoluo e desvios.
Unidade 3 69
Book.indb 69 18/01/12 11:15

Lynch e Horton (2002) descrevem algumas etapas norteadoras

de um modelo para o processo de desenvolvimento de um website:
a fase de definio e planejamento;

a definio da arquitetura da informao;
o design do site;
a construo do site;
a avaliao e manuteno do site.
A cada uma dessas etapas, novas caractersticas, artefatos e

definies so adicionados ao projeto. Que tal explorar cada uma
dessas etapas nas prximas sees?
Seo 2 Definio e planejamento

Quando voc inicia um projeto web, algumas perguntas e
respostas so fundamentais. A partir dessas definies iniciais,
ideias surgem e decises so tomadas por todo o curso do projeto.
Um exemplo disso a definio clara da misso do site e

seus objetivos. A partir deles voc est, automaticamente,
direcionando todo o futuro do site.
Descrever esses aspectos sucintamente em um documento que

contenha as ideias iniciais do planejamento evita que sua memria
pregue peas como o esquecimento de prioridades ou mesmo
aquela situao constrangedora, em que voc no lembra o motivo
pelo qual o formulrio inicia com um determinado campo.
DOCUMENTAR PRECISO!!!
Organize as informaes do projeto de forma clara,
concisa e acessvel a todos os colaboradores da linha
de produo do site.
O plano documentado evolui por meio de especializaes para

um documento de especificao. A especificao permite rastrear
70
Book.indb 70 18/01/12 11:15

decises de design, permitindo o controle do projeto e a medio

do progresso do desenvolvimento.
Para voc iniciar o seu trabalho de planejamento e definies

necessrio que passemos por 3 pontos fundamentais:
identificar os objetivos do site;

identificar o pblico-alvo do site;
identificar as necessidades tcnicas relacionadas
produo do site.
A identificao dos objetivos

Antes de iniciarmos o projeto de design de um site, fundamental
identificarmos os seus objetivos (educao, entretenimento, vendas,
religioso...). Ao definirmos claramente os objetivos do site e sua
misso, estamos determinando fortes indicativos do seu pblico-
alvo, contedo, funo e identidade do site.
Figura 3.2 - Site Unimed

Fonte: Unimed (2005).
A identificao do objetivo, que servir como baseline do projeto,

no deve constar apenas na documentao inicial do projeto,
mas, tambm, na pgina de seu cliente. Observe que, na pgina
principal do site da Unimed, no fica claro o objetivo principal
da empresa. Plano? Que tipo de plano? De previdncia? Seguro?
Sade? Casa prpria?
Unidade 3 71
Book.indb 71 18/01/12 11:15

Figura 3.3 - Site Brognoli

Fonte: Brognoli Imveis (2005).
No site da Brognoli em Florianpolis - SC, j na primeira

pgina, o objetivo da empresa fica claro, pois remete ao seu papel
como empresa do segmento imobilirio.
O objetivo o resultado pretendido. O fim projetar

uma mensagem para um pblico especfico, na
esperana de obter dele a resposta desejada.
Conforme Lynch e Horton (2002), podemos iniciar a definio

de metas do site com perguntas simples, como:
Qual a misso da organizao?
Como a criao de um site pode apoiar a misso de sua

organizao?
Qual a atitude que voc espera dos internautas que visitarem
sua pgina?
Como voc pretende medir o sucesso do site?
Quais estratgias voc pretende utilizar no site para atingir suas

metas?
O que voc espera que os internautas pensem aps visitarem
sua pgina?
Como voc pretende realizar as manutenes e atualizaes do
site aps sua finalizao?
72
Book.indb 72 18/01/12 11:15

Identificao dos futuros usurios

De acordo com Nielsen (2000), a web exige tempo zero de
aprendizagem. O mais importante que cada servio seja baseado
na anlise da tarefa dos usurios especficos, assim como em suas
necessidades. Os melhores sites so aqueles que do suporte ao
modo como os seus usurios desejam abordar os problemas.
No basta ter um visual atraente, o contedo pode

at ser bom, mas se o visitante tiver dificuldades para
encontrar o que procura, vai abandon-lo, com certeza.
Identificar a populao-alvo do site palavra de ordem para

garantir o sucesso do projeto. Algumas perguntas iniciais podem
servir de roteiro para iniciar este trabalho:
Quem usa o site?

Quem fornece informaes ao site?
Quem solicita informaes do site?
O que pode atrair o usurio ao site?
O usurio vai apenas ler a informao ou pode optar por
imprimi-la?
Identificao de necessidades relacionadas produo do site

Na etapa inicial, alm de estabelecer metas e objetivos do
site, tambm so definidos aspectos relacionados tecnologia
necessria para sua implantao e custos dessa produo.
Voc no sabe por onde comear? Que tal fazer uso

de algumas perguntas bsicas?
Veja, a seguir, algumas sugestes ou apontamentos de Lynch

e Horton (2002), que devem ser adaptados sua realidade
de produo. Nesse caso, voc pode desenvolver novos
questionamentos ou alterar os sugeridos.
Unidade 3 73
Book.indb 73 18/01/12 11:15

A. Sobre a produo
Quem vai fazer parte da produo do site? Terceirizados?
Funcionrios de sua empresa? Quais so suas responsabilidades
e disponibilidades?
A contratao de terceirizados existir no projeto? Quem ser o
elo de ligao nestes casos?
Quem vai gerenciar o processo de construo do site?
Aproximadamente quantas pginas deve conter o site? Qual

o nmero de pginas aceitveis abaixo deste nmero? Ou
acima dele?
Quais so os prazos estipulados para a entrega do site? Existem
subetapas a serem consideradas?
B. Sobre a tecnologia
Quais browsers e sistemas operacionais devem ser suportados
pelo site (Windows, Macintosh, UNIX, Linux/Netscape
Navigator, Internet Explorer)? Qual a verso mnima?
Qual a largura de banda utilizada pela maioria dos visitantes do
site?
O pblico-alvo externo ou interno?
Ethernet ou conexes de alta velocidade? ISDN ou DSL

conexes com velocidades mdias? Conexes via modem?
HTML dinmico (HyperText Markup Language) e caractersticas avanadas?
JavaScript ou vbscript?
Java applets?
Algum plugin especial necessrio?
Quais caractersticas especficas do ambiente operacional funcionar como servidor?
H necessidade de segurana e confiabilidade especiais?,Como ser oferecido o
suporte para os usurios?
Mensagens de E-mail?
Manuais on-line?
Salas de Chat, Fruns, suporte por telefone?
Deve existir suporte ao banco de dados?
O usurio ir se logar em reas restritas?

Consultas e atualizaes so necessrias em um banco de dados?,
Contedo Audiovisual
Existem no site produes de vdeo ou udio?
74
Book.indb 74 18/01/12 11:15

C. Suporte servidor web

O servidor prprio ou ser terceirizado por um provedor de
internet?
O nmero de domnio est disponvel (originais e nicos)?
Verifique limitaes de trfego do site, do local de disco ou

custos extras.
A capacidade est adequada com as demandas do trfego do
local?
O suporte de manuteno permanente (24 horas)?
O servidor fornece anlises estatsticas sobre os usurios e o

trfego do site?
D. Incluir no oramento
Salrios da equipe de desenvolvimento e da equipe editorial e
de suporte.
Hardware e software necessrios para o desenvolvimento do
site.
Treinamentos necessrios equipe de desenvolvimento (banco
de dados, linguagens, design).
Pagamentos de outsourcing*.
Design do site e desenvolvimento.
Consultorias tcnicas.
Desenvolvimento do banco de dados.
Marketing do site.
Editor ou webmaster.
Suporte e manuteno do banco de dados.
Suporte tcnico.
Desenvolvimento de contedos novos e atualizaes.
Unidade 3 75
Book.indb 75 18/01/12 11:15

Nesta fase inicial ainda fundamental:
A) Pesquisar. Conhea o domnio do site, instrua-se sobre

* No sistema de o assunto. Observe sites semelhantes, assuntos semelhantes.
outsourcing uma Quanto mais informaes conseguir reunir sobre o assunto
empresa contrata
outra para executar
melhor, pode-se ponderar sobre solues de uma forma mais
tarefas especficas em completa e abrangente.
seu lugar, na forma de
subcontratao. B) Definir o editor do site. importante definirmos o
responsvel pelo site. O editor responsvel deve observar aspectos
relacionados consistncia dos sites em termos de contedo e
design grfico. Alm de manter uma viso sobre todo o site,
tambm deve observar aspectos relacionados a direitos autorais
pelo uso de materiais como: vdeos, imagens e sons no site. O
editor deve ser o responsvel pela qualidade editorial do site.
Seo 3 Detalhamento da arquitetura e design

Neste ponto, voc vai detalhar o contedo e a organizao do site.
Sob a tica do produto de informao definem-se as mensagens-
chave, tipos de informao, funcionalidades, as relaes lgicas,
as ligaes entre os tipos de informao e testam-se a arquitetura
e a sua navegabilidade.
Procure utilizar prottipos nesta etapa para testar a navegao do

site e a interface.
Mas o que so prottipos?
Prottipos so modelos funcionais, construdos a partir de

especificaes preliminares para simular a aparncia e a
funcionalidade, ainda que de forma primitiva e incompleta, de
um software a ser desenvolvido. Pela sua utilizao, os futuros
usurios do software, bem como aqueles que iro desenvolv-lo,
podero interagir, avaliar, alterar e aprovar as caractersticas mais
76
Book.indb 76 18/01/12 11:15

marcantes da interface grfica com o usurio (GUI - Graphical

User Interface) e da funcionalidade da aplicao proposta.
(NECCO; TSAI, 1989)
O prottipo pode ser simples, feito em papel, com ou sem

funcionalidades. A ideia validar suas ideias junto ao cliente e
sua equipe de projeto.
Nesta fase de processo, temos alguns artefatos que so produzidos

e que podem servir como marcas de progresso de seu projeto:
A especificao detalhada do design do site.
A descrio detalhada do contedo do site.
A definio de mapas do site e tabelas.
A especificao tcnica detalhada.
Especificao dos browsers suportados pelo site.
Velocidades de conexo suportadas.
Servidor Web e recursos do servidor.
Algoritmos necessrios ou tecnologia para suportar aplicaes

especficas do site.
Rascunhos de interfaces e do design do site.
Especificao de cenrios de testes.
Desenvolvimento de um ou mais prottipos.
Design do site
nessa fase que o projeto ganha identidade e so trabalhadas
questes como o grid da pgina, o design do site e todos os
elementos grficos so criados e aprovados.
Na etapa de design, so criadas as ilustraes, metforas

visuais, fotografias, os textos e as animaes do site. Pesquisas,
organizao e edio de textos de contedo so preparadas.
Segundo Lynch e Horton (2002), so subprodutos tpicos desta fase:
textos editados e corrigidos;
Unidade 3 77
Book.indb 77 18/01/12 11:15

especificao do design grfico de todas as pginas:

templates das pginas finalizados;
Template o modo mais fcil e cabealhos, logotipos, botes, fundos definidos;
rpido de construir uma pgina detalhamento de manuais para operaes complexas;
com uma estrutura pr-definida. A
partir do template, preenchemos ilustraes;
o contedo, sem a necessidade de
refazermos toda a pgina. fotografias.
Ainda nessa etapa, temos a concepo de componentes funcionais
e lgicos como:
definio de scripts complexos;

prottipo finalizado para avaliao.
importante frisar a participao do usurio,

validando suas ideias nesta etapa.
Nessa fase ainda fundamental:
A) Brainstorming
O brainstorming um processo de gerao de ideias

caracterizado pelo registro escrito verbal das mesmas,
revelando um caminho para a soluo.
Quando discutimos com a equipe o processo de especificao

(design e arquitetura), podemos comear por fazer listas de
palavras sobre tudo aquilo que se relaciona com o tema em causa.
importante estarmos receptivos para novas ideias. A equipe
deve ter a liberdade de deixar que as palavras fluam sem censura
ou julgamentos.
Quando sentimos que se esgotou o material de trabalho, estamos

prontos para iniciar a visualizao das ideias, executando
pequenos esboos com as ideias preliminares.
78
Book.indb 78 18/01/12 11:15

B) Confronte as ideias com os objetivos do projeto

O exerccio da crtica a melhor forma de articular as ideias
para que todo o grupo entenda e para que obtenhamos reaes
do grupo. O exerccio da crtica permite analisar as solues
individuais e sugerir modos de aumentar o impacto conceptual e
visual de cada ideia. Podemos identificar o que funciona e o que
deve ser evitado no nosso trabalho.
C) Perca tempo aqui

As adies de inseres ao projeto, que no entraram no
planejamento, comprometem a sua sade. Pequenas adies no
comprometem prazos, custos ou o andamento do projeto. Mas
inseres contnuas, que acabam acumulando-se no cronograma,
podem destruir um projeto. Assim, importante dizer que voc
no deve iniciar o desenvolvimento sem entender completamente
o que vai ser trabalhado e antes de desenvolver uma especificao
realista do site. Discuta a especificao exaustivamente com a
equipe, discuta prazos, entregas e custos. Encontrar erros no
planejamento, na etapa de especificao, pode custar 100 vezes
menos do que durante o desenvolvimento.
Seo 4 Construo e manuteno

A construo de um site s deve iniciar quando se tem uma viso
detalhada da arquitetura e do design dele.
Mesmo quando se trabalha de forma consistente,

voc deve estar consciente de que refinamentos no
projeto ainda sero necessrios. Isto inclui melhorias
no design, na navegao em metforas usadas no site,
entre outros.
Quando o site est finalizado, com todas as pginas e componentes,

possvel iniciar o beta teste.
Unidade 3 79
Book.indb 79 18/01/12 11:15

Os testes devem ser feitos por equipes formadas em sua empresa.

Procure gerar erros no site, provoque situaes inusitadas, avalie
erros tipogrficos e procure criticar criteriosamente o design da
pgina. Os usurios so fundamentais nessa etapa final, pois eles
podem lhe oferecer informaes preciosas sobre a validade do
projeto por meio de testes de aceitao.
Somente depois de exaustivamente testado publique

a URL do site!
Lynch e Horton (2002) sugerem que, nessa etapa, os seguintes

artefatos sejam disponibilizados:
Estrutura de links de navegao finalizada.
Resultados de testes detalhados da base de dados e das

funcionalidades.
Resultados de testes em diferentes plataformas de hardware e
software.
HTML finalizado para todas as pginas com contedo.
Resultados de testes de performance.
Todos os componentes da base de dados linkados.
Manuteno
Muitas empresas contratam o desenvolvimento do site e
posteriormente assumem a manuteno desta estrutura.
Independente desse fator, procure utilizar ferramentas que
produzam um cdigo HTML, que seja fcil de ser entendido
e, consequentemente, de ser mantido. Quanto mais complexa a
gerao de cdigo, mais difcil torna-se a manuteno e maior a
propenso a erros durante a manuteno.
O site jamais deve ser considerado como finalizado. Ele precisa

de ateno e reparos constantes, principalmente no que diz
respeito ao contedo. Se voc desenvolvedor, deixe esse fato
claro ao seu cliente. O que precisa ser constantemente verificado?
80
Book.indb 80 18/01/12 11:15

A validade de links, principalmente se forem apontamentos

externos, renovao de contedo, reformulaes relacionadas
performance, entre outros.
Publicada a URL, ela se torna uma ferramenta til para o uso e

controle de visitas pelo servidor. Esse controle oferece estimativas
exatas sobre o sucesso de seu site, pginas preferidas, durao
das visitas, verso e tipo de browser mais utilizado. Se possvel,
monitore as palavras-chave usadas no mecanismo de busca. Este
monitoramento pode lev-lo a modificar a nomenclatura do
site. Outro aspecto interessante a localizao geogrfica dos
internautas que esto acessando seu site.
Mantenha-se atento, nesta etapa, para dar as informaes de

feedback aos usurios.
Se voc vai hospedar o site em um provedor, verifique

quais os servios de anlise disponibilizados!
Outra preocupao so os backups regulares em uma mdia

segura. Proteger as informaes do seu site uma das principais
tarefas depois que voc publica a URL.
tambm uma das tarefas mais difceis. Quando executados

de forma correta, os backups permitem a restaurao do sistema.
Para que voc tenha sucesso nesta tarefa, Lynch e Horton (2002)
recomendam que:
os backups sejam feitos cuidadosamente, de acordo com

um escalonamento (final do dia, dias pares, semanal,
mensal...);
a mdia seja testada regularmente;
o sistema de backup seja testado regularmente;
as fitas de backup sejam mantidas em um local seguro,
fora da empresa. Certifique-se de que o ambiente seja
seguro, protegido e com condies ambientais propcias
para o armazenamento;
prepare-se para o pior. Pense no pior cenrio. O
sistema foi destrudo. Analise o tempo necessrio para
recoloc-lo no ar.
Unidade 3 81
Book.indb 81 18/01/12 11:15

Sntese
Durante esta unidade, voc pde perceber a importncia de

propor um projeto de desenvolvimento de um site de forma
organizada e documentada.
O uso de questionamentos relacionados a objetivos, pblico-alvo,

produo e custos nos direcionam para um desenvolvimento
planejado e seguro. Estabelecer artefatos, que possam ser usados
como milestones para medir o progresso do projeto, permite que
desenvolvedor e cliente sintam-se seguros da qualidade e do
cumprimento de prazos para a entrega do projeto.
Voc viu, ainda, que a entrega do site no significa que o mesmo

esteja concludo. O processo de um site incremental, sendo sua
manuteno contnua e fundamental para que o produto esteja
sempre dentro das expectativas dos internautas que o visitam.
Nesta unidade, voc tambm explorou a necessidade de observar

os servios de hospedagem do site, onde o armazenamento e
a disponibilizao de estatsticas de acesso so imprescindveis
para o bom uso e tambm servem como recurso para tomadas de
decises futuras.
82
Book.indb 82 18/01/12 11:15

1) No planejamento e definio, quais so os pontos fundamentais?

a) ( ) O design, a construo e a manuteno do site.
b) ( ) Ter informaes do projeto de forma clara, concisa e acessvel.
c) ( ) Identificar os objetivos, o pblico e as necessidades de

produo do site.
2) Na utilizao do site, pela populao-alvo, basta que ele tenha:

a) ( ) Um visual atraente e um bom contedo;
b) ( ) Uma abordagem sobre os problemas dos usurios;
c) ( ) Suporte para as tomadas de deciso dos usurios.
3) Na etapa de identificao de necessidades de produo de um site,

tem-se que:
a) ( ) Estabelecer as metas e os objetivos do site;
b) ( ) Relacionar o sistema operacional necessrio para a implantao

do site;
c) ( ) Definir os custos de produo pela quantidade de pginas do
site;
d) ( ) Questionar sobre os tpicos de produo, tecnologia e custos

do site.
Unidade 3 83
Book.indb 83 18/01/12 11:15

4) Prottipos so modelos funcionais construdos:

a) ( ) Para testar o contedo e a organizao do site;
b) ( ) Para simular a aparncia e a funcionalidade completa do site;
c) ( ) Para validar suas ideias junto ao cliente e sua equipe de projeto.
5) Aps o processo de especificao e a construo do site, necessrio que:

a) ( ) Hospede -se o site em um provedor, sendo que o cliente far a
manuteno do mesmo;
b) ( ) Fornea-se manuteno e anlise do site;
c) ( ) Faa-se apenas um backup regular no site.
Saiba mais
Acesse o material na midiateca para consulta sobre o nome

Ameritech, e leia o artigo End of web design, de Jacob Nielsen.
84
Book.indb 84 18/01/12 11:15

4
unidade 4
Por que usabilidade?
Compreender a relevncia e os conceitos
relacionados usabilidade na web.
Realizar a anlise do usurio-alvo e do contexto de

utilizao da interface com base em conceitos de
usabilidade.
Determinar os principais aspectos da usabilidade de

um site.
Sees de estudo
Seo 1 Conceitos norteadores da usabilidade
Seo 2 O que significa exatamente usabilidade?
Seo 3 O design centrado no usurio, segundo a

norma ISO 9241
Book.indb 85 18/01/12 11:15


Segundo estatsticas de Pesquisa do Ibope e Ratings.com,
divulgadas recentemente, os internautas brasileiros j totalizam
10,4 milhes. O nmero de usurios ativos, que acessam a Web
pelo menos uma vez ao ms, atingiu a marca de 5,3 milhes. A
mdia mensal de horas do brasileiro na Web de 7:36h.
No Brasil, temos 753.606 domnios registrados e, a cada 24

horas, so solicitados 952 novos processos. Essa grande oferta de
sites, a diversidade e a criatividade tornam o usurio Web um
cliente impaciente e independente. Ao se deparar com um site
onde no consegue localizar rapidamente a informao desejada
ou, ainda, ao observar o contedo confuso, o usurio abandona
o site imediatamente. Essa clientela exigente experimenta a
usabilidade antes e compra o produto depois.
Quando falamos sobre economia na rede, o Website a empresa

para o cliente, sua vitrine, sua identidade. Um projeto sem
usabilidade torna essa vitrine de difcil acesso, pouco visitada e,
quando acessada deixa o cliente frustrado, com poucas chances
de voltar a visit-la.
Nesta unidade, voc ter contato com fatores que, de forma fcil,
melhoram a interao entre o seu cliente final e o site que voc
constri. Forneceremos pequenas dicas, que devem fazer a
diferena para que seu produto atinja o sucesso desejado.
seo 1 Conceitos norteadores da usabilidade
Voc j ouviu falar na palavra usabilidade?
Talvez voc no tenha ouvido, mas, com certeza, j ouviu falar

de pginas que irritam ou frustram seu usurio pela dificuldade
encontrada em atingir um determinado objetivo, como comprar
um produto. Talvez voc mesmo j tenha passado por esse
sentimento de impotncia ao instalar um software em sua
86
Book.indb 86 18/01/12 11:15

mquina e no conseguir entender o que deve ser feito para

emitir um determinado relatrio ou, mesmo, como a ferramenta
funciona. E que tal aquela situao constrangedora na fila do
caixa eletrnico, em que voc no consegue completar uma
tarefa? Ou, ainda, quando, aps preencher um longo cadastro
na internet, voc confirma os dados e lhe apresentada uma
mensagem solicitando a digitao de um campo obrigatrio?
Mas... surpresa! Todo o cadastro foi perdido... e voc deve
reiniciar a digitao. Como voc se sente? Bom, esses exemplos
so, na verdade, exemplos da falta de usabilidade de um produto.
O termo usabilidade comeou a ser usado ainda

na dcada de 80, por cincias como a Ergonomia e
a Psicologia. Inicialmente, tentou-se utilizar o termo
amigvel, procurando uma verso traduzida da
expresso user-friendly. A expresso amigvel era,
no entanto, subjetiva, levando a conflitos em casos
onde uma interface perfeitamente amigvel para
um usurio experiente, tornava-se um tormento
incalculvel para um usurio inexperiente.
A usabilidade depende da existncia de trs componentes

para que possa existir: o usurio, a interface e a interao
humano-computador.

Veja, agora, cada um desses componentes com mais detalhes.
A interao humano-computador (IHC)

Um fator importante e rduo nesta rea da cincia o
conhecimento e o entendimento sobre o meio, a forma e a ordem
com que o homem interage com o sistema computacional, a fim
de atingir seu objetivo ao executar sua tarefa.
Unidade 4 87
Book.indb 87 18/01/12 11:15

Toda interao entre o homem e o sistema computacional,

envolve dilogos orientados pela tarefa. O sucesso desse dilogo
dependente das informaes fornecidas pelo homem ao sistema e
do feedback promovido pelo sistema.
IHC , portanto, o estudo da relao existente entre o

homem e o computador, sendo que nenhum aspecto
do homem nem do sistema considerado irrelevante.
Absolutamente tudo deve ser estudado, permitindo a
perfeita comunicao e, principalmente, observando-
se os limites de cada um: homem e computador.
A interface humano-computador
A interface humano-computador definida

como o componente interativo do software capaz
de transformar entradas de usurios, ativando
funcionalidades do sistema, promovendo feedback e
coordenao destas interaes.
A interface pode ser vista, ainda, como a parte do sistema

encarregada de mapear as aes do usurio na aplicao do
processamento de requisies e apresentao de seus resultados
pelo sistema. A interface o meio que permite a comunicao
entre o usurio e o computador.
O usurio
No design de um projeto, o usurio pea fundamental. Para
o sucesso do projeto, necessria a identificao do usurio que
far uso do sistema proposto. Ao trazermos o usurio para o
centro do projeto, podemos focar claramente suas necessidades,
caractersticas e particularidades.
Mas como identificar o usurio de um website?
88
Book.indb 88 18/01/12 11:15

Nosso usurio, em um mundo globalizado, pode ser qualquer

pessoa conectada rede mundial de computadores! Nesse caso,
precisamos de uma amostra de nossa populao-alvo. Detectado
o segmento que se pretende atingir por meio de uma amostra, j
possvel atingir-se uma boa taxa de aceitao.
Exemplo
Para um site que pretende a venda de produtos para o mercado
odontolgico, mesmo tentando atingir o mercado de forma
globalizada, possvel melhorar a interface utilizando uma
amostra de usurios com as seguintes caractersticas:
introduzir na amostra profissionais com e sem experincia no
uso da internet;
procurar diversificar a localizao geogrfica da amostra, tanto
quanto possvel: a cidade, estado ou mesmo o pas de origem;
identificar profissionais, odontlogos, que estejam dispostos a
colaborar com o projeto;
diversificar as faixas etrias da populao, procurando ser
abrangente nesse quesito.
Podemos pensar nesse usurio tentando identificar o que ele

pensa quando v o site (NIELSEN, 2000):
O sistema tem a informao ou servio que eu preciso?
Onde posso encontrar a informao ou o servio?
Como posso solicitar esse servio?
Para que serve esse elemento?
Qual foi o resultado? Era o que eu queria?
Quais informaes devo fornecer?
O que significa essa figura?
Para onde leva esse link?
Unidade 4 89
Book.indb 89 18/01/12 11:15

A norma ISO 9241 (1988), parte 11, sugere que sejam avaliados
os seguintes aspectos referentes ao usurio:
Tipos de usurios: primrios, secundrios e indiretos.

Habilidades e conhecimentos: habilidade/conhecimento
produto, habilidade/conhecimento do sistema, experincia
na tarefa, experincia organizacional, nvel de treinamento,
habilidade nos dispositivos de entrada, qualificaes,
habilidade de linguagem, conhecimento geral.
Atributos pessoais: idade, gnero, capacidades fsicas,
limitaes fsicas, habilidade intelectual, atitude e
motivao.
Quando projetamos, temos que pensar que o design deve ser

consistente com as caractersticas cognitivas, fsicas e sociais do
usurio. Ao nos aproximarmos do usurio, aspectos especficos
so identificados. O projeto deve reconhecer estilos particulares
de um determinado pblico.
Imagine-se desenvolvendo um site com produtos e

informaes voltados para a terceira idade. Quando
pensamos sob o ponto de vista cognitivo, pessoas
mais velhas tm problemas de perda da acuidade
visual relacionada percepo de cores e visualizao
de textos. Alm da acuidade visual, o idoso passa por
questes relacionadas diminuio da capacidade de
memorizao e talvez ainda tenhamos que considerar
a possibilidade que ele possa ter problemas motores
para realizar apontamentos com o mouse.
Nesse caso, voc projetista, deve conduzir o usurio de maneira

a resolver suas necessidades, atingindo seus objetivos de forma
confortvel, tentando prevenir estes obstculos.
Na viso de Lynch e Horton (2002), os usurios da internet se
subdividem em:
surfistas da Web;
usurios novatos e ocasionais;
usurios frequentes (experts); e
90
Book.indb 90 18/01/12 11:15

usurios internacionais.
Surfistas, por exemplo, precisam de homepages anlogas a capas de

revistas. Usurios novatos e ocasionais tendem a se sentir intimidados
com menus de texto. J os usurios frequentes e experientes ficam
irritados com exageros visuais: como eles tm objetivos definidos,
apreciaro menus de textos detalhados e rpidos, alm de engenhos
de busca bem programados e poderosos.
No esquea: um ponto fundamental a observao

de caractersticas culturais, religiosas, econmicas
e ticas do nicho da populao que a se tornar o
pblico-alvo do site.
Quando voc desenvolve um site, deve considerar a existncia

de usurios que gostam de ir direto ao seu objetivo, sem ter que
passar por subetapas. Nesse sentido, imagine que um usurio
deseja comprar uma mquina fotogrfica. O site, a seguir, oferece
a possibilidade de encontrar o produto desejado a partir dos
links de departamento ou por meio de um mecanismo de busca.
O cliente no precisa necessariamente saber qual a classificao
do produto dentro da loja virtual e pode procurar a mquina
fotogrfica diretamente pelo mecanismo de busca.
Ao mesmo tempo, o site no pode desconsiderar o cliente que
aprecia entrar no setor desejado, verificar as marcas existentes
at encontrar o produto que deseja. Oferecendo essas duas
opes, voc est pensando no perfil dos diferentes usurios.
O site seguiu essa regra bsica de usabilidade, mas, quando
se possibilita esse tipo de navegao, deve-se tomar cuidado
para que o resultado da busca no apresente informaes no
solicitadas ou incoerentes.
Unidade 4 91
Book.indb 91 18/01/12 11:15

Figura 4.1 - Adaptao da navegao ao perfil do usurio

Nesse caso, a palavra de busca foi DVD, mas o resultado foi

totalmente incoerente, os produtos apresentados no so DVDs,
mas notebooks, televisores etc. O que o usurio iria imaginar:
Mas o que isso? Eu no quero ver estes produtos, quero ver um
aparelho de DVD!!
Quando o resultado de uma busca incoerente, alm

de quebrar um quesito de usabilidade, voc est
prejudicando a credibilidade do seu site junto ao usurio.
Seo 2 O que significa exatamente usabilidade?

Rocha (2000, p. 242) afirma que:
Dados disponveis apontam que em 1998, cerca de trs
bilhes de dlares deixaram de ser ganhos na Web norte-
americana por causa de design mal feito de pginas,
que dificultava a compra em vez de facilitar. A IBM
constatou que o recurso mais popular em seu site era
92
Book.indb 92 18/01/12 11:15

a funo de busca, porque as pessoas no conseguiam

descobrir como navegar, e o segundo mais popular era
o boto ajuda. A soluo foi um amplo processo de
redesign, envolvendo centenas de pessoas e milhes
de dlares. Resultado: na primeira semana depois do
redesign, em fevereiro de 1999, o uso do boto de ajuda
caiu 84% enquanto as vendas aumentaram 400%.
Nielsen (1993) define que a usabilidade de um sistema est

diretamente associada ao grau de aceitao do sistema ou sua
capacidade de satisfazer as necessidades e exigncias do usurio
em potencial e outros usurios atingidos pelo sistema, como
clientes e gerentes.
A usabilidade definida por mltiplos componentes e est

tradicionalmente associada a atributos como (NIELSEN, 1993):
a facilidade de aprendizagem do sistema;
sua eficincia de uso;
a capacidade com que o sistema promove a facilidade de

memorizao das aes necessrias para que o usurio atinja
seus objetivos;
um bom controle da gesto de erros, minimizando e refutando
situaes possveis de ocorrncias;
e, principalmente, a satisfao que o sistema promove ao
usurio ao ser utilizado.
Os fundamentos da usabilidade baseiam-se na tarefa do usurio e

nas caractersticas e diferenas individuais dos usurios.
Por que a facilidade de aprendizagem importante

para a usabilidade?
Imagine um usurio novato. Ele entra no site pela primeira vez.
O site fcil de aprender previsvel. O usurio consegue a partir
de interaes anteriores, determinar o resultado de uma interao
futura. O usurio constri um modelo mental de como o site se
comporta, determinando uma ao futura, baseado em interaes
Unidade 4 93
Book.indb 93 18/01/12 11:15

realizadas no passado. Esse modelo mental pode ser construdo

a partir do seu site ou at da experincia do usurio com outros
sites e aplicativos e, principalmente, do mundo real.
Vamos pensar em nosso mundo real. O uso de cones sugestivos,

que lembram aes do mundo real, facilitam aes que seriam
difceis de explanar textualmente.
O uso da lixeira para remover, a tesoura para cortar, a

impressora para imprimir.
O uso de uma mensagem em vermelho traz ao usurio uma

lembrana: alerta, pare. Essa previsibilidade vem da lembrana
talvez de sinais de um semforo, de placas de pare, que so
vermelhas, assim como o verde intuitivamente nos leva a pensar
que a passagem est livre e podemos seguir em frente.
Figura 4.2 - Uso da previsibilidade no favorecimento da aprendizagem

Fonte: Prefeitura de Porto Alegre (2007).
Se voc quer tornar seu site fcil de aprender, procure fazer uso
da generalizao.
A generalizao permite ao usurio estender um conhecimento

adquirido em sistemas similares e que so aplicados no seu site.
Voc j visitou uma biblioteca digital? Voc vai perceber que

a sequncia de aes de acesso para a maioria dos acervos
padronizada. Isso faz com que o usurio sinta-se familiarizado
com as mais diferentes bibliotecas.
Veja, a seguir, os passos para fazer uma pesquisa rpida em uma
biblioteca digital.
Ela composta por 3 passos:
94
Book.indb 94 18/01/12 11:15

Passo 1 seleciona o tipo de pesquisa (rpida)

Clique na opo Pesquisa rpida.
Figura 4.3 - Passo 1: consulta ao Acervo Biblioteca Digital

Fonte: Universidade Federal de Santa Catarina (2005).
Passo 2 informa o assunto a pesquisar: web

Preencha os campos com as informaes solicitadas.

Passo 3 recebe o resultado da pesquisa

Verifique o resultado da pesquisa.
Unidade 4 95
Book.indb 95 18/01/12 11:15


Para ser de fcil aprendizado, o site deve ser compatvel com o

contexto de uso. Devem-se atender s necessidades dos usurios.
Isso significa: necessidades psicolgicas, culturais e tcnicas. As
tarefas devem ser organizadas de acordo com as expectativas
e costumes dos usurios. Devem-se evitar termos tcnicos e
privilegiar o uso de terminologias familiares.
Se o usurio um especialista na rea abordada pelo projeto,

devem ser adotadas terminologias especializadas e uma maior
densidade de informaes. Para usurios leigos, a quantidade
de informaes deve ser maior, fazendo-se uso de manuais,
glossrios e telas mais detalhadas.
importante determinar estas diferenas. O excesso de

informaes para um usurio especialista torna o site enfadonho.
J a economia de informaes para o usurio leigo pode levar o
mesmo a desistir da interao!
Para determinar o grau de proficincia do usurio

de um sistema, voc pode solicitar que ele execute
um conjunto de tarefas tpicas, dentro de um tempo
mnimo predeterminado para a concluso. O tempo e
o sucesso ou no da interao fornecero parmetros
para identificao do seu grau de experincia na tarefa.
96
Book.indb 96 18/01/12 11:15

Como identificar a eficincia de uso?
Quando falamos sobre eficincia, temos um aspecto

importante a ser relacionado, o tempo de resposta
ou o tempo necessrio para que o sistema informe
ao usurio alteraes em seu estado.
Frequentemente, ouvimos algum usurio com o seguinte

comentrio: - A pgina demora a carregar!! A resposta demora a
ser exibida!!
Quando a resposta imediata impossvel, o usurio deve receber
um feedback indicando que sua solicitao est sendo processada.
Outro aspecto importante na eficincia a

portabilidade.
Quantas vezes voc tentou carregar uma pgina e ela ficou pela
metade por no ser compatvel com o browser?
Figura 4.6 - Feedback visual para processamentos demorados

Indicadores de progresso evitam a situao em que voc fica na

dvida se o processamento lento ou se o sistema est travado.
Um ponto que no podemos esquecer o uso de aes mnimas
na execuo do objetivo do usurio.
Unidade 4 97
Book.indb 97 18/01/12 11:15

Por que a facilidade de memorizao deve ser considerada na

construo do seu site?
Sabe como possvel perceber se o seu site possui

facilidade implcita no design (sequencias de aes e
opes de design fceis de memorizar)?
Imagine uma situao, onde o usurio fez uso do seu site h

aproximadamente um ano. Quando ele retorna a visit-lo, efetua
todas as aes para realizar a tarefa de forma segura e tranquila.
Nesta situao, podemos dizer que o usurio provavelmente
no precisou reaprender a forma de interagir com o site. Ele, na
verdade, no esqueceu de como o site funciona.
No caso de sistemas disponibilizados na web, tem-se cada
vez mais a visita de usurios casuais, por isso importante
concebermos o site permitindo a rpida memorizao.
Um aspecto fundamental para o usurio no aprendizado

o uso de ttulos, rtulos e nomenclatura familiar,
que conduzem o usurio durante a tarefa.
Um exemplo caracterstico o da declarao do imposto

de renda. Desde o acesso ao site at o uso do sistema, agora
disponvel tambm na web, deveria ser considerado o fato de
que programadores, mdicos, costureiras, ou seja, todos os
profissionais de diferentes faixas culturais faro uso do sistema,
mas apenas uma vez por ano.
98
Book.indb 98 18/01/12 11:15

Figura 4.7 - Trabalho anual da declarao do Imposto de renda

Fonte: Brasil (2005a).
O que voc acha: o software para declarao

de imposto de renda preenche este quesito de
usabilidade? Visite o site da Receita Federal, analise a
pgina e registre aqui sua opinio sobre o assunto!
Unidade 4 99
Book.indb 99 18/01/12 11:15

Erros durante a visita ao site

Mesmo o usurio experiente no espera enfrentar qualquer tipo
de problema nem cometer erros induzidos pela m qualidade do
site. Situaes, como erros de programao ou informaes que
levam o usurio a situaes de erro, devem ser detectadas antes
da publicao do site.
Durante o design, reserve um bom tempo para a confeco

de mensagens coerentes sobre erro e, principalmente, teis ao
usurio para restaurar a tarefa. A possibilidade de corrigir erros
e/ou restaurar o cenrio anterior sua ocorrncia, fundamental
para a credibilidade do projeto.
A satisfao do usurio
O usurio tem que gostar de utilizar seu site. Para muitos usurios,
a cor do site, imagens, animaes, som, entre outros fatores, podem
ser preponderantes velocidade ou mesmo eficincia do site. Para
detectar o grau de satisfao do usurio, sugere-se a aplicao de
um questionrio de satisfao, em que o usurio possa classificar
sua experincia ao utilizar o site. A avaliao deve ser conduzida
por um grupo representativo de usurios.
Consistncia como norma

O projeto grfico consistente torna o projeto harmnico. Tarefas
similares requerem aes similares, assim como aes iguais
devem acarretar efeitos iguais.
Quando uniformizamos o uso da cor, tamanho e

localizao de elementos, facilitamos automaticamente
o aprendizado e tambm sua visualizao.
Um exemplo claro a confuso que sentimos ao utilizarmos

a barra de ferramentas do editor de textos de nosso colega de
trabalho, que est personalizada com outros elementos ou com
outra sequncia de localizao.
100
Book.indb 100 18/01/12 11:15

Flexibilizar para atrair o usurio

Ao permitirmos que o usurio adapte sua interface s suas
preferncias ou ao permitirmos que ele execute sua tarefa de
diferentes maneiras, estamos contribuindo para que ele sinta-se
familiarizado ao projeto.
Ao oferecermos diferentes formas de chegar a uma

determinada informao, por um mecanismo de
busca ou por hiperlink, estamos permitindo um
acesso personalizado, de acordo com seus hbitos.
No portal da Justia Federal, possvel para o deficiente

visual alterar o tamanho da fonte e, ainda, alterar a verso
para monocromtica ou para alto-contraste. Esses recursos
possibilitam o acesso do deficiente visual que, agora, pode fazer
uso do portal confortavelmente.
Figura 4.8 - Flexibilizar o projeto adaptando s necessidades do usurio

Fonte: Conselho da Justia Federal (2005).
Unidade 4 101
Book.indb 101 18/01/12 11:15

Seo 3 O design centrado no usurio segundo a

Norma ISO 9241
Voc sabia que existe uma norma que rege a

usabilidade para sistemas computacionais?
a norma ISO 9241. A norma composta por vrias partes. A

parte 11 d nfase ao fato de que a usabilidade dos computadores
dependente do contexto de uso e que o nvel de usabilidade alcanado
depender das circunstncias especficas nas quais o produto usado.
O contexto de uso consiste de usurios, tarefas, equipamentos
(hardware, software e materiais) e do ambiente fsico e social,
pois todos eles podem influenciar a usabilidade de um produto,
dentro de um sistema de trabalho.
Estrutura para especificao de usabilidade

A especificao da usabilidade de um produto exige que sejam
identificados objetivos, componentes do contexto de uso e
subcomponentes, identificando-se atributos que permitam a
verificao e a medio.

Objetivos

Usurio

Tarefa

Equipamento

Ambiente
Eficcia

Produto Eficincia
Satisfao
Figura 4.9 - Estrutura de usabilidade

Fonte: International Standard (1998).
102
Book.indb 102 18/01/12 11:15

Para especificar ou medir usabilidade, so necessrias

informaes como: a descrio dos objetivos
pretendidos, a descrio dos componentes do
contexto de uso e valores desejados de eficincia,
eficcia e satisfao para os contextos que se
pretendem atingir.
Descrio dos objetivos

O objetivo de um produto deve ser claramente colocado. A partir
dele, podero ser decompostos subobjetivos, assim como critrios
que iro satisfaz-lo.
Contexto de uso
No contexto de uso so descritos componentes como usurios,
tarefas, equipamento e ambientes. O rico detalhamento do
contexto permite que aspectos relevantes para a usabilidade
sejam reproduzidos. A especificao pode ser em termos de
caractersticas relevantes ou de uma situao especfica.
Descrio dos usurios: so descritas todas as

caractersticas que possam ser pertinentes ao usurio.
Reveja a seo I.
Descrio das tarefas: so descritas as caractersticas que

influenciam a usabilidade, como frequncia e durao da
tarefa. As tarefas devem ser descritas alm de suas funes
ou funcionalidades, ou seja, todas as atividades e passos
que se relacionam tarefa e seu desempenho devem ser
relacionadas ao objetivo da tarefa.
Descrio dos equipamentos: faz-se a descrio do

software, hardware e materiais, ou mesmo de seu
desempenho.
Descrio de ambientes: faz-se a descrio do ambiente

e atributos de um ambiente tcnico, fsico, atmosfrico,
cultural e social.
Unidade 4 103
Book.indb 103 18/01/12 11:15

A norma sugere que sejam analisados os seguintes quesitos:
Usurios Tarefas Equipamentos
Tipos de usurio Falha da tarefa Descrio bsica

Primrios Nome da tarefa Identificao do produto
Secundrios e indiretos Frequncia de uso da tarefa Descrio do produto
Durao da tarefa Principais reas de aplicao
Habilidades e conhecimentos Frequncia de eventos Funes principais
Habilidade/conhecimento produto Flexibilidade da tarefa
Habilidade/conhecimento sistema Demanda fsica e mental Especificao
Experincia na tarefa Dependncias da tarefa Hardware
Experincia organizacional Resultado da tarefa Software
Nvel treinamento Risco resultante de erro Materiais
Habilidade nos dispositivos de entrada Demandas crticas de segurana Servios
Qualificaes Outros itens
Habilidade de linguagem
Conhecimento geral
Atributos pessoais
Idade
Gnero
Capacidades fsicas
Limitaes fsicas
Habilidade intelectual
Atitude
Motivao
Quadro 4.1 - Exemplo de atributos de contexto de uso

Imagine a seguinte situao: voc deseja realizar a compra de

uma passagem area. A sequncia de tarefas que voc imagina
qual ? Eu imaginaria a escolha da data, a pesquisa dos voos, a
seleo do voo e, a partir da, as aes para realizar a compra do
bilhete. Observe a sequncia de tarefas no site a seguir:
104
Book.indb 104 18/01/12 11:15

Figura 4.10 - Sequncia de tarefas para compra de bilhete areo

Fonte: Gol Linhas Areas Inteligentes (2005).
Na Figura 4.10, em caixa alta, encontramos o rtulo COMPRE

AQUI. Nesse agrupamento so informados dados sobre origem,
destino e nmero de passageiros.
Figura 4.11 - Sequncia de tarefas para compra de bilhete areo

Fonte: Gol Linhas Areas Inteligentes (2005).
Finalizado o preenchimento, vamos pesquisar os possveis voos.

Na Figura 4.11, so apresentados os voos disponveis, mas no
existe opo que permita a finalizao da compra. E agora, para
onde eu vou? Como fao para finalizar a compra?
Unidade 4 105
Book.indb 105 18/01/12 11:15

Apesar de a primeira pgina indicar que essa a sequncia para

realizar a compra e o usurio se sentir seguro com suas aes, nesta
pgina, toda a sequncia invalidada, pois a sequncia da tarefa
(aes para realizar a compra) esperada pelo usurio no acontece.
Medidas de usabilidade
Para termos certeza de que o que projetamos representa
realmente a usabilidade desejada, a norma sugere o uso de
medidas de usabilidade que possam ser repetidas em um
contexto especfico.
Segundo a norma ISO 9241-11 (1998), a escolha e o nvel de

detalhe das medidas dependem do contexto de uso e das propostas
para as quais a usabilidade est sendo descrita. Cada medida
deve considerar os objetivos do projeto. Medidas de eficincia,
eficcia e satisfao podem ser especificadas para objetivos globais
ou para objetivos menores. aconselhvel o uso de medidas que
premiem a acurcia e a completude no cumprimento de objetivos
e subobjetivos. Devem ser realadas medidas no grau de eficincia
alcanada em relao ao dispndio de recursos como esforo
mental, fsico, tempo, custos materiais ou financeiros. Tambm
devem ser descritas medidas que permitam medir o conforto do
usurio durante a interao, observando o desconforto, gosto pelo
produto e satisfao. A satisfao pode ser avaliada por medidas
subjetivas ou objetivas.
Objetivos de Medidas de
Medidas de eficcia Medidas de eficincia
Usabilidade satisfao
Porcentagem de objetivos Tempo para completar uma Escala de satisfao.

Usabilidade global alcanados. tarefa.
Porcentagem de usurios Tarefas completadas por Frequncia de uso
completando a tarefa com unidade de tempo. arbitrrio.
sucesso.
Mdia da acurcia de tarefas Custo monetrio de Frequncia de
completadas. realizao da tarefa. reclamaes.
Quadro 4.2 - Exemplo de medidas de usabilidade
Na especificao podem ser necessrias medidas adicionais que se

referem a propriedades particulares desejadas no produto.
106
Book.indb 106 18/01/12 11:15

Sntese
Nesta unidade, o termo usabilidade tornou-se parte do seu

cotidiano como projetista de interface. Aqui voc percebeu
a importncia da facilidade da interface, da flexibilidade, da
consistncia, da incorporao de mecanismos de memorizao e
do cuidado necessrio ao controle de erros e de suas mensagens.
Tambm foi possvel conhecer uma norma que exclusivamente

voltada usabilidade, a ISO 9241. A partir da parte 11 da
Norma, aprendeu-se a importncia de envolver o usurio na
concepo das futuras funcionalidades e das decises de dilogo
do usurio, por meio da anlise da tarefa.
Ento, voc est pronto para aplicar a usabilidade na prtica?
1) Como surgiu o termo usabilidade?
Unidade 4 107
Book.indb 107 18/01/12 11:15

2) Relacione os conceitos abaixo:

(A) Usurio
(B) Interface humano-computador
(C) Interface
a) ( ) Estuda o dilogo existente entre usurio e computador.
b) ( ) a parte de um sistema computacional com a qual uma pessoa

entra em contato fsico, perceptivo e conceitual.
c) ( ) Fundamental para a caracterizao das necessidades e

descrio da execuo da tarefa.
3) Hotel Boa Noite

Localizao: Rua da Beira do Lago, 290 - Praia de Canasvieiras,
Florianpolis, Brasil
Motivao do cliente: aumentar o nmero de locaes do hotel,
divulgando o mesmo por meio da internet.
O que o cliente realmente quer:
O cliente gostaria de divulgar fotos do local, porque o hotel beira-
mar. Outro ponto ressaltado a possibilidade do cliente realizar reservas
no site. Deve-se considerar que a reserva s ser efetivada mediante
o pagamento de 50% dos valores das dirias. O hotel conta com um
auditrio para 300 pessoas, quartos de luxo (20) e standard (30).
Tambm possui piscina, rea de lazer para crianas, restaurante
internacional, sauna e servio de praia.
O cliente gostaria que, no site, houvesse o mapa da regio e de acesso
com distncias relativas s grandes capitais, facilitando a localizao
para o futuro hspede.
Bom, a partir da especificao, faa a anlise dos possveis usurios do
site. A anlise deve ser criteriosa, observando o contedo apresentado
nesta sesso e considerando atributos pessoais e habilidades.
a) No site do Hotel Boa Noite, qual o recurso que voc pode propor
para promover a flexibilidade?
108
Book.indb 108 18/01/12 11:15

b) Sabendo que grande parte dos visitantes do site sero casuais e que
visitaro o site muito esporadicamente, o que voc pode fazer para
torn-lo fcil sob o aspecto aprendizagem?
4) Assinale com [V] Verdadeiro ou [F] Falso:
a) ( ) A experincia do usurio no interfere na quantidade de

material de ajuda que deve ser oferecido no site.
b) ( ) Na ocorrncia de um erro, importante fornecer uma soluo,

uma opo de contato tcnico ou uma forma de retomar a
navegao.
c) ( ) O uso de metforas do mundo real raramente apoiam o

aprendizado na utilizao do site.
d) ( ) O uso de rtulos claros em campos de dados minimiza a

ocorrncia de erros de digitao.
e) ( ) Tempos de respostas lentos no so aspectos que interferem

na boa usabilidade do site.
f) ( ) Quanto menor o nmero de aes que o usurio ter que realizar

para atingir seu objetivo melhor para a usabilidade do site.
g) ( ) O uso de mensagens de erro, que propiciem a correo do

mesmo so fundamentais para a interao.
h) ( ) As pginas do site imprimem perdendo a formatao. Isso

no problema, pois o site pode ser visto perfeitamente no
monitor de vdeo.
Unidade 4 109
Book.indb 109 18/01/12 11:15

5) Projetar um site tendo o usurio como centro do projeto importante,

mas to importante quanto medir o grau de usabilidade obtido na
interao. Por que essa afirmao verdadeira e como voc pode
promov-la no site Boa Noite?
Saiba mais
Leia mais sobre usabilidade em:
Jakob Nielsens Website um dos papas da usabilidade.Seu site

sempre atualizado com notas e dicas de usabilidade.
Designing Web Applications: New strategies for dealing with

tough design problems.
Human-Computer Interfaces - Aponta para diversos outros sites

interessantes sobre interfaces de usurio. Elaborado pelo grupo
Usernomics.
O site Design Web traz 970 links sobre usabilidade, distribudos

em diferentes temas como metodologias, estratgias de design,
tecnologias, entre outros.
ROCHA, H. V.; BARANAUSKAS, M. C. C. Design e

avaliao das interfaces humano-computador. 12 Escola de
Computao. So Paulo: IME-USP, 2000.
110
Book.indb 110 18/01/12 11:15

5
unidade 5
Avaliando a usabilidade
de websites
Estabelecer critrios sobre a qualidade de um
website.
Estar apto a realizar a avaliao de websites.
Reconhecer tcnicas de avaliao.
Sees de estudo
Seo 1 Por que avaliar websites?
Seo 2 Tcnicas prospectivas
Seo 3 Tcnicas preditivas ou diagnsticas
Seo 4 Tcnicas preditivas: avaliaes heursticas
Seo 5 Tcnicas preditivas: inspeo cognitiva da

intuitividade
Seo 6 Tcnicas preditivas: listas de verificao
Seo 7 Tcnicas objetivas
Book.indb 111 18/01/12 11:15


Quando voc desenvolve um projeto, ideias e decises fazem com
que nossa capacidade de avaliao fique limitada em funo do
envolvimento com o projeto. Existem muitos mtodos que podem
determinar se seu site bom ou ruim. Muitos desses mtodos
ocorrem em estgios iniciais do projeto. Por isso, voc precisa
estabelecer exatamente quais critrios devem ser avaliados e qual
metodologia mais se adapta ao projeto.
Quando voc realiza uma avaliao fundamentada na usabilidade,

deve verificar a satisfao ou insatisfao que o cliente tem ao
utilizar seu site, a eficincia com que o usurio consegue executar a
tarefa completamente e os recursos necessrios para tal.
Nesta unidade, vamos analisar algumas metodologias que nos

permitem avaliar os quesitos acima. Voc vai ter a oportunidade
de colocar em prtica algumas dessas metodologias, avaliando
seus prprios projetos!
Vamos l?
Seo 1 Por que avaliar websites?

O motivo que nos leva a aplicar uma avaliao de interfaces garantir
que o sistema rena, realmente, todos os requisitos necessrios para
uma interao confortvel entre o usurio e a interface.
Para que voc faa uma avaliao realmente efetiva, ela deve ser
aplicada em todo o ciclo de vida do projeto de um aplicativo.
A aplicao de um teste especfico para cada fase depende da
aplicao e do que se pretende saber sobre o produto.
Em 1993, Hix afirmou que, ao realizarmos uma avaliao de

usabilidade, tem-se por finalidade:
validar a eficcia da interao entre o usurio/site,

confrontando a execuo das tarefas pretendidas pelo usurio;
112
Book.indb 112 18/01/12 11:15

verificar o quanto o site foi eficiente durante esta

interao, observando aspectos relacionados ao
tempo necessrio para realizao da tarefa, problemas
encontrados, necessidade de uso de ajuda etc;
observar aspectos subjetivos, como satisfao do usurio
com a interface.
Lembre-se: um ponto crucial o fato de que a interao

completamente dependente do ambiente fsico, tipo
de tarefa, tipo de usurio e equipamentos em que ela
ocorre. O sucesso ou o total fracasso da interao so
completamente dependentes desses fatores.
Podemos distinguir trs tipos de tcnicas de avaliao

ergonmica:
as tcnicas prospectivas, que buscam a opinio do
usurio sobre a interao com o sistema;
as tcnicas preditivas ou diagnsticas, que buscam
prever os erros de projetos de interfaces sem a
participao direta de usurios;
as tcnicas objetivas ou empricas, que buscam
constatar os problemas a partir da observao do usurio
interagindo (utilizando) com o sistema.
Em que situao pode-se usar cada uma delas?
A figura, a seguir, tenta esclarecer essa dvida, apontando as

tcnicas mais interessantes para cada etapa do ciclo de vida:
Unidade 5 113
Book.indb 113 18/01/12 11:15

Anlise dos usurios

e necessidades de uso
Especificao de requisitos
Tcnicas Prospectivas
Projeto preliminar
Projeto detalhado Tcnicas Preditivas
Implementao Tcnicas Objetivas
Figura 5.1 - Uso de tcnicas de avaliao no decorrer do projeto

Fonte: Cybis (2003).
O uso destas tcnicas pode acontecer em etapas iniciais do

projeto, conforme apresentado na Figura 5.1. Durante a
especificao de requisitos e no projeto preliminar, podem-
se aplicar tcnicas prospectivas. Quando estamos no projeto
detalhado, aplicam-se tcnicas preditivas e durante a
implementao, lanamos mo das tcnicas objetivas.
Seo 2 Tcnicas prospectivas
As tcnicas prospectivas baseiam-se na aplicao de

questionrios/entrevistas com o usurio para avaliar
sua satisfao ou insatisfao em relao ao sistema e
sua operao.
O uso do questionrio pode ser aplicado durante toda a vida

til do site, sendo uma fonte primorosa de informaes sobre
facilidades, dificuldades, sugestes e crticas do usurio potencial.
114
Book.indb 114 18/01/12 11:15

O QUIS - Questionaire for User Interaction Satisfaction um

modelo de questionrio de satisfao disponibilizado na internet,
que pode servir de modelo para sua empresa. Ele abrange
aspectos como legibilidade, layout de telas, significado de cones,
interao e terminologia.
Veja no quadro, a seguir, um recorte do questionrio QUIS.
5.4.1 Mensagens que aparecem na tela so: Confusas Claras

123456789 No aplicvel
5.4.2 Instrues para comando ou seleo so: Confusas Claras

123456789 No aplicvel
Quadro 5.1 - Recorte do questionrio QUIS
Fonte: Norman (1989).
O SUMI foi desenvolvido pelo Human Factors Research Group

da Universidade de Cork, Irlanda e procura medir a usabilidade,
considerando percepo e atitudes dos usurios. O questionrio
distribudo em categorias como: usabilidade geral, efeito
psicolgico, suporte ao usurio, facilidade de aprendizado,
eficincia, controle, anlise consensual dos itens.
Se voc pretende elaborar um questionrio de satisfao, observe

os seguintes itens:
elabore um nmero pequeno de questes;

cuidado com questes ambguas, seja sucinto;
permita ao usurio expressar sua opinio por
meio de sugestes e crticas.
Seo 3 Tcnicas preditivas ou diagnsticas

Quando resolvemos utilizar tcnicas preditivas, a incluso de
usurios, que participam de forma direta na avaliao, no
acontece. Normalmente, a avaliao baseia-se em inspees de
verses intermedirias ou verses finais. Cybis (2003) classifica
essas inspees como:
Unidade 5 115
Book.indb 115 18/01/12 11:15

Avaliaes analticas envolvem a decomposio

hierrquica da estrutura da tarefa para verificar as
interaes propostas.
Avaliaes heursticas baseiam-se nos conhecimentos
ergonmicos e na experincia dos avaliadores, que
percorrem a interface ou seu projeto para identificar
possveis problemas de interao humano-computador.
Inspees por checklists dependem do conhecimento
agregado ferramenta de inspeo, uma vez que se
destinam a pessoas sem uma formao especfica em
ergonomia.
Avaliaes analticas
O uso da avaliao analtica procura prever a usabilidade, a
partir de modelos ou representaes de sua interface e de seus
usurios. A avaliao aplicada nas etapas iniciais do projeto,
quando inicia-se a concepo de interfaces humano-computador.
Mesmo que nessa fase tenhamos poucas certezas sobre o projeto,
j possvel verificar questes como a consistncia, a carga
de trabalho e o controle do usurio sobre o dilogo proposto.
Quando iniciamos o trabalho de especificao da futura
tarefa interativa, podemos utilizar formalismos como o MAD
(Mthode Analytique de Description des tches) e o GOMS (Goals,
Operators,Methods and Selections rules).
GOMS - Goals, Operators, Methods and Selections Rules

O modelo GOMS Goals, Operations, Methods and Selection rules
foi proposto em 1983, por Card, Moran e Newell, congregando
tcnicas de modelagem e de anlise de tarefas.
Nesse modelo, so descritos os mtodos necessrios realizao

de objetivos especficos. Nesse caso, voc v os mtodos como
uma srie de passos que consistem em operadores (aes) que os
usurios realizam. Quando h mais de um mtodo disponvel
para a realizao de um objetivo, o modelo GOMS inclui regras
116
Book.indb 116 18/01/12 11:15

de seleo (SRs), que permitem escolher o mtodo apropriado,

dependendo do contexto (PREECE et al, 1994).
O objetivo (Goals) o que o usurio quer realizar,

sua meta. possvel subdividir o objetivo geral em
subobjetivos hierarquicamente.
Ao acessarmos um site de banco na internet, podemos ter o

objetivo principal de realizar um determinado pagamento. Mas
temos objetivos menores, como: informar conta, informar senha,
dados da fatura...
O Operador uma ao que deve ser realizada a

servio de um objetivo. Os operadores podem ser
atos Motores (Clicar, Teclar, Arrastar, Mover rosto),
Cognitivos (Lembrar, Planejar, Raciocinar), Perceptivos
(Ver, Ouvir, Sentir ) ou uma combinao de todos.
Para efetuar a compra,

deve acionar o boto
compre _ > temos aqui
um operador.
Figura 5.2 - Uso de operador na metodologia GOMS

Fonte: Submarino (2010).
Os Mtodos so a sequncia de passos para se atingir

uma meta.
Para efetuar a compra neste site do CD selecionado, solicita-se

que seja embrulhado para presente, entregue em um determinado
endereo e a venda seja parcelada em 2 vezes.
Unidade 5 117
Book.indb 117 18/01/12 11:15

As Selection rules expressam opes alternativas

entre mtodos e operadores.
O MAD - Mthode Analytique de Description des Tches

O modelo MAD foi sugerido por Scapin (1992) e permite
decompor as tarefas em subtarefas. O conceito de tarefa
representado por um objeto genrico chamado de objeto-tarefa,
que definido por um conjunto de elementos. Alm disso, cada
objeto-tarefa (folha da rvore hierrquica da decomposio)
identificado por um nome e um nmero.
Assim, cada tarefa ser representada pelas seguintes

caractersticas:
identificao da tarefa (nmero e nome);

elementos da tarefa (finalidade, estgio inicial, pr-
condies, corpo da tarefa, ps-condies, estgio final);
atributos da tarefa.
Seo 4 Tcnicas preditivas: avaliaes heursticas
A avaliao heurstica uma tcnica que prope a

avaliao sistemtica para identificao de problemas
de usabilidade.
Por ser uma tcnica de fcil aplicao, ela largamente utilizada.

Os problemas so detectados por meio de uma grade de anlise
(formada por princpios de usabilidade reconhecidos), que
orientam o avaliador em aspectos relacionados s tarefas e aos
objetivos do usurio final.
118
Book.indb 118 18/01/12 11:15

Quando voc inicia esse tipo de avaliao, importante fornecer

aos avaliadores, antes da inspeo, informaes sobre o contexto
de uso do site, possveis cenrios em que a interao ocorre e
passos necessrios para que o usurio atinja suas metas.
Pollier (1991) descreveu as diferentes formas de se conduzir uma

avaliao heurstica:
Abordagem por objetivos dos usurios: o avaliador

aborda a interface a partir de um conjunto de tarefas e
subtarefas principais dos usurios, ou relacionadas aos
objetivos principais do software.
Abordagem pela estrutura de interface: por essa

estratgia, especialmente direcionada para dilogos por
menu, o avaliador aborda a interface como uma rvore de
menu, com nveis hierrquicos das aes que permitem
as transies de um nvel a outro. Dois encadeamentos
so possveis nessa estratgia: exame por profundidade ou
largura da rvore.
Abordagem pelos nveis de abstrao: o avaliador

aborda a interface como um modelo lingustico
estruturado em camadas de abstrao, que podem ser
examinadas em dois sentidos: top-down ou bottom-up.
Abordagem pelos objetos das interfaces: o avaliador

aborda a interface como um conjunto de objetos.
Abordagem pelas qualidades das interfaces: o avaliador

aborda a interface a partir das qualidades ou heursticas
de usabilidade que elas deveriam apresentar.
Se voc pretende realizar uma avaliao heurstica,

considere como ideal o nmero de 3 a 5 avaliadores.
O uso de avaliadores experientes aumenta a chance
de sucesso na avaliao, pois ela baseada no
conhecimento de usabilidade dos avaliadores.
Para uma avaliao heurstica, necessrio que voc obtenha

conhecimentos ergonmicos. Que tal conhecer um pouco sobre
as heursticas propostas por Scapin e Bastien em 1993?
Unidade 5 119
Book.indb 119 18/01/12 11:15

Heursticas ergonmicas de Bastien e Scapin

Bastien e Scapin (1993) definiram oito critrios principais de
usabilidade, que so subdivididos em subcritrios elementares:
1. Conduo
A conduo refere-se aos meios disponveis para

aconselhar, orientar, informar e conduzir o usurio na
interao com o computador (mensagens, alarmes,
rtulos etc.).
Uma boa conduo facilita o aprendizado e a utilizao do

sistema, permitindo que o usurio:
saiba a qualquer tempo onde ele se encontra numa
sequncia de interaes ou na execuo de uma tarefa;
conhea as aes permitidas, bem como suas
consequncias; e
obtenha informaes suplementares (eventualmente por
demanda).
Quatro subcritrios participam da conduo: a presteza, o

agrupamento/distino entre itens, o feedback imediato e a
legibilidade.
2. Carga de trabalho
O critrio Carga de trabalho diz respeito a todos

elementos da interface que tm um papel importante
na reduo da carga cognitiva e perceptiva do usurio
e no aumento da eficincia do dilogo.
Quanto maior for a carga de trabalho, maior ser a probabilidade

de se cometerem erros. E tambm, quanto menos o usurio for
distrado por informaes desnecessrias, mais ele ser capaz de
desempenhar suas tarefas eficientemente. Alm disso, quanto
menos aes forem necessrias, mais rpidas as interaes.
120
Book.indb 120 18/01/12 11:15

O critrio carga de trabalho est subdividido em dois: brevidade

e densidade informacional.
Veja na Figura 5.3 que, para realizar a busca do imvel por

estado, o internauta deve percorrer toda a lista de seleo at
encontrar o estado desejado. A caixa apresenta os estados sem
nenhum tipo de classificao, dificultando a localizao do estado
desejado pelo usurio, aumentando a carga de trabalho, pois
ela ter que percorrer a lista, lendo as letras iniciais de todos os
estados, at encontrar o desejado.
Figura 5.3 - Exemplo de quebra do critrio carga de trabalho

Fonte: Rede Imobiliria Brasileira (2005).
3. Controle explcito
O critrio controle explcito diz respeito tanto ao

processamento explcito pelo sistema das aes do
usurio quanto ao controle que os usurios tm sobre
o processamento de suas aes pelo sistema.
Quando os usurios definem explicitamente suas entradas

e quando essas entradas esto sob o controle deles, erros e
ambiguidades so limitados. Alm disso, o sistema ser melhor
aceito pelos usurios se eles tiverem controle sobre o dilogo.
Unidade 5 121
Book.indb 121 18/01/12 11:15

O critrio controle explcito se subdivide em dois critrios: aes

explcitas do usurio e controle do usurio.
4. Adaptabilidade
A adaptabilidade de um sistema diz respeito a

sua capacidade de reagir conforme o contexto, e
conforme as necessidades e preferncias do usurio.
Uma interface no pode atender ao mesmo tempo a todos os seus

usurios em potencial. Para que ela no tenha efeitos negativos
sobre o usurio, essa interface deve, conforme o contexto,
adaptar-se ao usurio. Por outro lado, quanto mais variadas
so as maneiras de realizar uma tarefa, maiores so as chances
que o usurio possui de escolher e dominar uma delas no curso
de seu aprendizado. Deve-se, portanto, fornecer ao usurio
procedimentos, opes, comandos diferentes, permitindo-lhe
alcanar um mesmo objetivo.
Dois subcritrios participam da adaptabilidade: a flexibilidade
e a considerao da experincia do usurio.A adaptabilidade
se refere flexibilidade e aos meios colocados disposio do
usurio, que lhe permitem personalizar a interface, a fim de
levar em conta as exigncias da tarefa, de suas estratgias ou
seus hbitos de trabalho. Ela corresponde tambm ao nmero
de diferentes maneiras disposio do usurio para alcanar
um certo objetivo. Trata-se, em outros termos, da capacidade da
interface se adaptar s variadas aes do usurio. No exemplo,
a seguir, o usurio pode listar os produtos por ordem de produto,
menor ou maior preo e marca. Isto flexibiliza a utilizao do site.
Figura 5.4 - Exemplo positivo de adaptabilidade

122
Book.indb 122 18/01/12 11:15

5. Gesto de erros
A gesto de erros diz respeito a todos os mecanismos

que permitem evitar ou reduzir a ocorrncia de erros
e, quando eles ocorrem, que favoream sua correo.
Esse critrio diz respeito aos mecanismos empregados para

detectar e prevenir os erros de entradas de dados ou comandos,
ou possveis aes de consequncias desastrosas e/ou no
recuperveis. Refere-se tambm qualidade das mensagens,
pertinncia, legibilidade e exatido da informao dada ao
usurio sobre a natureza do erro cometido (sintaxe, formato etc.),
e sobre as aes a executar para corrigi-lo.
Trs subcritrios participam da manuteno dos erros: a proteo
contra os erros, a qualidade das mensagens de erro e a correo
dos erros.
Figura 5.5 - Exemplo de quebra do critrio carga de trabalho, gesto de consistncia

Fonte: Rede Imobiliria Brasileira (2005).
Na Figura 5.3, ao iniciarmos a interao, foi solicitada a busca

no estado da Bahia para casas com locao disponvel para
temporada. O resultado da busca foi esta pgina, Figura 5.5,
pois o internauta se pergunta: digitei algo errado? Onde esto os
imveis da Bahia?
Unidade 5 123
Book.indb 123 18/01/12 11:15

Nesse caso, temos um erro de apresentao. Por outro lado, se ele

quiser continuar a interao mesmo assim, a informao j digitada
na Figura 5.3 (estado) deve ser redigitada, o que duplica a carga de
trabalho do usurio. Mas, nesta pgina, somente o estado do Rio de
Janeiro est disponvel, quando, na primeira, tnhamos uma lista de
estados a ser selecionada! Isso nos traz problemas de Gesto de erros,
compatibilidade, se o usurio entrou na pesquisa porque queria um
imvel na Bahia, como s posso locar no Rio de Janeiro?
Figura 5.6 - Exemplo de problema de consistncia

Fonte: Carro Novo (2005).
Observe os botes desta pgina (Clique Aqui, Pesquisar, Entrar).

Eles so homogneos no projeto de design?
6. Homogeneidade
O critrio homogeneidade refere-se forma na

qual as escolhas na concepo da interface (cdigos,
denominaes, formatos, procedimentos etc.) so
conservadas idnticas em contextos idnticos, e
diferentes para contextos diferentes.
124
Book.indb 124 18/01/12 11:15

Os procedimentos, rtulos, comandos etc. so melhor reconhecidos,

localizados e utilizados, quando seu formato, localizao ou sintaxe
so estveis de uma tela para outra, de uma seo para outra.
Nessas condies, o sistema mais previsvel e a aprendizagem
mais generalizvel; os erros so diminudos. necessrio escolher
opes similares de cdigos, procedimentos, denominaes
para contextos idnticos e utilizar os mesmos meios para
obter os mesmos resultados. conveniente padronizar tanto
quanto possvel todos os objetos quanto ao seu formato e sua
denominao, e padronizar a sintaxe dos procedimentos.
A falta de homogeneidade nos menus, por exemplo, pode

aumentar consideravelmente os tempos de procura.
7. Compatibilidade
O critrio compatibilidade refere-se ao acordo

que possa existir entre as caractersticas do usurio
(memria, percepo, hbitos, competncias, idade,
expectativas etc.) e das tarefas, de uma parte, e a
organizao das sadas, das entradas e do dilogo de
uma dada aplicao, de outra. Ela diz respeito tambm
ao grau de similaridade entre diferentes ambientes e
aplicaes.
A eficincia aumentada quando:
os procedimentos necessrios ao cumprimento da tarefa so

compatveis com as caractersticas psicolgicas do usurio;
os procedimentos e as tarefas so organizadas de maneira
a respeitar as expectativas ou costumes do usurio;
quando as tradues, as transposies, as interpretaes
ou referncias documentao so minimizadas.
Os desempenhos so melhores quando a informao

apresentada de uma forma diretamente utilizvel (telas
compatveis com o suporte tipogrfico, denominaes de
comandos compatveis com o vocabulrio do usurio etc.).
Unidade 5 125
Book.indb 125 18/01/12 11:15

8. Significado dos cdigos e denominaes

O critrio significado dos cdigos e denominaes diz respeito
adequao entre o objeto ou a informao apresentada ou pedida
e sua referncia. Termos pouco expressivos para o usurio podem
ocasionar problemas de conduo, onde ele pode ser levado a
selecionar uma opo errada.
Se voc utiliza uma codificao significativa, a recordao e o

reconhecimento so melhores. Se isso no ocorre, o usurio
conduzido a cometer erros.
Seo 5 Tcnicas preditivas: inspeo cognitiva da

intuitividade
Esta tcnica um tipo de avaliao heurstica, onde os especialistas
enfocam especificamente os processos cognitivos que se estabelecem
quando o usurio realiza a tarefa interativa pela primeira vez
(KIERAS; POLSON, 1991 apud CYBIS, 2003). Ela visa a avaliar
as condies que o software oferece para que o usurio faa um
rpido aprendizado das telas e das regras de dilogo.
A intuitividade o aspecto central na aplicao de

uma inspeo cognitiva.
Nessa inspeo, o avaliador deve observar atentamente a

capacidade do usurio de realizar a tarefa, assim como seu
conhecimento no uso de sistemas informatizados. O avaliador
deve estar ciente do caminho a ser percorrido pelo usurio para
atingir seus objetivos.
De posse dessas informaes, ele passa a percorrer os caminhos
previstos, aplicando, para cada ao, o seguinte checklist
(KIERAS; POLSON, 1991 apud CYBIS, 2003):
126
Book.indb 126 18/01/12 11:15

1. O usurio realiza a tarefa corretamente?

2. Ao encontrar-se no passo inicial de determinada tarefa, o
usurio, baseado no que lhe apresentado, consegue realizar
o objetivo previsto pelo projetista?
3. O usurio percebe o objeto associado a esta tarefa? Este
objeto est suficientemente vista do usurio?
4. O usurio reconhecer o objeto como associado tarefa? As
denominaes ou representaes grficas so representativas
da tarefa e significativas para o usurio?
5. O usurio saber operar o objeto? O nvel de competncia
na operao de sistemas informatizados compatvel com a
forma de interao proposta?
6. O usurio compreender o feedback fornecido pelo sistema
como um progresso na tarefa?
A proposta dos autores dessa tcnica de que os prprios projetistas

possam aplic-la no desenvolvimento do sistema interativo.
Como apresentar os resultados da avaliao heurstica

Quando voc detecta os problemas de usabilidade, eles devem ser
associados aos princpios de usabilidade que foram violados. Ao
fazer o relatrio, voc pode ainda fazer sugestes quanto soluo
mais interessante. O relatrio deve ser consistente, para tanto, a
padronizao nas descries dos problemas fundamental.
Os problemas podem ainda ser classificados quanto ao grau de

severidade, o que permite uma maior sensibilizao da equipe
de desenvolvimento.
Unidade 5 127
Book.indb 127 18/01/12 11:15

Seo 6 Tcnicas preditivas: listas de verificao

As inspees de usabilidade por listas de verificao so vistorias
baseadas em requisitos considerados necessrios para atingir um
objetivo luz de consideraes ergonmicas.
A aplicao de uma lista de verificao ou um site, pode ser

realizada por profissionais no especialistas em ergonomia, com
boas possibilidades de sucesso. Isso possvel devido ao formato
proposto nas listas que, normalmente, so elaboradas de forma
objetiva. As questes so agrupadas em categorias e solicitam a
confirmao ou negao das perguntas propostas:
Sim No No aplicvel
O site apresenta mapa? X
A pgina apresenta o uso de cones X
significativos?
Na escolha de uma lista de verificao importante observar:

se os resultados produzidos so uniformes e abrangentes
em termos de identificao de problemas de usabilidade;
se a lista permite ao avaliador a insero de comentrios;
se a lista for automatizada, o formato do relatrio final;
se as categorias propostas atingem os objetivos de sua
avaliao.
Algumas listas encontram-se disponveis para o acesso pblico.

Que tal dar uma olhada nelas?
128
Book.indb 128 18/01/12 11:15

WEAKLEY, Russ. A web standards checklist <http://www.maxdesign.

com.au/presentation/checklist.cfm>
A traduo do checklist original encontra-se no site de Maurcio Samy

Silva <http://www.maujor.com/tutorial/wschecklist.php>
Ergolist checklist automatizado, que fornece um diagnstico

no final. Autor: Laboratrio de Utilizabilidade UFSC <http://www.
labiutil.inf.ufsc.br/ergolist/>
List of Checkpoints for Web Content Accessibility Guidelines

1.0. Autores: Wendy Chisholm, Trace R & D Center, University of
Wisconsin Madison. Gregg Vanderheiden, Trace R & D Center,
University of Wisconsin Madison. Ian Jacobs, W3C <http://www.
w3.org/TR/1999/WAI-WEBCONTENT-19990505/checkpoint-list >
Seo 7 Tcnicas objetivas
As tcnicas empricas, que contam com a participao

direta de usurios, referem-se basicamente aos ensaios
de interao e s sesses com sistemas espies.
Ensaios de interao
Quando voc realiza um ensaio de interao, o usurio participa
da avaliao por meio de uma amostra do pblico-alvo,
utilizando-se do site a ser avaliado. Voc deve usar cenrios com
tarefas tpicas ou crticas. Os dados so originados da observao
dos usurios durante a interao.
Existem tcnicas para a aplicao dos ensaios de interao

(CHAN, 1996):
Unidade 5 129
Book.indb 129 18/01/12 11:15

Teste com pares de usurios pares de usurios so

colocados na execuo das tarefas. Neste caso, o dilogo
entre os usurios fortalecido, proporcionando a troca de
informaes, auxiliando na execuo de tarefas.
Teste com usurio e avaliador o observador
acompanha a interao. Em caso de necessidade,
ele auxilia o usurio. O observador deve evitar o
constrangimento do usurio, permitindo que execute a
tarefa da forma pessoal, sem interferncias.
Verbalizao simultnea durante o teste, o usurio
comenta seu raciocnio. Nesta tcnica, alm da execuo
da tarefa, o usurio verbaliza o raciocnio que o levou a
tomar esta ao.
Quando voc for aplicar essa tcnica, observe os seguintes itens

(CHAN, 1996):
Esclarea o usurio sobre o teste e sua finalidade;

Selecione usurios que queiram participar, no forando
essa participao;
Respeite os limites do usurio, o cansao ou constrangimento
muitas vezes invalidam os resultados do ensaio.
O uso de cmaras de vdeo, gravadores e softwares espies
(gravadores de eventos) colaboram para a preciso do ensaio.
Esses recursos permitem que detalhes ocorridos durante a
interao sejam reproduzidos e revistos de forma mais minuciosa.
Deixe claro ao usurio que sua competncia pessoal no est

sendo avaliada, mas sim a interface.
130
Book.indb 130 18/01/12 11:15

Sntese
Durante um projeto, comum que, apesar de todos os cuidados,

ainda assim ocorram descuidos e que esses descuidos acabem
por gerar problemas de usabilidade na interface. Outra fonte
de problemas pode ser o desenvolvimento de um projeto sem a
observao de requisitos de usabilidade. A garantia de usabilidade
do produto fica totalmente comprometida.
Nesses casos, a soluo proposta nesta unidade a aplicao de

testes de usabilidade. Assim, voc pode garantir que o sistema
rena os requisitos necessrios a uma interao confortvel entre
o usurio e a interface.
Voc estudou, na unidade, diferentes tcnicas, como a

prospectiva (com interveno direta do usurio) e a preditiva
(sem a participao efetiva do usurio). Durante o estudo voc
conheceu heursticas como as de Bastien e Scapin, que apoiam
avaliaes heursticas pautadas em polticas de usabilidade.
Foram apresentadas situaes de uso para as diferentes tcnicas,

como a utilizao de listas de verificao, uma atividade de
avaliao bastante simples que no exige conhecimento do usurio;
avaliaes por meio de ensaios de interao, em que o objetivo
reconhecer e identificar a forma como o usurio atinge seus
objetivos no processo que est sendo avaliado, utilizando-se a
figura de um observador; avaliaes analticas, como o GOMS e o
MAD, onde tarefas so decompostas, oferecendo o entendimento
completo de como o usurio realiza o seu processo de trabalho.
Unidade 5 131
Book.indb 131 18/01/12 11:15

1) O que voc deve evitar quando est elaborando questes para um

questionrio de satisfao?
a) ( ) Elaborar um nmero de questes que cubra todos os aspectos
da interface, mesmo que isso represente um nmero elevado
de questes. Pois quanto mais completo, melhor ser seu
grupo de informaes sobre o site.
b) ( ) Evitar sugestes do usurio para no ter que modificar o projeto.
c) ( ) Questes de duplo sentido confundem o usurio.
d) ( ) Incentivar a expresso de crticas, pois essas contribuem para o

aperfeioamento do projeto.
2) Com base nos critrios ergonmicos previstos por Bastien e Scapin, faa
uma avaliao heurstica de um site. O resultado do exerccio ser um
relatrio classificado por critrios. Observe o exemplo abaixo:
Exemplo do relatrio:
Site: www.fus.br
Compatibilidade: o site faz uso de diferentes decises de design na
representao de botes
Gesto de erros: a pgina que realiza a finalizao do pedido, ao
digitar o frete, apresenta uma mensagem de erro de programao.
O site a ser avaliado ser <www.pontofrio.com.br>. Faa todos os passos

necessrios para simular a compra de um produto, avaliando a pgina
segundo os critrios.
132
Book.indb 132 18/01/12 11:15

3) Assinale as expresses abaixo, identificando o que pode e o que

vlido para:
(A) Testes com pares de a) ( ) Esta tcnica utilizada quando o
usurios. projetista encontra dificuldades
em entender a lgica de
(B) Testes com realizao da tarefa por parte do
verbalizao. usurio, sendo que o usurio tem
(C) Testes com usurio e dificuldade em expressar essa
avaliador. lgica.
(T) Todas as tcnicas. b) ( ) fundamental na tcnica que o

usurio sinta-se confortvel, sem
constrangimentos.
c) ( ) Nesse caso, o avaliador apoia

toda a interao e, se for
necessrio, intervm oferecendo
ajuda.
d) ( ) A troca de ideias entre os

usurios provoca um ambiente
informal, fortalecendo a
segurana do usurio na
execuo da tarefa.
e) ( ) Quando usamos essa tcnica,

ocorre a verbalizao da tarefa
pelo usurio.
Unidade 5 133
Book.indb 133 18/01/12 11:15

Saiba mais
Para saber mais sobre o mtodo GOMS, leia o artigo On the
Analysis of Groupware Usability Using Annotated GOMS
de Pedro Antunes Marcos e R.S. Borges sobre a aplicao do
GOMS, disponvel na midiateca.
Veja na Midiateca do Espao UnisulVirtual de Aprendizagem as

Heursticas de usabilidade, propostas por Jacob Nielsen.
Os Princpios de Dilogo, propostos pela norma ISO 9241:10.
O Ergolist um checklist automatizado que fornece um

adiagnstico no final.
134
Book.indb 134 18/01/12 11:15

6
unidade 6
Navegao
Determinar a estrutura mais adequada de acordo
com o perfil e misso do site.
Propor mecanismos facilitadores para a navegao

do site.
Sees de estudo
Seo 1 Navegar preciso
Seo 2 Estrutura do website
Seo 3 Como decidir a melhor estrutura?
Seo 4 A confuso dos hiperdocumentos
Seo 5 Recomendaes do W3C para navegao

na web
Book.indb 135 18/01/12 11:15


Para entendermos o conceito e a importncia da estrutura de
navegao de um website, podemos fazer um paralelo com o
mundo real. Imagine voc dirigindo seu carro, procurando a
casa de um amigo em uma cidade como So Paulo. Agora,
imagine que, no bairro em questo, no existem placas de
sinalizao com o nome da rua. Como voc se sente? Tantos
prdios, tantas ruas, tantas casas, mas voc no consegue
localizar o que deseja! Na internet acontece a mesma coisa.
Quando a navegao confusa, o internauta fica perdido, no
encontra a informao, no consegue retornar a uma etapa
anterior e no encontra o que espera.
Nesta unidade, vamos identificar as estruturas de organizao de

um site que nos levam navegao. Voc tambm vai encontrar
algumas dicas para melhorar a navegao do site e da estrutura
mais adequada, de acordo com o tipo de informao proposta.
Vamos iniciar o cruzeiro?
Seo 1 Navegar preciso
Se eu lhe perguntasse: o que navegao? O que

voc responderia?
bem provvel que ao lhe perguntar, voc lembraria daquela

propaganda com um barquinho no final do horizonte. Ou ser
que lembraria daquela pgina, onde o design refinado de botes,
os links e imagens muito bem estruturadas convidam o usurio
imerso no site?
O verbo navegar rico em significados, mas se voc

olhar em um dicionrio, a palavra navegar vem do latim
navigare e significa movimento por meio do espao.
136
Book.indb 136 18/01/12 11:15

Se analisarmos amplamente a palavra, podemos pensar que o

movimento atravs do espao pode incluir o movimento virtual
por intermdio de espaos cognitivos formados por informaes e
pelo conhecimento existente (WHITAKER, 1998).
Quando estamos navegando em um site, o movimento no espao

no necessariamente real, mas dentro de uma metfora, quanto
mais prxima da realidade, mais verdadeira para o navegador.
Mas at que ponto a navegao do site importante?
Segundo Nielsen (2000), quando o projeto de navegao ruim,

os prejuzos so reais:
analisados 15 sites comerciais, os usurios conseguiram
encontrar a informao desejada em 42% dos casos;
durante uma sesso de compras, 62% dos compradores
online desistiram do item que estavam procurando;
dos que no obtiveram sucesso na compra, 20% tornaram
a entrar no mesmo site pelo menos por trs vezes e
desistiram da interao novamente.
A navegao eficiente deve ser centrada em objetivos possveis

do usurio e nas aes necessrias para alcanar esse objetivo. Se
voc entendeu esse conceito, voc acabou de dar o primeiro passo
para entender o projeto da navegao.
Seo 2 Estrutura do website

A estrutura de um website define como as informaes e os
elementos da interface so organizados. A estrutura define a
navegao da interface na web e, consequentemente, molda o
modelo mental que o usurio ter sobre como a informao est
organizada no site.
Unidade 6 137
Book.indb 137 18/01/12 11:15

A definio da estrutura deve considerar limitaes cognitivas e

computacionais. O que isso quer dizer? Os internautas trabalham
com pores de informaes limitadas e essa limitao est
diretamente relacionada ao tamanho de uma pgina.
Estrutura linear
A estrutura linear o meio mais simples de organizar a
informao. Ela apresentada em sequncia. Essa sequncia
pode ser alfabtica, cronolgica, ou de processamento de tarefas.
Ela vai do geral para o especfico.
Quando utilizar esta estrutura linear? Sempre que for possvel

definir que a tarefa exige uma sequncia de atividades. Por exemplo:
enciclopdias, sites de treinamento, sites de manuais, livros.
Figura 6.1 - Estrutura de navegao linear

Figura 6.2 - Estrutura de navegao linear alternativa

138
Book.indb 138 18/01/12 11:15

Estrutura hipertexto
Quando voc tem uma quantidade grande e complexa de
informaes, o uso da estrutura hierrquica ou hipertexto o
mais indicado. A maioria de nossos usurios est familiarizada
com uma estrutura hierrquica, o que facilita a memorizao e
o aprendizado relacionado navegao dentro da estrutura. A
estrutura hierrquica a mais utilizada.
Figura 6.3 - Estrutura de navegao hierrquica

Estrutura em rede
O uso de estruturas de rede procura imitar o pensamento
associativo e o fluxo livre das ideias do usurio. Deve ser possvel
ao internauta seguir seus interesses, explorando o poder de
associao de pginas na web.
Essa estrutura considerada perigosa, tendo em vista

a facilidade com que o usurio se perde dentro da
busca pela informao.
Mas quando usar? Voc pode considerar o seu uso em situaes

onde o usurio experiente na tarefa e precisa de informaes
adicionais. Outra situao que pode apoiar o uso dessa estrutura,
facilitando a navegao, o uso de uma metfora que o aproxime
do ambiente real, como, por exemplo, o ambiente virtual de uma
biblioteca ou museu.
Unidade 6 139
Book.indb 139 18/01/12 11:15

Figura 6.4 - Estrutura de navegao em rede

Seo 3 Como decidir a melhor estrutura?

Quando voc iniciar o processo de construo da especificao,
tenha em mente a organizao da estrutura. Leve em
considerao as seguintes questes definidas por Leite, Sieckenius
e Prares (2002):
A organizao est balanceada?
O usurio precisa navegar muito de uma pgina para outra em

uma mesma tarefa?
O usurio memoriza facilmente a organizao do site?
Use o modelo conceitual do domnio como base para a

organizao.
Utilize as categorias do domnio para organizar as informaes
e servios do sistema.
Evite que servios muito utilizados fiquem em partes muito
profundas de uma organizao.
Coloque um mapa disponvel em todos os pontos da
organizao.
140
Book.indb 140 18/01/12 11:15

Home page a pgina de entrada do site e deve refletir o

propsito do mesmo:
deve indicar quais os objetivos, as informaes e/ou servios do site;
deve indicar como interagir com o site para ter acesso aos recursos;
deve conter elos para acesso aos recursos;
deve indicar o responsvel pelo site e como entrar.
O uso de metforas facilita a navegao.
Voc pode fazer uso de botes ou menus pulldown para

implementar a navegao. Nesse caso, tome cuidado para no
confundir o usurio, e use os botes para executar comandos e
menus para a escolha de informaes.
Lembre-se de que os links devem indicar o contedo do destino

e o usurio deve identificar os elos facilmente. Isso deve evitar
que o usurio se sinta perdido. Sempre que possvel, faa uso de
atalhos que possam facilitar a navegao.
No esquea de permitir ao usurio a possibilidade de voltar atrs

em uma pgina anterior. A volta para a pgina principal deve
estar disponvel o tempo todo!
Seo 4 A confuso dos hiperdocumentos

Em 1995, Thuring, Hannrmann e Haake iniciaram estudos
em que descreveram a relao entre cognio e hipermdia,
em aplicaes onde os usurios realizam a busca por alguma
informao especfica para a resoluo de problemas.
Quando o usurio faz uso de um hiperdocumento, ele tem um

tipo de comportamento em relao leitura dos documentos,
diferente daquele utilizado em aplicaes em que no h uma
ideia clara sobre a informao que est sendo procurada.
Unidade 6 141
Book.indb 141 18/01/12 11:15

Uma das metforas prediletas em sistemas de

hiperdocumentos a metfora da viagem. Essa
metfora fornece ao internauta a sensao de navegar
pelos documentos.
Thuring, Hannrmann e Haake (1995) citam que um dos maiores

problemas mencionados pelo usurio o da desorientao:
Onde estou? Como cheguei aqui? De onde eu vim?
Tentando evitar esta situao, ao fazer uso de hiperdocumentos,
lembre-se (CARVALHO; FERREIRA, 2004):
informe sempre ao leitor sua posio atual em relao

estrutura geral;
permita reconstruir o caminho que o levou at sua
posio atual;
faa distino entre diferentes opes para se mover
dessa posio.
Raciocine da seguinte maneira: quando voc facilita

a orientao, voc apoia o usurio a encontrar seu
caminho. Quando voc oferece mecanismos que
facilitam a navegao, isso ajuda o usurio a criar
seu caminho.
Quando projetamos o hiperdocumento, o texto deve ser coerente:

o usurio recorda e entende melhor o texto se a navegao
coerente. Isso acontece porque o usurio consegue construir um
modelo mental a partir da sua leitura.
Algumas medidas prticas a serem tomadas durante a
modelagem da aplicao seriam fornecer ao usurio:
142
Book.indb 142 18/01/12 11:15

Mapas locais e regionais de navegao.
Busca por palavra-chave.
Indicao grfica ou textual dos caminhos de navegao.
Formulrios HTML para anotaes.
Marcos relevantes, em torno dos quais o internauta possa

navegar.
ndice.
Embedded menus.
Bookmarks.
Figura 6.5 - Exemplo positivo de navegao

Fonte: The Internet Public Library (2007).
A Figura 6.5 mostra o site da Internet Public Library, que

apresenta uma estrutura de hiperdocumentos, rica no processo
de navegao.
Unidade 6 143
Book.indb 143 18/01/12 11:15

Seo 5 Recomendaes do W3C para navegao na

web
O W3C um organismo reconhecido internacionalmente e tem
por objetivo estabelecer requisitos de qualidade para projetos web.
Entre diversos fatores, so ressaltadas questes relacionadas ao
mecanismo de navegao do site. Os pontos descritos pelo W3C e
traduzidos por Dias (2003) fazem meno ao uso de mecanismos
de navegao claros para o usurio.
Alguns dos pontos mais importantes a serem observados no

mecanismo de navegao so a coerncia e a sistematizao da
navegao. O uso de informaes de orientao, barras de navegao,
mapa do site aumenta as probabilidades de encontrar o que se procura
no site. Para que voc proponha um projeto coerente com esses
objetivos, existem alguns pontos que devem ser observados:
Identificar claramente o destino de cada link. Quando

voc fizer o texto do link, pense que ele pode ser lido fora
do contexto e que, nesse caso, deve ser claro e ilustrativo
o suficiente para ser entendido. Tambm extremamente
importante que o link seja conciso, ou seja: no escreva links
longos. Na Figura 6.6, temos um exemplo negativo, onde
cada link composto por praticamente uma parte do texto
da notcia, sendo que essa a home page do site.
Figura 6.6 - Site da UFSC

144
Book.indb 144 18/01/12 11:15

Fornecer metadados para acrescentar informaes

semnticas a pginas ou sites. Por exemplo, utilizar
RDF para indicar a autoria de um documento, o tipo de
contedo etc.
Resource Description
No esquea de informar ao internauta sobre como o site Framework (RDF)
uma linguagem para
organizado. Isso pode ser feito utilizando-se um mapa do site
representar informao
ou um sumrio. No esquea de deixar claro ao usurio quais as na internet. Arquivos
possibilidades do site em termos de acessibilidade. Lembre-se, o que RDF so modelos ou
no se sabe, no se usa! fontes de dados, tambm
conhecidos como
No site do senado federal, o internauta tem a possibilidade de se metadata. Eles tm como
localizar rapidamente, com a ajuda do mapa do site, assim como pode objetivos principais criar
um modelo simples de
descobrir todas as informaes disponveis nele. Veja a Figura 6.7:
dados, com uma semntica
formal, usar o vocabulrio
URI-based, usar uma
sintaxe XML-based e
suportar o uso de XML.
Fonte: About W3C Future,
2005
Figura 6.7 - Site do Senado Federal

Fonte: Brasil (2005b).
Unidade 6 145
Book.indb 145 18/01/12 11:15

Fornecer barras de navegao para destacar e dar acesso

ao mecanismo de navegao.
Procure agrupar links relacionados entre si, identificar o
grupo (em benefcio dos agentes do usurio) at que os
agentes do usurio se encarreguem de tal funo.
Ao usar funes de pesquisa, oferea diferentes tipos
de pesquisa. Assim, voc vai atingir diferentes nveis de
competncia e preferncias dos usurios.
Faa cabealhos, pargrafos, listas, onde o usurio
facilmente identifique a informao.
No esquea de fornecer informaes sobre colees de
documentos (isto , documentos compostos por vrias
Em HTML, por exemplo, especifica-se
colees de documentos por meio
pginas).
do elemento LINK e dos atributos Observe o site da empresa Salfer. Apesar de ser uma empresa com
rel e rev. Outra maneira de criar
um grande nmero de produtos, a proposta de navegaao do site
uma coleo construindo um
arquivo (por ex., com zip, tar e gzip,
no disponibiliza um mecanismo de busca que poderia facilitar a
stuffit) das diferentes pginas. busca do internauta. Outro ponto a ser observado a inexistncia
de um mecanismo de menu que apresente imediatamente ao
internauta todas as possibilidades de departamentos existentes na
loja, o usurio deve selecionar a combo box que se encontra inclusive
colocada de forma bastante discreta na pgina.
Figura 6.8 - Site da Salfer

Fonte: Salfer (2005).
146
Book.indb 146 18/01/12 11:15

Sntese
Nesta unidade, voc conheceu as diferentes maneiras pelas quais a

estrutura de um site pode ser organizada. Tambm esteve em contato
com recomendaes que procuram evitar situaes, onde o esquema
de navegao possa confundir o usurio durante sua interao.
Oferecer opes de voltar, de adaptar diferentes mecanismos de

navegao e, ainda assim, proporcionar ao internauta a segurana
de saber onde est e, principalmente, o prximo passo que deve
ser realizado para atingir seu objetivo, reduzem sensivelmente os
riscos de prejuzos em seu site.
1) Imagine-se construindo um site para a biblioteca do Senado, sabendo

que ela possui um acervo de aproximadamente 150.000 livros, 4.000
obras de referncia (dicionrios, enciclopdias, etc.) e 3.600 ttulos de
peridicos (revistas e jornais). A ordenao dos livros e folhetos nas
estantes por assunto, segundo a Classificao Decimal de Melvil
Dewey, e a classificao Decimal de Direito, de Dris Queiroz Carvalho.
Os peridicos esto organizados nas estantes em ordem alfabtica de
ttulos. Utiliza-se, ainda, o Cdigo de Catalogao Anglo-Americano
para a catalogao das obras. Qual a estrutura mais adequada? Linear,
hierrquica ou Hipermdia? Justifique.
Unidade 6 147
Book.indb 147 18/01/12 11:15

2) Cite alguns cuidados, que voc tomar, relacionados navegao do

site do hotel Boa Noite.
3) Ao definir a estrutura do site, verdadeiro afirmar:

a) ( ) Para definir a estrutura de forma coerente, necessrio
observar o usurio na realizao da tarefa, percebendo a
facilidade com que o mesmo a memoriza.
b) ( ) A home page deve dar ao internauta uma noo exata do
contedo do site, de forma breve, mas concisa.
c) ( ) O uso da estrutura em rede, quando acompanhada por uma
metfora, ainda a melhor estrutura para veicular sites que
objetivem treinamento de pessoal.
d) ( ) A confuso existente em muitos hiperdocumentos pode ser
creditada ao excesso de informaes do site.
4) Podemos considerar como aspectos que devem estar presentes em um

site, com uma boa estrutura de navegao:
a) ( ) O mapa completo do site s necessrio em sites que obedecem
a uma estrutura em rede, por essa ser bastante complexa.
b) ( ) A utilizao de rtulos significativos para seu pblico.
c) ( ) As rvores de navegao oferecidas devem ter mais de trs

nveis.
d) ( ) O oferecimento de links para a home page em todas as
pginas do site.
e) ( ) O mecanismo de busca oferecido pode ser substitudo por um
bom sistema de menus.
f) ( ) A apresentao de links de navegao deve estar sempre no
mesmo lugar, bem visveis, na parte superior da pgina (
esquerda, centrados ou direita). A consistncia de tipo de
letra ou cone, nesse caso, no importante.
148
Book.indb 148 18/01/12 11:15

Saiba mais
WHITAKER, Leslie A. Human navigation. In: FORSYTHE,

Chris; GROSE, Eric; RATNER, Julie (Org.). Human factors
and web development. Mahwah, New Jersey: L. Eribaum
Associates, 1998. p. 63 -71.
Se voc se interessa pelo uso de hipertextos em softwares

educacionais, leia o artigo Interatividade em Hipermdias
Educacionais: Problemas e Solues, escrito por Neide Santos e
Fernanda Campos. Ele est disponvel na internet.
Unidade 6 149
Book.indb 149 18/01/12 11:15

Book.indb 150 18/01/12 11:15
Para concluir o estudo
Durante esta disciplina, a principal oportunidade

vislumbrada pelo conteudista foi a de demonstrar as
possibilidades de transmitir ou no informao por uma
pgina web, estabelecendo ou no comunicao com o
usurio final. Somente estar disponvel na grande rede
no garante que a informao esteja sendo transmitida
como o cliente deseja.
Existem muitas etapas e conceitos que devem ser

seguidos para que isso ocorra com sucesso, tanto para o
cliente quanto para o internauta.
Um dos pontos centrais apresentados na disciplina foi o de

que o usurio final da pgina deve ser o maior referencial
durante o projeto, pois a ele que voc deseja atingir.
A partir desta necessidade inicial, descortinou-se

na disciplina fatores como projeto, imagens, textos,
qualidade da informao, das formas, dos diferentes
temas desenvolvidos em pginas, da usabilidade
necessria e como avali-la e finalmente as tendncias de
futuro da web. A concluso que se chega a de que cada
um dos fatores listados contribui de forma determinante
para o bom projeto de um site.
A finalizao desta disciplina s estar completa se voc,

aluno, aplicar esses conceitos na prtica, desenvolvendo
de forma disciplinada em projetos criativos todo o
conhecimento adquirido durante esta disciplina.
Book.indb 151 18/01/12 11:15

Book.indb 152 18/01/12 11:15
Referncias
ABOUT W3C FUTURE. 2005. Disponvel em <http://www.w3.org/

Consortium/future>. Acesso em: 22 maio 2010.
ANDERSON, J.; RAINIE, L. The Future of the Internet III. 14 de agosto
de 2008. Disponvel em: <http://www.pewinternet.org/Reports/2008/
The-Future-of-the-Internet-III.aspx>. Acesso em: 22 jun. 2009.
ANDRADE, J. T. Comparativo entre Browsers Internet Explorer
8 x Mozilla Firefox 3 x Apple Safari 4 e Google Chrome 1. 11
jun. 2009. Disponvel em: <http://whowmetech.com.br>. Acesso
em: 7 fev. 2010.
ANTONIOLI, Leonardo. Estatsticas, dados e projees atuais
sobre a Internet no Brasil. Disponvel em: <www.tobeguarany.
com>. Acesso em: 25 fev. 2010.
APRENDA a criar sites: o guia definitivo - tudo de que voc precisa
para criar sua pgina na Internet!. So Paulo: Digerati Books,
2004.
BASTIEN, J. M. C.; SCAPIN, D. L. Ergonomic criteria for the
evaluation of human-computer interfaces. Rocquencourt:
Institut National de Recherche en Informatique et en
Automatique, 1993.
______. Towards a method for task description: MAD. In:
BERLINGUERT, L.; BERTHELETTE, D. Proceedings of work with
Display Units (WWU89). North Holland: Elsevier Science, 1993.
______. Critres ergonomiques de Scapin et Bastien.
Disponvel em: <http://www.ergoweb.ca/criteres.html>. Acesso
em: 16 maio 2004.
BISHU, R. Human factors of the web design process. In: IEA.
Human Factors and Ergonomics Society (HFES) Congress.
Proceedings, San Diego, CA, p. I - 437-439, 2000.
BORGES, Roberto Cabral de Mello. Apostila de tcnicas de
apresentao. Universidade Federal do Rio Grande do Sul, 2003. il.
______. Pgina oficial. Disponvel em: <http://www.inf.ufrgs.
br/~cabral/>. 25 jun. 2010. Acesso em: 9 fev. 2005.
BOYLE, Cailin. Color harmony for the web: a guidebook to create
color combinations for web site design. Gloucester: Rockport, 2001.
Book.indb 153 18/01/12 11:15

BRASIL. Ministrio da Fazenda. 2005a. Disponvel em: <www.fazenda.gov.

br>. Acesso em: 29 abr. 2005. il.
_____. Senado Federal. 2005b. Disponvel em: <http://www.senado.gov.
br/>. Acesso em: 6 set. 2005. il.
BROGNOLI IMVEIS. 2005. Disponvel em: <http://www.brognoli.com.br/>.
Acesso em: 2 fev. 2005. il.
BUENOS AIRES ROCK. 2010. Disponvel em: <http://www.buenosairesrock.
com.ar/>. Acesso em: 11 jan. 2010. il.
CARLSON, Jeff; MALINA, Toby; FLEISHMAN, Glenn. Color: diseo grfico -
pginas web : las mejores webs. Mxico: G. Gili, 1999.
CARPANEZ, Juliana. Internet brasileira cresce 10% e chega a 36,4 milhes
de usurios. G1. Disponvel em: <http://g1.globo.com/Noticias/Tecnologia/
0,,MUL1274233-6174,00.html> edio 20/08/2009. Acesso em: 23 fev. 2010.
CARMACK, Carmem; TYSON, Jeff. Como funcionam os monitores de
computador. Disponvel em <http://www.hsw.uol.com.br>. Acesso em: 19
fev. 2010.
CARRO NOVO. 2005. Disponvel em: <http://www.carronovo.com.br/>.
Acesso em: 14 set. 2005. il.
CARVALHO, F.; FERREIRA, M. A. Learning and Interface Design of
Educational Hypermedia Systems. Congresso Nacional de ambientes
Hypermdia para aprendizagem. Florianpolis, 2004.
CASABONA, Rafael. Tendncias do Futuro. 30 out. 2009. Disponvel em:
<http://imasters.uol.com.br/artigo/10557/tendencias/tendencias_do_
futuro/>. Acesso em: 14 fev. 2010.
CHOSTAKOVIS, Eduardo. Teste de Daltonismo. 1999. Disponvel em
<http://chost.sites.uol.com.br/Principal/teste_de_daltonismo.html>.
Acesso em: 11 jan. 2010. il.
COLOR VOODOO. Color logic for web site design. Disponvel em: <http://
www.colorvoodoo.com/cvoodoo5.html>. Acesso em: 11 jan. 2010. il.
COMCIENCIA. Qual o sentido da Web. 2005. Disponvel em: <http://www.
comciencia.br>. Acesso em: 14 jun. 2010.
CONSELHO DA JUSTIA FEDERAL. Portal da Justia Federal. 2005.
Disponvel em: <www.jf.jus.br/cjf>. Acesso em: 4 maio 2005. il.
CORPORAO BRITNICA DE RADIODIFUSO BBC. Health. Who can
adopt? 2011. Disponvel em: <http://www.bbc.co.uk/health/support/
fostering_adoption/adopt.shtml>. Acesso em: 11 maio 2011. il.
CYBIS, W. Engenharia de usabilidade, uma abordagem ergonmica.
Laboratrio de Utilizabilidade. Florianpolis: UFSC, 2003.
DANTAS, Thiago. Monalisa. Brasil Escola, 2010. Disponvel em: <http://
www.brasilescola.com/artes/mona-lisa.htm>. Acesso em: 11 maio 2011. il.
154
Book.indb 154 18/01/12 11:15

DARDAILLER, Daniel. Web Semntica: a nova onda de inovao na Web

3.0. 21 maio 2009. Entrevista de Flammarion Cysneiros. Disponvel em:
<http://flammarion.wordpress.com/2009/05/21/web-semantica-a-nova-
onda-de-inovacao-na-web-3-0/>. Acesso em: 20 fev. 2010.
DIAS, Cludia. Recomendaes para a acessibilidade do contedo
da Web -- 1.0. Disponvel em: <http://www.geocities.com/claudiaad/
acessibilidade_web.html>. Acesso em: 4 maio 2005.
______. Usabilidade na Web. Rio de Janeiro: Alta Books, 2003.
DISNEY. 2010. Disponvel em: <http://www.disney.com>. Acesso em: 11 jan.
2010. il.
DONDIS, Donis A. Sintaxe da linguagem visual. 2. ed. So Paulo: Martins
Fontes, 1999.
FRABRIS, S; GERMANI, R. Color: Proyecto y esttica en las artes grficas.
Madrid, 1973. il.
FASCIONE, L; VIEIRA, M. H. A tipografia nas empresas de base tecnolgica.
IV INTERNATIONAL CONFERENCE ON GRAPHICS ENGINEERING FOR ARTS
AND DESIGN. So Paulo, 2001.
FELIPINI, D. Porque Investir na Internet? Revista Venda Mais. Disponvel
em: <http://www.setor4.com/site/materias01.htm>. Acesso em: 2 jul. 2005.
FERNANDES, Srgio L. Monitores Samsung: reparao e ajustes. So
Paulo: Antenna, 2004.
FILHO, Gomes J. Gestalt do Objeto. So Paulo: Escrituras Editora, 2003.
FRABRIS, S; GERMANI, R. COLOR: proyecto y esttica en las artes grficas.
Madrid, 1973.
FREESERVERS. Percepo de movimento contnuo. 2010. Disponvel em:
<http://http://www.psicologia.freeservers.com/gestalt/movimento.html/>.
______. Color Phenomena. 2010. Disponvel em: <http://www.psicologia.
freeservers.com/ilusoes/colors1.html/>. Acesso em: 11 jan. 2010. il.
GALITZ, W. O. User-interface screen design. New York, NY: John Wiley &
Sons, 1993.
GILLESPIE, J. CSS from the Ground Up. Disponvel em <http://www.
wpdfd.com/editorial/basics/index.html>. Acesso em: 12 maio 2005.
GOL LINHAS AREAS INTELIGENTES. 2005. Disponvel em: <www.voegol.
com.br>. Acesso em: 29 abr. 2005. il.
GUERRAS NO MUNDO. Primeira Guerra Mundial. 2010. Disponvel em:
<http://www.guerrasnomundo.hpg.ig.com.br/>. Acesso em: 11 jan. 2010. il.
GUIMARES, Luciano. A cor como informao. So Paulo: Annablume,
1997. Human-Computer Interaction. 2. ed. Addison-Weslley. 1992.
155
Book.indb 155 18/01/12 11:15

GUINNESS WORLD RECORDS. Richard Jrnefelt. 2007. Disponvel em:

<http://www.guinnessworldrecords.com/gwr5/conten>. Acesso em: 11 jan.
2007. il.
HIX, D.; HARTSON, H. R. Developing user interfaces: ensuring usability
through. New York: John Wiley, 1993.
INTERNATIONAL STANDARD. ISO 9241-11: Ergonomic requirements for
office work with visual display terminals (VDTs). 1998. Disponvel em:
<http://www.it.uu.se/edu/course/homepage/acsd/vt09/ISO9241part11.
pdf>. Acesso em: 4 jul. 2011. il.
JOHN, T. H.; BRUCE, M. K. Atlas de Fisiologia Humana de Netter. Rio de
Janeiro: Artmed; Bookman, 2003.
JOLY, Martine. Introduo anlise da imagem. 4. ed. So Paulo: Papirus, 2001.
INTERNATIONAL ORGANIZATION FOR STANDARDIZATION. Ergonomic
requirements for office workwith visual display terminals (VDTs) --
Part 11: Guidance on usability. [S.l.]: 2003.
KOBAYACHI, Cntia; BEU, Erika Luciane. Webdesigner: estrutura e
programao. So Paulo: rica, 2001.
KOFFKA, K. Princpios da psicologia da Gestalt. So Paulo: Cultrix, 1975.
LANCME. 2007. Disponvel em: <www.lancome.com.br>. Acesso em: 11
jan. 2007. il.
LEITE, J.; SIECKENIUS, C.; PRARES, R. Design, estrutura e esttica. [S.l.], 2002.
LYNCH, P.; HORTON, S. Web Style Guide. USA: Yale University Press, 2002.
MAIS VOC. 2007. Disponvel em <http://maisvoce.globo.com/perfil_
apresentadora.jsp>. Acesso em: 11 jan. 2007. il.
MARMION, J. A utilizao de cor no mecanismo de interao com o
usurio. 2004. Disponvel em: <http://www.ibrau.com.br>. Acesso em: 14
fev. 2005.
MARTINEZ, Maria Laura. Imagens (1): formatos e dithering. 6 dez. 2000.
Disponvel em: <http://www.lsi.usp.br/~telemat/aprenda/infodigi/img1sld/
index.htm>. Acesso em: 11 abr. 2011.
MEU LIVRO de Receitas. 2010. Disponvel em: <http://images.google.com.
br/>. Acesso em: 11 jan. 2010. il.
MEXICO AZTECA. Mxico. 2010. Disponvel em: <http://azteca.free.fr/
Divers/mexico.jpg/>. Acesso em: 11 jan. 2011. il.
MISSAGIA, Luciana. Hipertenso: e o olho com isso? 12 ago. 2010.
Disponvel em: <http://hipertensao2010.blogspot.com/2010/08/e-o-olho-
com-isso.html>. Acesso em: 10 maio 2011. il.
MONTENEGRO, Gildo A. A inveno do projeto: a criatividade aplicada em
desenho industrial, arquitetura, comunicao visual. So Paulo: E. Blcher, 1987.
156
Book.indb 156 18/01/12 11:15

MOTOR TREND. First Look: 2005 Porsche 911 Carrera And 911s.
2004. Disponvel em: <http://www.motortrend.com/roadtests/
coupes/112_0408_2005_porsche_911_carrera_911s/index.html>. Acesso
em: 22 jun. 2011. il.
MUNARI, Bruno. Design e comunicao visual: contribuio para uma
metodologia didtica. So Paulo: Martins Fontes, 1997.
NECCO, C. R.; TSAI, N.; GORDON, C. L. Prototyping: use in the development
of computer based information systems. The Journal of Computer
Systems. Fall, 1989.
NEWMAN, W.; LAMMING, M. G. Interactive System Design. Cambridge:
Addison Wesley Publishers, 1996.
NIELSEN, J. Top Ten Mistakes in Web Design. Disponvel em: <http://
www.useit.com/alertbox/9605.html>. Acesso em: 14 fev. 2010.
______. Usability Engineering. Cambridge, MA: Academic Press, 1993.
______. Projetando Websites. Rio de Janeiro: Campus, 2000.
NORMAN, D. The Design of Everyday Things. New York: Currency
Doubleday, 1988.
OLIVEIRA, Adelize Generini de. Desenvolvendo sites WAP. Florianpolis:
Advanced books, 2000.
PGINA DA MNICA. As minhas imagens. [200-]. Disponvel em: <http://
goo.gl/eFnhB>. Acesso em: 22 maio 2011. il.
PARIZOTTO, Rosamlia. Elaborao de um Guia de Estilos para Servios
de Informao em Cincia e Tecnologia via Web. 1997. Dissertao
(Mestrado em Engenharia de Produo) Universidade Federal de Santa
Catarina, Florianpolis, 1997.
PEDROSA, Israel. Da cor cor inexistente. 3. ed. Rio de Janeiro: Lo
Christiano Editorial Ltda., 1982.
PERAZZO, L.; MAZLOVA, T. Elementos da Forma. Rio de Janeiro: SENAC
Nacional, 1997.
POLLIER, A. Evaluation dune interface par des ergonomes: diagnostiques
et stratgies. Rapport de Recherche INRIA, n. 1391, 1991.
PONTO FRIO. 2005. Disponvel em: <www.pontofrio.com.br>. Acesso em:
29 abr. 2005. il.
______. Relgio Technos Skydiver. 2007. Disponvel em: <http://www.
pontofrio.com.br/>. Acesso em: 11 jan. 2007. il.
PREECE, J. et al. Human-Computer Interaction. Massachusetts: Addison-
Wesley, 1994.
157
Book.indb 157 18/01/12 11:15

PREFEITURA DE PORTO ALEGRE. Empresa Pblica de Transportes e

Circulao EPTC. 2007. Disponvel em: <http://www2.portoalegre.rs.gov.
br/eptc/>. Acesso em: 11 jan. 2007. il.
PRING, Roger. www.tipografia. Editorial Gustavo Gili, Barcelona, 1999.
Product & Process. Wiley Professional Computing, 1993.
RADFAHRER, Luli. Design/web/design. So Paulo: Market Press, 2002.
REDE IMOBILIRIA BRASILEIRA. 2005. Disponvel em: <http://www.
coelhodafonseca.com.br/rede-imobiliaria.aspx>. Acesso em: 12 nov. 2009.
il.
ROBERTSON, Douglas. HCI Report.16 jul. 1993.
ROCHA, H.; BARANAUSKAS, M. Design e avaliao de interfaces humano
computador. So Paulo: Escola de Computao, 2000.
SALFER. 2005. Disponvel em: <http://www.salfer.com.br/>. Acesso em: 16
set. 2005. il.
SCAPIN, D. L. MAD: une mthode analytique de description des tches. In:
SHNEIDERMAN, Ben. Designing the user interface. 2. ed. Reading, MA:
Addison-Wesley Publishing Co., 1992.
SCHAEFFER, Thomas. Picture of the Taj Mahal India. 2007. Disponvel
em <www.nirvanatour.de/india/photo/Tajmahal.JPG/>. Acesso em: 11 jan.
2007. il.
SEPULTURA. 2010. Disponvel em: <http://sepultura.uol.com.br/v6/>.
STANLEY, W. Jacob; FRANCONE, Clarice Ashworth; LOSSOW, Walter J.
Anatomia e fisiologia humana. Massachusetts: Addison-Wesley, 1992.
SHNEIDERMAN, Ben. Designing the user interface: strategies for effective
human-computer interaction. 2. ed. Massachusetts: Addison-Wesley, 1992.
SUBMARINO. 2010. Disponvel em: <http://www.submarino.com.br/>.
TAVARES, Mrcio. Desvendando o arco-ris. 27 abr. 2011. Disponvel em:
<http://blogdomarciotavares.blogspot.com/2011/04/desvendando-o-arco-
iris.html. Acesso em: 11 maio 2011. il.
TAURION, Cezar. Internet mvel tecnologias: aplicaes e modelos. Rio
de Janeiro: Campus, 2002.
THE INTERNET PUBLIC LIBRARY. 2007. Disponvel em: <http://www.ipl.org>.
THURING, M.; HANNRMANN, J.; HAAKE, J. M. Hypermedia and cognition:
designing for comprehension. Communications of the ACM, v. 38, n. 8,
ago. 1995.
158
Book.indb 158 18/01/12 11:15

UOL. Internet: a mdia que mais cresce porque vende. Disponvel em:
<www.amidiaquemaiscresce.com.br> Acesso em: 4 fev. 2010.
UNIMED. 2005. Disponvel em: <www.unimed.com.br>. Acesso em: 2 fev.
2005. il.
UNIVERSIDADE FEDERAL DE SANTA CATARINA. Biblioteca Universitria.
2005. Disponvel em: <www.bu.ufsc.br>. Acesso em: 9 abr. 2005. il.
UNIVERSIDADE PAULO FREIRE. Disponvel em <http://redesocial.unifreire.
org/marcelo/panorama-das-redes-sociais>. Acesso em: 12 jan. 2010.
WASSERMAN, Stanley; FAUST, Katherine. Social network analysis: methods
and applications. Cambridge University Press. Structural analysis in
social the social sciences series, v. 8, (1994) 1999.
WEBER, Raul F. Arquitetura de computadores pessoais. Sries de
Livros Didticos, Instituto de Informtica da UFRGS. Porto Alegre: Sagra
Luzzatto, 2004.
WHITAKER, Leslie A. Human navigation. In: FORSYTHE, Chris; GROSE, Eric;
RATNER, Julie (Org.). Human factors and web development. Mahwah,
New Jersey: L. Eribaum Associates, 1998.
WILLIANS, R.; TOLLET, J. Web design para no designers. Rio de Janeiro:
Cincia Moderna, 2001.
WINCKLER, M.; BORGES, R. C.; BASSO, K. Consideraes sobre o uso de
cores em interfaces WWW. In: III WORKSHOP DE FATORES HUMANOS EM
SISTEMAS E COMPUTAO. Gramado, RS, 2000.
ZELDMAN, Jeffrey. Projetando websites compatveis. Berkeley: New
Riders, 2004.
159
Book.indb 159 18/01/12 11:15

Book.indb 160 18/01/12 11:15
Sobre a professora conteudista
Vera Rejane Niedersberg Schuhmacher Mestre em

Engenharia de Produo, com nfase em Usabilidade de
Software pela Universidade Federal de Santa Catarina -
UFSC. professora da Unisul desde 1998 em disciplinas
oferecidas nos cursos de Cincia da Computao e
Sistemas de Informao e Ps-graduao. Pesquisadora
do Ncleo de Computao, atua como Coordenadora do
NPU- Ncleo de Pesquisas em Usabilidade, prestando
consultoria em Engenharia de Software e Usabilidade
em empresas de tecnologias e projetos financiados por
rgos de fomento, como Finep, CNPq e Funcitec.
Book.indb 161 18/01/12 11:15

Book.indb 162 18/01/12 11:15
Respostas e comentrios das
atividades de autoavaliao
Unidade 1
1) A pregnncia baseia-se na simplificao natural da percepo.
Ao fazer um desenho nas reas regulares, elas so as
mais fceis de serem compreendidas, pois exigem menos
simplificao por parte do indivduo. A pregnncia da forma
faz com que o indivduo identifique rapidamente o objeto no
meio de um todo. Objetos pregnantes se destacam do fundo
e atraem nossos olhares.
2) Observe o site do Financial Times. Os assuntos so agrupados
pelo critrio da proximidade e semelhana. Observe direita
a caixa de cotao; o fundo de um rosa claro e toda a
tabela d ideia de agrupamento. Da mesma forma, observe
a imagem da menina no nibus: a proximidade do texto d
ideia de agrupamento com o texto que vem logo abaixo.
Outro exemplo forte o menu: a cor agrupa todo o conjunto
pela semelhana, indicando pela diferena no tom os itens
que se encontram ativados (www.ft.com).
3) Um exemplo de fechamento o logotipo da Pizarria Massa
Fina, da cidade de Santo Amaro, no estado de So Paulo.
Outro exemplo o logotipo do Armazm Vieira em

Florianpolis - <http://www.armazemvieira.com.br/>
Book.indb 163 18/01/12 11:15

4)
a) Figura/fundo
b) Similaridade
c) Fechamento
d) Continuidade
e) Similaridade
f) Figura/fundo
g) Figura/fundo
5)
a) A
b) C
c) B
d) B
e) A
f) A
g) A
6) Um ponto forte no dilogo de uma pgina o uso de metforas do

mundo real: um site de supermercado onde so vendidos produtos
para posterior entrega, por exemplo. O site deve ser estruturado pela
colocao dos produtos, utilizando-se a distribuio dos mesmos de
forma idntica ou mais prxima possvel do existente no supermercado
real. Isso significa utilizar-se da categorizao dos produtos por
corredores, como ocorre no supermercado, por exemplo: Produtos de
limpeza, Bebidas, Confeitaria etc. O cliente vai se recordar da sequncia
de forma automtica, sentindo-se confortvel em um ambiente que ele
j conhece.
Outra questo interessante fazer uso do que j faz parte da memria
popular, por exemplo, o uso de recursos como cones. O uso do
carrinho de compras o ideal neste projeto, pois uma metfora
conhecida na internet e que, ao mesmo tempo, prxima do mundo
real. Os corredores virtuais (produtos de limpeza, bebidas, confeitaria
etc.) devem ser disponibilizados o tempo todo, em todas as pginas,
evitando que o cliente tenha que sair de um setor e procurar, em um
menu de outra pgina, por um produto desejado.
164
Book.indb 164 18/01/12 11:15

Unidade 2
1) So diversos os fatores que interferem na distino de pontos, mas
todos eles esto relacionadas ao campo visual. Um dos fatores
importantes o espaamento dos fotorreceptores na retina e a
preciso da refrao do olho.
2)
a) C
b) B
c) B
d) C
e) B
f) C
g) C
3) As cores secundrias so formadas por duas cores primrias (azul,

amarelo e vermelho) misturadas em partes iguais.
4) O uso de cores complementares deve ser utilizado para dar fora e
equilbrio a um trabalho, criando o mximo de contraste. Se voc quiser
oferecer a sensao de uniformidade, profundidade, movimento, luz e
sombra, ento, utilize uma cor anloga.
5) Considere com cuidado o assunto da pgina, o pblico-alvo e o
ambiente onde o site ser utilizado.
Unidade 3
1) Alternativa correta: C
3) Alternativa correta: A e D
5) Alternativa correta: B
Unidade 4
1) O termo usabilidade foi utilizado incialmente por cincias como a
Ergonomia e a Psicologia. Em um primeiro momento, utilizou-se o termo
user-friendly intuitivamente, tentando expressar questes relacionadas
165
Book.indb 165 18/01/12 11:15

amigabilidade da interface. O uso dessa expresso mostrou-se fraco

para expressar situaes onde existem diferenas entre diferentes
usurios relacionadas sua aptido e conhecimento da tarefa.
2)
a) B
b) C
c) A
3)
a) O site pode promover flexibilidade, oferecendo ao usurio
mecanismos alternativos para o alcance de seus objetivos. O uso de um
menu lateral corrente na internet, mas, alm dele, voc pode oferecer
um mecanismo de busca para que o usurio chegue ao seu objetivo
mais rapidamente.
b) Para tornar a sequncia de interaes mais fceis de aprendizado
para o usurio, importante selecionarmos uma amostra da populao,
a fim de identificarmos a forma como esse usurio pensa sobre as
tarefas propostas no site. Em outras palavras, o projeto de interaes
deve refletir a forma como seu potencial usurio imagina que elas
seriam realizadas.
Outros aspectos a serem considerados so o uso de mecanismos
que promovam a boa conduo da tarefa no site, o oferecimento de
mecanismos de ajuda consistentes com a situao em que o usurio
se encontra naquele momento e o cuidado em manter um projeto
de cones adequados ao proposta para eles. A aprendizagem
est intrinsicamente ligada ao uso de denominaes adequadas
linguagem do usurio.
4)
a) F
b) V
c) F
d) V
e) F
f) V
g) V
h) F
166
Book.indb 166 18/01/12 11:15

5) Medir o grau de usabilidade permite perceber o quanto o usurio

conseguiu atingir seus objetivos e subobjetivos, ao utilizar seu produto.
importante para que voc perceba qual o esforo mental e fsico, tempo,
custos materiais ou financeiros so necessrios para atingir esse objetivo.
No site Boa Noite voc poderia fazer uso de um questionrio de
satisfao junto aos clientes, avaliando reclamaes, criticas, sugestes
e acertos do produto. Tambm sugerido um ensaio de interao
com o usurio, a partir da induo de uma sequncia de tarefas a
serem executadas no site, devendo ser observado ento o tempo
despendido na execuo da tarefa, a completude e as dificuldades em
sua execuo.
Unidade 5
2)
Conduo
Alta densidade informacional (excesso de propaganda, informaes
desnecessrias)
Links desorganizados e confusos.
Uso excessivo de destaques de palavras que prejudicam a legibilidade.
Desequilbrio entre a quantidade de textos e outras mdias
(animaes), prejudicando a legibilidade.
Os itens esto distribudos de forma inadequada dentro das categorias,
dificultando o alcance do objetivo do cliente (ex. bomba dagua Dancor).
O atendimento on-line demorado e no resolve o problema,
indicando outro site para a soluo, frustrando o usurio.
Carga de Trabalho
Na busca avanada no so exibidos todos departamentos, fazendo
com que o internauta tenha que fazer a busca manual no prprio
departamento.
Fadiga visual pelo uso do vermelho e amarelo.
Controle Explcito
A pgina apresenta uma caixa sobre direitos autorais, que
apresentada sobre a caixa principal, sem a solicitao do usurio.
No h botes ou links para retirar o produto do carrinho de
compras; preciso colocar a quantidade zero.
Algumas categorias anunciadas no site encaminham para a compra
em outra pgina, sem que o internauta realize qualquer ao para isso.
Ao se solicitar informaes sobre um produto, so apresentados
outros produtos indesejados e que no foram solicitados.
167
Book.indb 167 18/01/12 11:15

Gesto de erros
Exibio de mensagens complexas.
Em situaes onde uma entrada de dados ocorre de forma incorreta,

a mensagem no apoia o cliente na correo do erro
Adaptabilidade
Limitao na quantidade de compra de um mesmo produto.
No permite a personalizao da pgina para portadores de baixa

viso.
Homogeneidade
Na categoria Motores, a pgina muda de layout, quebrando toda a

consistncia do site.
Compatibilidade
A busca incorreta de um produto ocasiona a apresentao de outros no
solicitados. Esse resultado no compativel com o que o cliente espera.
No possui recurso para portadores de necessidades especiais.
Ao ser utilizado no browser Mozilla, no abre todos os frames.
3)
a) A
b) T
c) B
d) A
e) B
Unidade 6
1) Uma estrutura adequada pode ser a estrutura linear, pois uma forma
bastante simples de organizar a informao, tendo em vista que os
assuntos j possuem uma sequencializao.
2)
Utilize um menu vertical ou horizontal e oferea os principais
servios do site.
Permita o uso da busca para que o internauta tenha a possibilidade
de uma busca rpida no site.
Faa uma pesquisa com uma amostra de possveis usurios,
verificando com eles quais as informaes consideradas importantes
no momento da visita a um site de hotel e quais as informaes que
168
Book.indb 168 18/01/12 11:15

o internauta considera que deveriam estar mais prximas, a fim de

facilitar sua navegao.
Os links devem ser breves, concisos e na linguagem do internauta, caso
exista algum termo especfico, ser colocada uma ajuda sobre o termo.
Os links e botes devem ser visualmente identificveis, o que
significa reconhecveis pelo usurio.
3) Alternativas corretas: A e B
4) Alternativas corretas: B e D
169
Book.indb 169 18/01/12 11:15

Book.indb 170 18/01/12 11:15
Biblioteca Virtual
Veja, a seguir, os servios oferecidos pela Biblioteca Virtual aos

alunos a distncia:
Pesquisa a publicaes online
<www.unisul.br/textocompleto?
Acesso a bases de dados assinadas

<www. unisul.br/bdassinadas>
Acesso a bases de dados gratuitas e selecionadas

<www.unisul.br/bdgratuitas>
Acesso a jornais e revistas on-line

<www. unisul.br/periodicos>
Emprstimo de livros
<www. unisul.br/emprestimos>
Escaneamento de parte de obra1
Acesse a pgina da Biblioteca Virtual da Unisul, disponvel no EVA,

e explore seus recursos digitais.
Qualquer dvida, escreva para bv@unisul.br
1 Se voc optar por escaneamento de parte do livro, o sumrio da obra ser

enviado primeiramente para que voc possa escolher os captulos que deseja
solicitar a reproduo. Lembre-se que para no ferir a Lei dos direitos autorais
(Lei 9610/98), at 10 % do total de pginas de um livro podem ser reproduzidos.
Book.indb 171 18/01/12 11:15

capa_impressao_colorida.pdf 1 18/01/12 11:20
ISBN 978-85-7817-224-4
9 788578 172244

Comunicação Visual para Web I

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Comunicação Visual para Web I

Enviado por

Direitos autorais:

Formatos disponíveis

capa_impressao_colorida.

pdf 1 18/01/12 11:20

Comunicao Visual para Web I

Book.indb 1 18/01/12 11:15

Book.indb 2 18/01/12 11:15

Comunicao Visual para Web I

Book.indb 3 18/01/12 11:15

Edio Livro Didtico

Projeto Grfico e Capa

1. Internet (Redes de computao). 2. Comunicao visual. 3.

Ficha catalogrfica elaborada pela Biblioteca Universitria da Unisul

Book.indb 4 18/01/12 11:15

UNIDADE 1 - Psicologia da comunicao. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Para concluir o estudo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151

Book.indb 5 18/01/12 11:15

Este livro didtico corresponde disciplina Comunicao Visual

O material foi elaborado visando a uma aprendizagem autnoma

Lembre-se que sua caminhada, nesta disciplina, ser

Ento, sempre que sentir necessidade entre em contato; voc tem

Bom estudo e sucesso!

Book.indb 7 18/01/12 11:15

Voc j tentou acessar um site de banco para realizar um

Grande parte das atividades da vida moderna inserem os

Observe os cidados na fila de um caixa eletrnico, tente observar

Por que isso acontece? Uma grande parcela de culpa reside no

Quando a interao ocorre em um website, a dificuldade

Book.indb 9 18/01/12 11:15

Durante a disciplina ser possvel conhecer melhor o projeto de

fundamental, desde j, que saibamos que o bom projeto de

Para uma melhor compreenso das figuras apresentadas neste

Professora Vera Niedersberg Schuhmacher.

Book.indb 10 18/01/12 11:15

O plano de estudos visa a orient-lo no desenvolvimento da

O processo de ensino e aprendizagem na UnisulVirtual leva

So elementos desse processo:

o Espao UnisulVirtual de Aprendizagem (EVA);

as atividades de avaliao (a distncia, presenciais e de

Book.indb 11 18/01/12 11:15

Utilizar instrumentos de elicitao de conhecimentos.

Esclarecer diretrizes para a concepo de websites

Apresentar tcnicas e instrumentos de avaliao de

Book.indb 12 18/01/12 11:15

Unidade 1 - Psicologia da comunicao

Unidade 2 - Cores na web

Unidade 3 - Etapas do processo de design

Unidade 4 - Por que usabilidade?

Book.indb 13 18/01/12 11:15

Unidade 5 - Avaliando a usabilidade de websites

Verifique com ateno o EVA, organize-se para acessar

No perca os prazos das atividades. Registre no espao

Use o quadro para agendar e programar as atividades

Book.indb 14 18/01/12 11:15

Demais atividades (registro pessoal)

Book.indb 15 18/01/12 11:15

Conhecer a teoria da Gestalt do objeto.

Ter conhecimento das implicaes existentes no

Ter conhecimento das implicaes geradas a partir de

Seo 2 Um pouco da histria

Seo 3 Percepo da forma

Seo 4 Os princpios da Gestalt

Seo 5 Os mecanismos de memorizao

Seo 6 Restries de tempo em relao

Book.indb 17 18/01/12 11:15