(7340 - 21392) Comunicacao Visual para Web I

Universidade do Sul de Santa Catarina
Comunicao Visual para Web I

Disciplina na modalidade a distncia
Palhoa UnisulVirtual 2011
Crditos
Universidade do Sul de Santa Catarina | Campus UnisulVirtual | Educao Superior a Distncia
Reitor Ailton Nazareno Soares Vice-Reitor Sebastio Salsio Heerdt Chefe de Gabinete da Reitoria Willian Corra Mximo Pr-Reitor de Ensino e Pr-Reitor de Pesquisa, Ps-Graduao e Inovao Mauri Luiz Heerdt Pr-Reitora de Administrao Acadmica Miriam de Ftima Bora Rosa Pr-Reitor de Desenvolvimento e Inovao Institucional Valter Alves Schmitz Neto Diretora do Campus Universitrio de Tubaro Milene Pacheco Kindermann Diretor do Campus Universitrio da Grande Florianpolis Hrcules Nunes de Arajo Secretria-Geral de Ensino Solange Antunes de Souza Diretora do Campus Universitrio UnisulVirtual Jucimara Roesler Equipe UnisulVirtual Diretor Adjunto
Moacir Heerdt 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
Coordenadores Graduao
Alosio Jos Rodrigues Ana Lusa Mlbert Ana Paula R.Pacheco Artur Beck Neto Bernardino Jos da Silva Charles Odair Cesconetto da Silva Dilsa Mondardo Diva Marlia Flemming Horcio Dutra Mello Itamar Pedro Bevilaqua Jairo Afonso Henkes Janana Baeta Neves Jorge Alexandre Nogared Cardoso Jos Carlos da Silva Junior Jos Gabriel da Silva Jos Humberto Dias de Toledo Joseane Borges de Miranda Luiz G. Buchmann Figueiredo Marciel Evangelista Catneo Maria Cristina Schweitzer Veit Maria da Graa Poyer Mauro Faccioni Filho Moacir Fogaa Nlio Herzmann Onei Tadeu Dutra Patrcia Fontanella Roberto Iunskovski Rose Clr Estivalete Beche
Marilene de Ftima Capeleto Patricia A. Pereira de Carvalho Paulo Lisboa Cordeiro Paulo Mauricio Silveira Bubalo Rosngela Mara Siegel Simone Torres de Oliveira Vanessa Pereira Santos Metzker Vanilda Liordina Heerdt
Patrcia de Souza Amorim Poliana Simao Schenon Souza Preto
Gerncia de Desenho e Desenvolvimento de Materiais Didticos

Mrcia Loch (Gerente)
Karine Augusta Zanoni Marcia Luz de Oliveira Mayara Pereira Rosa Luciana Tomado Borguetti
Assuntos Jurdicos
Bruno Lucion Roso Sheila Cristina Martins
Gesto Documental
Lamuni Souza (Coord.) Clair Maria Cardoso Daniel Lucas de Medeiros Jaliza Thizon de Bona Guilherme Henrique Koerich Josiane Leal Marlia Locks Fernandes
Desenho Educacional
Marketing Estratgico Portal e Comunicao
Gerncia Administrativa e Financeira

Renato Andr Luz (Gerente) Ana Luise Wehrle Anderson Zandr Prudncio Daniel Contessa Lisboa Naiara Jeremias da Rocha Rafael Bourdot Back Thais Helena Bonetti Valmir Vencio Incio
Vice-Coordenadores Graduao
Adriana Santos Ramm Bernardino Jos da Silva Catia Melissa Silveira Rodrigues Horcio Dutra Mello Jardel Mendes Vieira Joel Irineu Lohn Jos Carlos Noronha de Oliveira Jos Gabriel da Silva Jos Humberto Dias de Toledo Luciana Manfroi Rogrio Santos da Costa Rosa Beatriz Madruga Pinheiro Sergio Sell Tatiana Lee Marques Valnei Carlos Denardin Smia Mnica Fortunato (Adjunta)
Gerncia de Ensino, Pesquisa e Extenso

