Comunicação visual pra web

Universidade do Sul de Santa Catarina

Palhoça

UnisulVirtual

2007

Comunicação Visual para Web

Disciplina na modalidade a distância

Apresentação

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

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

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

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

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

Equipe UnisulVirtual

Vera Niedersberg Schuhmacher

Palhoça

UnisulVirtual

2007

Design instrucional

Flavia Lumi Matuzawa

3ª edição revista


Livro didático

Copyright © UnisulVirtual 2007

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

Ficha catalográfi ca elaborada pela Biblioteca Universitária da Unisul

004.61S41 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 bibliografi a.

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

Créditos

Unisul - Universidade do Sul de Santa CatarinaUnisulVirtual - Educação Superior a Distância

Campus UnisulVirtual

Rua João Pereira dos Santos, 303

Palhoça - SC - 88130-475

Fone/fax: (48) 3279-1541 e

3279-1542

E-mail: [email protected]

Site: www.virtual.unisul.br

Reitor Unisul

Gerson Luiz Joner da Silveira

Vice-Reitor e Pró-Reitor

Acadêmico

Sebastião Salésio Heerdt

Chefe de gabinete da Reitoria

Fabian Martins de Castro

Pró-Reitor Administrativo

Marcus Vinícius Anátoles da Silva

Ferreira

Campus Sul

Diretor: Valter Alves Schmitz Neto

Diretora adjunta: Alexandra Orsoni

Campus Norte

Diretor: Ailton Nazareno Soares

Diretora adjunta: Cibele Schuelter

Campus UnisulVirtual

Diretor: João Vianney

Diretora adjunta: Jucimara Roesler


Administração

Renato André Luz

Valmir Venício Inácio

Bibliotecária

Soraya Arruda Waltrick

Cerimonial de Formatura

Jackson Schuelter Wiggers

Coordenação dos Cursos

Adriano Sérgio da Cunha

Aloísio José Rodrigues

Ana Luisa Mülbert

Ana Paula Reusing Pacheco

Cátia Melissa S. Rodrigues (Auxiliar)

Charles Cesconetto

Diva Marília Flemming

Itamar Pedro Bevilaqua

Janete Elza Felisbino

Jucimara Roesler

Lilian Cristina Pettres (Auxiliar)

Lauro José Ballock

Luiz Guilherme Buchmann

Figueiredo

Luiz Otávio Botelho Lento

Marcelo Cavalcanti

Mauri Luiz Heerdt

Mauro Faccioni Filho

Michelle Denise Durieux Lopes Destri

Moacir Heerdt

Nélio Herzmann

Onei Tadeu Dutra

Patrícia Alberton

Patrícia Pozza

Raulino Jacó Brüning

Rose Clér E. Beche

Design Gráfi co

Cristiano Neri Gonçalves Ribeiro

(coordenador)

Adriana Ferreira dos Santos

Alex Sandro Xavier

Evandro Guedes Machado

Fernando Roberto Dias Zimmermann

Higor Ghisi Luciano

Pedro Paulo Alves Teixeira

Rafael Pessi

Vilson Martins Filho

Equipe Didático-Pedagógica

Angelita Marçal Flores

Carmen Maria Cipriani Pandini

Caroline Batista

Carolina Hoeller da Silva Boeing

Cristina Klipp de Oliveira

Daniela Erani Monteiro Will

Dênia Falcão de Bittencourt

Enzo de Oliveira Moreira

Flávia Lumi Matuzawa

Karla Leonora Dahse Nunes

Leandro Kingeski Pacheco

Ligia Maria Soufen Tumolo

Márcia Loch

Patrícia Meneghel

Silvana Denise Guimarães

Tade-Ane de Amorim

Vanessa de Andrade Manuel

Vanessa Francine Corrêa

Viviane Bastos

Viviani Poyer

Gerência de Relacionamento

com o Mercado

Walter Félix Cardoso Júnior

Logística de Encontros

Presenciais

Marcia Luz de Oliveira

(Coordenadora)

Aracelli Araldi

Graciele Marinês Lindenmayr

Guilherme M. B. Pereira

José Carlos Teixeira

Letícia Cristina Barbosa

Kênia Alexandra Costa Hermann

Priscila Santos Alves

Logística de Materiais

Jeferson Cassiano Almeida da Costa

(coordenador)

Eduardo Kraus

Monitoria e Suporte

Rafael da Cunha Lara (coordenador)

Adriana Silveira

Caroline Mendonça

Dyego Rachadel

Edison Rodrigo Valim

Francielle Arruda

Gabriela Malinverni Barbieri

Josiane Conceição Leal

Maria Eugênia Ferreira Celeghin

Rachel Lopes C. Pinto

Simone Andréa de Castilho

Tatiane Silva

Vinícius Maycot Serafi m

Produção Industrial e Suporte

Arthur Emmanuel F. Silveira

(coordenador)

Francisco Asp

Projetos Corporativos

Diane Dal Mago

Vanderlei Brasil

Secretaria de Ensino a Distância

Karine Augusta Zanoni

(secretária de ensino)

Ana Luísa Mittelztatt

Ana Paula Pereira

Djeime Sammer Bortolotti

Carla Cristina Sbardella

Franciele da Silva Bruchado

Grasiela Martins

James Marcel Silva Ribeiro

Lamuniê Souza

Liana Pamplona

Marcelo Pereira

Marcos Alcides Medeiros Junior

Maria Isabel Aragon

Olavo Lajús

Priscilla Geovana Pagani

Silvana Henrique Silva

Vilmar Isaurino Vidal

Secretária Executiva

Viviane Schalata Martins

Tecnologia

Osmar de Oliveira Braz Júnior

(coordenador)

Ricardo Alexandre Bianchini

Rodrigo de Barcelos Martins

Edição – Livro Didático

Professora Conteudista

Vera Niedersberg Schuhmacher

Design Instrucional

Flavia Lumi Matuzawa

Leandro Kingeski Pacheco

Projeto Gráfi co e Capa


Diagramação

Rafael Pessi

Revisão

Revisare

Apresentação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 03

Palavras da professora . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 07

Plano de estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

UNIDADE 1 – Psicologia da comunicação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

UNIDADE 2 – Cores na Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

UNIDADE 3 – Etapas do processo de Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

UNIDADE 4 – Por que usabilidade? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

UNIDADE 5 – Avaliando a usabilidade de Websites . . . . . . . . . . . . . . . . . . . . . . . . . . .111

UNIDADE 6 – Navegação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .135

UNIDADE 7 – A compatibilidade na resolução de monitores e websites . . . . . . .151

UNIDADE 8 – Conteúdo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .169

UNIDADE 9 – Imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .197

UNIDADE 10 – Tipografi a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219

UNIDADE 11 – O futuro da Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247

Para concluir o estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .261

Referências . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .263

Sobre a professora conteudista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .267

Respostas e comentários das atividades de auto-avaliação . . . . . . . . . . . . . . . . . . . . .269

Anexo 1 - Imagens coloridas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .281

Sumário

Palavras da professora

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

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

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

10


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 fi delização do cliente ao site.

Plano de estudo

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

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

São elementos desse processo:

o livro didático;

o Espaço UnisulVirtual de Aprendizagem - EVA;

as atividades de avaliação (complementares, a distância e presenciais);

o Sistema Tutorial.

Ementa

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

12


Objetivos da disciplina

Propiciar o desenvolvimento de sites mais efi cientes centrados nos usuários.

Utilizar Instrumentos de elicitação de conhecimentos.

Esclarecer diretrizes para a concepção de Web sites consistentes a partir de normas e padrões reconhecidos.

Apresentar técnicas e instrumentos de avaliação de usabilidade para sites Web.

Carga horária

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

Agenda de atividades/ Cronograma

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

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

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

13


Atividades obrigatórias

Demais atividades (registro pessoal)

1UNIDADE 1

Psicologia da comunicação

Objetivos de aprendizagem

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

Conhecer a teoria da Gestalt do objeto.

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

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

Seções de estudo

Seção 1 O que é Gestalt?

Seção 2 Um pouco da história

Seção 3 Percepção da Forma

Seção 4 Os princípios da Gestalt

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

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

16


Para início de conversa

Quando você olha para uma página Web, para uma fi gura 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 signifi cado.

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 justifi cam 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.

17

Comunicação Visual para Web I

Unidade 1

SEÇÃO 1 – O que é Gestalt?

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

Figura 1.1 A Primeira Guerra Mundial*

*<http://www.

guerrasnomundo.hpg.

ig.com.br/index2.htm>

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

Os Gestaltistas queriam compreender quais os processos psicológicos que estavam envolvidos na ilusão de ótica. O que acontece ou como acontece quando um estímulo físico é percebido pelo ser humano com uma forma diferente do que ele é na realidade.

Na fi gura 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.

**<http://www.psicologia.

freeservers.com/gestalt/

movimento.html>

Figura 1.2 O castelo**

18


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

Figura 1.3 A ilusão das cores

Você costuma ir ao cinema? O movimento que vemos na tela é uma ilusão de ótica causada pelo fenômeno da pós-imagem retiniana. As imagens vão se sobrepondo em nossa retina e o que percebemos é um movimento. Mas o cinema que você vê é na verdade uma seqüência de fotografi as 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 fi siologia do sistema nervoso e na psicologia, comprovados por meio de experimentos e pesquisas.

SEÇÃO 2 – Um pouco da história

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

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

Para uma melhor compreensão,

visualize, no anexo 1, ao fi nal do

livro didático, esta fi gura colorida.

<http://www.psicologia.

freeservers.com/ilusoes/colors1.

html>

As imagens não são apagadas

imediatamente da retina.

19


Unidade 1

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

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

Figura 1.4 O conceito monista: o todo determina as partes

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

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

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

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




20


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áfi cas, o seguinte conceito: “o todo é mais do que a soma das partes”. Isto equivale a dizer que “A + B” não é simplesmente “(A+B)”, mas sim um terceiro elemento “C”, que possui características próprias.

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

21


Unidade 1

Unidade

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

S Figura 1.6 - Unidade Figura 1.7 - Unidade

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

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

Segregação

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

O uso de elementos como linhas, texturas, cores, sombras e outros nos permitem realizar a segregação. Na imagem 1.8 podemos segregar as principais unidades: o carro, a estrada e o fundo.

Mas é possível segregarmos a unidade automóvel em faróis, placa, vidros, rodas, calotas etc. Esta decomposição pode continuar até que todas as unidades visíveis tenham sido mapeadas.

22


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 fi gura 1.9. Em um primeiro momento o que exatamente você vê? Duas colunas ou quatro colunas?

aa aa aa aaaa aa aa aaaa aa aa aa

Figura 1.9 Proximidade

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

<http://images.google.com.

br/images?q=pessoas&hl=pt-

BR&lr=&start=100&sa=N>




23


Unidade 1

Quanto menor a distância maior a unidade.

Figura 1.10 Proximidade

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

Similaridade

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

Observe o seguinte exemplo:

OX OX OX OX aa aa aa aa

OX OX OX OX ou aa aa aa aa

OX OX OX OX aa aa aa aa

Figura 1.11 Similaridade

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

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

<http://www.pontofrio.com.

br/cgi-bin/loja.pl>

Para uma melhor

compreensão, visualize,

no anexo 1, ao fi nal do

livro didático, esta fi gura

colorida.

24


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 fi guras 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 fi gura (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)

Figura 1.12 Continuidade Fonte: Filho (2003)

Quando você vê a fi gura 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 fl uência e harmonia.

Uma fi gura 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 fi guras fechadas mesmo

xy

z

25


Unidade 1

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

Figura 1.13 Fechamento

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

Figura/Fundo

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

Figura 1.14 Figura/Fundo

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

Para uma melhor




colorida.

26





Normalmente, distingue-se fi gura de fundo pelo fato da fi gura 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 fi gura. No quadro Monalisa fi ca claro para o usuário a interpretação da fi gura e do fundo.

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

Na fi gura 1.15, a consideração do que é fi gura ou do que é fundo faz com que o indivíduo interprete a fi gura 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.

*<http://images.google.com.br/

images>

**<http://www.geocities.com/

Area51/9839/ilusoes.htm>

27


Unidade 1

Figura 1.17 Pregnância da forma

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

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

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

Figura 1.18 Baixa Pregnância da forma

http://encarta.msn.com/media_

461539938_761569238_-1_1/

Aerial_View_of_Mexico_City.html

Para uma melhor




colorida.

28


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.

Figura 1.19 Boa Pregnância da forma

Conheça mais sobre as leis da Gestalt

Bibliografi a 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/

<http://www.gimcracker.com/

archives/Taj-Mahal.jpg>




29


Unidade 1

SEÇÃO 5 – Os mecanismos de memorização

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

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

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

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

A Memória

A memória é o mecanismo que nos permite recordar pessoas, acontecimentos, coisas que aconteceram anteriormente. Desde que o ser humano iniciou sua trajetória em áreas de pesquisa, o funcionamento e as circunstâncias em que ocorrem a memorização são arduamente discutidas. Nas últimas décadas, muito se tem estudado a respeito das características e do funcionamento da memória humana. Estudos evoluíram, permitindo a compreensão dos meios fi siológicos de como o ser humano armazena as informações, assim como as razões pelas quais podemos perdê-las.

Figura 20. Recorde no Guinessbook

Richard Järnefelt de

Helsinki, Finland,

conquistou, em 1999,

o Guinessbook, com

um repertório de 3.000

músicas tocadas no piano,

sem partituras, apenas

com o uso da memória.

Fonte: http://www.

guinnessworldrecords.

com/gwr5/conten

30


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 codifi cação (estratégias de memorização) e a recordação.

A codifi cação vai permitir a maior ou menor facilidade de se recordar determinada informação. A recordação pode ser livre ou por reconhecimento (somos expostos a pistas que no reavivam a memória). Quando reproduzirmos o que entrou, recupera-se a memória.

Segundo Schneiderman (1992), a memória humana pode ser dividida em três partes, cada uma com diferentes características:

Memória Rápida ou de Curto Termo.

Memória de Trabalho ou Sensorial.

Memória Permanente ou de Longo Termo.

Memória de Curto Termo

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

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

31


Unidade 1

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

E então? Qual foi o resultado?

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

Memória de Trabalho ou Sensorial

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

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

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

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

32


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 quantifi car as informações que podem ser armazenadas nela ou mesmo seu espaço.

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

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

��

��

��

��

��

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

33


Unidade 1

SEÇÃO 6 – Restrições de tempo em relação à memorização

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

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

digitar, movimentar o cursor, ou selecionar com o mouse: 50-150 milissegundos;

tarefas simples como o iniciar um brower: menos de 1 segundo;

introduzir dados para buscas de dados: 1-4 segundos;

tarefas complexas como cálculos, registros : 8-30 segundos.

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

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

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

SEGUE

34


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 fl uxo 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 identifi cação e reconhecimento (páginas que somem rapidamente sem dar oportunidade de identifi caçã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.

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

Fonte: SCHNEIDERMAN (1992)

35


Unidade 1

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

Notícia é destaque hoje e esquecida amanhã

http://www.comciencia.br/reportagens/memoria/05.shtml

A memória

http://www.comciencia.br/reportagens/memoria/15.shtml

Síntese

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

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

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

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

36


Atividades de auto-avaliação

1) Qual o signifi cado 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.

37


Unidade 1

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

a) b)

c) d)

e) f)

g)

Para uma melhor




colorida.

38


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?

39


Unidade 1

Saiba mais

AMARO, Fausto. Mecanismos de memória.

www.ncs.iscsp.utl.pt/apontamentos/index.php?dir=3%BA%20Ano/&fi le=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.

2UNIDADE 2

Cores na Web


Entender o mecanismo fi siológico de reconhecimento das cores.

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

Compreender os efeitos e as infl uê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 Defi nição da cor de fundo da página

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

42



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 efi ciente da cor depende de fatores que variam de particularidades como: recursos visuais disponíveis, fatores humanos e do próprio contexto de uso e do ambiente onde a mesma será utilizada.

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

SEÇÃO 1 – Mas o que é cor?

Em 1966, Newton descobriu 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!

Figura 2.1

43


Unidade 2

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

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

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

Figura 2.2 - Decomposição da luz

SEÇÃO 2 – A visão humana da cor

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

<http://www.dailytimes.com.

pk/default.asp?page=story_

26-7-2005_pg9_9>




44


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áfi ca? Nosso globo ocular pode ser comparado a uma máquina fotográfi ca, 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 fi nas 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.

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

45


Unidade 2

Campo visual

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

Na região da fóvea (1) ocorre a projeção da imagem do objeto focalizado. Nós enxergamos com nitidez somente objetos focados na fóvea. Essa permite que a luz atinja os fotorreceptores sem passar pelas demais camadas da retina, maximizando a acuidade visual.

