1) O documento discute o design de telas e interfaces gráficas, incluindo elementos importantes como cores, áudio e diretrizes. 2) Vários estudos mostraram que melhorar o design de telas pode reduzir tempo e erros dos usuários. 3) Fatores como organização, economia e comunicação visual são importantes para o design de interfaces gráficas.

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

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

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

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

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

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

7. 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. 1. A mensagem é curta.
2. A mensagem é curta. 2. A mensagem é longa.
3. A mensagem não será utilizada depois. 3. A mensagem será utilizada depois.
4. A mensagem lida com eventos através da 4. A mensagem se relaciona a localizações
linha do tempo. espaciais.
5. A mensagem clama por ação imediata. 5. A mensagem não clama por ação imediata.
6. O sistema visual do usuário está 6. O sistema auditivo do usuário está
sobrecarregado. sobrecarregado.
7. O local está muito escuro ou muito 7. O local é muito ruidoso.
iluminado. 8. A atividade do usuário requer que ele
8. A atividade do usuário requer que ele deixe permaneça em seu posto de trabalho.
seu posto de trabalho continuamente.
TABELA 5.3 – Diretrizes para apresentação de mensagens auditivas ou visuais,
segundo DEATHERAGE (1972), apud MANDEL (1997).

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

9. 211
Tópico da interface Perguntas que a animação responde:
1. Identificação 1. O que é isto?
2. Transição 2. De onde vim e para onde vou?
3. Orientação 3. Onde estou?
4. Escolha 4. O que posso fazer agora?
5. Demonstração 5. O que faço com isto?
6. Explicação 6. Como faço isto?
7. Feedback 7. O que está acontecendo?
8. Histórico 8. O que foi que eu fiz?
9. Interpretação 9. Porque isto aconteceu?
10. Aconselhamento 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;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

30. 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 Até 10 itens por tela
Itens da escolha não podem ser agrupados
Itens de escolha não são complexos e De 11 a 20 itens por tela
Itens de escolha podem ser agrupados
porém
Usuários são casuais e pouco freqüentes
Itens de escolha não são complexos e 21 ou mais itens por tela
Itens de escolha podem ser agrupados e usuários são
experientes/freqüentes
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

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

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

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

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

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

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

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

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

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

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

41. 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 22% 13%
menor)
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).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

58. 260
Portal Bradesco Tempos de resposta (médios)
Home page (abertura) 35 s
Novos horários 1s
Acesse sua conta 5s
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).

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

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

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

62. 264
Tipo de conexão Tempo de resposta de Tempo de resposta de
1 segundo 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.

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

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

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

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

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

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

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

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