Janana Baeta Neves (Gerente) Aracelli Araldi
Elaborao de Projeto
Carolina Hoeller da Silva Boing Vanderlei Brasil Francielle Arruda Rampelotte
Cristina Klipp de Oliveira (Coord. Grad./DAD) Roseli A. Rocha Moterle (Coord. Ps/Ext.) Aline Cassol Daga Aline Pimentel Carmelita Schulze Daniela Siqueira de Menezes Delma Cristiane Morari Eliete de Oliveira Costa Elosa Machado Seemann Flavia Lumi Matuzawa Geovania Japiassu Martins Isabel Zoldan da Veiga Rambo Joo Marcos de Souza Alves Leandro Roman Bamberg Lygia Pereira Lis Air Fogolari Luiz Henrique Milani Queriquelli Marcelo Tavares de Souza Campos Mariana Aparecida dos Santos Marina Melhado Gomes da Silva Marina Cabeda Egger Moellwald Mirian Elizabet Hahmeyer Collares Elpo Pmella Rocha Flores da Silva Rafael da Cunha Lara Roberta de Ftima Martins Roseli Aparecida Rocha Moterle Sabrina Bleicher Vernica Ribas Crcio Vanessa de Andrade Manoel (Coord.) Letcia Regiane Da Silva Tobal Mariella Gloria Rodrigues Vanesa Montagna
Rafael Bavaresco Bongiolo Catia Melissa Silveira Rodrigues Andreia Drewes Luiz Felipe Buchmann Figueiredo Rafael Pessi
Gerncia de Produo Design Visual
Arthur Emmanuel F. Silveira (Gerente) Francini Ferreira Dias Pedro Paulo Alves Teixeira (Coord.) Alberto Regis Elias Alex Sandro Xavier Anne Cristyne Pereira Cristiano Neri Gonalves Ribeiro Daiana Ferreira Cassanego Davi Pieper Diogo Rafael da Silva Edison Rodrigo Valim Fernanda Fernandes Frederico Trilha Jordana Paula Schulka Marcelo Neri da Silva Nelson Rosa Noemia Souza Mesquita Oberdan Porto Leal Piantino
Reconhecimento de Curso
Maria de Ftima Martins
Acessibilidade
Multimdia
Secretaria Executiva e Cerimonial

Jackson Schuelter Wiggers (Coord.) Marcelo Fraiberg Machado Tenille Catarina
Extenso Pesquisa
Maria Cristina Veit (Coord.) Daniela E. M. Will (Coord. PUIP, PUIC, PIBIC) Mauro Faccioni Filho (Coord. Nuvem)
Avaliao da aprendizagem
Srgio Giron (Coord.) Dandara Lemos Reynaldo Cleber Magri Fernando Gustav Soares Lima Josu Lange
Assessoria de Assuntos Internacionais

Murilo Matos Mendona
Coordenadores Ps-Graduao
Ps-Graduao Biblioteca
Assessoria de Relao com Poder Pblico e Foras Armadas

Adenir Siqueira Viana Walter Flix Cardoso Junior
Assessoria DAD - Disciplinas a Distncia
Patrcia da Silva Meneghel (Coord.) Carlos Alberto Areias Cludia Berh V. da Silva Conceio Aparecida Kindermann Luiz Fernando Meneghel Renata Souza de A. Subtil
Alosio Jos Rodrigues Anelise Leal Vieira Cubas Bernardino Jos da Silva Carmen Maria Cipriani Pandini Daniela Ernani Monteiro Will Giovani de Paula Karla Leonora Dayse Nunes Letcia Cristina Bizarro Barbosa Luiz Otvio Botelho Lento Roberto Iunskovski Rodrigo Nunes Lunardelli Rogrio Santos da Costa Thiago Coelho Soares Vera Rejane Niedersberg Schuhmacher Acadmica Angelita Maral Flores (Gerente) Fernanda Farias
Anelise Leal Vieira Cubas (Coord.) Salete Ceclia e Souza (Coord.) Paula Sanhudo da Silva Marlia Ignacio de Espndola Renan Felipe Cascaes
Claudia Gabriela Dreher Jaqueline Cardozo Polla Ngila Cristina Hinckel Sabrina Paula Soares Scaranto Thayanny Aparecida B. da Conceio
Conferncia (e-OLA)
Carla Fabiana Feltrin Raimundo (Coord.) Bruno Augusto Zunino Gabriel Barbosa
Gerncia de Logstica Logsitca de Materiais
Produo Industrial
Marcelo Bittencourt (Coord.)
Jeferson Cassiano A. da Costa (Gerente) Carlos Eduardo D. da Silva (Coord.) Abraao do Nascimento Germano Bruna Maciel Fernando Sardo da Silva Fylippy Margino dos Santos Guilherme Lentz Marlon Eliseu Pereira Pablo Varela da Silveira Rubens Amorim Yslann David Melo Cordeiro
Gerncia Servio de Ateno Integral ao Acadmico