Os bastonetes, ausentes na fóvea, são encontrados principalmente na retina periférica (2,3), sendo responsáveis pela transmissão de informações para as células ganglionares.

No fundo do olho está o ponto cego, insensível à luz, não há cones nem bastonetes, dele emergem o nervo óptico e os vasos sangüíneos da retina.

Figura 2.4. - Campo Visual (WICKER, 2000).

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

É a capacidade de o

olho de distinguir entre

dois pontos próximos,

e depende de diversos

fatores, em especial

do espaçamento dos

fotorreceptores na retina

e da precisão da refração

do olho.

Para uma melhor

compreensão,

visualize, no anexo

1, ao fi nal do livro

didático, esta fi gura

colorida.

46


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 modifi ca, 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 fi gura 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 fi ca menos convexo (mais relaxado), como se objeto estivesse distante (WINCLER, 2000).

Figura 2.5 - Foco sobre a retina

Fonte: Apostila de técnicas de apresentação - Roberto Cabral de Mello Borges - UFRGS. 2003.


visualize, no anexo 1, ao fi nal

do livro didático, esta fi gura

colorida.

47


Unidade 2

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

A cegueira para algumas cores

Você sabia que o daltonismo é uma defi ciência na visão que difi culta a percepção de uma ou de todas as cores (na sua variação mais comum o daltônico não distingue o vermelho do verde)?

O daltonismo é uma defi ciê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ê verifi car sua acuidade visual? Qual número você vê nas esferas? Este teste tenta detectar a defi ciência da percepção da cor – o daltonismo.

Figura 2.6 - Teste de visão

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

<http://chost.sites.uol.

com.br/Principal/teste_

de_daltonismo.html>

Para uma melhor

compreensão,

visualize, no anexo



colorida.

48


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 fi gura baixo, construída por Fabris, em 1973. As cores primárias estão no centro, as secundárias (verde, laranja e violeta) no segundo triângulo. O terceiro ciclo se complementa com as cores terciárias.

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




49


Unidade 2

Cores complementares

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

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

Figura 2.8. - Cores complementares (Vera Schuhmacher)

Cores análogas

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

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

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

Para uma melhor

compreensão,

visualize, no anexo



colorida.

50


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 fi gura 2.8, quando acrescentamos branco a cor.

Para uma melhor

compreensão,

visualize, no anexo



colorida.

51


Unidade 2

Figura 2.11. Escalas tonais (Vera Schuhmacher)

Croma

É a qualidade específi ca de saturação da cor, que indica o seu grau de pureza. Mas o que é saturação? Imagine um copo de leite puro. Agora imagine você adicionando a este leite cinco colheres de chocolate em pó. O leite vai fi car bastante escuro. Agora você começa adicionando leite a esta mistura, a cor vai clareando, mas ainda é marrom, quanto mais leite você adicionar mais claro vai fi car o leite. Se você adicionar 10 litros de leite à mistura, é provável que o líquido fi que 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 fi car em preto e branco,com o grau de saturação em 0.

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

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

Para uma melhor

compreensão,

visualize, no anexo



colorida.

52


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.

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.

Para uma melhor

compreensão,

visualize, no anexo



colorida.

53


Unidade 2

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

Divirta-se !!

SEÇÃO 4 – Sistema e representação das cores

As cores são representadas de maneira diferente se o dispositivo refl ete ou emite luz. Objetos que não emitem luz refl etem uma parte da luz que incide sobre eles e absorvem a outra parte.

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

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

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

54


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.

SEÇÃO 5 – Defi nição da cor de fundo da página

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)

“Signal detection theory”, um

modelo estatístico elaborado na

década de 50.

55


Unidade 2

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.

Figura 2.15. Website da Disney

Figura 2.16. Website da banda Sepultura

<http://sepultura.uol.

com.br/v6/>

<http://disney.go.com/

home/today/index.html>

Para uma melhor

compreensão,

visualize, no anexo



colorida.

56


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

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

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

Figura 2.17. Website Mais Você

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

Figura 2.18. Website Lancome

<http://maisvoce.globo.com/

perfi l_apresentadora.jsp>

Para uma melhor

compreensão,

visualize, no anexo



colorida.

57


Unidade 2

Figura 2.19. Website Lancome

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

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

utilize a menor quantidade possível de cores para o fundo de seu site;

se for utilizar mais de uma cor, utilize cores próximas do espectro, que não criem contraste (fator de distração);

a percepção da cor é afetada pela luminosidade do ambiente. Considere as fontes de iluminação — naturais e artifi ciais — do local;

Para uma melhor

compreensão,

visualize, no anexo



colorida.

58


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.

Figura 2.20. Site da Banda Buenos Aires

Na fi gura acima, o fundo utilizado pela banda chama mais atenção do que o texto com as informações da banda. A legibilidade é prejudicada difi cultando 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 fi sioló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.

<http://www.buenosairesrock.

com.ar/PAGprincipal2.HTMl>

Para uma melhor

compreensão,

visualize, no anexo



colorida.

59


Unidade 2

São apresentadas, a seguir, algumas recomendações sobre o uso 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, dando ao usuário a opção de mudá-las, máximo de “cinco mais ou menos duas”.

Desse modo, as páginas de um mesmo site estarão mais propensas a terem um “padrão” consistente.

Use a cor como uma forma de informação adicional ou aumentada.

Evite confi ar na cor como o único meio de expressar um valor ou uma função particular.

Use cor para realçar ao invés de usar sublinhado (e use sublinhado ao invés de itens piscando).

Restrinja o uso do sublinhado para links, para não confundir o usuário.

Sempre que possível, evite usar cores muito quentes, tais como o rosa e o magenta.

As cores muito quentes parecem pulsar na tela e fi cam difíceis de focalizar.

Se for usado um fundo colorido, selecione as cores do texto de modo a obter o contraste mais forte entre o texto e o fundo.

Isso aumenta a visibilidade e a legibilidade do texto.

Recomenda-se o uso mnemônico da cor.

O uso mnemônico da cor é empregado respeitando os estereótipos para criar fortes associações para ajudar no reconhecimento, na lembrança e no tempo de busca. No 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.

SEGUE Figura.2.21 Site Submarino

Para uma melhor


no anexo 1, ao fi nal

do livro didático, esta

fi gura colorida.

<http//:www.

submarino.com.br>

60


Use cores brilhantes e contrastantes com cautela.

Esses elementos atraem a atenção do usuário e o seu emprego deve ser reservado para áreas importantes, caso contrário o usuário pode achar mais difícil saber para onde olhar e fi car confuso.

Use cores monocromáticas para o texto, sempre que for possível.

As cores monocromáticas são mais nítidas, aumentando a legibilidade e visibilidade do texto.

Recomenda-se o uso de uma cor neutra para fundos.

As cores neutras (por exemplo, cinza-claro) aumentam a visibilidade das outras cores.

Não use simultaneamente alto croma e cores que estejam muito distantes no espectro solar.

Para relações fi gura-fi gura e muitas fi gura-fundo, fortes contrastes de vermelho/verde, azul/amarelo, verde/azul e vermelho/azul criam vibrações, ilusões de sombras e imagens posteriores.

Use um código de cores consistente e familiar, com referências apropriadas.

Vermelho: pare, perigo, quente, fogo;

Amarelo: cuidado, devagar, teste;

Verde: ande, OK, livre, vegetação, segurança;

Azul: frio, água, calmo, céu;

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.

Use a cor para aumentar a informação mostrada em preto e branco.

No que concerne ao aprendizado e compreensão, a cor é superior ao preto e ao branco em termos do tempo de processamento e de reações emocionais, mas não há diferença 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 primeiramente em preto e branco, e então, adicionar a cor.

A cor aumenta o processamento cognitivo e visual de uma informação que funciona bem em preto e branco, pois ajuda a localizar, classifi car e associar imagens.

Evite o uso de blink

O uso intensivo de piscar (blink) um texto ou imagem causa fadiga visual, dependendo das cores usadas para fundo e texto ou imagem, o olho precisa reposicionar o correspondente sensor da cor a ser usada, em cada instante do efeito de piscar, ou, dependendo das cores usadas, reposicionar o foco a cada instante.

SEGUE

61


Unidade 2

Evite fundos escuros

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 o texto ou imagem pode ser convertida para escuro e se confundir com o fundo (além de gastar grande quantidade de toner/tinta).

Não usar cores alternativas para links

Pode-se acrescentar cores para casos alternativos como (mantendo-se os padrões):

Link ainda não visitado, que fi ca na mesma página (âncora) – verde;

Link já visitado na mesma página – rosa;

Link para o nodo hierarquicamente superior - laranja/amarelo âmbar.

Não tornar a tela muito brilhante ou escura

Use as cores brilhantes em áreas pequenas e cores suaves em áreas maiores.

Procure evitar cores que juntas causam ilusões óticas, como:

verde/vermelho;

azul/amarelo;

verde/azul;

vermelho/azul;

Use combinações legíveis para texto/fundo:

preto/branco;

branco/preto;

amarelo/preto;

verde/preto;

branco/vermelho;

preto/amarelo;

preto/verde;

ciano/magenta;

branco/marrom;

amarelo/marrom;

verde/marrom;

ciano/marrom;

magenta/marrom.

Use as cores da fóvea e periféricas apropriadamente, a fóvea fi ca na região central da retina, é composta de cones sensíveis ao detalhe:

use azul para áreas grandes ou formas pequenas , azul é bom para fundo de tela;

use vermelho e verde no centro do campo visual e não na periferia;

use preto, branco, amarelo e azul na periferia do campo visual.

Lembrar que cor mal utilizada é pior do que não usar cores.

62


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, indicados na tabela seguinte:

RGB 00 51 102 153 204 255

Hex 00 33 66 99 CC FF

Consulte, no anexo 1, a fi gura 2.22 referente à tabela que contém as 216 combinações seguras, com os seus códigos hexadecimais.

Números hexadecimais possuem

base 16. A denominação hexa

vem de hexa=6 e deci=10 que

indica a base 16. Cada número

hexa pode ter um valor de 0 a 9 ou

A, B, C, D, E, ou F. O numero hexa

é representado por quatro bits

de dados binários. Ex: o número

decimal 1 é representado por 1 em

hexadecimal e 0001 em binário, já

o número 10, é representado por A

no código hexadecimal e 1010 em

binário, 15 é representado pelo F e

1111 pelo binário.

63


Unidade 2

Síntese

Ao concluir esta unidade, você traz como bagagem conceitos relacionados à teoria das cores e aspectos de sua utilização. Você aprendeu que a visão humana da cor depende de aspectos fi siológicos e sua utilização efi ciente deve considerar estas limitações.

Durante o estudo verifi cou-se que as cores são reconhecidas em posições diferentes da retina, antes (azul) depois (vermelho) e sobre a retina (verde), este reconhecimento faz com que o usuário ao se deparar com interfaces onde ocorre a mistura destas três cores sinta fadiga visual.

Ao escolher a cor da página é importante determinar o assunto da 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 cores que interferem diretamente na aceitação do seu site pelo cliente.

O uso de contrastes, luminosidades e uma combinação assegura melhorias na comunicação com o internauta, transformando a cor em estímulo visual.

A cor pode ser usada para agrupar itens, transmitir informações e alertar o usuário sobre uma determinada situação, para que estas ações ocorram efetivamente foram apresentadas na unidade algumas recomendações que procuram preservar o bom uso da cor na Web relacionadas ao numero de cores a serem utilizadas, características de fundos considerados desejáveis, utilização de códigos de cores familiares entre outros.

Outro aspecto observado na unidade foi o uso da paleta de cores seguras para Web (216 combinações). Este uso garante ao projetista que o usuário enxergue na tela de seu computador as cores que voce está utilizando no projeto.

Na próxima unidade você vai estudar as etapas relacionadas ao processo de design e sua importância na promoção de um produto de qualidade.

64



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?

65


Unidade 2

4) 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?

66


Saiba mais

Site sobre cores, nomes, números em Hexadecimal e RGB

http://www.artifi ce.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.asp

3UNIDADE 3

Etapas do processo de Design


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 defi niçã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 Defi nição e Planejamento

Seção 3 Detalhamento da arquitetura e Design

68



As etapas de um processo de design são muitas vezes tortuosas. Identifi car quais profi ssionais são necessários ao projeto, os custos, o que deve ser analisado para iniciar o processo de design, são perguntas que fi cam sem respostas em muitas equipes, e que, por vezes, são esquecidas e ao fi nal 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 fi nanceiros 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.

69


Unidade 3

Muitas empresas têm investido no uso de equipes com conhecimentos multidisciplinares como tecnologia, marketing e design. Estas equipes procuram criar estratégias corporativas efi cazes e inovadoras para aplicação na Web, visando a atingir, de forma satisfatória, o público alvo.

��

��

�� !��

Figura 3.1 Modelo de interações entre membros de equipes interdisciplinares de

desenvolvimento Web . Fonte: Adaptado de BISHU (2000).

Na fi gura acima, Bishu (2002) sugere grupos de especialidade como: clientes, designers, desenvolvedores e engenheiros de usabilidade 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 que representem a população que fará uso do site, enriquecem o projeto.

Após experiências positivas e negativas na produção de sites, percebe-se que, além da diversidade de elementos humanos em diferentes especialidades, existe a necessidade de se observar um modelo de desenvolvimento de forma planejada e disciplinada.

Antes de “colocar a mão na massa” você deve estar preparado para seguir etapas que permitam a produção de artefatos (sub-produtos de etapas) que possam servir como sinalizadores da

70


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 defi nição e planejamento;

a defi niçã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 defi nições são adicionados ao projeto. Que tal explorar cada uma destas etapas nas próximas seções?

SEÇÃO 2 – Defi nição e Planejamento

Quando você inicia um projeto Web, algumas perguntas e respostas são fundamentais. A partir destas defi nições iniciais, idéias surgem e decisões são tomadas por todo o curso do projeto.

Um exemplo disto é a defi niçã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.

71


Unidade 3

O plano documentado evolui por meio de especializações para um documento de especifi cação. A especifi cação permite rastrear decisões de design permitindo o controle do projeto e medição do progresso do desenvolvimento.

Para você iniciar o seu trabalho de planejamento e defi nições é necessário que passemos por 3 pontos fundamentais:

identifi car os objetivos do site;

identifi car o público alvo do site;

identifi cação de necessidades técnicas relacionadas à produção do site.

A identifi cação dos objetivos

Antes de iniciarmos o projeto de design de um site é fundamental identifi carmos os seus objetivos (educação, entretenimento, vendas, religioso...). Ao defi nirmos claramente os objetivos do site e sua missão, estamos determinando fortes indicativos do seu público alvo, conteúdo, função e identidade do site.

Figura 3.2 Site Unimed

A identifi caçã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ágina principal do site da UNIMED, não fi ca claro o objetivo principal da empresa. Plano? Que tipo de plano? De previdência? Seguro? Saúde? Casa própria?

72


Figura 3.2 Site Brognoli

No site da Brognoli, já na primeira página fi ca claro o objetivo da empresa, pois remete ao seu papel como empresa do segmento imobiliário.

O objetivo é o resultado pretendido. O fi m é projetar uma mensagem para um público específi co, na esperança de obter dele a resposta desejada.

Conforme Lynch e Horton (2002), podemos iniciar a defi nição de metas do site com perguntas simples, como:

Qual a missão da organização?

Como a criação de um site pode apoiar a missão de sua organização?

Qual a atitude que você espera dos internautas que visitarem sua página?

Como você pretende medir o sucesso do site?

Quais estratégias você pretende utilizar no site para atingir suas metas?

O que você espera que os internautas pensem após visitarem sua página?

Como você pretende realizar as manutenções e atualizações do site após sua fi nalização?

Identifi caçã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ífi cos, assim

73


Unidade 3

como em suas necessidades. Os melhores sites são aqueles que dão suporte ao modo como os seus usuários desejam abordar os problemas.

Não basta ter um visual atraente, o conteúdo pode até ser bom, mas se o visitante tiver difi culdades para encontrar o que procura, vai abandoná-lo, com certeza.

Identifi car a população alvo do site é palavra de ordem para garantir o sucesso do projeto. Algumas perguntas iniciais podem servir de roteiro para iniciar este trabalho:

Quem usa o site?

Quem fornece 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 usabilidade na identifi cação das características do usuário.

Identifi cação de necessidades relacionadas à produção do site

Na etapa inicial, além de estabelecer metas e objetivos do site, também são defi nidos aspectos relacionados à tecnologia necessá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 Lynch e Horton (2002) que devem ser adaptados à sua realidade de produção. Neste caso você pode desenvolver novos questionamentos ou alterar os sugeridos.

