203

5. Design de telas

5.1 O que é Design de telas?

O termo Design de telas (screen Design) se refere ao processo de determinação da aparência

visual e do conteúdo de um quadro simples e do resultado final desse processo. Nos tempos

dos terminais remotos, as telas eram sinônimos de telas físicas: apresentar uma nova tela

implicava em repintar a tela física inteira. Com as interfaces gráficas (GUI), o Design de telas

assumiu um significado diferente. Nessas aplicações, as pessoas se referem ao Design de telas

como criação de janelas específicas ou caixas de diálogo, em vez de se referir a telas inteiras.

A importância do Design de telas hoje se explica pelo fato de o canal visual ser o meio mais

importante de comunciar informações ao usuário. Uma variedade de estudos ilustraram a

importância das telas:

- TULLIS (1981) descobriu que redesenhar a tela-chave de um sistema de telefonia resultou

em uma redução de 40% do tempo gasto para interpretar o display.

- KEISTER e GALLAWAY (1983) descobriram que redesenhar uma série de telas resultou

em 25% de redução do tempo total de processamento de um sistema, e 25% de redução

nos erros.

- Em um estudo de mais de 500 telas, TULLIS (1984) concluiu que o tempo gasto pelos

usuários para extrair informação de um sistema de companhia aérea foi 128% maior para

o pior formato, em comparação com o melhor formato.

- Numa pesquisa sobre um sistema determinado, DONNER, MCKAY, O’BRIEN e

RUDISILL (1991) concluíram que houve reduções de até 28%, no tempo que os usuários

empregavam para obter informações relevantes.

Uma olhada na literatura demonstra que uma grande base de conhecimento a respeito do

Design de telas acumulou-se durante os últimos 30 anos. Esse conhecimento deriva-se de

204

diversas fontes, entre elas:

- a pesquisa básica em psicologia;

- estudos em ergonomia;

- experiências de usuários e designeres de aplicações; e a

- experiência em Design gráfico.

Muitas informações foram compiladas em diretrizes (guidelines), abordando o desenho de

telas e outras características das interfaces humano-computador. Diversas diretrizes são bem

embasadas em pesquisas básicas e aplicadas, porém, muitas não.

O Design da interface visual dos sistemas computadorizados recebeu mais atenção no estudo

e nas diretrizes da Interação Humano-Computador (HCI), do que qualquer outro aspecto da

interface.

Se a maior parte dos documentos de diretrizes (guidelines) são independentes dos sistemas

operacionais, existem duas grandes exceções: as descrições da Apple sobre a interface gráfico

do Macintosh, que datam de 1992, e as descrições da interface gráfica do Windows, elaborada

pela Microsoft, em 1995. Esses dois livros apresentam as regras de Design de telas adotadas

para os dois sistemas. Esses livros descrevem as convenções específicas adotadas pelas

empresas citadas, enquanto que as diretrizes genéricas existentes abordam uma gama de

convenções a serem adotadas por qualquer interface.

A aparente abundância de diretrizes (guidelines) que abordam o Design de telas de sistemas

informatizados pode nos levar, equivocadamente, a acreditar que existem correspondentes

evidências empíricas, relacionadas ao Design de telas. Mas isso não é verdade: há poucos

estudos relevantes, sendo que muitos problemas relacionados ao Design de telas precisam ser

pesquisados empiricamente, especialmente aqueles relacionados às interfaces gráficas com o

usuário (GUI).

A maior parte dos estudos abordaram exclusivamente telas alfanuméricas. O modo comum de

mensuração tem sido o tempo de procura da informação, isto é, o tempo de extrair um dado

específico ou um item de informação de uma tela. Estudos empíricos compararam a

performance em dois ou mais métodos de apresentar a mesma informação. Enquanto alguns

estudos tentaram manipular variáveis sistematicamente, outros compararam telas que diferiam

205

entre si de diversas maneiras, incluindo o uso de itens alfanuméricos e gráficos. Incluídos

nesta categoria estão estudos que comparavam uma versão existente de tela com uma versão

redesenhada. Geralmente, redesenhos envolvem grande variedade de alterações, tornando

difícil atribuir variações de performance às mudanças específicas da tela.

TULLIS (1984), conduziu aprofundado estudo para investigar a variedade de formatos de

telas alfanuméricas. O pesquisador utilizou um programa de computador para medir seis

características: densidade geral, densidade local, número de grupos, tamanho médio de cada

grupo, número de itens e alinhamento dos itens. Regressões foram empregadas para

determinar tempos de procura, assim como a facilidade subjetiva relacionada às variáveis

pesquisadas. Estudos abordando telas gráficas se tornaram mais difíceis, devido à sua grande

complexidade e número de variáveis. Outros estudos enfocaram a comparação dos displays

alfanuméricos com displays gráficos, num nível global. Também foram pesquisadas quais

seriam as tarefas mais apropriadas para displays gráficos, em comparação com alfanuméricos.

5.2 - Elementos da interface gráfica com o usuário (GUI)

Segundo MARCUS (1994), uma interface gráfica com o usuário (GUI) deve considerar os

seguintes fatores:

- imagem mental (metáfora);

- organização apropriada de dados, funções, tarefas e papéis (modelo cognitivo);

- esquema eficiente de navegação entre os dados, as funções, as tarefas, etc.;

- aparência de qualidade (“look”);

- seqüência de interações eficazes (“feel”).

Além disso, as interfaces gráficas (GUI) de sucesso considerariam aspectos críticos como

desenvolvimento, usabilidade e aceitação. Todos esses fatores se beneficiariam da

comunicação visual da interface. A organização conceitualmente adequada, a apresentação

visual consistente e o emprego da linguagem visível contribuiriam para a comunicação da

interface. O conceito de linguagem visível se refere às seguintes técnicas, usadas para a

comunicação de mensagens e de conteúdos: layouts, tipografias, cores e texturas, imagens (da

abstração à fotografia), animações, seqüenciamentos (roteirização), som e identidade visual

(as regras para a consistência geral das interfaces).

206

A manipulação da linguagem visível seria tarefa básica das interfaces. Os três princípios a

seguir podem se tornar úteis tanto para a prática profissional, como para a pesquisa e para o

desenvolvimento – explica-nos MARCUS (1994):

1 – Organizar: fornecer ao usuário uma estrutura conceitual clara e consistente;

2 – Economizar: maximizar a eficácia de uma gama limitada de recursos visuais;

3 – Comunicar: associar a apresentação às capacidades do usuário.

Para MANDEL (1997), a cor seria mecanismo automático para captar a atenção do

observador: portanto, muitas cores em uma interface permitiriam que usuários prestassem

atenção às telas. Ajudariam a criar uma interface amigável e fácil. Entretanto, seria importante

evitar o efeito “Las Vegas”, que pode distrair os usuários de suas tarefas específicas. Cores

brilhantes atraem clientes e usuários, mas quando se senta em frente a um computador por

horas seguidas, o usuário não necessita de cores para distrair sua atenção durante o trabalho.

Se as cores têm um forte efeito sob a percepção humana, devem ser usadas adequadamente:

são empregadas para atrair atenção, mas incompatíveis com longos períodos de trabalho, na

frente da tela de um microcomputador.

Algumas diretrizes para aplicação de cores podem parecer fora de moda hoje. Entretanto,

características cognitivas e a percepção humana não se alteram através do tempo. Essas

diretrizes continuam válidas; novos softwares e hardwares devem desenvolver a sua aplicação

adequada.

MURCH, apud MANDEL (1997), um pesquisador respeitado no que se refere aos aspectos

psicológicos e físicos da cor, afirma: “é impossível desenvolver uma gama completa de

diretrizes para o uso, em todas as aplicações. Podemos, entretanto, estabelecer princípios

amplos, baseados nos mecanismos de percepção da cor pelos seres humanos”.

O pesquisador apresentou vinte e cinco diretrizes divididas em três grupos: fisiológicas,

perceptivas, e cognitivas (ver tabela a seguir).

207

Diretrizes Fisiológicas

1. Evitar apresentar, na tela, cores altamente saturadas e do extremo do espectro luminoso.

2. O azul saturado deve ser evitado para textos, linhas finas ou pequenas formas.

3. Evitar cores adjacentes que se diferenciam apenas na quantidade de azul.

4. Usuários mais velhos necessitam de mais brilho para distinguir as cores.

5. As cores mudam de aparência de acordo com os níveis de iluminação do ambiente.

6. A magnitude de uma mudança percebida de cores varia ao longo do espectro luminoso.

7. É difícil focalizar cantos criados somente através de cores.

8. Evitar o verde e o vermelho na periferia de grandes displays.

9. Cores opostas funcionam bem quando juntas (vermelho/verde ou amarelo/azul).

10. Para usuários visualmente deficientes, deve-se evitar distinções baseadas em uma só cor.

Diretrizes Perceptivas

1. Nem todas as cores são igualmente discerníveis.

2. Luminância não é sinônimo de brilho.

3. Diferentes padrões de cores possuem diferentes níveis de saturação.

4. A luminosidade e o brilho são distinguíveis em uma cópia impressa, mas não em uma tela de

um monitor colorido.

5. Nem todas as cores são igualmente legíveis.

6. As cores se alteram em relação ao fundo (background).

7. Evitar a necessidade de distinção entre cores em áreas pequenas.

Diretrizes Cognitivas

1. Não abusar no emprego das cores.

2. Estar consciente da manipulação não linear das cores em monitores e em cópias impressas.

3. Fazer o agrupamento de elementos relacionados entre si através de uma cor de fundo comum.

4. Cores similares têm a conotação de significados similares.

5. Brilho e saturação atraem a atenção.

6. Ligar o grau de mudanças nas cores à magnitude dos eventos da interface.

7. Ordenar as cores com base em sua posição no espectro luminoso.

8. Cores frias e quentes devem indicar diferentes níveis de atividade.

TABELA 5.1 – “Diretrizes para o Uso de Cores em Telas de Computador” de acordo

com MURCH (1984), apud MANDEL (1997).

208

MARCUS (1986) tornou-se um conhecido designer de interfaces e consultor da indústria de

computadores, com background em informação e Design gráfico. O pesquisador aplicou os

seguintes princípios para o uso da cor: organização, economia, ênfase, interações, simbolismo

e comunicação. Os seus “Dez mandamentos da cor” são estes:

Dez mandamentos da cor

1. Usar no máximo entre três e sete cores.

2. Utilizar cores centrais e periféricas apropriadamente. Por exemplo, usar vermelho e verde para o

centro do campo visual; azul é adequado para fundos e bordas.

3. Utilizar cores que exibem contraste mínimo com relação a seus tamanhos. 4. Não utilizar simultaneamente cores com alto nível cromático e de extremos do espectro luminoso.

5. Utilizar código de cores familiar e consistente.

6. Usar a mesma cor para agrupar elementos relacionados.

7. Utilizar o mesmo código de cores para treinamento, testes, aplicação e publicação.

8. Utilizar cores saturadas para chamar a atenção.

9. Se possível, utilizar um código de formas, aliado a um código de cores.

10. Utilizar cores para enfatizar as informações em preto e branco.

TABELA 5.2 – “Dez mandamentos da cor”, segundo o designer MARCUS (1986)

5.3 - Utilizando o áudio na interface com o usuário

A interface com o usuário pode utilizar também o emprego de áudio. Existe muita discussão

sobre a eficiência do emprego de áudio como feedback, nas interfaces. Se aplicado

corretamente, torna-se não invasivo e pode ser desligado pelo usuário. Usuários rapidamente

procuram o controle do volume dos recursos de áudio caso sons, bips e cliques, assim como

209

vozes e músicas, começarem a incomodá-los ou a e a interromper seu trabalho. Deve-se saber

quando utilizar informações auditivas, em vez de informações visuais; deve-se determinar

qual é o apropriado recurso de áudio a ser apresentado ao usuário de um sistema, em uma

situação específica. O áudio precisa ser customizado pelo usuário de tal forma que o volume

possa ser abaixado ou desligado. Grande parte dos ambientes de trabalho, hoje em dia, são

abertos, o que quer dizer que os trabalhadores não têm escritórios individuais: quando pessoas

trabalham em grande proximidade com outras, juntamente com telefones e computadores, o

áudio não será eficaz. Trabalhadores, nestas cirscunstâncias, freqüentemente não conseguem

identificar qual telefone está tocando ou qual computador está emitindo sons.

A maior parte dos softwares da atualidade utilizam pelo menos um feedback de áudio,

normalmente bips curtos quando ocorre erro, ou quando uma opção inválida é escolhida.

Entretanto, até mesmo esses inofensivos bips podem aborrecer o usuário, ou perturbar seu

trabalho. Em algumas culturas, trabalhadores envergonham- se quando cometem erros; nesses

casos, a última coisa que desejam é um computador apitando, pois não querem que seus

colegas percebam erros que cometem.

Usar apresentação auditiva quando: Usar apresentação visual quando:

1. A mensagem é simples.

2. A mensagem é curta.

3. A mensagem não será utilizada depois.

4. A mensagem lida com eventos através da

linha do tempo.

5. A mensagem clama por ação imediata.

6. O sistema visual do usuário está

sobrecarregado.

7. O local está muito escuro ou muito

iluminado.

8. A atividade do usuário requer que ele deixe

seu posto de trabalho continuamente.

1. A mensagem é curta.

2. A mensagem é longa.

3. A mensagem será utilizada depois.

4. A mensagem se relaciona a localizações

espaciais.

5. A mensagem não clama por ação imediata.

6. O sistema auditivo do usuário está

sobrecarregado.

7. O local é muito ruidoso.

8. A atividade do usuário requer que ele

permaneça em seu posto de trabalho.

TABELA 5.3 – Diretrizes para apresentação de mensagens auditivas ou visuais,

segundo DEATHERAGE (1972), apud MANDEL (1997).

210

5.4 - Como utilizar animações na interface com o usuário

Outro recurso das interfaces com o usuário é o emprego da animação. Animação pode ser

definida como uma mudança na aparência visual de um elemento gráfico, através do tempo.

Da mesma forma que o áudio, grande parte das animações podem ser consideradas

entretenimento, embora cursores animados possam se tornar mais fáceis de enxergar,

especialmente em telas pequenas, como as de notebooks.

O Apple Macintosh foi um exemplo das primeiras interfaces a utilizar animações. Muitas

interfaces gráficas, hoje em dia, utilizam técnicas de animação para apresentar atividades,

progressos, ou o status do sistema. Animações também são utilizadas em aplicações

complexas como os documentos multimídia. Existem entretanto poucas diretrizes disponíveis

para o uso de animações nas interfaces.

As diretrizes fornecidas pela Microsoft apresentam somente meia página de texto. As

melhores descrições sobre quando e por que utilizar animações foram fornecidas por

BAECKER et al. (1991), apud MANDEL (1997), que discutiram formas de auxiliar os

usuários, através das animações, no artigo “Bringing Icons to Life” (trazendo à vida os

ícones).

Os autores listavam as seguintes questões, que podem auxiliar os designeres de interfaces no

projeto de sistemas interativos, que incluem animações. As diretrizes listam o tipo de

perguntas do usuário que a animação pode ajudar a responder, para nível de interação com o

sistema (ver a tabela a seguir).

211

Tópico da interface

Perguntas que a animação responde:

1. Identificação

2. Transição

3. Orientação

4. Escolha

5. Demonstração

6. Explicação

7. Feedback

8. Histórico

9. Interpretação

10. Aconselhamento

1. O que é isto?

2. De onde vim e para onde vou?

3. Onde estou?

4. O que posso fazer agora?

5. O que faço com isto?

6. Como faço isto?

7. O que está acontecendo?

8. O que foi que eu fiz?

9. Porque isto aconteceu?

10. O que devo fazer agora?

TABELA 5.4 - Perguntas que a animação pode responder, de acordo

com BAECKER et al. (1991), apud MANDEL (1997).

5.5 - Problemas das interfaces com o usuário

Os maiores problemas de interfaces gráficas somam dez, segundo a experiência prática e as

pesquisas dos profissionais de usabilidade da IBM, que compilaram a seguinte lista dos