Maria Isabel Aragon (Gerente) Ana Paula Batista Detni Andr Luiz Portes Carolina Dias Damasceno Cleide Incio Goulart Seeman Denise Fernandes Francielle Fernandes Holdrin Milet Brando Jenniffer Camargo Jessica da Silva Bruchado Jonatas Collao de Souza Juliana Cardoso da Silva Juliana Elen Tizian Kamilla Rosa Mariana Souza Marilene Ftima Capeleto Maurcio dos Santos Augusto Maycon de Sousa Candido Monique Napoli Ribeiro Priscilla Geovana Pagani Sabrina Mari Kawano Gonalves Scheila Cristina Martins Taize Muller Tatiane Crestani Trentin
Gesto Docente e Discente
Enzo de Oliveira Moreira (Coord.)
Capacitao e Assessoria ao Docente
Assessoria de Inovao e Qualidade de EAD
Gerncia Administrao
Denia Falco de Bittencourt (Coord.) Andrea Ouriques Balbinot Carmen Maria Cipriani Pandini
Assessoria de Tecnologia
Secretaria de Ensino a Distncia

Samara Josten Flores (Secretria de Ensino) Giane dos Passos (Secretria Acadmica) Adenir Soares Jnior Alessandro Alves da Silva Andra Luci Mandira Cristina Mara Schauffert Djeime Sammer Bortolotti Douglas Silveira Evilym Melo Livramento Fabiano Silva Michels Fabricio Botelho Espndola Felipe Wronski Henrique Gisele Terezinha Cardoso Ferreira Indyanara Ramos Janaina Conceio Jorge Luiz Vilhar Malaquias Juliana Broering Martins Luana Borges da Silva Luana Tarsila Hellmann Luza Koing Zumblick Maria Jos Rossetti
Osmar de Oliveira Braz Jnior (Coord.) Felipe Fernandes Felipe Jacson de Freitas Jefferson Amorin Oliveira Phelipe Luiz Winter da Silva Priscila da Silva Rodrigo Battistotti Pimpo Tamara Bruna Ferreira da Silva
Alessandra de Oliveira (Assessoria) Adriana Silveira Alexandre Wagner da Rocha Elaine Cristiane Surian (Capacitao) Elizete De Marco Fabiana Pereira Iris de Souza Barros Juliana Cardoso Esmeraldino Maria Lina Moratelli Prado Simone Zigunovas Anderson da Silveira (Ncleo Comunicao) Claudia N. Nascimento (Ncleo NorteMaria Eugnia F. Celeghin (Ncleo Plos) Andreza Talles Cascais Daniela Cassol Peres Dbora Cristina Silveira Ednia Araujo Alberto (Ncleo Sudeste) Francine Cardoso da Silva Janaina Conceio (Ncleo Sul) Joice de Castro Peres Karla F. Wisniewski Desengrini Kelin Buss Liana Ferreira Luiz Antnio Pires Maria Aparecida Teixeira Mayara de Oliveira Bastos Michael Mattar
Avaliaes Presenciais
Tutoria e Suporte
Nordeste)
Coordenao Cursos Coordenadores de UNA