74


Quem vai fazer parte da produção do site? Terceirizados? Funcionários de sua empresa? Quais são suas responsabilidades e disponibilidades?

Existirá no projeto a contratação de terceirizados? Quem será o elo de ligação nestes casos?

Quem vai gerenciar o processo de construção do site?

Aproximadamente quantas páginas deve conter o site? Qual é o número de páginas aceitáveis abaixo deste número? Ou acima dele?

Quais são os prazos estipulados para a entrega do site, existem sub etapas a serem consideradas?

A. Sobre a produção

B. Sobre a tecnologia

Quais browsers e sistemas operacionais devem ser suportados pelo site (Windows, Macintosh, UNIX, Linux/Netscape Navigator, Internet Explorer)? Qual a versão mínima?

Qual a largura de banda utilizada pela maioria dos visitantes do site?

O público alvo é externo ou interno?

Ethernet ou conexões de alta velocidade? ISDN, ou DSL conexões com velocidades médias? Conexões via modem?

Como será oferecido o suporte para os usuários?

Mensagens de E-mail?

Manuais on-line?

Salas de Chat, Fóruns, suporte por telefone?

HTML dinâmico (HyperText Markup Language) e características avançadas?

JavaScript ou vbscript?

Java applets?

Algum plugin especial é necessário?

Quais características específi cas do ambiente operacional funcionará como servidor?

Há necessidade de segurança e confi abilidade especiais?

Conteúdo Audiovisual

Existem no site produções de vídeo ou áudio?

Deve existir suporte ao banco de dados?

O usuário irá se logar em áreas restritas?

Consultas e atualizações são necessárias em um banco de dados?

75


Unidade 3

Nesta fase inicial ainda é fundamental:

A) Pesquisar. Conheça o domínio do site, instrua-se sobre o assunto. Observe sites semelhantes, assuntos semelhantes. Quanto mais informações conseguir reunir sobre o assunto melhor, pode-se ponderar sobre soluções de uma forma mais completa e abrangente.

* No sistema de

outsourcing uma empresa

contrata outra empresa

para executar tarefas

específi cas em seu

lugar, na forma de sub-

contratação.

Salários da equipe de desenvolvimento e da equipe editorial e de suporte.

Hardware e software necessários para o desenvolvimento do site.

Treinamentos necessários à equipe de desenvolvimento (banco de dados, linguagens, design).

Pagamentos de outsourcing*.

Design do site e desenvolvimento.

Consultorias técnicas.

Desenvolvimento do banco de dados.

Marketing do site.

Editor ou Webmaster.

Suporte e manutenção do banco de dados.

Suporte técnico.

Desenvolvimento de conteúdos novos e atualizações.

D. Incluir no orçamento

O servidor é próprio ou será terceirizado por um provedor de internet?

O número de domínio está disponível (originais e únicos)?

Verifi que limitações de tráfego do site, do local de disco ou custos extra.

A capacidade está adequada com as demandas do tráfego do local?

O suporte de manutenção é permanente (24 horas)?

O servidor fornece análises estatísticas sobre os usuários e do tráfego do site?

C. Suporte servidor web

76


B) Defi nir o editor do site. É importante defi nirmos 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áfi co. 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 defi nem-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 especifi cações preliminares para simular a aparência e a funcionalidade, ainda que de forma primitiva e incompleta, 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áfi ca 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.

<Leia mais sobre prototipação

em http://www.black-beans.com.

br/prototype.htm>

77


Unidade 3

Nesta fase de processo temos alguns artefatos que são produzidos e que podem servir como marcas de progresso de seu projeto:

A especifi cação detalhada do design do site.

A descrição detalhada do conteúdo do site.

A defi nição de mapas do site e tabelas.

A especifi cação técnica detalhada.

Especifi cação dos browsers suportados pelo site.

Velocidades de conexão suportadas.

Servidor Web e recursos do servidor.

Algoritmos necessários ou tecnologia para suportar aplicações específi cas do site.

Rascunhos de interfaces e do design do site.

Especifi cação de cenários de testes.

Desenvolvimento de um ou mais protótipos.

Design do site

É nesta fase que o projeto ganha identidade e são trabalhadas questões como o grid da página, o design do site e todos os elementos gráfi cos são criados e aprovados.

Na etapa de design, são criadas as ilustrações, metáforas visuais, fotografi as, os textos e as animações do site. Pesquisas, organização e edição de textos de conteúdo são preparadas.

Segundo Lynch e Horton (2002), são sub-produtos típicos desta fase:

textos editados e corrigidos;

especifi cação do design gráfi co de todas as páginas:

templates das páginas fi nalizados;

cabeçalhos, logotipos, botões, fundos defi nidos;

detalhamento de manuais para operações complexas;

ilustrações;

fotografi as.

Templates são o modo

mais fácil e rápido de

construir uma página

com uma estrutura

pré-defi nida. A partir do

template preenchemos

o conteúdo, sem a

necessidade de refazermos

toda a página.

78


Ainda nesta etapa temos a concepção de componentes funcionais e lógicos como:

defi nição de scripts complexos;

protótipo fi nalizado 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 especifi caçã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 fl uam 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 identifi car o que funciona e o que deve ser evitado no nosso trabalho.

79


Unidade 3

C) Perca tempo aqui

As adições de inserções ao projeto que não entraram no planejamento comprometem a sua saúde. Pequenas adições não comprometem prazos, custos ou o andamento do projeto. Mas… inserções contínuas que acabam acumulando-se no cronograma podem destruir um projeto. Assim é importante dizer que você não deve iniciar o desenvolvimento sem entender completamente o que vai ser trabalhado e antes de desenvolver uma especifi cação realista do site. Discuta a especifi cação exaustivamente com a equipe, discuta prazos, entregas e custos. Encontrar erros no planejamento, na etapa de especifi cação, pode custar 100 vezes menos do que durante o desenvolvimento.

SEÇÃO 4 – Construção e manutenção

A construção de um site só deve iniciar quando se tem uma visão detalhada da arquitetura e do design dele.

Mesmo quando se trabalha de forma consistente, você deve estar consciente de que refi namentos 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á fi nalizado, 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, avalie erros tipográfi cos e procure criticar criteriosamente o design da página. Os usuários são fundamentais nesta etapa fi nal, eles podem lhe oferecer informações preciosas sobre a validade do projeto por meio de testes de aceitação.

Somente depois de exaustivamente testado publique a URL do site!

80


Lynch e Horton (2002) sugerem que nesta etapa os seguintes artefatos são disponibilizados:

Estrutura de links de navegação fi nalizada.

Resultados de testes detalhados da base de dados e das funcionalidades.

Resultados de testes em diferentes plataformas de hardware e software.

HTML fi nalizado para todas as páginas com conteúdo.

Resultados de testes de performance.

Todos os componentes da base de dados linkados.

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 fi nalizado. 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 verifi cado? 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 modifi car a nomenclatura do site. Outro aspecto interessante é a localização geográfi ca dos internautas que estão acessando seu site.

Mantenha-se atento nesta etapa para dar as informações de feedback aos usuários.

81


Unidade 3

Se você vai hospedar o site em um provedor, verifi que quais os serviços de análise disponibilizados!

Outra preocupação são os backups regulares em uma mídia segura. Proteger as informações do seu site é uma das principais tarefas depois que você publica a URL.

É também uma das tarefas mais difíceis, quando executados de 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 (fi nal do dia, dias pares, semanal, mensal...);

a mídia seja testada regularmente;

o sistema de backup seja testado regularmente;

as fi tas de backup sejam mantidas em um local, seguro fora da empresa. Certifi que-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>.

82


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 signifi ca 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>

83


Unidade 3


1. No planejamento e defi niçã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) ( ) Identifi car 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 identifi caçã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) ( ) Defi nir 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.

84


5) Após o processo de especifi caçã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.

4UNIDADE 4

Por que usabilidade?


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 signifi ca exatamente Usabilidade?

Seção 3 O design centrado no usuário segundo a norma ISO 9241

86



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 fi nal 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 difi culdade 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 ferramenta

87


Unidade 4

funciona. E que tal aquela situação constrangedora na fi la do caixa eletrônico, em que você não consegue completar uma tarefa? Ou ainda, quando após preencher um longo cadastro na internet, você confi rma os dados e lhe é apresentada uma mensagem solicitando a digitação de um campo obrigatório. Mas... surpresa! Todo o cadastro foi perdido... e você deve reiniciar a digitação. Como você se sente? Bom, estes exemplos sã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 confl itos 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 componentes para que possa existir: o usuário, a interface e a interação humano-computador.

�� "�� #��$��%��

Veja agora cada um desses componentes com mais detalhes.

A Interação Humano-Computador (IHC)

Um fator importante e árduo nesta área da ciência é o conhecimento e o entendimento sobre o meio, a forma e a ordem com que o homem interage com o sistema computacional a fi m de atingir seu objetivo executando sua tarefa.

Toda interação envolve diálogos orientados pela tarefa, entre o homem e o sistema computacional. O sucesso deste diálogo é

88


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 é defi nida 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 identifi caçã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 identifi car 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.

89


Unidade 4

introduzir na amostra, profi ssionais com e sem experiência no uso da Internet;

procurar diversifi car a localização geográfi ca da amostra, tanto quanto possível a cidade, estado ou mesmo o país de origem;

identifi car profi ssionais, odontólogos, que estejam dispostos a colaborar no projeto;

diversifi car as faixas etárias da população procurando ser abrangente neste quesito.

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:

Podemos pensar neste usuário tentando identifi car o que ele pensa quando vê o site (NIELSEN, 2000):

O sistema tem a informação ou serviço que eu preciso?

Onde posso encontrar a informação ou o serviço?

Como posso solicitar este serviço?

Para que serve este elemento?

Qual foi o resultado? Era o que eu queria?

Quais informações devo fornecer?

O que signifi ca esta fi gura?

Para onde “leva” este link?

A norma ISO 9241, parte 11, editada em 1988, sugere que sejam avaliados 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, qualifi cações, habilidade de linguagem, conhecimento geral.

90


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ífi cos são identifi cados. 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:

surfi stas da Web;

usuários novatos e ocasionais;

usuários freqüentes (experts), e

usuários internacionais.

Surfi stas, 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, fi cam irritados com exageros visuais: como eles têm objetivos defi nidos, apreciarão menus de textos detalhados e rápidos, além de engenhos de busca bem programados e poderosos.

91


Unidade 4

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 de usuários que gostam de ir direto ao seu objetivo, sem ter que passar por sub-etapas. Nesse sentido, imagine que um usuário deseja comprar uma máquina fotográfi ca. O site a seguir, oferece a possibilidade de encontrar o produto desejado a partir dos links de departamento ou por meio de um mecanismo de busca. O cliente não precisa necessariamente saber qual a classifi cação do produto dentro da loja virtual e pode procurar a máquina fotográfi ca diretamente pelo mecanismo de busca.

Ao mesmo tempo, o site não pode desconsiderar o cliente que aprecia entrar no setor desejado, verifi car as marcas existentes até encontrar o produto que deseja. Oferecendo estas duas opções você está pensando no perfi l dos diferentes usuários. O site seguiu esta regra básica de usabilidade, mas quando se possibilita esse tipo de navegação, deve-se tomar cuidado para que o resultado da busca não apresente informações não solicitadas ou incoerentes.

Figura 4.1 - Adaptação da navegação ao perfi l do usuário

<http://www.pontofrio.com.br/>

92


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 signifi ca exatamente Usabilidade?

Rocha (2000, p. 242) afi rma 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 difi cultava 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) defi ne 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 é defi nida por múltiplos componentes e está tradicionalmente associada a atributos como (NIELSEN, 1993):

93


Unidade 4

a facilidade de aprendizagem do sistema;

sua efi ciência de uso;

a capacidade com que o sistema promove a facilidade de memorização das ações necessárias para que o usuário atinja seus objetivos;

um bom controle da gestão de erros minimizando e refutando situações possíveis de ocorrências;

e, principalmente a satisfação que o sistema promove ao usuário ao ser utilizado.

Os fundamentos da usabilidade baseiam-se na tarefa do usuário e nas características e diferenças individuais dos usuários.

Porque a facilidade de aprendizagem é importante para 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 partir de interações anteriores determinar o resultado de uma interação futura. O usuário constrói um modelo mental de como o site se comporta, determinando uma ação futura, baseado em interações realizadas no passado. Este modelo mental pode ser construído a partir do seu site ou até da experiência do usuário com outros sites e aplicativos e, principalmente do mundo real.

Vamos pensar em nosso mundo real. O uso de ícones sugestivos que lembram ações do mundo real, facilita ações que seriam difí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 uma lembrança: alerta, pare. Esta previsibilidade vem da lembrança talvez de sinais de um semáforo, de placas de pare que são vermelhas assim como o verde intuitivamente nos leva a pensar que a passagem esta livre e podemos seguir em frente.

94


Figura 4.2 - Uso da previsibilidade no favorecimento da aprendizagem

Se você quer tornar seu site fácil de aprender procure fazer uso da generalização.

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 Digital

Semáforo: <www.eptc.com.br/

noticias/ noticias.asp?codigo>

Ícones de siga, pare: Browser

Explorer




95


Unidade 4

Passo 2 – Informa o assunto a pesquisar: Web

Preencha os campos com as informações solicitadas.


Passo 3 – Recebe o resultado da pesquisa

Verifi que o resultado da pesquisa.


Para ser de fácil aprendizado, o site deve ser compatível com o contexto de uso. Deve atender as necessidades dos usuários. Isto signifi ca: necessidades psicológicas, culturais e técnicas. As tarefas devem ser organizadas de acordo com as expectativas e costumes dos usuários. Deve-se evitar termos técnicos e privilegiar o uso de terminologias familiares.

Se o usuário é um especialista na área abordada pelo projeto deve-se adotar terminologia especializada e uma maior densidade de informações. Para usuários leigos, a quantidade de informações deve ser maior fazendo-se uso de manuais, glossários e telas mais detalhadas.

<http://www.ufsc.br/>

<http://aspro02.npd.ufsc.

br/htdig/>

96


É 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 profi ciê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 identifi cação do seu grau de experiência na tarefa.

Como identifi car a efi ciência de uso?

Quando falamos sobre efi ciê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 efi ciência é a portabilidade.

Quantas vezes você tentou carregar uma página e ela fi cou pela metade por não ser compatível com o browser?

97


Unidade 4

Figura 4.6 - Feedback visual para processamentos

demorados (Outlook Express 6.0)

Indicadores de progressão evitam a situação em que você fi ca na dúvida se o processamento é lento ou se o sistema está travado. Um ponto que não podemos esquecer é o uso de ações mínimas na execução do objetivo do usuário.

Por que a facilidade de memorização deve ser considerada na construçã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, realiza todas as ações para realizar a tarefa de forma segura e tranqüila. Nesta situação, podemos dizer que o usuário provavelmente não precisou reaprender a forma de interagir com o site, ele na verdade não esqueceu de como o site funciona.

No caso de sistemas disponibilizados na Web, tem-se cada vez mais a visita de usuários casuais e por isto, é importante concebermos 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.

98


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 profi ssionais de diferentes faixas culturais farão uso do sistema, mas... apenas uma vez por ano.

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!

<http://www.fazenda.gov.br>

99


Unidade 4

Erros durante a visita ao site

Mesmo o usuário experiente, não espera enfrentar qualquer tipo de problema nem cometer erros induzidos pela má qualidade do site. Situações como erros de programação ou informações que levam o usuário a situações de erro, devem ser detectados antes da publicação do site.

Durante o design reserve um bom tempo para a confecção de mensagens coerentes de erro, e principalmente úteis ao usuário para restaurar a tarefa. A possibilidade de corrigir erros e/ou restaurar o cenário anterior a ocorrência do mesmo, é fundamental para a credibilidade do projeto.

A satisfação do usuário

O usuário tem que gostar de utilizar seu site. Para muitos usuários a cor do site, imagens, animações, som entre outros fatores, podem ser preponderantes a velocidade ou mesmo a efi ciê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, onde o usuário possa classifi car sua experiência ao utilizar o site. A avaliação deve ser conduzida por um grupo representativo de usuários.

Consistência como norma

O projeto gráfi co consistente torna o projeto harmônico. Tarefas similares 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 utilizarmos a barra de ferramentas do editor de textos de nosso colega de trabalho, que esta personalizada com outros elementos ou mesmo com outra seqüência de localização.

100


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 defi ciente 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 defi ciente visual que, agora, pode fazer uso do portal confortavelmente.

Figura 4.8 - Flexibilizar o projeto adaptando às necessidades do usuário<www.justicafederal.gov.br>