problemas mais comuns encontrados nelas, envolvendo questões relativas a qualquer projeto

de software para computadores:

1. ambigüidades dos menus e dos ícones;

2. problemas de linguagem;

3. limitações à entrada de informações e à manipulação direta de objetos;

4. limites à seleção de opções;

5. seqüência de passos não claros;

212

6. mais passos para gerenciar as telas da interface, do que para completar tarefas;

7. ligações complexas dentro e entre aplicações;

8. feedback e confirmações inadequadas;

9. falta de inteligência antecipatória do sistema;

10. mensagens de erro inadequadas, assim como help, tutoriais e documentação deficientes.

“Quanto ao layout e Design dos elementos das janelas de uma interface, pode-se dizer que se

trata de arte e ciência ao mesmo tempo: cores, fontes, tamanhos, controles, orientações,

simetrias, ênfases e numerosos outros fatores influenciam o desenho final de uma simples

janela da interface” (MANDEL, 1997).

5.6 Diretrizes gerais para Design de telas

TULLIS (1997) descreveu algumas diretrizes e técnicas de Design de telas de computadores,

relevantes para um grande número de aplicações, da seguinte forma:

5.6.1 – Sobre a quantidade de informação:

Talvez o maior problema do Design de telas esteja relacionado com a quantidade de

informação que deve ser apresentada. Quase todas as diretrizes especificam que o total de

informação em cada tela deve ser minimizada, apresentando-se somente aquilo que é

necessário para o usuário, naquele ponto específico do processo de interação.

Um aspecto relacionado seria a medida da densidade de informação. Nas telas em modo

caracter, a densidade de informação é geralmente expressa como a porcentagem dos

caracteres em uso. DANCHAK, apud TULLIS (1997) propôs a seguinte definição: “a carga

do display (display loading), que representa a porcentagem da área da tela que está ativa, não

deve exceder 25%”. Segundo ele, uma análise quantitativa de displays de computador

213

considerados “bons” revelaram uma carga em torno de 15%. Por outro lado, diretrizes da

NASA afirmam que uma tela de computador não deve exceder 60%, em termos de

intensidade de informação.

No caso de interfaces gráficas (GUI), o designer está diante de duas decisões: qual o tamanho

que vai utilizar para a tela e quantas informações vai colocar nela. O limite máximo do

tamanho da tela está determinado pela resolução mínima do hardware do seu público-alvo,

isto é, 640 por 480 pixels. Mas, para janelas e caixas de diálogo, que não sejam a janela da

aplicação principal (que costuma ser dimensionável), utiliza-se um tamanho menor.

Calcular a densidade de informação para as telas de interfaces gráficas (GUI), analogamente

às densidades de caracteres, seria problemático. Entretanto, a análise das telas gráficas revela

que a grande maioria dos elementos textuais é preta. Uma análise dos caracteres típicos do

sistema Windows mostra que a letra média tem um total de 57,6 pixels, com 14,1 pixels em

preto. Esses valores podem ser utilizados para converter tamanhos de janelas (em pixels) para

espaços de caracter equivalentes e o número de pixels em preto para os equivalentes

caracteres. Um estudo, citado por TULLIS (1997), chegou à “densidade de informação

presumida” das telas de interfaces gráficas de 171 janelas de aplicações comerciais para

sistema operacional Windows. O resultado (25,2%) é extremamente próximo da densidade

média apresentada por telas em modo caracter. A similaridade da distribuição nos dois modos

(caracter e gráfico) parece validar a pressuposição de que princípios similares determinariam

o Design dos dois tipos de telas de computador.

A evidência empírica a respeito da densidade da informação demonstra consistência: na

medida em que a informação necessária para completar a tarefa está presente, o desempenho

humano tende a se deteriorar com o aumento da densidade do display. Um grande número de

pesquisas mostrou que o tempo e o número de erros, para uma determinada tarefa, aumentam

na proporção em que o número de itens de informação que aparecem na tela aumenta

(CALLAN, CURRAN, e LANE, 1997; DODSON e SHIELDS, 1978; RINGEL e HAMMER,

1964).

Além disso, TULLIS (1997) mostra que o tempo de procura de informações geralmente

cresce, quando aumenta a densidade de informações. Apesar de a tendência de densidades

altas estarem associadas à degradação da performance, isso pode ser amenizado por outras

214

características da configuração de telas, sendo que o designer deve determinar qual a

quantidade ótima de informação deve ser apresentada em cada tela acessada, para cada ponto

da interação do usuário com o sistema. Informações não estritamente necessárias devem ser

apresentadas somente se o usuário solicitar.

Existem técnicas para reduzir a densidade de informações: se o designer determinar qual

informação deve ser apresentada, várias técnicas podem ser usadas para assegurar que a

informação não vai sobrecarregar a tela. Uma redução significativa do tempo que os usuários

gastam para interpretar a tela pode ser conseguida, com a mesma densidade de informação,

através da aplicação de princípios de Design de telas informacionais. Alguns desses princípios

são comentados a seguir:

- uso apropriado de abreviações – embora muitas diretrizes recomendem utilizar sempre

palavras completas, em vez de abreviações, estas são apropriadas em alguns casos:

quando economizam um espaço importante e quando são bem conhecidas dos usuários.

- evitar detalhes desnecessários – por exemplo, apresentar somente números inteiros quando

as informações das casas decimais não serão utilizadas pelo usuário.

- empregar vocabulário conciso – esta regra se aplica à maior parte da comunicação técnica,

mas é particularmente importante nas telas de sistemas de computador devido ao espaço

limitado. A escolha dos vocábulos deve ser feita tendo como base no que os usuários vão

compreender.

- usar formatos conhecidos – certos itens de informação, em certos contextos, são tão

facilmente reconhecidos que não será necessário explicá-los individualmente. Um

exemplo clássico é o nome, endereço, cidade, estado, e código postal de uma pessoa, em

seu formato tradicional.

- utilizar formatos tabulares com títulos – os formatos tabulares apresentam muitas

vantagens sobre outros formatos, uma das quais é colocar títulos eficientes nas áreas de

informação relacionadas.

Outras técnicas são utilizadas para fazer com que a informação esteja prontamente disponível

na tela, sem que seja apresentada de uma só vez:

215

- caixas de diálogo expansíveis: com esta abordagem, a caixa de diálogo tem dois

tamanhos. Na versão menor, que é mostrada como default, estão os itens mais necessários,

assim como um botão para expandir a caixa para a versão completa. A caixa maior revela

opções adicionais.

- Folders drop-down – essa técnica permite a fácil alteração entre os itens de uma sequência

de dados, na mesma janela, selecionando-os de forma mutuamente exclusiva.

- Listas drop-down e pop-ups – essa família de técnicas proveu fácil acesso a informações

ou opções adicionais relacionadas a um item de controle específico. Na maior parte dos

casos, o usuário clica um botão que revela as opções adicionais; em outros casos, o pop-up

automaticamente revela suas opções, quando o usuário aponta o mouse sobre o controle

associado.

Em resumo, o Design deve assegurar que cada tela ou janela contenha somente a informação

que é realmente necessária para que o usuário complete a tarefa esperada, em cada ponto do

processo de interação. A tentação de se colocar informações adicionais somente porque estão

disponíveis, deve ser evitada, já que elas claramente degradam a habilidade do usuário de

extrair informações relevantes. Com telas em modo de caracter ou com interfaces gráficas, as

densidades de informação de aproximadamente 25% são a média, enquanto que densidades

maiores do que 40-45% são atípicas. Com maiores densidades de informação, há degradação

da performance humana, mas ela pode ser amenizada por outras formas e características do

formato da tela, como o agrupamento. Uma grande variedade de técnicas pode ser utilizada

para minimizar a densidade aparente das informações (TULLIS, 1997).

5.6.2 – Sobre o agrupamento da informação:

Dentro de uma certa quantidade de itens para a apresentação, existem muitas maneiras para

que os elementos possam ser agrupados visualmente na tela. Essas formas de agrupamento

tem um papel importante para a facilidade com que o usuário vai extrair informações, assim

como na interpretração que dará a elas. A importância do agrupamento das informações tem

sido enfatizada na maioria das diretrizes de interfaces gráficas publicadas. Agrupar itens

216

similares, de forma a que fiquem juntos na tela, aumenta a sua legibilidade e enfatiza as

relações entre os diferentes grupos de informação.

O agrupamento é um dos mais importantes determinantes da capacidade do usuário de extrair

eficazmente informações de uma tela de computador. A tela que contém vários pequenos

grupos ou somente poucos grandes grupos é mais difícil de ser visualmente escaneada do que

uma contendo grupos que tendem a utilizar um ângulo visual de cinco graus

(aproximadamente treze caracteres por seis linhas ou 105 pixels de diâmetro). Observa-se que

os critérios para o agrupamento devem espelhar o que pensa o usuário e sua voz deve ser

ouvida para o embasamento das decisões de Design de telas.

5.6.3 – Sobre o destaque das informações na tela:

Uma varidade de técnicas pode ser utilizada para captar atenção do usuário e dirigi-la a certos

elementos da tela como: vídeo reverso, cores, ênfase, brilho, sublinhado, pisca-pisca, etc.

Embora exista grande variedade de técnicas para destacar elementos de uma tela de

computador, pontos importantes devem ser lembrados.

Primeiro, não importando a técnica utilizada, o destaque de informações deve ser aplicado de

modo conservador: o uso excessivo de destaques contraria o seu propósito básico.

O segundo ponto é que as cores parecem ser a forma mais eficaz de destacar informações,

seguida pela técnica do vídeo reverso. Um outro aspecto é que os elementos a serem

destacados devem ser escolhidos cuidadosamente: se o elemento errado for destacado, a

dificuldade do usuário em detectar a informação importante aumentará.

5.6.4 – Sobre o posicionamento e seqüenciamento de informações:

Embora enfatizar informações possa ajudar o usuário, nem sempre é possível predizer qual é a

informação mais importante para o operador, num determinado momento de sua interação.

Por esta razão, toda tela deve ser apresentada de modo que permita ao usuário encontrar

qualquer informação. Uma das melhores formas de fazer isto é adotar formato consistente e

217

repetitivo, para todas as telas em uma aplicação, ou em uma série de aplicações similares.

Esta consistência permitirá que usuários desenvolvam expectativas sobre onde poderão

encontrar informações que desejam, tornando mais fácil o aprendizado de uma nova

aplicação, compatível com o formato que ele já conhece. Os benefícios ganhos com layouts

consistentes de telas foram demonstrados empiricamente por TULLIS (1981); e por

TEITELBAUM e GRANDA (1983).

A maior parte dos documentos de diretrizes (guidelines) advogam pelo uso da consistência no

Design de telas. Exemplo: reservar áreas específicas da tela para certas categorias de

informação, como comandos, mensagens de erro, títulos, áreas numéricas, e manter essas

áreas consistentemente através de todas as telas da aplicação. GALITZ, apud TULLIS (1997)

vai além e recomenda possíveis localizações para elementos comuns da tela: título da tela (no

centro, ao alto), identificador da tela (à direita, no alto), expressões de comando ou funções

(em rodapés), mensagens de erro ou de status (numa linha acima do rodapé), e barra de menus

(no topo da tela, imediatamente abaixo do título). Essas recomendações são compatíveis com

as de MARCUS (1992), que concorda com a diretriz de que as telas gráficas dos sistemas

informatizados devem ser desenhadas utilizando grades de layout consistentes.

Óbvio que não pode haver um layout de tela que se adeque a todas as possíveis aplicações.

Consequentemente, esta é uma área onde designeres devem fazer a transição das diretrizes,

que são necessariamente genéricas, para regras específicas de Design, ou padrões a serem

aplicados em produtos individuais ou em famílias de produtos. Por exemplo, tanto o

Macintosh, da Apple, quanto o Windows, da Microsoft, adotaram padrões detalhados de

Design para seus desktops e janelas, visando a aparência e localização das barras de títulos,

das barras de menu dos seus botões, etc.

Quanto ao seqüenciamento dos elementos de informação, GALITZ, apud TULLIS (1997)

sugere que o ponto inicial deve ser o canto superior esquerdo da tela, pois este está onde se

inicia o escaneamento visual e permitirá uma leitura compatível com as culturas ocidentais

(da esquerda para direita, de cima para baixo).

A estratégia do escaneamento foi comprovada por estudos que mostraram que a presença de

um item alvo no primeiro quadrante da tela (no alto, à esquerda) consome menos tempo para

ser encontrado do que itens posicionados no quadrante inferior direito. Entretanto, esse

218

princípio deve ser aplicado com cuidado, porque diz respeito somente às telas com caracteres,

não levando em consideração as telas com gráficos ricamente ilustrados, comuns nas

interfaces gráficas (GUI) atuais.

A maneira ótima de apresentar o seqüenciamento das informações, em uma tela de

computador, é determinada por diferentes fatores, incluindo os seguintes (TULLIS, 1997):

- a seqüência de utilização – se os elementos de informação, para tarefas do usuário,

devem ser empregados em uma dada seqüência, então devem ser apresentados seguindo

essa ordem. Um exemplo comum seria quando o usuário entra com informações que vêm

de uma fonte externa, como um formulário de entrevista com clientes.

- a utilização convencional – existem muitos casos em que a seqüência de dados foi

determinada por convenção. Um exemplo típico são nome, endereço, cidade, estado, e

código postal, embora existam outros exemplos em domínios especializados.

- a importância – em alguns casos, o desenvolvedor pode predizer que certos elementos de

informação serão mais importantes para o usuário, do que outros. Quanto mais importante

os elementos, mais destaque deve ter a sua localização no layout da tela. Relacionado a

esta idéia de importância está a suposição de que campos de entrada de informação

opcionais geralmente vêm depois dos campos de informação obrigatória.

- a freqüência de uso – nos casos em que alguns elementos da tela são utilizados de modo

mais frequente do que outros, os elementos mais requisitados devem aparecer junto ao

topo da tela. Por exemplo: em um menu de comandos, o comando mais frequente deve ser

apresentado primeiro. Por isso, nota-se que é fundamental observar o usuário durante a

realização das suas tarefas.

- a generalidade/especificidade – quando certos elementos de informação são mais

genéricos do que outros, os mais genéricos devem preceder os mais especíicos. Isso é

particularmente adequado quando existe um relacionamento hierárquico entre os itens de

informação. Elementos gerais são normalmente aqueles que estabelecem um contexto para

os elementos subseqüentes. A pesquisa com os usuários, neste caso, também desempenha

um importante papel para o processo de Design de telas.

219

- a ordem alfabética ou cronológica – se nenhuma das regras para ordenação lógica das

informações se aplicam, outra técnica deve ser adotada. Por exemplo, no caso de uma lista

de nomes uma ordem alfabética pode ser apropriada; ou então, uma lista cronológica pela

data de criação dependendo do uso previsto para as informações.

Em suma, segundo TULLIS (1997), o mais importante para se lembrar a respeito da

diagramação e seqüenciamento de elementos na tela é que o usuário deve ser capaz de

desenvolver expectativas muito claras a respeito da categoria de informações que vai aparecer

em determinada área. Essas expectativas podem emergir da adoção de um layout padrão, ou

podem ser devidas à estrutura inerente da informação que está sendo apresentada.

5.6.5 – Relações espaciais entre os elementos da tela:

Se a adoção de um padrão de layout e o apropriado seqüenciamento dos elementos pode

tornar mais fácil que o usuário encontre a informação desejada, as relações espaciais entre

esses elementos são igualmente importantes. Relações espaciais como o alinhamento; podem

tornar mais fácil a localização de um elemento em particular, em outras relações espaciais,

como a indentação, significados especiais podem ser transmitidos para o leitor.

Quase todas as diretrizes especificam que uma série de elementos informacionais relacionados

devem ser apresentados verticalmente, dentro de uma lista em vez de horizontalmente, como

texto corrido.

A maior parte das diretrizes (guidelines) sugerem que a técnica de alinhamento usada em

listas verticais deve diferir dependendo do tipo de dados listados. Especificamente, listas