Diva Marlia Flemming Marciel Evangelista Catneo Roberto Iunskovski
Graciele M. Lindenmayr (Coord.) Ana Paula de Andrade Angelica Cristina Gollo Cristilaine Medeiros Daiana Cristina Bortolotti Delano Pinheiro Gomes Edson Martins Rosa Junior Fernando Steimbach Fernando Oliveira Santos Lisdeise Nunes Felipe Marcelo Ramos Marcio Ventura Osni Jose Seidler Junior Thais Bortolotti
Gerncia de Marketing
Eliza B. Dallanhol Locks (Gerente)
Auxiliares de Coordenao
Ana Denise Goularte de Souza Camile Martinelli Silveira Fabiana Lange Patricio Tnia Regina Goularte Waltemann
Relacionamento com o Mercado Alvaro Jos Souto Relacionamento com Polos Presenciais
Alex Fabiano Wehrle (Coord.) Jeferson Pandolfo
Vera Niedersberg Schuhmacher

Livro didtico Design instrucional Flavia Lumi Matuzawa Leandro Kingeski Pacheco 3a edio
Palhoa UnisulVirtual 2011
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
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
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.
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.
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
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.
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
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
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
Atividades obrigatrias
Demais atividades (registro pessoal)
15
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
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
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
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).
As imagens no so apagadas imediatamente da retina.
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 percebemos um movimento. Mas o cinema que voc v na 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
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
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 fundamentaramse 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
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 Fonte: Corporao Britnica de Radiodifuso (2010).
Figura 1.7 - Unidade Fonte: Elaborao da 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
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 Fonte: Elaborao da autora (2010).
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
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 OX OX OX OX ou OX OX OX OX
Figura 1.12 - Similaridade Fonte: Elaborao da autora (2010).
aa aa aa aa aa aa aa aa aa aa aa aa
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
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.
z x
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
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 Fonte: Elaborao da autora (2010).
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
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.
Figura 1.17 - Figura/Fundo Fonte: Pgina da Mnica ([200-]).
Figura 1.16 - Figura/Fundo 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
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 Fonte: Elaborao da autora (2010).
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
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
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
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
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
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.
Fala, Audio
Fala, Movimento
Memria de Trabalho ou Sensorial
Memria de Curto Termo
Memria de Longo Termo ou Permanente

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
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. ampulhetas girando, quando no possvel determinar o tempo necessrio at o trmino da tarefa) quando o tempo de processamento longo.
Insira indicadores de feedback (barras de progresso,
Figura 1.23 - Indicadores de feedback Fonte: Elaborao da autora (2010).
Unidade 1
35
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. usurio focada num dilogo.
10 segundos o tempo limite para manter a ateno do
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. de longo termo e a escolha de cones para aes deve ser consistente.
Operaes frequentes acabam sendo memorizadas na memria
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 Fonte: Elaborao da autora (2010). 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
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
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
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
5) Relacione os temas relacionados ao armazenamento da memria: [A] Memria de curto termo; [B] Memria de trabalho; [C] Memria de longo termo; a) b) c) d) e) f) g) ( ) armazena a informao por um espao de 10 a 25 segundos; ( ) permite o armazenamento de informaes por um longo perodo; ( ) armazena informaes por horas e at dias; ( ) a mem ria responsvel por enviar informaes para a memria permanente; ( ) armazena informaes relacionadas aos sentidos, como fala, audio; ( ) a memria responsvel por recuperar informaes da memria permanente; ( ) 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
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
42
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
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
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
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
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 na retina perifrica (2,3), sendo responsveis pela transmisso de informaes para as clulas ganglionares. No fundo do olho est o ponto cego, insensvel luz, no h cones nem bastonetes, dele emergem o nervo ptico e os vasos sanguneos da retina.
a capacidade de o olho distinguir entre dois pontos prximos e depende de diversos fatores, em especial do espaamento dos fotorreceptores na 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
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
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
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
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 Fonte: Elaborao da autora (2010).
Unidade 2
51
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 Fonte: Elaborao da autora (2010).
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
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
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
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, quando no campo visual h um nmero mnimo de cores e formas: quanto menos rudo, mais claro o sinal. Quando voc escolhe o padro de cores de um site importante observar alguns aspectos relacionados por Shneirman (2000):
Signal detection theory, um modelo estatstico elaborado na dcada de 50.
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
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
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
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
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
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 de cores, dando ao usurio a opo de mudlas, mximo de cinco mais ou menos duas. Use a cor como uma forma de informao adicional ou aumentada. Use cor para realar ao invs de usar sublinhado (e use sublinhado ao invs de itens piscando). Sempre que possvel, evite usar cores muito quentes, tais como o rosa e o magenta. Se for usado um fundo colorido, selecione as cores do texto de modo a obter o contraste mais forte entre o texto e o fundo. Desse modo, as pginas de um mesmo site estaro mais propensas a terem um padro consistente.
Evite confiar na cor como o nico meio de expressar um valor ou uma funo particular.
Restrinja o uso do sublinhado para links, para no confundir o usurio.
As cores muito quentes parecem pulsar na tela e ficam difceis de focalizar.
Isso aumenta a visibilidade e a legibilidade do texto. 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 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.
Recomenda-se o uso mnemnico da cor.
Figura 2.17 - Site Submarino Fonte: Submarino (2010).
60
Use cores brilhantes e contrastantes com cautela.
Esses elementos atraem a ateno do usurio e o seu emprego deve ser reservado para reas importantes, caso contrrio, o usurio pode achar mais difcil saber para onde olhar e fica confuso. As cores monocromticas so mais ntidas, aumentando a legibilidade e visibilidade do texto.
Use cores monocromticas para o texto, sempre que for possvel.
Recomenda-se o uso de uma cor neutra para fundos.
As cores neutras (por exemplo, cinza-claro) aumentam a visibilidade das outras cores. Para relaes figura-figura e muitas figura-fundo, fortes contrastes de vermelho/verde, azul/amarelo, verde/azul e ve rmelho/azul criam vibraes, iluses de sombras e imagens posteriores.