101


Unidade 4

Saiba mais

Você sabia que a empresa Boeing fabricante de aviões, realiza pesquisas de ponta em usabilidade? Para saber mais visite o site <http://active.boeing.com/sitemap.cfm>

Dê uma olhada no artigo “Bons projetos de interface com o usuário”, de Mateus Dias.Ele lista de forma simples, 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/>

102


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ífi cas 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 infl uenciar a usabilidade de um produto, dentro de um sistema de trabalho.

Estrutura para especifi cação de usabilidade

A especifi cação da usabilidade de um produto exige que sejam identifi cados objetivos, componentes do contexto de uso e sub-componentes, identifi cando-se atributos que permitam a verifi cação e a medição.

��

��

&'��%��

(��

��

)�*��

&��

&��+��

��

� �� !�� "��

��

!��

��

Figura 4.9 - Estrutura de Usabilidade (Norma 9241-11, 1998)

103


Unidade 4

Para especifi car 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 efi ciência, efi cácia e satisfação para os contextos que se pretende atingir.

Descrição dos objetivos

O objetivo de um produto deve ser claramente colocado. A partir dele, poderão ser decompostos sub-objetivos, assim como critérios que irão satisfazê-lo (conforme visto na Unidade 3).

Contexto de uso

No contexto de uso são descritos componentes como usuários, tarefas, equipamento e ambientes. O rico detalhamento do contexto permite que aspectos relevantes para a usabilidade sejam reproduzidos. A especifi cação pode ser em termos de características relevantes ou de uma situação específi ca.

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 infl uenciam 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.

104


A norma sugere que sejam analisados os seguintes quesitos:

Usuários Tarefas Equipamentos

Tipos de usuário

Primários

Secundários e indiretos

Habilidades e conhecimentos

Habilidade/conhecimento produto

Habilidade/conhecimento sistema

Experiência na tarefa

Experiência organizacional

Nível treinamento

Habilidade nos dispositivos de entrada

Qualifi cações

Habilidade de linguagem

Conhecimento geral

Atributos pessoais

Idade

Gênero

Capacidades físicas

Limitações físicas

Habilidade intelectual

Atitude

Motivação

Falha da tarefa

Nome da tarefa

Freqüência de uso da tarefa

Duração da tarefa

Freqüência de eventos

Flexibilidade da tarefa

Demanda física e mental

Dependências da tarefa

Resultado da tarefa

Risco resultante de erro

Demandas críticas de segurança

Descrição básica

Identifi cação do produto

Descrição do produto

Principais áreas de aplicação

Funções principais

Especifi cação

Hardware

Software

Materiais

Serviços

Outros itens

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:

105


Unidade 4

Figura 4.9 - Seqüência de tarefas para compra de bilhete aéreo

Na primeira página, em caixa alta encontramos o rótulo COMPRE AQUI. Nesse agrupamento são informados dados sobre origem, destino e número de passageiros.

Figura 4.10 - Seqüência de tarefas para compra de bilhete aéreo

Finalizado o preenchimento, vamos pesquisar os possíveis vôos. Na página seguinte, são apresentados os vôos disponíveis, mas não existe opção que permita a fi nalização da compra. E agora para onde eu vou? Como faço para fi nalizar a compra?

<http://www.voegol.com.br>

106


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ífi co.

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 efi ciência, efi cácia e satisfação podem ser especifi cadas 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 efi ciência alcançada em relação ao dispêndio de recursos como esforço mental, físico, tempo, custos materiais ou fi nanceiros. 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 Usabilidade

Medidas de efi cácia Medidas de efi ciência Medidas de satisfação

Usabilidade globalPorcentagem de objetivos alcançados.

Tempo para completar uma tarefa.

Escala de satisfação.

Porcentagem de usuários completando a tarefa com sucesso.

Tarefas completadas por unidade de tempo.

Freqüência de uso arbitrário.

Média da acurácia de tarefas completadas.

Custo monetário de realização da tarefa.

Freqüência de reclamações.

Tabela 4.2 - Exemplo de Medidas de Usabilidade (ISO 9241-11, 1998)

Na especifi cação podem ser necessárias medidas adicionais que se referem a propriedades particulares desejadas no produto.

107


Unidade 4

Síntese

Nesta unidade o termo usabilidade tornou-se parte do seu cotidiano como projetista de interface. Aqui você percebeu a importância da facilidade da interface, da fl exibilidade, da consistência, da incorporação de mecanismos de memorização e do cuidado necessário no controle de erros e de suas mensagens.

Também foi possível conhecer uma norma que é exclusivamente voltada à usabilidade, a ISO 9241. A partir da parte 11, da Norma aprendeu-se a importância de envolver o usuário na concepção das futuras funcionalidades e das decisões de diálogo do usuário, por meio da análise da tarefa.

Então, pronto para aplicar a usabilidade na prática? Na próxima unidade você vai aprofundar estes conhecimentos ampliando o entendimento e aplicação da usabilidade.


1. Como surgiu o termo usabilidade?

108


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 especifi caçã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 fl exibilidade?

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?

109


Unidade 4

4) 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 afi rmação é verdadeira e como você pode promovê-la no site Boa Noite?

110


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.

5UNIDADE 5

Avaliando a usabilidade de Websites


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 verifi cação

Seção 7 Técnicas objetivas

112



Quando você desenvolve um projeto, idéias e decisões fazem com que nossa capacidade de avaliação fi que 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 verifi car a satisfação ou insatisfação que o cliente tem ao utilizar seu site, a efi ciê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ífi co para cada fase, depende da aplicação e do que se pretende saber sobre o produto.

Em 1993, Hix afi rmou que ao realizamos uma avaliação de usabilidade tem-se por fi nalidade:

113


Unidade 5

validar a efi cácia da interação entre o usuário/site confrontando a execução das tarefas pretendidas pelo usuário;

verifi car o quanto o site foi efi ciente 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ção ergonô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 fi gura a seguir tenta esclarecer esta dúvida apontando as técnicas mais “interessantes” para cada etapa do ciclo de vida:

114


(��

&�%�� '��

��*��%��

��*��

"�% ��

�,��%��

�,��

�,��)�*��

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 fi gura 5.1. Durante a especifi caçã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, difi culdades sugestões e críticas do usuário potencial.

115


Unidade 5

O QUIS - Questionaire for User Interaction Satisfaction é um modelo de questionário de satisfação disponibilizado na internet, que pode servir de modelo para sua empresa. Ele abrange aspectos como legibilidade, layout de telas, signifi cado de ícones, interação e terminologia.

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ável

Tabela 1 - Recorte do questionário QUIS

O SUMI foi desenvolvido pelo Human Factors Research Group da Universidade de Cork, Irlanda e procura medir a usabilidade considerando percepção e atitudes dos usuários. O questionário é distribuído em categorias como: usabilidade geral, efeito psicológico, suporte ao usuário, facilidade de aprendizado, efi ciência, controle, análise consensual dos itens.

Se você pretende elaborar um questionário de satisfação, observe os 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.

Você pode acessá-lo em

<http://www.lap.umd.

edu/QUIS/index.html

Univ. Maryland (Norman,

1989)>.

Você pode acessá-lo

no endereço <http://

www.ucc.ie/hfrg/

questionnaires/sumi/>.

116


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 fi nais. Cybis (2000), classifi ca estas inspeções como:

Avaliações analíticas — envolvem a decomposição hierárquica da estrutura da tarefa para verifi car 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 identifi car 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ífi ca 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 verifi car 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 especifi caçã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.

117


Unidade 5

Nesse modelo são descritos os métodos necessários à realização de objetivos específi cos. Neste caso, você vê os métodos como uma série de passos que consistem em operadores (ações) que os usuários realizam. Quando há mais de um método disponível para a realização de um objetivo, o modelo GOMS inclui regras de 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 o objetivo 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.

Figura 5.3 - Uso de Operador na metodologia GOMS

Os Métodos são a seqüência de passos para se atingir uma meta.

Para efetuar a compra

deve acionar o botão

compre _ > temos aqui

um operador.

118


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 permite decompor as tarefas em subtarefas. O conceito de tarefa é representado por um objeto genérico chamado de objeto-tarefa, que é defi nido por um conjunto de elementos. Além disso, cada objeto-tarefa (folha da árvore hierárquica da decomposição) é identifi cado por um nome e um número.

Assim, cada tarefa será representada pelas seguintes características:

identifi cação da tarefa (número e nome);

elementos da tarefa (fi nalidade, estágio inicial, pré-condições, corpo da tarefa, pós-condições, estágio fi nal) e

atributos da tarefa.

Para saber mais sobre o método

MAD acesse o site do INRIA:

<http://www-sop.inria.fr/acacia/

ESSI/Old-Site/Interactives.html>

119


Unidade 5

SEÇÃ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 identifi caçã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) que orientam o avaliador em aspectos relacionados às tarefas e objetivos do usuário fi nal.

Quando você inicia este tipo de avaliação é importante fornecer aos avaliadores antes da inspeção, informações sobre o contexto de uso do site, possíveis cenários em que a interação ocorre e passos necessários para que o usuário atinja suas metas.

Em 1993, Pollier descreveu as diferentes formas de se conduzir uma 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.

120


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) defi niram 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.

121


Unidade 5

2. 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 efi ciência do diálogo.

Quanto maior for a carga de trabalho, maior será a probabilidade de se cometer erros. E também, quanto menos o usuário for distraído por informações desnecessárias, mais ele será capaz de desempenhar suas tarefas efi cientemente. Além disso, quanto menos 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 fi gura a seguir que, para realizar a busca do imóvel por estado, o internauta deve percorrer toda a lista de seleção até encontrar o estado desejado. A caixa apresenta os estados sem nenhum tipo de classifi cação, difi cultando a localização do estado desejado pelo usuário aumentando a carga de trabalho, pois terá que percorrer a lista, lendo as letras iniciais de todos os estados até encontrar o desejado.

Figura 5.4 - Exemplo de quebra do critério Carga de trabalho

<http://www.

redeimobiliaria.com.br/>

122


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 defi nem 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 fl exibilidade e a consideração da experiência do usuário.A adaptabilidade se refere à fl exibilidade e aos meios colocados à disposição do usuário que lhe permitem personalizar a interface a fi m 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 fl exibiliza a utilização do site.

123


Unidade 5

Figura 5.5 - Exemplo positivo de adaptabilidade

5. 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 para detectar e prevenir os erros de entradas de dados ou comandos, ou possíveis ações de conseqüências desastrosas e/ou não recuperáveis. Refere-se também a qualidade das mensagens, a pertinência, a legibilidade e a exatidão da informação dada ao usuá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: a proteção contra os erros, a qualidade das mensagens de erro e a correção dos erros.

Figura 5.6 - Exemplo de quebra do critério Carga de Trabalho, Gestão de Consistência.

124


Na fi gura 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 fi gura 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?

Figura 5.7

Observe os botões desta página (clique aqui, Pesquisar, Entrar). Eles são homogêneos no projeto de design?

<www.carronovo.com.br/index1.php>

125


Unidade 5

6. 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 melhor reconhecidos, localizados e utilizados, quando seu formato, localização, ou sintaxe são estáveis de uma tela para outra, de uma seção para outra.

Nestas condições, o sistema é mais previsível e a aprendizagem mais generalizável; os erros são diminuídos. É necessário escolher opções similares de códigos, procedimentos, denominações para contextos idênticos, e utilizar os mesmos meios para obter os mesmos resultados. É conveniente padronizar tanto quanto possível todos os objetos quanto ao seu formato e sua denominação, e padronizar a sintaxe dos procedimentos.

A falta de homogeneidade nos menus por exemplo, pode aumentar 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 efi ciê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

126


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áfi co, denominações de comandos compatíveis com o vocabulário do usuário, etc.).

8. Signifi cado dos códigos e denominações

O critério signifi cado 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 codifi cação signifi cativa, 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>

127


Unidade 5

SEÇÃO 5 – Técnicas preditivas: inspeção cognitiva da intuitividade

Esta técnica é um tipo de avaliação heurística, onde os especialistas enfocam especifi camente, os processos cognitivos que se estabelecem quando o usuário realiza a tarefa interativa pela primeira vez (KIERAS e POLSON, 1991). Ela visa avaliar as condições que o software oferece para que o usuário faça um rá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 a capacidade do usuário de realizar a tarefa, assim como seu conhecimento no uso de sistemas informatizados. O avaliador deve estar ciente do caminho a ser percorrido pelo usuário para atingir seus objetivos.

De posse destas informações ele passa a percorrer os caminhos previstos aplicando para cada ação o seguinte checklist (KIERAS e POLSON, 1991):

1. O usuário realiza a tarefa corretamente?

2. Ao encontrar-se no passo inicial de determinada tarefa, o usuário, baseado no que lhe é apresentado, consegue realizar o objetivo previsto pelo projetista?

3. O usuário percebe o objeto associado a esta tarefa? Este objeto está sufi cientemente à vista do usuário?

4. O usuário reconhecerá o objeto como associado à

tarefa? As denominações ou representações gráfi cas são representativas da tarefa e signifi cativas para o usuário?

5. O usuário saberá operar o objeto? O nível de competência na operação de sistemas informatizados é compatível com a forma de interação proposta?

6. O usuário compreenderá o feedback fornecido pelo sistema como um progresso na tarefa?

128


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 classifi cados quanto ao grau de severidade, o que permite uma maior sensibilização da equipe de desenvolvimento.

SEÇÃO 6 – Técnicas preditivas: listas de verifi cação

As inspeções de usabilidade por listas de verifi caçã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 verifi cação ou um site, pode ser realizada por profi ssionais 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 confi rmaçã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 signifi cativos?

( ) sim

( ) não

( ) não-aplicável

129


Unidade 5

Na escolha de uma lista de verifi cação é importante observar:

se os resultados produzidos são uniformes e abrangentes em termos de identifi caçã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 fi nal;

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 fi nal. 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 >

130


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 fi nalidade.

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.

131


Unidade 5

O 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 a interaçã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íntese

Quando você estudou usabilidade na unidade 4 foram apresentados conceitos e recomendações para garantir que o projeto apresentasse um bom grau de usabilidade junto ao usuário. Mas durante um projeto é comum que apesar de todos os cuidados ainda assim ocorram descuidos e que este descuido acabe por gerar problemas de usabilidade na interface. Outra fonte de problemas pode ser o desenvolvimento de um projeto sem a observação de requisitos de usabilidade, a garantia de usabilidade do produto fi ca totalmente comprometida.

Nestes casos, a solução proposta na unidade 5 é a aplicação de testes de usabilidade, nestes testes você pode garantir que o sistema reúna os requisitos necessários a uma interação confortá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 a participação efetiva do usuário). Durante o estudo você conheceu heurísticas como as de Bastien e Scapin que apóiam avaliações heurísticas pautadas em políticas de usabilidade.

Foram apresentadas situações de uso para as diferentes técnicas como a utilização de listas de verifi cação uma atividade de avaliação bastante simples que não exige conhecimento do usuário, avaliações por meio de ensaios de interação onde o objetivo é reconhecer e identifi car a forma como o usuário atinge seus objetivos no processo que está sendo avaliado utilizando-se a fi gura de um observador, avaliações analíticas como o GOMS e o

132


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 efi ciente.


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 modifi car 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 classifi cado 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 fi nalização do pedido, ao digitar o frete apresenta uma mensagem de erro de programação.

133


Unidade 5

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 identifi cando o que pode e o que é válido para:

(A) Testes com pares de usuários.

(B) Testes com verbalização.

(C) Testes com usuário e avaliador.

(T) Todas as técnicas.

a) ( ) Esta técnica é utilizada quando o projetista encontra difi culdades em entender a lógica de realização da tarefa por parte do usuário, sendo que o usuário tem difi culdade em expressar esta lógica.

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 mais

O Ergolist é um checklist automatizado que fornece um adiagnóstico no fi nal.

<www.labiutil.inf.ufsc.br/ergolist/>

6UNIDADE 6

Navegação


Determinar a estrutura mais adequada de acordo com o perfi l 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

136



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 fi ca 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 identifi car 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 fi nal do horizonte. Ou será que lembraria daquela página onde o design refi nado de botões, os links e imagens muito bem estruturadas convidam o usuário a imersão no site?

O verbo navegar é rico em signifi cados, mas se você olhar em um dicionário, a palavra navegar vem do latim navigare e signifi ca movimento através do espaço.

137


Unidade 6

Se analisarmos amplamente a palavra, podemos pensar que o movimento através do espaço pode incluir o movimento virtual por intermédio de espaços cognitivos formados por informações e pelo conhecimento existente (WHITAKER, 1998).