verticais de textos e caracteres alfanuméricos devem ser alinhadas à esquerda, e listas

verticais de dados numéricos devem ser alinhados a direita, ou alinhados por seus pontos

decimais. O alinhamento à esquerda de textos e caracteres alfanuméricos torna mais fácil a

localização de cada item. Alinhar os dados numéricos em seus pontos decimais torna mais

fácil a comparação entre seus valores.

Além do uso de alinhamentos de textos na tela de um computador, outras formas de relações

espaciais devem ser consideradas:

220

- indentação – relações de subordinação ou de hierarquia entre dados podem ser mostrados

eficazmente através do emprego da indentação.

- relações de titulação – com poucas exceções, todos os itens de informação em uma tela

deverão ser titulados. Existem duas técnicas para a titulação: à esquerda do dado, ou

acima do dado. Diretrizes recomendam que os títulos dispostos verticalmente sejam

alinhados à esquerda, quando seus respectivos dados são alinhados a seu lado - mas essa

abordagem pode resultar em muito espaço entre os títulos e os dados associados, caso

sejam de comprimento variável. Por isso, outras soluções para o problema podem ser

adotadas, visando a otimização da programação visual.

- associações – displays gerados por computador têm se tornado cada vez mais comuns em

situações que envolvem a representação e o controle do status de algum processo que

ocorre no mundo real. Exemplos: redes de telefonia, plantas de usinas nucleares, o metrô.

Esses displays comumente empregam gráficos para representar elementos reais do

processo. As relações espaciais entre os gráficos devem permitir ao usuário visualizar as

relações de funcionamento entre os elementos do processo no mundo real.

- simetria – várias diretrizes (guidelines) propuseram que as relações espaciais entre

elementos de uma tela de computador deveriam permitir a simetria. Por exemplo,

GALITZ, apud TULLIS (1997) propôs que a simetria deveria ser alcançada através da

centralização do layout em um eixo central, mantendo uma igual distância em cada um

dos lados. Além disso, outros pesquisadores propuseram uma medida de balanço, como

técnica para determinar as propriedades do Design de telas. Essa medida fora computada

como a diferença entre o centro da massa dos elementos mostrados e o centro físico da

tela de computador. Entretanto, não existem evidências de que essa medida poderia

auxiliar na previsão das características de usabilidade do display.

O principal ponto sobre relações espaciais é que uma vez que o usuário identificou as

localizações de alguns elementos da tela, ele deve ser capaz de utilizar essas informações para

encontrar outros elementos. Esse tipo de previsibilidade visual pode ser atingida através do

alinhamento dos elementos com os outros, ou através da adoção de outras relações espaciais,

221

consistentes com as relações semânticas entre os dados.

5.6.6 – Utilização de elementos textuais:

A grande maioria das telas geradas por computador, mesmo as que possuem gráficos, incluem

algum tipo de texto. Várias diretrizes se propõem a guiar a apresentação de textos, sendo que

poucos são os estudos empíricos que abordam os diferentes aspectos da apresentação dos

textos.

As principais questões relacionadas com as apresentações dos textos nas telas são: utilização

de caixa alta ou caixa baixa, espaçamento entre palavras, espaçamento entre linhas,

espaçamento entre parágrafos, comprimento das linhas, tipos e tamanhos de fontes de letras,

fontes monoespaçadas e fontes espaçadas proporcionalmente, hifenação, além do contraste

entre figura e fundo e cores.

Idealmente, segundo TULLIS (1997), o texto no Design de telas deve ser apresentado em

forma mista de letras maiúsculas (caixa alta) e minúsculas (caixa baixa), utilizando

espaçamento proporcional entre letras e palavras; as letras devem ser fontes sem serifa (com o

tipo Arial), de oito a dez pontos, com alto contraste de cores, de preferência caracteres pretos

com fundos brancos. Linhas de texto corrido devem ter entre 26 e 78 caracteres de

comprimento na tela do computador. O espaço entre as linhas (entrelinha) deve ter altura no

mínimo igual à das letras (altura do tipo em caixa alta).

No caso específico do uso de tipografia para as interfaces da World Wide Web, veremos que

uma série de limitações é imposta pela linguagem padrão HTML ao projeto das páginas dos

sites. Por isso, mais detalhes e explicações sobre o emprego da tipologia nos sites da Internet

serão apresentados adiante, como um tópico específico deste capítulo.

5.6.7 – A utilização de gráficos:

Não há dúvida que, em algumas situações, uma imagem representa mil palavras. Mas quais

seriam essas situações? Quando gráficos podem ser usados para comunicar informações mais

adequadamente? Uma lista não exaustiva para identificar usos mais comuns de gráficos, nas

interfaces, incluiria:

222

- representação de imagens do mundo real ou imaginário;

- representação de sistemas complexos do mundo real;

- representação de dados numéricos multidimensionais; e

- representação de objetos e ações de manipulação direta (ícones).

Os gráficos estão sendo cada vez mais empregados como importante parte das interfaces dos

sistemas computacionais; uma grande variedade de técnicas existe para apresentação de

informações graficamente. Cada vez mais essas técnicas tem se tornado acessíveis sobre o

ponto de vista econômico: em certas situações, a informação só pode ser razoavelmente

apresentada com utilização de gráficos, e há muitas outras situações em que os gráficos são

mais eficazes do que os caracteres alfanuméricos. Apesar disso, pesquisas adicionais ainda

são necessárias para definir os tipos de displays gráficos mais apropriados, considerando-se as

várias categorias de tarefas e de dados.

5.7 – Desenho de metáforas para interfaces

Interfaces bem sucedidas fariam ainda uso de metáforas parcialmente genéricas e

parcialmente únicas – que definem conceitos fundamentais através de palavras e de imagens

assim como de sons e de interações. Ao administrar expectativas dos usuários, no que diz

respeito às estruturas conhecidas, processos e surpresas diante de novidades, o designer

atingiria formas instigantes, que permitem às pessoas serem mais produtivas.

As metáforas aparecem de modo proeminente nas interfaces com os usuários. Elas seriam

constituídas por telas contendo conteúdos informacionais, estéticos e persuasivos, além de

meios de interação, numa mistura de formas e de funções. Para usuários específicos -

definidos pela demografia, experiência, educação e papéis desempenhados - e suas tarefas, as

interfaces apresentariam metáforas, modelos mentais, navegação, aparência e interatividade.

Cada um desses cinco componentes poderia ser definido da seguinte forma, segundo

MARCUS (1997):

223

1 – Metáforas - seriam determinadas visualmente, através de palavras e imagens, ou através

de meios táteis ou acústicos.

2 – Modelos mentais – significariam a organização das informações, as funções, as tarefas, os

papéis e as pessoas que participam de grupos de trabalho ou de entretenimento.

3 – Navegação – seria o movimento através de modelos mentais, propiciado por janelas,

menus, caixas de diálogo, painéis de controle etc.

4 – Aparência – características perceptivas verbais, visuais, acústicas e táteis.

5– Interações – modos através dos quais os usuários dão entrada em modificações no sistema

e como o sistema provê o feedback.

Antigamente, estudantes de universidades aprendiam a utilizar metáforas, na comunicação,

através do estudo da retórica. A retórica seria, segundo MARCUS (1997), um componente da

semântica – esta, uma das três dimensões da semiótica, a ciência dos signos. O termo

“metáfora” significaria a técnica de substituir um signo por outro, de modo a tornar a

comunicação eficaz. Todos nós usaríamos metáforas na linguagem cotidiana.

Em geral, as metáforas auxiliam a comunicação das seguintes formas: (1) representam

pessoas, objetos, estruturas e processos: por exemplo, jogar um arquivo numa lata de lixo,

passou a ser sinônimo de apagá-lo do disco rígido; (2) descrevem estrutura ou processo -

numa interface gráfica, uma lista de pastas se refere a uma estrutura hierárquica; (3) explicam

causas e efeitos em um processo ou estrutura. Por exemplo, a barra de progresso mostra o

tempo de download de um arquivo; (4) expressam conceitos e valores - numa interface

gráfica com o usuário, a seta de reciclagem pode sugerir re-uso ou ecologia.

Para MARCUS (1997), existem alguns tipos de metáforas:

- Estruturais - substituem partes de um sistema por outro: uma estrutura em outline serviria

para representar uma estrutura de arquivos hierárquicos.

- Operacionais – substituem o comportamento de um sistema por outro: como clicar e

arrastar um arquivo para a lixeira do computador.

224

- Pragmáticas – possibilitam que o usuário compreenda melhor: no desktop, objetos

concretos substituem componentes abstratos dos sistemas operacionais.

Utilizadas corretamente, metáforas trariam inúmeras vantagens à eficácia da comunicação.

Utilizar conceitos familares aos usuários reverte-se em menor tempo de treinamento, porque

eles podem intuir atributos primários de estruturas ou de processamentos. Nesses casos,

conhecimentos de um dado domínio tornam-se transferíveis para outro domínio. Conceitos

familiares em um ambiente não-conhecido podem adicionar apelo às interfaces; reconhecer as

referências reduz a tensão, o estresse, a confusão, a ansiedade e a alienação, ao mesmo tempo

em que aumenta a segurança, a calma, o interesse e o engajamento.

As metáforas podem desenvolver a facilidade de aprendizado, a memorização e o uso.

Monumentos conceituais simples, claros e consistentes, na paisagem cognitiva, permitem que

os usuários possam focalizar e reter um número limitado de atributos primários de um sistema

complexo. Metáforas selecionadas, visando a uma determinada comunidade de usuários,

podem tornar a comunicação de produtos mais eficaz e, além disso, espelhar as preferências

estéticas, a auto-imagem e as associações culturais dessas comunidades. Por isso, desenhar

metáforas seria uma poderosa ferramenta de comunicação que desenvolve o interesse nos

produtos tecnológicos, ao facilitar a compreensão de conteúdos complexos e promover uma

atitude positiva.

Técnicas de comunicação verbal serviram à literatura durante milhares de anos e também

foram aplicadas à comunicação visual. Hoje, quando computadores se tornaram intensas

experiências multimídia - empregando ícones, fotografias, vídeo e som -, o Design de

metáforas se tornou um importante desafio para a inovação tecnológica.

5.8 - Desenhando menus

PAAP e COOKE (1997) analisaram a usabilidade de interfaces baseadas em menus. Para

esses pesquisadores, uma definição precisa, completa e universalmente aceita dos menus seria

necessária para a discussão teórica pesquisa aplicada ao Design. Para seus propósitos

específicos, utilizaram a seguinte definição: “um menu é definido como uma gama de opções,

mostradas na tela, onde a seleção e a execução de uma ou mais opções resulta na mudança no

estado da interface”.

225

Menus consistem, normalmente, numa lista de opções, que podem ser expressas por palavras

ou ícones. A palavra (ou ícone) não é um símbolo arbitrário: fornece informações sobre as

conseqüências da seleção da opção. Certas vezes, as opções são acompanhadas de descritores

verbais, sendo que a gama total de opções é distribuída através de diferentes painéis. Isso

permite que o sistema mostre ao usuário as opções úteis e que esconda as demais. Entretanto,

colocar opções em vários painéis de menu requer que o usuário seja capaz de navegar entre

painéis, com o objetivo de encontrar opções que não estão disponíveis no painel corrente.

A utilização de menus dever ser estudada considerando-se duas grandes classes de softwares.

Uma tem o propósito de gerar um produto; por exemplo, um documento realizado em um

editor de textos. Estas aplicações tendem a ser altamente interativas - selecionar opções do

menu gera meios de criar os produtos. Em contrapartida, outra classe tem o propósito

primordial de resgatar informações, como os hipertextos da Web.

Considerando-se a gama de opções apresentadas num painel de menu, dois importantes

fatores devem ser determinados: a descrição verbal de cada opção e o seqüenciamento ou

agrupamento das opções. O melhor Design depende do tipo de busca e de operações de

comparação que ocorrerão na medida em que o usuário considera conteúdos do painel de

menus. Essas operações podem ser de identidade, equivalência ou de inclusão numa classe. A

raiz de um sistema de menus geralmente consiste em numa gama de opções que especifica

categorias abrangentes e abstratas, sendo que os usuários devem realizar julgamentos de

inclusão em classes, para acessar diferentes objetivos situados nos níveis mais baixos da

hierarquia. Por exemplo, uma "margarida" é uma instância da categoria "flores"? Uma

pesquisa considerando as tarefas e o modelo mental do usuário pode ajudar na definição

dessas categorias e subcategorias.

A maioria dos erros ocorridos em sistemas acionados por menus acontece porque o

significado das opções não é clara para o usuário. Um método de aumentar a clareza do

sistema de menus é adicionar um elemento descritivo adicional para cada palavra ou

expressão do menu. Um estudo realizado por SNOWBERRY, PARKINSON, e SISSON

(1985), apud PAAP e COOKE (1997) mostra que o número de erros pode ser

significativamente reduzido, ao se apresentar opções do nível superior da hierarquia.

A literatura empírica existente compara organizações das opções de menus em sistemas

226

aleatórios, alfabéticos e categorias. A organização aleatória não deve ser considerada como

opção de Design, mas serviu para que os pesquisadores para estabelecessem uma linha básica

de mensuração dos benefícios dos outros dois tipos de organização. Certos menus podem

apresentar uma gama de opções em ordem convencional, que não é nem alfabética, nem de

categorias. Por exemplo, as opções podem ter ordenação com padrão temporal, como dias da

semana ou meses do ano. Outras opções podem estar associadas a dimensões de magnitude,

como ‘pequena, média ou grande’. Uma organização eficaz é listar as opções dos menus em

sua ordem de freqüência de utilização. Mais diretrizes para a organização de menus (segundo

objetivos dos usuários) estão identificadas no diagrama que se segue.

FIGURA 5.1 – Diretrizes para a organização de um painel de menu (PAAP e COOKE, 1997).

227

A figura apresentada ilustra diretrizes para se escolher entre as organizações alfabéticas, por

categorias, convencional ou por freqüência de uso. A parte superior da figura pressupõe que a

maior parte dos usuários tem um objetivo específico em mente, que provavelmente se

adequará a uma das opções. Nessas circunstâncias, usuários poderão obter as vantagens da

ordenação alfabética. Designeres raramente poderão pressupor que os usuários são capazes de

antecipar o título da opção desejada; sendo que, a próxima questão a ser respondida pelo

designer de interface é se a lista de opções é longa ou curta. Opções ordenadas

convencionalmente formarão provavelmente, uma lista curta. Note-se que ordenações

convencionais induzem expectativas de que as opções estejam dispostas de modo familiar.

Em tais circunstâncias, não se deve abandonar a ordem convencional, substituindo-a pela

alfabética.

Se a lista for longa, será provavelmente melhor adotar a ordenação alfabética de opções, a

menos que a oportunidade de utilizar as informações separadas em categorias seja óbvia. Se

as opções puderem ser arranjadas em categorias, distintas (que têm poucas sobreposições

conceituais) e bem conhecidas dos usuários finais, deve-se agrupá-las desta forma.

A parte inferior da figura apresenta diretrizes para aplicativos onde usuários têm metas pouco

definidas em mente. Se não faz sentido dividir uma lista pequena em categorias, a opção

estará limitada às ordenações convencional ou alfabética. Uma exceção será quando a lista

pequena estiver composta por expressões ou frases difíceis de serem colocadas em ordem

alfabética, ou seja, quando a palavra inicial da expressão for arbitrária ou for pouco

importante. Nesses casos, a ordenação semântica ou baseada em freqüências será melhor.

Para listas longas, agrupar os itens de menu por categorias será, provavelmente, a melhor

estratégia. Uma exceção aqui seria quando uma pequena sublista de opções é selecionada

mais freqüentemente do que as outras. Nesse caso, listar as opções em ordem decrescente de

freqüência permitirá melhor arranjo, particularmente se as categorias não puderem ser

separadas ou se os usuários não estiverem familiarizados com cada categoria (figura 5.1).

O título ou expressão utilizada para designar cada opção do menu deve ter precisão. Deve