No use simultaneamente alto croma e cores que estejam muito distantes no espectro solar.
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.
Use a cor para aumentar a informao mostrada em preto e branco.
No que concerne ao aprendizado e compreenso, a cor superior ao preto e ao branco em termos do tempo de processamento e de reaes emocionais, mas no h 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. A cor aumenta o processamento cognitivo e visual de 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 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.
Recomenda-se projetar primeiramente em preto e branco e, ento, adicionar a cor.
Evite o uso de blink
Unidade 2
61
Evite fundos escuros
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 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):
No use cores alternativas para links
Link ainda no visitado, que fica na mesma pgina (ncora) verde;
Link j visitado na mesma pgina rosa;
Link para o nodo hierarquicamente superior - laranja/ amarelo mbar.
No torne a tela muito brilhante ou escura
Use as cores brilhantes em reas pequenas e cores suaves em reas maiores.
Procure evitar cores que juntas causam iluses ticas, como:
verde/vermelho; azul/amarelo;
verde/azul; vermelho/azul;
preto/branco; branco/preto; amarelo/preto; verde/preto; branco/vermelho; preto/amarelo;
preto/verde; ciano/magenta; branco/marrom; amarelo/marrom; verde/marrom; ciano/marrom; magenta/marrom.
Use combinaes legveis para texto/fundo:
Use as cores da fvea e perifricas apropriadamente; a fvea fica na regio central da retina; composta de cones sensveis ao detalhe:
use azul para reas grandes ou formas pequenas; azul bom para fundo de tela; use vermelho e verde no centro do campo visual e no na periferia; use preto, branco, amarelo e azul na periferia do campo visual.
Lembrar que cor mal utilizada pior do q ue no usar cores.
62
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:
RGB Hex 00 00 51 33 102 66 153 99 204 CC 255 FF
Consulte no anexo 1, a figura 2.18 referente ao quadro que contm as 216 combinaes seguras, com os seus cdigos hexadecimais.
Nmeros hexadecimais possuem base 16. A denominao hexa vem de hexa = 6 e deci = 10 que indica a base 16. Cada 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. Ex: o nmero decimal 1 representado por 1 em hexadecimal e 0001 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.
63
Unidade 2
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
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
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
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. marcos para o controle do desenvolvimento do projeto.
Conhecer os artefatos que podem ser usados como
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

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
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.
Usurios e clientes Designers grficos Desenvolvedores
Engenheiro de usabilidade
Testes de usabilidade
Produo do site
Beta testes e lanamento
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
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
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 pblicoalvo, 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
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? sua pgina?
Qual a atitude que voc espera dos internautas que visitarem
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
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
A. Sobre a produo
Quem vai fazer parte da produo do site? Terceirizados?
Funcionrios de sua empresa? Quais so suas responsabilidades e disponibilidades? elo de ligao nestes casos?
A contratao de terceirizados existir no projeto? Quem ser o
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? subetapas a serem consideradas?
Quais so os prazos estipulados para a entrega do site? Existem
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? site?
Qual a largura de banda utilizada pela maioria dos visitantes do 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
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. local?
A capacidade est adequada com as demandas do trfego do 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. site.
Hardware e software necessrios para o desenvolvimento do 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
Nesta fase inicial ainda fundamental:

* No sistema de outsourcing uma empresa contrata outra para executar tarefas especficas em seu lugar, na forma de subcontratao.
A) Pesquisar. Conhea o domnio do site, instrua-se sobre o assunto. Observe sites semelhantes, assuntos semelhantes. Quanto mais informaes conseguir reunir sobre o assunto melhor, pode-se ponderar sobre solues de uma forma mais completa e abrangente. 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 mensagenschave, 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
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
especificao do design grfico de todas as pginas:
Template o modo mais fcil e rpido de construir uma pgina com uma estrutura pr-definida. A partir do template, preenchemos o contedo, sem a necessidade de refazermos toda a pgina.
templates das pginas finalizados; cabealhos, logotipos, botes, fundos definidos; detalhamento de manuais para operaes complexas;
ilustraes; 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
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
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. software.
Resultados de testes em diferentes plataformas de hardware e 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
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
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
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
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
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. um site.
Determinar os principais aspectos da usabilidade de
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

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
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.
O usurio
Interao Humano-Computador
Interface
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
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, observandose 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
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; colaborar com o projeto;
identificar profissionais, odontlogos, que estejam dispostos a 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
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
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
Figura 4.1 - Adaptao da navegao ao perfil do usurio Fonte: Ponto Frio (2005).
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 norteamericana 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
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; situaes possveis de ocorrncias; usurio ao ser utilizado.
um bom controle da gesto de erros, minimizando e refutando e, principalmente, a satisfao que o sistema promove ao
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
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
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
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
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 Fonte: Elaborao da autora (2010).
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
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
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
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
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
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.
Contexto de uso
Usurio Tarefa Equipamento Ambiente
Resultado pretendido
Objetivos
Usabilidade: medida na qual objetivos so alcanados com eficcia, eficincia e satisfao.
Medidas de usabilidade Resultado de uso

Eficcia Eficincia Satisfao
Produto
Figura 4.9 - Estrutura de usabilidade Fonte: International Standard (1998).
102
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
A norma sugere que sejam analisados os seguintes quesitos:

Usurios Tipos de usurio Primrios Secundrios e indiretos Habilidades e conhecimentos Habilidade/conhecimento produto Habilidade/conhecimento sistema Experincia na tarefa Experincia organizacional Nvel treinamento Habilidade nos dispositivos de entrada Qualificaes 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 Fonte: International Standard (1998).
Tarefas Falha da tarefa Nome da tarefa Frequncia de uso da tarefa Durao da tarefa Frequncia de eventos Flexibilidade da tarefa Demanda fsica e mental Dependncias da tarefa Resultado da tarefa Risco resultante de erro Demandas crticas de segurana
Equipamentos Descrio bsica Identificao do produto Descrio do produto Principais reas de aplicao Funes principais Especificao Hardware Software Materiais Servios Outros itens
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
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
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 Usabilidade Usabilidade global Medidas de eficcia Porcentagem de objetivos alcanados. Porcentagem de usurios completando a tarefa com sucesso. Mdia da acurcia de tarefas completadas. Medidas de eficincia Medidas de satisfao
Tempo para completar uma Escala de satisfao. tarefa. Tarefas completadas por unidade de tempo. Custo monetrio de realizao da tarefa. Frequncia de uso arbitrrio. Frequncia de reclamaes.
Quadro 4.2 - Exemplo de medidas de usabilidade Fonte: International Standard (1998).
Na especificao podem ser necessrias medidas adicionais que se referem a propriedades particulares desejadas no produto.
106
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
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 beiramar. 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
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
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
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

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
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
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, podemse 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
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 123456789 5.4.2 Instrues para comando ou seleo so: Confusas 123456789
Quadro 5.1 - Recorte do questionrio QUIS Fonte: Norman (1989).
Claras No aplicvel Claras No aplicvel
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
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
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
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, prcondies, 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
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
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
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
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 Fonte: Ponto Frio (2007).
122
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
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
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
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
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
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 O site apresenta mapa? A pgina apresenta o uso de cones significativos?
No X
No aplicvel X
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
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
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
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
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
3) Assinale as expresses abaixo, identificando o que pode e o que vlido para: (A) Testes com pares de usurios. (B) Testes com verbalizao. (C) Testes com usurio e avaliador. (T) Todas as tcnicas. a) ( ) Esta tcnica utilizada quando o projetista encontra dificuldades em entender a lgica de realizao da tarefa por parte do usurio, sendo que o usurio tem dificuldade em expressar essa lgica. 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
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
unidade 6
Navegao
Determinar a estrutura mais adequada de acordo
com o perfil e misso do site. do site.
Propor mecanismos facilitadores para a navegao
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

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
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.
137
Unidade 6
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 Fonte: Elaborao da autora (2010).
Figura 6.2 - Estrutura de navegao linear alternativa Fonte: Elaborao da autora (2010).
138
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 Fonte: Elaborao da autora (2010).
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.
139
Unidade 6
Figura 6.4 - Estrutura de navegao em rede Fonte: Elaborao da autora (2010).
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. organizao.
Coloque um mapa disponvel em todos os pontos da
140
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
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
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
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 Fonte: Universidade Federal de Santa Catarina (2005).
144
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.
No esquea de informar ao internauta sobre como o site organizado. Isso pode ser feito utilizando-se um mapa do site ou um sumrio. No esquea de deixar claro ao usurio quais as possibilidades do site em termos de acessibilidade. Lembre-se, o que no se sabe, no se usa! No site do senado federal, o internauta tem a possibilidade de se localizar rapidamente, com a ajuda do mapa do site, assim como pode descobrir todas as informaes disponveis nele. Veja a Figura 6.7:
Resource Description Framework (RDF) uma linguagem para representar informao na internet. Arquivos RDF so modelos ou fontes de dados, tambm conhecidos como metadata. Eles tm como objetivos principais criar um modelo simples de 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
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.
Em HTML, por exemplo, especifica-se colees de documentos por meio do elemento LINK e dos atributos rel e rev. Outra maneira de criar uma coleo construindo um arquivo (por ex., com zip, tar e gzip, stuffit) das diferentes pginas.
Observe o site da empresa Salfer. Apesar de ser uma empresa com um grande nmero de produtos, a proposta de navegaao do site no disponibiliza um mecanismo de busca que poderia facilitar a 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.
No esquea de fornecer informaes sobre colees de documentos (isto , documentos compostos por vrias pginas).
Figura 6.8 - Site da Salfer Fonte: Salfer (2005).
146
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
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
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
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.
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.
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
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-novaonda-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/>. Acesso em: 11 jan. 2010. il. ______. 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
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-olhocom-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
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: AddisonWesley, 1994.
157
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/>. Acesso em: 11 jan. 2010. il. 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/>. Acesso em: 11 jan. 2010. il. TAVARES, Mrcio. Desvendando o arco-ris. 27 abr. 2011. Disponvel em: <http://blogdomarciotavares.blogspot.com/2011/04/desvendando-o-arcoiris.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>. Acesso em: 11 jan. 2007. il. THURING, M.; HANNRMANN, J.; HAAKE, J. M. Hypermedia and cognition: designing for comprehension. Communications of the ACM, v. 38, n. 8, ago. 1995.
158
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
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.
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/>
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
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 2) Alternativa correta: C 3) Alternativa correta: A e D 4) Alternativa correta: C 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
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
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
1) Alternativa correta: C 2) Conduo 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 Alta densidade informacional (excesso de propaganda, informaes
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. compras; preciso colocar a quantidade zero.
No h botes ou links para retirar o produto do carrinho de Algumas categorias anunciadas no site encaminham para a compra Ao se solicitar informaes sobre um produto, so apresentados
em outra pgina, sem que o internauta realize qualquer ao para isso. outros produtos indesejados e que no foram solicitados.
167
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
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. significa reconhecveis pelo usurio.
Os links e botes devem ser visualmente identificveis, o que
3) Alternativas corretas: A e B 4) Alternativas corretas: B e D
169
Biblioteca Virtual
Veja, a seguir, os servios oferecidos pela Biblioteca Virtual aos alunos a distncia:
Pesquisa a publicaes online
<www.unisul.br/textocompleto? <www. unisul.br/bdassinadas> <www.unisul.br/bdgratuitas> <www. unisul.br/periodicos>
Acesso a bases de dados assinadas
Acesso a bases de dados gratuitas e selecionadas
Acesso a jornais e revistas on-line
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.