Quando estamos “navegando” em um site, o movimento no espaço não é necessariamente real mas dentro de uma metáfora, quanto mais próxima da realidade, mais verdadeira para o navegador.

Mas até que ponto a navegação do site é importante?

Segundo Nielsen (2005), quando o projeto de navegação é ruim os 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 efi ciente deve ser centrada em objetivos possíveis do usuário e nas ações necessárias para alcançar este objetivo. Se você entendeu este conceito, você acabou de dar o primeiro passo para entender o projeto da navegação.

SEÇÃO 2 – Estrutura do Website

A estrutura de um Website, defi ne como as informações e os elementos da interface são organizados. A estrutura defi ne a navegação da interface na Web e, conseqüentemente moldam o modelo mental que o usuário irá ter, sobre como a informação está organizada no site.

138


A defi niçã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ífi co.

Quando utilizar esta estrutura linear? Sempre que for possível defi nir 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 alternativa

139


Unidade 6

Estrutura hipertexto

Quando você tem uma quantidade grande e complexa de informações, o uso da estrutura hierárquica ou hipertexto é a mais indicado. A maioria de nossos usuários está familiarizada com uma estrutura hierárquica, o que facilita a memorização e o aprendizado relacionado à navegação dentro da estrutura. A estrutura hierárquica é a mais utilizada.

Figura 6.3 - Estrutura de navegação hierárquica

Estrutura em rede

O uso de estruturas de rede procura imitar o pensamento associativo e o fl uxo livre das idéias do usuário. Deve ser possível ao internauta seguir seus interesses, explorando o poder de associaçã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ções onde o usuário é experiente na tarefa e precisa de informações adicionais. Outra situação que pode apoiar o uso desta estrutura facilitando a navegação, é o uso de uma metáfora que o aproxime do ambiente real, como por exemplo, o ambiente virtual de uma biblioteca ou museu.

140


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 especifi cação, tenha em mente a organização da estrutura. Leve em consideração as seguintes questões defi nidas por Leite (2005):

A organização está balanceada?

O usuário precisa navegar muito de uma página para outra em uma mesma tarefa?

O usuário memoriza facilmente a organização do site?

Use o modelo conceitual do domínio como base para a organização.

Utilize as categorias do domínio para organizar as informações e serviços do sistema.

Evite que serviços muito utilizados fi quem em partes muito “profundas” de uma organização.

Coloque um mapa disponível em todos os pontos da organização.

Home page é a página de entrada do site e deve refl etir o propósito do site:

deve indicar quais os objetivos, as informações e/ou serviços do site;

deve indicar como interagir com o site para ter acesso aos recursos;

deve conter elos para acesso aos recursos;

deve indicar o responsável pelo site e como entrar.

O uso de metáforas facilita a navegação.

141


Unidade 6

Você pode fazer uso de botões ou menus pulldown para implementar a navegação. Neste caso, tome cuidado para não confundir o usuário, use os botões para executar comandos e menus para a escolha de informações.

Lembre-se que os links devem indicar o conteúdo do destino e o usuário deve identifi car os elos facilmente. Isto deve evitar que o usuário se sinta perdido. Sempre que possível, faça uso de atalhos que possam facilitar a navegação.

Não esqueça de permitir ao usuário, a possibilidade de voltar atrás em uma página anterior, a volta para a página principal deve estar disponível o tempo todo!

SEÇÃO 4 – A confusão dos hiperdocumentos

Em 1995, Haake et al. iniciou estudos em que descreveu a relação entre cognição e hipermídia, em aplicações onde os usuários realizam a busca por alguma informação específi ca para a resolução de problemas.

Quando o usuário faz uso de um hiperdocumento, ele tem um tipo de comportamento, em relação à leitura dos documentos, diferente daquele utilizado em aplicações em que não há uma idé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 citados pelo usuário é o da “desorientação”: Onde estou? Como cheguei aqui? De onde eu vim?

142


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 navegação.

Busca por palavra-chave.

Indicação gráfi ca ou textual dos caminhos de navegação.

Formulários HTML para anotações.

Marcos relevantes, em torno dos quais o internauta possa navegar.

Índice.

Embedded menus.

Bookmarks.

143


Unidade 6

Figura 6.5 - Exemplo positivo de navegação

A fi gura 6.5, mostra o site da “Internet Public Library” que apresenta uma estrutura de hiperdocumentos, rica no processo de navegaçã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>

<http://www.ipl.org/ref>

144


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:

Identifi car claramente o destino de cada link. Quando você faz o texto do link pense que ele pode ser lido fora do contexto, e que neste caso, deve ser claro e ilustrativo o sufi ciente para ser entendido. Também é extremamente importante, que o link seja conciso, ou seja: não escreva links longos. Na fi gura 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>

A versão original do documento

em inglês, encontra-se em:

<http://www.w3.org/TR/WAI-

WEBCONTENT>.

145


Unidade 6

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.

Não esqueça de informar ao internauta sobre como o site é organizado. Isto pode ser feito utilizando-se um mapa do site ou um sumário. Não esqueça de deixar claro ao usuário quais as possibilidades do site em termos de acessibilidade. Lembre-se o que não se sabe, não se usa!

No site do senado federal o internauta tem a possibilidade de se localizar rapidamente com a ajuda do mapa do site assim como pode descobrir todas as informações disponíveis no mesmo. Veja a fi gura 6.7:

Figura 6.7 - <http://www.senado.gov.br/sf/>

Resource Description

Framework (RDF) é

uma linguagem para

representar informação

na internet. Arquivos

RDF são modelos ou

fontes de dados, também

conhecidos como

metadata, tem como

objetivos principal criar

um modelo simples

de dados, com uma

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>.

146


Fornecer barras de navegação para destacar e dar acesso ao mecanismo de navegação.

Procure agrupar links relacionados entre si, identifi car 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 identifi que a informação.

Não esqueça de fornecer informações sobre coleções de documentos (isto é, documentos compostos por várias páginas).

Observe o site da empresa Salfer. Apesar de ser uma empresa com um grande número de produtos a proposta de navegaçao do site no disponibiliza um mecanismo de busca que poderia facilitar a 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>

Em HTML, por exemplo, especifi ca-se

coleções de documentos por meio

do elemento LINK e dos atributos

“rel” e “rev”. Outra maneira de criar

uma coleção é construindo um

arquivo (por ex., com zip, tar e gzip,

stuffi t) das diferentes páginas.

147


Unidade 6

Síntese

Nesta unidade você conheceu as diferentes maneiras pelas quais a estrutura de um site pode ser organizada. Também esteve em contato com recomendações que procuram evitar situações, onde o esquema de navegação possa confundir o usuário durante sua interação.

Oferecer opções de voltar, de adaptar diferentes mecanismos de navegação e ainda assim, proporcionar ao internauta a segurança de saber onde está e, principalmente o próximo passo que deve ser realizado para atingir seu objetivo, reduzem sensivelmente os riscos de prejuízos em seu site.


1. 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 Classifi cação Decimal de Melvil Dewey, e a classifi caçã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? Justifi que.

148


2. Cite alguns cuidados que você vai tomar relacionados à navegação do site do hotel “Boa Noite”.

3. Ao defi nir a estrutura do site, é verdadeiro afi rmar:

a) ( ) Para defi nir 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 signifi cativos 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.

149


Unidade 6

Saiba 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.

7UNIDADE 7

A compatibilidade na resolução de monitores e Websites


Reconhecer o funcionamento básico da apresentação de imagens de um monitor CRT.

Analisar e evitar problemas de projeto gráfi co 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

152



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áfi co!

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 afi nal 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 por

153


Unidade 7

um canhão que gera um feixe de elétrons. A resolução máxima na qual um monitor pode trabalhar depende de sua habilidade física em focar o feixe de elétrons sobre os pontos de fósforo (a tela deste 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áfi cos, como uma matriz de pontos (na verdade, para um monitor colorido, um conjunto de pontos: azul, verde e vermelho) chamados PIXELS. Para que as imagens sejam geradas, o canhão tem de percorrer toda a extensão da tela ponto por ponto, linha por linha.

O movimento descrito pelo feixe de elétrons, da esquerda para direita e de cima para baixo, para desenhar uma quadro (uma imagem) é o que chamamos de varredura. O processo de varredura é repetido a todo instante, formando as imagens que nossa retina reconhece.

Freqüência horizontal (HSYNC)

O canhão possui 3 feixes de cores, que trabalham em conjunto e ao mesmo tempo: um feixe verde, um feixe vermelho e um feixe azul. A intensidade deste canhão é medida em MHz. Os monitores possuem normalmente uma intensidade entre 100 MHz e 200 MHz (largura de banda, banda passante ou dot rate). O canhão percorre a tela do monitor com esses três feixes e realiza esse processo constantemente. O canhão percorre a tela em forma de linhas começando de cima para baixo e da esquerda para direita. Este é o processo de varredura constante que acontece para que as imagens sejam produzidas.

A freqüência horizontal é o número de linhas que o canhão do monitor consegue percorrer por segundo. Quando dizemos que a freqüência horizontal de um monitor é de 65 KHz, tecnicamente signifi ca que o monitor consegue varrer 65 mil linhas por segundo. Na fi gura promocional da página seguinte, qual a freqüência horizontal do monitor?

154


Figura 7.1 Especifi caçõ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 fi gura 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.

Figura 7.2 Pixels e resolução da imagem

<http://w<ww.submarino.com.br/>

<http://www.infowester.com/monitores.php>




155


Unidade 7

Dot Pitch

O Dot Pitch é o termo utilizado para referenciar a distância entre dois pontos da mesma cor. Quanto menor esta distância, melhor a 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 feixe através da intensidade da corrente elétrica. Cada ponto da tela consegue representar somente uma cor a cada instante. Cada conjunto 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 é o uso de monitores com Dot Pitch igual ou menor que 0,28 mm. Observe a fi gura 7.2 onde a tríade RGB é apresentada mostrando o mecanismo de medição Dot Pitch.

Figura 7.3 Dot Pitch

Veja como a qualidade da resolução do monitor é afetada pelo Dot 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.

Para uma melhor

compreensão, visualize, no

anexo 1, ao fi nal do livro

didático, esta fi gura colorida.

156


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 sufi cientemente 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.

157


Unidade 7

Nú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á diretamente ligada ao número de bits utilizado para representar um pixel. Já o número de cores possíveis está relacionado ao número de bits que se utiliza para representar cada pixel.

Quando os monitores eram monocromáticos apenas 1 bit era necessário para representar um pixel (preto e branco). Se vamos usar uma placa que deve suportar 256 cores, é necessário que ela tenha 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.216

Hoje 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 confi gurada, é possível selecionar, pelo sistema operacional, a quantidade de cores desejada, desde que a placa de vídeo suporte. O padrão é indicarmos estes números de cores como 32k, 64k e 16M.

158


Mas qual a vantagem em operar em Hi Color e True Color? A fi delidade com que as cores serão representadas!

Quando usamos uma fi gura 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 fi gura). Já com 16 MB as cores utilizadas são as verdadeiras cores da imagem.

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.




159


Unidade 7

Monitor 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 alinhados perpendicularmente entre si. Cada cela é guarnecida por contatos elétricos que permitem que um campo magnético possa ser aplicado ao líquido.

Os monitores LCD possuem várias vantagens em relação aos monitores convencionais, os CRT (INFOWESTER, 2005):

Os monitores de cristal são mais fi nos 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 difi cilmente 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 algumas desvantagens. Alguns exemplos são: a área de visão é mais limitada, o contraste é mais baixo e as resoluções permitidas são mais 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.

160


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 fi delidade 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 é fi sicamente 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 fi ca 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).

161


Unidade 7

Quando desenvolvemos um projeto gráfi co, procuramos transmitir informações e para isto, muitas vezes, associamos cores próximas a informações diferentes. Estas cores diferentes, podem parecer a mesma cor em alguns computadores confundindo as informações.

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 fi xos, 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 fi guras, 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.

Quando projetar, tente observar estas pequenas dicas que tentam evitar problemas decorrentes da compatibilidade de resolução do monitor (ZELDMAN, 2004):

162


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 verifi cando sua performance e design.

Veja a seguir os browsers mais conhecidos:

Apple Safari 1. (mac).

Mozilla Firebird 0.7 (mac/pc).

Mozilla 1.* (mac/pc/linux).

Netscape 6, 7 (mac/pc).

IExplorer 5.01 (pc).

IExplorer 5.5 (pc).

IExplorer 6 (pc).

IExplorer 5.2.3 (mac).

Konqueror 3.1.4 (linux).

Camino 0.7 (mac).

Omniweb 5.

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):

Browser Java Frames Tabelas Plugins CSS JScript DHTML Gif89 XML

IE 5.5 S S S S S S S S S

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 Explorer

http://www.

laboratoriodeweb.hpg.

ig.com.br/webdesign/

compatibilidade.htm

163


Unidade 7

É importante considerar aspectos da página, como por exemplo ,o uso de tags, muitos browsers possuem tags de HTML próprios, e não do HTML padrão, aspectos proprietários que só funcionam em um tipo de browser, como por exemplo, o <marquee> utilizado no Internet Explorer.

Esta situação, faz com que páginas excelentes apareçam como projetos principiantes no monitor do usuário. Nosso trabalho, além do projeto também inclui garantir que as páginas sejam vistas corretamente nos browsers. Uma etapa importante para que isto ocorra é a validação do código. Validando o código, você verifi ca a consistência do HTML inclusive para versões futuras.

Você pode validar seu código utilizando um editor HTML profi ssional ou utilizar um programa específi co. Que tal experimentar algum deles?

O CSE HTML Validator <http://www.htmlvalidator.com/lite/> fi nalizada 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 ofi cial - 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 a questão das fontes, em que as mesmas plataformas podem ou não, ter fontes de texto instaladas. Este fato muda a capacidade de exibir as fontes do texto do seu site, existem algumas fontes que 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.

164


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áfi co. Neste caso, você só pode garantir que apesar das modifi caçõ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áfi co 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ê fi cou em dúvida quanto às questões relacionadas a cores, dê mais uma olhadinha na Unidade 2 sobre cores.

165


Unidade 7


1. Assinale as alternativas abaixo identifi cando [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.

166



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.


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.

167


Unidade 7

5. 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>

8UNIDADE 8

Conteúdo


Estar apto a identifi car 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

170



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 defi nir 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 signifi ca 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?

171


Unidade 8

SEÇÃO 1 – Os parques temáticos da Web

Todo mundo quer estar na Internet, mas o motivo, poucos sabem.

O fato é que as empresas se sentem arcaicas se não tiverem o seu registro no domínio WWW (RADFAHER, 2004).

Quando olho para a oferta de páginas existentes, não posso deixar de pensar em grandes parques temáticos.

Você pode olhar um site e imediatamente classifi cá-lo em uma categoria.

Fazendo analogias pense: o parque da Disney, deve ter sido um dos primeiros a ser criado. Os que se seguiram imitaram questões de organização e segurança que eram comprovadamente, soluções de sucesso. Inovações foram implementadas para questões não-resolvidas ou específi cas.

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 projeto pense na forma de comunicar as necessidades da empresa contratante 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áfi co que se pretende atingir.

Outro fator importante a considerar é o tema do site. O tema permite em um relance que identifi car 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 infl uencia profundamente o design e a apresentação do texto).

172


Sites são classifi cados em categorias, por diferentes autores, observando diferentes crittérios. Nesta unidade, vamos relacionar algumas categorias com base nos temas utilizados pelos sites:

Sites institucionais;

Lojas virtuais;

Sites de profi ssionais;

Sites de serviços;

Sites de entretenimento;

Sites promocionais;

Sites educativos;

Sites de comunidades;

Sites de referência ;

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ífi co para o produto, é o caso do Nescau produto da empresa Nestlé que possui um site específi co.

173


Unidade 8

Figura 8.1 - Site Institucional da Garoto

Lojas 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.

<www.garoto.com.br>

174


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.

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, fi nanciamento, 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.

Figura 8.3 - Loja Virtual de Fornecedor - Renault

<www.natura.com.br>

<www.renault.com.br>

175


Unidade 8

Em sites onde o tema é o de uma loja virtual, o projeto possui um ponto crucial: a navegação e a busca.

Sites de comércio eletrônico

Sites de comércio eletrônico devem ter projetos simples, com textos simples, e uso de navegação na forma de abas e menus. Observe que no site da fi gura 8.4 a forma de navegação privilegiada é o uso de menus horizontais:

Figura 8.4 - Exemplo de uso de menus horizontais

Observe o exemplo de abas na fi gura 8.5:

Figura 8.5 - Exemplo uso de abas

<http://www.amazon.

de/exec/obidos/tg/

browse/-/301128/302-

7820160-7932846?site-

redirect=de>