permitir ao usuário inferir com precisão ações ou objetos controlados por sua seleção. Isso é

mais fácil de ser dito do que de ser feito. Sabemos que agregar elementos descritivos, como

uma lista de exemplos ou de opções do nível abaixo na hierarquia poderá auxiliar, embora

228

fatores que determinam a magnitude dos benefícios ainda não sejam compreendidos. Para

grandes interfaces testar os títulos de cada painel de menu junto a uma amostra dos usuários

finais pode ser dispendioso, mas seria a única técnica garantida para remover os problemas da

interface.

Existem várias tecnologias para selecionar itens de menus. Algumas, como listas pull-down

casadas com seleção pelo cursor do mouse são mais comuns que outras. Técnicas menos

convencionais como menus de áudio estarão limitadas a tecnologias muito específicas. Todas

as técnicas de seleção de menus envolvem listas de itens que podem ser apresentadas em uma

variedade de formatos visuais ou auditivos: por exemplo, pull-down, pop-up, ou pie (torta).

O menu pull-down descortina para baixo (ao clicar do mouse) a sua lista de sub-opções (como

no menu ‘Arquivo’ do Word). O menu pop-up é uma janela extra que aparece sobre a tela,

apresentando mais opções durante a interação. O menu pie (torta) apresenta um formato

circular. Todas as técnicas envolvem a identificação de um item do menu, utilizando-se um

mecanismo como o ponteiro do mouse, o ato de teclar uma letra ou entrar com um dígito

identificador.

PAAP e COOKE (1997) estudaram também tipos de layouts de menus. Freqüentemente,

menus contêm listas discretas de itens, organizados horizontalmente ou verticalmente. Em

alguns casos, entretanto, as opções não são apresentadas como lista, mas em forma de prosa -

causando dificuldades de leitura (ou de escaneamento). Um exemplo de menus baseados em

prosa pode ser "hot link" encontrado nos documentos hipertextuais. O hot link é uma porção

enfatizada da prosa, que pode ser selecionada para mais informações. Neste caso, os itens do

menu não são explícitos, mas situam-se no meio de blocos de texto. Esses menus de texto

necessitam de discriminação entre texto selecionável e não – selecionável. Além disso,

adicionam dificuldades potenciais à sua seleção.

Considerando que é melhor que os itens sejam ser apresentados em lista explícita, há várias

possibilidades de layouts a serem exploradas. Listas horizontais são freqüentemente

encontradas no topo da tela. Na maior parte dos casos, entretanto, os itens de um menu são

arranjados verticalmente e, se não forem fixos, podem ser abertos ou fechados através do

sistema pull-down e pop-up. Os menus pull-down são selecionados e apresentados na mesma

localização, cada vez que são abertos; os menus pop-up aparecem na posição corrente do

229

cursor.

Formas não convencionais de layout de menus foram propostas por NORMAN (1991), apud

PAAP e COOKE (1997), embora existam poucas pesquisas empíricas sobre o tema. Os

layouts não convencionais incluem o matricial (por exemplo: selecionar elementos de uma

tabela periódica) e o layout gráfico (por exemplo: selecionar localizações num mapa.). O

autor sugere que certas características dos itens de menus tendem a esse tipo de representação

não linear e espacial, sendo que se poderia capitalizar essas formas visuais para facilitar o

reconhecimento. Ao se tirar partido da capacidade de memória visual do ser humano, obter-

se-ia interfaces mais eficazes.

Deve ser enfatizado que a formatação de uma lista de opções de menu envolve mais do que

decidir o layout geométrico dos itens. Particularmente, a escolha dos tamanhos,

espaçamentos, agrupamentos, tamanhos de fontes, estilos e cores deve ser considerada. Esses

temas são os mesmos considerados no projeto geral de telas de interfaces. Aspectos desses

temas (cores, fontes) aparecem comentados em tópicos mais específicos, neste capítulo.

Embora sistemas lineares explícitos, como o pull-down e pop-up, sejam comuns, outros

formatos de listas de opções são possíveis e podem ser desejáveis, dependendo dos itens

específicos, da tarefa, ou da tecnologia. Menus em formato de torta são adequados para listas

pequenas, facilmente representadas em formato cíclico, e funcionam bem para tecnologias de

seleção baseadas em canetas, com o adequado espaço de tela. Técnicas de marcação podem

oferecer alternativas promissoras às tradicionais interfaces point-and-click (do tipo apontar

com o cursor do mouse e clicar), quando usadas em combinação com menus em torta e

interfaces baseadas em canetas. Se os itens tenderem às representações gráficas, as

alternativas matriciais ou layouts visuais devem ser também considerados. Na medida em que

outros mecanismos de seleção se desenvolvem, o mouse tende a ser favorecido para as

interfaces dos menus tradicionais. Entretanto, também existe suporte a outras tecnologias,

como entrada de caracteres identificadores ou telas sensíveis ao toque.

Os autores estudados desenvolveram bastante a questão da “profundidade versus

horizontalidade”, numa estrutura de menu hierárquica. A maior parte dos sistemas de menus

estão organizados dentro de uma árvore hierárquica, em que cada nó (painel) da hierarquia

pode ser acessado somente por um único nó superior, que se encontra diretamente acima. A

230

profundidade (d - do inglês depth) é aqui definida como o número de níveis de uma

hierarquia. A horizontalidade (b - do inglês breadth) é aqui definida como o número de

opções do painel do menu. Quando existe um número igual de opções, em cada painel, o

número de nós (N) na terminação pode ser representado por uma função da horizontalidade

elevada à potência da profundidade, da seguinte forma:

N=bd

Por exemplo, 64 nós terminais de um menu podem ser acessados utilizando três níveis de

hierarquia, com quatro opções em cada painel:

64 = 43

Ou, alternativamente, os 64 nós podem ser arranjados em seis níveis, com somente duas

opções por cada painel:

64 = 26

Fatores humanos que favorecem a maior horizontalidade da hierarquia dos menus. A estrutura

hierárquica com vários níveis requer que o usuário se lembre onde está ou descubra como

navegar de onde está para o local que procura. O problema de navegação fica cada vez pior

na medida em que a profundidade da hierarquia aumenta. SNOWBERRY, PARKINSON e

SISSON (1983), apud PAAP e COOKE (1997) mostraram que as taxas de erros elevam-se de

4% para 34%, quando a profundidade da hierarquia dos menus cresce de um nível para seis

níveis.

Também segundo MAYHEW (1992), uma das diretrizes para o melhor Design dos menus

seria minimizar a profundidade das hierarquias, aumentando sua horizontalidade. Geralmente,

dois fatores afetariam a decisão sobre a profundidade versus horizontalidade da hierarquia dos

menus: o tempo de decisão do usuário e o tempo de execução. Em geral, quando o tempo de

decisão do usuário é longo, menos horizontalidade é desejável. Mas, quando o tempo de

execução é grande, uma maior horizontalidade seria desejável.

231

FIGURA 5.2 - Profundidades na hierarquia dos menus, segundo MAYHEW (1992).

MILLER (1981), apud PAAP e COOKE (1997) foi o primeiro a investigar diretamente a

questão da profundidade em relação à horizontalidade, através da manipulação dos itens de

procura de uma base de 64 itens de menu. Sua experiência variou a organização da árvore

hierárquica, visando a experimentação. O autor concluiu que, dentro de certos parâmetros

preestabelecidos, dois níveis hierárquicos com oito opções por menu seria a melhor

organização.

A pesquisa e as aplicações analisadas por PAAP e COOKE (1997) sugerem que, quando a

organização categorial dos itens de menu é desejada, embora não óbvia, deve-se considerar a

geração de menus pelos próprios usuários. Essa organização seria baseada em informações

coletadas dos usuários finais. Devem ser coletados dados de uma amostra representativa dos

usuários finais, a partir de um modelo consensual, não pessoal. As categorias dos menus

devem ser derivadas dos modelos dos usuários.

Os fatores relacionados à hierarquia dos menus (horizontalidade e verticalidade) são

influenciados também por outras variáveis. Tempos de decisão são maiores quando (1) os

usuários são inexperientes, (2) os itens da escolha são complexos e (3) quando os itens da

escolha tendem a uma abordagem por categorias. Os tempos de execução são maiores quando

232

os tempos de resposta do sistema são longos, ou quando os mecanismos de seleção do sistema

demoram (por exemplo: uso do teclado versus mouse).

A tabela a seguir mostra mais aspectos relativos à horizontalidade da hierarquia dos menus,

segundo MAYHEW (1992).

Variáveis relativas ao usuário e à tarefa Horizontalidade máxima

Itens de escolha são complexos e/ou

Itens da escolha não podem ser agrupados

Até 10 itens por tela

Itens de escolha não são complexos e

Itens de escolha podem ser agrupados

porém

Usuários são casuais e pouco freqüentes

De 11 a 20 itens por tela

Itens de escolha não são complexos e

Itens de escolha podem ser agrupados e usuários são

experientes/freqüentes

21 ou mais itens por tela

TABELA 5.5 – Otimização da horizontalidade dos menus, segundo MAYHEW (1992).

A tabela apresentou o número máximo otimizado de escolhas sugerido por tela, em diferentes

condições (MAYHEW, 1992). Por exemplo: até não mais que 20 opções por tela é o número

ideal quando os usuários são casuais (não freqüentes), as escolhas são simples e os itens

podem ser arranjados em algum tipo de organização significativa. Essa tabela deve ser

utilizada como um ponto de partida para tomar decisões sobre hierarquias de menu, no

referente a sua profundidade e horizontalidade. Nesse caso, a partir da gama otimizada de

abertura recomendada pela tabela, a horizontalidade e a profundidade reais podem ser

determinadas pela categorização natural dos itens. A categorização natural deve ser

determinada empiricamente, através de análises estatísticas aplicadas às informações

coletadas de usuários representativos do público-alvo do sistema desenhado. Quando a

233

horizontalidade for variável, nos diferentes níveis, deve-se ter em mente que uma maior

abertura nos níveis profundos pode facilitar a procura para usuários inexperientes, embora

esta consideração não deva se impor à categorização natural.

Existe uma condição na qual a profundidade pode se tornar preferível à horizontalidade: é

quando alguns grupos de usuários estão utilizando somente um subsetor da funcionalidade

total. Permitir aos usuários que naveguem através de um caminho para baixo, em direção à

desejada funcionalidade, significa que eles não terão que passar por opções de nível profundo

que não utilizam nunca. Esse processo é chamado de isolamento ou delimitação (insulation) e

existem evidências de que pode ser vantajoso, sob certas circunstâncias (PAAP e ROSKE-

HOFSTRAND, 1988, apud MAYHEW, 1992).

De acordo com PAAP e COOKE (1997), as razões existentes para considerar um sistema de

menus com maior profundidade hierárquica seriam três: super-povoamento (crowding),

isolamento (insulation) e afunilamento (funneling).

Super-povoamento diz respeito às limitações impostas pelo espaço disponível na tela ou

painel. Quando o espaço disponível é excedido, alguma profundidade deve ser introduzida.

Superpovoar com opções uma tela não deve ser tolerado, se isto requer nomes ou elementos

descritivos muito curtos para serem precisos. O isolamento (insulation) se refere à

oportunidade para os sistemas de menus apresentarem as seleções que serão provavelmente

necessárias, enquanto escondem as opções que são menos usadas. A oportunidade do

isolamento pode ser maior quando cada população de usuários aprende uma pequena parte de

um sistema complexo, enquanto o restante não aparece. O afunilamento (funneling) está

relacionado ao isolamento, mas enfatiza ganhos de eficiência que podem ser alcançados

mesmo quando os usuários são responsáveis pela utilização do sistema inteiro. O

afunilamento se refere a uma redução do número total de opções processadas, que é atingido

ao se desenhar um sistema com mais profundidade e menos abertura. Quando uma maior

profundidade é escolhida, em detrimento da abertura, o afunilamento gera ganhos de

eficiência, particularmente quando o tempo de processamento por opção é longo. O tempo de

processamento inclui o tempo que o usuário leva para decodificar a opção, comparar a

representação codificada com o objetivo e decidir se vai terminar a busca ou continuar a

examinar outras opções. O tempo de processamento será mais longo quando o usuário se

engaja em uma busca semântica dificultada, que envolve elementos descritivos pouco claros.

234

Mas os benefícios do afunilamento não podem ser obtidos sem custos. Na medida que

aumenta a profundidade da hierarquia de opções, cresce o número de transações. Uma

transação é iniciada pelo usuário quando uma seleção é feita na tela. Cada painel

adicional requer mais uma resposta (pressão de uma tecla, seleção com o mouse) do ser

humano e mais uma resposta do computador (display). Cada transação adiciona tempos

de resposta para cada componente ao tempo total. Considerando-se um banco de 64 itens

de escolha, a organização com profundidade máxima teria tempo de execução e resposta

seis vezes maior, quando comparado com o caso de um painel simples.

DIRETRIZES GERAIS PARA O DESIGN DE MENUS (segundo MAYHEW, 1992)

De acordo com MAYHEW (1992), as diretrizes (guidelines) para o adequado Design de

menus, podem ser agrupadas nos cinco diferentes tipos, a seguir: (1) estrutura; (2) ordem;

(3) seleção; (4) invocação e (5) navegação.

Com relação à estrutura do menu, a autora descreve as seguintes diretrizes:

- Adequar a estrutura do menu à estrutura da tarefa

– Minimizar a profundidade da hierarquia, aumentando sua abertura (horizontalidade)

– Em menus de tela cheia, apresentar listas verticalmente

– Utilizar formato de torta para listas de poucos itens, que tendem ao formato circular. Por

exemplo: norte, leste, sul e oeste.

– Desabilitar itens do menu, dependendo da experiência do usuário

– Criar categorias semânticas com significados claros e mutuamente exclusivos

– Titular opções dos menus de modo curto e consistente no estilo gramatical, e compatível

com as correspondentes categorias.

– Considerar elementos descritivos adicionais às opções do menu, caso os títulos sejam

ambíguos.

Quanto à ordenação das opções dos menus:

- ordenar de acordo com convenção, a freqüência de uso, ordem de uso, categorias ou

ordem alfabética, dependendo do usuário e das tarefas.

235

Quanto à seleção das escolhas do menu:

- Nos sistemas de menus direcionados ao teclado, a seleção pelo cursor é aceitável para os

menus curtos, especialmente se a freqüência de uso for casual. Para menus longos, ou para

usuários freqüentes, códigos de seleção são preferíveis. Nas interfaces direcionadas ao mouse,

apresentar uma seleção direcionada ao cursor do mouse é mais recomendado.

- Prover defaults (valores iniciais ou sugeridos) para a seleção dos menus, sempre que

possível

- Distinguir menus de uma só escolha dos que apresentam várias escolhas

- Prover feedback (respostas) à seleção dos menus

Quanto à invocação dos menus:

- reservar menus pop-up, ou invocados pelo usuário, para usuários de alta freqüência. Os

menus permanentes na tela são preferíveis.

Quanto à navegação do menu:

- estabelecer convenções para o desenho dos menus e aplicá-las, consistentemente, em

todas as telas do sistema.

- considerar a utilização de títulos contextuais, mapas e marcadores como auxílio à

navegação, em menus complexos.

- considerar o uso do acesso direto e de macros para facilitar a navegação do usuário

experiente.

- facilitar sempre a retronavegação.

5.9 - Desenho de páginas da Web: conceitos gerais

De acordo com LYNCH e HORTON (1999), os usuários procurariam clareza, ordem e

credibilidade nas fontes de informação, sejam documentos em papel, sejam páginas da Web.

Um Design eficiente pode prover essa credibilidade: a organização espacial de gráficos e de

236

textos da Web pode motivar leitores com seu impacto gráfico, captar atenção, priorizar

informações e tornar as interações com o site agradáveis e eficazes.

O Design gráfico cria a lógica visual e persegue o balanceamento entre a informação e a

sensação visual. Sem o impacto da forma, da cor, e do contraste, as páginas se tornam

monótonas e não motivam o usuário. Documentos de textos muito densos, e sem contraste ou