(7340 - 21392) Comunicacao Visual para Web I

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

(7340 - 21392) Comunicacao Visual para Web I

Uploaded by

Copyright:

Available Formats

Universidade do Sul de Santa Catarina

Comunicao Visual para Web I

Palhoa UnisulVirtual 2011

Patrcia de Souza Amorim Poliana Simao Schenon Souza Preto

Gerncia de Desenho e Desenvolvimento de Materiais Didticos

Bruno Lucion Roso Sheila Cristina Martins

Marketing Estratgico Portal e Comunicao

Gerncia Administrativa e Financeira

Gerncia de Ensino, Pesquisa e Extenso

Carolina Hoeller da Silva Boing Vanderlei Brasil Francielle Arruda Rampelotte

Gerncia de Produo Design Visual

Secretaria Executiva e Cerimonial

Assessoria de Assuntos Internacionais

Assessoria de Relao com Poder Pblico e Foras Armadas

Assessoria DAD - Disciplinas a Distncia

Gerncia de Logstica Logsitca de Materiais

Marcelo Bittencourt (Coord.)

Gerncia Servio de Ateno Integral ao Acadmico

Gesto Docente e Discente

Enzo de Oliveira Moreira (Coord.)

Capacitao e Assessoria ao Docente

Assessoria de Inovao e Qualidade de EAD

Secretaria de Ensino a Distncia

Coordenao Cursos Coordenadores de UNA

Eliza B. Dallanhol Locks (Gerente)

Vera Niedersberg Schuhmacher

Comunicao Visual para Web I

Palhoa UnisulVirtual 2011

Edio Livro Didtico

Bom estudo e sucesso! Equipe UnisulVirtual.

Universidade do Sul de Santa Catarina

Universidade do Sul de Santa Catarina

Comunicao Visual para Web I

Unidade 1 - Psicologia da comunicao

Unidade 2 - Cores na web

Unidade 3 - Etapas do processo de design

Unidade 4 - Por que usabilidade?

Universidade do Sul de Santa Catarina

Unidade 5 - Avaliando a usabilidade de websites

Comunicao Visual para Web I

Demais atividades (registro pessoal)

Conhecer a teoria da Gestalt do objeto. Ter conhecimento das implicaes existentes no

Ter conhecimento das implicaes geradas a partir de

decises de projeto e que so explicadas pela psicologia.

Universidade do Sul de Santa Catarina

Para incio de estudo

Comunicao Visual para Web I

Seo 1 - O que Gestalt?

Figura 1.1 - A Primeira Guerra Mundial Fonte: Guerras no mundo (2010).

Figura 1.2 - O castelo Fonte: Freeservers (2010).

Universidade do Sul de Santa Catarina

Figura 1.3 - A iluso das cores Fonte: Freeservers (2010).

As imagens no so apagadas imediatamente da retina.

Seo 2 - Um pouco da histria

Comunicao Visual para Web I

Seo 3 - Percepo da forma

Universidade do Sul de Santa Catarina

Figura 1.5 - Iluso de tica Fonte: Filho (2003).

Seo 4 - Os princpios da Gestalt

Comunicao Visual para Web I

Figura 1.6 - Unidade Fonte: Corporao Britnica de Radiodifuso (2010).

Figura 1.7 - Unidade Fonte: Elaborao da autora (2010).

Figura 1.8 - Segregao Fonte: Motor Trend (2004).