<www.marisa.com.br>

176


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 sufi ciente 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 profi ssionais

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ífi cos. Concentram grandes volumes de informação, tentando mostrar ao internauta a necessidade de contratação de seus serviços.

Figura 8.6 - Site de oferta de serviços – RM Auditoria Contábil

<www.rmauditoria.com.br>

177


Unidade 8

Sites de entretenimento

Os sites de entretenimento são oferecidos a um leitor que muitas vezes não possui motivação e interesses claramente focalizado. Este público precisa ser cativado rapidamente por imagens, gráfi cos 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 de interaçã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 no bom projeto e na leitura do site de entretenimento.

Figura 8.7 - Site de entretenimento – Jogos Simples

Sites promocionais

São sites curtos com promoções, concentram a informação em poucas telas, chamando sua atenção, desviando o curso natural da sua leitura. Este site deve permanecer apenas no período da promoção.

<http://www.

jogossimples.com.br/>

178


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 classifi caçã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 fl uxo 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 sofi sticada 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 o

179


Unidade 8

usuário busca um tópico específi co. 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 comunidades

São grupos de discussão sobre temas específi cos. Formam espaços maleáveis controlados pelos próprios usuários.

Sites de referência

Este tipo de site permite ao usuário entrar no site, encontrar o que precisa e imprimir facilmente ou baixar em sua máquina.

É o caso típico de enciclopédias virtuais. A estrutura costuma ser não-linear. A estrutura de menu precisa ser cuidadosamente organizada para suportar a busca e retorno fácil de download de arquivos, tendo boas condições de impressão. Considere o uso de buscas inteligentes com mais parâmetros. O tempo de contato do leitor é breve.

Figura 8.8 - Site de referência – Enciclopédia Digital

<http://www.

enciclopedia.com.br/>

180


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 efi ciê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áfi cos. 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 signifi ca 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.

Figura 8.9 - Site de Notícias – O Globo

<http://oglobo.globo.com/online/

default.asp>

181


Unidade 8

Nunca despreze em um sites de notícia tempo de carregamento e o estilo de navegação oferecido, pesquisas demonstram que estes dois fatores 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 gerais

Sites corporativos, de treinamento e educacionais possuem um 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 um objetivo específi co a ser atingido.

Já sites de e-commerce e entretenimento, possuem a dupla missão de motivar usuários casuais atraindo-os a fi car o maior tempo possível no site. Por outro lado, também deve promover o acesso rápido para usuários experientes no site.

Um aspecto fundamental é estar ciente de que, para montar um site de sucesso, não se deve contar apenas com recursos visuais criados por animações e imagens; pelo contrário, eles podem inclusive afugentar o usuário.

Para atingirmos este objetivo é necessário um trabalho profundo e sustentável, baseado na combinação de conteúdo, linguagem, conteúdos adaptados ao tema do site e uma oferta de estímulos visuais sofi sticados, onde o usuário encontre rapidamente e de forma efi caz, aquilo que procura.

182


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? Refl ita 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 confi rmam 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.

183


Unidade 8

Textos breves

Ler na tela de computador é cerca de 25% mais lento do que ler no papel. O usuário sente-se desconfortável na leitura de textos longos. Outro aspecto importante, é o de que devemos evitar a rolagem da tela (barras de rolagem), os usuários não gostam de rolar a tela.

Veja a seguir, algumas dicas importantes (NIELSEN, 2000):

Brevidade não signifi ca 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 textos

A credibilidade de um site é duramente atingida, quando o internauta encontra erros ortográfi cos ou mesmo de concordância no site. O uso do corretor ortográfi co é imprescindível. O emprego correto da linguagem, evita confusões de interpretação.

Facilidade de leitura

O usuário da Internet é por natureza, impaciente, normalmente não lê completamente, textos contínuos. A leitura é feita pela escolha de palavras-chave, sentenças e parágrafos de interesse, enquanto partes inteiras de texto são “puladas” por não lhe interessarem.

Estes fatos são comprovados cientifi camente, 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).

184


Os títulos devem ser signifi cativos (o título deve indicar do que se trata a página ou mesmo a seção).

Utilizar listas com marcadores para quebrar o fl uxo 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 signifi cativa, considerando-se as funcionalidades do site que se propõe à venda de todos os produtos existentes no supermercado.

Figura 8.10. O objetivo do site

Escrever textos para Web é uma arte, ser breve não signifi ca omitir informações.

<http://www.big.com.br/>

185


Unidade 8

Para que isto fi que mais claro, vamos dar uma olhada na tabela a seguir. O mesmo texto publicitário sobre o estado de Nebraska, foi escrito de 5 formas diferentes. O texto é um estudo comparativo relacionado ao uso de parágrafos de texto, foi aplicado para avaliação a uma amostra de leitores:

TABELA 8.1. Facilidade da Leitura pelo aprimoramento no estilo da redação (NIELSEN, 2000)

Texto promocional

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 Robison Stae Park (355.000 visitantes), Arbor Lodge Stae Historical Park & Museum (100.000), Carhenge (86.598), Sthur Museum of the Prairie Pioneer (60.002).

0% melhor

Texto conciso

Em 1996, uma das atrações mais visitadas de Nebraska foram o Fort Robison Stae Park, Arbor Lodge Stae Historical Park & Museum, Carhenge, e Sthur Museum of the Prairie Pioneer.

58% melhor

Layout fácil de ler

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:

Fort Robison Stae Park (355.000 visitantes);

Arbor Lodge Stae Historical Park & Museum (100.000);

Carhenge (86.598);

Sthur Museum of the Prairie Pioneer (60.002).

47% melhor

Linguagem objetiva

Nebraska tem diversas atrações. Em 1996 alguns dos locais mais visitados foram o Fort Robison Stae Park (355.000 visitantes), Arbor Lodge Stae Historical Park & Museum (100.000), Carhenge (86.598), Sthur Museum of the Prairie Pioneer (60.002).

27% melhor

Versão combinada (utiliza os três aprimoramentos no estilo da redação)

Em 1996, seis dos locais mais visitados de Nebraska foram:

Fort Robison Stae Park;

Arbor Lodge Stae Historical Park & Museum ;

Carhenge;

Sthur Museum of the Prairie Pioneer.

186


Qual das propostas você acha que apresenta maior facilidade de leitura? Você concorda com o resultado da pesquisa? Refl ita 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 codifi cadas 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.

Figura 8.11 Apresentação de informações relevantes

<http://www.rak.com.br>

187


Unidade 8

Linguagem simples

Quando escrevemos para Web é aconselhável apresentarmos inicialmente, o material mais importante, usando o princípio da pirâmide invertida. Como a maioria dos usuários, apenas passa os olhos por um texto, Nielsen (2000), destaca que é importante considerar os seguintes aspectos:

Começar cada página com a conclusão;

Manter apenas uma idéia por parágrafo;

Limitar o uso de metáforas principalmente, em títulos, o usuário pode interpretar de uma forma totalmente distorcida justamente por sua brevidade.

Uma dica importante é manter o conteúdo de mensagens de texto simples e construtivas. Além de apontar a existência do problema devem ajudar o usuário a superá-lo.

A mensagem de erro apresentada na fi gura 8.11 é resultado de uma busca sem sucesso. Isto não fi ca claro ao usuário, pois não são apresentadas sugestões, tampouco, uma mensagem indicando que a busca foi mal-sucedida.

Figura 8.12. Mensagens de erro com textos inconsistentes

Pirâmide invertida é um

jargão da área jornalística

utilizado para identifi car

um formato de texto

onde a parte considerada

mais importante da

notícia ou da informação

deve ser apresentada no

primeiro parágrafo. Mais

informações sobre o uso

da pirâmide invertida você

vai encontrar na página

da Unesp <http://wmail.

faac.unesp.br/~pcampos/

noticia.htm>

<http://www.websom.

com.br>

188


Divisão de páginas em partes

Ao escrevermos textos breves, não devemos sacrifi car 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 fl uxos 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 fi gura a seguir. A revista Scientifi c 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, prefi ra a rolagem ao oferecimento de duas páginas, do tipo próxima página/página anterior.

189


Unidade 8

Figura 8.11. Textos longos oprimem a leitura pelo usuário

Títulos de página

Ninguém escreve na Web para não ser encontrado. Quando utilizamos mecanismos de busca, o site passa a existir na forma do título da página. Ao salvar a home page em seu bookmarks ou na listas de históricos ela é novamente o título da sua página. O título deve:

possuir palavras sufi cientes para ser autônomo e signifi cativo;

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;

<http://www2.uol.com.br/sciam/>

190


páginas diferentes precisam de títulos diferentes, quando visitamos, por exemplo, 5 páginas com o mesmo título e desejamos voltar especifi camente para a segunda, a ação se torna um problema;

artigos defi nidos e indefi nidos 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ófi co 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 sufi cientes para que as pessoas possam ler o texto.

Evitar o uso de artifícios como: mover, piscar ou mesmo o uso de zoom.

Justifi car 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).

191


Unidade 8

Utilizar tipologia mista (Maiúsculas e Minúsculas). O olho reconhece com maior difi culdade textos em CAIXA ALTA retardando em 10% o tempo de leitura relacionada à tipologia mista (NIELSEN, 2000).

Documentação on-line

Quando falamos em documentação, imediatamente lembramos a impaciência do internauta na leitura. Entretanto, em muitas situações o usuário necessita de auxílio, interações sofi sticadas ou complexas exigem ajuda.

Para produzir uma documentação on-line consistente, procure seguir 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 modifi cá-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 oferece em sua página de busca, um manual on-line que permite ao internauta conhecer melhor os recursos da ferramenta.

Figura 8.12 Uso da ajuda para facilitar a interação

<www.google.com.br>

192


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 fi zeram 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 afi rmar 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 identifi cação de pontos importantes do texto que devem ser evidenciados na apresentação e o privilégio da brevidade da informação.

193


Unidade 8


1. Relacione as características abaixo com as possíveis categorias de site apresentadas:

(A) Site promocional.

(B) Site educativo.

(C) Site de Loja Virtual.

(D) Site de Entretenimento.

(E) Site Institucional.

(F) Site de Referência.

a) ( ) Neste tipo de site é importante a apresentação de produtos desenvolvidos pela empresa, notícias da empresa, divulgação de balanço, relatórios, lista de revendedores, etc.

b) ( ) O site procura transmitir informações com o intuito de educar o público-alvo.

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 afi rmar (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.

194


c) ( ) O site para educação continuada deve ser fl exí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 afi rmar 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 sufi ciente 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) ( ) Justifi que o texto de forma que, a margem direita seja de 2,5 cm no decorrer do texto.

f) ( ) Faça uso da tipologia mista.

195


Unidade 8

4. 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 defi nidos e indefi nidos 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 mais

CANTARELLI, Elisa Maria Pivetta. Aplicações Web. URI-Universidade Regional Integrada do Alto Uruguai e das Missões.

9UNIDADE 9

Imagens


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

198



Que as imagens e gráfi cos 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 fi nalmente 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áfi ca 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?”

Figura 9.1 - Queda de Mike Tyson

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?

<http://www.clicrbs.com.

br/jornais/dc/jsp/default.jsp?uf

=2&local=18&section=Home

(Junho/2005>

199


Unidade 9

Mesmo que o conteúdo seja cuidadosamente construído o impacto da imagem é infi nitamente maior.

Mas apesar de produzir um efeito cognitivo excelente, uma imagem 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 site pode 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 vetorial

Uma imagem vetorial é na verdade, uma quantidade de cálculos matemáticos que representarão a nossa imagem. Então você pode dizer que a imagem vetorial é uma imagem gráfi ca que se utiliza de equações matemáticas para defi nir fi guras 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 imagens vetoriais:

WMF (Windows Metafi le).

CDR (Corel Draw).

DWG, DXF (AutoCAD).

AI (Adobe Illustrator).

200


Figura 9.2 - Imagem vetorial

Saiba mais

Para verifi car 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 fi ca 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 (fotografi as ou mesmo em imagens escaneadas).

Para uma melhor

compreensão,

visualize, no anexo



colorida.

201


Unidade 9

São comuns as seguintes extensões para arquivos de imagens bitmap:

BMP (Windows Paint).

PCX (Paintbrush), PSD (Adobe Photoshop).

CPT (Corel Photopaint), TIF (usado em editoração).

GIF e JPG (usados na Internet).

O logotipo do seu cliente aparece serrilhado na página? Isso acontece porque a imagem está no formato bitmap, isto não aconteceria 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 arquivos

Quando você trabalha com arquivos de imagens existe uma série de fatores que infl uencia no tamanho do arquivo: a largura, a altura da imagem ou o número de cores utilizado. Formatos como GIF e JPG guardam os bits comprimidos. Esta compressão consiste 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 fi gura.

O tipo de compressão e o número de cores utilizado na imagem podem reduzir seu arquivo à metade ou menos do seu tamanho original.

O uso da compressão no formato GIF procura eliminar o número de cores necessárias à representação de uma imagem. Uma imagem GIF não pode ter mais do que 256 cores nem menos do que 2 (preto e branco).

202


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áfi cos 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.

Quando você escolher o formato pense que GIF não é recomendável para fi guras 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>

Se desejar, leia novamente esse

conceito na Seção 1 da Unidade 7.

203


Unidade 9

Outro recurso da imagem GIF é o entrelaçamento. As imagens aparecem como camadas, a cada camada a imagem torna-se mais nítida. Assim quando você baixa o arquivo vai tendo uma idéia de como ele será quando estiver totalmente apresentado. Ao mesmo tempo que isto é executado, o internauta pode rolar a tela e ler alguma informação enquanto aguarda a fi nalização da imagem.

Este efeito também é chamado de renderização progressiva não interfere no tamanho e na velocidade do arquivo.

Figura 9.3 - Imagem formato GIF

Formato JPEG - Joint Pictures Expert Group

O formato JPG é ideal para fotografi as, fi guras e imagens naturais onde ocorre uma grande variação de cores principalmente 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 fotografi as do que o GIF e tem a vantagem de gerar arquivos menores do que os gravados naquele formato. JPEG trabalha sempre com 16 milhões de cores (24 bits) para fotografi as. O formato JPEG não tem possibilidade de criar áreas transparentes. Não utilize o JPEG em gráfi cos ou grandes áreas de uma só cor.

O JPEG permite que determinemos a qualidade da imagem armazenada, defi nindo o quanto desejamos perder de exatidão da imagem em detrimento do tamanho fi nal do arquivo, ou seja, ao comprimirmos seu formato podemos decidir o quanto a imagem deve perder de sua fi delidade.

<http://www.icmc.usp.br/ensino/

material/html/gifj peg.html>




204


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 fi ca 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 confi gurado de 10 a 100. Quando você tem a imagem confi gurada 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 fi gura 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.

<http://www.icmc.usp.br/ensino/

material/html/gifj peg.html>




205


Unidade 9

Imagem GIF Imagem JPEG 100% Imagem JPEG 10%

Figura 9.5 - Exemplo comparativo GIF X JPEG comprimido

Veja que interessante: as imagens JPG apesar da compressão ainda assim possuem excelente qualidade. A imagem GIF no entanto já aparece um tanto quanto irreal.

PNG - Portable Network Graphic

O PNG trabalha com esquema de 24 bits de cores, ou seja, 16,8 milhões de cores. No entanto, em comparação com o JPEG, a compressão obtida é mais efi ciente e não proporciona perda de qualidade a cada salvamento. As imagens em PNG não requerem muito espaço, podendo-se ter fi guras de alta defi nição e tamanho em bytes pequeno. O PNG também possui o recurso de transparência. Apesar de suas excelentes características o PNG apresenta problemas de portabilidade com alguns browsers.

Otimizar arquivos

Otimizar imagens signifi ca diminuir seu tamanho mas ao mesmo tempo mantê-las realistas ao olho humano. Como os tipos de arquivo mais utilizados são o GIF e o JPEG podemos reduzir o número de cores da aquarela (GIF) e ajustar a qualidade do arquivo quando estiver salvando (JPEG). Para otimizar uma imagem você pode usar ferramentas como:

Adobe Photoshop. Utilizado para editar gráfi cos bitmap profi ssionais 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.

<http://www.

worldmasters.

hpg.ig.com.br/

Webdesign/grafi cos.

htm>

Para uma melhor

compreensão,

visualize, no anexo



colorida.

206


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 fi nal, 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).

207


Unidade 9

Se for escanear suas imagens, siga as seguintes dicas:

dimensione fi sicamente 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-aliasing

O anti-aliasing é conhecido como “a suavidade aparente da margem de um gráfi co”. Em outras palavras, sabe aquele efeito serrilhado que temos em arquivos bitmap? Este efeito é conhecido como “aliasing”.