relevo visual, são difíceis de ler - particularmente nas telas de baixa resolução de

computadores. Entretanto, sem o aprofundamento e a complexidade do texto, páginas

excessivamente gráficas arriscam- se a desapontar o usuário, oferecendo pobre equilíbrio

entre sensação visual, informação textual e interatividade hipermídia. Ao se perseguir o

equilíbrio, restrições primárias ao Design são criadas pela linguagem HTML, e pelas

limitações da largura de banda do acesso via modem do usuário.

A continuidade funcional e visual da organização do Web site, o Design gráfico e a tipografia

seriam aspectos essenciais para convencer a audiência de que o site oferece informações

precisas e relevantes. A abordagem sistemática e cuidadosa quanto ao Design de telas pode

simplificar a navegação, reduzir erros cometidos pelos usuários, e tornar mais fácil aos

leitores utilizar informações e serviços oferecidos.

A primeira tarefa do desenho gráfico seria, segundo LYNCH e HORTON (1999), criar uma

consistente hierarquia visual, onde elementos importantes são enfatizados, e o conteúdo é

organizado de modo lógico e previsível. O Design é uma forma de gerenciamento da

informação, utilizando as ferramentas do layout, da tipografia e da ilustração, para direcionar

os olhos do leitor através da página. Os leitores, primeiro, enxergam as páginas como grandes

massas de forma e de cor; como figuras em contraste com o fundo. Secundariamente,

começam a delinear informações específicas, primeiro dos gráficos, e depois começam a

escanear o texto para então ler palavras individuais e frases, num próximo estágio.

O contraste seria essencial. O equilíbrio gráfico e a organização da página seriam cruciais

para levar o leitor até o conteúdo, dizem os autores. Uma página monótona com texto puro

repele os olhos, como uma massa cinza sem diferenciações - sem pistas para a estrutura da

informação. Deve-se conseguir o equilíbrio entre atrair os olhos através do contraste visual e

prover o senso da organização. O Design eficaz para audiências da Internet utiliza o equilíbrio

cuidadoso de textos e links, com gráficos pequenos. Ao criar um projeto para Web, deve-se

237

considerar o propósito geral, a natureza do conteúdo, e, o mais importante, as expectativas dos

usuários do site.

A consistência também seria fundamental. Seria preciso estabelecer uma grade de layout e

estilos para gerenciar textos e gráficos e então aplicá-los consistentemente em de todas as

páginas do site, para construir ritmo e unidade. A repetição do diagrama não é entendiante:

empresta ao site identidade gráfica, que cria e enfatiza a sensação de “lugar” distinto e

memorável. Abordagem consistente do layout e da navegação permite aos leitores se adaptar

rapidamente ao Design e predizer, com confiança, a localização das informações e dos

controles de navegação.

Embora nenhum diagrama ou sistema de diagramação seja apropriado para todas as páginas

da Web, o primeiro passo seria estabelecer um layout básico. Com essa “coluna vertebral”

pode-se determinar como os principais blocos de textos e de ilustrações aparecerão em todas

as páginas e como será a colocação de títulos, subtítulos, links de navegação e botões. O

objetivo é estabelecer um layout lógico para as telas, de modo que se possa adicionar textos e

gráficos, sem ter que parar para repensar a abordagem básica página por página. Sem a

diagramação básica, o projeto será direcionado à problemas casuísticos e o desenho global do

Web site se parecerá com uma colcha de retalhos - gerando confusão ao usuário.

Quanto ao estabelecimento das dimensões da página, observe-se que, embora páginas da Web

e documentos impressos conjuguem similariedades editoriais, as telas de computador se

tornam o principal meio de distribuição da informação baseada em Internet. Há que se

considerar que a tela é muito diferente da página impressa.

A área segura para gráficos e páginas da Web segundo LYNCH e HORTON (1999), pode ser

determinada por dois fatores: a resolução mínima da tela comum (640 x 480 pixels) e a

largura do papel utilizado para se imprimir páginas da Web. A maior parte dos monitores de

computador utilizados hoje, na academia e nos negócios, são de 14 ou de 15 polegadas -

geralmente pré-configurados para o display de 640 x 480 pixels. Páginas com gráficos que

excedam a largura desses monitores parecerão amadorísticos e causarão inconveniências a

muitos leitores, forçando-os a utilizar elevadores da janela do browser (horizontal e vertical)

para ver toda a imagem. Se fazer o “scrolling” em uma direção já ruim; fazê-lo nas duas seria

intolerável.

238

Até nos monitores menores é possível apresentar gráficos que são muito grandes para ser

impressos, de modo apropriado, nas larguras dos papéis comuns, como A4, Legal e Carta. A

área de segurança do gráfico, levando em consideração os layouts para página da Web e para

páginas impressas, utilizados na largura máxima de um monitor com tela de 640 x 480 pixels,

foi mostrada na figura a seguir. As dimensões dessas áreas de segurança foram determinadas

levando-se em consideração os navegadores Netscape e Internet Explorer, nos ambientes

Windows e Macintosh. Note-se que, se fizermos a escolha de maximizar a largura da página

da Web, pode-se perder quase 2 cm do canto direito da página, na hora da impressão

(LYNCH e HORTON, 1999).

Por outro lado, determinar o comprimento de uma página requer equilíbrio entre quatro

fatores: (1) a relação entre a página da Web e o tamanho da tela, (2) o conteúdo do

documento, (3) determinar se o leitor vai navegar no conteúdo online, vai fazer o download

para futura leitura, ou se vai imprimir o documento, (4) a largura de banda disponível para a

audiência.

“Pesquisadores notaram a desorientação que resulta da movimentação vertical de telas de um

computador. O leitor perde contextualização, o que é particularmente problemático quando

elementos navegacionais básicos como títulos, identificadores e links desaparecem da tela.

Esse efeito pede a criação de home pages e de menus que contenham uma quantidade de

informação que possa ser apresentada em uma ou duas telas de 640 x 480 pixels, e que links

de navegação locais estejam posicionados no início e no fim do layout.” (LYNCH e

HORTON, 1999)

“Em certas interfaces gráficas - como o Macintosh e o Windows - o elevador se torna fixo e

não provê indicações sobre o comprimento do documento em relação às informações visíveis,

na tela do computador, de tal modo que o leitor não infere o tamanho da página. Em páginas

Web muito longas, pequenos movimentos do elevador podem alterar totalmente a visão dos

conteúdos da tela, sem deixar ao leitor marcos de familiaridade para orientá-lo.”

Para os autores, páginas Web longas têm, entretanto, algumas vantagens. São, normalmente

mais fáceis para que seus gerentes possam organizá-las e para que usuários possam executar o

download. Gerentes de sites não terão que manter tantos links, e usuários não terão que fazer

download de múltiplos arquivos, para coletar informações sobre um único tema. As páginas

239

longas são particularmente úteis ao prover informações que usuários não vão ler na tela (de

modo realista, qualquer documento maior do que duas páginas impressas). Entretanto, se a

página Web for longa demais, ou se contiver muitos gráficos, poderá prejudicar usuários com

conexões lentas. Além disso, páginas grandes com gráficos pesados podem sobrecarregar a

memória RAM (Random Access Memory) de computadores, causando o congelamento do

browser ou a apresentação e impressão inadequada das informações nele contidas.

“Faz sentido, entretanto, colocar informações relacionadas nos limites de uma única página da

Web, particularmente quando se espera que o usuário a imprima ou a salve no seu disco

rígido. No entanto, deve-se considerar que mais do que quatro telas de informação em uma só

página Web força o usuário a utilizar excessivamente o elevador, de modo a deteriorar a

versão online. Além disso, páginas longas freqüentemente falham ao tirar vantagem de

recursos de interatividade, disponíveis no meio Web” (LYNCH e HORTON, 1999).

De uma maneira geral, deve-se favorecer as páginas Web curtas para:

1 - home pages e páginas com elementos navegacionais e menus;

2 - documentos para serem navegados e lidos na tela;

3 - páginas com gráficos grandes.

Quanto aos diagramas para páginas Web, os autores observam que um dos objetivos de

utilizá-los é imprimir organização às páginas. Entretanto, as ferramentas atuais do HyperText

Markup Language (HTML) não permitiriam as facilidades de controle que os desenhistas

gráficos rotineiramente esperam de softwares de layout de páginas ou de sistemas de autoria

multimídia.

Diferenças entre o Design impresso e o Web Design

A diferença crucial entre o desenho para a Web e o desenho de páginas para impressão é que,

240

quando os leitores passam a página de um livro ou de uma revista, eles vêm não somente a

totalidade da página seguinte, como as próximas duas páginas. No desenho impresso,

portanto, a “dupla de páginas” torna-se a unidade fundamental de Design. Por isso, o desenho

impresso pode atingir uma unidade e uma densidade de informação que o desenho na Web

não conseguirá emular: não importa a largura ou a resolução do monitor, o usuário só pode

ver mesmo uma página de cada vez.

Por isso, o Web Design deve ser criado visando a cada tela de informação. A maior parte das

páginas da Web podem ser divididas, verticalmente, em zonas com diferentes funções e níveis

de complexidade. “Quando a página é progressivamente revelada pelo elevador vertical, um

novo conteúdo aparece e o conteúdo superior desaparece. Um novo contexto gráfico seria

estabelecido cada vez que o leitor move a página para cima, utilizando o elevador. O layout

da página Web deve ser julgado não somente pela visão da página como um todo, mas

dividindo-a em zonas funcionais, para cada tela de informação”, explicam LYNCH e

HORTON (1999).

Muitos autores capitulam diante dos apelos de uma home page com ênfase gráfica,

esquecendo-se que uma página da Web não significa somente uma experiência visual. Uma

imagem pesada pode instigar surfistas casuais, mas fará com que o leitor desperdiçe um

minuto inteiro para o download do topo do site. Um Design cuidadoso dará ao Web site uma

assinatura gráfica e o layout da página permitirá ao leitor perceber, imediatamente, o

propósito do documento e a sua relação com as outras páginas do site. Os gráficos utilizados

em cabeçalhos podem sinalizar os relacionamentos dentro de uma série de páginas da Web.

Ao contrário dos designeres de impressos, os criadores de sistemas Web nunca poderão ter

certeza de que outras páginas o leitor poderá ter visto, antes de se conectar à página corrente.

Mesmo que a escolha seja não utilizar imagens, a área de cabeçalho deve conter o título junto

ao seu topo. Cada página deve conter também informações básicas sobre a origem e a data de

criação, embora esses dados repetitivos e prosaicos não precisem ser colocados no topo.

Rodapés de páginas bem desenhados oferecem ao usuário uma gama de links para outras

páginas, em adição às informações essenciais sobre o site – defendem os dois autores.

Para LYNCH e HORTON (1999), desenvolver o layout de páginas da Web envolve um pouco

de “prestidigitação”. A linguagem HTML foi criada por engenheiros e por cientistas, que

nunca a imaginaram como ferramenta de layout de páginas. Seu objetivo era fornecer uma

241

maneira de descrever informação sobre um documento, e não determinar a aparência deste

documento. Uma vez que o mundo real começou a trabalhar com a Web, os designeres

iniciaram a adaptação das primitivas ferramentas HTML para produzir documentos mais

parecidos com seus equivalentes impressos, seguindo convenções que se desenvolveram

através de centenas de anos, por razões práticas e concretas, e que oferecem vantagens

funcionais sobre o layout demasiadamente simples, visualizado pelos primeiros designeres e

criadores da World Wide Web. Somente colocar um texto em uma página fará com que o

comprimento da linha de texto seja determinada pelas dimensões da janela do browser do

usuário. Quando o usuário redimensiona sua tela, o texto reflui, de modo a preencher o novo

espaço. Muito embora alguns possam considerar que este fato é uma ferramenta, isso

deteriora a experiência do usuário. Convenções tipográficas já estabelecidas direcionam

questões relativas à legibilidade, leiturabilidade e ao estilo, que devem ser gerenciadas pela

habilidade do designer de posicionar palavras, imagens e demais elementos na tela, de modo

a aderir aos padrões editoriais estabelecidos.

Segundo outro pesquisador, NIELSEN (2000), as páginas Web deveriam destacar o conteúdo

de interesse do usuário: infelizmente, muitos sites gastam mais espaço de tela com elementos

de navegação do que com informações. A navegação seria um mal necessário e não o objetivo

em si - por isso, deveria ser minimizada.

O conteúdo deveria corresponder a pelo menos metade das páginas e, de preferência, em

torno de 80%. A parte de navegação deve ficar abaixo de 20%. Na perspectiva da usabilidade

de interfaces, seria melhor eliminar a propaganda; mas, caso seja necessária, deve-se

considerá-la parte do overhead (carga) da página, junto com as opções de navegação - o que

implica na redução do peso dos menus de navegação.

O princípio geral dos projetos de interfaces seria passar por cada elemento e removê-los, um a

um. Se o projeto funcionar sem um dado elemento, deve-se retirá-lo. A simplicidade vence a

complexidade. Principalmente na Web - onde cada 3 bytes economizados significam 1

milissegundo a menos no tempo de resposta.

Na Web, seria impossível prever o tamanho do monitor do usuário, assim como a janela usada

para exibir a página. No futuro, a negociação de conteúdo detalhada entre browsers

(navegadores) e servidores resultará na disposição inteligente de páginas de acordo com as

242

características do monitor específico. Por enquanto, as previsões de um conteúdo adaptável

são esperança para o futuro e seria ainda necessário trabalhar com dispositivos de exibição

diferentes.

Desenhar para uma variedade de plataformas

Segundo NIELSEN (2000), o desenho deveria funcionar em várias plataformas. Num projeto

tradicional de interface gráfica, cada pixel da tela seria controlado: ao criar uma caixa de

diálogo, podemos estar certos de que ela aparecerá idêntica para os usuários. Conhece-se o

sistema, sabe-se quais as fontes instaladas, sabe-se qual o tamanho de tela típico e tem-se o

guia de estilo do fornecedor com regras de dispositivos de interação. Na Web, o usuário

controlaria a navegação: poderiam enveredar-se por caminhos não pretendidos pelos

designeres – podem ir direto ao centro de um site a partir de um mecanismo de busca, sem

passar pela home page. Os usuários também podem controlar seu próprio menu de

bookmarks, usando-o para criar uma interface personalizada.

Web designeres deveriam adaptar-se, aceitando a navegação controlada pelo usuário. Seria

possível forçar usuários por caminhos definidos e evitar que estabeleçam links com

determinadas páginas, mas os sites que o fazem parecem rígidos e dominadores. Seria melhor

desenhar visando a liberdade de movimentos.

Com as interfaces gráficas, tivemos o luxo de viver uma fase inicial de pesquisa e

desenvolvimento, em empresas de ponta com especialistas de interfaces. Porém, a Web estaria

evoluindo neste momento e os experimentos acontecem na Internet (e não em um laboratório

de usabilidade equipado com videoteipes) – portanto, todos nós somos cobaias, afirma

NIELSEN (2000).

Seria melhor não predeterminar fontes e aceitar a fonte padrão, pois sempre funcionará. Uma

alternativa para quando se quiser criar numa determinada fonte é listar várias alternativas para

maximizar a probabilidade de que uma delas esteja disponível na máquina do usuário.

243

Também seria um engano criar páginas excessivamente compactas: o espaço em branco

orienta e ajuda usuários a entender o agrupamento de informações. O espaço em branco seria

inevitável, na maioria dos casos, já que é impossível fazer com que as páginas sejam exibidas

num retângulo perfeito da tela, em todas as circunstâncias. Na Web, a maioria das

pressuposições para projeto de interfaces gráficas caem por terra: os usuários podem acessar a

Web através de computadores tradicionais, mas também podem usar um palmtop, um telefone

celular Nokia ou o carro como um dispositivo Internet. Precisamos conciliar atualmente um

fator de 100 na área de tela entre palmtops e estações de trabalho e um fator de 1.000 em

largura de banda, entre modems e conexões velozes.

Segundo o pesquisador, a maioria das páginas Web funcionaria bem em um monitor de 17

