Your SlideShare is downloading. ×
Comunicação visual pra web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Comunicação visual pra web

5,649
views

Published on

muito bom esse livro

muito bom esse livro


0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,649
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
223
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Universidade do Sul de Santa CatarinaComunicação Visual para Web Disciplina na modalidade a distância Palhoça UnisulVirtual 2007
  • 2. ApresentaçãoParabéns, você está recebendo o livro didático da disciplina deComunicação Visual para Web.Este material didático foi construído especialmente para estecurso, levando em consideração o seu perfil e as necessidadesda sua formação. Como os materiais estarão, a cada novaversão, recebendo melhorias, pedimos que você encaminhe suassugestões sempre que achar oportuno via professor tutor oumonitor.Recomendamos, antes de você começar os seus estudos, queverifique as datas-chave e elabore o seu plano de estudo pessoal,garantindo assim a boa produtividade no curso.Lembre: você não está só nos seus estudos, conte com o SistemaTutorial da UnisulVirtual sempre que precisar de ajuda oualguma orientação.Desejamos que você tenha um excelente êxito neste curso!Equipe UnisulVirtual
  • 3. Vera Niedersberg SchuhmacherComunicação Visual para Web Livro didático Design instrucional Flavia Lumi Matuzawa 3ª edição revista Palhoça UnisulVirtual 2007
  • 4. Copyright © UnisulVirtual 2007Nenhuma parte desta publicação pode ser reproduzida por qualquer meio sem a prévia autorização desta instituição. 004.61 S41 Schuhmacher, Vera Niedersberg Comunicação visual para web I: livro didático / Vera Niedersberg Schuhmacher ; design instrucional Flavia Lumi Matuzawa, [Leandro Kingeski Pacheco]. – 3 ed. rev. Palhoça : UnisulVirtual, 2007. 296 p. : il. ; 28 cm. Inclui bibliografia. 1. Internet (Redes de computação). 2. Comunicação visual. I. Matuzawa, Flavia Lumi. II. Pacheco, Leandro Kingeski. III. Título.Ficha catalográfica elaborada pela Biblioteca Universitária da UnisulCréditosUnisul - Universidade do Sul de Santa CatarinaUnisulVirtual - Educação Superior a DistânciaCampus UnisulVirtual Bibliotecária Higor Ghisi Luciano Priscila Santos Alves Lamuniê SouzaRua João Pereira dos Santos, 303 Soraya Arruda Waltrick Pedro Paulo Alves Teixeira Liana PamplonaPalhoça - SC - 88130-475 Rafael Pessi Logística de Materiais Marcelo PereiraFone/fax: (48) 3279-1541 e Cerimonial de Formatura Vilson Martins Filho Jeferson Cassiano Almeida da Costa Marcos Alcides Medeiros Junior3279-1542 Jackson Schuelter Wiggers (coordenador) Maria Isabel AragonE-mail: cursovirtual@unisul.br Equipe Didático-Pedagógica Eduardo Kraus Olavo LajúsSite: www.virtual.unisul.br Coordenação dos Cursos Angelita Marçal Flores Priscilla Geovana Pagani Adriano Sérgio da Cunha Carmen Maria Cipriani Pandini Monitoria e Suporte Silvana Henrique SilvaReitor Unisul Aloísio José Rodrigues Caroline Batista Rafael da Cunha Lara (coordenador) Vilmar Isaurino VidalGerson Luiz Joner da Silveira Ana Luisa Mülbert Carolina Hoeller da Silva Boeing Adriana Silveira Ana Paula Reusing Pacheco Cristina Klipp de Oliveira Caroline Mendonça Secretária ExecutivaVice-Reitor e Pró-Reitor Cátia Melissa S. Rodrigues (Auxiliar) Daniela Erani Monteiro Will Dyego Rachadel Viviane Schalata MartinsAcadêmico Charles Cesconetto Dênia Falcão de Bittencourt Edison Rodrigo ValimSebastião Salésio Heerdt Diva Marília Flemming Enzo de Oliveira Moreira Francielle Arruda Tecnologia Itamar Pedro Bevilaqua Flávia Lumi Matuzawa Gabriela Malinverni Barbieri Osmar de Oliveira Braz JúniorChefe de gabinete da Reitoria Janete Elza Felisbino Karla Leonora Dahse Nunes Josiane Conceição Leal (coordenador)Fabian Martins de Castro Jucimara Roesler Leandro Kingeski Pacheco Maria Eugênia Ferreira Celeghin Ricardo Alexandre Bianchini Lilian Cristina Pettres (Auxiliar) Ligia Maria Soufen Tumolo Rachel Lopes C. Pinto Rodrigo de Barcelos MartinsPró-Reitor Administrativo Lauro José Ballock Márcia Loch Simone Andréa de CastilhoMarcus Vinícius Anátoles da Silva Luiz Guilherme Buchmann Patrícia Meneghel Tatiane SilvaFerreira Figueiredo Silvana Denise Guimarães Vinícius Maycot Serafim Edição – Livro Didático Luiz Otávio Botelho Lento Tade-Ane de AmorimCampus Sul Marcelo Cavalcanti Vanessa de Andrade Manuel Produção Industrial e Suporte Professora ConteudistaDiretor: Valter Alves Schmitz Neto Mauri Luiz Heerdt Vanessa Francine Corrêa Arthur Emmanuel F. Silveira Vera Niedersberg SchuhmacherDiretora adjunta: Alexandra Orsoni Mauro Faccioni Filho Viviane Bastos (coordenador) Michelle Denise Durieux Lopes Destri Viviani Poyer Francisco Asp Design InstrucionalCampus Norte Moacir Heerdt Flavia Lumi MatuzawaDiretor: Ailton Nazareno Soares Nélio Herzmann Gerência de Relacionamento Projetos Corporativos Leandro Kingeski PachecoDiretora adjunta: Cibele Schuelter Onei Tadeu Dutra com o Mercado Diane Dal Mago Patrícia Alberton Walter Félix Cardoso Júnior Vanderlei Brasil Projeto Gráfico e CapaCampus UnisulVirtual Patrícia Pozza Equipe UnisulVirtualDiretor: João Vianney Raulino Jacó Brüning Logística de Encontros Secretaria de Ensino a DistânciaDiretora adjunta: Jucimara Roesler Rose Clér E. Beche Presenciais Karine Augusta Zanoni Diagramação Marcia Luz de Oliveira (secretária de ensino) Rafael Pessi Design Gráfico (Coordenadora) Ana Luísa MittelztattEquipe UnisulVirtual Cristiano Neri Gonçalves Ribeiro Aracelli Araldi Ana Paula Pereira Revisão (coordenador) Graciele Marinês Lindenmayr Djeime Sammer Bortolotti RevisareAdministração Adriana Ferreira dos Santos Guilherme M. B. Pereira Carla Cristina SbardellaRenato André Luz Alex Sandro Xavier José Carlos Teixeira Franciele da Silva BruchadoValmir Venício Inácio Evandro Guedes Machado Letícia Cristina Barbosa Grasiela Martins Fernando Roberto Dias Zimmermann Kênia Alexandra Costa Hermann James Marcel Silva Ribeiro
  • 5. SumárioApresentação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 03Palavras da professora . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 07Plano de estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11UNIDADE 1 – Psicologia da comunicação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15UNIDADE 2 – Cores na Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41UNIDADE 3 – Etapas do processo de Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67UNIDADE 4 – Por que usabilidade? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85UNIDADE 5 – Avaliando a usabilidade de Websites . . . . . . . . . . . . . . . . . . . . . . . . . . .111UNIDADE 6 – Navegação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .135UNIDADE 7 – A compatibilidade na resolução de monitores e websites . . . . . . .151UNIDADE 8 – Conteúdo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .169UNIDADE 9 – Imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .197UNIDADE 10 – Tipografia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219UNIDADE 11 – O futuro da Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247Para concluir o estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .261Referências . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .263Sobre a professora conteudista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .267Respostas e comentários das atividades de auto-avaliação . . . . . . . . . . . . . . . . . . . . .269Anexo 1 - Imagens coloridas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .281
  • 6. Palavras da professoraVocê já tentou acessar um site de banco para realizarum pagamento e não conseguiu? Ao sair do site semefetuar a transação desejada sentimo-nos em plenoséculo XXI reféns da tecnologia e não apoiados por ela(como foi amplamente prometido!). Durante a últimadécada ocorreu uma transformação exuberante ematividades antes feitas de forma manual como linhas deprodução de indústrias, carros informatizados, educaçãoe principalmente o advento da Internet. Grande partedas atividades da vida moderna inserem os recursoscomputacionais no dia a dia do cidadão comum. Afacilidade e o conforto na utilização tornou-se umproblema sério, o cidadão trava um combate diário nautilização das facilidades propostas por tais tecnologias.Observe um cidadão na fila de um caixa eletrônico, tenteobservar quantos destes conseguem chegar ao final daoperação desejada de forma harmoniosa. Observe osseguintes sintomas: vergonha, frustração, raiva, e emmuitos casos a desistência do cliente.Por que isto acontece? Uma grande parcela de culpareside no projeto da interface e no diálogo da interaçãocom o usuário. Em muitas situações a preocupação écentralizada nas funcionalidades do sistema sendo odesign gráfico e o próprio projeto de interação colocadosem um plano secundário. Quando a interação ocorre emum Website a dificuldade em localizar a informação,efetuar a transação ou mesmo a aparência “desagradável”do site induzem o usuário a sair facilmente do portal,que na maioria das vezes não retorna. O internauta éimpaciente, situações vagas, incoerentes e confusas olevam a sair do site e continuar sua busca em outrosendereços.
  • 7. Universidade do Sul de Santa Catarina Durante a disciplina será possível conhecer melhor o projeto de design centrado no usuário assim como a introdução a conceitos que minimizem situações de desconforto e que facilitem a interação do usuário adequando-o as necessidades do cliente. É fundamental desde já que saibamos que o bom projeto de interface garante a aceitação do cliente e o conseqüente sucesso do produto. O projeto de design adequado ajuda de forma inestimável a fidelização do cliente ao site.10
  • 8. Plano de estudoO plano de estudos visa a orientá-lo/a no desenvolvimento daDisciplina. Nele, você encontrará elementos que esclarecerãoo contexto da Disciplina e sugerirão formas de organizar o seutempo de estudos.O processo de ensino e aprendizagem na UnisulVirtual levaem conta instrumentos que se articulam e se complementam.Assim, a construção de competências se dá sobre a articulaçãode metodologias e por meio das diversas formas de ação/mediação.São elementos desse processo: o livro didático; o Espaço UnisulVirtual de Aprendizagem - EVA; as atividades de avaliação (complementares, a distância e presenciais); o Sistema Tutorial.EmentaUsabilidade. Ergonomia de interface e navegabilidade.Psicologia da comunicação, arquitetura de informação emapa do site. Produção gráfica, diagramação, estética e suainfluencia na performance do site. Padronização gráfica.Resolução de monitores e compatibilidade. Indicadores dequalidade, tempo de visualização e projetos de otimização dacomunicação.
  • 9. Universidade do Sul de Santa Catarina Objetivos da disciplina Propiciar o desenvolvimento de sites mais eficientes centrados nos usuários. Utilizar Instrumentos de elicitação de conhecimentos. Esclarecer diretrizes para a concepção de Web sites consistentes a partir de normas e padrões reconhecidos. Apresentar técnicas e instrumentos de avaliação de usabilidade para sites Web. Carga horária A carga horária total da disciplina é 60 horas/aula, 4 créditos, incluindo o processo de avaliação. Agenda de atividades/ Cronograma Verifique com atenção o EVA, organize-se para acessar periodicamente o espaço da Disciplina. O sucesso nos seus estudos depende da priorização do tempo para a leitura; da realização de análises e sínteses do conteúdo; e da interação com os seus colegas e tutor. Não perca os prazos das atividades. Registre no espaço a seguir as datas, com base no cronograma da disciplina disponibilizado no EVA. Use o quadro para agendar e programar as atividades relativas ao desenvolvimento da Disciplina.12
  • 10. Comunicação Visual para WebAtividades obrigatóriasDemais atividades (registro pessoal) 13
  • 11. 1UNIDADE 1Psicologia da comunicação Objetivos de aprendizagem Estudar sobre a psicologia envolvida no processo de comunicação visual. Conhecer a teoria da Gestalt do objeto. Ter conhecimento das implicações existentes no mecanismo de memorização. Ter conhecimento das implicações geradas a partir de decisões de projeto e que são explicadas pela psicologia. Seções de estudo Seção 1 O que é Gestalt? Seção 2 Um pouco da história Seção 3 Percepção da Forma Seção 4 Os princípios da Gestalt Seção 5 Os mecanismos de memorização Seção 6 Restrições de tempo em relação à memorização
  • 12. Universidade do Sul de Santa Catarina Para início de conversa Quando você olha para uma página Web, para uma figura ou mesmo um documento impresso, você organiza o que está vendo, tenta impor uma estrutura e fazer conexões. Seu cérebro tenta decompor as imagens ao mesmo tempo em que tenta organizar estas partes de acordo com suas similaridades de cor, tamanho, textura e forma. Posteriormente, as partes são reagrupadas em um conjunto que permite a compreensão do seu significado. Durante esta unidade, você terá um contato muito próximo com a teoria da Gestalt, muito conhecida como o estudo das formas e que procura estabelecer relações por meio das quais as partes da imagem são agrupadas na percepção visual. No decorrer de seu estudo você fará uma incursão sobre os princípios que dão forma à teoria e justificam sua utilização. Você vai perceber que o bom uso dos princípios da Gestalt explica, muitas vezes, o sucesso de técnicas de projeto visual. Nesta unidade, você também explorará o universo da memória: por que lembramos de fatos ocorridos há 10 anos mas não lembramos de fatos lidos em uma revista a uma semana? O complexo mecanismo da memória e sua boa utilização na construção de um projeto de interface serão discutidos no decorrer da unidade.16
  • 13. Comunicação Visual para Web ISEÇÃO 1 – O que é Gestalt?A palavra Gestalt tem origem germânica e significa forma,forma regular ou ainda configuração. A teoria da Gestalt surgiunas primeiras décadas deste século (1920), ao mesmo tempo emque a Europa saía de um de seus períodos mais conturbados desua história - a Primeira Guerra Mundial.Figura 1.1 A Primeira Guerra Mundial*A Gestalt é uma escola de psicologiaexperimental atuante principalmentena área da teoria da forma. Suascontribuições foram fundamentaisao estudo da percepção, sensação domovimento, linguagem, memória,inteligência, entre outros. Figura 1.2 O castelo**Os Gestaltistas queriam compreender quais os processos *<http://www.psicológicos que estavam envolvidos na ilusão de ótica. O guerrasnomundo.hpg.que acontece ou como acontece quando um estímulo físico é ig.com.br/index2.htm>percebido pelo ser humano com uma forma diferente do que ele éna realidade. **<http://www.psicologia. freeservers.com/gestalt/ movimento.html> Na figura 1.2 você não tem a “impressão” de que todas as pessoas estão o tempo todo subindo a escada? Por quê? É uma ilusão de ótica de movimento contínuo. Unidade 1 17
  • 14. Universidade do Sul de Santa Catarina Quantas cores você acredita terem sido usadas na figura 1.3? Na verdade temos somente 2 tons de amarelo e 1 de azul, mas parecem terem sido usadas bem mais, não é mesmo?Para uma melhor compreensão,visualize, no anexo 1, ao final dolivro didático, esta figura colorida.<http://www.psicologia.freeservers.com/ilusoes/colors1.html> Figura 1.3 A ilusão das cores Você costuma ir ao cinema? O movimento que vemos na tela é uma ilusão de ótica causada pelo fenômeno da pós-imagem retiniana. As imagens vão se sobrepondo em nossa retina e o queAs imagens não são apagadas percebemos é um movimento. Mas o cinema que você vê é naimediatamente da retina. verdade uma seqüência de fotografias estáticas projetadas na tela. Além de explicar por meio de suas premissas este tipo de “ilusão”, a Gestalt sugere uma resposta ao porque de certas formas agradarem mais que outras; apoiando-se na fisiologia do sistema nervoso e na psicologia, comprovados por meio de experimentos e pesquisas. SEÇÃO 2 – Um pouco da história Em seu início, havia duas correntes na Gestalt, a dos dualistas e a dos monistas. Os dualistas acreditavam que perceberíamos os elementos separadamente e só então eles formariam o todo, através de uma ação do espírito, de uma percepção mental. Um desenho seria visto como partes, mas a forma total que percebemos estaria interligada pelo espírito que uniria seus elementos. Os monistas, por sua vez, sustentavam a idéia de que as partes dependem mais do todo e que o todo determina a ordem das partes. Para os monistas, forma e matéria não são separáveis, portanto, os elementos de uma forma não existem18
  • 15. Comunicação Visual para Web Iseparadamente. As partes são vistas como elementos formadoresdo todo. Em outras palavras, se modificarmos algum elemento otodo também é alterado.Quando em uma página mudamos a cor do fundo (figura 1.4)percebemos a mudança do todo (os elementos se modificam) enão apenas do fundo. Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. Figura 1.4 O conceito monista: o todo determina as partesA concepção monista acabou sendo a teoria polarizadora. Seusprincipais defensores Max Wertheimer, Kurt Koff ka e WolfgangKöhler acabaram por se tornar figuras de maior importância naescola da Gestalt. Os princípios da Gestalt estenderam-se alémda psicologia, para áreas como a Física e a Filosofia.SEÇÃO 3 – Percepção da forma O dicionário define percepção como o ato de adquirir o conhecimento de um fato, ser ou objeto, através dos sentidos.Segundo a Gestalt, a percepção da forma pelo cérebro é sempreuma percepção global dos estímulos, ou seja, o cérebro não enxergaelementos isolados. O olho humano tende a agrupar as váriasunidades de um campo visual para formar um todo, portanto,enxergamos o todo e não partes dele. Na figura a seguir os dois Unidade 1 19
  • 16. Universidade do Sul de Santa Catarina círculos centrais são de igual tamanho, mas parecem diferentes. Esta ilusão é provocada pela percepção total do conjunto. A noção de tamanho do círculo se dá pela dependência dos demais círculos. Figura 1.5 Ilusão de ótica. Fonte: Filho (2003) Nosso organismo percebe então um conjunto de elementos como uma forma completa, em que os componentes estão integrados entre si. Se decompormos algum elemento, estaremos automaticamente destruindo o conjunto. SEÇÃO 4 – Princípios da Gestalt Entre os princípios da Gestalt, destaca-se como fundamental referência para as composições gráficas, o seguinte conceito: “o todo é mais do que a soma das partes”. Isto equivale a dizer que “A + B” não é simplesmente “(A+B)”, mas sim um terceiro elemento “C”, que possui características próprias. A partir de experimentos e resultados científicos fundamentaram- se diretrizes que regem a percepção humana das formas. Estas leis apresentam conclusões sobre o comportamento natural do cérebro no processo de percepção. Em outras palavras, estas leis nos indicam o porquê de vermos as coisas de uma certa maneira e não de outra.20
  • 17. Comunicação Visual para Web IUnidadeA unidade pode ser vista como um único elemento, que existepor si só, ou pode ser vista como parte de um todo. SegundoFilho (2003), quando a unidade é vista como um único elemento,não existe agrupamentos ou mesmo relações entre os elementos. S Figura 1.6 - Unidade Figura 1.7 - UnidadeNa figura 1.6 é possível ver o grupo de pessoas como umaunidade, mas pode-se também dizer que cada pessoa constituiuma unidade, ou ainda uma sub-unidade, dentro do todo.Na figura 1.7 tem-se o exemplo de uma unidade onde não ocorreagrupamento. Neste caso, a unidade é formada por um únicoelemento: a letra S.Segregação A segregação é a capacidade perceptiva de separar, identificar, evidenciar ou destacar unidades formais em um todo ou em parte dele (FILHO, 2003).O uso de elementos como linhas, texturas, cores, sombras e outrosnos permitem realizar a segregação. Na imagem 1.8 podemossegregar as principais unidades: o carro, a estrada e o fundo.Mas é possível segregarmos a unidade automóvel em faróis, placa,vidros, rodas, calotas etc. Esta decomposição pode continuar atéque todas as unidades visíveis tenham sido mapeadas. Unidade 1 21
  • 18. Universidade do Sul de Santa CatarinaPara uma melhor compreensão,visualize, no anexo 1, ao final dolivro didático, esta figura colorida.<http://images.google.com.br/images?q=pessoas&hl=pt-BR&lr=&start=100&sa=N> Figura 1.8. Segregação Proximidade O princípio da proximidade descreve a tendência dos elementos individuais de serem associados com os elementos mais próximos, formando unidades. Quando colocamos elementos próximos, em condições iguais, a percepção do ser humano será reconhecê-los, formando um só todo. Observe a figura 1.9. Em um primeiro momento o que exatamente você vê? Duas colunas ou quatro colunas? aa aa aa aa aa aa aa aa aa aa aa aa Figura 1.9 Proximidade Nosso sistema nervoso organiza a figura como um todo e pelo efeito da proximidade nos leva a interpretar 2 colunas distintas, em 2 pares. As diferentes distâncias existentes nas 4 colunas nos levam ao agrupamento das mais próximas.22
  • 19. Comunicação Visual para Web I Quanto menor a distância maior a unidade. <http://www.pontofrio.com. br/cgi-bin/loja.pl>Figura 1.10 ProximidadeNa figura 1.10, as informações relacionadas a cada tipo de relógioestão próximas, criando a intenção de agrupamento. Na leitura dousuário ocorre a interpretação de que preço e descrição pertencemà imagem mais próxima.SimilaridadeElementos semelhantes tendem a se agrupar naturalmente. Asemelhança pode ser estabelecida pelo compartilhamento decaracterísticas visuais básicas como: cor, forma, tamanho entre outras. Observe o seguinte exemplo: Para uma melhor compreensão, visualize, OX OX OX OX aa aa aa aa no anexo 1, ao final do livro didático, esta figura OX OX OX OX ou aa aa aa aa colorida. OX OX OX OX aa aa aa aa Figura 1.11 SimilaridadeApesar dos espaços inter-elementos e inter-colunas terem sidoigualados, o agrupamento ocorre pela semelhança dos elementos.No primeiro caso pela composição da semelhança da forma dasletras OX e no segundo pelo uso da cor. Quanto maior a semelhança entre os estímulos, maior a probabilidade de serem percebidos como um grupo comum. Unidade 1 23
  • 20. Universidade do Sul de Santa Catarina A proximidade e semelhança são diretrizes que se completam quando o assunto é agrupamento, mas a semelhança é o fator mais forte de organização. Continuidade Conforme Filho (2003), a continuidade descreve a preferência pelos contornos contínuos e sem quebra, ao invés de combinações complexas de figuras irregulares. O cérebro tende sempre a enxergar a melhor continuação de retas e curvas, assim pode-se direcionar o cérebro a enxergar imagens de determinadas formas, de acordo com a necessidade. Quando você observa a figura (a), abaixo, o que é perce bido são duas linhas que se cruzam e não quatro linhas que se tocam em um ponto. a) b) z x y Figura 1.12 Continuidade Fonte: Filho (2003) Quando você vê a figura b, percebe que ela é composta de 3 elementos x, y e z. Quais dos elementos parecem uma continuação? Qual elemento parece ser um anexo? Se você respondeu que o elemento z parece um anexo, acertou! Ela fere o princípio da boa continuação. Curvas que não seguem a boa continuação natural perdem fluência e harmonia. Uma figura com linhas internas contínuas tende a ser vista como bidimensional, enquanto o desencontro de linhas internas nos direciona à tridimensionalidade. Fechamento O princípio do fechamento descreve a tendência humana de unir intervalos e estabelecer ligações. O cérebro humano interpreta o estímulo visual de forma completa, como figuras fechadas mesmo24
  • 21. Comunicação Visual para Web Iquando algumas informações de contorno estão ausentes. Essadiretriz é fácil de explicar. Você lembra de ter visto figuras queapesar de formadas por contornos não-contínuos, enxergou comounidades completas? Figura 1.13 FechamentoExiste a tendência psicológica de se unir intervalos e estabelecerligações. Na figura acima o que você vê? São três círculosincompletos ou realmente existe o contorno do triângulo?Figura/FundoQuando as partes integrantes de um todo são ligeiramentediferentes, tendemos a assimilá-las ao todo, percebendo-asde maneira uniforme. Por outro lado, quando as partes nãoconstituem um todo, a tendência perceptiva é no sentido decontrastá-las com o fundo. Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. Figura 1.14 Figura/FundoQuando colocamos uma cor cinzenta sobre um fundo branco,parecerá mais escura do que se inserida em um fundo negro. Unidade 1 25
  • 22. Universidade do Sul de Santa Catarina Normalmente, distingue-se figura de fundo pelo fato da figura ter uma forma e aparecer como objeto na frente. O fundo deve ser, então, sem forma, parecendo se estender de maneira contínua por trás da figura. No quadro Monalisa fica claro para o usuário a interpretação da figura e do fundo.Para uma melhor compreensão,visualize, no anexo 1, ao final dolivro didático, esta figura colorida.*<http://images.google.com.br/images>**<http://www.geocities.com/Area51/9839/ilusoes.htm> Figura 1.15 Figura/Fundo* Figura 1.16 Figura/Fundo** Na figura 1.15, a consideração do que é figura ou do que é fundo faz com que o indivíduo interprete a figura como um homem tocando sax ou o rosto de uma jovem mulher. Pregnância A lei da pregnância diz que todas as formas tendem a ser percebidas em seu caráter mais simples, as forças de organização tendem a se dirigir sempre no sentido da clareza, unidade e equilíbrio (FILHO, 2003). Uma casa pode ser vista por 2 formas geométricas: um retângulo e um triangulo. E uma forma forte e pregnante, pois consegue transmitir com muita simplicidade a informação.26
  • 23. Comunicação Visual para Web I Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. Figura 1.17 Pregnância da formaÉ o princípio da simplificação natural da percepção. Quantomais simples, mais facilmente é assimilada, desta forma, a partemais facilmente compreendida em um desenho é a mais regular,que requer menos simplificação. Quando a figura é pregnante, elaexprime uma característica qualquer de forma forte, de maneiraque se destaque e seja de fácil compreensão.Formas fechadas, simétricas, regulares atraem o olhar e sedestacam do fundo, quando a forma é pregnante, facilmenteconseguimos separá-la do fundo. A imagem aérea da Cidade do México é de baixa pregnância, o grande número de unidades formais e a organização visual confusa dificultam a leitura e a compreensão. http://encarta.msn.com/media_ 461539938_761569238_-1_1/ Aerial_View_of_Mexico_City.html Figura 1.18 Baixa Pregnância da forma Unidade 1 27
  • 24. Universidade do Sul de Santa Catarina O Taj Mahal é um exemplo da boa pregnância da forma. Podemos observar o uso da continuidade, da ordem, da proximidade, da semelhança dos elementos e do equilíbrio.Para uma melhor compreensão,visualize, no anexo 1, ao final dolivro didático, esta figura colorida.<http://www.gimcracker.com/ Figura 1.19 Boa Pregnância da formaarchives/Taj-Mahal.jpg> Conheça mais sobre as leis da Gestalt Bibliografia Gestalt - Publicações em língua portuguesa URL: http://www.gestalttheory.net/pubs/gestaltismo.html International Society for Gestalt Theory and its Applications - GTA URL: http://www.gestalttheory.net/ Gestaltismo e Percepção URL: http://www.psicologia.freeservers.com/gestalt/28
  • 25. Comunicação Visual para Web ISEÇÃO 5 – Os mecanismos de memorizaçãoA visão humana é o sentido que provê o maior volume deinformações a serem processadas pelo cérebro, estima-se quemetade do potencial de processamento cerebral humano sejautilizado na organização de informações visuais.Nossos usuários de software percebem as informações pormeio de um sistema sensorial. Os novos recursos da tecnologiapermitem que esta percepção ultrapasse o sentido da visão,fazendo uso da audição e do tato. No mecanismo de percepção, olhos e cérebro atuam em conjunto na interpretação das informações.Ao percebermos as informações, as mesmas são codificadas,processadas, usando-se argumentos de raciocínio, além de seremarmazenadas na memória para posterior recuperação.A MemóriaA memória é o mecanismo que nos permite recordar pessoas,acontecimentos, coisas que aconteceram anteriormente. Richard Järnefelt deDesde que o ser humano iniciou sua trajetória em áreas de Helsinki, Finland,pesquisa, o funcionamento e as circunstâncias em que ocorrem conquistou, em 1999,a memorização são arduamente discutidas. Nas últimas o Guinessbook, comdécadas, muito se tem estudado a respeito das características um repertório de 3.000 músicas tocadas no piano,e do funcionamento da memória humana. Estudos evoluíram, sem partituras, apenaspermitindo a compreensão dos meios fisiológicos de como o ser com o uso da memória.humano armazena as informações, assim como as razões pelas Fonte: http://www.quais podemos perdê-las. guinnessworldrecords. com/gwr5/conten Figura 20. Recorde no Guinessbook Unidade 1 29
  • 26. Universidade do Sul de Santa Catarina O uso deste conhecimento para os projetistas de software na construção de projetos de Web permite uma melhor adaptação do projeto às características e delimitações da memória humana, considerando suas habilidades e capacidade em termos cognitivos. A natureza da memória pressupõe dois fatores: a codificação (estratégias de memorização) e a recordação. A codificação vai permitir a maior ou menor facilidade de se recordar determinada informação. A recordação pode ser livre ou por reconhecimento (somos expostos a pistas que no reavivam a memória). Quando reproduzirmos o que entrou, recupera-se a memória. Segundo Schneiderman (1992), a memória humana pode ser dividida em três partes, cada uma com diferentes características: Memória Rápida ou de Curto Termo. Memória de Trabalho ou Sensorial. Memória Permanente ou de Longo Termo. Memória de Curto Termo A memória de curto termo armazena informações na memória em apenas um curto espaço de tempo 10 a 25 segundos, no máximo. É uma memória rápida, recebendo as informações de entrada captadas pelos órgãos dos sentidos (olhos, ouvidos, olfato e tato) e os passa ao sistema cognitivo. Nesta memória são armazenadas respostas aos estímulos como: informações expressas pela fala, movimentos e ações. As informações são armazenadas por um período de aproximadamente 10 segundos, armazenando poucas informações a cada vez. A memória de curto termo guarda, em média, um número de 7 informações captadas pelos órgãos dos sentidos (BORGES, 2005).30
  • 27. Comunicação Visual para Web I— Que tal repetirmos um experimento realizado em 1956 porMiller? Faça um ditado de 30 palavras com seu amigo maispróximo. Finalizado o ditado, peça para que ele escreva todas aspalavras que ele consegue recordar.E então? Qual foi o resultado?Este teste nos dá uma idéia da quantidade de informaçãoarmazenada na memória de curto termo!Memória de Trabalho ou SensorialA memória sensorial também é conhecida como memória detrabalho. Na memória sensorial são trabalhadas as informaçõescaptadas pela memória de curto termo e posteriormente enviadasà memória permanente. A memória de trabalho pode armazenarinformações por um tempo, podendo variar de minutos a dias,mas mesmo assim a informação será posteriormente eliminada(BORGES, 2005). Você já estudou para fazer um concurso ou vestibular? Cursinhos são especialistas em criar mecanismos para conectar e organizar informações de forma que as mesmas permaneçam na memória permanentemente, permitindo que você as recupere mais tarde (dias, meses, anos).Você lembra de alguma situação quando estudou para umaavaliação escolar e uma semana depois não lembrava mais doconteúdo? Tente descrever a fisiologia da célula ou os nomes dosrios que fazem parte da Região Norte!Quando o assunto não é considerado fundamental ouimportante para o indivíduo, o mesmo não estabelecemecanismo de codificação. Desse modo, este conteúdodificilmente irá atravessar as fronteiras da memóriasensorial. Lembramos do conteúdo até realizar a prova,uma semana depois, apesar de uma boa nota, nãolembramos mais do assunto e dificilmente repetiríamosa boa nota sem estudar novamente. Unidade 1 31
  • 28. Universidade do Sul de Santa Catarina A memória de curto termo recupera informação na memória permanente. Mas quais mecanismos podemos usar para registrarmos ou recuperarmos a informação na memória sensorial? Podemos usar metáforas, analogias, regras e tudo aquilo que de alguma maneira chame a atenção do indivíduo. Lembram das famosas musiquetas cantadas por professores de química e física? Memória de Longo Termo Quando armazenamos uma informação na memória de longo termo, ela permanece para sempre. Além da possibilidade de recuperação, também temos a característica relacionada a sua capacidade, até hoje não temos como quantificar as informações que podem ser armazenadas nela ou mesmo seu espaço. Algumas informações são recuperadas diretamente da memória permanente para a memória de curto prazo, sem passar pela memória sensorial. Isto acontece porque são informações utilizadas pelo individuo há muito tempo e de forma repetida. Se neste momento, perguntar para você qual o seu nome? Quando você nasceu? Qual o nome de sua esposa(o) ou namorada(o)? Essas seriam respostas imediatas, já estão a um longo tempo com você e não são necessários mecanismos de recuperação. Fala, Audição Fala, Movimento Memória de Trabalho Memória de Curto Termo ou Sensorial Memória de Longo Termo ou Permanente Figura 21. Esquema de Funcionamento da Memória segundo Schneiderman (1992)32
  • 29. Comunicação Visual para Web ISEÇÃO 6 – Restrições de tempo em relação à memorizaçãoBen Schneiderman (1992) realizou vários estudos relacionadosao mecanismo de memorização e percepção. Estes resultados nosfornecem dicas para a boa utilização da memória em projetos deinterfaces. Nestes estudos, o pesquisador aponta a insatisfaçãode usuários com mecanismos de interface, em que o tempo deresposta é superior a 2 segundos.A razão para isto é que o ser humano guarda informações namemória de curto termo por no máximo 15 segundos. Quandoo usuário espera além deste tempo, ele precisa recordar o queestava fazendo, o que torna a interação mais difícil e lenta. Ogrande problema é que de acordo com a tarefa os tempos deresposta aceitáveis são diferentes, veja os resultados coletados porSchneiderman (1992) e Galitz (1993): digitar, movimentar o cursor, ou selecionar com o mouse: 50-150 milissegundos; tarefas simples como o iniciar um brower: menos de 1 segundo; introduzir dados para buscas de dados: 1-4 segundos; tarefas complexas como cálculos, registros : 8-30 segundos.O tempo de resposta é crucial para um bom projeto, assim comoo uso, ao longo do projeto, de mecanismos de codificação quepermitam tornar o site interessante e inesquecível. Dicas para a boa utilização da memória do usuário Evite a carga de elementos de multimídia que levam um intervalo de tempo longo para serem carregados em conexões de baixa velocidade. O limite de tempo ideal para operações de carga é 15 segundos. SEGUE Unidade 1 33
  • 30. Universidade do Sul de Santa Catarina Insira indicadores de feedback (barras de progressão, ampulhetas girando, quando não é possível determinar o tempo necessário até o término da tarefa) quando o tempo de processamento é longo. Figura 22. Indicadores de feedback O sistema deve reagir após uma ação, em um tempo máximo de 0,1 segundo. 1,0 segundo é o tempo limite para que o fluxo de pensamento do usuário permaneça ininterrupto. 10 segundos é o tempo limite para manter a atenção do usuário focada num diálogo. 10 segundos é o tempo que a memória de curto tempo se mantém carregada com alguma informação captada pelo sistema cognitivo. As informações devem estar visíveis ao usuário por um período que permita sua identificação e reconhecimento (páginas que somem rapidamente sem dar oportunidade de identificação são esquecidas com a mesma velocidade). Projetistas devem criar mecanismos para associação de ações. Por exemplo, para voltar a um ponto anterior deve haver uma indicação explícita, como uma tecla Voltar. Operações freqüentes acabam sendo memorizadas na memória de longo termo e a escolha de ícones para ações deve ser consistente. Nos dois exemplos* o uso do carrinho para indicar o ato de comprar em sites de ecommerce são facilmente interpretados, pois já foram memorizados pela repetição de uso em diferentes sites. Figura 23. Ícones Projetistas devem tomar um cuidado redobrado com operações que, pela repetição, tornam-se óbvias para o projetista e acabam não sendo explicadas para o usuário, mas que na verdade não são óbvias para ele. Fonte: SCHNEIDERMAN (1992) *www.americanas.com; www.pontofrio.com.br34
  • 31. Comunicação Visual para Web I Você está curioso(a) sobre aspectos relacionados ao mecanismo de memorização? Dê uma espiadinha nestes artigos, eles são muito interessantes. Notícia é destaque hoje e esquecida amanhã http://www.comciencia.br/reportagens/memoria/05.shtml A memória http://www.comciencia.br/reportagens/memoria/15.shtmlSínteseDurante a unidade foi possível perceber a importância da noçãode unidade da Gestalt na psicologia da percepção, e também aimportante relação sujeito-objeto. Quando percebemos as imagensocorre o resultado da interação luz na retina, com a tendência deorganizar da melhor forma possível os estímulos externos.Você pôde perceber, por meio das diferentes leis, que ilusõesde ótica são criadas pelo uso da forma, que é possível brincarcom idéias de agrupamento utilizando a proximidade e/ousimilaridade, que não é necessário desenhar uma formacompletamente para que a mesma se torne uma informação parao usuário (continuidade).Observou que a lei fundamental da teoria da Gestalt é apregnância da forma, em que o objeto apresenta o máximode equilíbrio, clareza e unificação visual pelo uso da máxima:simplicidade.Você também aprendeu que a memória é organizada em umaestrutura de três elementos, a memória de curto termo, longotermo e de trabalho. Agora já é possível entender a importânciado tempo de resposta no projeto da interface e da necessidadede usarmos mecanismos de projeto que chamem a atenção dousuário de forma que a informação seja inesquecível para ele. Unidade 1 35
  • 32. Universidade do Sul de Santa Catarina Atividades de auto-avaliação 1) Qual o significado da Pregnância, para um indivíduo, no mecanismo de percepção? 2) Em que situação a lei da semelhança e da proximidade são complementares em um projeto de página? Procure um exemplo deste aspecto na internet e cite o endereço. 3) Procure um exemplo do uso da lei do fechamento em logotipos ou páginas na internet, cite o exemplo e o respectivo endereço.36
  • 33. Comunicação Visual para Web I4) Relacione as formas abaixo com as leis da Gestalt (pregnância, figura/ fundo, proximidade, semelhança, continuidade, fechamento):a) b) Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida.c) d)e) f)g) Unidade 1 37
  • 34. Universidade do Sul de Santa Catarina 5) Relacione os temas relacionados ao armazenamento da memória: [A] Memória de Curto Termo; [B] Memória de Trabalho; [C] Memória de Longo Termo; a) ( ) Armazena a informação por um espaço de 10 a 25 segundos; b) ( ) permite o armazenamento de informações por um longo período; c) ( ) armazena informações por horas e até dias; d) ( ) é a memória responsável por enviar informações para a memória permanente; e) ( ) armazena informações relacionadas aos sentidos como fala, audição; f) ( ) é a memória responsável por recuperar informações da memória permanente; g) ( ) armazena, no máximo, sete informações e as apaga da memória rapidamente. 6) Em termos de projeto de interface Web, quais artifícios você pode utilizar para sensibilizar o usuário fazendo com que o mesmo se “recorde” do diálogo existente na sua página?38
  • 35. Comunicação Visual para Web ISaiba mais AMARO, Fausto. Mecanismos de memória. www.ncs.iscsp.utl.pt/apontamentos/index.php?dir=3%BA%20Ano/&file=Psicologia.rtf Recomendações para design. http://www.fast-consulting.com/GUI%20Design%20Handbook/gdhb_menubar.htm Publicações sobre Gestalt em língua portuguesa. http://www.gestalttheory.net/pubs/gestaltismo.html FILHO, Gomes J. Gestalt do Objeto. São Paulo: Escrituras, 2003. Unidade 1 39
  • 36. 2UNIDADE 2Cores na Web Objetivos de aprendizagem Entender o mecanismo fisiológico de reconhecimento das cores. Perceber os cuidados necessários para o uso da cor na Web. Compreender os efeitos e as influências da cor durante o projeto de interface. Seções de estudo Seção 1 Mas o que é cor? Seção 2 A visão humana da cor Seção 3 Teoria das cores Seção 4 Definição da cor de fundo da página Seção 5 Recomendações para o uso de cores na Web
  • 37. Universidade do Sul de Santa Catarina Para início de conversa A unidade Cores na Web traz à tona a importância do uso da cor no projeto de Web sites. Muitas vezes consideramos a cor apenas como um fator estético, mas se você observar os objetos que você usa no cotidiano, vai perceber aspectos interessantes: o botão de ligar e desligar do controle remoto de sua tv é vermelho, quantas cores existem no teclado do seu celular? O painel do seu carro faz uso de no mínimo três cores, por quê? O uso da cor proporciona uma importante dimensão na comunicação visual, se a utilizamos com sabedoria melhora a interpretação de uma mensagem, se mal utilizada pode prejudicá-la. Quando vamos escolher as cores a serem utilizadas em nossos sites acabamos, às vezes, por perder o sono à noite até tomarmos a decisão. Qual cor? Quantas cores? Quais combinam? As cores da empresa, o gosto do cliente, nossas decisões durante o projeto nos colocam em ciladas virtuais. As escolhas relacionadas ao uso da cor vão além dos meros aspectos pessoais. O uso eficiente da cor depende de fatores que variam de particularidades como: recursos visuais disponíveis, fatores humanos e do próprio contexto de uso e do ambiente onde a mesma será utilizada. Durante a unidade vamos explorar este mundo colorido, a maneira como vemos, como interpretamos, tentando entender melhor para aplicar mais adequadamente a cor nos projetos de sites para Web. SEÇÃO 1 – Mas o que é cor? Em 1966, Newton descobriu Figura 2.1 que a luz branca do sol pode ser decomposta com o auxílio de um prisma de cristal em radiações de larguras variáveis (magenta, alaranjado, amarelo, verde, azul ciano, anil e violeta). Sem luz não existe cor!42
  • 38. Comunicação Visual para Web IA impressão destas radiações sobre a retina do olho é o quedistinguimos como cor. A cor pode ser definida como umcomprimento de onda.O comprimento de onda para o vermelho é de 580 nm(nanômetros), para o verde 540 nm e para o azul 440 nm. Quando você vê um arco-íris, você está vendo a luz solar decomposta nestas 7 cores. Você sabe o que funciona como prisma neste caso? As gotículas de água! Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. Figura 2.2 - Decomposição da luz <http://www.dailytimes.com. pk/default.asp?page=story_ 26-7-2005_pg9_9>SEÇÃO 2 – A visão humana da corO olho humano é o órgão responsável pela recepção da visão.O olho é formado pelo globo ocular que é uma esfera comaproximadamente 2,5 cm de diâmetro. Quando você fi xa o olharsobre um objeto, a imagem deste objeto atravessa a córnea, depoispassa pela íris - que é responsável por regular a quantidade de luzrecebida por meio da pupila. Unidade 2 43
  • 39. Universidade do Sul de Santa Catarina<http://pt.wikipedia.org/wiki/Globo_ocular> Figura 2.3 - Globo Ocular Após atravessar o cristalino, a imagem é focada sobre a retina (invertida, depois o cérebro acerta isto!). Você conhece o mecanismo de uma máquina fotográfica? Nosso globo ocular pode ser comparado a uma máquina fotográfica, onde o cristalino seria a objetiva, a íris o diafragma e a retina seria a placa ou película. Quando a imagem chega ao cristalino, ela é ajustada, sendo levada para trás ou para frente, permitindo que ela se projete sobre a retina. Nossa retina está provida de duas espécies de células sensíveis à luz: os bastonetes e os cones. Cones e bastonetes Os bastonetes permitem a visão para intensidades luminosas muito pequenas (noite, crepúsculo). Recebem apenas impressão de luminosidade e nenhuma impressão cromática. Por isto quando saímos da cama à noite, no escuro, os objetos coloridos aparecem sem cor, nossa visão está por conta dos bastonetes. Os bastonetes (120 milhões de células) não percebem diferenças finas de forma e cor. Os cones permitem a impressão colorida em claridades média e grande (visão diurna), a imagem fornecida é mais nítida e detalhada. Existem três tipos de cones (três milhões de células) no olho humano, cada um distingue uma cor diferente: vermelho, verde ou azul. Você sabia que a quantidade de cones vermelho, verde ou azul é 40:20:um? É por este motivo que sua sensibilidade para o azul é muito menor do que para o vermelho. Em outras palavras, você vê um número maior de tons de vermelho do que azuis.44
  • 40. Comunicação Visual para Web ICampo visualA capacidade de percepção das cores está diretamente relacionadaao campo visual. A distribuição das células fotoreceptoras nãoé uniforme. Olhe a figura 2.5, na área central existem apenascélulas do tipo cone (1), no campo central (2) existem células dotipo cone e bastonetes, na área periférica encontram-se apenasbastonetes (3).Na região da fóvea (1) ocorre a projeção da imagem do objetofocalizado. Nós enxergamos com nitidez somente objetos focadosna fóvea. Essa permite que a luz atinja os fotorreceptores sempassar pelas demais camadas da retina, maximizando a acuidadevisual. É a capacidade de oOs bastonetes, ausentes na fóvea, são encontrados principalmente olho de distinguir entrena retina periférica (2,3), sendo responsáveis pela transmissão de dois pontos próximos,informações para as células ganglionares. e depende de diversos fatores, em especialNo fundo do olho está o ponto cego, insensível à luz, não há do espaçamento doscones nem bastonetes, dele emergem o nervo óptico e os vasos fotorreceptores na retina e da precisão da refraçãosangüíneos da retina. do olho. Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. Figura 2.4. - Campo Visual (WICKER, 2000).Segundo Winkler (2000), a área central da visão (1) é aresponsável pela leitura e deve receber máxima percepção econtraste. O campo central (2) deve contrastar com a áreacentral, com uma relação de 2:1, e o campo visual perifériconão deve exceder de 10:1. A área periférica percebe apenasmovimentos e vultos. Unidade 2 45
  • 41. Universidade do Sul de Santa Catarina Você já chegou ao cinema após o início da sessão? Saiu da ante-sala com muita claridade e entrou na sala de projeção exatamente no momento em que a cena estava muito escura? Como você se sentiu? Aquela cegueira momentânea é causada pela acomodação dos cones e pelo aumento da sensibilidade dos bastonetes. O inverso também acontece, imagine você saindo de uma sala com baixa luminosidade para um gramado em um dia de sol intenso. Formação de imagens coloridas na retina Durante todo o processo da percepção visual o cristalino se modifica, se adapta, de modo a focalizar sobre a retina a imagem do objeto visualizado. A acomodação e a convergência do cristalino dependem da cor do objeto visualizado. Isto acontece porque as ondas verde, azul e vermelha convergem a diferentes distâncias da retina. Na figura 2.5 é possível observar que as ondas vermelhas convergem além da superfície da retina, enquanto os comprimentos de onda verdes sobre a retina e azuis convergem antes da retina. Quando focalizamos objetos avermelhados, o cristalino se torna mais convexo, como se o objeto estivesse próximo do observador. Quando focalizamos um objeto azul, o cristalino fica menos convexo (mais relaxado), como se objeto estivesse distante (WINCLER, 2000).Para uma melhor compreensão,visualize, no anexo 1, ao finaldo livro didático, esta figuracolorida. Figura 2.5 - Foco sobre a retina Fonte: Apostila de técnicas de apresentação - Roberto Cabral de Mello Borges - UFRGS. 2003.46
  • 42. Comunicação Visual para Web IO uso de cores intensas causa fadiga visual justamente pelanecessidade constante de adaptação do cristalino. Imagineo uso do azul e do vermelho simultaneamente, as diferentesprofundidades de foco seriam fatigantes!A cegueira para algumas coresVocê sabia que o daltonismo é uma deficiência na visão quedificulta a percepção de uma ou de todas as cores (na sua variaçãomais comum o daltônico não distingue o vermelho do verde)? O daltonismo é uma deficiência quase que exclusivamente masculina, para 10% da população masculina apenas 1% das mulheres apresentam o problema. No projeto Web, temos que considerar esta parcela da população fazendo uso da luminância, de forma a permitir a diferenciação da cor.Que tal você verificar sua acuidade visual? Qual número você vênas esferas? Este teste tenta detectar a deficiência da percepção dacor – o daltonismo. Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. <http://chost.sites.uol. com.br/Principal/teste_ de_daltonismo.html> Figura 2.6 - Teste de visãoImagino que agora você esteja se perguntando: como o indivíduodaltônico diferencia as luzes verdes e vermelhas do semáforo,já que para esse indivíduo as duas cores são apenas variações docinza? Em tempo, os números nas esferas são o 5 e o 6. Unidade 2 47
  • 43. Universidade do Sul de Santa Catarina SEÇÃO 3 – Teoria das cores Muitas teorias procuram explicar o fenômeno da visão cromática, mas todas elas se baseiam na observação de que o olho humano pode detectar quase todas as graduações de cores, quando as luzes monocromáticas vermelho, verde e azul são misturadas apropriadamente. As cores se dividem em três grupos: primárias, secundárias e terciárias. Cores primárias São as cores que não podem ser formadas por nenhuma mistura. São elas: azul, amarelo e vermelho. Quando misturadas de forma variável produzem todas as cores do espectro. Cores secundárias São formadas por duas cores primárias misturadas em partes iguais. Cores terciárias São as intermediárias entre uma cor secundária e qualquer das duas primárias que lhe dão origem (PEDROSA, 1982). Observe a figura baixo, construída por Fabris, em 1973. As cores primárias estão no centro, as secundárias (verde, laranja e violeta) no segundo triângulo. O terceiro ciclo se complementa com as cores terciárias. Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. Figura 2.7 - Círculo das cores (FABRIS, 1973)48
  • 44. Comunicação Visual para Web ICores complementaresSão as cores opostas no disco de cores. O vermelho écomplementar do verde, o azul é complementar do laranja.As cores complementares são usadas para dar força e equilíbrioa um trabalho, criando o máximo de contraste. As corescomplementares são as que dão mais contrastes entre si, sequeremos destacar um amarelo, devemos colocar junto dele umvioleta. Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. Figura 2.8. - Cores complementares (Vera Schuhmacher)Cores análogasSão as que aparecem lado a lado no disco de cores. São análogasporque há nelas uma mesma cor básica. O amarelo-ouro e o laranja-avermelhado têm em comum a cor laranja. Elas são usadas para dar a sensação de uniformidade, profundidade, movimento, luz e sombra.Podemos considerar análogas três cores que se apresentam emseqüência, no círculo das cores, como: o laranja, laranja-vermelhoe vermelho. Unidade 2 49
  • 45. Universidade do Sul de Santa Catarina Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. Figura 2.9. - Círculo das cores (WINCKLER, 2000) Figura 2.10. - Cores Análogas (Vera Schuhmacher) O contraste das cores A sensação da cor depende de três parâmetros: o croma, a intensidade e o matiz (GUIMARÃES, 1997). Matiz É a característica que diferencia uma cor de outra, por exemplo, o amarelo do azul, o verde do violeta. Refere-se a maior ou menor quantidade de luz presente na cor. Quando se adiciona preto a determinado matiz, esse se torna gradualmente mais escuro, e essas graduações são chamadas escalas tonais. Para se obter escalas tonais mais claras, acrescenta-se branco. Observe o que ocorre na figura 2.8, quando acrescentamos branco a cor.50
  • 46. Comunicação Visual para Web I Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida.Figura 2.11. Escalas tonais (Vera Schuhmacher)CromaÉ a qualidade específica de saturação da cor, que indica o seu graude pureza. Mas o que é saturação? Imagine um copo de leitepuro. Agora imagine você adicionando a este leite cinco colheresde chocolate em pó. O leite vai ficar bastante escuro. Agora vocêcomeça adicionando leite a esta mistura, a cor vai clareando,mas ainda é marrom, quanto mais leite você adicionar mais clarovai ficar o leite. Se você adicionar 10 litros de leite à mistura, éprovável que o líquido fique quase branco. Podemos dizer que a saturação refere-se à quantidade de branco em uma cor.Quando diminuímos a saturação a imagem acaba por ficar empreto e branco,com o grau de saturação em 0. Para que você possa visualizar essa transição, consulte o arquivo publicado na Midiateca. Ele apresenta uma imagem com diversos tons de saturação.Mas quando ocorre ao contrário e aumentamos a saturação, aimagem acaba por ficar quase com um aspecto irreal. Unidade 2 51
  • 47. Universidade do Sul de Santa Catarina Luminosidade É a quantidade relativa de claro ou escuro em uma escala do preto ao branco. É fundamental para a percepção de profundidade. Contraste É a base à distinção da forma, tamanho, posição, volume e aparência dos objetos. Ele pode ser obtido através de diferenças do matiz e ilumina ção. O contraste pode ser usado para alterar a sensação de tamanho entre objetos. Um exemplo é quando queremos parecer mais magros e usamos roupa preta. As cores contrastantes são diretamente opostas no disco das cores; como o azul e o amarelo. Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. Figura 2.14. Contraste das cores Compare os diferentes efeitos produzidos pelo contraste do fundo para o mesmo quadrado vermelho. O quadrado vermelho parece mais brilhante (preto), menos brilhante (laranja) ou ainda maior (preto), de acordo com o fundo utilizado. Saiba mais Não deixe de acessar o site Color in Motion no endereço <http://www.mariaclaudiacortes.com/>. O site é uma experiência interativa sobre a comunicação e o simbologismo da cor. Você vai aprender em que situações determinadas cores expressam uma informação, suas cores complementares e como elas são utilizadas em diferentes países.52
  • 48. Comunicação Visual para Web I Que tal brincar com um aplicativo que gera esquemas e combinações de cores? Cada esquema se baseia em uma cor usada como base, que é combinada e complementada por cores adicionais, calculadas por meio de algoritmos que permitem a melhor combinação ótica. Esta ferramenta Color Scheme está disponível em <http://wellstyled.com/tools/>. Divirta-se !!SEÇÃO 4 – Sistema e representação das coresAs cores são representadas de maneira diferente se o dispositivoreflete ou emite luz. Objetos que não emitem luz refletem umaparte da luz que incide sobre eles e absorvem a outra parte.A sensação da cor é relativa e variável, segundo a natureza dafonte luminosa e do objeto. Se uma laranja lima é iluminada poruma luz azul, esta se transforma em verde; neste caso a reflexãodo amarelo se soma a da luz azul e ambas as cores são refletidasmisturadas. Assim, os dispositivos que representam cores seguem o modelo subtrativo, quando não emitem luz, e aditivos quanto emitem luz.Dispositivos que misturam pigmentos coloridos (impressora,Scanner), seguem o modelo subtrativo, cujas cores primárias são:amarelo, magenta e ciano. A mistura de todas as cores produzo preto. Dispositivos baseados na emissão de luz (monitor,data-show) seguem o modelo aditivo, cujas cores primárias sãovermelho, verde e azul-violeta. O branco é obtido pela mistura detodas as cores. Unidade 2 53
  • 49. Universidade do Sul de Santa Catarina São modelos aditivos o HSV, o HLS e RGB. Entre os modelos subtrativos, o mais empregado é o CMYK. O sistema RGB é o padrão de cores na WWW. É um sistema cartesiano (x, y, z) onde cada cor primária (Red, Green e Blue) representa um dos eixos do cubo RGB. O modelo CMYK é formado pelas cores ciano (Cyan), magenta (Magenta), amarelo (Yellow) e preto (blacK). É utilizado em dispositivos de impressão. Há diferenças entre cores representadas em monitores do mesmo padrão RGB. Diversos fatores causam as diferenças, entre eles, o gamut, ou seja, o grau de contraste entre os valores intermediários de cinza de uma imagem. O valor de gamut do Macintosh é de 1.8 e de um PC é 2,2. Imagens geradas em um Mac parecerão muito mais escuras na plataforma PC, enquanto as geradas no PC parecerão apagadas e sem brilho no Mac.“Signal detection theory”, um SEÇÃO 5 – Definição da cor de fundo da páginamodelo estatístico elaborado nadécada de 50. Segundo a teoria de detecção de sinais, o cérebro humano interpreta e organiza a informação que recebe em forma ótima, quando no campo visual há um número mínimo de cores e formas: quanto menos “ruído”, mais claro é o “sinal”. Quando você escolhe o padrão de cores de um site é importante observar alguns aspectos relacionados por Schneirman (2000): Assunto da página: é um site voltado ao entretenimento? É um site voltado para venda de imóveis? Público alvo: há algum fator de homogeneização? Sexo (maioria homens ou mulheres), idade (é uma página que pretende atingir o público infantil ou para jovens procurando diversão noturna), experiência (os usuários são funcionários de uma empresa com ou sem experiência no uso da internet/intranet)? Existem outros fatores a serem considerados? Ou os usuários formam uma platéia altamente heterogênea? (usuários de um sistema de caixa eletrônico de um banco, por exemplo)54
  • 50. Comunicação Visual para Web I Ambiente: qual é ou grau de estresse ao qual os usuários estão submetidos (elevado, como em um sistema de bolsas de valores?)? Qual é a luminosidade do ambiente?Veja a seguir alguns exemplos. Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. <http://disney.go.com/ home/today/index.html> Figura 2.15. Website da Disney <http://sepultura.uol. com.br/v6/> Figura 2.16. Website da banda Sepultura Unidade 2 55
  • 51. Universidade do Sul de Santa Catarina A cor básica de fundo (o Matiz), da página inicial do site Disney, é azul. Uma cor que, além de transmitir confiança, calma e estabilidade, é perfeitamente visível para a grande maioria da população. Note que apesar do impacto visual não há muitas cores: fora o azul básico, utilizaram-se o verde, branco e laranja (todas cores positivas, emocionais). O negro foi abolido da página. As áreas com menor saturação da cor básica estão nas bordas. O site do grupo de rock Sepultura é basicamente negro. Combina perfeitamente com o grupo e com a expectativa dos usuários do site, fãs da banda. Note que, novamente, há poucas cores. O site “Mais Você” é adequado ao consumidor principal: a mulher. Cores suaves, femininas, esteticamente limpo.<http://maisvoce.globo.com/perfil_apresentadora.jsp> Figura 2.17. Website Mais Você Observe, agora, duas versões diferentes de uma mesma página:Para uma melhorcompreensão,visualize, no anexo1, ao final do livrodidático, esta figuracolorida. Figura 2.18. Website Lancome56
  • 52. Comunicação Visual para Web I Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. Figura 2.19. Website LancomeA versão figura 2.18 é suave, delicada, de uma feminilidadepouco agressiva. Já a versão da figura 2.19 modificoucompletamente a mensagem: a feminilidade é agressiva, ascores são fortes, vibrantes, até o vermelho (associado à paixão,ao sexo, ao amor), que não estava presente em nenhum dos seusmatizes na versão anterior. Observe como a figura 2.18 é partedo conjunto e não cria desvio de atenção. Já a figura 2.19 provocatanto impacto que é quase impossível observar o todo sem deixarde notar a foto, que surtirá um impacto muito maior no leitor.Observe que além das cores e da postura das imagens, também oalinhamento do texto foi modificado.Nos 5 sites apresentados, observamos que a escolha das coresconsidera, principalmente, o perfil do público alvo e a economiana quantidade de cores. Marmion (2004) sugere ser possívelestabelecer as seguintes orientações: utilize a menor quantidade possível de cores para o fundo de seu site; se for utilizar mais de uma cor, utilize cores próximas do espectro, que não criem contraste (fator de distração); a percepção da cor é afetada pela luminosidade do ambiente. Considere as fontes de iluminação — naturais e artificiais — do local; Unidade 2 57
  • 53. Universidade do Sul de Santa Catarina se o fundo é uma imagem, considere que durante o tempo de carga elementos frontais (foreground) podem não ser visíveis por falta de contraste; utilize fundos simples para não comprometer a compreensão da página, a legibilidade do texto e o tempo para ser carregada; o fundo não deve chamar mais atenção do que a informação.Para uma melhorcompreensão,visualize, no anexo1, ao final do livrodidático, esta figuracolorida.<http://www.buenosairesrock.com.ar/PAGprincipal2.HTMl> Figura 2.20. Site da Banda Buenos Aires Na figura acima, o fundo utilizado pela banda chama mais atenção do que o texto com as informações da banda. A legibilidade é prejudicada dificultando a leitura e a atenção. SEÇÃO 6 – Recomendações para o uso de cores na Web Como você já viu, as cores exercem diferentes efeitos fisiológicos sobre o organismo humano e tendem a produzir vários juízos e sentimentos. A cor é um elemento fundamental em qualquer processo de comunicação e merece uma atenção especial.58
  • 54. Comunicação Visual para Web ISão apresentadas, a seguir, algumas recomendações sobre ouso da cor, coletadas em Parizotto (1997), Winckler (2002),Robertson (1993), Nielsen (1996) e Schneidermann (2000): Recomenda-se o uso de um grupo limitado de cores, Desse modo, as páginas de um mesmo site estarão mais dando ao usuário a opção de propensas a terem um “padrão” consistente. mudá-las, máximo de “cinco mais ou menos duas”. Use a cor como uma forma de informação adicional ou Evite confiar na cor como o único meio de expressar um aumentada. valor ou uma função particular. Use cor para realçar ao invés de usar sublinhado (e use Restrinja o uso do sublinhado para links, para não sublinhado ao invés de itens confundir o usuário. piscando). Sempre que possível, evite usar cores muito quentes, As cores muito quentes parecem pulsar na tela e ficam tais como o rosa e o difíceis de focalizar. magenta. Se for usado um fundo colorido, selecione as cores do texto de modo a obter o Isso aumenta a visibilidade e a legibilidade do texto. contraste mais forte entre o texto e o fundo. O uso mnemônico da cor é empregado respeitando os estereótipos para criar fortes associações para ajudar no Recomenda-se o uso reconhecimento, na lembrança e no tempo de busca. No mnemônico da cor. site Submarino, percebemos a divisão das seções fazendo uso da cor para diferenciá-las, a seção de brinquedos é rosa, a de eletrônicos é azul, a seção abaixo é a de games. Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. <http//:www. submarino.com.br> Figura.2.21 Site Submarino SEGUE Unidade 2 59
  • 55. Universidade do Sul de Santa Catarina Esses elementos atraem a atenção do usuário e o seu emprego Use cores brilhantes e deve ser reservado para áreas importantes, caso contrário o contrastantes com cautela. usuário pode achar mais difícil saber para onde olhar e ficar confuso. Use cores monocromáticas para o texto, sempre que for As cores monocromáticas são mais nítidas, aumentando a possível. legibilidade e visibilidade do texto. Recomenda-se o uso de uma cor As cores neutras (por exemplo, cinza-claro) aumentam a neutra para fundos. visibilidade das outras cores. Não use simultaneamente alto Para relações figura-figura e muitas figura-fundo, fortes croma e cores que estejam contrastes de vermelho/verde, azul/amarelo, verde/azul e muito distantes no espectro vermelho/azul criam vibrações, ilusões de sombras e imagens solar. posteriores. Vermelho: pare, perigo, quente, fogo; Amarelo: cuidado, devagar, teste; Verde: ande, OK, livre, vegetação, segurança; Use um código de cores Azul: frio, água, calmo, céu; consistente e familiar, com referências apropriadas. Cores quentes (amarelo, laranja, vermelho, violeta): ação, resposta requerida, proximidade; Cores frias (azul, turquesa, verde-mar,verde-alface): status, informação de fundo, distância; Cinzas, branco e azul: neutralidade. No que concerne ao aprendizado e compreensão, a cor Use a cor para aumentar a é superior ao preto e ao branco em termos do tempo de informação mostrada em preto processamento e de reações emocionais, mas não há diferença e branco. na habilidade em interpretar a informação. A cor é mais apreciável e a memória para informação colorida também parece ser superior àquela em preto e branco. Recomenda-se projetar A cor aumenta o processamento cognitivo e visual de uma primeiramente em preto e informação que funciona bem em preto e branco, pois ajuda a branco, e então, adicionar a cor. 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 Evite o uso de blink 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. SEGUE60
  • 56. Comunicação Visual para Web I Fundo preto não é recomendado pois há poucas cores que contrastam e causa cansaço visual. No caso de impressão em P & B, a cor usada para oEvite fundos escuros texto ou imagem pode ser convertida para escuro e se confundir com o fundo (além de gastar grande quantidade de toner/tinta). Pode-se acrescentar cores para casos alternativos como (mantendo-se os padrões): Link ainda não visitado, que fica na mesma páginaNão usar cores (âncora) – verde;alternativas para links Link já visitado na mesma página – rosa; Link para o nodo hierarquicamente superior - laranja/amarelo âmbar.Não tornar a tela muito Use as cores brilhantes em áreas pequenas e coresbrilhante ou escura suaves em áreas maiores.Procure evitar cores que juntas verde/vermelho; verde/azul;causam ilusões óticas, como: azul/amarelo; vermelho/azul; preto/branco; preto/verde; branco/preto; ciano/magenta; amarelo/preto; branco/marrom;Use combinações legíveis paratexto/fundo: verde/preto; amarelo/marrom; branco/vermelho; verde/marrom; preto/amarelo; ciano/marrom; magenta/marrom. use azul para áreas grandes ou formas pequenas ,Use as cores da fóvea e azul é bom para fundo de tela;periféricas apropriadamente,a fóvea fica na região central use vermelho e verde no centro do campo visual eda retina, é composta de cones não na periferia;sensíveis ao detalhe: use preto, branco, amarelo e azul na periferia do campo visual.Lembrar que cor mal utilizada é pior do que não usar cores. Unidade 2 61
  • 57. Universidade do Sul de Santa Catarina SEÇÃO 7 – Cores seguras da Web Atualmente, temos computadores capazes de mostrar milhões de cores simultaneamente. Isto nem sempre foi assim. Até a década de 90, a maioria dos equipamentos apresentava apenas 256 cores diferentes de cada vez. Neste caso,todas as cores eram simuladas por estas 256, causando manchas e distorções. Dessas 256, 216 são chamadas de cores seguras da Web. A utilização das cores seguras é feita pela utilização de cores cujos códigos hexadecimais usam combinações dos números,Números hexadecimais possuem indicados na tabela seguinte:base 16. A denominação hexavem de hexa=6 e deci=10 queindica a base 16. Cada número RGB 00 51 102 153 204 255hexa pode ter um valor de 0 a 9 ouA, B, C, D, E, ou F. O numero hexa Hex 00 33 66 99 CC FFé representado por quatro bitsde dados binários. Ex: o númerodecimal 1 é representado por 1 emhexadecimal e 0001 em binário, já Consulte, no anexo 1, a figura 2.22 referente à tabelao número 10, é representado por A que contém as 216 combinações seguras, com os seusno código hexadecimal e 1010 em códigos hexadecimais.binário, 15 é representado pelo F e1111 pelo binário.62
  • 58. Comunicação Visual para Web ISínteseAo concluir esta unidade, você traz como bagagem conceitosrelacionados à teoria das cores e aspectos de sua utilização.Você aprendeu que a visão humana da cor depende de aspectosfisiológicos e sua utilização eficiente deve considerar estaslimitações.Durante o estudo verificou-se que as cores são reconhecidas emposições diferentes da retina, antes (azul) depois (vermelho) esobre a retina (verde), este reconhecimento faz com que o usuárioao se deparar com interfaces onde ocorre a mistura destas trêscores sinta fadiga visual.Ao escolher a cor da página é importante determinar o assuntoda página, o público-alvo e o ambiente no qual o site seráutilizado. A determinação destes fatores apóia a escolha das coresque interferem diretamente na aceitação do seu site pelo cliente.O uso de contrastes, luminosidades e uma combinação asseguramelhorias na comunicação com o internauta, transformando a corem estímulo visual.A cor pode ser usada para agrupar itens, transmitir informaçõese alertar o usuário sobre uma determinada situação, para queestas ações ocorram efetivamente foram apresentadas na unidadealgumas recomendações que procuram preservar o bom uso dacor na Web relacionadas ao numero de cores a serem utilizadas,características de fundos considerados desejáveis, utilização decódigos de cores familiares entre outros.Outro aspecto observado na unidade foi o uso da paleta decores seguras para Web (216 combinações). Este uso garante aoprojetista que o usuário enxergue na tela de seu computador ascores que voce está utilizando no projeto.Na próxima unidade você vai estudar as etapas relacionadasao processo de design e sua importância na promoção de umproduto de qualidade. Unidade 2 63
  • 59. Universidade do Sul de Santa Catarina Atividades de auto-avaliação 1) A acuidade visual é dependente de vários fatores quais são eles? 2) Relacione as propriedades abaixo com suas respectivas células: (B) para bastonetes e (C) para cones: a) ( ) permitem ao ser humano a visão diurna de forma nítida e colorida; b) ( ) não fornecem nenhuma impressão cromática; c) ( ) são as células responsáveis pela visão com baixa luminosidade; d) ( ) são células que se distinguem por 3 tipos: o vermelho, o verde e o azul; e) ( ) estas células aparecem em grande numero na área periférica do olho; f) ( ) estas células aparecem em grande numero na área central; g) ( ) preenchem completamente a região da fóvea, a área responsável pela leitura. 3) Como são formadas as cores Secundárias?64
  • 60. Comunicação Visual para Web I4) Qual a situação em que pode ser interessante o uso da cor complementar ou da cor análoga?5) Quais os três fatores que devem ser considerados como fundamentais na escolha das cores de um site? Unidade 2 65
  • 61. Universidade do Sul de Santa Catarina Saiba mais Site sobre cores, nomes, números em Hexadecimal e RGB http://www.artifice.web.pt/tutoriais/cntd/tut_html10.html#a10_2 Color, Contrast & Dimension http://poynterextra.org/cp/colorproject/color.html VILELA, Ana Luisa M. Site sobre sistema sensorial. http://www.afh.bio.br/sentidos/sentidos1.asp VILELA, Ana Luisa M. http://www.afh.bio.br/sentidos/sentidos1.asp66
  • 62. 3UNIDADE 3Etapas do processo de Design Objetivos de aprendizagem Entender o complexo processo de planejamento do processo de design de um site. Entender a importância da documentação do processo de desenvolvimento do design e implementação de um site. Esclarecer a importância do levantamento de informações nas etapas de planejamento e definição. Conhecer os artefatos que podem ser usados como marcos para o controle do desenvolvimento do projeto. Seções de estudo Seção 1 Iniciando o Processo de Design Seção 2 Definição e Planejamento Seção 3 Detalhamento da arquitetura e Design
  • 63. Universidade do Sul de Santa Catarina Para início de conversa As etapas de um processo de design são muitas vezes tortuosas. Identificar quais profissionais são necessários ao projeto, os custos, o que deve ser analisado para iniciar o processo de design, são perguntas que ficam sem respostas em muitas equipes, e que, por vezes, são esquecidas e ao final do projeto relembradas com pesar. Quando você inicia o projeto é importante saber quais os passos que serão seguidos, o quanto e o que falta para acabar. Por outro lado, quando iniciamos precisamos ter certeza de que não esquecemos de avaliar nenhum item que possa fazer diferença em termos de projeto, tempo e custo. Nesta unidade, você vai ter algumas dicas de como documentar seu projeto levantando quesitos que devem lhe apoiar no controle da qualidade, dos custos e proporcionando, já na etapa inicial, uma análise dos riscos envolvidos no desenvolvimento. SEÇÃO 1 – Iniciando o processo de Design O uso da Internet e de todos os seus recursos é considerado a nova plataforma crítica do comércio, da comunicação e da informação. O desenvolvimento de um site traz diferentes conseqüências para a organização, que vão de aspectos financeiros a relações públicas. Este esforço de desenvolvimento pode produzir soluções 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 usuário. O processo de design é uma tarefa complexa e dependente de vários fatores. Uma estratégia que funciona bem para um site pode estar totalmente errada para outro.68
  • 64. Comunicação Visual para Web IMuitas empresas têm investido no uso de equipes comconhecimentos multidisciplinares como tecnologia, marketinge design. Estas equipes procuram criar estratégias corporativaseficazes e inovadoras para aplicação na Web, visando a atingir, deforma satisfatória, o público alvo. Usuários e clientes Designers gráficos Desenvolvedores Engenheiro de usabilidade Testes de usabilidade Produção do site Beta testes e lançamentoFigura 3.1 Modelo de interações entre membros de equipes interdisciplinares dedesenvolvimento Web . Fonte: Adaptado de BISHU (2000).Na figura acima, Bishu (2002) sugere grupos de especialidadecomo: clientes, designers, desenvolvedores e engenheiros deusabilidade trabalhando cooperativamente na produção do site. O especialista de usabilidade é colocado como um mediador de informações, garantindo a integração entre os membros da equipe e um processo de design consistente com o modelo de interação do usuário.O uso de diferentes visões e a participação de elementos querepresentem a população que fará uso do site, enriquecem oprojeto.Após experiências positivas e negativas na produção de sites,percebe-se que, além da diversidade de elementos humanos emdiferentes especialidades, existe a necessidade de se observar ummodelo de desenvolvimento de forma planejada e disciplinada.Antes de “colocar a mão na massa” você deve estar preparadopara seguir etapas que permitam a produção de artefatos (sub-produtos de etapas) que possam servir como sinalizadores da Unidade 3 69
  • 65. Universidade do Sul de Santa Catarina evolução do desenvolvimento do site. Estes artefatos, ao serem inseridos em um cronograma, proporcionam uma visão global do projeto, sua evolução e desvios. Lynch e Horton (2002) descrevem algumas etapas norteadoras de um modelo para o processo de desenvolvimento de um website: a fase de definição e planejamento; a definição da arquitetura da informação; o design do site; a construção do site; a avaliação e manutenção do site. A cada uma destas etapas novas características, artefatos e definições são adicionados ao projeto. Que tal explorar cada uma destas etapas nas próximas seções? SEÇÃO 2 – Definição e Planejamento Quando você inicia um projeto Web, algumas perguntas e respostas são fundamentais. A partir destas definições iniciais, idéias surgem e decisões são tomadas por todo o curso do projeto. Um exemplo disto é a definição clara da missão do site e seus objetivos, a partir deles você está, automaticamente, direcionando todo o futuro do site. Descrever estes aspectos sucintamente em um documento que contenha as idéias iniciais do planejamento, evita que sua memória pregue peças como o esquecimento de prioridades ou mesmo aquela situação constrangedora, em que você não lembra o motivo pelo qual o formulário inicia com um determinado campo. DOCUMENTAR É PRECISO!!! Organize as informações do projeto de forma clara, concisa e acessível a todos os colaboradores da linha de produção do site.70
  • 66. Comunicação Visual para Web IO plano documentado evolui por meio de especializações paraum documento de especificação. A especificação permite rastreardecisões de design permitindo o controle do projeto e medição doprogresso do desenvolvimento.Para você iniciar o seu trabalho de planejamento e definições énecessário que passemos por 3 pontos fundamentais: identificar os objetivos do site; identificar o público alvo do site; identificação de necessidades técnicas relacionadas à produção do site.A identificação dos objetivosAntes de iniciarmos o projeto de design de um site é fundamentalidentificarmos os seus objetivos (educação, entretenimento,vendas, religioso...). Ao definirmos claramente os objetivos dosite e sua missão, estamos determinando fortes indicativos do seupúblico alvo, conteúdo, função e identidade do site. Figura 3.2 Site UnimedA identificação do objetivo, que servirá como baseline do projeto,não deve constar apenas na documentação inicial do projeto,mas também na página de seu cliente. Observe que, na páginaprincipal do site da UNIMED, não fica claro o objetivoprincipal da empresa. Plano? Que tipo de plano? De previdência?Seguro? Saúde? Casa própria? Unidade 3 71
  • 67. Universidade do Sul de Santa Catarina Figura 3.2 Site Brognoli No site da Brognoli, já na primeira página fica claro o objetivo da empresa, pois remete ao seu papel como empresa do segmento imobiliário. O objetivo é o resultado pretendido. O fim é projetar uma mensagem para um público específico, na esperança de obter dele a resposta desejada. Conforme Lynch e Horton (2002), podemos iniciar a definição de metas do site com perguntas simples, como: Qual a missão da organização? Quais estratégias você pretende utilizar no site para Como a criação de um site atingir suas metas? pode apoiar a missão de sua organização? O que você espera que os internautas pensem após Qual a atitude que você visitarem sua página? espera dos internautas que visitarem sua página? Como você pretende realizar as manutenções e Como você pretende medir o atualizações do site após sua sucesso do site? finalização? Identificação dos futuros usuários De acordo com Nielsen (2000), a Web exige “tempo zero de aprendizagem”. O mais importante é que cada serviço seja baseado na análise da tarefa dos usuários específicos, assim72
  • 68. Comunicação Visual para Web Icomo em suas necessidades. Os melhores sites são aqueles quedão suporte ao modo como os seus usuários desejam abordar osproblemas. Não basta ter um visual atraente, o conteúdo pode até ser bom, mas se o visitante tiver dificuldades para encontrar o que procura, vai abandoná-lo, com certeza.Identificar a população alvo do site é palavra de ordem paragarantir o sucesso do projeto. Algumas perguntas iniciais podemservir de roteiro para iniciar este trabalho: Quem usa o site? Quem fornece informações ao site? Quem solicita informações do site? O que pode atrair o usuário ao site? O usuário vai apenas ler a informação ou pode optar por imprimi-la?— Na Unidade 4, você vai aprofundar este conhecimento,utilizando conceitos e metodologias da engenharia de usabilidadena identificação das características do usuário.Identificação de necessidades relacionadas à produção do siteNa etapa inicial, além de estabelecer metas e objetivos dosite, também são definidos aspectos relacionados à tecnologianecessária para sua implantação e custos desta produção. Você não sabe por onde começar? Que tal fazer uso de algumas perguntas básicas?Veja a seguir algumas sugestões ou apontamentos de Lynche Horton (2002) que devem ser adaptados à sua realidadede produção. Neste caso você pode desenvolver novosquestionamentos ou alterar os sugeridos. Unidade 3 73
  • 69. Universidade do Sul de Santa Catarina A. Sobre a produção Quem vai fazer parte Aproximadamente quantas da produção do site? páginas deve conter o site? Terceirizados? Funcionários Qual é o número de páginas de sua empresa? Quais são aceitáveis abaixo deste número? suas responsabilidades e Ou acima dele? disponibilidades? Quais são os prazos estipulados Existirá no projeto a contratação para a entrega do site, de terceirizados? Quem será o existem sub etapas a serem elo de ligação nestes casos? consideradas? Quem vai gerenciar o processo de construção do site? B. Sobre a tecnologia Quais browsers e sistemas HTML dinâmico operacionais devem ser (HyperText Markup Language) e suportados pelo site (Windows, características avançadas? Macintosh, UNIX, Linux/ Netscape Navigator, Internet JavaScript ou vbscript? Explorer)? Qual a versão Java applets? mínima? Algum plugin especial é necessário? Quais características específicas Qual a largura de banda do ambiente operacional funcionará utilizada pela maioria dos como servidor? visitantes do site? Há necessidade de segurança e O público alvo é externo ou confiabilidade especiais? interno? Deve existir suporte ao Ethernet ou conexões de alta banco de dados? velocidade? ISDN, ou DSL conexões com velocidades O usuário irá se logar em áreas médias? Conexões via modem? restritas? Consultas e atualizações são Como será oferecido o necessárias em um banco de suporte para os usuários? dados? Mensagens de E-mail? Manuais on-line? Conteúdo Audiovisual Salas de Chat, Fóruns, suporte por Existem no site produções de telefone? vídeo ou áudio?74
  • 70. Comunicação Visual para Web I C. Suporte servidor web O servidor é próprio ou será A capacidade está adequada terceirizado por um provedor de com as demandas do tráfego do internet? local? O número de domínio está O suporte de manutenção é disponível (originais e únicos)? permanente (24 horas)? Verifique limitações de tráfego O servidor fornece análises do site, do local de disco ou estatísticas sobre os usuários e custos extra. do tráfego do site? D. Incluir no orçamento Salários da equipe de Consultorias técnicas. desenvolvimento e da equipe editorial e de suporte. Desenvolvimento do banco de dados. Hardware e software necessários para o desenvolvimento do site. Marketing do site. Treinamentos necessários à Editor ou Webmaster. equipe de desenvolvimento (banco de dados, linguagens, Suporte e manutenção do design). banco de dados. Pagamentos de outsourcing*. Suporte técnico. Design do site e Desenvolvimento de conteúdos desenvolvimento. novos e atualizações.Nesta fase inicial ainda é fundamental: * No sistema de outsourcing uma empresaA) Pesquisar. Conheça o domínio do site, instrua-se sobre contrata outra empresa para executar tarefaso assunto. Observe sites semelhantes, assuntos semelhantes. específicas em seuQuanto mais informações conseguir reunir sobre o assunto lugar, na forma de sub-melhor, pode-se ponderar sobre soluções de uma forma mais contratação.completa e abrangente. Unidade 3 75
  • 71. Universidade do Sul de Santa Catarina B) Definir o editor do site. É importante definirmos o responsável pelo site, o editor responsável deve observar aspectos relacionados à consistência dos sites em termos de conteúdo e design gráfico. Além de manter uma visão sobre todo o site, também deve observar aspectos relacionados a direitos autorais pelo uso de materiais como: vídeos, imagens e sons no site. O editor deve ser o responsável pela qualidade editorial do site. SEÇÃO 3 – Detalhamento da arquitetura e Design Neste ponto você vai detalhar o conteúdo e a organização do site. Sob a ótica do produto de informação definem-se as mensagens- chave, tipos de informação, funcionalidades, as relações lógicas, as ligações entre os tipos de informação, testa-se a arquitetura e a sua navegabilidade. Procure utilizar protótipos nesta etapa para testar a navegação do site e a interface. Mas o que são protótipos? Protótipos são modelos funcionais construídos a partir de<Leia mais sobre prototipação especificações preliminares para simular a aparência e aem http://www.black-beans.com. funcionalidade, ainda que de forma primitiva e incompleta,br/prototype.htm> de um software a ser desenvolvido. Através de sua utilização, os futuros usuários do software, bem como aqueles que irão desenvolvê-lo, poderão interagir, avaliar, alterar e aprovar as características mais marcantes da interface gráfica com o usuário (GUI - Graphical User Interface) e da funcionalidade da aplicação proposta. (NECCO, TSAI, 1998) O protótipo pode ser simples, feito em papel com ou sem funcionalidades. A idéia é validar suas idéias junto ao cliente e sua equipe de projeto.76
  • 72. Comunicação Visual para Web INesta fase de processo temos alguns artefatos que são produzidose que podem servir como marcas de progresso de seu projeto: A especificação detalhada do Servidor Web e recursos do design do site. servidor. A descrição detalhada do Algoritmos necessários ou conteúdo do site. tecnologia para suportar aplicações específicas do site. A definição de mapas do site e tabelas. Rascunhos de interfaces e do design do site. A especificação técnica detalhada. Especificação de cenários de testes. Especificação dos browsers suportados pelo site. Desenvolvimento de um ou mais protótipos. Velocidades de conexão suportadas.Design do siteÉ nesta fase que o projeto ganha identidade e são trabalhadasquestões como o grid da página, o design do site e todos oselementos gráficos são criados e aprovados.Na etapa de design, são criadas as ilustrações, metáforasvisuais, fotografias, os textos e as animações do site. Pesquisas, Templates são o modoorganização e edição de textos de conteúdo são preparadas. mais fácil e rápido de construir uma páginaSegundo Lynch e Horton (2002), são sub-produtos típicos com uma estruturadesta fase: pré-definida. A partir do template preenchemos textos editados e corrigidos; o conteúdo, sem a necessidade de refazermos especificação do design gráfico de todas as páginas: toda a página. templates das páginas finalizados; cabeçalhos, logotipos, botões, fundos definidos; detalhamento de manuais para operações complexas; ilustrações; fotografias. Unidade 3 77
  • 73. Universidade do Sul de Santa Catarina Ainda nesta etapa temos a concepção de componentes funcionais e lógicos como: definição de scripts complexos; protótipo finalizado para avaliação. É importante frisar a participação do usuário validando suas idéias nesta etapa. Nesta fase ainda é fundamental: A) Brainstorming O brainstorming é um processo de geração de idéias caracterizado pelo registro escrito verbal delas, revelando um caminho para a solução. Quando discutimos com a equipe o processo de especificação (design e arquitetura), podemos começar por fazer listas de palavras sobre tudo aquilo que se relaciona com o tema em causa. É importante estarmos receptivos para novas idéias, 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 visualização das idéias, executando pequenos esboços com as idéias preliminares. B) Confronte as idéias com os objetivos do projeto O exercício da crítica é a melhor forma de articular as idéias para que todo o grupo entenda e para que obtenhamos reações do grupo. O exercício da crítica permite analisar as soluções individuais e sugerir modos de aumentar o impacto conceptual e visual de cada idéia. Podemos identificar o que funciona e o que deve ser evitado no nosso trabalho.78
  • 74. Comunicação Visual para Web IC) Perca tempo aquiAs adições de inserções ao projeto que não entraram noplanejamento comprometem a sua saúde. Pequenas adições nãocomprometem prazos, custos ou o andamento do projeto. Mas…inserções contínuas que acabam acumulando-se no cronogramapodem destruir um projeto. Assim é importante dizer que vocênão deve iniciar o desenvolvimento sem entender completamenteo que vai ser trabalhado e antes de desenvolver uma especificaçãorealista do site. Discuta a especificação exaustivamente com aequipe, discuta prazos, entregas e custos. Encontrar erros noplanejamento, na etapa de especificação, pode custar 100 vezesmenos do que durante o desenvolvimento.SEÇÃO 4 – Construção e manutençãoA construção de um site só deve iniciar quando se tem uma visãodetalhada da arquitetura e do design dele. Mesmo quando se trabalha de forma consistente, você deve estar consciente de que refinamentos no projeto ainda serão necessários. Isto inclui melhorias no design, na navegação em metáforas usadas no site, entre outros.Quando o site está finalizado, com todas as páginas e componentes,é possível iniciar o beta teste.Os testes devem ser feitos por equipes formadas em sua empresa.Procure gerar erros no site, provoque situações inusitadas, avalieerros tipográficos e procure criticar criteriosamente o designda página. Os usuários são fundamentais nesta etapa final, elespodem lhe oferecer informações preciosas sobre a validade doprojeto por meio de testes de aceitação. Somente depois de exaustivamente testado publique a URL do site! Unidade 3 79
  • 75. Universidade do Sul de Santa Catarina Lynch e Horton (2002) sugerem que nesta etapa os seguintes artefatos são disponibilizados: Estrutura de links de navegação HTML finalizado para todas as finalizada. páginas com conteúdo. Resultados de testes detalhados Resultados de testes de da base de dados e das performance. funcionalidades. Todos os componentes da base Resultados de testes em de dados linkados. diferentes plataformas de hardware e software. Manutenção Muitas empresas contratam o desenvolvimento do site e posteriormente assumem a manutenção desta estrutura. Independente deste fator, procure utilizar ferramentas que produzam um código HTML, que é fácil de ser entendido e, conseqüentemente, de ser mantido. Quanto mais complexa a geração de código mais difícil torna-se a manutenção e maior a propensão a erros durante a manutenção. O site jamais deve ser considerado como finalizado. Ele precisa de atenção e reparos constantes, principalmente no que diz respeito a conteúdo. Se você é desenvolvedor deixe este fato claro ao seu cliente. O que precisa ser constantemente verificado? A validade de links, principalmente se forem apontamentos externos, renovação de conteúdo, reformulações relacionadas à performance, entre outros. Publicada a URL, torna-se uma ferramenta útil para o uso e controle de visitas pelo servidor. Este controle oferece estimativas exatas sobre o sucesso de seu site, páginas preferidas, duração das visitas, versão e tipo de browser mais utilizado. Se possível monitore as palavras-chave usadas no mecanismo de busca. Este monitoramento pode levá-lo a modificar a nomenclatura do site. Outro aspecto interessante é a localização geográfica dos internautas que estão acessando seu site. Mantenha-se atento nesta etapa para dar as informações de feedback aos usuários.80
  • 76. Comunicação Visual para Web I Se você vai hospedar o site em um provedor, verifique quais os serviços de análise disponibilizados!Outra preocupação são os backups regulares em uma mídiasegura. Proteger as informações do seu site é uma das principaistarefas depois que você publica a URL.É também uma das tarefas mais difíceis, quando executadosde forma correta os backups permitem a restauração 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 mídia 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 condições ambientais propícias para o armazenamento; prepare-se para o pior. Pense no pior cenário. O sistema foi destruído. Analise o tempo necessário para recolocá-lo no ar. Se você quer saber mais sobre dispositivos de backup, com comparativos de preços, durabilidade e plataformas, acesse o site <www.backupcentral.com/ hardware-drives.html>. Unidade 3 81
  • 77. Universidade do Sul de Santa Catarina Síntese Durante esta unidade, você pôde perceber a importância de propor um projeto de desenvolvimento de um site de forma organizada e documentada. O uso de questionamentos relacionados a objetivos, público alvo, produção e custos, nos direcionam para um desenvolvimento planejado e seguro. Estabelecer artefatos que possam ser usados como milestones, para medir o progresso do projeto, permitem 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 não significa que o mesmo esteja concluído, o processo de um site é incremental, sendo sua manutenção contínua e fundamental para que o produto esteja sempre dentro das expectativas dos internautas que o visitam. Nesta unidade, você também explorou a necessidade de observar os serviços de hospedagem do site, onde o armazenamento e a disponibilizaçao de estatísticas de acesso são imprescindíveis para o bom uso e também servem como recurso para tomadas de decisões futuras. Saiba mais DETWEILER, M.C.; OMANSON, R.C. Ameritech Web Page User Interface Standards and Design Guidelines. 1996. <http://www.ameritech.com> NIELSEN, Jakob. End of web design. <http://www.useit.com/alertbox/20000723.html>82
  • 78. Comunicação Visual para Web IAtividades de auto-avaliação1. No planejamento e definição, quais são os pontos fundamentais? a) ( ) O design, a construção e a manutenção do site. b) ( ) Ter informações do projeto de forma clara, concisa e acessível. c) ( ) Identificar os objetivos, o público e as ecessidades de produção do site.2. Na utilização do site, pela população alvo, basta que o mesmo tenha: a) ( ) Um visual atraente e um bom conteúdo; b) ( ) Uma abordagem sobre os problemas dos usuários; c) ( ) Suporte para as tomadas de decisão dos usuários.3. Na etapa de identificação de necessidades de produção de um site tem-se que: a) ( ) Estabelecer as metas e os objetivos do site; b) ( ) Relacionar o sistema operacional necessário para a implantação do site; c) ( ) Definir os custos de produção pela quantidade de páginas do site; d) ( ) Questionar sobre os tópicos de produção, tecnologia e custos do site.4. Protótipos são modelos funcionais construídos: a) ( ) Para testar o conteúdo e a organização do site; b) ( ) Para simular a aparência e a funcionalidade completa do site; c) ( ) Para validar suas idéias junto ao cliente e sua equipe de projeto. Unidade 3 83
  • 79. Universidade do Sul de Santa Catarina 5) Após o processo de especificação e a construção do site é necessário que: a) ( ) Se hospede o site em um provedor, sendo que o cliente fará a manutenção do mesmo; b) ( ) Se forneça manutenção e analise do site; c) ( ) Se faça apenas um backup regular no site.84
  • 80. 4UNIDADE 4Por que usabilidade? Objetivos de aprendizagem Compreender a relevância e os conceitos relacionados à usabilidade na Web. Realizar a análise do usuário-alvo e do contexto de utilização da interface com base em conceitos de usabilidade. Determinar os principais aspectos da usabilidade de um site. Seções de estudo Seção 1 Conceitos norteadores da Usabilidade Seção 2 Mas o que significa exatamente Usabilidade? Seção 3 O design centrado no usuário segundo a norma ISO 9241
  • 81. Universidade do Sul de Santa Catarina Para início de conversa Segundo estatísticas de Pesquisa do Ibope e Ratings.com divulgada recentemente, os internautas brasileiros já totalizam 10,4 milhões. O número de usuários ativos que acessa a Web pelo menos uma vez ao mês, atingiu a marca de 5,3 milhões. A média mensal de horas do brasileiro na Web é de 7:36h. No Brasil temos 753.606 domínios registrados e, a cada 24 horas, são solicitados 952 novos processos. Esta grande oferta de sites, a diversidade e a criatividade tornam o usuário Web um cliente impaciente e independente. Ao se deparar com um site onde não consegue localizar rapidamente a informação desejada, ou ainda, ao observar o conteúdo confuso, o usuário abandona o site imediatamente. Esta 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 esta vitrine de difícil 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 fácil, melhoram a interação do seu cliente final e o site que você constrói, pequenas dicas que devem fazer “a” diferença para que seu produto atinja o sucesso desejado. SEÇÃO 1 – Conceitos norteadores da Usabilidade Você já ouviu falar na palavra usabilidade? Talvez você não tenha ouvido mas, com certeza já ouviu falar de páginas que irritam ou frustram seu usuário pela dificuldade encontrada em atingir um determinado objetivo como comprar um produto. Talvez você mesmo já tenha passado por este sentimento de impotência ao instalar um software em sua máquina e não conseguir entender o que deve ser feito para emitir um determinado relatório, ou mesmo como a ferramenta86
  • 82. Comunicação Visual para Web Ifunciona. E que tal aquela situação constrangedora na fila docaixa eletrônico, em que você não consegue completar umatarefa? Ou ainda, quando após preencher um longo cadastrona internet, você confirma os dados e lhe é apresentada umamensagem solicitando a digitação de um campo obrigatório.Mas... surpresa! Todo o cadastro foi perdido... e você devereiniciar a digitação. Como você se sente? Bom, estes exemplossão na verdade, exemplos da falta de usabilidade de um produto. O termo usabilidade começou a ser usado ainda na década de 80, por ciências como a Ergonomia e a Psicologia. Inicialmente, tentou-se utilizar o termo “amigável” procurando uma versão traduzida da expressão “user-friendly”. A expressão amigável era, no entanto, subjetiva levando a conflitos em casos onde uma interface perfeitamente amigável para um usuário experiente, tornava-se um tormento incalculável para um usuário inexperiente.A usabilidade depende da existência de três componentespara que possa existir: o usuário, a interface e a interaçãohumano-computador. O usuário Interação Humano-Computador InterfaceVeja agora cada um desses componentes com mais detalhes.A Interação Humano-Computador (IHC)Um fator importante e árduo nesta área da ciência é oconhecimento e o entendimento sobre o meio, a forma e a ordemcom que o homem interage com o sistema computacional a fimde atingir seu objetivo executando sua tarefa.Toda interação envolve diálogos orientados pela tarefa, entre ohomem e o sistema computacional. O sucesso deste diálogo é Unidade 4 87
  • 83. Universidade do Sul de Santa Catarina dependente das informações fornecidas pelo homem ao sistema e do feedback promovido pelo sistema. IHC é, portanto, o estudo da relação 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 comunicação e principalmente, observando- se os limites de cada um: homem e computador. A Interface Humano-Computador A interface humano-computador é definida como o componente interativo do software capaz de transformar entradas de usuários, ativando funcionalidades do sistema, promovendo feedback e coordenação destas interações. A interface pode ser vista ainda, como a parte do sistema encarregada de mapear as ações do usuário, na aplicação do processamento de requisições e apresentação de seus resultados pelo sistema. A interface é o meio que permite a comunicação entre o usuário e o computador. O usuário No design de um projeto o usuário é peça fundamental. Para o sucesso do projeto é necessária a identificação do usuário que fará uso do sistema proposto. Ao trazermos o usuário para o centro do projeto, podemos focar claramente suas necessidades, características e particularidades. Mas como identificar o usuário de um Website? Nosso usuário em um mundo globalizado pode ser qualquer pessoa conectada à rede mundial de computadores! Neste caso, precisamos de uma amostra de nossa população-alvo. Detectado o segmento que se pretende atingir por meio de uma amostra, já é possível atingir-se uma boa taxa de aceitação.88
  • 84. Comunicação Visual para Web I Para um site que pretende a venda de produtos para o mercado odontológico, mesmo tentando atingir o mercado de forma globalizada é possível melhorar a interface utilizando uma amostra de usuários com as seguintes características: introduzir na amostra, identificar profissionais, profissionais com e sem odontólogos, que estejam experiência no uso da Internet; dispostos a colaborar no projeto; procurar diversificar a localização geográfica da diversificar as faixas etárias amostra, tanto quanto possível da população procurando ser a cidade, estado ou mesmo o abrangente neste quesito. país de origem;Podemos pensar neste usuário tentando identificar o que elepensa quando vê o site (NIELSEN, 2000): O sistema tem a informação ou Qual foi o resultado? Era o que serviço que eu preciso? eu queria? Onde posso encontrar a Quais informações devo informação ou o serviço? fornecer? Como posso solicitar este O que significa esta figura? serviço? Para que serve este elemento? Para onde “leva” este link?A norma ISO 9241, parte 11, editada em 1988, sugere que sejamavaliados os seguintes aspectos referentes ao usuário: Tipos de usuário: primários, secundários e indiretos. Habilidades e conhecimentos: habilidade/conhecimento produto, habilidade/conhecimento do sistema, experiência na tarefa, experiência organizacional, nível de treinamento, habilidade nos dispositivos de entrada, qualificações, habilidade de linguagem, conhecimento geral. Unidade 4 89
  • 85. Universidade do Sul de Santa Catarina Atributos pessoais: idade, gênero, capacidades físicas, limitações físicas, habilidade intelectual, atitude e motivação. Quando projetamos, temos que pensar que o design deve ser consistente com as características cognitivas, físicas e sociais do usuário. Ao nos aproximarmos do usuário, aspectos específicos são identificados. O projeto deve reconhecer estilos particulares de um determinado público. Imagine-se desenvolvendo um site com produtos e informações voltados para a terceira idade. Quando pensamos sob o ponto de vista cognitivo, pessoas mais velhas têm problemas de perda da acuidade visual relacionada à percepção de cores e visualização de textos. Além da acuidade visual, o idoso passa por questões relacionadas à diminuição da capacidade de memorização e talvez,ainda tenhamos que considerar que ele possa ter problemas motores para realizar apontamentos com o mouse. Neste caso, você, projetista, deve conduzir o usuário, de forma a resolver suas necessidades atingindo seus objetivos de forma confortável, tentando prevenir estes obstáculos. Na visão de Lynch e Horton (1999), os usuários da internet se subdividem em: surfistas da Web; usuários novatos e ocasionais; usuários freqüentes (experts), e usuários internacionais. Surfistas, por exemplo, precisam de home-pages análogas a capas de revistas. Usuários novatos e ocasionais, tendem a se sentir intimidados com menus de texto. Já os usuários freqüentes e experientes, ficam irritados com exageros visuais: como eles têm objetivos definidos, apreciarão menus de textos detalhados e rápidos, além de engenhos de busca bem programados e poderosos.90
  • 86. Comunicação Visual para Web I Não esqueça: um ponto fundamental é a observação de características culturais, religiosas, econômicas e éticas do nicho da população que virá a se tornar o público-alvo do site.Quando você desenvolve um site deve considerar a existência deusuários que gostam de ir direto ao seu objetivo, sem ter quepassar por sub-etapas. Nesse sentido, imagine que um usuáriodeseja comprar uma máquina fotográfica. O site a seguir, oferecea possibilidade de encontrar o produto desejado a partir doslinks de departamento ou por meio de um mecanismo de busca.O cliente não precisa necessariamente saber qual a classificaçãodo produto dentro da loja virtual e pode procurar a máquinafotográfica diretamente pelo mecanismo de busca.Ao mesmo tempo, o site não pode desconsiderar o cliente queaprecia entrar no setor desejado, verificar as marcas existentes atéencontrar o produto que deseja. Oferecendo estas duas opçõesvocê está pensando no perfil dos diferentes usuários. O siteseguiu esta regra básica de usabilidade, mas quando se possibilitaesse tipo de navegação, deve-se tomar cuidado para que oresultado da busca não apresente informações não solicitadas ouincoerentes. <http://www.pontofrio.com.br/> Figura 4.1 - Adaptação da navegação ao perfil do usuário Unidade 4 91
  • 87. Universidade do Sul de Santa Catarina Neste caso, a palavra de busca foi DVD, mas o resultado foi totalmente incoerente, os produtos apresentados não são DVD’s, mas notebooks, televisores, etc. O que o usuário iria imaginar: Mas o que é isto? Eu não quero ver estes produtos, quero ver um aparelho de DVD!! Quando o resultado de uma busca é incoerente, além de quebrar um quesito de usabilidade, você está prejudicando a credibilidade do seu site junto ao usuário. SEÇÃO 2 – Mas o que significa exatamente Usabilidade? Rocha (2000, p. 242) afirma que: Dados disponíveis apontam que em 1998, cerca de três bilhões de dólares deixaram de ser ganhos na Web norte- americana por causa de design mal feito de páginas, que dificultava a compra em vez de facilitar. A IBM constatou que o recurso mais popular em seu site era a função de busca, porque as pessoas não conseguiam descobrir como navegar, e o segundo mais popular era o botão ajuda. A solução foi um amplo processo de redesign, envolvendo centenas de pessoas e milhões de dólares. Resultado: na primeira semana depois do redesign, em fevereiro de 1999, o uso do botão de ajuda caiu 84% enquanto as vendas aumentaram 400%. Nielsen (1993) define que a usabilidade de um sistema está diretamente associada ao grau de aceitação do sistema, ou a sua capacidade de satisfazer as necessidades e exigências do usuário em potencial e outros usuários atingidos pelo sistema como clientes e gerentes. A usabilidade é definida por múltiplos componentes e está tradicionalmente associada a atributos como (NIELSEN, 1993):92
  • 88. Comunicação Visual para Web I a facilidade de aprendizagem um bom controle da gestão do sistema; de erros minimizando e refutando situações possíveis sua eficiência de uso; de ocorrências; a capacidade com que o e, principalmente a satisfação sistema promove a facilidade que o sistema promove ao de memorização das ações usuário ao ser utilizado. necessárias para que o usuário atinja seus objetivos;Os fundamentos da usabilidade baseiam-se na tarefa do usuário enas características e diferenças individuais dos usuários.Porque a facilidade de aprendizagem é importantepara a usabilidade?Imagine um usuário novato. Ele entra no site pela primeira vez.O site fácil de aprender é previsível, o usuário consegue a partirde interações anteriores determinar o resultado de uma interaçãofutura. O usuário constrói um modelo mental de como o site secomporta, determinando uma ação futura, baseado em interaçõesrealizadas no passado. Este modelo mental pode ser construídoa partir do seu site ou até da experiência do usuário com outrossites e aplicativos e, principalmente do mundo real.Vamos pensar em nosso mundo real. O uso de ícones sugestivosque lembram ações do mundo real, facilita ações que seriamdifíceis 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 usuário umalembrança: alerta, pare. Esta previsibilidade vem da lembrançatalvez de sinais de um semáforo, de placas de pare que sãovermelhas assim como o verde intuitivamente nos leva a pensarque a passagem esta livre e podemos seguir em frente. Unidade 4 93
  • 89. Universidade do Sul de Santa CatarinaPara uma melhor compreensão,visualize, no anexo 1, ao final dolivro didático, esta figura colorida. Figura 4.2 - Uso da previsibilidade no favorecimento da aprendizagemSemáforo: <www.eptc.com.br/noticias/ noticias.asp?codigo> Se você quer tornar seu site fácil de aprender procure fazer uso daÍcones de siga, pare: Browser generalização.Explorer A generalização permite ao usuário estender um conhecimento adquirido em sistemas similares e que são aplicados no seu site. Você já visitou uma biblioteca digital? Você vai perceber que a seqüência de ações de acesso para a maioria dos acervos é padronizada. Isto faz com que o usuário sinta-se familiarizado com as mais diferentes bibliotecas. Veja a seguir os passos para fazer uma pesquisa rápida em uma biblioteca digital. Ela é composta por 3 passos: Passo 1 – seleciona o tipo de pesquisa (rápida) Clique na opção “Pesquisa rápida”. Figura 4.3 - Passo 1: consulta ao Acervo Biblioteca Digital94
  • 90. Comunicação Visual para Web IPasso 2 – Informa o assunto a pesquisar: WebPreencha os campos com as informações solicitadas.Figura 4.4 - Passo 2: consulta ao Acervo Biblioteca DigitalPasso 3 – Recebe o resultado da pesquisaVerifique o resultado da pesquisa. <http://www.ufsc.br/> <http://aspro02.npd.ufsc. br/htdig/>Figura 4.5 - Passo 3: consulta ao Acervo Biblioteca DigitalPara ser de fácil aprendizado, o site deve ser compatível como contexto de uso. Deve atender as necessidades dos usuários.Isto significa: necessidades psicológicas, culturais e técnicas. Astarefas devem ser organizadas de acordo com as expectativase costumes dos usuários. Deve-se evitar termos técnicos eprivilegiar o uso de terminologias familiares.Se o usuário é um especialista na área abordada pelo projetodeve-se adotar terminologia especializada e uma maiordensidade de informações. Para usuários leigos, a quantidade deinformações deve ser maior fazendo-se uso de manuais, glossáriose telas mais detalhadas. Unidade 4 95
  • 91. Universidade do Sul de Santa Catarina É importante determinar estas diferenças, o excesso de informações para um usuário especialista torna o site enfadonho. Já a economia de informações para o usuário leigo pode levar o usuário a desistir da interação! Para determinar o grau de proficiência do usuário de um sistema, você pode solicitar que ele execute um conjunto de tarefas típicas, dentro de um tempo mínimo pré-determinado para a conclusão. O tempo e o sucesso ou não da interação, fornecerão parâmetros para identificação do seu grau de experiência na tarefa. Como identificar a eficiência de uso? Quando falamos sobre eficiência, temos um aspecto importante a ser relacionado, o tempo de resposta ou o tempo necessário para que o sistema informe ao usuário alterações em seu estado. Freqüentemente ouvimos algum usuário com o seguinte comentário: “- A página demora a carregar!! A resposta demora a ser exibida!!” Quando a resposta imediata é impossível, o usuário deve receber um feedback indicando que sua solicitação está sendo processada. Outro aspecto importante na eficiência é a portabilidade. Quantas vezes você tentou carregar uma página e ela ficou pela metade por não ser compatível com o browser?96
  • 92. Comunicação Visual para Web I Figura 4.6 - Feedback visual para processamentos demorados (Outlook Express 6.0)Indicadores de progressão evitam a situação em que você fica nadúvida se o processamento é lento ou se o sistema está travado.Um ponto que não podemos esquecer é o uso de ações mínimasna execução do objetivo do usuário.Por que a facilidade de memorização deve ser considerada naconstrução do seu site? Sabe como é possível perceber se seu site possui facilidade implícita no design (seqüências de ações e opções de design fáceis de memorizar)?Imagine uma situação, onde o usuário fez uso do seu site háaproximadamente um ano. Quando ele retorna a visitá-lo, realizatodas as ações para realizar a tarefa de forma segura e tranqüila.Nesta situação, podemos dizer que o usuário provavelmentenão precisou reaprender a forma de interagir com o site, ele naverdade não esqueceu de como o site funciona.No caso de sistemas disponibilizados na Web, tem-se cadavez mais a visita de usuários casuais e por isto, é importanteconcebermos o site permitindo a rápida memorização. Um aspecto fundamental para o usuário no aprendizado é o uso de títulos, rótulos e nomenclatura familiar que conduzem o usuário durante a tarefa. Unidade 4 97
  • 93. Universidade do Sul de Santa Catarina Um exemplo característico é o da declaração do imposto de renda. Desde o acesso ao site até o uso do sistema, agora disponível também na Web, deveria ser considerado o fato de que programadores, médicos, costureiras, ou seja, todos os profissionais de diferentes faixas culturais farão uso do sistema, mas... apenas uma vez por ano.<http://www.fazenda.gov.br> Figura 4.7 - Trabalho anual da declaração do Imposto de renda O que você acha: o software para declaração de imposto de renda preenche este quesito de usabilidade? Visite o site da Receita Federal (www. receita.gov.br), analise a página e registre aqui sua opinião sobre o assunto!98
  • 94. Comunicação Visual para Web IErros durante a visita ao siteMesmo o usuário experiente, não espera enfrentar qualquer tipode problema nem cometer erros induzidos pela má qualidade dosite. Situações como erros de programação ou informações quelevam o usuário a situações de erro, devem ser detectados antesda publicação do site.Durante o design reserve um bom tempo para a confecçãode mensagens coerentes de erro, e principalmente úteis aousuário para restaurar a tarefa. A possibilidade de corrigirerros e/ou restaurar o cenário anterior a ocorrência domesmo, é fundamental para a credibilidade do projeto.A satisfação do usuárioO usuário tem que gostar de utilizar seu site. Para muitosusuários a cor do site, imagens, animações, som entre outrosfatores, podem ser preponderantes a velocidade ou mesmo aeficiência do site. Para detectar o grau de satisfação do usuário,sugere-se a aplicação de um questionário de satisfação, ondeo usuário possa classificar sua experiência ao utilizar o site. Aavaliação deve ser conduzida por um grupo representativo deusuários.Consistência como normaO projeto gráfico consistente torna o projeto harmônico. Tarefassimilares requerem ações similares, assim como ações iguais,devem acarretar efeitos iguais. Quando uniformizamos o uso da cor, tamanho e localização de elementos, facilitamos automaticamente o aprendizado e mesmo sua visualização.Um exemplo claro, é a confusão que sentimos ao utilizarmosa barra de ferramentas do editor de textos de nosso colega detrabalho, que esta personalizada com outros elementos ou mesmocom outra seqüência de localização. Unidade 4 99
  • 95. Universidade do Sul de Santa Catarina Flexibilizar para atrair o usuário Ao permitirmos que o usuário adapte sua interface às suas preferências ou ao permitirmos que ele execute sua tarefa de diferentes maneiras, estamos contribuindo para que o mesmo sinta-se familiarizado ao projeto. Ao oferecermos diferentes formas de chegar a uma determinada informação, por um mecanismo de busca ou por hiperlink, estamos permitindo um acesso personalizado, de acordo com seus hábitos. No portal da Justiça Federal é possível para o deficiente visual, alterar o tamanho da fonte e ainda, alterar a versão para monocromática ou para alto contraste. Estes recursos possibilitam o acesso do deficiente visual que, agora, pode fazer uso do portal confortavelmente.Para uma melhor compreensão,visualize, no anexo 1, ao final dolivro didático, esta figura colorida.<www.justicafederal.gov.br> Figura 4.8 - Flexibilizar o projeto adaptando às necessidades do usuário100
  • 96. Comunicação Visual para Web ISaiba maisVocê sabia que a empresa Boeing fabricante de aviões,realiza pesquisas de ponta em usabilidade? Para sabermais visite o site <http://active.boeing.com/sitemap.cfm>Dê uma olhada no artigo “Bons projetos de interfacecom o usuário”, de Mateus Dias.Ele lista de formasimples, as heurísticas de Nielsen descritas em 1993.Leia mais sobre usabilidade em: Jakob Nielsen’s Website – um dos papas da usabilidade. Seu site é sempre atualizado com notas e dicas de usabilidade. <http://www.useit.com/> Designing Web Applications: New strategies for dealing with tough design problems. <http://www.fast-consulting.com/index.htm> Human-Computer Interfaces - Aponta para diversos outros sites interessantes sobre Interfaces de Usuário. Elaborado pelo grupo Usernomics. <http://www.usernomics.com/user-interface-design.html> O site Design Web traz 970 links sobre usabilidade distribuído em diferentes temas como metodologias, estratégias de design, tecnologias entre outros. <http://usableweb.com/> Unidade 4 101
  • 97. Universidade do Sul de Santa Catarina SEÇÃO 3 – O design centrado no usuário 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 várias partes. A parte 11 dá ênfase ao fato de que a usabilidade dos computadores é dependente do contexto de uso, e que o nível de usabilidade alcançado dependerá das circunstâncias específicas nas quais o produto é usado. O contexto de uso consiste de usuários, tarefas, equipamentos (hardware, software e materiais), e do ambiente físico e social, pois todos esses podem influenciar a usabilidade de um produto, dentro de um sistema de trabalho. Estrutura para especificação de usabilidade A especificação da usabilidade de um produto exige que sejam identificados objetivos, componentes do contexto de uso e sub-componentes, identificando-se atributos que permitam a verificação e a medição. Contexto de uso Resultado Objetivos pretendido Usuário Usabilidade: medida na qual objetivos são Tarefa alcançados com eficácia, eficiência e satisfação. Equipamento Medidas de usabilidade Ambiente Resultado Eficácia de uso Produto Eficiência Satisfação Figura 4.9 - Estrutura de Usabilidade (Norma 9241-11, 1998)102
  • 98. Comunicação Visual para Web I Para especificar ou medir usabilidade, são necessárias informações como: a descrição dos objetivos pretendidos, a descrição dos componentes do contexto de uso e valores desejados de eficiência, eficácia e satisfação para os contextos que se pretende atingir.Descrição dos objetivosO objetivo de um produto deve ser claramente colocado. Apartir dele, poderão ser decompostos sub-objetivos, assim comocritérios que irão satisfazê-lo (conforme visto na Unidade 3).Contexto de usoNo contexto de uso são descritos componentes como usuários,tarefas, equipamento e ambientes. O rico detalhamento docontexto permite que aspectos relevantes para a usabilidadesejam reproduzidos. A especificação pode ser em termos decaracterísticas relevantes ou de uma situação específica. Descrição dos usuários. São descritas todas as características que possam ser pertinentes ao usuário, reveja a sessão I. Descrição das tarefas. São descritas características que influenciam a usabilidade como freqüência e duração da tarefa. As tarefas devem ser descritas além de suas funções ou funcionalidades, todas as atividades e passos que se relacionam à tarefa e seu desempenho, devem ser relacionadas ao objetivo da tarefa. Descrição dos equipamentos. A descrição do software, hardware e materiais, ou mesmo de seu desempenho. Descrição de ambientes. A descrição do ambiente e atributos de um ambiente técnico, físico, atmosférico, cultural e social. Unidade 4 103
  • 99. Universidade do Sul de Santa Catarina A norma sugere que sejam analisados os seguintes quesitos: Usuários Tarefas Equipamentos Tipos de usuário Falha da tarefa Descrição básica Primários Nome da tarefa Identificação do produto Secundários e indiretos Freqüência de uso da tarefa Descrição do produto Duração da tarefa Principais áreas de aplicação Habilidades e conhecimentos Freqüência de eventos Funções principais Habilidade/conhecimento produto Flexibilidade da tarefa Habilidade/conhecimento sistema Demanda física e mental Especificação Experiência na tarefa Dependências da tarefa Hardware Experiência organizacional Resultado da tarefa Software Nível treinamento Risco resultante de erro Materiais Habilidade nos dispositivos de entrada Demandas críticas de segurança Serviços Qualificações Outros itens Habilidade de linguagem Conhecimento geral Atributos pessoais Idade Gênero Capacidades físicas Limitações físicas Habilidade intelectual Atitude Motivação Tabela 4.1 - Exemplo de atributos de contexto de uso (ISO 9241-11, 1998) Imagine a seguinte situação: você deseja realizar a compra de uma passagem aérea, a seqüência de tarefas que você imagina qual é? Eu imaginaria a escolha da data, a pesquisa dos vôos, a seleção do vôo e a partir daí, as ações para realizar a compra do bilhete. Observe a seqüência de tarefas no site a seguir:104
  • 100. Comunicação Visual para Web IFigura 4.9 - Seqüência de tarefas para compra de bilhete aéreoNa primeira página, em caixa alta encontramos o rótuloCOMPRE AQUI. Nesse agrupamento são informados dadossobre origem, destino e número de passageiros. <http://www.voegol.com.br>Figura 4.10 - Seqüência de tarefas para compra de bilhete aéreoFinalizado o preenchimento, vamos pesquisar os possíveis vôos.Na página seguinte, são apresentados os vôos disponíveis, masnão existe opção que permita a finalização da compra. E agorapara onde eu vou? Como faço para finalizar a compra? Unidade 4 105
  • 101. Universidade do Sul de Santa Catarina Apesar de a primeira página indicar que esta é a seqüência para realizar a compra, e o usuário se sentir seguro com suas ações, nesta página toda a seqüência é invalidada, pois a seqüência da tarefa (ações para realizar a compra) esperada pelo usuário não 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 específico. Segundo a norma ISO 9241-11, a escolha e o nível de detalhe das medidas depende 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 eficiência, eficácia e satisfação podem ser especificadas para objetivos globais ou para objetivos menores. É aconselhável o uso de medidas que premiem a acurácia e a completude no cumprimento de objetivos e sub- objetivos. Devem ser realçadas medidas no grau de eficiência alcançada em relação ao dispêndio de recursos como esforço mental, físico, tempo, custos materiais ou financeiros. Também devem ser descritas medidas que permitam medir o conforto do usuário durante a interação, observando o desconforto, gosto pelo produto e satisfação. A satisfação pode ser avaliada por medidas subjetivas ou objetivas. Objetivos de Medidas de eficácia Medidas de eficiência Medidas de satisfação Usabilidade Porcentagem de objetivos Tempo para completar Usabilidade global Escala de satisfação. alcançados. uma tarefa. Porcentagem de usuários Tarefas completadas por Freqüência de uso completando a tarefa com unidade de tempo. arbitrário. sucesso. Média da acurácia de Custo monetário de Freqüência de tarefas completadas. realização da tarefa. reclamações. Tabela 4.2 - Exemplo de Medidas de Usabilidade (ISO 9241-11, 1998) Na especificação podem ser necessárias medidas adicionais que se referem a propriedades particulares desejadas no produto.106
  • 102. Comunicação Visual para Web ISínteseNesta unidade o termo usabilidade tornou-se parte do seucotidiano como projetista de interface. Aqui você percebeua importância da facilidade da interface, da flexibilidade, daconsistência, da incorporação de mecanismos de memorização edo cuidado necessário no controle de erros e de suas mensagens.Também foi possível conhecer uma norma que é exclusivamentevoltada à usabilidade, a ISO 9241. A partir da parte 11, daNorma aprendeu-se a importância de envolver o usuário naconcepção das futuras funcionalidades e das decisões de diálogodo usuário, por meio da análise da tarefa.Então, pronto para aplicar a usabilidade na prática? Na próximaunidade você vai aprofundar estes conhecimentos ampliando oentendimento e aplicação da usabilidade.Atividades de auto-avaliação1. Como surgiu o termo usabilidade? Unidade 4 107
  • 103. Universidade do Sul de Santa Catarina 2. Relacione os conceitos abaixo: (A) Usuário (B) Interface Humano-Computador (C) Interface a) ( ) Estuda o diálogo existente entre usuário e computador. b) ( ) Entendido como sendo a parte de um sistema computacional com a qual uma pessoa entra em contato físico, perceptivo e conceitual. c) ( ) Fundamental para a caracterização das necessidades e descrição da execução da tarefa 3. Você lembra do projeto do Hotel Boa Noite? Bom, a partir da especificação, faça a analise dos possíveis usuários do site. A análise deve ser criteriosa, observando o conteúdo apresentado nesta sessão considerando atributos pessoais e habilidades. a) No site do Hotel Boa Noite, qual o recurso que você pode propor para promover a flexibilidade? b) Sabendo que grande parte dos visitantes do site serão casuais e que visitarão o site muito esporadicamente, o que você pode fazer para torná-lo fácil sob o aspecto aprendizagem?108
  • 104. Comunicação Visual para Web I4) Assinale com [V] Verdadeiro ou [F] Falso: a) ( ) A experiência do usuário não interfere na quantidade de material de ajuda que deve ser oferecido no site. b) ( ) Na ocorrência de um erro é importante fornecer uma solução, uma opção de contato técnico ou uma forma de retomar a navegação. c) ( ) O uso de metáforas do mundo real raramente apóiam o aprendizado na utilização do site. d) ( ) O uso de rótulos claros em campos de dados minimiza a ocorrência de erros de digitação. e) ( ) Tempos de respostas lentos não são aspectos que interferem na boa usabilidade do site. f) ( ) Quanto menor o número de ações que o usuário terá que realizar para atingir seu objetivo melhor para a usabilidade do site. g) ( ) O uso de mensagens de erro que propiciem a correção do erro são fundamentais para a interação. h) ( ) As páginas do site imprimem perdendo a formatação o que não é problema, pois o site pode ser visto perfeitamente no monitor de vídeo.5. Projetar um site tendo o usuário como centro do projeto é importante, mas tão importante quanto, é medir o grau de usabilidade obtido na interação. Por que esta afirmação é verdadeira e como você pode promovê-la no site Boa Noite? Unidade 4 109
  • 105. Universidade do Sul de Santa Catarina Saiba mais ROCHA, H.V.; BARANAUSKAS, M. C. C. Design e avaliação das interfaces humano-computador. 12ª Escola de Computação, São Paulo, IME-USP, 2000.110
  • 106. 5UNIDADE 5Avaliando a usabilidadede Websites Objetivos de aprendizagem Estabelecer critérios sobre a qualidade de um Website. Estar apto a realizar a avaliação de Websites. Reconhecer técnicas de avaliação. Seções de estudo Seção 1 Por que avaliar websites? Seção 2 Técnicas prospectivas Seção 3 Técnicas preditivas Seção 4 Técnicas preditivas: avaliações heurísticas Seção 5 Técnicas preditivas: inspeção cognitiva da intuitividade Seção 6 Técnicas preditivas: listas de verificação Seção 7 Técnicas objetivas
  • 107. Universidade do Sul de Santa Catarina Para início de conversa Quando você desenvolve um projeto, idéias e decisões fazem com que nossa capacidade de avaliação fique limitada em função do envolvimento com o projeto. Existem muitos métodos que podem determinar se seu site é bom ou ruim. Muitos destes métodos ocorrem em estágios iniciais do projeto. Por isso você precisa estabelecer exatamente quais critérios devem ser avaliados e qual metodologia mais se adapta ao projeto. Quando você realiza uma avaliação fundamentada na usabilidade deve verificar a satisfação ou insatisfação que o cliente tem ao utilizar seu site, a eficiência com que o usuário consegue executar a tarefa completamente, e os recursos necessários para tal. Nesta unidade vamos analisar algumas metodologias que nos permitem avaliar os quesitos acima. Você vai ter a oportunidade de colocar em prática algumas destas metodologias avaliando seus próprios projetos ! Vamos lá? SEÇÃO 1 – Por que avaliar Websites? O motivo que nos leva a aplicar uma avaliação de interfaces é garantir que o sistema reúna realmente, todos os requisitos necessários para uma interação confortável entre o usuário e a interface. Para que você faça uma avaliação realmente efetiva, ela deve ser aplicada em todo o ciclo de vida do projeto de um aplicativo. A aplicação de um teste específico para cada fase, depende da aplicação e do que se pretende saber sobre o produto. Em 1993, Hix afirmou que ao realizamos uma avaliação de usabilidade tem-se por finalidade:112
  • 108. Comunicação Visual para Web I validar a eficácia da interação entre o usuário/site confrontando a execução das tarefas pretendidas pelo usuário; verificar o quanto o site foi eficiente durante esta interação, observando aspectos relacionados ao tempo necessário para realização da tarefa, problemas encontrados, necessidade de uso de ajuda, etc; observar aspectos subjetivos como satisfação do usuário com a interface. Lembre-se: um ponto crucial é o fato de que a interação é completamente dependente do ambiente físico, tipo de tarefa, tipo de usuário e equipamentos em que ela ocorre. O sucesso ou o total fracasso da interação são completamente dependentes destes fatores.Podemos distinguir três tipos de técnicas de avaliaçãoergonômica: as técnicas prospectivas, que buscam a opinião do usuário sobre a interação com o sistema; as técnicas preditivas ou diagnósticas, que buscam prever os erros de projeto de interfaces sem a participação direta de usuários; as técnicas objetivas ou empíricas, que buscam constatar os problemas a partir da observação do usuário interagindo (utilizando) com o sistema. Em que situação pode-se usar cada uma delas?A figura a seguir tenta esclarecer esta dúvida apontando astécnicas mais “interessantes” para cada etapa do ciclo de vida: Unidade 5 113
  • 109. Universidade do Sul de Santa Catarina Análise dos usuários e necessidades de uso Especificação de requisitos Técnicas Prospectivas Projeto preliminar Projeto detalhado Técnicas Preditivas Implementação Técnicas Objetivas Figura 5.1 - Uso de técnicas de avaliação no decorrer do projeto Fonte: Cybis, 2003 O uso destas técnicas pode acontecer em etapas iniciais do projeto conforme apresentado na figura 5.1. Durante a especificação de requisitos e no projeto preliminar, pode-se aplicar técnicas prospectivas. Quando estamos no projeto detalhado aplicam-se técnicas preditivas e durante a implementação lançamos mão das técnicas objetivas. SEÇÃO 2 – Técnicas prospectivas As técnicas prospectivas baseiam-se na aplicação de questionários/entrevistas com o usuário para avaliar sua satisfação ou insatisfação em relação ao sistema e sua operação. O uso do questionário pode ser aplicado durante toda a vida útil do site, sendo uma fonte primorosa de informações sobre facilidades, dificuldades sugestões e críticas do usuário potencial.114
  • 110. Comunicação Visual para Web IO QUIS - Questionaire for User Interaction Satisfaction é ummodelo de questionário de satisfação disponibilizado na internet, Você pode acessá-lo emque pode servir de modelo para sua empresa. Ele abrange <http://www.lap.umd.aspectos como legibilidade, layout de telas, significado de ícones, edu/QUIS/index.htmlinteração e terminologia. Univ. Maryland (Norman, 1989)>.Veja na tabela a seguir, um recorte do questionário QUIS. 5.4.1 Mensagens que aparecem na tela são: Confusas Claras 1 2 3 4 5 6 7 8 9 Não aplicável 5.4.2 Instruções para comando ou seleção são: Confusas Claras 1 2 3 4 5 6 7 8 9 Não aplicávelTabela 1 - Recorte do questionário QUISO SUMI foi desenvolvido pelo Human Factors Research Groupda Universidade de Cork, Irlanda e procura medir a usabilidade Você pode acessá-loconsiderando percepção e atitudes dos usuários. O questionário no endereço <http://é distribuído em categorias como: usabilidade geral, efeito www.ucc.ie/hfrg/ questionnaires/sumi/>.psicológico, suporte ao usuário, facilidade de aprendizado,eficiência, controle, análise consensual dos itens.Se você pretende elaborar um questionário de satisfação, observeos seguintes itens: elabore um número pequeno de questões; cuidado com questões ambíguas, seja sucinto; permita ao usuário expressar sua opinião por meio de sugestões e críticas. Unidade 5 115
  • 111. Universidade do Sul de Santa Catarina SEÇÃO 3 – Técnicas preditivas ou diagnósticas Quando resolvemos utilizar técnicas preditivas, a inclusão de usuários que participam de forma direta na avaliação não acontece. Normalmente, a avaliação baseia-se em inspeções de versões intermediárias ou versões finais. Cybis (2000), classifica estas inspeções como: Avaliações analíticas — envolvem a decomposição hierárquica da estrutura da tarefa para verificar as interações propostas. Avaliações heurísticas — se baseiam nos conhecimentos ergonômicos e na experiência dos avaliadores que percorrem a interface ou seu projeto para identificar possíveis problemas de interação humano-computador. Inspeções por checklists — dependem do conhecimento agregado à ferramenta de inspeção, uma vez que se destinam a pessoas sem uma formação específica em ergonomia. Avaliações analíticas O uso da avaliação analítica procura prever a usabilidade, a partir de modelos ou representações de sua interface e de seus usuários. A avaliação é aplicada nas etapas iniciais do projeto, quando inicia-se a concepção de interfaces humano-computador. Mesmo que nesta fase tenhamos poucas certezas sobre o projeto, já é possível verificar questões como a consistência, a carga de trabalho e o controle do usuário sobre o diálogo proposto. Quando iniciamos o trabalho de especificação da futura tarefa interativa podemos utilizar formalismos como o MAD (Méthode Analytique de Description des tâches) 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 técnicas de modelagem e de análise de tarefas.116
  • 112. Comunicação Visual para Web INesse modelo são descritos os métodos necessários à realizaçãode objetivos específicos. Neste caso, você vê os métodos comouma série de passos que consistem em operadores (ações) que osusuários realizam. Quando há mais de um método disponívelpara a realização de um objetivo, o modelo GOMS inclui regrasde seleção (SRs) que permitem escolher o método apropriado,dependendo do contexto (PREECE, 1994). O objetivo (Goals) é o que o usuário quer realizar, sua meta. É possível subdividir o objetivo geral em sub- objetivos hierarquicamente.Ao acessarmos um site de banco na Internet podemos ter oobjetivo principal de realizar um determinado pagamento. Mas,temos objetivos menores como: informar conta, informar senha,dados da fatura... O Operador é uma ação que deve ser realizada a serviço de um objetivo. Os operadores podem ser atos Motores (Clicar, Teclar, Arrastar, Mover rosto), Cognitivos (Lembrar, Planejar, Raciocinar), Perceptivos (Ver, Ouvir, Sentir ) ou uma combinação de todos. Para efetuar a compra deve acionar o botão compre _ > temos aqui Figura 5.3 - Uso de Operador na metodologia GOMS um operador. Os Métodos são a seqüência de passos para se atingir uma meta. Unidade 5 117
  • 113. Universidade do Sul de Santa Catarina Para efetuar a compra neste site do CD selecionado, posso solicitar que o mesmo seja embrulhado para presente, entregue em um determinado endereço, a venda seja parcelada em 2 vezes. As Selection rules expressam opções alternativas entre métodos e operadores. Saiba mais Para saber mais sobre o método GOMS: Acesse o site: <http://www.it.bton.ac.uk/staff/rng/teaching/notes/GOMS.html> Leia o artigo “On the Analysis of Groupware Usability Using Annotated GOMS” de Pedro Antunes Marcos e R.S. Borges sobre a aplicação do GOMS disponível na midiateca. O MAD - Méthode Analytique de Description des Tâches O modelo MAD foi sugerido por Scapin (1989, 1990), e permitePara saber mais sobre o método decompor as tarefas em subtarefas. O conceito de tarefa éMAD acesse o site do INRIA: representado por um objeto genérico chamado de objeto-tarefa, que é definido por um conjunto de elementos. Além disso, cada<http://www-sop.inria.fr/acacia/ESSI/Old-Site/Interactives.html> objeto-tarefa (folha da árvore hierárquica da decomposição) é identificado por um nome e um número. Assim, cada tarefa será representada pelas seguintes características: identificação da tarefa (número e nome); elementos da tarefa (finalidade, estágio inicial, pré- condições, corpo da tarefa, pós-condições, estágio final) e atributos da tarefa.118
  • 114. Comunicação Visual para Web ISEÇÃO 4 – Técnicas preditivas: avaliações heurísticas A avaliação heurística é uma técnica que propõe a avaliação sistemática para identificação de problemas de usabilidade.Por ser uma técnica de fácil aplicação é largamente utilizada.Os problemas são detectados através de uma grade de análise(formada por princípios reconhecidos de usabilidade) queorientam o avaliador em aspectos relacionados às tarefas eobjetivos do usuário final.Quando você inicia este tipo de avaliação é importante forneceraos avaliadores antes da inspeção, informações sobre o contextode uso do site, possíveis cenários em que a interação ocorre epassos necessários para que o usuário atinja suas metas.Em 1993, Pollier descreveu as diferentes formas de se conduziruma avaliação heurística: Abordagem por objetivos dos usuários. O avaliador aborda a interface a partir de um conjunto de tarefas e sub-tarefas principais dos usuários ou relacionadas aos objetivos principais do software. Abordagem pela estrutura de interface. Por esta estratégia, especialmente direcionada para diálogos por menu, o avaliador aborda a interface como uma árvore de menu, com níveis hierárquicos das ações que permitem as transições de um nível a outro. Dois encadeamentos são possíveis nessa estratégia: exame por profundidade ou largura da árvore. Abordagem pelos níveis de abstração. O avaliador aborda a interface como um modelo lingüístico estruturado em camadas de abstração 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. Unidade 5 119
  • 115. Universidade do Sul de Santa Catarina Abordagem pelas qualidades das interfaces. O avaliador aborda a interface a partir das qualidades ou heurísticas de usabilidade que elas deveriam apresentar. Se você pretende realizar uma avaliação heurística, considere como ideal o número de 3 a 5 avaliadores. O uso de avaliadores experientes aumenta a chance de sucesso na avaliação, pois a avaliação é baseada no conhecimento de usabilidade dos avaliadores. Para uma avaliação heurística é necessário que você obtenha conhecimentos ergonômicos. Que tal conhecer um pouco sobre as heurísticas propostas por Scapin e Bastien em 1993? Heurísticas ergonômicas de Bastien e Scapin Bastien e Scapin (1993) definiram oito critérios principais de usabilidade que são subdivididos em sub-critérios elementares: 1. Condução A condução refere-se aos meios disponíveis para aconselhar, orientar, informar, e conduzir o usuário na interação com o computador (mensagens, alarmes, rótulos, etc.). Uma boa condução facilita o aprendizado e a utilização do sistema permitindo que o usuário: saiba a qualquer tempo onde ele se encontra numa seqüência de interações ou na execução de uma tarefa; conheça as ações permitidas, bem como suas conseqüências; e obtenha informações suplementares (eventualmente por demanda). Quatro sub-critérios participam da condução: a presteza, o agrupamento/distinção entre itens, o feedback imediato e a legibilidade.120
  • 116. Comunicação Visual para Web I2. Carga de trabalho O critério Carga de trabalho diz respeito a todos elementos da interface que têm um papel importante na redução da carga cognitiva e perceptiva do usuário, e no aumento da eficiência do diálogo.Quanto maior for a carga de trabalho, maior será a probabilidadede se cometer erros. E também, quanto menos o usuário fordistraído por informações desnecessárias, mais ele será capaz dedesempenhar suas tarefas eficientemente. Além disso, quantomenos ações forem necessárias, mais rápidas as interações.O critério Carga de trabalho está subdividido em dois critérios:Brevidade e Densidade Informacional.Veja na figura a seguir que, para realizar a busca do imóvel porestado, o internauta deve percorrer toda a lista de seleção atéencontrar o estado desejado. A caixa apresenta os estados semnenhum tipo de classificação, dificultando a localização do estadodesejado pelo usuário aumentando a carga de trabalho, pois teráque percorrer a lista, lendo as letras iniciais de todos os estadosaté encontrar o desejado. <http://www. redeimobiliaria.com.br/>Figura 5.4 - Exemplo de quebra do critério Carga de trabalho Unidade 5 121
  • 117. Universidade do Sul de Santa Catarina 3. Controle explícito O critério Controle explícito, diz respeito tanto ao processamento explícito pelo sistema das ações do usuário, quanto ao controle que os usuários têm sobre o processamento de suas ações pelo sistema. Quando os usuários definem explicitamente suas entradas, e quando estas entradas estão sob o controle deles, erros e ambigüidades são limitados. Além disso, o sistema será melhor aceito pelos usuários se eles tiverem controle sobre o diálogo. O critério Controle explícito se subdivide em dois critérios: Ações Explícitas do Usuário e Controle do Usuário. 4. Adaptabilidade A adaptabilidade de um sistema diz respeito a sua capacidade de reagir conforme o contexto, e conforme as necessidades e preferências do usuário. Uma interface não pode atender ao mesmo tempo a todos os seus usuários em potencial. Para que ela não tenha efeitos negativos sobre o usuário, esta interface deve, conforme o contexto, se adaptar ao usuário. Por outro lado, quanto mais variadas são as maneiras de realizar uma tarefa, maiores são as chances que o usuário possui de escolher e dominar uma delas no curso de seu aprendizado. Deve-se portanto, fornecer ao usuário procedimentos, opções, comandos diferentes permitindo-lhe alcançar um mesmo objetivo. Dois sub-critérios participam da adaptabilidade: a flexibilidade e a consideração da experiência do usuário.A adaptabilidade se refere à flexibilidade e aos meios colocados à disposição do usuário que lhe permitem personalizar a interface a fim de levar em conta as exigências da tarefa, de suas estratégias ou seus hábitos de trabalho. Ela corresponde também ao número de diferentes maneiras à disposição do usuário para alcançar um certo objetivo. Trata-se em outros termos, da capacidade da interface se adaptar as variadas ações do usuário. No exemplo a seguir, o usuário pode listar os produtos por ordem de produto, menor ou maior preço e marca. Isto flexibiliza a utilização do site.122
  • 118. Comunicação Visual para Web I Figura 5.5 - Exemplo positivo de adaptabilidade5. Gestão de erros A gestão de erros diz respeito a todos os mecanismos que permitem evitar ou reduzir a ocorrência de erros, e quando eles ocorrem, que favoreçam sua correção.Este critério diz respeito aos mecanismos empregados paradetectar e prevenir os erros de entradas de dados ou comandos,ou possíveis ações de conseqüências desastrosas e/ou nãorecuperáveis. Refere-se também a qualidade das mensagens, apertinência, a legibilidade e a exatidão da informação dada aousuário sobre a natureza do erro cometido (sintaxe, formato, etc.),e sobre as ações a executar para corrigi-lo.Três sub-critérios participam da manutenção dos erros: aproteção contra os erros, a qualidade das mensagens de erro e acorreção dos erros.Figura 5.6 - Exemplo de quebra do critério Carga de Trabalho, Gestão de Consistência. Unidade 5 123
  • 119. Universidade do Sul de Santa Catarina Na figura 5.4, ao iniciarmos a interação, foi solicitada a busca no estado da Bahia, para casas com locação disponível para temporada. O resultado da busca foi esta página, onde o internauta se pergunta: digitei algo errado? Onde estão os imóveis da Bahia? Neste caso temos um erro de apresentação, por outro lado, se ele quiser continuar a interação mesmo assim, a informação já digitada na figura 5.4 (estado) deve ser redigitada o que duplica a carga de trabalho do usuário. Mas nesta página somente o estado do Rio de Janeiro está disponível, quando na primeira tínhamos uma lista de estados a ser selecionada! Isto nos traz problemas de Gestão de erros, compatibilidade, se o usuário entrou na pesquisa porque queria um imóvel na Bahia, como só posso locar no Rio de Janeiro?<www.carronovo.com.br/index1.php> Figura 5.7 Observe os botões desta página (clique aqui, Pesquisar, Entrar). Eles são homogêneos no projeto de design?124
  • 120. Comunicação Visual para Web I6. Homogeneidade O critério homogeneidade refere-se à forma na qual as escolhas na concepção da interface (códigos, denominações, formatos, procedimentos, etc.) são conservadas idênticas em contextos idênticos, e diferentes para contextos diferentes.Os procedimentos, rótulos, comandos, etc., são melhorreconhecidos, localizados e utilizados, quando seu formato,localização, ou sintaxe são estáveis de uma tela para outra, de umaseção para outra.Nestas condições, o sistema é mais previsível e a aprendizagemmais generalizável; os erros são diminuídos. É necessário escolheropções similares de códigos, procedimentos, denominaçõespara contextos idênticos, e utilizar os mesmos meios paraobter os mesmos resultados. É conveniente padronizar tantoquanto possível todos os objetos quanto ao seu formato e suadenominação, e padronizar a sintaxe dos procedimentos.A falta de homogeneidade nos menus por exemplo, podeaumentar consideravelmente os tempos de procura.7. Compatibilidade O critério compatibilidade refere-se ao acordo que possa existir entre as características do usuário (memória, percepção, hábitos, competências, idade, expectativas, etc.) e das tarefas, de uma parte, e a organização das saídas, das entradas e do diálogo de uma dada aplicação, de outra. Ela diz respeito também ao grau de similaridade entre diferentes ambientes e aplicações.A eficiência é aumentada quando: os procedimentos necessários ao cumprimento da tarefa são compatíveis com as características psicológicas do usuário; os procedimentos e as tarefas são organizadas de maneira a respeitar as expectativas ou costumes do usuário; e Unidade 5 125
  • 121. Universidade do Sul de Santa Catarina quando as traduções, as transposições, as interpretações, ou referências à documentação são minimizadas. Os desempenhos são melhores quando a informação é apresentada de uma forma diretamente utilizável (telas compatíveis com o suporte tipográfico, denominações de comandos compatíveis com o vocabulário do usuário, etc.). 8. Significado dos códigos e denominações O critério significado dos códigos e denominações diz respeito à adequação entre o objeto ou a informação apresentada ou pedida, e sua referência. Termos pouco expressivos para o usuário podem ocasionar problemas de condução onde ele pode ser levado a selecionar uma opção errada. Se voce utiliza uma codificação significativa, a recordação e o reconhecimento são melhores, se isto não ocorre o usuário é conduzido a cometer erros. Saiba mais Veja na Midiateca do Espaço UnisulVirtual de Aprendizagem, as Heurísticas de usabilidade, propostas por Jacob Nielsen. Este conteúdo está publicado sob o título UNIDADE04_SCAPIN. Os Princípios de Diálogo, propostos pela norma ISO 9241:10. Heurísticas para avaliação de usabilidade de portais corporativos. Heurísticas desenvolvidas por Dias(2001) em: <www.geocities.com/claudiaad/heuristicas_web.html>126
  • 122. Comunicação Visual para Web ISEÇÃO 5 – Técnicas preditivas: inspeção cognitiva da intuitividadeEsta técnica é um tipo de avaliação heurística, onde osespecialistas enfocam especificamente, os processos cognitivosque se estabelecem quando o usuário realiza a tarefa interativapela primeira vez (KIERAS e POLSON, 1991). Ela visa avaliaras condições que o software oferece para que o usuário faça umrápido aprendizado das telas e das regras de diálogo. A intuitividade é o aspecto central na aplicação de uma inspeção cognitiva.Nesta inspeção o avaliador deve observar atentamente acapacidade do usuário de realizar a tarefa, assim como seuconhecimento no uso de sistemas informatizados. O avaliadordeve estar ciente do caminho a ser percorrido pelo usuário paraatingir seus objetivos.De posse destas informações ele passa a percorrer os caminhosprevistos aplicando para cada ação o seguinte checklist (KIERASe POLSON, 1991): 1. O usuário realiza a tarefa tarefa? As denominações corretamente? ou representações gráficas são representativas da 2. Ao encontrar-se no passo tarefa e significativas para inicial de determinada o usuário? tarefa, o usuário, baseado no que lhe é apresentado, 5. O usuário saberá operar consegue realizar o o objeto? O nível objetivo previsto pelo de competência na projetista? operação de sistemas informatizados é 3. O usuário percebe o compatível com a forma objeto associado a esta de interação proposta? tarefa? Este objeto está suficientemente à vista do 6. O usuário compreenderá usuário? o feedback fornecido pelo sistema como um 4. O usuário reconhecerá o progresso na tarefa? objeto como associado à Unidade 5 127
  • 123. Universidade do Sul de Santa Catarina A proposta dos autores desta técnica é de que os próprios projetistas possam aplicá-la no desenvolvimento do sistema interativo. Como apresentar os resultados da avaliação heurística Quando você detecta os problemas de usabilidade, eles devem ser associados aos princípios de usabilidade que foram violados. Ao fazer o relatório você pode ainda fazer sugestões quanto a solução mais interessante. O relatório deve ser consistente, para tanto a padronização nas descrições dos problemas é fundamental. Os problemas podem ainda ser classificados quanto ao grau de severidade, o que permite uma maior sensibilização da equipe de desenvolvimento. SEÇÃO 6 – Técnicas preditivas: listas de verificação As inspeções de usabilidade por listas de verificação são vistorias baseadas em requisitos considerados necessários para atingir um objetivo à luz de considerações ergonômicas. A aplicação de uma lista de verificação ou um site, pode ser realizada por profissionais não especialistas em ergonomia, com boas possibilidades de sucesso. Isto é possível devido ao formato proposto nas listas que normalmente, são elaboradas de forma objetiva. As questões são agrupadas em categorias e solicitam a confirmação ou negação das perguntas propostas: O site apresenta mapa? ( ) sim ( ) não ( ) não-aplicável A página apresenta o uso de ícones significativos? ( ) sim ( ) não ( ) não-aplicável128
  • 124. Comunicação Visual para Web INa escolha de uma lista de verificação é importante observar: se os resultados produzidos são uniformes e abrangentes em termos de identificação de problemas de usabilidade; se a lista permite ao avaliador a inserção de comentários; sendo a lista automatizada, o formato do relatório final; se as categorias propostas atingem os objetivos de sua avaliação.Algumas listas encontram-se disponíveis para o acesso público.Que tal dar uma olhada nelas? WEAKLEY, Russ. A web standards checklist <http://www.maxdesign.com.au/presentation/checklist.cfm> A tradução do checklist original encontra-se no site de Maurício Samy Silva <http://www.maujor.com/tutorial/wschecklist.php> Ergolist – checklist automatizado que fornece um diagnóstico no final. Autor: Laboratório 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 > Unidade 5 129
  • 125. Universidade do Sul de Santa Catarina SEÇÃO 7 – Técnicas objetivas As técnicas empíricas, que contam com a participação direta de usuários se referem basicamente, aos ensaios de interação e as sessões com sistemas espiões. Ensaios de interação Quando você realiza um ensaio de interação, o usuário participa da avaliação por meio de uma amostra do público-alvo utilizando-se do site a ser avaliado. Você deve usar cenários com tarefas típicas ou críticas, os dados são originados da observação dos usuários durante a interação. Existem técnicas para a aplicação dos ensaios de interação (CHAN, 1996): Teste com pares de usuários – pares de usuários são colocados na execução das tarefas. Neste caso, o diálogo entre os usuários é fortalecido proporcionando a troca de informações, auxiliando na execução de tarefas. Teste com usuário e avaliador – o observador acompanha a interação. Em caso de necessidade auxilia o usuário. O observador deve evitar o constrangimento do usuário permitindo que o mesmo execute a tarefa da forma pessoal sem interferências. Verbalização simultânea – durante o teste o usuário comenta seu raciocínio. Nesta técnica além da execução da tarefa, o usuário verbaliza o raciocínio que o levou a tomar esta ação. Quando você for aplicar esta técnica observe os seguintes itens (CHAN, 1996): Esclareça o usuário sobre o teste e sua finalidade. Selecione usuários que queiram participar, não forçando esta participação. Respeite os limites do usuário, o cansaço ou constrangimento muitas vezes invalidam os resultados do ensaio.130
  • 126. Comunicação Visual para Web IO uso de câmaras de vídeo, gravadores e softwares espiões(gravadores de eventos) colaboram para a precisão do ensaio.Estes recursos permitem que detalhes ocorridos durante ainteração sejam reproduzidos e revistos de forma mais minuciosa.Deixe claro ao usuário que sua competência pessoal não estásendo avaliada, mas sim a interface.SínteseQuando você estudou usabilidade na unidade 4 foramapresentados conceitos e recomendações para garantir queo projeto apresentasse um bom grau de usabilidade junto aousuário. Mas durante um projeto é comum que apesar de todosos cuidados ainda assim ocorram descuidos e que este descuidoacabe por gerar problemas de usabilidade na interface. Outrafonte de problemas pode ser o desenvolvimento de um projetosem a observação de requisitos de usabilidade, a garantia deusabilidade do produto fica totalmente comprometida.Nestes casos, a solução proposta na unidade 5 é a aplicaçãode testes de usabilidade, nestes testes você pode garantir queo sistema reúna os requisitos necessários a uma interaçãoconfortável entre o usuário e a interface.Você estudou na unidade diferentes técnicas como a prospectiva(com intervenção direta do usuário) e a preditiva (sem aparticipação efetiva do usuário). Durante o estudo você conheceuheurísticas como as de Bastien e Scapin que apóiam avaliaçõesheurísticas pautadas em políticas de usabilidade.Foram apresentadas situações de uso para as diferentes técnicascomo a utilização de listas de verificação uma atividade deavaliação bastante simples que não exige conhecimento dousuário, avaliações por meio de ensaios de interação onde oobjetivo é reconhecer e identificar a forma como o usuário atingeseus objetivos no processo que está sendo avaliado utilizando-se afigura de um observador, avaliações analíticas como o GOMS e o Unidade 5 131
  • 127. Universidade do Sul de Santa Catarina MAD onde tarefas são decompostas oferecendo o entendimento completo de como o usuário realiza o seu processo de trabalho. Na próxima unidade serão apresentados aspectos relacionados à navegação do site. A navegação é um quesito extremamente relacionado a usabilidade pois é determinante para que o usuário consiga atingir seus objetivos na interface de forma rápida e eficiente. Atividades de auto-avaliação 1. O que você deve evitar quando está elaborando questões para um questionário de satisfação? a) ( ) Elaborar um número de questões que cubra todos os aspectos da interface, mesmo que isto represente um número elevado de questões. Pois quanto mais completo, melhor será seu grupo de informações sobre o site. b) ( ) Evitar sugestões do usuário para não ter que modificar o projeto. c) ( ) Questões de duplo sentido confundem o usuário. d) ( ) Incentivar a expressão de críticas, pois as mesmas contribuem para o aperfeiçoamento do projeto. 2. Baseado nos critérios ergonômicos previstos por Bastien e Scapin, faça uma avaliação heurística de um site. O resultado do exercício será um relatório classificado por critérios. Observe o exemplo abaixo: Exemplo do relatório: Site: www.fus.br Compatibilidade: o site faz uso de diferentes decisões de design na representação de botões Gestão de erros: a página que realiza a finalização do pedido, ao digitar o frete apresenta uma mensagem de erro de programação.132
  • 128. Comunicação Visual para Web I O site a ser avaliado será o site <www.pontofrio.com.br>. Faça todos os passos necessários para simular a compra de um produto avaliando a página segundo os critérios.3. Assinale as expressões abaixo identificando o que pode e o que é válido para: (A) Testes com pares a) ( ) Esta técnica é utilizada quando o de usuários. projetista encontra dificuldades em entender a lógica de (B) Testes com realização da tarefa por parte verbalização. do usuário, sendo que o usuário (C) Testes com tem dificuldade em expressar usuário e avaliador. esta lógica. (T) Todas as técnicas. b) ( ) É fundamental na técnica que o usuário sinta-se confortável, sem constrangimentos. c) ( ) Neste caso o avaliador apóia toda a interação e se for necessário, intervém oferecendo ajuda. d) ( ) A troca de idéias entre os usuários provoca um ambiente informal fortalecendo a segurança do usuário na execução da tarefa. e) ( ) Quando usamos esta técnica ocorre a verbalização da tarefa pelo usuário.Saiba maisO Ergolist é um checklist automatizado que fornece umadiagnóstico no final.<www.labiutil.inf.ufsc.br/ergolist/> Unidade 5 133
  • 129. 6UNIDADE 6Navegação Objetivos de aprendizagem Determinar a estrutura mais adequada de acordo com o perfil e missão do site. Propor mecanismos facilitadores para a navegação do site. Seções de estudo Seção 1 Navegar é preciso Seção 2 Estrutura do Website Seção 3 Como decidir a melhor estrutura? Seção 4 A confusão dos Hyperdocumentos Seção 5 Recomendações do W3C para Navegação na Web
  • 130. Universidade do Sul de Santa Catarina Para início de conversa Para entendermos o conceito e a importância da estrutura de navegação 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 São Paulo. Agora, imagine que no bairro em questão, não existem placas de sinalização com o nome da rua. Como você se sente? Tantos prédios, tantas ruas, tantas casas, mas não consegue localizar o que deseja! Na internet acontece a mesma coisa. Quando a navegação é confusa, o internauta fica perdido, não encontra a informação, não consegue retornar a uma etapa anterior e não encontra o que espera. Nesta unidade vamos identificar as estruturas de organização de um site que nos levam a navegação. Você também vai encontrar algumas dicas para melhorar a navegação do site e da estrutura mais adequada, de acordo com o tipo de informação proposta. Vamos iniciar o cruzeiro? SEÇÃO 1 – Navegar é preciso Se eu lhe perguntasse: o que é navegação? O que você responderia? É bem provável que ao lhe perguntar, você lembraria daquela propaganda com um barquinho no final do horizonte. Ou será que lembraria daquela página onde o design refinado de botões, os links e imagens muito bem estruturadas convidam o usuário a imersão no site? O verbo navegar é rico em significados, mas se você olhar em um dicionário, a palavra navegar vem do latim navigare e significa movimento através do espaço.136
  • 131. Comunicação Visual para Web ISe analisarmos amplamente a palavra, podemos pensar que omovimento através do espaço pode incluir o movimento virtualpor intermédio de espaços cognitivos formados por informações epelo conhecimento existente (WHITAKER, 1998).Quando estamos “navegando” em um site, o movimento noespaço não é necessariamente real mas dentro de uma metáfora,quanto mais próxima da realidade, mais verdadeira para onavegador. Mas até que ponto a navegação do site é importante?Segundo Nielsen (2005), quando o projeto de navegação é ruimos prejuízos são reais: analisados 15 sites comerciais, os usuários conseguiram encontrar a informação desejada em 42% dos casos; durante uma sessão de compras 62% dos compradores online desistiram do item que estavam procurando; dos que não obtiveram sucesso na compra, 20% tornaram a entrar no mesmo site pelo menos por três vezes e desistiram da interação novamente.A navegação eficiente deve ser centrada em objetivos possíveisdo usuário e nas ações necessárias para alcançar este objetivo. Sevocê entendeu este conceito, você acabou de dar o primeiro passopara entender o projeto da navegação.SEÇÃO 2 – Estrutura do WebsiteA estrutura de um Website, define como as informações e oselementos da interface são organizados. A estrutura define anavegação da interface na Web e, conseqüentemente moldam omodelo mental que o usuário irá ter, sobre como a informaçãoestá organizada no site. Unidade 6 137
  • 132. Universidade do Sul de Santa Catarina A definição da estrutura deve considerar limitações cognitivas e computacionais. O que isto quer dizer? Os internautas trabalham com porções de informações limitadas, e esta limitação está diretamente relacionada ao tamanho de uma página. Estrutura linear A estrutura linear é o meio mais simples de organizar a informação. Ela é apresentada em seqüência. Esta seqüência pode ser alfabética, cronológica, ou de processamento de tarefas que vai do geral para o específico. Quando utilizar esta estrutura linear? Sempre que for possível definir que a tarefa exige uma seqüência de atividades. Por exemplo: enciclopédias, sites de treinamento, sites de manuais, livros. Figura 6.1 - Estrutura de navegação linear Figura 6.2 - Estrutura de navegação linear alternativa138
  • 133. Comunicação Visual para Web IEstrutura hipertextoQuando você tem uma quantidade grande e complexa deinformações, o uso da estrutura hierárquica ou hipertexto é amais indicado. A maioria de nossos usuários está familiarizadacom uma estrutura hierárquica, o que facilita a memorização eo aprendizado relacionado à navegação dentro da estrutura. Aestrutura hierárquica é a mais utilizada. Figura 6.3 - Estrutura de navegação hierárquicaEstrutura em redeO uso de estruturas de rede procura imitar o pensamentoassociativo e o fluxo livre das idéias do usuário. Deve ser possívelao internauta seguir seus interesses, explorando o poder deassociação de páginas na Web. Esta estrutura é considerada perigosa, tendo em vista a facilidade com que o usuário se perde dentro da busca pela informação.Mas quando usar? Você pode considerar o seu uso em situaçõesonde o usuário é experiente na tarefa e precisa de informaçõesadicionais. Outra situação que pode apoiar o uso desta estruturafacilitando a navegação, é o uso de uma metáfora que o aproximedo ambiente real, como por exemplo, o ambiente virtual de umabiblioteca ou museu. Unidade 6 139
  • 134. Universidade do Sul de Santa Catarina Figura 6.4 - Estrutura de navegação em rede SEÇÃO 3 – Como decidir a melhor estrutura? Quando você iniciar o processo de construção da especificação, tenha em mente a organização da estrutura. Leve em consideração as seguintes questões definidas por Leite (2005): A organização está balanceada? Coloque um mapa disponível em todos os pontos da O usuário precisa navegar organização. muito de uma página para outra em uma mesma tarefa? Home page é a página de O usuário memoriza facilmente entrada do site e deve refletir o a organização do site? propósito do site: Use o modelo conceitual do deve indicar quais os objetivos, as domínio como base para a informações e/ou serviços do site; organização. deve indicar como interagir com o site para ter acesso aos recursos; Utilize as categorias do domínio para organizar as informações e deve conter elos para acesso aos recursos; serviços do sistema. deve indicar o responsável pelo site e Evite que serviços muito como entrar. utilizados fiquem em partes muito “profundas” de uma O uso de metáforas facilita a organização. navegação.140
  • 135. Comunicação Visual para Web IVocê pode fazer uso de botões ou menus pulldown paraimplementar a navegação. Neste caso, tome cuidado para nãoconfundir o usuário, use os botões para executar comandos emenus para a escolha de informações.Lembre-se que os links devem indicar o conteúdo do destino e ousuário deve identificar os elos facilmente. Isto deve evitar que ousuário se sinta perdido. Sempre que possível, faça uso de atalhosque possam facilitar a navegação.Não esqueça de permitir ao usuário, a possibilidade de voltaratrás em uma página anterior, a volta para a página principal deveestar disponível o tempo todo!SEÇÃO 4 – A confusão dos hiperdocumentosEm 1995, Haake et al. iniciou estudos em que descreveu arelação entre cognição e hipermídia, em aplicações onde osusuários realizam a busca por alguma informação específica paraa resolução de problemas.Quando o usuário faz uso de um hiperdocumento, ele tem umtipo de comportamento, em relação à leitura dos documentos,diferente daquele utilizado em aplicações em que não há umaidéia clara sobre a informação que está sendo procurada. Uma das metáforas prediletas em sistemas de hiperdocumentos é a metáfora da viagem. Esta metáfora fornece ao internauta a sensação de navegar pelos documentos.Haake et al. (1995), cita que um dos maiores problemas citadospelo usuário é o da “desorientação”: Onde estou? Como chegueiaqui? De onde eu vim? Unidade 6 141
  • 136. Universidade do Sul de Santa Catarina Tentando evitar esta situação, ao fazer uso de hiperdocumentos lembre-se (CARVALHO, 2004): informe sempre ao leitor sua posição atual em relação à estrutura geral; permita reconstruir o caminho que o levou até sua posição atual; faça distinção entre diferentes opções para se mover desta posição. Raciocine da seguinte maneira: quando você facilita a orientação você apóia o usuário a encontrar seu caminho. Quando você oferece mecanismos que facilitam a navegação, você ajuda o usuário a criar seu caminho. Quando projetamos o hiperdocumento, o texto deve ser coerente: o usuário recorda e entende melhor o texto se a navegação é coerente. Isto acontece, porque o usuário consegue construir um modelo mental a partir da sua leitura. Algumas medidas práticas a serem tomadas durante a modelagem da aplicação, seriam fornecer ao usuário: Mapas locais e regionais de Marcos relevantes, em torno navegação. dos quais o internauta possa navegar. Busca por palavra-chave. Índice. Indicação gráfica ou textual dos caminhos de navegação. Embedded menus. Formulários HTML para Bookmarks. anotações.142
  • 137. Comunicação Visual para Web I <http://www.ipl.org/ref> Figura 6.5 - Exemplo positivo de navegaçãoA figura 6.5, mostra o site da “Internet Public Library” queapresenta uma estrutura de hiperdocumentos, rica no processo denavegação. Saiba mais Se você se interessa pelo uso de hipertextos em softwares educacionais, leia o artigo “Interatividade em Hipermídias Educacionais: Problemas e Soluções”, escrito por Neide Santos e Fernanda Campos. Ele está disponível no endereço: <http://www.c5.cl/tise98/html/trabajos/interat/Autores> Unidade 6 143
  • 138. Universidade do Sul de Santa Catarina SEÇÃO 6 – Recomendações do W3C para Navegação na Web O W3C é um organismo reconhecido internacionalmente e tem por objetivo, estabelecer requisitos de qualidade para projetos Web. Entre diversos fatores, são ressaltadas questões relacionadas ao mecanismo de navegação do site. Os pontos descritos pelo W3C e traduzidos por Dias (2002), fazem menção ao uso de mecanismos de navegação claros para o usuário. Um dos pontos mais importantes, a ser observado no mecanismo de navegação é a coerência e a sistematização da navegação. O uso de informações de orientação, barras de navegação, mapa do site, aumentam as probabilidades de encontrar o que se procura no site. Para que você proponha um projeto coerente com estes objetivos existem alguns pontos que devem ser observados:A versão original do documentoem inglês, encontra-se em: Identificar claramente o destino de cada link. Quando<http://www.w3.org/TR/WAI- você faz o texto do link pense que ele pode ser lido foraWEBCONTENT>. do contexto, e que neste caso, deve ser claro e ilustrativo o suficiente para ser entendido. Também é extremamente importante, que o link seja conciso, ou seja: não escreva links longos. Na figura abaixo temos um exemplo negativo, onde cada link é composto por praticamente uma parte do texto da notícia, sendo que esta é a home page do site. Figura 6.6 - <www.ufsc.br>144
  • 139. Comunicação Visual para Web I Fornecer metadados para acrescentar informações semânticas a páginas ou sites. Por exemplo, utilizar RDF para indicar a autoria de um documento, o tipo de conteúdo. Resource Description Framework (RDF) éNão esqueça de informar ao internauta sobre como o site é uma linguagem paraorganizado. Isto pode ser feito utilizando-se um mapa do site representar informaçãoou um sumário. Não esqueça de deixar claro ao usuário quais as na internet. Arquivospossibilidades do site em termos de acessibilidade. Lembre-se o RDF são modelos ou fontes de dados, tambémque não se sabe, não se usa! conhecidos como metadata, tem comoNo site do senado federal o internauta tem a possibilidade de se objetivos principal criarlocalizar rapidamente com a ajuda do mapa do site assim como um modelo simplespode descobrir todas as informações disponíveis no mesmo. Veja de dados, com umaa figura 6.7: semântica formal e usar o vocabulário URI-based, usar uma sintaxe XML- based e suportar o uso de XML. Fonte <http:// pt.wikipedia.org, 2005>. Figura 6.7 - <http://www.senado.gov.br/sf/> Unidade 6 145
  • 140. Universidade do Sul de Santa Catarina Fornecer barras de navegação para destacar e dar acesso ao mecanismo de navegação. Procure agrupar links relacionados entre si, identificar o grupo (em benefício dos agentes do usuário) até que os agentes do usuário se encarreguem de tal função. Ao usar funções de pesquisa ofereça diferentes tipos de pesquisa. Assim, você vai atingir diferentes níveis de competência e preferências dos usuários. Faça cabeçalhos, parágrafos, listas onde o usuário facilmente identifique a informação. Não esqueça de fornecer informações sobre coleções de documentos (isto é, documentos compostos por váriasEm HTML, por exemplo, especifica-se páginas).coleções de documentos por meiodo elemento LINK e dos atributos Observe o site da empresa Salfer. Apesar de ser uma empresa com“rel” e “rev”. Outra maneira de criaruma coleção é construindo um um grande número de produtos a proposta de navegaçao do sitearquivo (por ex., com zip, tar e gzip, no disponibiliza um mecanismo de busca que poderia facilitar astuffit) das diferentes páginas. busca do internauta. Outro ponto a ser observado é a inexistencia de um mecanismo de menu que apresente imediatamente ao internauta todas as possibilidades de departamentos existentes na loja, o usuário deve selecionar a combo box que se encontra inclusive colocado de forma bastante discreta na página. Figura 6.8: <http://www.salfer.com.br>146
  • 141. Comunicação Visual para Web ISínteseNesta unidade você conheceu as diferentes maneiras pelas quaisa estrutura de um site pode ser organizada. Também esteve emcontato com recomendações que procuram evitar situações, ondeo esquema de navegação possa confundir o usuário durante suainteração.Oferecer opções de voltar, de adaptar diferentes mecanismos denavegação e ainda assim, proporcionar ao internauta a segurançade saber onde está e, principalmente o próximo passo que deveser realizado para atingir seu objetivo, reduzem sensivelmente osriscos de prejuízos em seu site.Atividades de auto-avaliação1. Imagine-se construindo um site para a biblioteca do Senado, sabendo que a mesma possui um acervo de aproximadamente 150.000 livros, 4.000 obras de referência (dicionários, enciclopédias, etc.) e 3.600 títulos de periódicos (revistas e jornais). A ordenação dos livros e folhetos nas estantes é por assunto, segundo a Classificação Decimal de Melvil Dewey, e a classificação Decimal de Direito, de Dóris Queiroz Carvalho. Os periódicos estão organizados nas estantes em ordem alfabética de títulos. Utiliza-se, ainda, o Código de Catalogação Anglo-Americano para a catalogação das obras. Qual a estrutura mais adequada? Linear, hierárquica ou Hipermídia? Justifique. Unidade 6 147
  • 142. Universidade do Sul de Santa Catarina 2. Cite alguns cuidados que você vai tomar relacionados à navegação do site do hotel “Boa Noite”. 3. Ao definir a estrutura do site, é verdadeiro afirmar: a) ( ) Para definir a estrutura de forma coerente é necessário observar o usuário na realização da tarefa percebendo a facilidade com que o mesmo a memoriza. b) ( ) A home page deve dar ao internauta uma noção exata do conteúdo do site, de forma breve mas concisa. c) ( ) O uso da estrutura em rede quando acompanhada por uma metáfora é ainda, a melhor estrutura para veicular sites que objetivem treinamento de pessoal. d) ( ) A confusão existente em muitos hiperdocumentos pode ser creditada ao excesso de informações do site. 4. Podemos considerar como aspectos que devem estar presentes em um site, com uma boa estrutura de navegação: a) ( ) O mapa completo do site só é necessário em sites que obedecem uma estrutura em rede por esta ser bastante complexa. b) ( ) Utilização de rótulos significativos para seu público. c) ( ) Oferecer árvores de navegação com mais detrês níveis. d) ( ) Ofereça links para a Home page em todas as páginas do site. e) ( ) Oferecer um mecanismo de busca pode ser substituído por um bom sistema de menus. f) ( ) Apresente links de navegação sempre no mesmo lugar, bem visíveis, na parte superior da página (`a esquerda, centrados ou `a direita) a consistência de tipo de letra ou ícone neste caso não é importante.148
  • 143. Comunicação Visual para Web ISaiba mais NIELSEN, Jakob. Alertbox: failure of corporative web sites. 1998. Disponível em: <http://www.useit.com/alertbox/981018.html>. Acesso em: 03/2005. 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. Unidade 6 149
  • 144. 7UNIDADE 7A compatibilidade na resoluçãode monitores e Websites Objetivos de aprendizagem Reconhecer o funcionamento básico da apresentação de imagens de um monitor CRT. Analisar e evitar problemas de projeto gráfico decorrentes da perda de brilho, cor ou contraste no site. Seções de estudo Seção 1 Monitores Seção 2 Dicas para aumentar a compatibilidade de seu Site X Monitores Seção 3 Uma palavrinha sobre Browsers
  • 145. Universidade do Sul de Santa Catarina Para início de conversa Quando falamos em compatibilidade, imediatamente lembramos aquela página “lindinha” que construímos. Porém, quando o usuário a utilizou, a tabela desformatou, a fonte visualizada não é a que projetamos, as cores sumiram... Crash total no projeto gráfico! Mas quem é o vilão? O monitor? O browser? O projetista? Para tentarmos evitar esta situação, torna-se importante conhecermos alguns princípios relacionados aos monitores, browsers e impressoras. SEÇÃO 1 – Monitores Monitores são originalmente dispositivos de saída de dados mas, atualmente temos monitores que permitem a entrada de dados e monitores touch-screen, que permitem a entrada de dados pelo toque. Quando você entra em um site que realiza a venda de equipamentos de informática, rapidamente vai perceber a variedade de modelos disponíveis no mercado. Eles se diferem na resolução e modo de operação. Quanto à resolução podemos ter monitores tipo CGA, EGA, VGA e Super VGA que podem ser monocromáticos, em tons de cinza ou coloridos. Além dos monitores tradicionais, temos também os monitores de LCD (Liquid Crystal Display) que podem ser monocromáticos ou coloridos. Mas afinal no que eles diferem entre si? Monitores CRT (Cathode Ray Tube) Os monitores de vídeo, do tipo Tubo de Raios Catódicos são dispositivos com funcionamento semelhante ao de uma TV. Se você abrir um monitor CRT vai perceber que ele é composto por152
  • 146. Comunicação Visual para Webum canhão que gera um feixe de elétrons. A resolução máxima naqual um monitor pode trabalhar depende de sua habilidade físicaem focar o feixe de elétrons sobre os pontos de fósforo (a teladeste tubo é composta por camadas de fósforo).O encontro do elétron com o fósforo gera um ponto de luz. Éassim que as imagens aparecem no monitor!A tela é considerada, para efeito de gráficos, como uma matrizde pontos (na verdade, para um monitor colorido, um conjuntode pontos: azul, verde e vermelho) chamados PIXELS. Paraque as imagens sejam geradas, o canhão tem de percorrer toda aextensão da tela ponto por ponto, linha por linha.O movimento descrito pelo feixe de elétrons, da esquerda paradireita e de cima para baixo, para desenhar uma quadro (umaimagem) é o que chamamos de varredura. O processo devarredura é repetido a todo instante, formando as imagens quenossa retina reconhece.Freqüência horizontal (HSYNC)O canhão possui 3 feixes de cores, que trabalham em conjuntoe ao mesmo tempo: um feixe verde, um feixe vermelho e umfeixe azul. A intensidade deste canhão é medida em MHz. Osmonitores possuem normalmente uma intensidade entre 100MHz e 200 MHz (largura de banda, banda passante ou dotrate). O canhão percorre a tela do monitor com esses três feixese realiza esse processo constantemente. O canhão percorre a telaem forma de linhas começando de cima para baixo e da esquerdapara direita. Este é o processo de varredura constante queacontece para que as imagens sejam produzidas.A freqüência horizontal é o número de linhas que o canhão domonitor consegue percorrer por segundo. Quando dizemos que afreqüência horizontal de um monitor é de 65 KHz, tecnicamentesignifica que o monitor consegue varrer 65 mil linhas porsegundo. Na figura promocional da página seguinte, qual afreqüência horizontal do monitor? Unidade 7 153
  • 147. Universidade do Sul de Santa Catarina<http://w<ww.submarino.com.br/> Figura 7.1 Especificações técnicas de um monitor CRT Freqüência vertical (VSYNC) Quando falamos de freqüência vertical, estamos falando no tempo em que o canhão leva para ir do canto superior esquerdo ao o canto inferior direito da tela. Desse modo, a freqüência vertical indica a quantidade de vezes que a tela toda é percorrida pelo canhão, por segundo. Na figura 7.1, temos a freqüência de 50 Hz onde a tela do monitor é percorrida 50 vezes por segundo. Pixels Agora já sabemos que uma imagem do monitor é possível pela varredura do canhão sobre as linhas com pontos (pixels) do monitor. Mas quantas linhas o seu monitor tem? Uma resolução de por exemplo, 800x600 pixels indica que a tela é uma matriz de 800 pixels no sentido horizontal por 600 pixels no sentido vertical. Quanto maior for a resolução, maior será o espaço visível na tela, pois o tamanho dos pontos diminui.Para uma melhor compreensão,visualize, no anexo 1, ao final dolivro didático, esta figura colorida.<http://www.infowester.com/monitores.php> Figura 7.2 Pixels e resolução da imagem154
  • 148. Comunicação Visual para WebDot PitchO Dot Pitch é o termo utilizado para referenciar a distância entredois pontos da mesma cor. Quanto menor esta distância, melhora imagem. O canhão trabalha com 3 feixes de cores. De nada adianta uma tela grande, com alta resolução - ou seja, muitos pontos RGB - , se esses pontos estiverem muito distantes entre si, gerando uma imagem reticulada. Assim, quanto menor o Dot Pich maior sua capacidade de resolução máxima.Na tela, a camada de fósforo gera a cor correspondente ao feixeatravés da intensidade da corrente elétrica. Cada ponto da telaconsegue representar somente uma cor a cada instante. Cadaconjunto de 3 pontos, sendo um vermelho, um verde e um azul,é denominado tríade. O Dot Pitch é medido em milímetros.Para uma imagem com qualidade, o mínimo recomendado é ouso de monitores com Dot Pitch igual ou menor que 0,28 mm.Observe a figura 7.2 onde a tríade RGB é apresentada mostrandoo mecanismo de medição Dot Pitch. Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. Figura 7.3 Dot PitchVeja como a qualidade da resolução do monitor é afetada peloDot Pich (Exame, 1999): Para um monitor de 15” o Dot Pitch deve ser menor ou igual a 0.28 mm. Este valor é indicado para usar com resoluções 640x480, 800x600 e 1024x768. Valores encontrados nos monitores SVGA são 0.31 mm, 0.28 mm, 0.27 mm, 0.26 mm e 0.25mm. Unidade 7 155
  • 149. Universidade do Sul de Santa Catarina Um valor de 0.31 é considerado regular para monitor de 15”, sendo preferível o valor de 0.28 mm. Valores inferiores a 0.28 mm resultam em uma qualidade de imagem melhor ainda. Existem monitores com Dot Pitch de 0.39 mm. Esses monitores apresentam uma qualidade de imagem bem menor. Você já passou por uma situação onde a tela começa a perder o brilho e de repente volta ao normal? Ou teve aquela sensação da tela tremendo? Isto acontece, porque a imagem em um monitor é formada por um feixe de elétrons que incide sobre os pontos de fósforo, mas o tempo de que os pontos de fósforo brilham na tela é muito breve, a varredura deve ser refeita rapidamente para que o olho humano não perceba a diferença de brilho. Se isto não acontece, seu olho percebe. Este efeito é chamado de efeito Flicker. Este efeito é comum em monitores com freqüência vertical inferior a 65 Hz. Entrelaçados e não-entrelaçados Monitores em modo entrelaçado apresentam uma varredura inicial em linhas ímpares. O feixe eletrônico percorre a primeira, a terceira, a quinta linha da imagem e assim sucessivamente até a penúltima. Depois o feixe passa para a parte superior da tela e percorre a segunda, a quarta, a sexta, a oitava linha até a última linha da tela. Este processo se repete de forma continuada. Este tipo de varredura entrelaçada é interessante por permitir a utilização de resoluções mais altas do que o permitido pelo monitor. Como no caso de monitores SVGA que não conseguem funcionar em uma freqüência horizontal suficientemente alta para exibir a tela com um número muito grande de linhas. Uma desvantagem deste modo é a apresentação de uma imagem ligeiramente embaçada e menos nítida.156
  • 150. Comunicação Visual para WebNúmero de cores Poderíamos nos perguntar agora: mas o que nos leva a perder cores ou ter cores mais ou menos brilhantes dependendo do monitor?Bom, em primeiro lugar a resolução da imagem está diretamenteligada ao número de bits utilizado para representar um pixel. Já onúmero de cores possíveis está relacionado ao número de bits quese utiliza para representar cada pixel.Quando os monitores eram monocromáticos apenas 1 bit eranecessário para representar um pixel (preto e branco). Se vamosusar uma placa que deve suportar 256 cores, é necessário que elatenha 8 bits por pixel. Veja a tabela abaixo: Número de bits por pixel Número de cores 1 2 2 4 4 16 8 256 15 32.768 16 65.536 24 16.777.216Hoje em dia, as combinações mais comuns em placas de vídeo são: 16 bits por pixel (65.536 cores - Hi Color). 24 bits (16.777.216 cores - True Color). 32 bits (4.294.967.296 cores).Quando a placa de vídeo está devidamente configurada, épossível selecionar, pelo sistema operacional, a quantidade decores desejada, desde que a placa de vídeo suporte. O padrão éindicarmos estes números de cores como 32k, 64k e 16M. Unidade 7 157
  • 151. Universidade do Sul de Santa Catarina Mas qual a vantagem em operar em Hi Color e True Color? A fidelidade com que as cores serão representadas! Quando usamos uma figura com 256 cores, são aplicados pixels de cores variáveis formando novas cores, esta técnica é chamada de dithering (ocorre uma mescla para substituir a cor original e preencher a figura). Já com 16 MB as cores utilizadas são as verdadeiras cores da imagem.Para uma melhor compreensão,visualize, no anexo 1, ao final dolivro didático, esta figura colorida. Figura 7.4 - Uso do dithering para simular cores (MARTINEZ, 2003) Se precisamos de alta resolução e um grande número de cores, é necessário que a placa possua uma grande quantidade de memória de vídeo. Atualmente temos placas com 1 MB, 2 MB ou 4 MB de memória de vídeo. O número de cores apresentadas depende da memória e portanto, da placa: Resolução SVGA com 1 MB SVGA com 2 MB SVGA com 4 MB 640x480 16M 16M 16M 800x600 64k 16M 16M 1024x768 256 64k 16M 1280x1024 16 256 16M As placas SVGA, mesmo equipadas com apenas 1 MB de memória de vídeo, são capazes de operar em modo True Color na resolução de 640x480, e em modo Hi Color na resolução de 800x600.158
  • 152. Comunicação Visual para WebMonitor LCD O monitor de cristal líquido é baseado em um líquido polarizador da luz, eletricamente controlado, que se encontra comprimido dentro de celas entre duas lâminas transparentes polarizadoras.Os eixos polarizadores das duas lâminas estão alinhadosperpendicularmente entre si. Cada cela é guarnecida por contatoselétricos que permitem que um campo magnético possa seraplicado ao líquido.Os monitores LCD possuem várias vantagens em relação aosmonitores convencionais, os CRT (INFOWESTER, 2005): Os monitores de cristal são mais finos que os tradicionais, representando uma grande economia de espaço. Possuem uma tela realmente plana, eliminando as distorções de imagem causadas pelas telas curvas dos monitores CRT. Um monitor LCD de 14 polegadas possui uma área de exibição maior do que um CRT de 15 polegadas, um LCD de 15 polegadas, possui a área quase equivalente a um monitor tradicional de 17 polegadas. Os monitores de cristal líquido gastam menos eletricidade. Um monitor tradicional de 14 polegadas consome 90W, um LCD dificilmente ultrapassa a marca dos 40W. Estes monitores emitem uma quantidade muito menor de radiação nociva, sendo que em alguns modelos, praticamente não há emissão.Ao projetarmos um produto temos que pensar em algumasdesvantagens. Alguns exemplos são: a área de visão é maislimitada, o contraste é mais baixo e as resoluções permitidas sãomais limitadas (INFOWESTER, 2005): Nos monitores tradicionais podemos ver a imagem exibida praticamente de qualquer ângulo. Nos LCDs o ângulo de visão é limitado a 45º para a esquerda e 45º para a direita. Qualquer ângulo acima disso fará com que a imagem apareça com as cores distorcidas. Unidade 7 159
  • 153. Universidade do Sul de Santa Catarina O contraste da imagem é mais baixo. Enquanto um monitor CRT possui geralmente um contraste de 500:1, ou seja, uma variação de 500 vezes na emissão de luz do branco para o preto, nos monitores de cristal líquido o contraste varia entre 250:1 e 300:1 prejudicando a qualidade da imagem e a fidelidade das cores; Há também as limitações quanto às resoluções suportadas. Nos monitores CRT existem várias resoluções de tela (320 x 200, 1600 x 1200, 640 x 480, 800 x 600, entre outras) em todas as resoluções não ocorre distorções de imagem. Nos monitores de cristal líquido, cada ponto da imagem é fisicamente representado por um conjunto de 3 pontos (verde, vermelho e azul). Em uma resolução de 1024 x 768, por exemplo, há 3072 pontos horizontais e 768 verticais, cada conjunto de 3 pontos forma um ponto da imagem. Como não é possível alterar a disposição física dos pontos, a resolução máxima fica limitada ao número de pontos que compõe a tela. SEÇÃO 2 – Dicas para aumentar a compatibilidade de seu site X Monitores Quando temos um público tão variado como o da internet, temos que estar preparados para o de diferentes plataformas de hardware (PCs, Suns, Macs, SGIs) que virão a utilizar sua página na internet. Grande foi a evolução da compatibilidade entre plataformas mas, mesmo assim, cada plataforma de hardware tem suas características de espaço de cor, placas de vídeo, tipo e tamanho de monitor, o que de uma maneira ou de outra, acaba alterando o modo como é exibida a cor, o brilho e o contraste. Apesar de muitas vezes estarmos considerando uma mesma plataforma de hardware, não há uma calibração precisa entre monitores. Computadores PC apresentam as imagens tipicamente mais escuras do que os computadores Macintosh ou Silicon Graphics, devido às diferenças dos fatores gama nativos a cada plataforma (WEINMAN, 1996).160
  • 154. Comunicação Visual para WebQuando desenvolvemos um projeto gráfico, procuramostransmitir informações e para isto, muitas vezes, associamos corespróximas a informações diferentes. Estas cores diferentes, podemparecer a mesma cor em alguns computadores confundindo asinformações. Quando projetar, tente observar estas pequenas dicas que tentam evitar problemas decorrentes da compatibilidade de resolução do monitor (ZELDMAN, 2004): Informações importantes não devem ser colocadas sem contraste, em áreas escuras de uma página (em alguns PCs, a exibição desta área pode ser escurecida mais ainda aproximada para a cor preta), escondendo a informação. O mesmo vale para as áreas mais luminosas. Procure projetar as páginas com até no máximo 256 cores. Dê preferência à paleta segura para browsers, isto deve evitar o efeito de dithering no ajuste da palette feita pelo browser. O uso da safe pallete é indicado em: imagens sintetizadas (gif), cor de fundo (background) e cor de texto e links. Observe o tipo de monitor utilizado por seu usuário-alvo, projete as páginas de acordo com a resolução dos monitores de vídeo disponíveis aos usuários. Durante o projeto procure utilizar percentual ao invés de tamanhos fixos, isto deve permitir a adaptação das páginas, a qualquer tipo de monitor de vídeo. Quando possível, projete a página na menor resolução espacial (640x480), consegue-se deixar visíveis todas as informações mais importantes. Isto permite que em situações onde a resolução é aumentada, a informação ainda permaneça visível. Observe que ao projetar para um monitor de 800 pixels o que realmente será apresentado serão 760 pixels. Observe que em um layout típico de 600 pixels de largura, serão 21 cm quando impresso na resolução padrão de 72 pixels por polegada. Evitar rolagem horizontal da tela. Quando utilizamos figuras, o uso da safe pallete torna-se difícil. Neste caso, alerte o usuário com relação às condições de melhor visibilidade da página. Unidade 7 161
  • 155. Universidade do Sul de Santa Catarina SEÇÃO 3 – Uma palavrinha sobre Browsers Quando falamos em compatibilidade, obrigatoriamente pensamos no browser. A primeira dica é você ter diferentes tipos de browser instalados e, antes de disponibilizar o site, você deve testá-lo verificando sua performance e design. Veja a seguir os browsers mais conhecidos: Apple Safari 1. (mac). IExplorer 6 (pc). Mozilla Firebird 0.7 (mac/pc). IExplorer 5.2.3 (mac). Mozilla 1.* (mac/pc/linux). Konqueror 3.1.4 (linux). Netscape 6, 7 (mac/pc). Camino 0.7 (mac). IExplorer 5.01 (pc). Omniweb 5. IExplorer 5.5 (pc). Opera 7 (win). Na internet já encontramos alguns dados sobre a compatibilidade entre eles, como por exemplo, a compatibilidade entre o browser Internet Explorer e o Netscape (MAXTRON, 2005):http://www.laboratoriodeweb.hpg. Browser Java Frames Tabelas Plugins CSS JScript DHTML Gif89 XMLig.com.br/webdesign/ IE 5.5 S S S S S S S S Scompatibilidade.htm IE 5.0 S S S S S S S S S IE 4.0 S S S S S S S S N IE 3.0 S S S S S S N S N IE 2.0 N N S N N N N N N IE 1.0 N N S N N N N N N Netscape 6.0 S S S S S S S S S Netscape 4.7 S S S S S S S S N Netscape 4.5 S S S S S S S S N Netscape 3.0 S S S S N S N S N Netscape 2.0 S S S S N S N S N Netscape 1.0 N N S N N N N N N Figura 7.5 Compatibilidade entre browser Netscape X Internet Explorer162
  • 156. Comunicação Visual para WebÉ importante considerar aspectos da página, como por exemplo ,ouso de tags, muitos browsers possuem tags de HTML próprios, enão do HTML padrão, aspectos proprietários que só funcionamem um tipo de browser, como por exemplo, o <marquee> utilizadono Internet Explorer.Esta situação, faz com que páginas excelentes apareçam comoprojetos principiantes no monitor do usuário. Nosso trabalho,além do projeto também inclui garantir que as páginas sejamvistas corretamente nos browsers. Uma etapa importante para queisto ocorra é a validação do código. Validando o código, vocêverifica a consistência do HTML inclusive para versões futuras. Você pode validar seu código utilizando um editor HTML profissional ou utilizar um programa específico. Que tal experimentar algum deles? O CSE HTML Validator <http://www.htmlvalidator.com/lite/> finalizada a instalação abra o arquivo desejado e clique em F6. Este programa fornece um relatório completo de erros e outros detalhes que podem comprometer o código. Você também pode fazer a validação a partir de um site. Se este for seu caso, a página deve estar hospedada em um servidor. Para este tipo de serviço sugiro: Dr. Watson <http://watson.addy.com/>. O validador do World Wide Web Consortium (Validador oficial - o W3C é o órgão que recomenda as tecnologias usadas na Web) <http://validator.w3.org/>.Além de questões relacionadas ao HTML, também temos aquestão das fontes, em que as mesmas plataformas podem ounão, ter fontes de texto instaladas. Este fato muda a capacidadede exibir as fontes do texto do seu site, existem algumas fontesque são padrão: O Times New Roman é padrão para PC, SUN e Macintosh. O Arial é padrão PC. O Helvética é padrão SUN. Unidade 7 163
  • 157. Universidade do Sul de Santa Catarina Não esqueça: o usuário tem a possibilidade de personalizar características do browser e do próprio monitor, comprometendo o layout gráfico. Neste caso, você só pode garantir que apesar das modificações, a informação sempre esteja visível (páginas em 640x480, fundo e conteúdo com um bom contraste). Síntese Nesta unidade você viu que nem só de um bom projeto depende um site. Muitos são os problemas que podem prejudicar o layout gráfico confundindo ou desagradando o internauta. Foi possível perceber a relevância de testarmos o site em diferentes browsers e resoluções diferenciadas de monitores. Pequenas dicas como o uso da safe palette ou a construção do site em tamanhos menores como 640X480, resolvem grandes problemas para nosso futuro cliente. Se você ficou em dúvida quanto às questões relacionadas a cores, dê mais uma olhadinha na Unidade 2 sobre cores.164
  • 158. Comunicação Visual para WebAtividades de auto-avaliação1. Assinale as alternativas abaixo identificando [V] Verdadeiro ou [F] Falso: a) ( ) Um monitor com freqüência horizontal de 50 kHz possui uma varredura DE 50 mil linhas por segundo. b) ( ) A tela de um monitor CRT possui uma camada de fósforo inserida em celas e guarnecida por contatos elétricos. c) ( ) Na varredura do monitor, o canhão percorre a tela em forma de linhas começando de cima para baixo e da direita para esquerda. d) ( ) A tela de um monitor CRT possui uma camada de fósforo sobre a qual incide um feixe de elétrons. e) ( ) A freqüência vertical indica a quantidade de vezes que a tela toda é percorrida pelo canhão por segundo.2. Assinale a alternativa correta: a) ( ) Dot Pitch é o conceito utilizado para referenciar os pontos do monitor e representa a distância entre dois pontos da mesma cor (RGB). b) ( ) Monitores em modo entrelaçado apresentam uma varredura inicial em linhas pares. c) ( ) O uso do modo entrelaçado permite a utilização de resoluções mais altas do que o permitido pelo monitor, sem prejudicar a nitidez da imagem. d) ( ) O Dot Pitch é medido em milímetros, indica-se o uso de Dot Pitch superiores a 32 mm. Unidade 7 165
  • 159. Universidade do Sul de Santa Catarina 3. Assinale as alternativas abaixo identificando [V] Verdadeiro ou [F] Falso: a) ( ) Para representar um pixel (preto e branco ) é necessário apenas 1 byte. b) ( ) Quando utilizamos 16 bits por pixel podemos representar 65.536 cores mais conhecido como Hi Color. c) ( ) Para usar uma placa que deve suportar 256 cores é necessário que ela tenha 8 bits por pixel. d) ( ) A resolução da imagem não está diretamente ligada ao número de bits utilizado para representar um pixel, mas sim ao Dot Pitch. e) ( ) Quando utilizamos 24 bits por pixel podemos representar 16.777.216 cores, mais conhecido como True Color. f) ( ) A formação de novas cores para preenchimento da imagem é chamada de dithering. 4. Assinale as alternativas abaixo identificando [V] Verdadeiro ou [F] Falso: a) ( ) O uso da safe pallete deve ser considerado visando a performance da página, principalmente em situações onde não é possível prever o monitor do usuário. b) ( ) O contraste utilizado na apresentação de informações não interfere na legibilidade da informação pois o que realmente interessa é a cor utilizada. c) ( ) Realizar o projeto da página na menor resolução espacial (800X600) garante a visibilidade da interface em diferentes tamanhos de monitores. d) ( ) O usuário tem a possibilidade de personalizar seu monitor e o próprio browser. Neste caso, o projetista deve ter como objetivo permitir que sua página seja visível mesmo em condições adversas.166
  • 160. Comunicação Visual para Web5. Assinale as alternativas corretas: a) ( ) O teste em diferentes browsers para garantir compatibilidade é dispensável pois 98% dos usuários fazem uso do IExplorer. b) ( ) Aspectos proprietários do browser devem ser evitados pois podem causar a perda de tabelas e tags. c) ( ) A fonte utilizada em um site é um fator que muito aborrece o usuário, oArial é padrão SUN e a fonte Helvética é padrão SUN. d) ( ) O Browser IE 4.0 não consegue apresentar código XML. e) ( ) O Browser IE 2.0 e Netscape 6.0 apresentam problemas na apresentação de frames.Saiba mais ZELDMAN, Jefrey. Projetando web sites compatíveis. New Riders, 2004. Compatibilidade Web Design. <http://www.laboratoriodeweb.hpg.ig.com.br/webdesign/compatibilidade.htm> Unidade 7 167
  • 161. 8UNIDADE 8Conteúdo Objetivos de aprendizagem Estar apto a identificar claramente os diferentes temas de sites existentes e suas características. Estar sensibilizado para o uso de textos breves, coerentes e inteligíveis. Seções de estudo Seção 1 Os parques temáticos da Web Seção 2 Escrevendo na Web
  • 162. Universidade do Sul de Santa Catarina Para início de conversa Muitas home pages são criadas pelos motivos errados, sem propósito claro e, em muitos casos, simplesmente porque a concorrência já tem site. Quando para o cliente não é claro, o motivo pelo qual está solicitando sua criação, resta ao projetista definir claramente pelo menos, o tema do mesmo. Podemos dizer que o sucesso do site está ligado ao seu tema: ele indica o formato da apresentação da informação e da organização do conteúdo. Colocar o negócio do cliente na internet é fácil, a parte difícil é acertar seu conteúdo, de forma que o mesmo atraia repetidamente clientes e visitantes. Os visitantes querem saber duas coisas de imediato: o propósito do site e se ele contém as informações que busca. Para descobrir isto, não mais do que meio minuto será o tempo dispensado na busca. A partir desta constatação, você deve estar ciente que são fundamentais em seu projeto, a clareza do texto e a forma como você irá fornecer esta informação. Nesta unidade você vai perceber que a facilidade da leitura em um site passa pelo aprimoramento no estilo da redação, simplicidade do texto e brevidade da informação, o que não significa cortes em conteúdo, mas uma escrita mais elaborada e clara. Então? Você está pronto para entrar neste parque temático que é o conteúdo de um Website?170
  • 163. Comunicação Visual para WebSEÇÃO 1 – Os parques temáticos da WebTodo mundo quer estar na Internet, mas o motivo, poucos sabem.O fato é que as empresas se sentem arcaicas se não tiverem o seuregistro no domínio WWW (RADFAHER, 2004).Quando olho para a oferta de páginas existentes, não possodeixar de pensar em grandes parques temáticos. Você pode olhar um site e imediatamente classificá-lo em uma categoria.Fazendo analogias pense: o parque da Disney, deve ter sido umdos primeiros a ser criado. Os que se seguiram imitaram questõesde organização e segurança que eram comprovadamente, soluçõesde sucesso. Inovações foram implementadas para questões não-resolvidas ou específicas. Quando você projeta um site, é importante que detectar qual é o tema proposto. Assim, será possível aprender com a experiência do que já existe disponível na rede.Partindo deste princípio, ao se deparar com um novo projetopense na forma de comunicar as necessidades da empresacontratante ao seu público-alvo, mas para iniciar observe que: Na unidade 2 você estudou o processo de design. A partir desse conteúdo, toda apresentação presente em um site é direcionada pelos objetivos do site, pelos futuros usuários e pelo apelo geográfico que se pretende atingir. Outro fator importante a considerar é o tema do site. O tema permite em um relance que identificar a possível estrutura, o tipo de informação que deve ser apresentada e o tempo em que o cliente irá permanecer no site (o que influencia profundamente o design e a apresentação do texto). Unidade 8 171
  • 164. Universidade do Sul de Santa Catarina Sites são classificados em categorias, por diferentes autores, observando diferentes crittérios. Nesta unidade, vamos relacionar algumas categorias com base nos temas utilizados pelos sites: Sites institucionais; Sites promocionais; Lojas virtuais; Sites educativos; Sites de profissionais; Sites de comunidades; Sites de serviços; Sites de referência ; Sites de entretenimento; Sites de notícias. Sites institucionais O site institucional divulga a empresa, o faturamento, o histórico, a abrangência mundial. Este tipo de site não realiza vendas, deve ser oferecido ao leitor apenas informações sobre a empresa. Apresente informações como: produtos desenvolvidos, notícias da empresa, divulgação de balanço, relatórios e lista de revendedores. Você também pode usar o site como um mecanismo de comunicação com clientes e funcionários. O site institucional é normalmente um portfolio da empresa, mas algumas empresas possuem produtos tão fortes (conhecidos, líderes de venda) no mercado e de grande apelo público, que geram um site institucional específico para o produto, é o caso do Nescau produto da empresa Nestlé que possui um site específico.172
  • 165. Comunicação Visual para Web <www.garoto.com.br> Figura 8.1 - Site Institucional da GarotoLojas virtuais As lojas virtuais concentram a comunicação em produtos, características, benefícios e venda dos produtos.Este tipo de projeto pode ser dividido em segmentos: Lojas virtuais como Submarino e Amazon não apresentam a estrutura física visível para o cliente. Realizam a venda de produtos apenas pela internet. Ao projetar o site considere cuidadosamente, a credibilidade do site, principalmente em questões relacionadas à segurança, alta qualidade na informação e imagens do produto, divulgação clara de mecanismos de contato com a empresa. Para este tipo de site a credibilidade é fundamental, tendo em vista a loja ser totalmente virtual. Unidade 8 173
  • 166. Universidade do Sul de Santa Catarina Lojas virtuais varejistas é o caso de sites como Americanas, Lojas Colombo. São conhecidas do grande público, possuindo estruturas físicas consolidadas, sendo “normalmente” conhecidas do internauta. Lojas virtuais de venda direta possuem a venda vinculada a uma consultoria, é o caso de empresas como a Natura e a Avon.<www.natura.com.br> Figura 8.2 - Loja Virtual de venda direta – Natura Lojas virtuais de fabricantes propõem a venda de produtos em suas lojas a um preço menor, realizam diversos tipos de serviço (compra, financiamento, etc.) e possuem estruturas físicas que podem ser visitadas pelo cliente. Nesta categoria, temos sites de empresas como o site da Chevrolet e Renault.<www.renault.com.br> Figura 8.3 - Loja Virtual de Fornecedor - Renault174
  • 167. Comunicação Visual para WebEm sites onde o tema é o de uma loja virtual, o projeto possuium ponto crucial: a navegação e a busca.Sites de comércio eletrônicoSites de comércio eletrônico devem ter projetos simples,com textos simples, e uso de navegação na forma de abas emenus. Observe que no site da figura 8.4 a forma de navegaçãoprivilegiada é o uso de menus horizontais: <www.marisa.com.br> Figura 8.4 - Exemplo de uso de menus horizontaisObserve o exemplo de abas na figura 8.5: <http://www.amazon. de/exec/obidos/tg/ browse/-/301128/302- 7820160-7932846?site- redirect=de> Figura 8.5 - Exemplo uso de abas Unidade 8 175
  • 168. Universidade do Sul de Santa Catarina Dicas: Evite o número excessivo de abas que podem criar confusão (+ou – 8), também evite o uso da barra de rolagem, é bem provável que o conteúdo abaixo da pagina visível não será lido. Um ponto fundamental é prover ferramentas de busca inteligentes o suficiente para indicar de forma gentil, quando o resultado da busca não existe. Se isto acontecer, devem ser oferecidas sugestões ao cliente para que ele tenha sucesso em sua interação. Se o produto solicitado não existe, a ferramenta deve apresentar o produto oferecido por outros fornecedores e com características similares. É fundamental deixar claro ao comprador, sua posição dentro do processo de compra tornando-o seguro da operação. Sites de profissionais Este tipo de site divulga serviços prestados por autônomos e currículos. Sites de serviços São endereços de consultoria e venda de serviços específicos. Concentram grandes volumes de informação, tentando mostrar ao internauta a necessidade de contratação de seus serviços.<www.rmauditoria.com.br> Figura 8.6 - Site de oferta de serviços – RM Auditoria Contábil 176
  • 169. Comunicação Visual para WebSites de entretenimentoOs sites de entretenimento são oferecidos a um leitor que muitasvezes não possui motivação e interesses claramente focalizado.Este público precisa ser cativado rapidamente por imagens,gráficos e textos atrativos. Se não for assim, rapidamente ele iráprocurar estímulo visual em outro site.Ao projetar sites voltados ao entretenimento, observe o estilo deinteração e projeto da concorrência (aprenda com o que já existe).Apesar de serem quase, obrigatórios, o excessivo uso de banners,animações impróprias e pop-ups não-solicitados interferem nobom projeto e na leitura do site de entretenimento. <http://www. jogossimples.com.br/> Figura 8.7 - Site de entretenimento – Jogos SimplesSites promocionaisSão sites curtos com promoções, concentram a informação empoucas telas, chamando sua atenção, desviando o curso naturalda sua leitura. Este site deve permanecer apenas no período dapromoção. Unidade 8 177
  • 170. Universidade do Sul de Santa Catarina Site da Nestlé “Nestlé e Você no Show do Milhão”. Sites educativos Sites educativos visam transmitir informações para educar o público-alvo. Utilizado por instituições e associações. Dentro da classificação “educativos” podemos citar sites de treinamento, educação propriamente dita e educação continuada. Sites de treinamento devem possuir uma estrutura narrativa linear com poucas possibilidades de divagar do fluxo central da apresentação. O número de links deve ser cuidadosamente projetado evitando desviar o usuário da mensagem central do site. Uma técnica interessante neste tipo de site é restringir as funções de navegação para os links Anterior e Posterior. Em sites de treinamento, você deve orientar seu leitor do tempo de duração da sessão. Sites de Educação são construídos a partir de uma forte narrativa central. Oferecem tipicamente mais oportunidades de perseguir desvios interessantes dos temas principais do Website. A informação aparece de forma mais sofisticada e profunda do que em sites de treinamento. O uso de links pode ser fonte de distração neste tipo de site. Se você quer prover links para outras páginas de referência, considere a possibilidade de colocá-los em uma página separada do corpo principal. Não esqueça de proporcionar uma versão que permita impressão do material, consolidando páginas separadas em uma só página. Sites para educação continuada não podem considerar o uso de uma estrutura direcionada de ensino, elas são enfadonhas para este usuário. Privilegie o uso de hiperlinks. O usuário típico (acadêmico ou funcionário de uma corporação) é normalmente um profundo conhecedor da área que é foco deste tipo de site. A web pode ser excelente para este treinamento, em que o178
  • 171. Comunicação Visual para Web usuário busca um tópico específico. Flexível, interativo e uma estrutura de design não-linear são ideais para este leitor, portanto, é difícil predizer exatamente quais tópicos podem interessar ao leitor. O design deve permitir o acesso rápido a uma quantidade grande de informações, com links para material adicional, dentro do próprio site e na web. O tempo de uso do site costuma ser curto, pois o leitor está normalmente sob pressão. Opções de impressão são fundamentais.Sites de comunidadesSão grupos de discussão sobre temas específicos. Formam espaçosmaleáveis controlados pelos próprios usuários.Sites de referênciaEste tipo de site permite ao usuário entrar no site, encontrar oque precisa e imprimir facilmente ou baixar em sua máquina.É o caso típico de enciclopédias virtuais. A estrutura costumaser não-linear. A estrutura de menu precisa ser cuidadosamenteorganizada para suportar a busca e retorno fácil de download dearquivos, tendo boas condições de impressão. Considere o uso debuscas inteligentes com mais parâmetros. O tempo de contato doleitor é breve. <http://www. enciclopedia.com.br/> Figura 8.8 - Site de referência – Enciclopédia Digital Unidade 8 179
  • 172. Universidade do Sul de Santa Catarina Sites de notícias Sites de notícias são normalmente adaptados ao design de jornais da mídia impressa. Procurar uma informação em um site jornalístico e a eficiência em que isto ocorre depende de três princípios: orientação, informação e ação. A orientação refere-se às dicas de navegação oferecidas ao usuário em sua movimentação através das páginas sem problemas. A orientação permite que o usuário esteja ciente do conteúdo que irá encontrar. Um exemplo de orientação é deixar claro já na home page qual o objetivo do site e a forma como está organizada. Outro ponto importante na orientação é o uso de um projeto enxuto e coerente de forma a fazer sentido para o usuário. Você pode fornecer informação por meio de textos e gráficos. Esta informação deve ser compreensível à primeira vista para o usuário e principalmente deve estar correta, a informação incorreta abala a credibilidade do seu site. Como a internet permite uma troca de ações entre site e usuário, o projetista deve ter em mente qual ação que deseja provocar no leitor quando ele compreende o conteúdo. Isto significa que o usuário pode efetuar uma compra, assinar uma lista de discussão ou clicar em um link que lhe forneça mais informações sobre o produto.<http://oglobo.globo.com/online/default.asp> Figura 8.9 - Site de Notícias – O Globo180
  • 173. Comunicação Visual para WebNunca despreze em um sites de notícia tempo de carregamento e oestilo de navegação oferecido, pesquisas demonstram que estes doisfatores são fundamentais para a satisfação do usuário com o site. O conteúdo jornalístico na internet é um assunto muito interessante, você pode saber mais sobre ele acessando os artigos publicados no site “Editando para Web de Estilo de Redação Jornalística na Internet” os artigos estão disponíveis na Midiateca, nos links: Escrevendo para a Internet e Microconteúdos.Considerações geraisSites corporativos, de treinamento e educacionais possuemum público que sabe o que esperar e o que irá encontrar no site.Quando este tipo de site é visitado o internauta o faz com umobjetivo específico a ser atingido.Já sites de e-commerce e entretenimento, possuem a duplamissão de motivar usuários casuais atraindo-os a ficar o maiortempo possível no site. Por outro lado, também deve promover oacesso rápido para usuários experientes no site.Um aspecto fundamental é estar ciente de que, para montar umsite de sucesso, não se deve contar apenas com recursos visuaiscriados por animações e imagens; pelo contrário, eles podeminclusive afugentar o usuário.Para atingirmos este objetivo é necessário um trabalho profundoe sustentável, baseado na combinação de conteúdo, linguagem,conteúdos adaptados ao tema do site e uma oferta de estímulosvisuais sofisticados, onde o usuário encontre rapidamente e deforma eficaz, aquilo que procura. Unidade 8 181
  • 174. Universidade do Sul de Santa Catarina Tente encontrar um telefone de contato no site do Banco Santander, ou o telefone 0800, para cancelamento de uma linha no site da Brasil Telecom. Você conseguiu fazer isto em 1, 2, 5, 10 minutos ou não encontrou? A partir deste resultado você acredita que, as características descritas no parágrafo anterior, foram atingidas pelo site da Brasil Telecom? Reflita sobre essa questão e tente listar os fatores que contribuíram ou não para encontrar as informações desejadas. SEÇÃO 2 – Escrevendo para Web Vários estudos confirmam que o usuário ao chegar a uma home page desconhecida, ele olha para a principal área de conteúdo da página, buscando por títulos e outras indicações do teor da página. Depois desta avaliação inicial é que toma a decisão de sair em busca de outros sites relacionados para visitar. Nielsen (2000) nos oferece algumas diretrizes para escrever para a Web: Ser breve. Não escrever mais do que 50% do texto que escreveria para tratar do mesmo assunto em uma publicação impressa. Escrever sempre tendo como foco a facilidade de leitura do texto. Usar parágrafos curtos, subtítulos e listas com marcadores. Fazer uso de hipertextos para segmentar informações longas.182
  • 175. Comunicação Visual para WebTextos brevesLer na tela de computador é cerca de 25% mais lento do que lerno papel. O usuário sente-se desconfortável na leitura de textoslongos. Outro aspecto importante, é o de que devemos evitar arolagem da tela (barras de rolagem), os usuários não gostam derolar a tela.Veja a seguir, algumas dicas importantes (NIELSEN, 2000): Brevidade não significa falta de personalidade no texto. O usuário aprecia uma certa dose de humor e atitude. Cuidado com apelos de marketing, isto desagrada o usuário. Utilize-se de links para corroborar fatos que estão sendo apresentados no texto, isto traz credibilidade ao site. Evite começar uma página com mensagens de boas- vindas, elas normalmente não são lidas.Edição de textosA credibilidade de um site é duramente atingida, quando ointernauta encontra erros ortográficos ou mesmo de concordânciano site. O uso do corretor ortográfico é imprescindível. Oemprego correto da linguagem, evita confusões de interpretação.Facilidade de leituraO usuário da Internet é por natureza, impaciente, normalmentenão lê completamente, textos contínuos. A leitura é feita pelaescolha de palavras-chave, sentenças e parágrafos de interesse,enquanto partes inteiras de texto são “puladas” por não lheinteressarem.Estes fatos são comprovados cientificamente, Nielsen (2000),sugere que seja facilitada a leitura do usuário: Artigos devem ser estruturados com dois ou três níveis de títulos (título geral da página e títulos e subtítulos, se apropriado). Unidade 8 183
  • 176. Universidade do Sul de Santa Catarina Os títulos devem ser significativos (o título deve indicar do que se trata a página ou mesmo a seção). Utilizar listas com marcadores para quebrar o fluxo de blocos de texto uniformes. Palavras consideradas importantes no texto, devem chamar a atenção. Podemos obter este efeito utilizando cor. Cuidado para não utilizar como destaque as cores utilizadas em links. Vamos dar uma olhadinha na página de abertura do site da empresa Big. Ela leva o internauta a pensar que o site trata apenas a venda de eletrodomésticos. A palavra eletrodomésticos (parte do título), aparece em destaque, sendo inconsistente e pouco significativa, considerando-se as funcionalidades do site que se propõe à venda de todos os produtos existentes no supermercado.<http://www.big.com.br/> Figura 8.10. O objetivo do site Escrever textos para Web é uma arte, ser breve não significa omitir informações.184
  • 177. Comunicação Visual para WebPara que isto fique mais claro, vamos dar uma olhada natabela a seguir. O mesmo texto publicitário sobre o estado deNebraska, foi escrito de 5 formas diferentes. O texto é um estudocomparativo relacionado ao uso de parágrafos de texto, foiaplicado para avaliação a uma amostra de leitores:TABELA 8.1. Facilidade da Leitura pelo aprimoramento no estilo da redação (NIELSEN, 2000) Nebraska é repleto de atrações reconhecidas internacionalmente que atraem grandes multidões de pessoas todos os anos. Em 1996 alguns dos locais mais visitados foram o Fort Texto promocional Robison Stae Park (355.000 visitantes), Arbor 0% melhor Lodge Stae Historical Park & Museum (100.000), Carhenge (86.598), Sthur Museum of the Prairie Pioneer (60.002). Em 1996, uma das atrações mais visitadas de Nebraska foram o Fort Robison Stae Park, Arbor Texto conciso Lodge Stae Historical Park & Museum, Carhenge, e 58% melhor Sthur Museum of the Prairie Pioneer. Nebraska é repleto de atrações reconhecidas internacionalmente que atraem grandes multidões de pessoas todos os anos. Em 1996, alguns dos locais mais visitados foram: Layout fácil de ler Fort Robison Stae Park (355.000 visitantes); 47% melhor Arbor Lodge Stae Historical Park & Museum (100.000); Carhenge (86.598); Sthur Museum of the Prairie Pioneer (60.002). Nebraska tem diversas atrações. Em 1996 alguns dos locais mais visitados foram o Fort Robison Stae Park (355.000 visitantes), Arbor Lodge Stae Linguagem objetiva Historical Park & Museum (100.000), Carhenge 27% melhor (86.598), Sthur Museum of the Prairie Pioneer (60.002). Em 1996, seis dos locais mais visitados de Nebraska foram: Versão combinada (utiliza os três Fort Robison Stae Park; aprimoramentos no Arbor Lodge Stae Historical Park & Museum ; estilo da redação) Carhenge; Sthur Museum of the Prairie Pioneer. Unidade 8 185
  • 178. Universidade do Sul de Santa Catarina Qual das propostas você acha que apresenta maior facilidade de leitura? Você concorda com o resultado da pesquisa? Reflita sobre essa questão e registre sua opinião no espaço a seguir. Quando projetamos um site que propõe a venda de produtos, deve haver a preocupação em concentrar a atenção do usuário em alguns produtos relevantes. Ou seja, não devemos mostrar todos os produtos, mas chamar a atenção do usuário para alguns. O uso de listas codificadas de produtos, são inúteis para usuários inexperientes no produto que se pretende vender, assim como descrições abreviadas ao lado das fotos. Observe o site apresentado a seguir. Qual a diferença entre o vídeo 730 e o 4628 além do preço? Não existe nenhum tipo de descrição do produto que possibilite esclarecer dúvidas do usuário. Por outro lado, os produtos não apresentam nenhum tipo de ordem quanto a sua apresentação. Informações como: fabricante, tamanho ou resolução poderiam apoiar a escolha do usuário.<http://www.rak.com.br> Figura 8.11 Apresentação de informações relevantes186
  • 179. Comunicação Visual para WebLinguagem simplesQuando escrevemos para Web é aconselhável apresentarmosinicialmente, o material mais importante, usando o princípio dapirâmide invertida. Como a maioria dos usuários, apenas passaos olhos por um texto, Nielsen (2000), destaca que é importante Pirâmide invertida é umconsiderar os seguintes aspectos: jargão da área jornalística utilizado para identificar Começar cada página com a conclusão; um formato de texto onde a parte considerada Manter apenas uma idéia por parágrafo; mais importante da notícia ou da informação Limitar o uso de metáforas principalmente, em títulos, deve ser apresentada no o usuário pode interpretar de uma forma totalmente primeiro parágrafo. Mais distorcida justamente por sua brevidade. informações sobre o uso da pirâmide invertida você vai encontrar na páginaUma dica importante é manter o conteúdo de mensagens de texto da Unesp <http://wmail.simples e construtivas. Além de apontar a existência do problema faac.unesp.br/~pcampos/devem ajudar o usuário a superá-lo. noticia.htm>A mensagem de erro apresentada na figura 8.11 é resultado deuma busca sem sucesso. Isto não fica claro ao usuário, pois nãosão apresentadas sugestões, tampouco, uma mensagem indicandoque a busca foi mal-sucedida. <http://www.websom. com.br> Figura 8.12. Mensagens de erro com textos inconsistentes Unidade 8 187
  • 180. Universidade do Sul de Santa Catarina Divisão de páginas em partes Ao escrevermos textos breves, não devemos sacrificar a profundidade do assunto. É possível manter a profundidade de um texto relativamente extenso, fazendo uso de links de hipertexto, dividindo as informações em módulos. Informações secundárias podem ser alocadas em páginas secundárias, e mesmo informações complementares (que não sejam de interesse geral) podem ser disponibilizadas em links complementares. Ao usar o hipertexto tenha os seguintes cuidados (NIELSEN, 2000): não faça fluxos contínuos de informação que continuam na segunda página; divida o conteúdo em partes coerentes, cada uma monopolizando um determinado assunto; o internauta deve poder selecionar somente o tópico de interesse para download; garanta que os links mais importantes estejam visíveis sem necessidade de rolagem. Um exemplo de problema de reutilização da mídia impressa na Internet; podemos ver na figura a seguir. A revista Scientific American Brasil exige do usuário a rolagem de 9 páginas para a leitura completa do artigo. Ao oferecermos o conteúdo na Web; o melhor conselho para artigos longos é reescrevê-los. Se for impossível subdividi-lo, prefira a rolagem ao oferecimento de duas páginas, do tipo próxima página/página anterior.188
  • 181. Comunicação Visual para Web <http://www2.uol.com.br/sciam/> Figura 8.11. Textos longos oprimem a leitura pelo usuárioTítulos de páginaNinguém escreve na Web para não ser encontrado. Quandoutilizamos mecanismos de busca, o site passa a existir na formado título da página. Ao salvar a home page em seu bookmarks ouna listas de históricos ela é novamente o título da sua página.O título deve: possuir palavras suficientes para ser autônomo e significativo; conter duas ou no máximo, seis palavras; com 40 a 60 caracteres deve-se conseguir explicar o que o internauta vai encontrar no site; Unidade 8 189
  • 182. Universidade do Sul de Santa Catarina páginas diferentes precisam de títulos diferentes, quando visitamos, por exemplo, 5 páginas com o mesmo título e desejamos voltar especificamente para a segunda, a ação se torna um problema; artigos definidos e indefinidos do titulo devem ser eliminados, pois algumas listagens de títulos podem ser colocadas em ordem alfabética. Um exemplo inadequado é o do site de traduções do Alta Vista. O título do site na lista de bookmarks é “ O Serviço de Tradução Babel Fish do Alta Vista”; trocadilhos ou títulos engraçadinhos devem ser evitados; a primeira palavra do título deve ser importante e conter informações (NIELSEN, 2000). Legibilidade Em um Website não existe nada mais catastrófico do que a impossibilidade do usuário ler o texto. Podemos citar algumas regras para evitar esta catástrofe: Utilizar cores com alto contraste entre texto e fundo (revise a Unidade 5). Procurar utilizar fundos de cores lisas ou padrões sutis (revise a Unidade 5). Usar fontes de tamanhos suficientes para que as pessoas possam ler o texto. Evitar o uso de artifícios como: mover, piscar ou mesmo o uso de zoom. Justificar o texto à esquerda. O ponto de partida constante à esquerda faz com que a leitura ocorra de forma mais rápida. Textos com fontes pequenas devem ser utilizados sem serifa (ex: Verdana). Fontes maiores do que 10 podem ser utilizadas com serifa (adequando-se ao site).190
  • 183. Comunicação Visual para Web Utilizar tipologia mista (Maiúsculas e Minúsculas). O olho reconhece com maior dificuldade textos em CAIXA ALTA retardando em 10% o tempo de leitura relacionada à tipologia mista (NIELSEN, 2000).Documentação on-lineQuando falamos em documentação, imediatamente lembramosa impaciência do internauta na leitura. Entretanto, em muitassituações o usuário necessita de auxílio, interações sofisticadas oucomplexas exigem ajuda.Para produzir uma documentação on-line consistente, procureseguir as seguintes recomendações: facilite as buscas em páginas de documentação; seja generoso no uso de exemplos, o internauta tende a seguir exemplos e modificá-los de acordo com as suas próprias circunstâncias; escreva as instruções de forma orientada (passo a passo); utilize links de hipertexto para vincular conceitos difíceis; seja breve (NIELSEN, 2000).Um exemplo positivo é o site <www.google.com.br>. O site ofereceem sua página de busca, um manual on-line que permite aointernauta conhecer melhor os recursos da ferramenta. <www.google.com.br> Figura 8.12 Uso da ajuda para facilitar a interação Unidade 8 191
  • 184. Universidade do Sul de Santa Catarina Que tal ler um artigo interessante? Na Midiateca você vai encontrar o artigo “Como criar um site campeão”. Síntese Nesta unidade você foi confrontado com verdades históricas da escrita na Web. Muitos dos produtores de conteúdo fizeram sucesso ,a partir de tentativas e adaptações vindas de outras mídias, algumas se mostraram positivas e foram copiadas por seguidores, criando uma cultura na Web. Atualmente, discute- se arduamente a forma de escrever o conteúdo procurando a melhora da leitura. Finalizada a unidade, podemos afirmar a importância da divisão do conteúdo em partes, facilitando a interpretação e coerência do texto, do uso de títulos consistentes como o conteúdo da página, a identificação de pontos importantes do texto que devem ser evidenciados na apresentação e o privilégio da brevidade da informação.192
  • 185. Comunicação Visual para WebAtividades de auto-avaliação1. Relacione as características abaixo com as possíveis categorias de site apresentadas: (A) Site promocional. a) ( ) Neste tipo de site é importante a apresentação de produtos desenvolvidos (B) Site educativo. pela empresa, notícias da empresa, divulgação de balanço, relatórios, lista de (C) Site de Loja Virtual. revendedores, etc. (D) Site de Entretenimento. b) ( ) O site procura transmitir informações com (E) Site Institucional. o intuito de educar o público-alvo. (F) Site de Referência. c) ( ) São sites de pouca duração que concentram a informação em poucas telas chamando sua atenção. Muito utilizados em campanhas. d) ( ) São sites voltados para um público que, normalmente não possui uma idéia exata do que procura, sendo necessário cativá- lo no primeiro momento da interação. e) ( ) O site concentra suas ações na venda de produtos. f) ( ) São sites que fornecem material de referencia sendo que, o projetista deve se preocupar com questões relacionadas à busca e a performance do site.2. Em sites educativos, é correto afirmar (mais de uma alternativa correta): a) ( ) O tempo de acesso ao site, no caso da educação continuada é longo. b) ( ) Existem demandas diferenciadas para este segmento. Podemos projetar sites de treinamento em que a estrutura utilizada deve ser a linear, Site de educação deve proporcionar narrativas centrais, possibilitando ao aluno a oportunidade de desviar seu interesse do tema central do site, e sites de educação continuada que devem privilegiar uma estrutura narrativa linear. Unidade 8 193
  • 186. Universidade do Sul de Santa Catarina c) ( ) O site para educação continuada deve ser flexível com uma estrutura que permita o acesso a um ponto de interesse do aluno de forma não-linear. d) ( ) Em sites de educação, treinamento e educação continuada, deve sempre se considerar opções para a impressão do material. e) ( ) Em sites de treinamento deve-se restringir ao máximo as funções de navegação em função do tempo de duração de suas sessões, o tempo do usuário no site deve ser imersivo e sem dispersão. f) ( ) O site para educação continuada deve ser rico no apoio à interação, tendo em vista que o usuário típico deste site, não domina a área foco do assunto abordado. g) ( ) Em sites de educação, deve-se disponibilizar links de referência, de forma abundante para outras sites permitindo a ampliação dos conhecimentos pelo aluno. 3. É correto afirmar que para se obter um texto legível na internet: a) ( ) O uso de fundos com textura é excelente para uso em textos longos. b) ( ) Deve-se utilizar cores com alto contraste entre texto e fundo. c) ( ) Observe o uso de fontes de tamanho suficiente para que as pessoas possam ler o texto. d) ( ) O uso de blinks é um ótimo recurso para chamar a atenção do usuário para partes do seu texto. e) ( ) Justifique o texto de forma que, a margem direita seja de 2,5 cm no decorrer do texto. f) ( ) Faça uso da tipologia mista.194
  • 187. Comunicação Visual para Web4. Assinale com [V] Verdadeiro ou [F] Falso: a) ( ) Uma forma de construir um texto relativamente longo é utilizando um sistema de hipertexto, dividindo a informação em módulos. b) ( ) Evite artigos definidos e indefinidos no título. c) ( ) Procure dividir os módulos em assuntos. Misturando os assuntos em um mesmo módulo, você confunde o leitor. d) ( ) O uso do mesmo titulo para mais de uma página apóia o processo de memorização do assunto. e) ( ) Procure disponibilizar os links em pontos inferiores da página (acessíveis com a barra de rolagem). Desta forma, não interferem na leitura do texto e não distraem o leitor. f) ( ) O título deve ser claro , o número de palavras utilizadas não deve ser considerado como um fator fundamental. g) ( ) O usuário aprecia uma dose de humor. O uso de títulos engraçados torna a interação mais agradável ao internauta. h) ( ) Faça com que a primeira palavra do título seja importante e contenha informações.Saiba maisCANTARELLI, Elisa Maria Pivetta. Aplicações Web. URI-Universidade Regional Integrada do Alto Uruguai e das Missões. Unidade 8 195
  • 188. 9UNIDADE 9Imagens Objetivos de aprendizagem Reconhecer características dos diferentes padrões de imagens digitalizadas. Aprenderá a escolher o tipo de arquivo adequado ao tipo de imagem. Reconhecer estratégias e ferramentas para criar imagens. Seções de estudo Seção 1 Imagens Seção 2 Tipos de arquivos Seção 3 Digitalizando imagens Seção 4 GIMP
  • 189. Universidade do Sul de Santa Catarina Para início de conversa Que as imagens e gráficos são extremamente atrativos todos nós sabemos. Mas também é verdade que toda a atratividade do site é destruída quando a imagem não parece real ou nos parece “borrada”. Pior ainda se tivermos que esperar vários minutos até que o download esteja finalmente concluído. Por que as imagens são gravadas em GIF, JPEG e PNG? Qual a diferença entre eles? Qual é a melhor solução para ser usada no meu site? Nesta unidade vamos esclarecer estas dúvidas falando sobre formatos, mecanismos de compressão e suas principais características. Você também estudará uma ferramenta que permite a editoração gráfica e poderá utilizar livremente sem nenhum custo. Curioso? Então mãos à obra! Vamos ver o que nos reserva esta unidade! SEÇÃO 1 – Imagens Quem nunca ouviu a famosa frase: “Uma imagem fala mais do que 1000 palavras?”<http://www.clicrbs.com.br/jornais/dc/jsp/default.jsp?uf=2&local=18&section=Home Figura 9.1 - Queda de Mike Tyson(Junho/2005> A imagem a direita é do pugilista Mike Tyson nocauteado no sexto assalto por Kevein McBride. Você consegue imaginar quantas palavras seriam necessárias para transmitir esta cena?198
  • 190. Comunicação Visual para Web Mesmo que o conteúdo seja cuidadosamente construído o impacto da imagem é infinitamente maior.Mas apesar de produzir um efeito cognitivo excelente, umaimagem também pode ser a fonte de irritação, frustração e erros.É nesta hora que o uso de imagens ao invés de promover o sitepode ser uma forte aliada em sua destruição. Para começarmos o assunto, é importante que você saiba que no universo da imagem digital existem dois tipos de imagem: a imagem vetorial e imagem bitmap.Imagem vetorialUma imagem vetorial é na verdade, uma quantidade de cálculosmatemáticos que representarão a nossa imagem. Então você podedizer que a imagem vetorial é uma imagem gráfica que se utilizade equações matemáticas para definir figuras e preenchimento. Quando usamos uma imagem vetorial podemos aumentar ou diminuir a imagem sem que ocorra perda de qualidade, isto acontece porque, quando redimensionamos a imagem, os cálculos são refeitos e a imagem aparece perfeita.Arquivos de imagens vetoriais são normalmente pequenos.São comuns as seguintes extensões para arquivos de imagensvetoriais: WMF (Windows Metafile). DWG, DXF (AutoCAD). CDR (Corel Draw). AI (Adobe Illustrator). Unidade 9 199
  • 191. Universidade do Sul de Santa Catarina Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura Figura 9.2 - Imagem vetorial colorida. Saiba mais Para verificar este efeito do redimensionamento perfeito produzido por uma imagem vetorial, visite o site <http://www.logotypes.ru/default_e.asp>. Ele tem centenas de logotipos vetoriais disponíveis para download. Ficou interessado em gerar imagens vetoriais? Existe disponível um software livre chamado Inkscape <http://www.inkscape.org> que permite a editoração eletrônica de imagens e documentos. O Inkscape trabalha com formatos SVG (Scalar Vectorial Graphics). Bitmap Um bitmap é uma imagem organizada em linhas e colunas formadas por pixels. Podemos dizer que em um bitmap a imagem é formada por uma matriz de pixels onde cada um tem a sua própria cor. Os dados são armazenados diretamente em uma memória de vídeo ocupando um espaço maior que de uma imagem vetorial. Além disso, sua resolução fica comprometida caso a imagem seja redimensionada. Quando imprimimos (impressora jato de tinta) uma imagem vetorial, na verdade é convertida e é impresso um bitmap adequado às características da impressora. O bitmap é utilizado em imagens digitalizadas (fotografias ou mesmo em imagens escaneadas).200
  • 192. Comunicação Visual para WebSão comuns as seguintes extensões para arquivos de imagens bitmap: BMP (Windows Paint). CPT (Corel Photopaint), TIF (usado em editoração). PCX (Paintbrush), PSD (Adobe Photoshop). GIF e JPG (usados na Internet).O logotipo do seu cliente aparece serrilhado na página? Issoacontece porque a imagem está no formato bitmap, isto nãoaconteceria se a imagem fosse vetorial. Saiba mais Você gostaria de converter o arquivo bitmap em um arquivo vetorial? Na Midiateca você vai encontrar um passo-a-passo escrito por Alex Falcão usando a ferramenta “Mão livre” do Corel Draw , ele vai lhe apresentar a possibilidade de converter a imagem, o titulo é Vetorizando à mão.Compressão de arquivosQuando você trabalha com arquivos de imagens existe uma sériede fatores que influencia no tamanho do arquivo: a largura, aaltura da imagem ou o número de cores utilizado. Formatoscomo GIF e JPG guardam os bits comprimidos. Esta compressãoconsiste em achar repetições dentro do arquivo e eliminá-las. Quando você estiver trabalhando com imagens preocupe-se com a compressão e principalmente, com o número de cores de cada figura.O tipo de compressão e o número de cores utilizado naimagem podem reduzir seu arquivo à metade ou menos do seutamanho original.O uso da compressão no formato GIF procura eliminar o númerode cores necessárias à representação de uma imagem. Umaimagem GIF não pode ter mais do que 256 cores nem menos doque 2 (preto e branco). Unidade 9 201
  • 193. Universidade do Sul de Santa Catarina SEÇÃO 2 – Tipos de arquivos Os tipos de arquivos disponíveis para imagens são vários, mas alguns — em função de seu tamanho e pela facilidade ou rapidez com que são carregados pelos browsers — são mais utilizados. Na Web, a grande maioria dos gráficos são bitmaps com extensão GIF e JPG. Além do GIF e do JPG ainda temos o formato PNG, que apesar de características positivas relacionadas à qualidade da imagem e tamanho não teve grande aceitação no mercado. Formato GIF - Graphics Interchange Format O formato de arquivo GIF é excelente para imagens com cores lisas, para as imagens que tenham desenhos. O formato GIF original suporta no máximo 256 cores simultâneas. Esse padrão utiliza técnicas de dither.Se desejar, leia novamente esseconceito na Seção 1 da Unidade 7. Quando você escolher o formato pense que GIF não é recomendável para figuras que precisam de aproximação da realidade, a não ser que a imagem em questão seja em preto e branco (escala de cinza). O formato GIF é muito utilizado no projeto de ícones ou imagens onde o número de cores é menor. Uma das características mais interessantes para o projetista é a possibilidade de utilizar fundo transparente. Assim, quando você quer que uma imagem seja publicada e o fundo seja visível, o formato de arquivo indicado é o GIF. Você quer dicas para produzir um GIF transparente? Acesse o site da Universidade de São Paulo que demonstra passo-a-passo como fazer isto com dois programas o LView e o PaintShop Pro. O endereço é <http://www.icmc.usp.br/ensino/material/html/ giftrans.html>202
  • 194. Comunicação Visual para WebOutro recurso da imagem GIF é o entrelaçamento. As imagensaparecem como camadas, a cada camada a imagem torna-semais nítida. Assim quando você baixa o arquivo vai tendo umaidéia de como ele será quando estiver totalmente apresentado.Ao mesmo tempo que isto é executado, o internauta pode rolar atela e ler alguma informação enquanto aguarda a finalização daimagem.Este efeito também é chamado de renderização progressiva nãointerfere no tamanho e na velocidade do arquivo. Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. <http://www.icmc.usp.br/ensino/ material/html/gifjpeg.html> Figura 9.3 - Imagem formato GIFFormato JPEG - Joint Pictures Expert GroupO formato JPG é ideal para fotografias, figuras e imagensnaturais onde ocorre uma grande variação de coresprincipalmente quando cores se mesclam umas nas outras. O padrão JPEG trabalha com ajustamento de cores. Ele seleciona cores aproximadas, desprezando algumas das cores originais.Esse padrão apresenta melhor qualidade para fotografias doque o GIF e tem a vantagem de gerar arquivos menores do queos gravados naquele formato. JPEG trabalha sempre com 16milhões de cores (24 bits) para fotografias. O formato JPEGnão tem possibilidade de criar áreas transparentes. Não utilize oJPEG em gráficos ou grandes áreas de uma só cor.O JPEG permite que determinemos a qualidade da imagemarmazenada, definindo o quanto desejamos perder de exatidão daimagem em detrimento do tamanho final do arquivo, ou seja, aocomprimirmos seu formato podemos decidir o quanto a imagemdeve perder de sua fidelidade. Unidade 9 203
  • 195. Universidade do Sul de Santa CatarinaPara uma melhor compreensão,visualize, no anexo 1, ao final dolivro didático, esta figura colorida.<http://www.icmc.usp.br/ensino/material/html/gifjpeg.html> Figura 9.4 - Imagem formato JPEG Observe que a qualidade de imagem GIF no caso da bandeira é superior ao JPEG. Por que? O JPEG utiliza um algoritmo de compactação que se baseia na capacidade do olho humano. O olho humano não é capaz de reconhecer 16 milhões de cores de uma só vez. Partindo deste princípio tira-se uma série de informações que representam cores e mantêm-se apenas aquelas visíveis ao olho humano. Apesar de tirar um grande número de cores a imagem ainda fica realista. Existem diferentes níveis de compressão. Uma desvantagem do JPEG é que a imagem normalmente perde qualidade a cada vez que o arquivo é salvo. O formato JPEG não deve ser usado em imagens com menos de 16 níveis de tons de cinza. Comparando a compressão GIF X JPEG O uso da compressão no formato JPEG pode ser configurado de 10 a 100. Quando você tem a imagem configurada em 100 a imagem JPG é igual à imagem original. Aumentando a compressão a imagem vai perdendo a resolução mas ainda assim é considerada de qualidade. A figura 9.5, retirada do site Webdesign provém de um arquivo original BMP de 100 x 100 pontos com 16 milhões de cores e tamanho ocupando de 30.056 bytes.204
  • 196. Comunicação Visual para Web Imagem GIF Imagem JPEG 100% Imagem JPEG 10% Figura 9.5 - Exemplo comparativo GIF X JPEG comprimidoVeja que interessante: as imagens JPG apesar da compressão Para uma melhorainda assim possuem excelente qualidade. A imagem GIF no compreensão,entanto já aparece um tanto quanto irreal. visualize, no anexo 1, ao final do livro didático, esta figuraPNG - Portable Network Graphic colorida.O PNG trabalha com esquema de 24 bits de cores, ou seja, 16,8 <http://www.milhões de cores. No entanto, em comparação com o JPEG, worldmasters.a compressão obtida é mais eficiente e não proporciona perda hpg.ig.com.br/ Webdesign/graficos.de qualidade a cada salvamento. As imagens em PNG não htm>requerem muito espaço, podendo-se ter figuras de alta definição etamanho em bytes pequeno. O PNG também possui o recurso detransparência. Apesar de suas excelentes características o PNGapresenta problemas de portabilidade com alguns browsers.Otimizar arquivosOtimizar imagens significa diminuir seu tamanho mas ao mesmotempo mantê-las realistas ao olho humano. Como os tipos dearquivo mais utilizados são o GIF e o JPEG podemos reduziro número de cores da aquarela (GIF) e ajustar a qualidade doarquivo quando estiver salvando (JPEG). Para otimizar umaimagem você pode usar ferramentas como: Adobe Photoshop. Utilizado para editar gráficos bitmap profissionais permite ler formatos de bitmap e gravá-los como GIF ou JPG. Corel PhotoPaint. Parte do pacote Corel Draw permite a edição de bitmaps. Grava arquivos GIF ou JPG. Unidade 9 205
  • 197. Universidade do Sul de Santa Catarina GIF Lube. É um site na Internet onde você informa a URL de uma imagem na web ou no seu disco local, a partir daí você pode convertê-la nas diversas palettes reduzidas de GIF ou nos diversos níveis de JPG. No final, você escolhe a imagem mais adequada e usa o próprio browser para salvar a imagem reduzida. WebGraphics Optimizer: <http://webopt.com/> ProJPG, GIF Imantion: <http://www.boxtopsoft.com/> JPG - GIF Crunchers: <http://www.spinwave.com/> GIF Wizard: <http://www.gifwizard.com/> SEÇÃO 3 – Digitalizando Imagens Você também pode digitalizar qualquer coisa, desde uma arte lisa a objetos em 3D. Você pode se utilizar de uma câmera digital. Neste caso saiba que normalmente usam compactação JPEG, sua imagem portanto já possui uma qualidade ligeiramente menor. O scanner é um dos equipamentos utilizados na digitalização de imagens. Existem vários modos de digitalização: Bitmap: duas cores: preto e branco; Grayscale: trabalha com 16 ou 256 tons de cinza; Colors: 256 cores diferentes e Millions of colours: captura a imagem diferenciando milhões de cores. Ao digitalizar imagens, tenha em mente que está produzindo imagens para Web. Se você vai usar fotos procure obter no formato TIFF na resolução mais alta (de 140 a 300 ppi).206
  • 198. Comunicação Visual para WebSe for escanear suas imagens, siga as seguintes dicas: dimensione fisicamente a imagem (polegadas) para aproximadamente as dimensões que deseja para a página na web; se não pretende trabalhar a imagem, digitalize-a em 72 ppi. Mas se pretende trabalhá-la digitalize em 100-150 ppi; salve as imagens no formato TIFF, se for preto e branco Bitmap; imagens planas digitalize com 256 cores.Anti-aliasingO anti-aliasing é conhecido como “a suavidade aparente damargem de um gráfico”. Em outras palavras, sabe aquele efeitoserrilhado que temos em arquivos bitmap? Este efeito é conhecidocomo “aliasing”.Este efeito ocorre nas linhas inclinadas, nas curvas e nos textos.Veja um exemplo na figura a seguir. Para uma melhor compreensão, visualize, no anexo 1, ao final do livro didático, esta figura colorida. <http://www.laercio. com.br/site2/artigos/ Figura 9.6 - Efeito aliasing hardware/hard-017/hard- 017b.htm>O processo anti-aliasing resolve este problema suavizando aslinhas utilizando cores intermediárias. Na figura acima utilizou-se diversos tons de cinza para suavizar o efeito “serrilhado”. Unidade 9 207
  • 199. Universidade do Sul de Santa CatarinaPara uma melhor compreensão,visualize, no anexo 1, ao final dolivro didático, esta figura colorida.<http://www.laercio.com.br/site2/artigos/hardware/hard-017/hard-017b.htm> Figura 9.7 - Efeito anti-aliasing A figura 9.7 mostra como fica a imagem quando é usado o anti- aliasing. Caso você precise utilizar-se desta técnica, procure evitar a sobreposição de objetos de cores diferentes. Se isto acontecer, o número de cores necessárias para o anti-aliasing é maior. Halo effect A transparência pode substituir apenas uma cor de sombra. Quando você vai colocar uma imagem GIF sobre um fundo muito diferente daquele no qual ela vai ser colocada na página, ao deixar o background transparente vai ocorrer o “halo effect” ao redor do objeto após a suavização (anti-aliasing). Se você não deseja isto, quer evitar este problema, crie sua figura sobre um fundo de cor semelhante ao do fundo de sua página Web, exporte uma versão suavizada, e então defina a cor de fundo como transparente.208
  • 200. Comunicação Visual para WebSEÇÃO 4 – GIMPNesta sessão temos algo muito especial: é o GIMP – GNU ImageManipulation Program, o programa está disponível para os sistemasoperacionais Linux e Windows. O GIMP pode ser usado parageração e tratamento de imagens, confecções de logos animados eedição de vídeos. O mais importante é que seu uso é livre. Como instalar Crie uma pasta em seu HD. Você deve baixar dois arquivos: GTK+ 2 for Windows (version 2.6.7) The Gimp for Windows (version 2.2.7) Primeiro instale o GTK e só depois o GIMP. Figura 9.8 - Setup de instalação do GIMP Na instalação do software siga clicando Próximo (Next) até aparecer a tela com a licença de uso onde você deve selecionar a opção I Accept... Mantenha a instalação com as opções Default. Inicie então a instalação clicando no botão Install. Finalizada a primeira etapa de instalação, clique no ícone do segundo arquivo GIMP. A seqüência de instalação é semelhante ao primeiro arquivo. O GIMP irá sugerir a configuração de seu monitor para 1024X768, aceite a indicação e clique em Next SEGUE Unidade 9 209
  • 201. Universidade do Sul de Santa Catarina Você terá que optar pelos padrões de imagem que deseja trabalhar como JPG. JPEG, GIF, BMP e TIFF. Marque todos os tipos de arquivo que você achar interessante. Quando você selecionar o padrão GIF o GIMP o software vai lhe informar o tipo de compressão utilizado LZW mas, para utilizá-lo, um arquivo deve ser instalado: Clique em Next e, na tela a instalação do aplicativo clique Next Na próxima tela o GIMP apresenta os componentes disponíveis para a instalação. Aceite os recomendados (Custom) e, na opção de Tradução (Translation), escolha a opção “Português Brasil”. Clique novamente em Next nesta e na próxima tela. Na caixa de diálogo seguinte, selecione os formatos de arquivo mais usados para trabalhar com imagens digitais e clique em Next. Na próxima tela o GIMP informa onde se instalará, basta clicar em Install para dar início ao processo. Figura 9.9 - Start da instalação do GIMP Desabilite a opção Launch The Gimp se você desejar instalar, na seqüência, o pequeno aplicativo adicional que lhe permitirá trabalhar com o padrão Gif em suas imagens. Clique em Finish para sair da instalação. Se você deseja usar o compressor LZW, utilizado nas imagens digitais, padrão Gif deve baixar o arquivo adicional “GIMP-1.2.4- 20020907–lzw-setup.zip”. A utilização legal exige uma licença da Unisys. Sem essa licença, a rigor você não pode trabalhar com o formato Gif. Para começar a usar esse aplicativo, clique no ícone da raposa que aparece em sua área de trabalho.210
  • 202. Comunicação Visual para Web Figura 9.10 - Boas vindas do GIMPExplicar o funcionamento das inúmeras funções é um temaextenuante, mas vamos usar dois exemplos simples para criar umaimagem e trabalhar uma imagem já existente.Desenhando no GIMPPara começar, abra uma tela para iniciar um desenho, clicandoem Arquivo, Novo, na caixa principal GIMP.Uma caixa de diálogo é imediatamente aberta para que vocêpossa escolher o tamanho da imagem (altura e largura), aresolução, o tipo da imagem (RGB ou escala de cinzas (opçõesavançadas) e o preenchimento do fundo da imagem. Figura 9.11 - Tela para gerenciamento de tamanho da imagemUm novo desenhoPara começar um novo desenho, experimente um lápis digital: Selecione no menu Ferramentas, depois Ferramentas de Pintura e finalmente selecione o Lápis. Ou selecione o lápis na barra de ferramentas. Unidade 9 211
  • 203. Universidade do Sul de Santa Catarina Figura 9.12 - Ferramentas de Pintura Você pode diminuir ou aumentar o tamanho da ponta do lápis (opção Lápis) ou esvaecer o traço do lápis. Depois de rabiscar um pouco cheguei neste desenho: Faça algumas escolhas e rabisque alguns traços em sua tela de criação para visualizar as possibilidades. Colorindo seu desenho Para isso selecione uma graduação na paleta de cores. Você pode acessar as cores pela opção Arquivo, Diálogos. Existe um quadrado preto e outro branco: eles determinam as cores de frente e fundo da imagem. Clicando nas setas você inverte os quadrados, invertendo, assim, cores de fundo e frente da imagem. Ao dar duplo clique no quadrado preto, a caixa do gradiente selecionado anteriormente se abrirá, para que você escolha a cor que deseja deixar ativa. Caixa para seleção de cores Em nosso exemplo, escolhemos a cor vermelha para pintar nosso desenho, clicando em uma determinada área do quadrado maior da caixa de gradiente. Essa cor irá aparecer no quadrado que antes era preto na caixa GIMP.212
  • 204. Comunicação Visual para WebEsse processo também pode ser feito para a cor de fundo(representada pelo quadrado branco). Posicione o balde dentro dafigura e dê um clique.Salvando o arquivoPara salvar a imagem clique em Arquivo e Salvar Como. Figura 9.13 - Caixa Salvar ArquivoNa caixa Salvar Como, você tem a opção Navegar em outraspastas onde você pode escolher a pasta onde irá salvar o arquivo.Na opção tipo de preenchimento você irá escolher o tipo dearquivo que você deseja gravar (GIF, TIF, JPG, etc).FotografiasE para trabalhar uma fotografia gerando uma nova?Clique em Arquivo, Abrir e selecione o diretório e oarquivo que deseja trabalhar.A imagem ao lado foi retirada de uma fotografia pormeio da opção Seleção de Regiões Elípticas existente nomenu Ferramentas.Após selecionar, copiamos a imagem para um novoarquivo. Para isso clique na área selecionada com o botãodireito do mouse e escolha a opção “Editar”, “Copiar”. Unidade 9 213
  • 205. Universidade do Sul de Santa Catarina Abra um novo arquivo, como você fez para criar o desenho anterior e tecle “Crtl+V”. Repita os procedimentos anteriores para salvar um arquivo e observe o resultado ao lado. Você pode trabalhar ainda mais a imagem eliminando os indícios de que ela foi originada de uma outra foto. Para isso, abra a nova imagem e amplie sua visualização. Basta clicar em “Visualizar”, “Zoom” e escolher quantas vezes deseja ampliar a imagem para poder trabalhar de forma detalhada. A imagem abaixo foi recortada e seu fundo alterado para a cor verde. Com a ferramenta Texto (menu Ferramentas) escreveu-se a palavra parabéns. Saiba mais Se você deseja se aventurar no GIMP colocamos alguns tutoriais na Midiateca selecionados em diferentes endereços. São eles: Ferramentas básicas de seleção de áreas. Combinando seleções de áreas. Caminhos de Bezier. Gradientes. A Ferramenta de Seleção Bezier e Banners. Além destes tutoriais, você pode visitar sites especializados sobre o GIMP com tutoriais e exemplos: <www.gimp.org/tut-basic.html> <www.grupos.com.br/grupos/gimp> <www.gimp.com.br> Sites para download do GIMP: <www.gimp.org> <www2.arnes.si/~sopjsimo/gimp/> <http://gimp-win.sourceforge.net/stable.html>214
  • 206. Comunicação Visual para WebSínteseNesta unidade você aprendeu a diferença existente entre umaimagem vetorial e uma imagem bitmap. Também foi umapreocupação desta unidade esclarecer características e eficiênciade uso para tipos de arquivos utilizados em páginas Web comoGIF, JPG e PNG. Além dos formatos você percebeu que efeitoscomo o aliasing podem prejudicar seu projeto gráfico e quemecanismos de compressão otimizam o acesso à página. Aoestudar estes conceitos você foi apresentado ao GIMP e seuscomandos básicos para edição de imagem.Atividades de auto-avaliação1. Relacione os seguintes conceitos de imagens [B] Bitmap ou [V] Vetorial: a) ( ) Neste tipo de imagem o redirecionamento ocorre sem a perda da qualidade da imagem. b) ( ) A imagem é formada a partir de um mapa de bits. c) ( ) As imagens são formatadas em tamanhos relativamente pequenos. d) ( ) A renderizaçao da imagem ocorre pelo recálculo matemático da imagem. e) ( ) As imagens são criadas mudando as cores dos pixels individuais na tela. f) ( ) Extensões comuns neste formato são BMP, GIF, TIFF. g) ( ) Extensões comuns neste formato são WMF, CDR, AI. Unidade 9 215
  • 207. Universidade do Sul de Santa Catarina 2. No mecanismo de compressão podemos afirmar que: a) ( ) O tamanho do arquivo depende da largura, a altura da imagem ou o número de cores utilizado. b) ( ) Formatos como CDR e WMF guardam os bits comprimidos. c) ( ) A compressão em alguns casos consiste em achar repetições dentro do arquivo e eliminá-las. 3. Quais das características não é uma vantagem do formato GIF: a) ( ) Cor ilimitada. b) ( ) Perda em compactação. c) ( ) Transparência. d) ( ) Empilhamento. 4. Quais das características não é uma vantagem do formato JPG: a) ( ) Milhões de cores. b) ( ) Perda em compactação. c) ( ) Variedade em níveis de compactação.Transparência. d) ( ) Mantém sutis mudanças de cores.Empilhamento. 5. Nas figuras abaixo escolha o formato mais adequado ao tipo de imagem:Para uma melhor compreensão,visualize, no anexo 1, ao final dolivro didático, esta figura colorida. a) ( )GIF ( ) JPG b) ( )GIF ( ) JPG c) ( )GIF ( ) JPG216
  • 208. Comunicação Visual para Web Para uma melhor compreensão, d) ( )GIF ( ) JPG e) ( )GIF ( ) JPG f) ( )GIF ( ) JPG visualize, no anexo 1, ao final do livro didático, esta figura colorida. g) ( )GIF ( ) JPG h) ( )GIF ( ) JPG i) ( )GIF ( ) JPG j) ( )GIF ( ) JPG k) ( )GIF ( ) JPG l) ( )GIF ( ) JPG m) ( )GIF ( ) JPG n) ( )GIF ( ) JPG o) ( )GIF ( ) JPG6. Sobre o efeito aliasing é correto afirmar: a) ( ) O aliasing suavisa as margem de um gráfico. b) ( ) O aliasing produz um efeito de escadinha na imagem. c) ( ) O aliasing ocorre principalmente quando se usa linhas retas. d) ( ) O anti-aliasing é realizado utilizando-se cores intermediárias para preencher o serrilhado. Unidade 9 217
  • 209. UNIDADE 10Tipografia Objetivos de aprendizagem Reconhecer os diferentes tipos de fontes. Aplicar de forma eficiente o tipo de fonte adequado ao tipo de texto. Compor textos para Web com um bom grau de legibilidade. Seções de estudo Seção 1 Tipografia Seção 2 Serifa ou não-Serifa? Seção 3 Famílias Tipográficas Seção 4 Tipografia na Web Seção 5 O texto que projeto não é o texto que meu cliente vê Seção 6 O CSS - Cascading Style Sheet
  • 210. Universidade do Sul de Santa Catarina Para início de conversa Mesmo com o advento dos computadores e da edição eletrônica de texto, a tipografia permanece viva nas formatações, estilos e grafias. Apesar de você, na maioria das vezes, não perceber, a tipologia usada em uma página Web afeta de forma inconsciente a maneira como sentimos e percebemos a página. Uma página pode ser formal ou descontraída, moderna ou tradicional, pode aparentar feminilidade ou masculinidade. Enfim, uma série de características subliminares que são passadas ao leitor justamente pelo tipo de fonte ou estilo utilizado na página. Você pode modificar completamente o “clima” de uma página apenas pelo uso de uma determinada fonte. Por outro lado, o mau uso da tipografia pode fazer com que a página pareça mal projetada, difícil de ler ou ainda pouco profissional. Existem na internet inúmeros exemplos de páginas agressivas aos olhos do leitor, onde o esforço necessário para a leitura chega a ser absurdo. Isto não aconteceria se o projetista tivesse conhecimento de alguns conceitos fundamentais sobre Tipografia. Preparado para uma imersão no mundo da tipografia? Vamos lá! SEÇÃO 1 – Tipografia A palavra tipografia vem do grego tipos (cunho) + gráphein (escrever). Isto é, sua origem vem da época dos escribas que documentavam a história de próprio punho. Olhando em dicionários modernos vemos a tipografia como sinônimo da arte de imprimir, estabelecimento tipográfico ou imprensa. Mas a tipografia é bem mais do que isto, é a arte de compor um texto, visando torná-lo facilmente legível e adaptado ao contexto em que é lido e aos objetivos com que foi publicado (WIKIPÉDIA, 2005).220
  • 211. Comunicação Visual para WebA tipografia clássica baseava-se em pequenas peças de madeira oumetal entalhadas com relevos de letras e símbolos — os tipos, otipo é o design de uma determinada família de letras.Os tipos foram inventados pelos chineses e inicialmente eramgravados em madeira, mais tarde em 1440 Gutemberg criouos tipos móveis de metal. Os tipos móveis eram reutilizáveis epossibilitavam a construção de textos.A invenção de Gutemberg, conhecida como a prensa deGutemberg, tornou-se a base da imprensa do último século eteve como marco a impressão da Bíblia em alemão em 1454. <www.wikipedia.com.br> Figura 10.1 - A prensa de GutembergHoje em dia, nos trabalhos gráficos, a função da tipografia vaialém da composição das palavras. A forma e a maneira como éapresentada devem transmitir seu significado. Pense: estamos em um mundo onde a cultura visual está saturada de informações e temos que conseguir chamar a atenção do leitor e, ao mesmo tempo, transmitir nossa mensagem rápida e de forma muito eficiente. Logo, a tipografia é uma das principais chaves deste sucesso! Unidade 10 221
  • 212. Universidade do Sul de Santa Catarina Figura 10.2 e 10.3 - O uso da Tipografia para transmitir emoções O uso de diferentes tipos de fontes com e sem serifa oferece ao site da Gol um estilo despojado. No site da Lilica Ripilica o projetista fez uso de fontes serifadas dando ao site um estilo amigável, doce e feminino.222
  • 213. Comunicação Visual para WebCultura tipográficaToda a cultura de regras tipográficas que utilizamos na Web vemda mídia impressa. Mas apesar de em parte este reaproveitamentode conceitos ser coerente, temos que admitir que tipos no vídeoe na impressão de papel são diferentes. Você pode analisar trêspontos em que percebemos claramente a distinção: Primeiro ponto: a resolução da mídia impressa é renderizada a 1200 dots por polegada (dpi), já em uma tela de computador a resolução dificilmente chega a 85 dpi. DPI - “Dots Per Inch” ou pontos por polegada, Segundo ponto: a área de um monitor é muito menor significa que no espaço do que uma página de jornal, você já parou para calcular de uma polegada existem a quantidade de palavras impressas na quinta página da “n” pontos de impressão. Folha de São Paulo? Imagine colocar isto em uma única Quando você lê que uma imagem é impressa com página na Web sem rolagem. uma resolução de 1200 Terceiro ponto: o uso das fontes utilizadas no site. dpi significa que tem um mil e duzentos pontos de No início a Web era limitada tanto pelo número impressão no espaço de de fontes quanto pelas cores possíveis de se utilizar. uma polegada. Eram disponíveis somente fontes Times New Roman (Windows) e Times (Mac).O uso da tag <font face> acrescentada ao código HTMLtornou possível especificar qual fonte o browser deve mostrarpara um texto. Mas apesar desta evolução, a fonte usada deveestar instalada no computador do usuário, se isto não ocorre oprojeto tipográfico estará comprometido. Se isto acontecer, o quevocê projetou e visualiza em sua máquina pode não ser o que ointernauta visualiza. Reflita sobre estes três pontos: o uso do conhecimento que se tem sobre como publicar textos na mídia impressa pode ser simplesmente repassado para a mídia WEB? Por que? Será possível minimizar estes problemas? Unidade 10 223
  • 214. Universidade do Sul de Santa Catarina SEÇÃO 2 – Com serifa ou sem serifa? Quando estudamos tipografia para Web é comum encontrar textos onde se afirma que o texto sem serifa é mais legível na tela de um computador. Que ele torna as formas das letras mais claras. Da mesma forma, encontramos muitos textos afirmando que as letras com serifa tendem a tremular prejudicando a leitura, causando cansaço visual no leitor. Mas afinal, o que é serifa? O que é uma letra sem serifa? As serifas são prolongamentos das letras, parecem com um acabamento, uma continuidade, para que o olho possa “ligar” uma letra à outra. Dando uma sensação de acabamento na letra. Tipos com serifa possuem pouca transição entre grosso e fino nos traços. Ex.: Garamond, Times, Bodoni, Caslon, Century. Não existe transição entre grosso e fino, as letras são finalizadas abruptamente. Ex.: Helvética, Futura, Franklin Gothic, Gill sans, Avantgarde, Optima, Univers, Fruitiger. O Uso das serifas Segundo Fascione (2001), fontes sem serifa são fontes frias, objetivas e sérias, quase masculinas e são as mais usadas na comunicação de produtos e empresas de base tecnológica, que precisam passar credibilidade e solidez.224
  • 215. Comunicação Visual para Web <www.hp.com> Figura 10.4 - Hp apostando na fonte sem serifaFontes serifadas são vistas como mais femininas, delicadas,emocionais. A Nokia em sua campanha voltada para o públicojovem, propõe diversificação de raças e culturas como umaapologia à globalização promovida pela Internet. Utiliza amistura de fontes sem serifa para o texto e com serifa para ologo dando um tom pessoal e leveza, diminuindo a formalidade(Fascione, 2001). <www.nokia.com> Figura 10.5 - Nokia a diversidade exposta por meio de fontes Unidade 10 225
  • 216. Universidade do Sul de Santa Catarina<www.possessed.com > Figura 10.6 - A fonte como elemento principal No site da banda Possessed o uso da fonte dá o tom do impacto desejado para o leitor. O uso de fontes serifadas representam neste projeto visual toda a caracterização de estilo transmitindo irreverência. SEÇÃO 3 – Famílias tipográficas Existem muitas divergências entre autores sobre a classificação das famílias tipográficas. Fascione (2001), sugere que os tipos normalmente apresentados são: Antigo. Possuem inclinações em ângulos e contraste acentuado. Tipos antigos sempre têm serifa e estas possuem inclinação (Benguiat, Caslon, Garamond, Goudy). Moderno. As características principais são a inclinação vertical, serifas horizontais e finas e alto contraste (Modern, Bodoni, Fenice, Times Bold). Sem serifa. Arial, Helvetica, Folio, Kabel.226
  • 217. Comunicação Visual para Web Manuscrito. Inclui todos os tipos que parecem ter sido escritos à mão (Bronx, Kaufmann, Staccatto, Tiger Rag). Decorativo. Irreverente, utilizam desenhos e possuem forte impacto. São difíceis de combinar e devem seu uso deve ser limitado (Dancing, Kidnap, Scruff, Westood).Simões (2005), sugere algumas considerações e característicassobre fontes disponíveis e comuns para diferentes instalações: Usada em muitos impressos, como jornais e livros. É considerada Times New Roman uma fonte com boa legibilidade para impressos mas cansativa para a tela. É uma tipologia mais leve e mais moderna. Confortável para Arial leitura no vídeo. Estudos demonstram que textos que utilizam Arial produzem o aumento da concentração do leitor. A Verdana vem com o Internet Explorer desde a versão 3. Verdana É considerada mais eficiente que a Arial, quando existe a necessidade de se utilizar fontes menores. Comic Sans Foi projetada baseada no tipo de letra usado nos balões de histórias em quadrinhos. É mais fácil de ler na tela do que a Times, pois foi projetada para vídeo, enquanto a Times foi projetada para impressos. A Geórgia Georgia possui um conjunto de caracteres em itálico e numerais atraentes (1234567890). Mais elegante do que a Arial, possui um conjunto de caracteres Trebuchet bem mais completo do que a Verdana, mas é menos legível em tamanhos pequenos. A legibilidade da Impact é prejudicada em tamanhos pequenos. Impact Funciona melhor para títulos, o que acaba sendo mais prático e seguro usando-se gráficos. Arial Black Versão mais “pesada” da Arial, é interessante para o uso em títulos, pois para textos ela é excessivamente “bold”. Se você ficou curioso sobre as famílias tipográficas, visite o site do Museu da Tipologia — <www.dpto. com.br/alltype/dicas1.htm>. Lá você vai encontrar a história e a concepção dos diferentes tipos de fontes. Unidade 10 227
  • 218. Universidade do Sul de Santa Catarina SEÇÃO 4 – Tipografia na Web O bom uso da tipografia depende de vários fatores. Mas qual deles é o que influencia mais o melhor ou o pior desempenho de um site em sua legibilidade? O contraste entre o fundo e o texto? A disposição de todos os textos da página? As áreas em branco? O alinhamento? Ou a junção de todos estes fatores? Para responder estas perguntas vamos dar uma olhada em cada um destes aspectos. Alinhamento O alinhamento é o uso de margens que ajudam o leitor a identificar a área de leitura separando o texto do restante do ambiente criado pela estrutura da página. Quando usada corretamente ela promove unidade e uma estrutura consistente por todo o site. O uso do contraste entre o espaço positivo da tela (textos, imagens) e o espaço negativo (espaço branco) criam um equilíbrio atrativo para o usuário. Você pode utilizar diferentes formas de alinhamentos justificados, alinhado à esquerda, alinhado à direita ou centralizado. Texto justificado. O uso do justificado cria blocos sólidos retangulares de texto. O uso do justificado provoca problemas como o uso de hifenização na extremidade de cada linha e o ajuste e o afastamento da palavra durante todo a linha. Este mecanismo faz com que muitas vezes, as palavras sofram um afastamento excessivo. O uso do justificado na Web prejudica a legibilidade do texto. Texto centralizado ou alinhado pela direita. Textos centralizados ou alinhados pela direita são difíceis de ler. Nós lemos da esquerda para direita, assim ao centralizarmos o texto ou alinhando pela direita nós dificultamos a leitura. O internauta tem que procurar e localizar o texto. Na verdade ele precisa identificar onde a linha desejada inicia.228
  • 219. Comunicação Visual para WebTexto alinhado pela esquerda. Este alinhamento éo que proporciona a melhor opção de legibilidade.Ao alinharmos pela esquerda o usuário encontrarapidamente o início da linha, o lado direito da margemsendo irregular permite que o internauta se localizerapidamente ao desviar o olhar da página. Por que?Porque as quebras do lado direito finalizam de formairregular, facilitando nossa percepção para reencontrar alinha em que paramos a leitura ao desviar o olhar.Assimétrica. Um arranjo sem padrão previsível nacolocação das linhas. Alinhado à esquerda Centralizado Alinhado à direita Justificado Observe: O uso de cabeçalhos centralizados torna-se legível em textos justificados. Cabeçalhos alinhados pela esquerda devem ser usados em textos alinhados pela esquerda. Evite o uso de textos justificados. Unidade 10 229
  • 220. Universidade do Sul de Santa Catarina Comprimento da linha (LYNCH e HORTON, 2002) O uso de linhas muito curtas deve ser evitado, você lê grupos de palavras e não uma palavra de cada vez, linhas muito curtas quebram os padrões. O tamanho de uma linha de texto deve ser limitado a aproximadamente 50 a 70 caracteres por linha. Quando o layout é projetado com largura fi xa, use tabelas com células de texto com tamanho de aproximadamente 365 pixels. Divida o texto em pequenos parágrafos. Use negrito ou itálico para destacar pontos importantes na página (mas NÃO exagere). Quando o texto é muito grande adicione hipertextos. Sobre os tipos de fonte (LYNCH e HORTON, 2002) Use um tipo sem serifa. Escolha no mínimo três tipos de fontes para o seu texto. <font face="Verdana,Arial,Helvetica,sans-serif"> Invente modos diferentes para prender a atenção do usuário final. Se a página de texto tiver opção para impressão, evite o uso de uma cor escura de background com o texto claro. A legibilidade de um texto depende não somente da forma das letras, mas do tamanho do corpo utilizado e do contraste desta fonte com o background da página. Letras da família Script devem ser evitadas na Internet, devido a dificuldade de leitura que apresentam. Entretanto podem ser aproveitadas, se bem utilizadas, em títulos e logomarcas. Utilize imagens de texto somente para títulos e use fontes básicas para texto em html, isto leva em consideração a velocidade de transferência da página.230
  • 221. Comunicação Visual para Web As fontes são exibidas em tamanho maior em PC do que em Mac. Procure brincar com as fontes, tanto para texto quanto imagem, sem esquecer da legibilidade. PC (Arial, Courier new, Times New Roman). Mac (Helvetica, Courier, Times New Roman).Tamanho da fonte (LYNCH e HORTON, 2002) Evite fontes muito grandes para corpos de texto (maior do que 14 pontos). Evite fontes muito pequenas para corpos de texto (menor do que 10 pontos). Utilize todas as letras maiúsculas somente se desejar uma aparência retangular, letras totalmente maiúsculas são dificílimas de ler... Se você não tem como fugir e realmente precisa de uma fonte pequena então use tipos como: Arial, Verdana ou Geneva. Espaço entre linhas - uma regra geral é deixar um espaço entre linhas em 2 pontos acima do tamanho da fonte. Por exemplo, uma fonte de tamanho 12 use um leading (espaços entre linhas) de 14 pontos.ParágrafosExistem duas maneiras de identar parágrafos. A primeira é aforma tradicional usando a identação para identificar o início deum novo parágrafo. A segunda maneira é o uso de uma linha embranco para separar os parágrafos.Parágrafos identados funcionam bem em longos blocos de texto,onde o uso da identação não sugere interrupções na leitura. Ouso de linhas em branco torna a página mais fácil de ler e ofereceespaço branco extra para o relevo visual. Unidade 10 231
  • 222. Universidade do Sul de Santa Catarina Para identar um parágrafo você pode inserir o caractere: (&nbsp;) no início de cada parágrafo. Outra opção é usar um GIF transparente que pode ser inserido no início da frase. Se estiver usando o CSS você pode setar a identação usando o “text-indent”: a) &nbsp;&nbsp;&nbsp;&nbsp; identar parágrafo sem usar o CSS. b) <IMG SRC=”pixel.gif” HEIGHT=”1” WIDTH =”1” ALT=”” HSPACE=”8”> identar parágrafo sem usar o CSS. c) <P STYLE=”text-indent: 8pt”> identar parágrafo usando o CSS. SEÇÃO 5 – O texto que projeto não é o texto que meu cliente vê O texto que o projetista formata em sua máquina e visualiza em seu browser é visto muitas vezes, de forma diferente no browser do cliente. Isto acontece pela interferência de variáveis como: a fonte padrão do browser do cliente que está configurada diferente da máquina do projetista; o tamanho da fonte padrão do browser do cliente é diferente da sua; a resolução do monitor; o sistema operacional pode ajustar uma fonte padrão, como no caso do Windows (ajuste da fonte personalizada em display).232
  • 223. Comunicação Visual para Web Mas o que você pode fazer para minimizar este problema?Se você pretende usar uma fonte para títulos, menus, chamadas,etc que possui uma grande probabilidade de não estar instaladaem um grande número de usuários, use o texto na forma degráfico. Você pode usar algum sistema que anexe a fonte especial ao código HTML da sua página, de forma que a fonte, ou uma representação vetorial dela, seja baixada quando o visitante abre a página. Outra possibilidade é você permitir ao internauta baixar e instalar as fontes necessárias a partir de um link em sua página. Este método não é muito aconselhável, pois o usuário pode não saber como fazer, ou ainda achar um despropósito ter de perder tempo fazendo este download. Se sua ferramenta de autoria não permite que a fonte de sua página sejam gravadas sobre o padrão do browser do usuário, você pode fazer isto na mão. Imagine que você queira que a página seja apresentada em um fonte sem serifa. Digite o seguinte código antes do texto: <font face= “verdana,arial, geneva”> e no final do texto </font> Então vai parecer assim: <font face= “verdana,arial, geneva”> Este texto é um teste ! </font> Uma última alternativa é usar novas fontes criadas pela Microsoft especialmente para a Web. São fontes grátis, que podem ser baixadas por qualquer um, tanto para Windows como para Mac, e que inclusive, para quem usa o Internet Explorer já são instaladas junto com o browser. Unidade 10 233
  • 224. Universidade do Sul de Santa Catarina Existem vários sites onde você pode baixar fontes, nestes sites além das fontes para Mac e para a plataforma Windows, também estão disponíveis aplicativos e tutoriais. Dê uma navegada e veja o que você acha: Da font. <http://www.dafont.com/> Site de fontes para PC e Mac Vinta gettype. <http://www.vintagetype.com/> Publish – oferece download gratuito de fontes. <http://www.publish.com.br/> 2000 Fontes Free. <http://www.rioarte.com/2000fontes/> Só Fontes - Visualizadores, conversores, editores e fontes. Shareware e freeware. <http://www.familiaso.freeservers.com/sofontes/> Microsoft Typography <http://www.microsoft.com/typography/> Com Kennedy: Graphic Design <http://www.iol.ie/~ckennedy/> Fotopolis update. <http://fontopolis.simplenet.com/> SEÇÃO 6 – O CSS - Cascading Style Sheet A linguagem de marcação HTML (Hyper Text Markup Language) foi desenvolvida pensando-se no seu uso como um mecanismo de informação na área científica. No início seu uso era seletivo. Com o passar do tempo a inclusão de tags e aplicações específicas àquela linguagem de marcação transformou o HTML em um padrão mundial.234
  • 225. Comunicação Visual para WebCom o sucesso da internet o HTML, como uma simpleslinguagem de marcação, estava fadado ao “extermínio”. Eranecessário maior flexibilidade na manipulação visual dosconteúdos. Novas tags, atributos criaram uma nova estilizaçãodos conteúdos.O HTML passou então à função de estruturar o conteúdo pormeio da marcação e apresentá-lo dando a aparência final.A dupla função do HTML trouxe sérios problemas paraprojetistas Web. O projeto de páginas sofisticadas, o número depáginas criadas e a dependência das empresas em relação a estaspáginas, torna-se hoje uma dor de cabeça para o projetista nomomento da manutenção. Mas o que significa isto?Vamos replicar um exemplo muito bem colocado por Silva (2005): Seu melhor cliente telefona às 17:00h da tarde de uma sexta-feira (sempre ligam nesta hora para solicitar alguma coisa, não é mesmo?) e diz o seguinte: teremos uma reunião aqui na empresa, na segunda-feira às 0800h com um potencial comprador e é nossa intenção fazer uma apresentação dos nossos produtos através do site que você criou e mantém. Seguindo uma sugestão do nosso departamento de marketing precisamos mudar a cor de todos os títulos no site de verde para vermelho, pois esta é a cor principal da marca do nosso comprador e com isso pretendemos fi xar uma cumplicidade subliminar. Isto é bem simples de fazer, não é? Afinal é só mudar a cor! Dá para você ‘botar no ar’ até às 19:30h? Quero dar uma olhadinha antes de encerrar o expediente. OK?Você concorda e responde que vai providenciar. Mas são 180páginas no site, e os títulos são tags de cabeçalho deste tipo: <h1><font color=”#00FF00”>Título</font></h1>Se você tiver 3 títulos por página, você tem um total de 540 tags<font> para editar e mudar o atributo color.tamanho fonte? Ese o seu cliente tivesse pedido para mudar a cor dos textos, e dofundo? Problema na certa! Unidade 10 235
  • 226. Universidade do Sul de Santa Catarina A mistura de uma linguagem de marcação e estilização produz problemas brutais. A solução passa por dissociar linguagem de marcação da estilização. Desta necessidade nasceu o CSS ou Folha de Estilo em Cascata. O CSS faz uso dos elementos (tags) HTML para marcar e estruturar o conteúdo do documento. Elementos do HTML não serão utilizados para estilizar o conteúdo. O CSS é um arquivo independente do arquivo HTML onde são declaradas propriedades e valores de estilização para os elementos do HTML. Este arquivo pode ser externo com extensão .css tamanho fonte ou importadas, linkadas, incorporadas ou inline. Para realizar a alteração do exemplo descrito usando CSS bastaria mudar os cabeçalhos <h1> em todo o site, isto seria possível em segundos. Mas nem tudo é um mar de rosas, ainda resta um pequeno problema: o CSS não é totalmente compatível, alguns navegadores antigos não suportam o CSS. Um movimento muito forte de normatização organizado pela W3C está sendo realizado neste sentido e futuramente os problemas de compatibilidade podem estar resolvidos. Mas qual é o aculturamento utilizado no CSS? Como saber qual o estilo que será aplicado quando há mais de um estilo especificado para um mesmo elemento HTML? Isto foi resolvido utilizando-se a determinação de uma prioridade para aplicação da regra de estilo ao elemento, isto foi chamado de estilo cascata (daí o nome CSS). Segundo (SILVA, 2005), a prioridade será considerada a partir de diversos fatores como o tipo de folha de estilo, o local físico da folha de estilo no seu todo, o local físico da regra de estilo na folha de estilo e a especificidade da regra de estilo.236
  • 227. Comunicação Visual para WebA prioridade para o efeito cascata: 1) folha de estilo do usuário; 2) folha de estilo do desenvolvedor; estilo inline (dentro de um elemento HTML); estilo incorporada (definido na tag <head> do documento); estilo externo (importado ou linkado). 3) folha de estilo do navegador – browser.O estilo definido pelo usuário prevalece sobre todos os demais, aseguir vem as folhas de estilo definidas pelo desenvolvedor do sitee para estas, os estilos inline (dentro de um elemento HTML)tem a prioridade mais elevada, o que significa que prevalecerásobre aquele definido na tag <head> e este sobre o definido emuma folha de estilo externa e finalmente, a última prioridade épara estilos default do browser. Saiba mais O site CSS para Web Design <http://www.maujor.com/tutorial/ joe/cssjoe1.php> é um repositório que se propõe a oferta de um tutorial completo sobre o uso do CSS (traduzido para o português a partir de seu original em inglês <http://www.wpdfd. com/editorial/basics/index.html> desde exemplos muito simples a tratamento complexos. O material é composto pelos capítulos: Introdução - página básica Juntando tudo Folha de estilos DOCTYPE Estilizando texto Estilos externos Mais texto Estilizando tabelas As listas Estilizando formulários Os links Browsers Boxes CSS O futuro DIV’s Unidade 10 237
  • 228. Universidade do Sul de Santa Catarina A página também apresenta exemplos do uso do CSS em links, tabelas, menus e formulários. Para você ter uma idéia da simplicidade do tutorial recortei a confecção da página inicial para dar uma olhada: Etapa número 1 - Uma página básica Antes de fazer qualquer coisa, iremos precisar de uma página Web. E a seguir você tem uma página, a mais básica possível. <html> <head> </head> <body> Esta é a minha página Web </body> </html> Temos aqui três conjuntos de ‘tags’ - as tags, normalmente são aos pares, mas nem sempre é assim. Englobando toda a página temos o par de tags <html>...</html>. A primeira <html> é a ‘tag de abertura’ e a ‘tag de fechamento´ é a mesma com uma / (barra) entre o sinal de ‘menor que’ (<) e html. Dentro da tag <html> existem mais dois pares de tags. <head>...</head> contém informações que não foram ainda colocadas no nosso exemplo, a mais importante destas informações é o título da página que aparece na barra de títulos do navegador. Você dá um título a sua página, escrevendo-o dentro da tag title, como mostrado a seguir... <html> <head> </head> <body> <title>Minha Página</title> </body> </html> SEGUE238
  • 229. Comunicação Visual para WebO par de tags <body>...</body> engloba todo o conteúdoda sua página Web, texto, imagens, filmes Flash - e tudomais. Você poderá digitar no seu editor de texto, na janela decódigo do seu editor WYSIWYG - ou mesmo copiar, colar ocódigo da página básica mostrado acima.Bem, agora temos uma página Web que é bem renderizadaem qualquer navegador - depois que você tiver ‘salvado’ ela.Dê a ela o nome de ‘index.html’ pois este é o nome apropriadopara a primeira página de qualquer Web site. Você poderásalvar o arquivo em qualquer lugar no hard disk do seucomputador, mas para tornar as coisas claras e em ordem, crieum novo diretório para salvar sua página Web.O caminho normal para abrir sua página em um navegador éusar a opção ‘Abrir’ (‘Open’) no menu ‘Arquivos’ (‘File’) mas háum modo mais rápido. Crie um ‘shortcut’ do seu arquivo nodesktop. Dali você poderá arrastar o ícone do ‘shortcut’ diretopara a janela do navegador e sua página será carregada emostrada!Ainda que seja uma maravilha, sua página Web não possuium ingrediente vital - o conteúdo. Não há sentido em umapágina Web se ela não diz nada (ou outra coisa senão “Este é oconteúdo da minha página Web!”) mas isto eu vou deixar porsua conta.Qualquer conteúdo deve ser colocado entre o par detags<body>...</body> para que o navegador possa renderizá-lo.Encher de textos a página, assim como ela está, não dá umaestrutura e nem estiliza os textos. Por não dar estrutura euquero dizer que os textos simplesmente fluem da esquerdapara a direita, de cima para baixo, que as palavras não temoutra ênfase particular que não seja a ordem natural emque são escritas. Faria muito mais sentido grupar palavras esentenças em parágrafos, títulos, subtítulos - bem, você devesaber, aquelas coisas básicas de estruturação de textos que seaprende na escola.Browsers ignoram qualquer pulo de linha ou parágrafos quevocê insira em uma porção de texto. Eles ignoram tambémtabulações e até múltiplos espaços entre palavras que sãointerpretados como um espaço único.É útil em qualquer porção de texto marcar títulos, subtítulos,alguns parágrafos e talvez até uma assinatura final.Em HTML, existem diferentes tags de marcação que seconstituem no mecanismo apropriado para estruturar ostextos. SEGUE Unidade 10 239
  • 230. Universidade do Sul de Santa Catarina Cria-se um parágrafo, colocando texto entre o par de tags <p>...</p>. Em HTML, um parágrafo é um bloco constituído de uma ou mais sentenças separado do próximo bloco por um espaço - tal como este parágrafo que você vê aqui. Para títulos, existem seis níveis distintos de ênfase, indo desde o mais alto nível <h1>...</h1> até o mais baixo <h6>...</h6>. Eles são como mostrados a seguir... Como você pode notar diminui o tamanho quando cresce o número que indica o nível sendo que o h4 equivale aproximadamente ao tamanho de texto chamado ‘small’ (pequeno). h5 e h6 são ‘smaller’ (menor) ,mas em negrito. Existem outros truques que podemos usar para dar ênfase a palavras ou frases. Antes de considerar como eles devem ser apresentados, considere acima de tudo sua função. Bold (negrito) é uma variante mais destacada que o texto normal e marcada com o par de tags <b>...</b> contudo, trata-se de um estilo de apresentação para impressão e na Web é preferível usar-se strong <strong>...</strong>. Embora elas (tags bold e strong) se pareçam iguais quando renderizadas na tela de um monitor, o HTML deverá servir a outros dispositivos também. Softs leitores de tela usados por pessoas portadoras de necessidades especiais para visão, entenderão perfeitamente <strong> e lerão com a devida ênfase. Você deve saber que itálico é conseguido com a tag <i>...</i>. E aqui também, é melhor você não se utilizar de estilização visual, mas usar <em>...</em>. Este par de tags dá a funcionalidade do itálico ao texto independentemente do dispositivo em uso. SEGUE240
  • 231. Comunicação Visual para WebSublinhado pode ser conseguido com o par de tags<u>...</u> , mas sublinhados na Web tem um significadoespecial. Usualmente indica um link. É melhor não usarsublinhado para enfatizar, pois esta prática poderá confundir ovisitante do site.Uma importante tag é a de quebra de linha <br>. Aocontrário de outras tags, esta não requer uma tag defechamento, aliás tag de fechamento neste caso não fariaqualquer sentido, não é mesmo?Usando estas tags básicas de marcação, o texto começa atomar forma. Ele se assemelhará a um texto produzido emum processador de texto.Esta página básica, provavelmente se parecerá um poucodiferente quando visualizada em diferentes navegadorese computadores. Cada navegador tem o seu próprio estilopadrão e a menos que você configure seu navegador eleusará os estilos padrão. Para sobrescrever os estilos-padrãodos navegadores, nós criaremos nossos próprios estilos queserão agrupados em uma ‘folha de estilos’. Unidade 10 241
  • 232. Universidade do Sul de Santa Catarina Síntese Nesta unidade você viu aspectos relacionados a famílias tipográficas, suas características, restrições de uso e sugestões de uso visando a melhoria de aspectos relacionados à estética e legibilidade. Foram vistos conceitos que contribuem no bom layout como alinhamento e espaçamentos adequados a situações específicas. Percebeu-se durante a unidade a influência psicológica sobre o cliente, o tipo de fonte utilizada e a mensagem que se deseja passar ao cliente por meio do site. Além destes aspectos, também foi possível entender a filosofia existente no uso do CSS e sua proposta de proporcionar a facilidade e a rapidez na manutenção do site. Atividades de auto-avaliação 1. O uso dos tipos reutilizáveis provocou uma revolução cultural permitindo a milhares de pessoas a possibilidade de leitura, inclusive da bíblia que até então era restrita ao clero. Sobre as afirmações abaixo é correto afirmar: a) ( ) Os tipos são a forma e o design de cada letra. b) ( ) A tipografia em sua forma atual é responsável pela composição de palavras e transmissão de significados possível pela grande variedade de tipos de fontes disponíveis no mercado. c) ( ) A prensa de Nuremberg foi o primeiro invento que possibilitou o reaproveitamento de tipos e a construção de textos. d) ( ) Quanto maior o dpi melhor a resolução da fonte. e) ( ) Os tipos são peças de metais utilizadas na mídia impressa.242
  • 233. Comunicação Visual para Web2. Identifique as características relacionadas abaixo, indicando o tipo a que pertencem: tipo (CS) Com Serifa ou (SS) Sem Serifa: a) ( ) São consideradas mais legíveis para leitura em monitores de vídeo. b) ( ) São utilizadas em situações onde se deseja repassar ao leitor sensações relacionadas à descontração ou feminilidade. c) ( ) Suas fontes apresentam uma continuidade e acabamento dando ao leitor uma sensação de prolongamento das letras. d) ( ) Suas representantes mais utilizadas são Helvética e Futura. e) ( ) São utilizadas em para repassar ao leitor sensações relacionadas à credibilidade e seriedade. f) ( ) Suas representantes mais utilizadas são Garamond e Times.3. Identifique nas frases abaixo as famílias tipográficas:(A) Moderna a) ( ) Esta unidade aponta para questões relacionadas a tipografia e a legibilidade.(B) Manuscrito b) ( ) Esta unidade aponta para questões relacionadas a(C) Decorativo tipografia e a legibilidade.(D) Sem serifa c) ( ) Esta unidade aponta para questões(E) Antigo relacionadas a tipografia e a legibilidade. d) ( ) e) ( ) Esta unidade aponta para questões relacionadas a tipografia e a legibilidade. f) ( ) Esta unidade aponta para questões relacionadas a tipografia e a legibilidade. Unidade 10 243
  • 234. Universidade do Sul de Santa Catarina 4. Assinale com [V] Verdadeiro ou [F] Falso: a) ( ) O uso de cabeçalhos centralizados torna-se legível em textos justificados. b) ( ) Textos justificados facilitam a leitura e a legibilidade. c) ( ) Cabeçalhos alinhados pela esquerda devem ser usados em textos alinhados pela esquerda. d) ( ) Utilize textos alinhados pela direita para textos curtos. e) ( ) O uso de textos centralizados prejudicam a legibilidade, visto que o leitor inicia a leitura pela lado esquerdo da tela seguindo para a direita. f) ( ) No uso de linhas de texto longas mantenha um máximo de 120 caracteres por linha. g) ( ) O uso de textos curtos é excelente para o uso da memória de curto termo do usuário. 5. Assinale as alternativas corretas: a) ( ) O uso de fontes superiores a 14 pontos deve ser evitado. b) ( ) O uso de caixa alta melhora a legibilidade da informação. c) ( ) A legibilidade de fontes até 6 pontos não é prejudicada. d) ( ) O uso do espaço entre linhas deve ser sempre de 2 pontos acima do tamanho da fonte. e) ( ) Considerar o uso da linha em branco ao invés do uso da endentação é uma alternativa interessante pois a linha em branco melhora a legibilidade e a composição visual da página.244
  • 235. Comunicação Visual para Web6. Assinale com [V] Verdadeiro ou [F] Falso: a) ( ) O uso do CSS permite dissociar linguagem de marcação da estilização. b) ( ) A idéia do uso do CSS nasceu a partir da necessidade de manutenção dos milhares de sites existentes no mundo Web. c) ( ) O HTML hoje é utilizado simplesmente como uma linguagem de marcação. d) ( ) O arquivo CSS está contido no HTML e é portanto, dependente deste. e) ( ) A definição de prioridades do CSS permite definir qual o estilo será utilizado quando for necessário decidir entre um ou outro. f) ( ) As folhas de estilo definidas pelo desenvolvedor do site prevalece sobre todos os demais. g) ( ) Estilo definido pelo usuário prevalece sobre todos os demais. h) ( ) Os estilos inline (dentro de um elemento HTML) tem a prioridade que prevalecerá sobre aquele definido na tag <head>. i) ( ) O segundo nível em prioridade é o estilo default do browser. Unidade 10 245
  • 236. Universidade do Sul de Santa Catarina Saiba mais SIMÕES, Aliana. <http://www.univila.br/professores/aliana/weB/> GILLESPIE, J, CSS from the Ground Up. <http://www.wpdfd.com/editorial/basics/index.html> SILVA, CSS from the Ground Up. <http://www.maujor.com/tutorial/joe/cssjoe1.php>246
  • 237. UNIDADE 11O futuro da Web Objetivos de aprendizagem Perceber as possibilidades da internet em um futuro próximo. Discutir sobre questões, restrições e características relacionadas à telefonia móvel. Seções de estudo Seção 1 Questões Filosóficas na Web Seção 2 Novas Tendências
  • 238. Universidade do Sul de Santa Catarina Para início de conversa Discutir o futuro da Web tem sido tema de pesquisas, estudos e discussões acirradas tanto no meio científico quanto empresarial. Mas por que? A resposta é: pelo grande potencial de negócios e troca de informações existentes nesta tecnologia. Descobrir, prever a melhor maneira de adaptá-la as reais necessidades de seus usuários significa fidelizar este usuário, cada vez mais ao seu uso. Propor inovações é um desafio, mas sua implantação pode ser um marco de sucesso ou fracasso. O uso da Web caminha a passos largos, no Japão e Estados Unidos, indicadores apontam que 50% dos carros a serem lançados no mercado no próximo ano, virão com módulos de comunicação embutidos. O número de celulares vendidos tem crescido de forma exponencial no mundo todo. A humanidade caminha para a era da comunicação, a Web deve acompanhar esta tendência, mas será que já estamos preparados para esta evolução? SEÇÃO 1 - Questões filosóficas na Web Em 1990, Berners-Lee com suas pesquisas contribuiu de forma brilhante com o desenvolvimento da Internet. A grande inovação de Berners-Lee não era ambiciosa, ele queria apenas facilitar o compartilhamento de informações entre os diversos pesquisadores no laboratório de física onde trabalhava em Genebra. Filho de matemáticos, os pais cedo trouxeram inovações da era computacional ao jovem, ambos trabalharam no projeto do computador MARC I, o primeiro computador comercial da era moderna. A visão original de Berners-Lee para a Web era a de uma ferramenta de colaboração, no estilo da Wikipédia. Esta visão infelizmente não se concretizou. Hoje tentamos imaginar como a internet vai estar daqui a dez anos e as perspectivas são realmente “alucinantes”!248
  • 239. Comunicação Visual para Web <http://www.terra.com.br/ istoedinheiro/346/ecommerce/346_ pai_internet.htm> Figura 11.1 - O pai da WebEm 2004, o Pew Internet & American Life Project, umaorganização de pesquisa de Washington, enviou uma pesquisacom 24 perguntas sobre o futuro da internet para especialistas dediferentes empresas e universidades como a Microsoft, a AmericaOnline, a Intel, a IBM e estudiosos da Universidade do Texas,da Universidade de Negev Ben Gurion, em Israel, Universidadeda Califórnia entre outros, procurando traçar um possível perfilda internet na próxima década. Encontrar unanimidade emuma pesquisa como esta é difícil, mas mesmo assim 42% dospesquisados concordaram com a afirmação de que o envolvimentocivil aumentará nos próximos dez anos pela facilidade com que arede disponibiliza organizações on-line.Dos entrevistados, 40% consideraram a proliferação de recursosmédicos on-line como certo e acham este fato excelente paraa área da saúde. Mas 66% acreditam que a infra-estrutura dainternet sofrerá pelo menos um “ataque devastador” até 2014.Outro resultado apontado está relacionado ao uso de blogsque deve provocar mudanças nas indústrias da mídia e da Curioso sobre blogs? Saibacomunicação e na forma como esta ocorre na linguagem escrita. um pouco mais acessandoMuitas mudanças são apontadas na educação e no trabalho na Miditeca o artigo muitopossibilitando o incremento do trabalho globalizado e o ensino a interessante escrito por Paulo Ricardo Colacino sobdistância. o título “Blogs na Gestão do Conhecimento”. O estudo na íntegra se encontra no site da Universidade Elon, na Carolina do Norte. Se você quiser dar uma espiadinha entre no site: <www.elon.edu/predictions>. Unidade 11 249
  • 240. Universidade do Sul de Santa Catarina A incubadora Cietec formada por empresas de tecnologia, instalada na Universidade de São Paulo, fez uma estimativa do mercado tentando lançar luz sobre as expectativas para a internet até 2011 no Brasil: Ano 2011 População Brasileira 199,9 milhões de habitantes População conectada à Internet 52,9 milhões de internautas Percentual da população conectada 26,5 % Taxa de crescimento anual 2001-2011 19 % Estimativa evolução da Internet (Felipini, 2005). O Brasil encerrou o mês de dezembro/2004 com 10,9 milhões de internautas residenciais, segundo pesquisa do Ibope NetRatings. Outro dado interessante apresentado é o tempo de navegação dos internautas, atingindo a média de 13 horas e 23 minutos por usuário. Na comparação com outros países em termos de tempo navegado, o Brasil aparece atrás do Japão (14 horas e 36 minutos), da França (13 horas e 52 minutos) e Estados Unidos (13 horas e 34 minutos) (WebNews, 2005). O relatório afirmou também que a categoria e-commerce atraiu 5,6 milhões de usuários residenciais em dezembro. SEÇÃO 2 – Novas tendências Como você pode perceber, a internet continua em franca expansão em seu número de usuários. Todos se perguntam como a tecnologia vai evoluir, mas com certeza podemos vislumbrar no futuro o seu uso em diferentes mídias. O W3C tem uma visão concreta deste futuro, seu maior desafio é a padronização do desenvolvimento de modos de interação simultâneos e múltiplos por meio do olho, ouvido, voz e toque. Além do nosso conhecido teclado, mouse e as saídas de interação visuais e de áudio, novos meios de interação estão se tornando comuns. Os internautas250
  • 241. Comunicação Visual para Webdevem ser capazes no futuro, de escolher o meio de interação quemelhor supra as suas necessidades.O W3C profetiza por meio de suas pesquisas que as atividadesrelacionadas ao futuro da Web passam pela interaçãomultimodal, na atividade do browser da voz, e na atividade paraindependência de dispositivo. Segundo o W3C, estas novastecnologias melhorarão o acesso à Web por meio de dispositivosmóveis, tais como telefones e handhelds. <Fonte: http://images.google.com.br>A internet móvelVocê sabe o que significa internet móvel? Podemos dizer que internet móvel é o uso de tecnologias de comunicação sem fio (wireless) para aceso a informações e aplicações Web, a partir de dispositivos móveis como celulares e handhels (TAURION, 2002).O uso da internet móvel apresenta características totalmentediferentes da internet acessada por desktops, o que deve serclaramente observado ao fazermos uso destes dispositivos. Unidade 11 251
  • 242. Universidade do Sul de Santa Catarina Taurion (2002) sugere o uso da tecnologia móvel para aplicações dos seguintes tipos: Voltadas ao consumidor que visam facilitar a vida diária do usuário (compras, entretenimento, transações financeiras, localização, acesso a notícias e e-mail). Profissional móvel sendo utilizada por médicos, técnicos em manutenção, auditores e consultores. Nela estarão envolvidos serviços de e-mail. Acesso a informações sobre a empresa, clientes, produtos, criação de relatórios, e acesso a portais corporativos. Verticais ou funcionais suportam funções ou indústrias específicas. Serão sistemas de automação da forças de vendas ou por exemplo, para o uso de um médico que pode acessar seus prontuários e até enviar uma prescrição médica por meio de seu equipamento móvel. Estas aplicações são possíveis porque equipamentos móveis possuem características fortes como: São sensíveis a localização geográfica. São sensíveis ao fator tempo, pois parte-se do princípio de que ninguém sai de casa sem ele. São pessoais, pois as pessoas os tratam como tratam objetos pessoais como carteiras e chaves, tornando-se muitas vezes extensão da própria personalidade de seu dono (comprovado pelo uso de personalizações disponíveis no mercado como capas, sons de toque, etc). O IDC realizou em 2001 um estudo sobre a adoção da internet móvel. Neste estudo percebeu-se que a internet móvel deve passar por três estágios. Deve passar em um primeiro momento pela comunicação básica (o usuário recebe e-mail, saldos bancários e promoções), a fusão à internet para acesso a conteúdos (o usuário<Fonte: http://images.google. já é ativo na comunicação e após receber notificação acessa o sitecom.br> e realiza as operações necessárias). No terceiro estágio, ocorre a utilização em massa de aplicativos (usuários farão uso de aplicações personalizadas como reservas de passagem, aquisição de serviços).252
  • 243. Comunicação Visual para WebBerners-Lee, em recente entrevista, foi bastante explícitosobre o mercado da internet na telefonia móvel:“Existe mercado de massa para a Internet móvel, mas elecontinuará inexplorado, a não ser que os designers criempáginas de Web mais simples, que possam ser vistas de formaapropriada nos celulares”.“Os designers de sites aprenderam a projetar para deficientesvisuais e outras pessoas dotadas de necessidades especiais.Aprenderão, em poucos anos, a criar sites que atendam àspessoas que usam celulares”.Aplicações voltadas à internet móvel devem considerarcaracterísticas cognitivas do usuário que não estásentado em frente a um desktop, Alguns detalhes a seremobservados quanto a esse tipo de usuário são: Fonte: <http://images.google.com.br> O acesso a informações deve ser facilitado e sem maiores exigências por parte do usuário (ele pode estar caminhando e não podemos exigir que aperte botões, a informação deve ser concisa). O acesso ao conteúdo deve ser feito por demanda do usuário. O usuário espera que o acesso seja similar a Web Cache - é um lugar para guardar algo tradicional. temporariamente. Quando O celular é limitado em termos de capacidade visita uma página de web, a página será guardada na computacional. “cache” do seu telemóvel. Não esqueça de que muitos usuários ainda olham para Significa que quando voltar a uma destas páginas, o o celular como um celular e de forma alguma, querem browser poderá obtê-las a visualizá-lo como um mini computador. partir do cache, em vez de aceder às páginas através Nunca esqueça: a velocidade no acesso é crítica. do servidor originário, o que lhe permite pouparCaso você deseje se aventurar em projetos para Web móvel é tempo. Fonte Glossárioimportante lembrar que existem dois aspectos relevantes a serem Motorola <http://direct. motorola.com>considerados: o fluxo e a navegação e o gerenciamento da cacheno aparelho móvel. Unidade 11 253
  • 244. Universidade do Sul de Santa Catarina Quanto maior o número de acessos à rede, maior as chances de interrupções e frustrações relacionadas ao tempo de resposta. Taurion (2002) sugere alguns cuidados no projeto para a Web móvel: Usuários móveis são Cuidado ao abreviar ainda mais impacientes informações, lembre-se do que usuário web que mesmo sendo tradicional, tenha uma conciso, o texto deve atenção especial sobre o ser inteligível para o fator tempo de resposta. internauta. Mantenha o scroll de tela Considere no mínimo necessário. cuidadosamente o tamanho da tela Evite o desperdício de na hora de colocar banda de passagem, mapas e imagens (tem banners, figuras pesadas. aproximadamente 10 a 12 linhas). Cuidado no contraste das imagens, o internauta Informações relevantes pode utilizar o móvel em devem aparecer primeiro. qualquer lugar inclusive na praia de Copacabana Páginas devem ser com um sol de 40 graus! pequenas (são mais A imagem pode ficar rápidas de carregar). quase ilegível com muita luminosidade. Use tabelas simples com um mínimo de colunas Evite ícones retangulares. Não varie muito o tipo de Use textos concisos. fontes. Em termos de telefonia móvel a entrada de dados também é problemática. Neste caso pense que o uso de menus deve ser privilegiado evitando que o usuário tenha que digitar. Listas de opções são mais fáceis de selecionar no teclado de um celular. Se for necessária a digitação evite repetições e solicite o mínimo necessário.254
  • 245. Comunicação Visual para Web Fonte: <http://images.google.com.br>Evite usar recursos de um celular específico, pois você estarálimitando o uso de sua aplicação. Se você desenvolver para ummodelo em específico e voltado para um determinado hardwarevocê vai estar atrelado a este hardware não sendo possível utilizarseu produto em outra linha de celulares. Como você já percebeu,um longo caminho ainda deve ser trilhado até termos umainternet móvel eficiente. Mas o sucesso nesta jornada depende - emuito - de projetistas que explorem de forma correta e eficiente,os recursos destes equipamentos levando em consideração suasrestrições e características. Saiba mais Se você achou este material interessante, já existem alguns sites sobre o assunto que merecem sua visita, são eles: Site da PwC Consulting sobre a industria Telecom: <www.telecomdirect.pwcglobal.com> Site da GSM Association: <www.gsmworld.com> Site oficial do WAP fórum: <www.wapforum.com> <www.motorola.com> Site do Third Generation Partnership Project: <www.3gpp.org> Unidade 11 255
  • 246. Universidade do Sul de Santa Catarina Grades Outra novidade para a Web do futuro apresentada pela agência Reuters, publicada em janeiro de 2005, apresenta a grade com uma das grandes novidades para a plataforma Web. Uma grade é uma espécie de hiper-rede que liga computadores e recursos de armazenagem de dados, controlados por grupos diferentes, de modo que eles possam compartilhar poder de computação. Em comparação, a internet de hoje permite que os usuários independentes compartilhem dados, mas não recursos de computação. Se a ligação entre eles for forte o suficiente, os computadores individuais se fundirão em um quadro maior. O uso da grade pode ser visto como um grande potencial para o uso de jogos de computador. “Acredito absolutamente que o sistema de grades será a máquina do tempo do século XXI’’, diz Wolfgang Gentzsch, diretor do programa de grades da Sun Microsystems, fabricante de computadores de alto desempenho. Web semântica Sabe quando você procura informações na internet, por exemplo, sobre a cidade de Salvador? Os resultados vão desde informações turísticas sobre a cidade, prefeitura, editais, remédios, páginas pessoais de pessoas com este nome. O marcador de páginas traz uma mensagem desalentadora, muitas vezes com dezenas de mensagens que devem ser manualmente filtradas. A linguagem HTML, que popularizou a Web e é utilizada pela maioria dos sites, não possui recursos que permitam atribuir significado à informação. Para melhorar a indexação, isto significa gerar categorias para filtrar de forma mais apurada, as necessidades do internauta dentro de um contexto.256
  • 247. Comunicação Visual para Web O projeto da Web Semântica é conduzido pelo W3C, cujos princípios são incluir “informação sobre a informação” na Web. <www.w3C.org>A Web Semântica tem um componente que é fundamental paraa sua composição: é a linguagem XML, que permite descreversemanticamente os dados e, a partir de categorias que o própriousuário pode definir (COMCIENCIA, 2005).O XML é fundamental por permitir que um dado sejaencontrado e distribuído pela rede e apresentado em um browser Se você deseja conhecerde várias formas possíveis, ou então, pode ser transferido para mais sobre XML acesseoutras aplicações para processamento futuro e visualização. o tutorial disponível na página <http://www.Segundo (COMCIENCIA, 2005), outros componentes da Web gta.ufrj.br/grad/00_1/ miguel/>semântica são: URI: Universal Resource Identifier. Como a URL especifica uma identidade, não necessariamente por sua localização na Web. RDF: Resource Description Framework. Uma linguagem e uma gramática para definir informação na Web. Ontologias. Conjuntos de asserções que definem as relações entre conceitos e estabelecem regras lógicas de raciocínio sobre eles. Para interpretar o significado das informações, os computadores usarão ontologias. Agentes. Softwares que funcionam sem necessidade de controle direto ou supervisão permanente para cumprir demandas estabelecidas por um usuário. Unidade 11 257
  • 248. Universidade do Sul de Santa Catarina Síntese Esta unidade apresentou as grandes possibilidades da web e seu futuro promissor. Questões como o uso de meios multimodais para interação serão realidade em poucos anos. Assim como um acesso mais inteligente à informação pelo uso da Web semântica evitando que o internauta realize a filtragem, de forma manual de dezenas de páginas. A internet móvel e seus paradigmas foram apresentados neste capítulo demonstrando sua importância e a irreversibilidade de sua utilização. O uso pouco pensado da internet móvel deve ser evitado pois pode acarretar a frustração e negação total do usuário. Isto se deve as grandes diferenças de recursos e características inerentes a esta tecnologia. Na unidade também tivemos contato com algumas recomendações e propostas para o uso da Web em celulares e handhelds. Percebe-se aqui que o trabalho e a constante atualização, por meio de pesquisas do projetista é fundamental. Novos meios de interação serão disponibilizados através dos anos, cada meio com suas características próprias apresentando desafios permanentes que devem ser superados, procurando a oferta do melhor projeto de interfaces ao usuário final.258
  • 249. Comunicação Visual para WebAtividades de auto-avaliação1. Assinale as questões com [V] Verdadeiro ou [F] Falso. a) ( ) São considerados dispositivos móveis equipamentos como celulares e handhels. b) ( ) Berners-Lee foi um dos projetistas responsável pelo projeto Marc I. c) ( ) O foco central das pesquisas da W3C para o futuro da Web são relacionados aos métodos de interação como o escaner, mouse e browser de voz. d) ( ) Internet móvel é o uso de tecnologias de comunicação sem fio (wireless) para aceso a informações e aplicações Web. e) ( ) O usuário da internet móvel espera uma Web moderna, diferenciada da tradicional. f) ( ) Em pesquisas realizadas com a comunidade científica aponta-se a área médica como uma das grandes favorecidas pelo uso da internet. g) ( ) Equipamentos móveis possuem características como a sensibilidade de localização geográfica e a característica psicológica de se acomodar como parte do próprio internauta.2. Assinale as questões que devem ser consideradas no projeto Web para celular: a) ( ) Informações relevantes devem aparecer no final da tela. b) ( ) Mantenha o scroll de tela no mínimo necessário. c) ( ) O uso de figuras pesadas deve ser evitado. d) ( ) A resolução da tela de um celular é superior a de um desktop, sendo desnecessária a preocupação com o contraste de imagens. e) ( ) Utilize-se principalmente de ícones retangulares. Unidade 11 259
  • 250. Universidade do Sul de Santa Catarina f) ( ) Use textos concisos. g) ( ) Informações relevantes devem aparecer no final da tela. h) ( ) Faça uso de no mínimo 6 tipos de fontes diferentes para cada tela. 3. É correto afirmar que: a) ( ) O componente fundamental da Web semântica é o XML. b) ( ) A grade permite que os usuários independentes compartilhem recursos de computação. c) ( ) Web semântica significa gerar categorias que filtram de forma mais apurada as necessidades do internauta dentro de um contexto. d) ( ) A grade é uma espécie de hiper-rede que liga computadores e recursos de armazenagem de dados controlados por grupos diferentes. Saiba mais TAURION, Cezar. Internet móvel: tecnologias, aplicações e modelos. Ed. Campus, 2002. About W3C Future. 2005. <http://www.w3.org/Consortium/future>260
  • 251. Para concluir o estudoDurante esta disciplina a principal oportunidade vislumbradapelo conteudista foi a de demonstrar as possibilidadesde transmitir ou não informação por uma página Web,estabelecendo ou não comunicação com o usuário final.Somente estar disponível na grande rede não garante que ainformação esteja sendo transmitida como o cliente deseja.Existem muitas etapas e conceitos que devem ser seguidos paraque isto ocorra com sucesso tanto para o cliente quanto para ointernauta.Um dos pontos centrais apresentados na disciplina foi o de queo usuário final da página deve ser o maior referencial durante oprojeto, pois é a ele que você deseja atingir.A partir desta necessidade inicial descortinou-se nadisciplina fatores como projeto, imagens, textos, qualidade dainformação, das formas, dos diferentes temas desenvolvidosem páginas, da usabilidade necessária e como avaliá-la efinalmente as tendências de futuro da web. A conclusão quese chega é a de que cada um dos fatores listados contribui deforma determinante para o bom projeto de um site.A finalização desta disciplina só estará completa se você,aluno, aplicar estes conceitos na prática desenvolvendo deforma disciplinada em projetos criativos todo o conhecimentoadquirido durante esta disciplina.
  • 252. ReferênciasAbout W3C Future, 2005.<http://www.w3.org/Consortium/future>.BASTIEN,C., SCAPIN. Critères ergonomiques de Scapin et Bastien,<http://www.ergoweb.ca/criteres.html>, acessado em maio 2004.BISHU, R. Human factors of the web design process. In: IEA 2000. HumanFactors and Ergonomics Society (HFES) 2000 Congress. Proceedings, SanDiego, CA, p. I - 437-439.BORGES, R.C. <http://www.inf.ufrgs.br/~cabral/>, acessado em fevereiro 2005.BOYLE, CAILIN. Color Harmony for the web, Rockport Publishers Inc,Massachusetts.CARVALHO, F., FERREIRA, M.A. Learning and Interface Design ofEducational Hypermedia Systems, Congresso Nacional de ambientesHypermídia para aprendizagem. Florianópolis, 2004.Colloque sur l’engeniérie des interfaces homme-machine. Sophia-Antipolis, France.COMCIENCIA. Qual o sentido da Web.<http://www.comciencia.br>.CYBIS, W. Engenharia de Usabilidade, uma Abordagem Ergonômica.Laboratório de Utilizabilidade, UFSC, 2003.Design de sites determinará o sucesso da Web móvel,<http://informatica.terra.com.br/interna/0,,OI489828-EI553,00.html>, Reuters, 2005.DIAS, Cláudia. Recomendações para a acessibilidade do conteúdo daWeb -- 1.0.<http://www.geocities.com/claudiaad/acessibilidade_web.html>, acessado em maio/2005.DIAS, Cláudia. Usabilidade na Web. Rio de Janeiro: Alta Books, 2003.
  • 253. FASCIONE, L, VIEIRA, M.H. A tipografia nas empresas de Base Tecnológica. IV International Conference on Graphics Engineering for Arts and Design. São Paulo, 2001. FELIPINI, D. Porque Investir na Internet? Revista VendaMais, <http://www.setor4.com/site/materias01.htm>, Julho 2005. FERNANDES, Sérgio, L. Monitores Samsung: Reparação e Ajustes, Antenna, 2004. FILHO, Gomes J. Gestalt do Objeto, São Paulo: Escrituras Editora, 2003. FRABRIS, S; GERMANI, R. COLOR: Proyecto y estética en las artes gráficas. Madrid, 1973. GILLESPIE, J, CSS from the Ground Up. <http://www.wpdfd.com/editorial/basics/index.html>, 2005. HIX, D. & HARTSON, H. R. Developing User Interfaces: Ensuring usability through <http://webconn.locaweb.com.br/2004/NOTICIAS.asp?ID=298> <http://www.cg.org.br/infoteca/artigos/entrevista15.htm> <http://www.terra.com.br/istoedinheiro/346/ecommerce/346_pai_internet.htm> PAI INRIA, 1989. JOHN T. HANSEN & BRUCE M. KOEPPEN. Atlas de Fisiologia Humana de Netter. ARTMED & Bookman, 2003. KOFFKA, K. Princípios da psicologia da Gestalt. São Paulo, Cultrix, 1975. LEITE, J., SIECKENIUS, C., PRARES, R. Design Estrutura e Estética. 2002. LYNCH ,P. , HORTON S. Web Style Guide. Yale University Press, 2002 , USA. MARMION, J. A utilização de cor no mecanismo de interação com o usuário. <http://www.ibrau.com.br>, acessado em fevereiro 2005. NECCO CR., TSAI N. and Gordon CL. (1989). Prototyping: Use in the Development of Computer Based Information Systems. The Journal of Computer Systems. Fall 1989. Newman, W., Lamming, G. Interactive System Design. Addison Wesley Publishers Ltd, Cambridge, 1996. NIELSEN, Jakob. Designing Web Usability. New Riders Publishing, 2000, USA. Nielsen, Jakob. Projetando Websites. Rio de Janeiro: Campus, 2000. NIELSEN, Jakob. Usability Engineering, Academic Press, 1993, USA.264
  • 254. PERAZZO, L., MAZLOVA, T. Elementos da Forma. Rio de Janeiro, Ed. SenacNacional, 1997.PREECE, J.; ROGERS, Y.; SHARP, E.; BENYON, D.; HOLLAND, S.; CAREY, T.Human-Computer Interaction. Addison-Wesley, 1994.PRING, Roger. www.tipografia. Editorial Gustavo Gili, Barcelona, 1999.Product & Process. Wiley Professional Computing, 1993.RADFAHRER, Luli. Design/web/design. São Paulo: Market Press, 2002.Scapin, D. L. MAD: Une méthode analytique de description des tâches. IN:SCHNEIDERMAN, Ben. Designing the user interface, 2nd ed. Reading, MA:Addison-Wesley Publishing Co., 1992.SILVA. CSS from the Ground Up.<http://www.maujor.com/tutorial/joe/cssjoe1.php>.STANLEY W. JACOB & CLARICE ASHWORTH FRANCONE & WALTER J.LOSSOW. Anatomia e Fisiologia Humana. Addison-Wesley PublishingCo., 1992.TAURION, Cezar. Internet Móvel tecnologias. aplicações e modelos, Ed.Campus, 2002.WEBER, Raul, F. Arquitetura de Computadores Pessoais. Séries de LivrosDidáticos, Instituto de Informática da UFRGS, Sagra Luzzatto, Porto Alegre.WILLIANS, R., TOLLET, J. Web Design para Não Designers. Ed. CiênciaModerna, 2001.WINCKLER, M., BORGES, R.C., BASSO, K. Considerações sobre o usode cores em interfaces WWW. III Workshop de Fatores Humanos emSistemas e Computação, 2000, Gramado, RS.ZELDMAN, Jeffrey. Projetando Web Sites Compatíveis. New Riders, 2004. 265
  • 255. Sobre a professora conteudistaVera Rejane Niedersberg Schuhmacher é Mestre emEngenharia de Produção com ênfase em Usabilidade deSoftware pela Universidade Federal de Santa Catarina- UFSC. Professora da Unisul desde 1998 em disciplinasoferecidas nos cursos de Ciência da Computação eSistemas de Informação e Pós-graduação. Pesquisadorado Núcleo de Computação atua como Coordenadora doNPU- Núcleo de Pesquisas em Usabilidade prestandoconsultoria em Engenharia de Software e Usabilidadeem empresas de tecnologias e projetos financiados porórgãos de fomento como Finep, CNPq e Funcitec.
  • 256. Respostas e comentários dasatividades de auto-avaliaçãoUnidade 11. A pregnância baseia-se na simplificação natural da percepção. Ao fazer um desenho as áreas regulares são as mais fáceis de serem compreendidas pois exigem menos simplificação por parte do individuo. A pregnância da forma faz com que o individuo 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 são agrupados pelo critério da proximidade e semelhança, observe a direita a caixa de cotação, o fundo é de um rosa claro e toda a tabela da idéia de agrupamento. Da mesma forma observe a imagem da menina no ônibus a proximidade do texto da idéia de agrupamento com o texto que vem logo abaixo. Outro exemplo forte é o menu, a cor agrupa pela semelhança todo o conjunto indicando pela diferença no tom os itens que se encontram ativados. (www.ft.com)3. Um exemplo de Outro exemplo é o logotipo fechamento é o logotipo do Armazém Vieira - <http:// da Pizarria Massa Fina da www.armazemvieira.com.br/> cidade de Santo Amaro no estado de São Paulo.
  • 257. Universidade do Sul de Santa Catarina 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) B g) A 6. Um ponto forte no diálogo de uma página é o uso de metáforas do mundo real. Um site de supermercado onde são vendidos produtos para posterior entrega por exemplo. O site deve ser estruturado colocando os produtos utilizando-se a distribuição dos produtos de forma idêntica ou mais próxima possível do existente no supermercado real. Isto significa utilizar-se da categorização dos produtos por corredores como ocorre no supermercado. Por exemplo: Produtos de limpeza, Bebidas, Confeitaria, etc. O cliente vai se recordar da seqüência de forma automática sentindo-se confortável em um ambiente que ele já conhece. Outra questão interessante é fazer uso do que já faz parte da memória popular, por exemplo o uso de recursos como ícones, o uso do carrinho de compras é o ideal neste projeto pois é uma metáfora conhecida na internet e que ao mesmo tempo é próxima do mundo real. Os corredores virtuais (Produtos de limpeza, Bebidas, Confeitaria , etc) devem ser disponibilizados o tempo todo em todas as páginas, evitando que o cliente tenha que sair de um setor e procurar em um menu de outra página por um produto desejado.270
  • 258. Comunicação Visual para WebUnidade 21. São diversos os fatores que interferem na distinção de pontos mas todos elas estão relacionadas ao campo visual. Um dos fatores importantes é espaçamento dos fotorreceptores na retina e a precisão da refração do olho.2. a) C b) B c) B d) C e) B f) C g) C3. As cores secundárias são formadas por duas cores primárias (azul, amarelo e vermelho) misturadas em partes iguais.4. O uso de cores complementares devem ser utilizadas para dar força e equilíbrio a um trabalho criando o máximo de contraste. Se você quiser oferecer a sensação de uniformidade, profundidade, movimento, luz e sombra então utilize uma cor análoga.5. Considere com cuidado o assunto da página, o público-alvo e o ambiente onde o site será utilizado.Unidade 31. Alternativa correta: C2. Alternativa correta: C3. Alternativa correta: A e D4. Alternativa correta: B5. Alternativa correta: B 271
  • 259. Universidade do Sul de Santa Catarina Unidade 4 1. O termo usabilidade foi utilizado incialmente por ciências como a Ergonomia e a Psicologia. Em um primeiro momento utilizou-se o termo “user-friendly” intuitivamente tentando expressar questões relacionadas a amigabilidade da interface. O uso desta expressão mostrou-se fraco para expressar situações onde existem diferenças entre diferentes usuários relacionados a sua aptidão e conhecimento da tarefa. 2. a) B b) C c) A 3. a) O site pode promover flexibilidade oferecendo ao usuário mecanismos alternativos para o alcance de seus objetivos. O uso de um menu lateral é de uso corrente na internet mas além dele voce pode oferecer um mecanismo de busca para que o usuário chegue ao seu objetivo mais rapidamente. b) Para tornar a seqüência de interações mais fáceis de aprender para o usuário é importante selecionarmos uma amostra da população a fim de identificarmos a forma como este usuário pensa sobre as tarefas propostas no site. Em outras palavras o projeto de interações deve refletir a forma como seu potencial usuário imagina que seriam realizadas. Outro aspecto a ser considerado é o uso de mecanismos que promovam a boa condução da tarefa no site, o oferecimento de mecanismos de ajuda consistentes com a situação em que o usuário se encontra naquele momento, e o cuidado em manter um projeto de ícones adequados a ação proposta para eles. A aprendizagem está intrinsicamente ligada ao uso de denominações adequados a linguagem do usuário. 4) a) F b) V c) F d) V e) F f) V g) V h) F272
  • 260. Comunicação Visual para Web5) Medir o grau de usabilidade permite perceber o quanto o usuário ao utilizar seu produto conseguiu atingir seus objetivos e sub-objetivos. É importante para que você perceba qual o esforço mental, físico, tempo, custos materiais ou financeiros necessários para atingir este objetivo. No site Boa Noite você poderia fazer uso de um questionário de satisfação junto aos clientes avaliando reclamações, criticas, sugestões e acertos do produto. Também é sugerido um ensaio de interação com o usuário a partir da indução de uma seqüência de tarefas a serem executadas no site, deve ser observado então o tempo despendido na execução da tarefa, a completude e as dificuldades em sua execução.Unidade 51. Alternativa correta: C2.Condução• Alta densidade informacional( Excesso de propaganda, informações desnecessárias)• Links desorganizados e confusos.• Uso excessivo de destaques de palavras prejudicando a legibilidade.• Desequilíbrio entre a quantidade de textos e outras mídias (animações) prejudicando a legibilidade.• Os itens estão distribuídos de forma inadequada dentro das categorias dificultando o alcance do objetivo do cliente (ex. bomba d’agua Dancor).• O atendimento on-line é demorado e não resolve o problema, indicando outro site para a solução frustrando o usuário.Carga de Trabalho• Na busca avançada não são exibidos todos departamentos fazendo com que o internauta tenha que fazer a busca manual no próprio departamento.• Fadiga visual pelo uso das cores vermelho e amarelo.Controle Explícito 273
  • 261. Universidade do Sul de Santa Catarina • A página apresenta uma caixa sobre direitos autorais que é apresentada sobre a caixa principal sem a solicitação do usuário. • Não há botões ou links para retirar o produto do carrinho de compras, é preciso colocar a quantidade zero. • Algumas categorias que são anunciadas no site encaminham para a compra em outra página sem que o internauta realize qualquer ação para isto. • Ao se solicitar informações sobre um produto, são apresentados outros produtos indesejados e que não foram solicitados. Gestão de erros • Exibição de mensagens complexas. • Em situações onde uma entrada de dados ocorre de forma incorreta, a mensagem não apóia o cliente na correção do erro Adaptabilidade • Limitação na quantidade de compra de um mesmo produto. • Não permite a personalização da página para portadores de baixa visão. Homogeneidade • Na categoria “Motores”, a página muda de layout quebrando toda a consistência do site. Compatibilidade • A busca de um produtos incorreta apresentando outros não solicitados. Este resultado não é compativel com o que o cliente espera. • Não possui recurso para portadores de necessidades especiais. • Ao ser utilizado no browser Mozilla não abre todos os frames.274
  • 262. Comunicação Visual para Web3. a) A b) T c) B d) A e) BUnidade 61. Uma estrutura adequada pode ser a estrutura linear pois existe é uma forma bastante simples de organizar a informação tendo em vista que os assuntos já possuem uma sequencialização.2. Utilize um menu vertical ou horizontal oferecendo os principais serviços do site. Permita o uso da busca para que o internauta tenha a possibilidade de uma busca rápida no site. Faça uma pesquisa com uma amostra de possíveis usuários verificando com os mesmos quais as informações consideradas importantes no momento da visita a um site de hotel, quais as informações que o internauta considera que deveriam de estar mais próximas a fim de facilitar sua navegação. Os links devem ser breves concisos e na linguagem do internauta, caso exista algum termo específico será colocada uma ajuda sobre o termo. Os links e botões devem ser visualmente identificáveis o que significa reconhecíveis pelo usuário.3. Alternativas corretas: A e B4. Alternativas corretas: B e DUnidade 71. a) V b) F c) F d) V e) V 275
  • 263. Universidade do Sul de Santa Catarina 2. a) V b) F c) V d) F 3. a) F b) V c) V d) F e) V f) V 4. a) V b) V c) F d) V 5. Alternativas corretas: B e D Unidade 8 1. a) E b) B c) A d) D e) C f) F 2. Alternativas corretas: C, D e E 3. Alternativas corretas: B, C e F276
  • 264. Comunicação Visual para Web4. a) V b) F c) V d) F e) F f) F g) F h) VUnidade 91. a) V b) V c) V d) V e) B f) B g) V2. Alternativas corretas: A e C3. Alternativa correta: B4. Alternativa correta: B5. a) Gif b) Jpg c) Jpg d) Gif e) Jpg f) GiF g) Gif h) Jpg 277
  • 265. Universidade do Sul de Santa Catarina i) Gif j) Jpg k) Gif l) Jpg m) Gif n) Gif o) Jpg 6. Alternativas corretas: B e D Unidade 10 1. Alternativas corretas: A, B e E 2. a) SS b) CS c) CS d) SS e) CS f) CS 3. a) A b) B c) D d) A e) E f) C278
  • 266. Comunicação Visual para Web4. a) V b) F c) V d) F e) V f) F g) V5. Alternativas corretas: A. D e E6. a) V b) V c) F d) F e) V f) F g) V h) V i) FUnidade 111. a) V b) F c) F d) V e) F f) V g) V2. Alternativas corretas: B, C e F3. Alternativas corretas: A, B e C 279