Este efeito ocorre nas linhas inclinadas, nas curvas e nos textos. Veja um exemplo na fi gura a seguir.

Figura 9.6 - Efeito aliasing

O processo anti-aliasing resolve este problema suavizando as linhas utilizando cores intermediárias. Na fi gura acima utilizou-se diversos tons de cinza para suavizar o efeito “serrilhado”.

<http://www.laercio.

com.br/site2/artigos/

hardware/hard-017/hard-

017b.htm>

Para uma melhor

compreensão, visualize, no

anexo 1, ao fi nal do livro

didático, esta fi gura colorida.

208


Figura 9.7 - Efeito anti-aliasing

A fi gura 9.7 mostra como fi ca 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 eff ect

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 eff ect” ao redor do objeto após a suavização (anti-aliasing). Se você não deseja isto, quer evitar este problema, crie sua fi gura sobre um fundo de cor semelhante ao do fundo de sua página Web, exporte uma versão suavizada, e então defi na a cor de fundo como transparente.

<http://www.laercio.com.br/site2/artigos/

hardware/hard-017/hard-017b.htm>




209


Unidade 9

SEÇÃO 4 – GIMP

Nesta sessão temos algo muito especial: é o GIMP – GNU Image Manipulation Program, o programa está disponível para os sistemas operacionais Linux e Windows. O GIMP pode ser usado para geração e tratamento de imagens, confecções de logos animados e ediçã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 confi guração de seu monitor para 1024X768, aceite a indicação e clique em Next

SEGUE

210


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.

211


Unidade 9

Figura 9.10 - Boas vindas do GIMP

Explicar o funcionamento das inúmeras funções é um tema extenuante, mas vamos usar dois exemplos simples para criar uma imagem e trabalhar uma imagem já existente.

Desenhando no GIMP

Para começar, abra uma tela para iniciar um desenho, clicando em 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), a resolução, o tipo da imagem (RGB ou escala de cinzas (opções avançadas) e o preenchimento do fundo da imagem.

Figura 9.11 - Tela para gerenciamento de tamanho da imagem

Um novo desenho

Para começar um novo desenho, experimente um lápis digital:

Selecione no menu Ferramentas, depois Ferramentas de Pintura e fi nalmente selecione o Lápis. Ou selecione o lápis na barra de ferramentas.

212


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.

213


Unidade 9

Esse processo também pode ser feito para a cor de fundo (representada pelo quadrado branco). Posicione o balde dentro da fi gura e dê um clique.

Salvando o arquivo

Para salvar a imagem clique em Arquivo e Salvar Como.

Figura 9.13 - Caixa Salvar Arquivo

Na caixa Salvar Como, você tem a opção Navegar em outras pastas onde você pode escolher a pasta onde irá salvar o arquivo. Na opção tipo de preenchimento você irá escolher o tipo de arquivo que você deseja gravar (GIF, TIF, JPG, etc).

Fotografi as

E para trabalhar uma fotografi a gerando uma nova?

Clique em Arquivo, Abrir e selecione o diretório e o arquivo que deseja trabalhar.

A imagem ao lado foi retirada de uma fotografi a por meio da opção Seleção de Regiões Elípticas existente no menu Ferramentas.

Após selecionar, copiamos a imagem para um novo arquivo. Para isso clique na área selecionada com o botão direito do mouse e escolha a opção “Editar”, “Copiar”.

214


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>

215


Unidade 9

Síntese

Nesta unidade você aprendeu a diferença existente entre uma imagem vetorial e uma imagem bitmap. Também foi uma preocupação desta unidade esclarecer características e efi ciência de uso para tipos de arquivos utilizados em páginas Web como GIF, JPG e PNG. Além dos formatos você percebeu que efeitos como o aliasing podem prejudicar seu projeto gráfi co e que mecanismos de compressão otimizam o acesso à página. Ao estudar estes conceitos você foi apresentado ao GIMP e seus comandos básicos para edição de imagem.


1. 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.

216


2. No mecanismo de compressão podemos afi rmar 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 fi guras abaixo escolha o formato mais adequado ao tipo de imagem:

a) ( )GIF ( ) JPG b) ( )GIF ( ) JPG c) ( )GIF ( ) JPG




217


Unidade 9

d) ( )GIF ( ) JPG e) ( )GIF ( ) JPG f) ( )GIF ( ) JPG

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 ( ) JPG

6. Sobre o efeito aliasing é correto afi rmar:

a) ( ) O aliasing suavisa as margem de um gráfi co.

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.

Para uma melhor

compreensão,

visualize, no anexo



colorida.

UNIDADE 10

Tipografi a


Reconhecer os diferentes tipos de fontes.

Aplicar de forma efi ciente 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 Tipografi a

Seção 2 Serifa ou não-Serifa?

Seção 3 Famílias Tipográfi cas

Seção 4 Tipografi a 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

220



Mesmo com o advento dos computadores e da edição eletrônica de texto, a tipografi a permanece viva nas formatações, estilos e grafi as. 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. Enfi m, 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 modifi car completamente o “clima” de uma página apenas pelo uso de uma determinada fonte. Por outro lado, o mau uso da tipografi a pode fazer com que a página pareça mal projetada, difícil de ler ou ainda pouco profi ssional. 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 Tipografi a. Preparado para uma imersão no mundo da tipografi a?

Vamos lá!

SEÇÃO 1 – Tipografi a

A palavra tipografi a 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 tipografi a como sinônimo da arte de imprimir, estabelecimento tipográfi co ou imprensa. Mas a tipografi a é 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).

221


Unidade 10

A tipografi a clássica baseava-se em pequenas peças de madeira ou metal entalhadas com relevos de letras e símbolos — os tipos, o tipo é o design de uma determinada família de letras.

Os tipos foram inventados pelos chineses e inicialmente eram gravados em madeira, mais tarde em 1440 Gutemberg criou os tipos móveis de metal. Os tipos móveis eram reutilizáveis e possibilitavam a construção de textos.

A invenção de Gutemberg, conhecida como a prensa de Gutemberg, tornou-se a base da imprensa do último século e teve como marco a impressão da Bíblia em alemão em 1454.

Figura 10.1 - A prensa de Gutemberg

Hoje em dia, nos trabalhos gráfi cos, a função da tipografi a vai além da composição das palavras. A forma e a maneira como é apresentada devem transmitir seu signifi cado.

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 efi ciente. Logo, a tipografi a é uma das principais chaves deste sucesso!

<www.wikipedia.com.br>

222


Figura 10.2 e 10.3 - O uso da Tipografi a 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.

223


Unidade 10

Cultura tipográfi ca

Toda a cultura de regras tipográfi cas que utilizamos na Web vem da mídia impressa. Mas apesar de em parte este reaproveitamento de conceitos ser coerente, temos que admitir que tipos no vídeo e na impressão de papel são diferentes. Você pode analisar três pontos 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 difi cilmente chega a 85 dpi.

Segundo ponto: a área de um monitor é muito menor do que uma página de jornal, você já parou para calcular a quantidade de palavras impressas na quinta página da Folha de São Paulo? Imagine colocar isto em uma única página na Web sem rolagem.

Terceiro ponto: o uso das fontes utilizadas no site. No início a Web era limitada tanto pelo número de fontes quanto pelas cores possíveis de se utilizar. Eram disponíveis somente fontes Times New Roman (Windows) e Times (Mac).

O uso da tag <font face> acrescentada ao código HTML tornou possível especifi car qual fonte o browser deve mostrar para um texto. Mas apesar desta evolução, a fonte usada deve estar instalada no computador do usuário, se isto não ocorre o projeto tipográfi co estará comprometido. Se isto acontecer, o que você projetou e visualiza em sua máquina pode não ser o que o internauta visualiza.

Refl ita 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?

DPI - “Dots Per Inch” ou

pontos por polegada,

signifi ca que no espaço

de uma polegada existem

“n” pontos de impressão.

Quando você lê que uma

imagem é impressa com

uma resolução de 1200

dpi signifi ca que tem um

mil e duzentos pontos de

impressão no espaço de

uma polegada.

224


SEÇÃO 2 – Com serifa ou sem serifa?

Quando estudamos tipografi a para Web é comum encontrar textos onde se afi rma 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 afi rmando que as letras com serifa tendem a tremular prejudicando a leitura, causando cansaço visual no leitor.

Mas afi nal, 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 fi no nos traços.

Ex.: Garamond, Times, Bodoni, Caslon, Century.

Não existe transição entre grosso e fi no, as letras são fi nalizadas 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.

225


Unidade 10

Figura 10.4 - Hp apostando na fonte sem serifa

Fontes serifadas são vistas como mais femininas, delicadas, emocionais. A Nokia em sua campanha voltada para o público jovem, propõe diversifi cação de raças e culturas como uma apologia à globalização promovida pela Internet. Utiliza a mistura de fontes sem serifa para o texto e com serifa para o logo dando um tom pessoal e leveza, diminuindo a formalidade (Fascione, 2001).

Figura 10.5 - Nokia a diversidade exposta por meio de fontes

<www.hp.com>

<www.nokia.com>

226


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áfi cas

Existem muitas divergências entre autores sobre a classifi cação das famílias tipográfi cas. 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 fi nas e alto contraste (Modern, Bodoni, Fenice, Times Bold).

Sem serifa. Arial, Helvetica, Folio, Kabel.

<www.possessed.com >

227


Unidade 10

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ísticas sobre fontes disponíveis e comuns para diferentes instalações:

Times New RomanUsada em muitos impressos, como jornais e livros. É considerada uma fonte com boa legibilidade para impressos mas cansativa para a tela.

ArialÉ uma tipologia mais leve e mais moderna. Confortável para leitura no vídeo. Estudos demonstram que textos que utilizam Arial produzem o aumento da concentração do leitor.

VerdanaA Verdana vem com o Internet Explorer desde a versão 3. É considerada mais efi ciente 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.

GeórgiaÉ 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 Georgia possui um conjunto de caracteres em itálico e numerais atraentes (1234567890).

TrebuchetMais elegante do que a Arial, possui um conjunto de caracteres bem mais completo do que a Verdana, mas é menos legível em tamanhos pequenos.

ImpactA legibilidade da Impact é prejudicada em tamanhos pequenos. Funciona melhor para títulos, o que acaba sendo mais prático e seguro usando-se gráfi cos.

Arial Black Versão mais “pesada” da Arial, é interessante para o uso em títulos, pois para textos ela é excessivamente “bold”.

Se você fi cou curioso sobre as famílias tipográfi cas, 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.

228


SEÇÃO 4 – Tipografi a na Web

O bom uso da tipografi a depende de vários fatores.

Mas qual deles é o que infl uencia 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 identifi car 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 justifi cados, alinhado à esquerda, alinhado à direita ou centralizado.

Texto justifi cado. O uso do justifi cado cria blocos sólidos retangulares de texto. O uso do justifi cado 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 justifi cado 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 difi cultamos a leitura. O internauta tem que procurar e localizar o texto. Na verdade ele precisa identifi car onde a linha desejada inicia.

229


Unidade 10

Texto alinhado pela esquerda. Este alinhamento é o que proporciona a melhor opção de legibilidade. Ao alinharmos pela esquerda o usuário encontra rapidamente o início da linha, o lado direito da margem sendo irregular permite que o internauta se localize rapidamente ao desviar o olhar da página. Por que? Porque as quebras do lado direito fi nalizam de forma irregular, facilitando nossa percepção para reencontrar a linha em que paramos a leitura ao desviar o olhar.

Assimétrica. Um arranjo sem padrão previsível na colocação das linhas.

Alinhado à esquerda Centralizado

Alinhado à direita Justifi cado

Observe:

O uso de cabeçalhos centralizados torna-se legível em textos justifi cados.

Cabeçalhos alinhados pela esquerda devem ser usados em textos alinhados pela esquerda.

Evite o uso de textos justifi cados.

230


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 fi nal.

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 difi culdade 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.

231


Unidade 10

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 difi cí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ágrafos

Existem duas maneiras de identar parágrafos. A primeira é a forma tradicional usando a identação para identifi car o início de um novo parágrafo. A segunda maneira é o uso de uma linha em branco 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. O uso de linhas em branco torna a página mais fácil de ler e oferece espaço branco extra para o relevo visual.

232


Para identar um parágrafo você pode inserir o caractere: ( ) 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) 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á confi gurada 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).

233


Unidade 10

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 instalada em um grande número de usuários, use o texto na forma de gráfi co.

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 fi nal 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.

234


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ífi ca. No início seu uso era seletivo. Com o passar do tempo a inclusão de tags e aplicações específi cas àquela linguagem de marcação transformou o HTML em um padrão mundial.

235


Unidade 10

Com o sucesso da internet o HTML, como uma simples linguagem de marcação, estava fadado ao “extermínio”. Era necessário maior fl exibilidade na manipulação visual dos conteúdos. Novas tags, atributos criaram uma nova estilização dos conteúdos.

O HTML passou então à função de estruturar o conteúdo por meio da marcação e apresentá-lo dando a aparência fi nal.

A dupla função do HTML trouxe sérios problemas para projetistas Web. O projeto de páginas sofi sticadas, o número de páginas criadas e a dependência das empresas em relação a estas páginas, torna-se hoje uma dor de cabeça para o projetista no momento da manutenção.

Mas o que signifi ca 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 é? Afi nal é 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 180 pá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? E se o seu cliente tivesse pedido para mudar a cor dos textos, e do fundo? Problema na certa!

236


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 especifi cado 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 especifi cidade da regra de estilo.

237


Unidade 10

A 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 (defi nido na tag <head> do documento);

estilo externo (importado ou linkado).

3) folha de estilo do navegador – browser.

O estilo defi nido pelo usuário prevalece sobre todos os demais, a seguir vem as folhas de estilo defi nidas pelo desenvolvedor do site e para estas, os estilos inline (dentro de um elemento HTML) tem a prioridade mais elevada, o que signifi ca que prevalecerá sobre aquele defi nido na tag <head> e este sobre o defi nido em uma folha de estilo externa e fi nalmente, 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

Folha de estilos

Estilizando texto

Mais texto

As listas

Os links

Boxes CSS

DIV’s

Juntando tudo

DOCTYPE

Estilos externos

Estilizando tabelas

Estilizando formulários

Browsers

O futuro

238


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>

SEGUE

239


Unidade 10

O par de tags <body>...</body> engloba todo o conteúdo da sua página Web, texto, imagens, fi lmes Flash - e tudo mais. Você poderá digitar no seu editor de texto, na janela de código do seu editor WYSIWYG - ou mesmo copiar, colar o código da página básica mostrado acima.

Bem, agora temos uma página Web que é bem renderizada em qualquer navegador - depois que você tiver ‘salvado’ ela. Dê a ela o nome de ‘index.html’ pois este é o nome apropriado para a primeira página de qualquer Web site. Você poderá salvar o arquivo em qualquer lugar no hard disk do seu computador, mas para tornar as coisas claras e em ordem, crie um 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 no desktop. Dali você poderá arrastar o ícone do ‘shortcut’ direto para a janela do navegador e sua página será carregada e mostrada!

Ainda que seja uma maravilha, sua página Web não possui um ingrediente vital - o conteúdo. Não há sentido em uma página Web se ela não diz nada (ou outra coisa senão “Este é o conteúdo da minha página Web!”) mas isto eu vou deixar por sua conta.

Qualquer conteúdo deve ser colocado entre o par de tags<body>...</body> para que o navegador possa renderizá-lo.

Encher de textos a página, assim como ela está, não dá uma estrutura e nem estiliza os textos. Por não dar estrutura eu quero dizer que os textos simplesmente fl uem da esquerda para a direita, de cima para baixo, que as palavras não tem outra ênfase particular que não seja a ordem natural em que são escritas. Faria muito mais sentido grupar palavras e sentenças em parágrafos, títulos, subtítulos - bem, você deve saber, aquelas coisas básicas de estruturação de textos que se aprende na escola.

Browsers ignoram qualquer pulo de linha ou parágrafos que você insira em uma porção de texto. Eles ignoram também tabulações e até múltiplos espaços entre palavras que são interpretados 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 fi nal.

Em HTML, existem diferentes tags de marcação que se constituem no mecanismo apropriado para estruturar os textos.

SEGUE

240


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.

SEGUE

241


Unidade 10

Sublinhado pode ser conseguido com o par de tags <u>...</u> , mas sublinhados na Web tem um signifi cado especial. Usualmente indica um link. É melhor não usar sublinhado para enfatizar, pois esta prática poderá confundir o visitante do site.

Uma importante tag é a de quebra de linha <br>. Ao contrário de outras tags, esta não requer uma tag de fechamento, aliás tag de fechamento neste caso não faria qualquer sentido, não é mesmo?