polegadas, com uma resolução de 1.024x768 pixels (tamanho médio). Qualquer monitor

inferior deixaria muitos layouts cortados e os usuários precisam rolar a tela para ver partes da

página (ver a tabela a seguir).

Tamanhos da tela 1997 1999

Muito pequena (640 x 480 ou

menor)

22% 13%

Pequena (800 x 600) 47% 55%

Média (1.024 x 768) 25% 25%

Grande (1.280 x 1.024) 6% 2%

TABELA 5.6 – A tabela mostra a distribuição de tamanhos de tela usados para acessar a

Internet em 1997 e 1999. A conclusão é que dois anos não fizeram praticamente diferença

alguma na dominância de telas pequenas (NIELSEN, 2000).

244

Não há como saber o tamanho da tela dos usuários, por isso, deve-se criar para todas as

resoluções. Em outras palavras: páginas independentes de resolução que se adaptam a

qualquer tela. O princípio do Design independente de resolução seria nunca usar larguras de

pixels fixas para tabelas, quadros ou gráficos; em vez disso, especificar-se-ia layouts enquanto

percentuais do espaço disponível na tela.

A questão mais freqüente no desenho de páginas para a Web é a largura final para a qual

deve-se criar - se o objetivo é 640 pixels ou 800 pixels. Para NIELSEN (2000), não se deveria

criar para uma largura padrão; seria melhor criar layouts que funcionassem em uma série de

tamanhos de janela: os usuários têm tamanhos de monitores diferentes, com uma série de

resoluções e nem sempre usam janelas maximizadas de forma a deixar toda a tela disponível.

Usuários com telas menores não devem ter que rolar o elevador horizontalmente; a rolagem

vertical também seria desaconselhável.

Atualmente, é raro ver páginas Web muito estreitas (por exemplo, com 300 pixels de largura),

embora alguns sites usem o Design “líquido”, ou seja, sem larguras específicas. Seria melhor

criar esse tipo de página independente de resolução, que pode adaptar-se às telas. Se não for

possível, o conselho seria supor que os usuários ainda vão usar 640 pixels nos próximos

muitos anos.

As páginas Web que não são independentes de resolução não funcionam bem quando

impressas: seria melhor oferecer versões impressas separadas para documentos longos.

Páginas criadas para exibir larguras fixas ficaram horríveis quando impressas; saem como

uma lista lateral estreita, desperdiçam papel, ou são cortadas, sendo largas demais para a

impressora. O layout típico de 600 pixels de largura, que funciona na maioria dos monitores

de computador, terá 21 cm de largura, quando impresso, na resolução de 72 pixels por

polegada. Já que as impressoras precisam de 0,6 a 1,2 cm de margem, a área imprimível em

uma folha de papel carta tem entre 19 e 20 cm de largura. Ou seja, pelo menos 0,8 cm da

página Web serão cortados. Os usuários que imprimem em papel A4 perderão ainda mais.

Outro fator técnico observado na Web diz respeito às cores. Em 1997, pouco menos da

metade dos usuários restringiam-se a 256 cores e pouco mais da metade eram capazes de

exibir milhões de cores. Dois anos depois, em 1999, apenas 11% dos usuários restringiam-se a

uma paleta de 256 cores, ao passo que 89% podiam visualizar milhares de cores ou mais.

245

Portanto, talvez estejam contados os dias em que teremos que criar para um número limitado

de cores. Ao mesmo tempo, com o crescimento de dispositivos portáteis, se tornará necessária

a apresentação de gráficos em tons de cinza, explica NIELSEN (2000).

A ESTRATÉGIA DO “DESIGN LÍQUIDO”

Para FINCK (1999), haveria três tipos de enfoques de desenvolvimento para Web, com

relação ao que é apresentado no monitor do usuário: o “líquido”, o “gelo” e o “gelatinoso”. Os

tipos de sites “gelo” seriam os de dimensões fixas, congelados do lado esquerdo do monitor e

que funcionam melhor em uma determinada resolução. Não existiriam muitos sites

“gelatinosos”. Estes e os sites “gelo” seriam praticamente idênticos, talvez os primeiros um

pouco mais flexíveis: se a resolução for alterada, os sites “gelatinosos” ficarão centralizados

na tela, com a adição de tags de centralização no código HTML.

O Design “líquido” seria o símbolo do Design ideal: a página é reinterpretada de acordo com

as dimensões da tela do usuário, sejam quais forem. Este tipo de projeto envolve longa etapa

de planejamento, durante o processo. Neste caso, o projetista deverá considerar não somente

questões como layout, aplicação de textos, títulos e inconsistências nas diferentes versões de

navegadores, como também a visualização em qualquer largura ou altura de monitores de

usuários. Segundo FINCK (1999), dois aspectos deverão ser levados em consideração,

durante o projeto de Design “líquido”: será um projeto difícil, mas a dificuldade será

recompensada com o tempo. Além disso, nenhum Design pode ser perfeito caso se proponha

a ser “líquido”. “Quando se deseja a perfeição em Design, a World Wide Web não é o local

mais indicado.”

O melhor método para testar o sucesso do Design “líquido” seria vizualizá-lo em diferentes

browsers, em diferentes sistemas operacionais e em diferentes resoluções. Somente se saberá

se um projeto funciona, quando expande-se ou contrai-se a página para qualquer tela,

qualquer browser, em qualquer plataforma. O projeto que consegue atingir o nível ótimo de

flexibilidade pode ser considerado um caso bem sucedido de Design “líquido”.

246

Embora reconheçam-se vantagens no Design “líquido”, há os que percebem nele pontos

negativos. KALBACH (2001), por exemplo, observa as seguintes desvantagens: em

resoluções mais altas, as linhas de textos se tornam muito alongadas, o que dificultaria a

leitura. Além disso, esse estilo de site teria uma aparência de “ser barato, feito em HTML

puro” - o que não se coadunaria com o padrão imposto pelos atuais stakeholders do mercado.

FIGURA 5.3 – O site do Senac São Paulo seria do tipo “gelo”, na concepção de FINCK

(1999).

247

FIGURA 5.4 – As larguras do portal Senac Nacional foram definidas como porcentagens da

largura visível da tela, em HTML, o que o torna adaptável a diversas resoluções (aqui 640 x

480 pixels).

248

FIGURA 5.5 – O portal Senac aproxima-se do conceito de Design “líquido”,

embora a sua melhor visualização seja determinada como 800 x 600 pixels.

FINCK (1999) dá os seguintes exemplos de sites “gelo”: CNN.com e Adobe.com. Para o

designer, os seguintes sites seriam do tipo “gelatinoso”: The Web Standards Project, Digital

Thread e HeadSpace. Os exemplos a seguir representam os poucos e bons sites de sucesso no

conceito de Design “líquido”: Builder.com, FalkonDesign e ProjectCool.

249

FIGURA 5.6 – Segundo FINCK (1999), o Design “líquido” permite uma visualização

adaptada para qualquer resolução, como o Builder.Com (aqui, em 640 e em 1024 pixels).

Observa-se ainda que usuários têm preferências com respeito ao tamanho de fontes, que

podem ser alteradas pelo navegador; portanto, o projeto deverá funcionar bem com fontes

maiores e menores, e não com preferências pessoais do designer. Em geral, recomenda-se não

250

incluir textos em formatos de imagem, pois isso retardaria a transmissão e exigiria esforço

extra para traduzir interfaces para outros idiomas (NIELSEN, 2000).

Além disso, há que se levar em conta, também, a inércia de instalação: nos primeiros anos da

Web, usuários faziam atualizações de navegadores a uma taxa 2% por semana. Transições

entre versões acontecerão lentamente no futuro; a pressão para atualizar está ficando fraca.

Nos primeiros anos, havia vantagens em se fazer atualizações, mas hoje não parecem ter o

mesmo nível de inovações. Atualmente, a população de usuários mudou de um grupo pioneiro

de entusiastas para uma massa de consumidores. A taxa de atualização caiu para cerca de 1%

por semana em 1998 e em 1999. Por isso, o único formato que se poderia usar com total

confiança é a especificação original HTML 1.0.

Recomendar-se-ia a contanção em relação a novas tecnologias, até um ou dois anos após ter

sido introduzida em uma versão não-beta (versão de testes). Coisas que devem ser evitadas no

primeiro ano: novas versões de HTML, plug-ins (aditivos ao navegador HTML para permitir

a visualização de conteúdos gravados em formatos proprietários) e outros componentes,

novos formatos de dados e qualquer recurso específico a certos navegadores.

Haveria três razões para ser conservador nas inovações:

- Com uma velocidade de atualização de cerca de 1% por semana, demorará um ano até que

a maioria seja capaz de acessar a nova tecnologia – e dois anos antes que todos a possuam.

- Mesmo depois que uma nova tecnologia abandona o status beta e passa a oficial, terá bugs

(defeitos) que precisarão ser resolvidos, em versões subseqüentes.

- Há muito ensaio e erro na determinação das novas tecnologias para comunicação com os

usuários. Os primeiros a usarem novos recursos trazem mais prejuízos do que benefícios aos

usuários.

As principais exceções à regra de conter-se durante um ano são os consultores da Web que

desejam demonstrar sua mestria na tecnologia avançada. Entretanto, muitas pessoas têm seu

navegador instalado por um amigo ou colega “superusuário”. Há na maioria das empresas e

famílias indivíduos que apreciam a tecnologia pela tecnologia. Quando um superusuário

251

instala um browser para o usuário normal, este não terá conhecimento de como atualizá-lo. O

resultado desses dois fenômenos seria uma grande inércia, na qual as pessoas continuam

usando a versão do navegador já instalada.

Colecionando browsers

Segundo NIELSEN (2000), o designer profissional deve ser um colecionador de browsers.

Em primeiro lugar, deve, durante dois anos, verificar as páginas no browser antigo para

certificar-se de que funcionam. Em segundo lugar, invariavelmente receberá relatórios de

bugs de usuários que se queixam de seu site. E precisará de uma coleção de browsers à mão

para repetir o problema. Esses bugs devem ser corrigidos, pois certamente haverá outros

usuários com o mesmo problema.

Prever o hardware, o software e as preferências do usuário era fácil nos primeiros anos da

Web:

- Em 1991 e 1992, a maioria dos usuários tinha acesso em modo texto.

- Em 1993 e 1994, a maioria dos usuários tinha o Mosaic.

- Em 1995 e 1996, a maioria dos usuários passou a usar o Netscape.

Mas, a partir de 1997, a noção de um browser canônico usado por todos foi abandonada, com

exceção das intranets que padronizaram um único fornecedor. Para NIELSEN (2000), o

Internet Explorer nunca mais terá a mesma dominância de mercado. Seria pouco provável que

um único browser ofereça a interface ótima, sob condições amplamente variáveis – de um

pequeno telefone com tela a uma revista virtual em tela plana. Os computadores não

tradicionais, como a WebTV e os assistentes pessoais, como o Palm Pilot, serão

predominantes. Esses dispositivos têm capacidades de exibição muito diferentes do PC

tradicional. Além disso, navegadores baseados na voz logo serão realidade: a maior

acessibilidade a usuários com deficiências é uma das razões da navegação baseada em voz; os

252

usuários que enxergam bem também se encontram em situações, como ao dirigir um carro,

nas quais poderiam acessar informações em voz alta.

Em vez de especificações de aparência no conteúdo, o melhor seria separá-lo das instruções

para a exibição. As informações relativas à apresentação de informações devem ficar em uma

folha de estilo, vinculada a um arquivo de conteúdo que contenha apenas marcações

semânticas. As folhas de estilo são um avanço da Web, mas ainda não foram empregadas com

todo seu potencial.

5.10 - Limitações ao emprego da tipografia na Web

Design significa controle visual e a tipografia é um recurso poderoso, mas o atual estágio da

linguagem HTML gera muitas limitações ao seu emprego na Web. A alternativa seria usar

imagens (bitmaps) para representar a tipografia na Web, mas muitos sites estão cheios de

textos e usar a tipologia baseada em HTML se torna a única opção para apresentar grandes

quantidades de informação de uma maneira rápida e eficiente, explica WEINMAN (1998). A

maioria dos navegadores padronizam a fonte Times Roman como o padrão de visualização e

há uma grande probabilidade da pessoa que está vendo uma página estar usando as fontes

padrão. A vantagem de utilizar fontes baseadas em imagens gráficas (bitmaps) é que os

usuários não precisarão possuir as fontes instaladas em seu sistema. Por ser um gráfico,

aparece como qualquer outro, com sombreamentos, brilhos ou texturas que o designer

especificar. A desvantagem do método é o tempo de download, que tende a ser muito mais

elevado. O ideal seria mesclar as duas técnicas (fontes e gráficos).

Segundo LYNCH e HORTON (1999), seria muito importante considerar a largura das linhas

na Internet. Uma das falhas das interfaces da Web seria a falta de aderência aos padrões

convencionados de leitura. Segundo os dois autores, a leitura na tela se torna desconfortável

quando existem mais do que doze palavras por linha. Se houver uma longa distância entre o

final de uma linha e o início da outra, os olhos terão que fazer um movimento

significativamente grande para retornar à margem esquerda. Dessa forma, o leitor ficará

perdido e deverá se esforçar para encontrar o início da próxima linha. Estudos quantitativos

253

mostraram que linhas de comprimento moderado aumentam significantemente a legibilidade

dos textos. Dessa forma, o uso de tabelas em HTML serviria para limitar o comprimento das

linhas a um valor ideal de dez a doze palavras por linha, facilitando a leitura dos sites –

acreditam LYNCH e HORTON (1999).

Uma das formas adequadas para o designer trabalhar as limitações do uso da tipologia na Web

é através do emprego de folhas de estilo (CSS), sugere NIELSEN (2000). Entretanto, adverte

que não se deve abusar dos truques, porque as páginas devem continuar eficazes para leitura

quando o usuário desativa a opção de estilos em seu navegador. Além disso, não se deve

empregar mais do que duas fontes: geralmente é possível usar um tipo para os textos e outro

em negrito para os títulos. Uma terceira fonte seria aceitável para representar códigos de

computador. É recomendável também usar uma longa lista de fontes alternativas para

especificar uma classe de texto na folha de estilo. O browser escolherá a primeira fonte

disponível na máquina e a apresentará em todas as páginas. Assim, o Web site poderá se

tornar tipograficamente unificado.

Por outro lado, deve-se evitar especificar a tipologia em tamanhos absolutos. Os tamanhos de

tipos devem ser definidos como porcentagens relativas ao texto principal (por exemplo:

150%, 200% etc.). A preferência por fontes grandes ou pequenas depende de uma série de

fatores (a resolução do monitor, a visão da pessoa, se está lendo a tela sozinho, entre outros) e

a determinação dos seus tamanhos deve ficar sob o controle do usuário (NIELSEN, 2000).

5.11 - O Design da primeira página (home page)

A home page têm se tornado a página mais valiosa dos sites. É nesse pequeno espaço de tela

que são investidos milhões de dólares, com um impacto determinante sobre a imagem das

organizações. Este impacto vai muito além do lucro comercial imediato. Cada vez mais,

clientes em potencial irão examinar esse pequeno pedaço de tela de computador, antes de

desejar fazer qualquer negócio com empresas ou instituições. A home page é, portanto, a

página mais importante de qualquer Web site.

254

O papel da home page é comunicar o que é a organização e qual o valor adicional que o site

oferece sobre a concorrência e sobre o mundo físico, além de apresentar quais são os produtos

e os serviços oferecidos. Muitas são as metáforas a que se costuma recorrer para definir a

home page, mas nenhuma delas é capaz de defini-la completamente. Ressalta-se que a

consideração isolada de qualquer uma dessas metáforas pode levar a distorções de projeto.

São elas: capa de revista, lobby de edifício, recepcionista de empresa, rosto para o mundo,

sumário de livro, arte, folheto (brochura), primeira página de jornal etc.

Todas essas metáforas têm alguma coisa de correto, embora todas apresentem diferenças

quanto à verdadeira natureza de uma home page. É perigoso se inspirar em apenas uma

metáfora. A dificuldade de criar o Design de uma home page está no fato de que ela apresenta

aspectos de todas as metáforas acima, mas, geralmente, o projetista acaba se direcionando a

apenas uma delas - o que não é adequado, explica-nos NIELSEN e TAHIR (2001).

É na home page que os usuários deveriam poder encontrar respostas em “zero clique” para

suas perguntas. Nela, não deveriam ser incluídos elementos que não ajudam em nada os

usuários a completar suas tarefas ou a chegar a seus objetivos.

O desafio seria, portanto, desenhar home pages que possibilitassem acesso a todos os serviços

importantes do site, sem ter que transformá-los, necessariamente, em botões que entulham a

primeira página. Para isso, é preciso manter o foco e a clareza, além da compreensão exata

dos objetivos e das tarefas do usuário.

Uma das mais importantes decisões do Design da home page é determinar quais os conteúdos

que merecem a cobertura da página principal. Isto depende de quem são os usuários de cada

site e de quais são suas tarefas específicas, assim como dos objetivos estratégicos das

organizações.

"Infelizmente, em muitos casos, questões políticas internas de cada organização influenciam

no Design das home pages, mais do que os objetivos dos usuários. Não é raro que

departamentos lutem politicamente entre si para colocar seus conteúdos na home page, numa

batalha em que os melhores lobistas vencem. Mas o ideal seria dar voz às necessidades dos

usuários - como fator chave nas decisões -, além de envolvê-los durante o processo do

Design", defende NIELSEN e TAHIR (2001), em seu recente livro sobre home pages.

255

Nota-se que a home page seria uma espécie de “nau capitânia”. Deveria ter um desenho

próprio, diferente das outras páginas, embora mantendo o estilo. A home page deve apresentar

o logotipo e o nome da empresa em proeminência. A meta de toda home page seria responder

às perguntas “onde estou?” e “o que faz esse site?”, evitando terríveis declarações de missões,

vistas em sites de empresas burocráticas. Em vez disso, deve-se deixar óbvio o objetivo para

os usuários que a visitam pela primeira vez (NIELSEN, 2000).

Se, para um visitante de primeira viagem, mostrar o que o site faz é essencial, para a maioria

dos usuários, a home page deve servir como entrada para o esquema de navegação: isso

assume a forma de uma lista de níveis superiores de um diretório hierárquico.

A home page também seria o local ideal para veicularem-se notícias ou promoções, para atrair

a atenção dos visitantes. Mas a maioria das pessoas vem ao site para fazer algo específico -

elas raramente se interessam por verificar o que está acontecendo na empresa ou que produtos

ela deseja vender. Portanto, a área de notícias deve ficar restrita e grande parte da página estar

disponível à navegação. Mesmo em sites noticiosos, seria importante lembrar que usuários o

visitarão para pesquisar artigos específicos ou materiais antigos, que estão no seu interior.

Por isso, as home pages precisam de um recurso de busca destacado, já que muitos usuários

não querem navegar até o destino final, link a link. Para sites em que a busca é o mecanismo

primário, faria sentido incluir a caixa de busca logo na parte superior da home page. No caso

de outro tipo de site, talvez baste um link simples (mas proeminente) para a página de busca.

Em suma, a home page deve oferecer três recursos: um diretório com as principais áreas de

conteúdo, um resumo das notícias ou promoções e um recurso de busca.

Para NIELSEN (2000), o nome da empresa não precisa ser o maior elemento, mas ele deve

estar no canto superior esquerdo da tela ou em outro ponto facilmente visto. O nome (ou logo)

deve ser repetido em todas as páginas, pois os usuários podem entrar em qualquer página, e

não apenas na home page: as pessoas que navegam a partir de mecanismos de busca, ou

seguem links de outros sites, precisam saber em que site aportaram. Por isso, as páginas

interiores precisam concentrar-se em mostrar conteúdo específico e não em promover boas-

vindas ou a visão geral do site; estas duas metas estão reservadas somente à home page.

256

Seria uma estratégia errada forçar todos os usuários a entrar no site através da home page: os

chamados “links profundos” permitem que outros sites apontem aos usuários o local exato

que interessa. Um Web site seria uma casa com milhares de portas e haveria várias formas de

entrar - a decisão de navegação está nas mãos do usuário.

Existiria conflito entre a necessidade de atender às pessoas que entram em qualquer página e a

necessidade de limitar informações gerais e auxílios à navegação na home page; a solução

deste conflito depende da freqüência esperada de pessoas entrando no site em páginas de nível

inferior – daí a necessidade de pesquisas sobre o que faz o usuário e o que ele deseja,

informação que pode ser obtida, por exemplo, com a análise dos logs do servidor Web, entre

outras pesquisas.

O mais importante seria tornar a home page um ponto de referência acessível com um simples

clique, de qualquer página do site, independente de como as pessoas lá entraram: ou seja, em

todas as páginas, o logotipo deve ser clicável e vinculado à home page. Infelizmente, nem

todos os usuários compreendem o uso do logotipo como um link para a home page e

demorará um pouco até que esta convenção seja estabelecida, acredita o autor. Portanto, nos

próximos anos, também será necessário ter um link explícito “home” ou “início”, em cada

uma das páginas.

5.12 - Tempos de resposta: o principal critério de Web Design

Pesquisas em Ergonomia têm demonstrado que usuários de hipertextos precisam de tempos de

resposta menores que 1 segundo para passar de uma página a outra e navegar com liberdade

no espaço da informação. Estudos realizados na IBM, nas décadas de 1970 e 1980,

descobriram que usuários de mainframes (grandes computadores) eram mais produtivos

quando o tempo entre pressionar uma tecla e o aparecimento da tela requisitada era inferior a

1 segundo.

Não se obterá tempos de resposta inferiores a 1 segundo na Web tão cedo; portanto, os

navegantes vão continuar sofrendo com downloads lentos. Atualmente, a meta mínima para

257

os tempos de resposta deve ser obter páginas em não mais do que 10 segundos, pois este seria

o limite da capacidade humana de manter a atenção fixa no computador.

Para NIELSEN (2000), um décimo de segundo (0,1) seria o limite para que o usuário sinta

que o sistema está reagindo instantaneamente, ou seja, que nenhum feedback (resposta) é

necessário, exceto exibir o resultado. Esse seria o limite do tempo de resposta para qualquer

applet (pequeno aplicativo) que permite aos usuários manipular objetos na tela, em tempo

real.

Um segundo seria o limite para que o fluxo de pensamento humano permaneça ininterrupto,

embora o usuário perceba a demora do sistema. Geralmente, nenhum feedback especial é

necessário durante demoras superiores a 0,1 e inferiores a 1 (um) segundo, mas o usuário

perde a sensação de operar diretamente os dados (exemplos: aplicações com banco de dados

ou jogos).

Dez segundos seria o limite para manter o usuário concentrado no diálogo: em caso de

demoras maiores, os usuários voltam-se para outras tarefas, enquanto esperam o computador

terminar. Obter uma nova página no prazo de até 10 segundos, embora irritante, significa que

o usuário pode ficar concentrado na navegação.

Para o especialista, tempos de resposta devem ser previsíveis, durante toda a operação do

hipertexto. Se a mesma ação demorar sempre o mesmo tempo, usuários saberão o que esperar.

Por isso, estabilizar os tempos de resposta resultaria em melhor usabilidade.

Seria necessário ainda, ajudar os usuários a prever o tempo de resposta de páginas

especialmente grandes ou arquivos multimídia, indicando o tamanho do download. Os

tamanhos devem ser informados caso demorem mais de 10 segundos, considerando a largura

de banda predominante da audiência.

O tempo de resposta experimentado pelo usuário durante o diálogo com o site é determinado

pelo elo mais fraco na cadeia servidor-navegador:

- a resposta do servidor;

- a conexão do servidor com a Internet;

- a Internet propriamente dita;

258

- a conexão do usuário com a Internet;

- a velocidade de renderização do navegador e do computador do usuário.

Cada um desses passos introduz demora na obtenção de uma página do servidor. Infelizmente,

as demoras são acumulativas, ou seja, não se pode melhorar os tempos de respostas ao

melhorar um único elo da cadeia. Deve-se levar em consideração também os tempos de

resposta do servidor.

Às vezes, recuperar uma página compreende conexões a mainframes ou a servidores de

bancos de dados, retardando o processo. Mas os usuários não querem saber o porquê da

lentidão, só que o site não oferece um bom serviço. Tempos de resposta lentos são traduzidos

em menor nível de confiança e perda de audiência.

Os tempos médios de resposta das principais páginas do portal Senac Nacional foram

monitorados, em agosto de 2001, através do seu link corporativo de 128 Kb com a Embratel, e

foi gerada a tabela a seguir. Para cronometrar as medidas foram apagados os arquivos

temporários de Internet do cache do computador - um Pentium 450 MHz, rodando Windows

98.

Página do portal Senac Tempos de resposta (médios)

Home page (abertura) 19,5 s

Página de saída (links para estados) 4,8 s

Áreas de educação e atuação 5,6 s

Área de informática 4,3 s

Área de administração 4,0 s

Área de artes 4,6 s

Área de saúde 9,0 s

Área de moda e imagem pessoal 3,3 s

Área de conservação e zeladoria 3,0 s

Subsite Editora Senac Nacional 5,6 s

FAQ (perguntas freqüentes) 6,3 s

259

Endereços nos estados 2,6 s

Média geral 6,0 s

TABELA 5.7 – Tempos de resposta obtidos para as principais páginas do portal Senac

(2001).

O resultado obtido mostra que o portal Senac Nacional apresenta tempo de resposta médio

dentro dos limites aceitáveis propostos por NIELSEN (2000) para a navegação confortável

dos usuários. Isto acontece, possivelmente, devido à simplicidade do seu hipertexto e à

economia de recursos gráficos e multimídias. O portal Senac também não utiliza acesso a

servidores de bancos de dados - o que poderia retardar o diálogo com o usuário final.

Observa-se, entretanto, que a primeira página (home page) demora mais para ser carregada -

quase o dobro do tempo aconselhado por NIELSEN (2000). Esse fato ajuda a embasar a

hipótese de trabalho considerada para esta dissertação de mestrado e a explicar, em parte, os

problemas observados no portal – como a desistência de usuários diante de sua home page.

Voltaremos a discutir esse assunto, mais adiante, nos próximos capítulos deste trabalho.

Nas tabelas apresentadas a seguir, registram-se dados relativos aos tempos de resposta obtidos

por sites pertencentes ao mainstream da Internet brasileira, pesquisados por alunos do Curso

de Pós-Graduação em Design de Interfaces da Universidade Carioca (2001), em situações de

conexão doméstica de no máximo 56 Kbps – tendo sido o levantamento realizado em

diferentes bairros do Rio de Janeiro, e em máquinas diferentes. Foi solicitado aos alunos que

repetissem a experiência cinco vezes e que calculassem uma média aritmética simples, sempre

com a liberação da memória cache do computador. Mesmo que as condições de medição não

tenham sido totalmente controladas, o resultado nos mostra um tempo de resposta longo para

um bom número de Web sites.

260

Portal Bradesco Tempos de resposta (médios)

Home page (abertura) 35 s

Novos horários 1 s

Acesse sua conta 5 s

Private 15 s

Financie um micro 17 s

Cartões Bradesco 17 s

Média geral 15 s

TABELA 5.8 – Tempos de resposta obtidos para as páginas do portal Bradesco (2001).

Portal Anatel Tempos de resposta (médios)

Home page (abertura) 1min 34s

Central de atendimento 36 s

Sistemas interativos 19 s

Consultas públicas 16 s

Reajustes 20 s

Telefonia fixa 25 s

Média geral 35 s

TABELA 5.9 – Tempos de resposta obtidos para as páginas do portal Anatel (2001).

261

Portal Globo.Com Tempos de resposta (médios)

Home page (abertura) 12 s

Globo Compras 30 s

Diversão e arte 20 s

Notícia sobre arte em Veneza 20 s

Tempo 30 s

Média geral 22,4 s

TABELA 5.10 – Tempos de resposta obtidos para as páginas do portal Globo.Com (2001).

Portal X (Xuxa) Tempos de resposta (médios)

Home page (abertura) 40 s

Xuxa Meneghel 12 s

Biografia 40 s

Plano astral 19 s

Baby Xuxa 16 s

Média geral 25,4 s

TABELA 5.11 – Tempos de resposta obtidos para as páginas do portal da Xuxa (2001).

Shell do Brasil Tempos de resposta (médios)

Home page (abertura) 64 s

Institucional 30 s

Shell na sociedade brasileira 20 s

RH 18 s

262

Produtos e serviços 18 s

Média geral 30 s

TABELA 5.12 – Tempos de resposta obtidos para as páginas do portal Shell do Brasil

(2001).

Metropolitan / ATL Hall Tempos de resposta (médios)

Home page (abertura) 1min 10 s

Pontos de venda 17 s

Agenda de shows 23 s

Próximas atrações 20 s

Conheça o ATL Hall 21 s

Média geral 30,2 s

TABELA 5.13 – Tempos de resposta obtidos para as páginas do portal ATL Hall (2001).

Os dados das tabelas acima mostram que, pelo menos no quesito tempos de resposta, o portal

do Senac apresenta boa performance de usabilidade, em comparação com outros conhecidos

portais da Internet brasileira. Assim como o Senac Nacional, muitos portais analisados

ofereceram maior carga de download na primeira página (home page), em comparação com as

páginas interiores de conteúdo - desmotivando o usuário logo em sua entrada. Ressalta-se que,

entre os sites investigados, figuram tradicionais vencedores do prêmio “IBEST – o oscar da

Internet brasileira”, um evento que privilegia aspectos ligados ao marketing das empresas na

Web e que pode inspirar futuros trabalhos de pesquisa no campo da Ergonomia e da

usabilidade da Interação Humano-Computador (HCI).

263

“A velocidade deveria ser o principal critério de Design.” Para isso, “devem-se manter

tamanhos de página pequenos, número de elementos gráficos reduzido e efeitos de

multimídida somente quando estes ajudam o usuário a compreender a informação”, defende

NIELSEN (2000).

O uso conservador de gráficos e multimídia não implica páginas desinteressantes. Pode-se

fazer muita coisa com células de tabela coloridas e uso criativo (mas restrito) de fontes. Em

particular, as folhas de estilo podem ser empregadas para melhorar o Design de páginas, sem

que estas sejam prejudicadas pela demora do download.

Quando é necessário usar gráficos, deve-se adotar ocorrências da mesma imagem, em vez de

imagens diferentes, pois as ocorrências de um mesmo arquivo de imagem são transmitidas

rapidamente, já que estará no cache local do usuário. A reutilização freqüente de um pequeno

vocabulário virtual não só acelerará o download como também dará consistência visual a todo

o site.

O conceito de tamanho de página na Web

“Define-se o conceito de tamanho de página como a soma dos tamanhos dos arquivos de

todos os elementos que compõem a página - inclusive o arquivo de HTML que a define - com

todos os objetos incluídos (por exemplo: arquivos de imagens GIF ou JPG).”

A tabela a seguir mostra o tamanho de página máximo para se obter os tempos de resposta

desejados, em várias velocidades de conexão, segundo NIELSEN (2000).

264

Tipo de conexão Tempo de resposta de

1 segundo

Tempo de resposta de

10 segundos

Modem 2 Kb 34 Kb

ISDN 8 Kb 150 Kb

T1 100 Kb 2 Mb

TABELA 5.14 - Tamanhos de páginas em Kbytes e seus respectivos tempos de resposta,

para diferentes conexões com a Internet, segundo NIELSEN (2000).

Os tempos de resposta específicos das multimídias também foram abordados pelo autor.

Elementos multimídia são grandes e seu download muito demorado, nas larguras de banda

baixas disponíveis para a maioria dos usuários. O autor recomenda que o formato e o tamanho

de arquivos multimídia sejam indicados em parênteses após o link, sempre que o download

demorar mais que 10 (dez) segundos. Se o designer não souber a largura de banda usada por