Usando estas tags básicas de marcação, o texto começa a tomar forma. Ele se assemelhará a um texto produzido em um processador de texto.

Esta página básica, provavelmente se parecerá um pouco diferente quando visualizada em diferentes navegadores e computadores. Cada navegador tem o seu próprio estilo padrão e a menos que você confi gure seu navegador ele usará os estilos padrão. Para sobrescrever os estilos-padrão dos navegadores, nós criaremos nossos próprios estilos que serão agrupados em uma ‘folha de estilos’.

242


Síntese

Nesta unidade você viu aspectos relacionados a famílias tipográfi cas, 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ífi cas. Percebeu-se durante a unidade a infl uê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 fi losofi a existente no uso do CSS e sua proposta de proporcionar a facilidade e a rapidez na manutenção do site.


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 afi rmações abaixo é correto afi rmar:

a) ( ) Os tipos são a forma e o design de cada letra.

b) ( ) A tipografi a em sua forma atual é responsável pela composição de palavras e transmissão de signifi cados 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.

243


Unidade 10

2. Identifi que 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. Identifi que nas frases abaixo as famílias tipográfi cas:

(A) Moderna

(B) Manuscrito

(C) Decorativo

(D) Sem serifa

(E) Antigo

a) ( ) Esta unidade aponta para questões relacionadas a tipografi a e a legibilidade.

b) ( ) Esta unidade aponta para questões relacionadas a tipografi a e a legibilidade.

c) ( ) Esta unidade aponta para questões relacionadas a tipografi a e a legibilidade.

d) ( )

e) ( ) Esta unidade aponta para questões relacionadas a tipografi a e a legibilidade.

f) ( ) Esta unidade aponta para questões relacionadas a tipografi a e a legibilidade.

244



a) ( ) O uso de cabeçalhos centralizados torna-se legível em textos justifi cados.

b) ( ) Textos justifi cados 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.

245


Unidade 10


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 defi nição de prioridades do CSS permite defi nir qual o estilo será utilizado quando for necessário decidir entre um ou outro.

f) ( ) As folhas de estilo defi nidas pelo desenvolvedor do site prevalece sobre todos os demais.

g) ( ) Estilo defi nido pelo usuário prevalece sobre todos os demais.

h) ( ) Os estilos inline (dentro de um elemento HTML) tem a prioridade que prevalecerá sobre aquele defi nido na tag <head>.

i) ( ) O segundo nível em prioridade é o estilo default do browser.

246


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>

UNIDADE 11

O futuro da Web


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ófi cas na Web

Seção 2 Novas Tendências

248



Discutir o futuro da Web tem sido tema de pesquisas, estudos e discussões acirradas tanto no meio científi co 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 signifi ca fi delizar este usuário, cada vez mais ao seu uso. Propor inovações é um desafi o, 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 fi losófi cas 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”!

249


Unidade 11

Figura 11.1 - O pai da Web

Em 2004, o Pew Internet & American Life Project, uma organização de pesquisa de Washington, enviou uma pesquisa com 24 perguntas sobre o futuro da internet para especialistas de diferentes empresas e universidades como a Microsoft, a America Online, a Intel, a IBM e estudiosos da Universidade do Texas, da Universidade de Negev Ben Gurion, em Israel, Universidade da Califórnia entre outros, procurando traçar um possível perfi l da internet na próxima década. Encontrar unanimidade em uma pesquisa como esta é difícil, mas mesmo assim 42% dos pesquisados concordaram com a afi rmação de que o envolvimento civil aumentará nos próximos dez anos pela facilidade com que a rede disponibiliza organizações on-line.

Dos entrevistados, 40% consideraram a proliferação de recursos médicos on-line como certo e acham este fato excelente para a área da saúde. Mas 66% acreditam que a infra-estrutura da internet sofrerá pelo menos um “ataque devastador” até 2014. Outro resultado apontado está relacionado ao uso de blogs que deve provocar mudanças nas indústrias da mídia e da comunicação e na forma como esta ocorre na linguagem escrita. Muitas mudanças são apontadas na educação e no trabalho possibilitando o incremento do trabalho globalizado e o ensino a distância.

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>.

<http://www.terra.com.br/

istoedinheiro/346/ecommerce/346_

pai_internet.htm>

Curioso sobre blogs? Saiba

um pouco mais acessando

na Miditeca o artigo muito

interessante escrito por

Paulo Ricardo Colacino sob

o título “Blogs na Gestão

do Conhecimento”.

250


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 afi rmou 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 desafi o é 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 internautas

251


Unidade 11

devem ser capazes no futuro, de escolher o meio de interação que melhor supra as suas necessidades.

O W3C profetiza por meio de suas pesquisas que as atividades relacionadas ao futuro da Web passam pela interação multimodal, na atividade do browser da voz, e na atividade para independência de dispositivo. Segundo o W3C, estas novas tecnologias melhorarão o acesso à Web por meio de dispositivos móveis, tais como telefones e handhelds.

A internet móvel

Você sabe o que signifi ca internet móvel?

Podemos dizer que internet móvel é o uso de tecnologias de comunicação sem fi o (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 totalmente diferentes da internet acessada por desktops, o que deve ser claramente observado ao fazermos uso destes dispositivos.

<Fonte: http://images.google.com.br>

252


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 fi nanceiras, localização, acesso a notícias e e-mail).

Profi ssional 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ífi cas. 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áfi ca.

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 já é ativo na comunicação e após receber notifi cação acessa o site 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).

<Fonte: http://images.google.

com.br>

253


Unidade 11

Berners-Lee, em recente entrevista, foi bastante explícito sobre o mercado da internet na telefonia móvel:

“Existe mercado de massa para a Internet móvel, mas ele continuará inexplorado, a não ser que os designers criem páginas de Web mais simples, que possam ser vistas de forma apropriada nos celulares”.

“Os designers de sites aprenderam a projetar para defi cientes visuais e outras pessoas dotadas de necessidades especiais. Aprenderão, em poucos anos, a criar sites que atendam às pessoas que usam celulares”.

Aplicações voltadas à internet móvel devem considerar características cognitivas do usuário que não está sentado em frente a um desktop, Alguns detalhes a serem observados quanto a esse tipo de usuário são:

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 tradicional.

O celular é limitado em termos de capacidade computacional.

Não esqueça de que muitos usuários ainda olham para o celular como um celular e de forma alguma, querem visualizá-lo como um mini computador.

Nunca esqueça: a velocidade no acesso é crítica.

Caso você deseje se aventurar em projetos para Web móvel é importante lembrar que existem dois aspectos relevantes a serem considerados: o fl uxo e a navegação e o gerenciamento da cache no aparelho móvel.

Fonte: <http://images.google.com.br>

Cache - é um lugar

para guardar algo

temporariamente. Quando

visita uma página de web,

a página será guardada na

“cache” do seu telemóvel.

Significa que quando voltar

a uma destas páginas, o

browser poderá obtê-las a

partir do cache, em vez de

aceder às páginas através

do servidor originário, o

que lhe permite poupar

tempo. Fonte Glossário

Motorola <http://direct.

motorola.com>

254


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 ainda mais impacientes do que usuário web tradicional, tenha uma atenção especial sobre o fator tempo de resposta.

Mantenha o scroll de tela no mínimo necessário.

Evite o desperdício de banda de passagem, banners, fi guras pesadas.

Cuidado no contraste das imagens, o internauta pode utilizar o móvel em qualquer lugar inclusive na praia de Copacabana com um sol de 40 graus! A imagem pode fi car quase ilegível com muita luminosidade.

Evite ícones retangulares.

Use textos concisos.

Cuidado ao abreviar informações, lembre-se que mesmo sendo conciso, o texto deve ser inteligível para o internauta.

Considere cuidadosamente o tamanho da tela na hora de colocar mapas e imagens (tem aproximadamente 10 a 12 linhas).

Informações relevantes devem aparecer primeiro.

Páginas devem ser pequenas (são mais rápidas de carregar).

Use tabelas simples com um mínimo de colunas

Não varie muito o tipo de 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.

255


Unidade 11

Evite usar recursos de um celular específi co, pois você estará limitando o uso de sua aplicação. Se você desenvolver para um modelo em específi co e voltado para um determinado hardware você vai estar atrelado a este hardware não sendo possível utilizar seu produto em outra linha de celulares. Como você já percebeu, um longo caminho ainda deve ser trilhado até termos uma internet móvel efi ciente. Mas o sucesso nesta jornada depende - e muito - de projetistas que explorem de forma correta e efi ciente, os recursos destes equipamentos levando em consideração suas restriçõ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 ofi cial do WAP fórum:

<www.wapforum.com>

<www.motorola.com>

Site do Third Generation Partnership Project:

<www.3gpp.org>

Fonte: <http://images.google.com.br>

256


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 sufi ciente, 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 fi ltradas. A linguagem HTML, que popularizou a Web e é utilizada pela maioria dos sites, não possui recursos que permitam atribuir signifi cado à informação. Para melhorar a indexação, isto signifi ca gerar categorias para fi ltrar de forma mais apurada, as necessidades do internauta dentro de um contexto.

257


Unidade 11

O projeto da Web Semântica é conduzido pelo W3C, cujos princípios são incluir “informação sobre a informação” na Web.

A Web Semântica tem um componente que é fundamental para a sua composição: é a linguagem XML, que permite descrever semanticamente os dados e, a partir de categorias que o próprio usuário pode defi nir (COMCIENCIA, 2005).

O XML é fundamental por permitir que um dado seja encontrado e distribuído pela rede e apresentado em um browser de várias formas possíveis, ou então, pode ser transferido para outras aplicações para processamento futuro e visualização.

Segundo (COMCIENCIA, 2005), outros componentes da Web semântica são:

URI: Universal Resource Identifi er. Como a URL especifi ca uma identidade, não necessariamente por sua localização na Web.

RDF: Resource Description Framework. Uma linguagem e uma gramática para defi nir informação na Web.

Ontologias. Conjuntos de asserções que defi nem as relações entre conceitos e estabelecem regras lógicas de raciocínio sobre eles. Para interpretar o signifi cado 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.

<www.w3C.org>

Se você deseja conhecer

mais sobre XML acesse

o tutorial disponível na

página <http://www.

gta.ufrj.br/grad/00_1/

miguel/>

258


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 fi ltragem, 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 desafi os permanentes que devem ser superados, procurando a oferta do melhor projeto de interfaces ao usuário fi nal.

259


Unidade 11


1. 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 fi o (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ífi ca 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áfi ca 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 fi nal da tela.

b) ( ) Mantenha o scroll de tela no mínimo necessário.

c) ( ) O uso de fi guras 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.

260


f) ( ) Use textos concisos.

g) ( ) Informações relevantes devem aparecer no fi nal da tela.

h) ( ) Faça uso de no mínimo 6 tipos de fontes diferentes para cada tela.

3. É correto afi rmar 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 signifi ca gerar categorias que fi ltram 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>

Para concluir o estudo

Durante esta disciplina a principal oportunidade vislumbrada pelo conteudista foi a de demonstrar as possibilidades de transmitir ou não informação por uma página Web, estabelecendo ou não comunicação com o usuário fi nal. Somente estar disponível na grande rede não garante que a informação esteja sendo transmitida como o cliente deseja.

Existem muitas etapas e conceitos que devem ser seguidos para que isto ocorra com sucesso tanto para o cliente quanto para o internauta.

Um dos pontos centrais apresentados na disciplina foi o de que o usuário fi nal da página deve ser o maior referencial durante o projeto, pois é a ele que você deseja atingir.

A partir desta necessidade inicial descortinou-se na disciplina fatores como projeto, imagens, textos, qualidade da informação, das formas, dos diferentes temas desenvolvidos em páginas, da usabilidade necessária e como avaliá-la e fi nalmente as tendências de futuro da web. A conclusão que se chega é a de que cada um dos fatores listados contribui de forma determinante para o bom projeto de um site.

A fi nalização desta disciplina só estará completa se você, aluno, aplicar estes conceitos na prática desenvolvendo de forma disciplinada em projetos criativos todo o conhecimento adquirido durante esta disciplina.

Referências

About 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. Human Factors and Ergonomics Society (HFES) 2000 Congress. Proceedings, San Diego, 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 of Educational Hypermedia Systems, Congresso Nacional de ambientes Hypermí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 da Web -- 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.

264

FASCIONE, L, VIEIRA, M.H. A tipografi a 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áfi cas. 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.

265

PERAZZO, L., MAZLOVA, T. Elementos da Forma. Rio de Janeiro, Ed. Senac Nacional, 1997.

PREECE, J.; ROGERS, Y.; SHARP, E.; BENYON, D.; HOLLAND, S.; CAREY, T. Human-Computer Interaction. Addison-Wesley, 1994.

PRING, Roger. www.tipografi a. 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 Publishing Co., 1992.

TAURION, Cezar. Internet Móvel tecnologias. aplicações e modelos, Ed. Campus, 2002.

WEBER, Raul, F. Arquitetura de Computadores Pessoais. Séries de Livros Didáticos, Instituto de Informática da UFRGS, Sagra Luzzatto, Porto Alegre.

WILLIANS, R., TOLLET, J. Web Design para Não Designers. Ed. Ciência Moderna, 2001.

WINCKLER, M., BORGES, R.C., BASSO, K. Considerações sobre o uso de cores em interfaces WWW. III Workshop de Fatores Humanos em Sistemas e Computação, 2000, Gramado, RS.

ZELDMAN, Jeff rey. Projetando Web Sites Compatíveis. New Riders, 2004.

Sobre a professora conteudista

Vera Rejane Niedersberg Schuhmacher é Mestre em Engenharia de Produção com ênfase em Usabilidade de Software pela Universidade Federal de Santa Catarina - UFSC. Professora da Unisul desde 1998 em disciplinas oferecidas nos cursos de Ciência da Computação e Sistemas de Informação e Pós-graduação. Pesquisadora do Núcleo de Computação atua como Coordenadora do NPU- Núcleo de Pesquisas em Usabilidade prestando consultoria em Engenharia de Software e Usabilidade em empresas de tecnologias e projetos fi nanciados por órgãos de fomento como Finep, CNPq e Funcitec.

Respostas e comentários das atividades de auto-avaliação

Unidade 1

1. A pregnância baseia-se na simplifi cação natural da percepção. Ao fazer um desenho as áreas regulares são as mais fáceis de serem compreendidas pois exigem menos simplifi cação por parte do individuo. A pregnância da forma faz com que o individuo identifi que 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 fechamento é o logotipo da Pizarria Massa Fina da cidade de Santo Amaro no estado de São Paulo.

Outro exemplo é o logotipo do Armazém Vieira - <http://www.armazemvieira.com.br/>

270


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 signifi ca 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.

271


Unidade 2

1. 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) C

3. 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 3

1. Alternativa correta: C


3. Alternativa correta: A e D

4. Alternativa correta: B


272


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 fl exibilidade 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 fi m de identifi carmos a forma como este usuário pensa sobre as tarefas propostas no site. Em outras palavras o projeto de interações deve refl etir 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) F

273


5) 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 fi nanceiros 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 difi culdades em sua execução.

Unidade 5


2.

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 difi cultando 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

274


• 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.

275


3. a) A

b) T

c) B

d) A

e) B

Unidade 6

1. 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 verifi cando 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 fi m de facilitar sua navegação.

Os links devem ser breves concisos e na linguagem do internauta, caso exista algum termo específi co será colocada uma ajuda sobre o termo.

Os links e botões devem ser visualmente identifi cáveis o que signifi ca reconhecíveis pelo usuário.

3. Alternativas corretas: A e B

4. Alternativas corretas: B e D

Unidade 7

1. a) V

b) F

c) F

d) V

e) V

276


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


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 F

277


4. a) V

b) F

c) V

d) F

e) F

f) F

g) F

h) V

Unidade 9

1. a) V

b) V

c) V

d) V

e) B

f) B

g) V

2. Alternativas corretas: A e C



5. a) Gif

b) Jpg

c) Jpg

d) Gif

e) Jpg

f) GiF

g) Gif

h) Jpg

278


i) Gif

j) Jpg

k) Gif

l) Jpg

m) Gif

n) Gif

o) Jpg


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) C

279


4. a) V

b) F

c) V

d) F

e) V

f) F

g) V

5. Alternativas corretas: A. D e E

6. a) V

b) V

c) F

d) F

e) V

f) F

g) V

h) V

i) F

Unidade 11

1. a) V

b) F

c) F

d) V

e) F

f) V

g) V

2. Alternativas corretas: B, C e F

3. Alternativas corretas: A, B e C

Comunicação visual pra web

Documents

Transcript of Comunicação visual pra web