seus visitantes, deve realizar uma pesquisa, pois esta informação será importante para várias

questões relativas ao Web Design. A maioria dos usuários domésticos têm no máximo 56

Kbps - ou seja, arquivos maiores do que 50 Kb precisam apresentar um alerta sobre seu

tamanho.

Antes de os usuários decidirem investir seu tempo num download de multimídia, é necessário

que compreendam o que obterão. Não clicam em algo apenas porque está disponível, há muita

coisa na Web atualmente. Tanto no caso do áudio quanto no caso do vídeo, deve-se escrever o

resumo do que o usuário ouvirá ou verá. O designer deveria, ainda, restringir-se ao uso de

formatos que funcionam com software antigo, pois muitos usuários deixam de fazer

atualizações do navegador (browser). Se os usuários forem obrigados a fazer download de

novos plug-ins ou a instalar mais softwares para ver o site, a maioria desistirá da interação.

265

5.13 - Modelos de avaliação para Design de telas

Desde meados dos anos 80, houve várias tentativas de desenvolvimento de modelos que

poderiam auxiliar o Design e a avaliação da diagramação das telas de computador. Cada

modelo adotou um tipo de abordagem diferente ou focalizou distintas categorias de telas.

TULLIS (1997) informa que desenvolveu um programa, batizado de Screen Analyzer, para

mensurar telas de computador no modo caracter, sob os aspectos de densidade global,

densidade local (a medida do número de outros caracteres junto a cada caracter), número de

agrupamentos visuais, tamanho médio dos grupos, alinhamento e número de elementos de

informação. O programa foi aplicado na avaliação quantitativa de centenas de telas, quanto ao

tempo de obtenção de informações e aspectos subjetivos.

Uma variedade de outras técnicas de mensuração e sistemas de medição foram desenvolvidos

para auxiliar a criação de telas eficazes. Esses sistemas cresceram para conter definições cada

vez mais ricas de características visuais das interfaces, assim como das tarefas dos usuários:

existe a expectativa de que seja criado um padrão ou um sistema para redesenhar

automaticamente interfaces gráficas. Entretanto, ainda não há consenso sobre a validade

dessas pesquisas ou sobre seus resultados.

Apesar de seu exaustivo trabalho, TULLIS foi muito criticado por seus colegas pesquisadores,

mas o próprio TULLIS (1997) afirma que esse modelo de ferramenta automatizada não

poderá substituir totalmente o julgamento de um designer ou os testes com os usuários,

embora possa vir a servir como um complemento no processo de Design.

SCHWARTZ (apud MAYHEW, 1992) notou que as pesquisas de TULLIS tiveram como

premissa apenas a realização de uma tarefa simples: a procura de informações. Esse

pesquisador desenvolveu um estudo para determinar se o Design de telas identificado por

TULLIS teria a mesma performance se aplicado a diferentes tarefas. Quatro tipos de tarefas

foram incluídas no estudo: (1) escaneamento, (2) detecção de padrões, (3) julgamentos

múltiplos, e (4) alocação de energia. As dimensões de Design de telas propostas por TULLIS

não tiveram efeitos claros nos três últimos tipos de tarefas. Desse modo, parece que diferentes

dimensões de tarefas deverão resultar em diferentes pré-requisitos para as telas. Embora as

conclusões de TULLIS possam ser generalizadas para telas que envolvem a procura de

266

informações, suas conclusões provavelmente não poderão ser generalizadas para interfaces

que envolvem outros tipos de tarefas.

Mais pesquisas serão necessárias para associar as principais categorias das tarefas às

dimensões de Design relevantes. Enquanto isso não ocorre, os designeres devem considerar o

trabalho de TULLIS somente quando a procura de informações é o principal componente das

tarefas do usuário. Mas devem testar, empiricamente, os projetos de telas, especialmente

quando as tarefas envolvem monitoramento ou processos complexos de decisão – aconselha a

autora.

Limitações ao modelo de TULLIS foram apontadas por PERLMAN (1987), apud MAYHEW

(1992). Ele notou o seguinte: (1) o modelo TULLIS não leva em consideração efeitos

gerados por caracteres quase gráficos, como linhas, bordas, negritos, cores e videos reversos,

entre outros, (2) o modelo TULLIS não considera a estrutura subjacente da informação, (3) o

modelo TULLIS é somente descritivo; não é diagnóstico nem prescritivo. Embora o número e

o tamanho dos agrupamentos sejam fatores importantes, PERLMAN ressaltou que a maneira

como a informação é dividida em grupos seria também importante, mas o modelo TULLIS

não considera esta questão.

Um outro estudo - realizado por WILLIAMS and LEAF (1986), apud MAYHEW (1992) -,

apontou que as previsões do tempo de procura de informações do modelo TULLIS não

levavam em consideração julgamentos de facilidade de uso feitos por usuários experientes e

por designeres considerando aspectos semânticos e espaciais do agrupamento e do

alinhamento. Um aspecto que não foi levado em consideração por TULLIS e estudos

relacionados seria o nível de experiência do usuário.

Mais pesquisas seriam necessárias para determinar as diretrizes e princípios de Design de

telas com relação à experiência do usuário. Se o modelo TULLIS enfatiza certos parâmetros

importantes de desenho de telas, ele não é uma ferramenta completa. Os designeres deveriam

considerar um grande número de parâmetros para além do simples layout espacial,

considerados pelo modelo TULLIS: os próprios valores de parâmetros considerados,

267

provavelmente, irão depender das características do usuário e da tarefa – explica-nos

MAYHEW (1992).

Segundo SEARS (1992), TULLIS investigou a performance de usuários para displays

alfanuméricos não interativos: explorou a relação entre formas de avaliar uma tela, como a

densidade de informações, a densidade local, o agrupamento de objetos, a complexidade do

layout e o tempo requerido para extrair informações de um display. TULLIS foi um

investigador que conduziu experimentos e desenvolveu equações e modelos para predizer o

tempo de procura e taxas de preferência dos usuários. Entretanto, sem descrição das tarefas, o

modelo TULLIS não seria capaz de avaliar a adequação de uma interface para tarefas

específicas. TULLIS teria apresentado somente valores recomendados para guiar designeres,

em cada item do Design de telas, mas não explorou as descrições de tarefas.

Por outro lado, PERLMAN desenvolveu um modelo axiomático para apresentação de

informações. O modelo permitiu que designeres especificassem relações entre informações

apresentadas e regras para estes relacionamentos. Um protótipo incorporou este modelo e

apresentou feedback sobre os problemas nas interfaces. Entretanto, não haveria mecanismos

para comparar layouts alternativos.

A única contribuição do modelo PERLMAN seria o fato de que ele começa com a intenção do

designer. Isso significa um avanço em relação ao trabalho de TULLIS, que não incorpora nem

as intenções do designer, nem tarefas do usuário; no entanto, enfatiza o designer e não o

usuário. Embora a intenção do designer possa ser gerar regras e relações que reflitam tarefas

do usuário, nenhuma descrição de tarefas é explicitamente incorporada no modelo proposto.

Outro método citado por SEARS (1992) é o “GOMS” (Goals, Operators, Methods and

Selection Rules). É um método baseado nos objetivos (goals) do operador e nas regras de

seleção utilizadas por ele. Este método é usado para descrever o conhecimento que o usuário

tem ao desempenhar tarefas, num determinado sistema. Desenvolver análises pelo método

“GOMS” e construir modelos de produção pode se tornar difícil. Embora a estrutura

hierárquica de uma análise pelo método “GOMS” providencie um bom quadro para análise de

tarefas, utilizá-lo requer treinamento, de tal modo que pode se tornar caro ou impraticável.

268

Um outro pesquisador, LOHSE, citado por SEARS (1992), desenvolveu modelo para predizer

o tempo necessário para que o usuário extraia informações de um gráfico. Este trabalho

focalizou-se nos locais onde os usuários fixam seu olhar e em tarefas cognitivas requeridas

para cada passo da interação. O modelo de LOHSE simplesmente prediz a quantidade de

tempo necessária para se responder a uma questão, trabalhando apenas com tarefas cognitivas

de baixo nível. Um outro tipo de trabalho proposto é o chamado “cognitive walkthrough”:

técnicas relativamente novas, nas quais o designer ou a equipe, especifica tarefas a serem

desempenhadas pelos usuários e a seqüência de ações necessárias para completá-las. Quando

os passos são completados, avalia-se a facilidade de aprendizado para a interface proposta.

Inicialmente, estas análises foram desenvolvidas para a avaliação de temas “walk up and use”

e muitas aplicações da técnica foram reportadas com variados graus de sucesso.

Numerosos outros sistemas de pesquisa foram desenvolvidos, para, automaticamente ou

semiautomaticamente, gerar interfaces para o usuário. Esses sistemas variaram muito: alguns

basearam-se na estrutura interna da informação a ser apresentada aos usuários e, outros, em

uma gama de diretrizes (guidelines). A maior parte desses sistemas permite aos designeres

modificar o layout gerado automaticamente. Se, por um lado, esses sistemas são úteis -

gerando interfaces equilibradas, seguindo diretrizes gerais de Design e agrupando

informações relacionadas - eles não incluem informações que dizem respeito às tarefas do

usuário, explica-nos SEARS (1992).

Outro sistema abordado pelo autor é o de CASNER e LARKIN, que utiliza descrições de

tarefas para gerar displays gráficos visando à extração de informações. Infelizmente, nenhuma

análise é apresentada para o designer, de tal modo que o profissional fica com muitas

alternativas de telas e pouca informação sobre quais delas poderiam gerar a melhor

performance para o usuário.

Especialistas em fatores humanos utilizaram também a análise de links para redesenhar

displays, equipamentos ou salas. A análise de links inclui a localização de objetos e valores

atribuídos a cada link entre objetos. Os valores dos links podem representar a freqüência

relativa dos movimentos de um objeto para outro sua importância ou qualquer outro dado de

interesse. O objetivo da análise de links seria minimizar a soma dos valores de links

multiplicados pelas distâncias entre os links.

269

De acordo com SEARS (1992), designeres monitoram muitos aspectos do projeto de uma

interface, na medida em que está sendo criada. O método do Layout Appropriateness (L.A.)

poderia monitorar automaticamente várias medidas, reduzindo demandas dos designeres e

permitindo que eles se concentrem em outros aspectos da interface. A computação pelo

método L.A. tira vantagem de descrições de freqüências de tarefas simples, para determinar o

layout ótimo. Se, por um lado, a análise de tarefas mais aprofundada pode ser útil,

desenvolvê-la esta análise detalhadamente é difícil e dispendioso. Nesse caso, os designeres

podem desenvolver uma versão simplificada da análise para coletar a freqüência e a seqüência

de ações dos usuários, assim como outras informações necessárias para computar o L.A.. No

caso de existir uma interface pronta, os designeres podem coletar dados do seu uso real.

Diante de uma descrição de tarefa simplificada e de uma gama de objetos a serem organizados

na tela, um layout otimizado do tipo L.A. pode ser computado.

O L.A. enfatizaria os processos mais freqüentes enquanto incorporaria também métodos

menos freqüentes, considerando a seqüência de ações que forma as tarefas. Os designeres

poderiam então comparar layouts existentes ou propostos de forma gráfica ou utilizar a

métrica do L.A., para determinar se mudanças deveriam ou não ser efetuadas na interface. Na

medida em que a totalidade dos critérios importantes não puderam ser incluídos nos

algoritmos do L.A., os designeres permanecem com a liberdade total para tomar as decisões

finais.

Aplicar o método proposto por SEARS (1992) seria útil em duas situações: primeiro, no caso

de uma nova interface estar sendo desenhada. Neste caso, o L.A. pode gerar um layout inicial

que o designer modifica posteriormente, se necessário. Segundo, se layouts alternativos

existirem, o designer pode utilizar o método L.A. para compará-los. O layout gerado pelo

L.A. também pode ser comparado com um layout gerado pelo designer.

O L.A. se propõe a suplementar outras métricas e não tem a palavra final. Idealmente,

métricas adicionais deveriam ser desenvolvidas e utilizadas em conjunto com o método L.A.

para fornecer feedback aos designeres, no que concerne aos possíveis efeitos de mudanças

sobre a performance do usuário. Prover feedback adicional será benéfico para tanto os

engenheiros de software, que ocasionalmente devem enfrentar o desafio de desenhar uma

interface, quanto para designeres experientes, afirma SEARS (1992).

270

5.14 Conclusões deste capítulo

Para concluir este capítulo, observamos que a abundância de diretrizes (guidelines) que

abordam o Design de telas de sistemas informatizados pode nos levar a acreditar que existem

muitas evidências empíricas relacionadas ao Design de telas. Mas isso não é verdade: há

poucos estudos relevantes, sendo que muitos problemas de telas precisam ser testados

empiricamente.

No que se relaciona ao Web Design, a questão fica mais delicada: acredita-se que uma década

de pesquisas e de comprovação de hipóteses ainda será necessária para se chegar a diretrizes

que norteiem os projetos dos designeres. Isso coloca as pesquisas com usuários na ordem do

dia.

Conhecer quem são os usuários finais é a etapa fundamental do processo de Design de

interfaces: o mais importante na Internet é que cada serviço precisa ser baseado na análise dos

objetivos dos seus usuários específicos, assim como nas suas necessidades e tarefas. É isso

que será considerado neste trabalho, inclusive quanto à avaliação do Design de telas.

Nesta pesquisa de mestrado, empregaremos as técnicas da análise de conteúdo e do

questionário online para conhecer o perfil real e as opiniões e atitudes do usuário, tal como

serão pormenorizadas no próximo capítulo, que aborda métodos e técnicas utilizados.

271

Referências deste capítulo

FINCK, Nick. Liquid web design: build it right and it will work no matter what the container. 1999.

Digital Web Magazine. Disponível em: <http://www.digital.web.com/>. Acesso em: jul. 2001.

KALBACH, James. The myth of 800 x 600: Web Review – Cross training for web teams. 16 mar.

2001. Disponível em: <http://www.webreview.com/>. Acesso em: jul. 2001.

LYNCH, Patrick J.; HORTON, Sarah. Web style guide: basic design principles for creating web

sites. New Haven: Yale University Center for Advanced Instructional Media, 1999. 165 p.

MANDEL, Theo. The elements of user interface. New York: W. Computer; J. Wiley & Sons, 1997.

432 p.

MARCUS, Aaron. Metaphor design in user interfaces. In: International Conference on Human-

Computer Interaction, 9º, 2001. Tutorial # 5: user – interface design for work, home and on the way.

California: A. Marcus and Associates, 2001. Coletânea de obras do autor apresentada nessa

Conferência.

______. Principles of effective visual communication of graphical user interface design. In:

International Conference on Human- Computer Interaction, 9º, 2001. Tutorial # 5: user – interface

design for work, home and on the way. California: A. Marcus and Associates, 2001. Coletânea de

obras do autor apresentada nessa Conferência.

MAYHEW, Deborah J. Principles and guidelines in software user interface design. New Jersey:

Prentice Hall, 1992. 610 p.

272

NIELSEN, Jakob. Designing web usability: the practice of simplicity. Indianapolis: News Riders,

2000. 420 p.

__________.; TAHIR, Marie. Home page usability: 50 websites deconstructed. Indianapolis. News

Riders, 2001. 322p.

PAAP, Kenneth R.; COOKE, Nancy J. Design of menus. In: HANDBOOK of human-computer

interaction. Amsterdam: Elsevier,1997. p. 533-573.

SEARS, Andrew. Layout appropriateness: a metric for evaluating user interface widget layout.

In: UNIVERSITY OF MARYLAND. Human Computer Laboratory & Computer Science Department.

Technical Reports. Dez. 1992. Disponível em: <http://www.cs.umd.edu/library/TRS/.>. Acesso em:

jun. 2001.

TULLIS, Thomas, S. Screen design. In: HANDBOOK of human-computer interaction. Amsterdam:

Elsevier, 1997. p. 503-532

WEINMAN, Lynda. Design gráfico na Web. 1. ed. São Paulo: ed. Quark do Brasil, 1998. 448p.