Design de telas: elementos e diretrizes para interfaces gráficas

203

5. Design de telas

5.1 O que é Design de telas?

O termo Design de telas (screen Design) se refere ao processo de determinação da aparência
visual e do conteúdo de um quadro simples e do resultado final desse processo. Nos tempos
dos terminais remotos, as telas eram sinônimos de telas físicas: apresentar uma nova tela
implicava em repintar a tela física inteira. Com as interfaces gráficas (GUI), o Design de telas
assumiu um significado diferente. Nessas aplicações, as pessoas se referem ao Design de telas
como criação de janelas específicas ou caixas de diálogo, em vez de se referir a telas inteiras.

A importância do Design de telas hoje se explica pelo fato de o canal visual ser o meio mais
importante de comunciar informações ao usuário. Uma variedade de estudos ilustraram a
importância das telas:

- TULLIS (1981) descobriu que redesenhar a tela-chave de um sistema de telefonia resultou
em uma redução de 40% do tempo gasto para interpretar o display.

- KEISTER e GALLAWAY (1983) descobriram que redesenhar uma série de telas resultou
em 25% de redução do tempo total de processamento de um sistema, e 25% de redução
nos erros.

- Em um estudo de mais de 500 telas, TULLIS (1984) concluiu que o tempo gasto pelos
usuários para extrair informação de um sistema de companhia aérea foi 128% maior para
o pior formato, em comparação com o melhor formato.

- Numa pesquisa sobre um sistema determinado, DONNER, MCKAY, O’BRIEN e
RUDISILL (1991) concluíram que houve reduções de até 28%, no tempo que os usuários
empregavam para obter informações relevantes.

Uma olhada na literatura demonstra que uma grande base de conhecimento a respeito do
Design de telas acumulou-se durante os últimos 30 anos. Esse conhecimento deriva-se de

204

diversas fontes, entre elas:
- a pesquisa básica em psicologia;
- estudos em ergonomia;
- experiências de usuários e designeres de aplicações; e a
- experiência em Design gráfico.

Muitas informações foram compiladas em diretrizes (guidelines), abordando o desenho de
telas e outras características das interfaces humano-computador. Diversas diretrizes são bem
embasadas em pesquisas básicas e aplicadas, porém, muitas não.

O Design da interface visual dos sistemas computadorizados recebeu mais atenção no estudo
e nas diretrizes da Interação Humano-Computador (HCI), do que qualquer outro aspecto da
interface.

Se a maior parte dos documentos de diretrizes (guidelines) são independentes dos sistemas
operacionais, existem duas grandes exceções: as descrições da Apple sobre a interface gráfico
do Macintosh, que datam de 1992, e as descrições da interface gráfica do Windows, elaborada
pela Microsoft, em 1995. Esses dois livros apresentam as regras de Design de telas adotadas
para os dois sistemas. Esses livros descrevem as convenções específicas adotadas pelas
empresas citadas, enquanto que as diretrizes genéricas existentes abordam uma gama de
convenções a serem adotadas por qualquer interface.

A aparente abundância de diretrizes (guidelines) que abordam o Design de telas de sistemas
informatizados pode nos levar, equivocadamente, a acreditar que existem correspondentes
evidências empíricas, relacionadas ao Design de telas. Mas isso não é verdade: há poucos
estudos relevantes, sendo que muitos problemas relacionados ao Design de telas precisam ser
pesquisados empiricamente, especialmente aqueles relacionados às interfaces gráficas com o
usuário (GUI).

A maior parte dos estudos abordaram exclusivamente telas alfanuméricas. O modo comum de
mensuração tem sido o tempo de procura da informação, isto é, o tempo de extrair um dado
específico ou um item de informação de uma tela. Estudos empíricos compararam a
performance em dois ou mais métodos de apresentar a mesma informação. Enquanto alguns
estudos tentaram manipular variáveis sistematicamente, outros compararam telas que diferiam

205

entre si de diversas maneiras, incluindo o uso de itens alfanuméricos e gráficos. Incluídos
nesta categoria estão estudos que comparavam uma versão existente de tela com uma versão
redesenhada. Geralmente, redesenhos envolvem grande variedade de alterações, tornando
difícil atribuir variações de performance às mudanças específicas da tela.

TULLIS (1984), conduziu aprofundado estudo para investigar a variedade de formatos de
telas alfanuméricas. O pesquisador utilizou um programa de computador para medir seis
características: densidade geral, densidade local, número de grupos, tamanho médio de cada
grupo, número de itens e alinhamento dos itens. Regressões foram empregadas para
determinar tempos de procura, assim como a facilidade subjetiva relacionada às variáveis
pesquisadas. Estudos abordando telas gráficas se tornaram mais difíceis, devido à sua grande
complexidade e número de variáveis. Outros estudos enfocaram a comparação dos displays
alfanuméricos com displays gráficos, num nível global. Também foram pesquisadas quais
seriam as tarefas mais apropriadas para displays gráficos, em comparação com alfanuméricos.

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

Segundo MARCUS (1994), uma interface gráfica com o usuário (GUI) deve considerar os
seguintes fatores:
- imagem mental (metáfora);
- organização apropriada de dados, funções, tarefas e papéis (modelo cognitivo);
- esquema eficiente de navegação entre os dados, as funções, as tarefas, etc.;
- aparência de qualidade (“look”);
- seqüência de interações eficazes (“feel”).

Além disso, as interfaces gráficas (GUI) de sucesso considerariam aspectos críticos como
desenvolvimento, usabilidade e aceitação. Todos esses fatores se beneficiariam da
comunicação visual da interface. A organização conceitualmente adequada, a apresentação
visual consistente e o emprego da linguagem visível contribuiriam para a comunicação da
interface. O conceito de linguagem visível se refere às seguintes técnicas, usadas para a
comunicação de mensagens e de conteúdos: layouts, tipografias, cores e texturas, imagens (da
abstração à fotografia), animações, seqüenciamentos (roteirização), som e identidade visual
(as regras para a consistência geral das interfaces).

206

A manipulação da linguagem visível seria tarefa básica das interfaces. Os três princípios a
seguir podem se tornar úteis tanto para a prática profissional, como para a pesquisa e para o
desenvolvimento – explica-nos MARCUS (1994):

1 – Organizar: fornecer ao usuário uma estrutura conceitual clara e consistente;
2 – Economizar: maximizar a eficácia de uma gama limitada de recursos visuais;
3 – Comunicar: associar a apresentação às capacidades do usuário.

Para MANDEL (1997), a cor seria mecanismo automático para captar a atenção do
observador: portanto, muitas cores em uma interface permitiriam que usuários prestassem
atenção às telas. Ajudariam a criar uma interface amigável e fácil. Entretanto, seria importante
evitar o efeito “Las Vegas”, que pode distrair os usuários de suas tarefas específicas. Cores
brilhantes atraem clientes e usuários, mas quando se senta em frente a um computador por
horas seguidas, o usuário não necessita de cores para distrair sua atenção durante o trabalho.
Se as cores têm um forte efeito sob a percepção humana, devem ser usadas adequadamente:
são empregadas para atrair atenção, mas incompatíveis com longos períodos de trabalho, na
frente da tela de um microcomputador.

Algumas diretrizes para aplicação de cores podem parecer fora de moda hoje. Entretanto,
características cognitivas e a percepção humana não se alteram através do tempo. Essas
diretrizes continuam válidas; novos softwares e hardwares devem desenvolver a sua aplicação
adequada.

MURCH, apud MANDEL (1997), um pesquisador respeitado no que se refere aos aspectos
psicológicos e físicos da cor, afirma: “é impossível desenvolver uma gama completa de
diretrizes para o uso, em todas as aplicações. Podemos, entretanto, estabelecer princípios
amplos, baseados nos mecanismos de percepção da cor pelos seres humanos”.

O pesquisador apresentou vinte e cinco diretrizes divididas em três grupos: fisiológicas,
perceptivas, e cognitivas (ver tabela a seguir).

207

Diretrizes Fisiológicas

1. Evitar apresentar, na tela, cores altamente saturadas e do extremo do espectro luminoso.
2. O azul saturado deve ser evitado para textos, linhas finas ou pequenas formas.
3. Evitar cores adjacentes que se diferenciam apenas na quantidade de azul.
4. Usuários mais velhos necessitam de mais brilho para distinguir as cores.
5. As cores mudam de aparência de acordo com os níveis de iluminação do ambiente.
6. A magnitude de uma mudança percebida de cores varia ao longo do espectro luminoso.
7. É difícil focalizar cantos criados somente através de cores.
8. Evitar o verde e o vermelho na periferia de grandes displays.
9. Cores opostas funcionam bem quando juntas (vermelho/verde ou amarelo/azul).
10. Para usuários visualmente deficientes, deve-se evitar distinções baseadas em uma só cor.

Diretrizes Perceptivas

1. Nem todas as cores são igualmente discerníveis.
2. Luminância não é sinônimo de brilho.
3. Diferentes padrões de cores possuem diferentes níveis de saturação.
4. A luminosidade e o brilho são distinguíveis em uma cópia impressa, mas não em uma tela de
um monitor colorido.
5. Nem todas as cores são igualmente legíveis.
6. As cores se alteram em relação ao fundo (background).
7. Evitar a necessidade de distinção entre cores em áreas pequenas.

Diretrizes Cognitivas

1. Não abusar no emprego das cores.
2. Estar consciente da manipulação não linear das cores em monitores e em cópias impressas.
3. Fazer o agrupamento de elementos relacionados entre si através de uma cor de fundo comum.
4. Cores similares têm a conotação de significados similares.
5. Brilho e saturação atraem a atenção.
6. Ligar o grau de mudanças nas cores à magnitude dos eventos da interface.
7. Ordenar as cores com base em sua posição no espectro luminoso.
8. Cores frias e quentes devem indicar diferentes níveis de atividade.

TABELA 5.1 – “Diretrizes para o Uso de Cores em Telas de Computador” de acordo
com MURCH (1984), apud MANDEL (1997).

208

MARCUS (1986) tornou-se um conhecido designer de interfaces e consultor da indústria de
computadores, com background em informação e Design gráfico. O pesquisador aplicou os
seguintes princípios para o uso da cor: organização, economia, ênfase, interações, simbolismo
e comunicação. Os seus “Dez mandamentos da cor” são estes:

Dez mandamentos da cor

1. Usar no máximo entre três e sete cores.
2. Utilizar cores centrais e periféricas apropriadamente. Por exemplo, usar vermelho e verde para o
centro do campo visual; azul é adequado para fundos e bordas.
3. Utilizar cores que exibem contraste mínimo com relação a seus tamanhos.
4. Não utilizar simultaneamente cores com alto nível cromático e de extremos do espectro luminoso.
5. Utilizar código de cores familiar e consistente.
6. Usar a mesma cor para agrupar elementos relacionados.
7. Utilizar o mesmo código de cores para treinamento, testes, aplicação e publicação.
8. Utilizar cores saturadas para chamar a atenção.
9. Se possível, utilizar um código de formas, aliado a um código de cores.
10. Utilizar cores para enfatizar as informações em preto e branco.

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

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

A interface com o usuário pode utilizar também o emprego de áudio. Existe muita discussão
sobre a eficiência do emprego de áudio como feedback, nas interfaces. Se aplicado
corretamente, torna-se não invasivo e pode ser desligado pelo usuário. Usuários rapidamente
procuram o controle do volume dos recursos de áudio caso sons, bips e cliques, assim como

209

vozes e músicas, começarem a incomodá-los ou a e a interromper seu trabalho. Deve-se saber
quando utilizar informações auditivas, em vez de informações visuais; deve-se determinar
qual é o apropriado recurso de áudio a ser apresentado ao usuário de um sistema, em uma
situação específica. O áudio precisa ser customizado pelo usuário de tal forma que o volume
possa ser abaixado ou desligado. Grande parte dos ambientes de trabalho, hoje em dia, são
abertos, o que quer dizer que os trabalhadores não têm escritórios individuais: quando pessoas
trabalham em grande proximidade com outras, juntamente com telefones e computadores, o
áudio não será eficaz. Trabalhadores, nestas cirscunstâncias, freqüentemente não conseguem
identificar qual telefone está tocando ou qual computador está emitindo sons.

A maior parte dos softwares da atualidade utilizam pelo menos um feedback de áudio,
normalmente bips curtos quando ocorre erro, ou quando uma opção inválida é escolhida.
Entretanto, até mesmo esses inofensivos bips podem aborrecer o usuário, ou perturbar seu
trabalho. Em algumas culturas, trabalhadores envergonham- se quando cometem erros; nesses
casos, a última coisa que desejam é um computador apitando, pois não querem que seus
colegas percebam erros que cometem.

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

1. A mensagem é simples. 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).

210

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

Outro recurso das interfaces com o usuário é o emprego da animação. Animação pode ser
definida como uma mudança na aparência visual de um elemento gráfico, através do tempo.
Da mesma forma que o áudio, grande parte das animações podem ser consideradas
entretenimento, embora cursores animados possam se tornar mais fáceis de enxergar,
especialmente em telas pequenas, como as de notebooks.

O Apple Macintosh foi um exemplo das primeiras interfaces a utilizar animações. Muitas
interfaces gráficas, hoje em dia, utilizam técnicas de animação para apresentar atividades,
progressos, ou o status do sistema. Animações também são utilizadas em aplicações
complexas como os documentos multimídia. Existem entretanto poucas diretrizes disponíveis
para o uso de animações nas interfaces.

As diretrizes fornecidas pela Microsoft apresentam somente meia página de texto. As
melhores descrições sobre quando e por que utilizar animações foram fornecidas por
BAECKER et al. (1991), apud MANDEL (1997), que discutiram formas de auxiliar os
usuários, através das animações, no artigo “Bringing Icons to Life” (trazendo à vida os
ícones).

Os autores listavam as seguintes questões, que podem auxiliar os designeres de interfaces no
projeto de sistemas interativos, que incluem animações. As diretrizes listam o tipo de
perguntas do usuário que a animação pode ajudar a responder, para nível de interação com o
sistema (ver a tabela a seguir).

211

Tópico da interface Perguntas que a animação responde:

1. Identificação 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;

212

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

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

8. feedback e confirmações inadequadas;

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

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

“Quanto ao layout e Design dos elementos das janelas de uma interface, pode-se dizer que se
trata de arte e ciência ao mesmo tempo: cores, fontes, tamanhos, controles, orientações,
simetrias, ênfases e numerosos outros fatores influenciam o desenho final de uma simples
janela da interface” (MANDEL, 1997).

5.6 Diretrizes gerais para Design de telas

TULLIS (1997) descreveu algumas diretrizes e técnicas de Design de telas de computadores,
relevantes para um grande número de aplicações, da seguinte forma:

5.6.1 – Sobre a quantidade de informação:

Talvez o maior problema do Design de telas esteja relacionado com a quantidade de
informação que deve ser apresentada. Quase todas as diretrizes especificam que o total de
informação em cada tela deve ser minimizada, apresentando-se somente aquilo que é
necessário para o usuário, naquele ponto específico do processo de interação.

Um aspecto relacionado seria a medida da densidade de informação. Nas telas em modo
caracter, a densidade de informação é geralmente expressa como a porcentagem dos
caracteres em uso. DANCHAK, apud TULLIS (1997) propôs a seguinte definição: “a carga
do display (display loading), que representa a porcentagem da área da tela que está ativa, não
deve exceder 25%”. Segundo ele, uma análise quantitativa de displays de computador

213

considerados “bons” revelaram uma carga em torno de 15%. Por outro lado, diretrizes da
NASA afirmam que uma tela de computador não deve exceder 60%, em termos de
intensidade de informação.

No caso de interfaces gráficas (GUI), o designer está diante de duas decisões: qual o tamanho
que vai utilizar para a tela e quantas informações vai colocar nela. O limite máximo do
tamanho da tela está determinado pela resolução mínima do hardware do seu público-alvo,
isto é, 640 por 480 pixels. Mas, para janelas e caixas de diálogo, que não sejam a janela da
aplicação principal (que costuma ser dimensionável), utiliza-se um tamanho menor.

Calcular a densidade de informação para as telas de interfaces gráficas (GUI), analogamente
às densidades de caracteres, seria problemático. Entretanto, a análise das telas gráficas revela
que a grande maioria dos elementos textuais é preta. Uma análise dos caracteres típicos do
sistema Windows mostra que a letra média tem um total de 57,6 pixels, com 14,1 pixels em
preto. Esses valores podem ser utilizados para converter tamanhos de janelas (em pixels) para
espaços de caracter equivalentes e o número de pixels em preto para os equivalentes
caracteres. Um estudo, citado por TULLIS (1997), chegou à “densidade de informação
presumida” das telas de interfaces gráficas de 171 janelas de aplicações comerciais para
sistema operacional Windows. O resultado (25,2%) é extremamente próximo da densidade
média apresentada por telas em modo caracter. A similaridade da distribuição nos dois modos
(caracter e gráfico) parece validar a pressuposição de que princípios similares determinariam
o Design dos dois tipos de telas de computador.

A evidência empírica a respeito da densidade da informação demonstra consistência: na
medida em que a informação necessária para completar a tarefa está presente, o desempenho
humano tende a se deteriorar com o aumento da densidade do display. Um grande número de
pesquisas mostrou que o tempo e o número de erros, para uma determinada tarefa, aumentam
na proporção em que o número de itens de informação que aparecem na tela aumenta
(CALLAN, CURRAN, e LANE, 1997; DODSON e SHIELDS, 1978; RINGEL e HAMMER,
1964).

Além disso, TULLIS (1997) mostra que o tempo de procura de informações geralmente
cresce, quando aumenta a densidade de informações. Apesar de a tendência de densidades
altas estarem associadas à degradação da performance, isso pode ser amenizado por outras

214

características da configuração de telas, sendo que o designer deve determinar qual a
quantidade ótima de informação deve ser apresentada em cada tela acessada, para cada ponto
da interação do usuário com o sistema. Informações não estritamente necessárias devem ser
apresentadas somente se o usuário solicitar.

Existem técnicas para reduzir a densidade de informações: se o designer determinar qual
informação deve ser apresentada, várias técnicas podem ser usadas para assegurar que a
informação não vai sobrecarregar a tela. Uma redução significativa do tempo que os usuários
gastam para interpretar a tela pode ser conseguida, com a mesma densidade de informação,
através da aplicação de princípios de Design de telas informacionais. Alguns desses princípios
são comentados a seguir:

- uso apropriado de abreviações – embora muitas diretrizes recomendem utilizar sempre
palavras completas, em vez de abreviações, estas são apropriadas em alguns casos:
quando economizam um espaço importante e quando são bem conhecidas dos usuários.

- evitar detalhes desnecessários – por exemplo, apresentar somente números inteiros quando
as informações das casas decimais não serão utilizadas pelo usuário.

- empregar vocabulário conciso – esta regra se aplica à maior parte da comunicação técnica,
mas é particularmente importante nas telas de sistemas de computador devido ao espaço
limitado. A escolha dos vocábulos deve ser feita tendo como base no que os usuários vão
compreender.

- usar formatos conhecidos – certos itens de informação, em certos contextos, são tão
facilmente reconhecidos que não será necessário explicá-los individualmente. Um
exemplo clássico é o nome, endereço, cidade, estado, e código postal de uma pessoa, em
seu formato tradicional.

- utilizar formatos tabulares com títulos – os formatos tabulares apresentam muitas
vantagens sobre outros formatos, uma das quais é colocar títulos eficientes nas áreas de
informação relacionadas.

Outras técnicas são utilizadas para fazer com que a informação esteja prontamente disponível
na tela, sem que seja apresentada de uma só vez:

215

- caixas de diálogo expansíveis: com esta abordagem, a caixa de diálogo tem dois
tamanhos. Na versão menor, que é mostrada como default, estão os itens mais necessários,
assim como um botão para expandir a caixa para a versão completa. A caixa maior revela
opções adicionais.

- Folders drop-down – essa técnica permite a fácil alteração entre os itens de uma sequência
de dados, na mesma janela, selecionando-os de forma mutuamente exclusiva.

- Listas drop-down e pop-ups – essa família de técnicas proveu fácil acesso a informações
ou opções adicionais relacionadas a um item de controle específico. Na maior parte dos
casos, o usuário clica um botão que revela as opções adicionais; em outros casos, o pop-up
automaticamente revela suas opções, quando o usuário aponta o mouse sobre o controle
associado.

Em resumo, o Design deve assegurar que cada tela ou janela contenha somente a informação
que é realmente necessária para que o usuário complete a tarefa esperada, em cada ponto do
processo de interação. A tentação de se colocar informações adicionais somente porque estão
disponíveis, deve ser evitada, já que elas claramente degradam a habilidade do usuário de
extrair informações relevantes. Com telas em modo de caracter ou com interfaces gráficas, as
densidades de informação de aproximadamente 25% são a média, enquanto que densidades
maiores do que 40-45% são atípicas. Com maiores densidades de informação, há degradação
da performance humana, mas ela pode ser amenizada por outras formas e características do
formato da tela, como o agrupamento. Uma grande variedade de técnicas pode ser utilizada
para minimizar a densidade aparente das informações (TULLIS, 1997).

5.6.2 – Sobre o agrupamento da informação:

Dentro de uma certa quantidade de itens para a apresentação, existem muitas maneiras para
que os elementos possam ser agrupados visualmente na tela. Essas formas de agrupamento
tem um papel importante para a facilidade com que o usuário vai extrair informações, assim
como na interpretração que dará a elas. A importância do agrupamento das informações tem
sido enfatizada na maioria das diretrizes de interfaces gráficas publicadas. Agrupar itens

216

similares, de forma a que fiquem juntos na tela, aumenta a sua legibilidade e enfatiza as
relações entre os diferentes grupos de informação.

O agrupamento é um dos mais importantes determinantes da capacidade do usuário de extrair
eficazmente informações de uma tela de computador. A tela que contém vários pequenos
grupos ou somente poucos grandes grupos é mais difícil de ser visualmente escaneada do que
uma contendo grupos que tendem a utilizar um ângulo visual de cinco graus
(aproximadamente treze caracteres por seis linhas ou 105 pixels de diâmetro). Observa-se que
os critérios para o agrupamento devem espelhar o que pensa o usuário e sua voz deve ser
ouvida para o embasamento das decisões de Design de telas.

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

Uma varidade de técnicas pode ser utilizada para captar atenção do usuário e dirigi-la a certos
elementos da tela como: vídeo reverso, cores, ênfase, brilho, sublinhado, pisca-pisca, etc.
Embora exista grande variedade de técnicas para destacar elementos de uma tela de
computador, pontos importantes devem ser lembrados.

Primeiro, não importando a técnica utilizada, o destaque de informações deve ser aplicado de
modo conservador: o uso excessivo de destaques contraria o seu propósito básico.

O segundo ponto é que as cores parecem ser a forma mais eficaz de destacar informações,
seguida pela técnica do vídeo reverso. Um outro aspecto é que os elementos a serem
destacados devem ser escolhidos cuidadosamente: se o elemento errado for destacado, a
dificuldade do usuário em detectar a informação importante aumentará.

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

Embora enfatizar informações possa ajudar o usuário, nem sempre é possível predizer qual é a
informação mais importante para o operador, num determinado momento de sua interação.
Por esta razão, toda tela deve ser apresentada de modo que permita ao usuário encontrar
qualquer informação. Uma das melhores formas de fazer isto é adotar formato consistente e

217

repetitivo, para todas as telas em uma aplicação, ou em uma série de aplicações similares.
Esta consistência permitirá que usuários desenvolvam expectativas sobre onde poderão
encontrar informações que desejam, tornando mais fácil o aprendizado de uma nova
aplicação, compatível com o formato que ele já conhece. Os benefícios ganhos com layouts
consistentes de telas foram demonstrados empiricamente por TULLIS (1981); e por
TEITELBAUM e GRANDA (1983).

A maior parte dos documentos de diretrizes (guidelines) advogam pelo uso da consistência no
Design de telas. Exemplo: reservar áreas específicas da tela para certas categorias de
informação, como comandos, mensagens de erro, títulos, áreas numéricas, e manter essas
áreas consistentemente através de todas as telas da aplicação. GALITZ, apud TULLIS (1997)
vai além e recomenda possíveis localizações para elementos comuns da tela: título da tela (no
centro, ao alto), identificador da tela (à direita, no alto), expressões de comando ou funções
(em rodapés), mensagens de erro ou de status (numa linha acima do rodapé), e barra de menus
(no topo da tela, imediatamente abaixo do título). Essas recomendações são compatíveis com
as de MARCUS (1992), que concorda com a diretriz de que as telas gráficas dos sistemas
informatizados devem ser desenhadas utilizando grades de layout consistentes.

Óbvio que não pode haver um layout de tela que se adeque a todas as possíveis aplicações.
Consequentemente, esta é uma área onde designeres devem fazer a transição das diretrizes,
que são necessariamente genéricas, para regras específicas de Design, ou padrões a serem
aplicados em produtos individuais ou em famílias de produtos. Por exemplo, tanto o
Macintosh, da Apple, quanto o Windows, da Microsoft, adotaram padrões detalhados de
Design para seus desktops e janelas, visando a aparência e localização das barras de títulos,
das barras de menu dos seus botões, etc.

Quanto ao seqüenciamento dos elementos de informação, GALITZ, apud TULLIS (1997)
sugere que o ponto inicial deve ser o canto superior esquerdo da tela, pois este está onde se
inicia o escaneamento visual e permitirá uma leitura compatível com as culturas ocidentais
(da esquerda para direita, de cima para baixo).

A estratégia do escaneamento foi comprovada por estudos que mostraram que a presença de
um item alvo no primeiro quadrante da tela (no alto, à esquerda) consome menos tempo para
ser encontrado do que itens posicionados no quadrante inferior direito. Entretanto, esse

218

princípio deve ser aplicado com cuidado, porque diz respeito somente às telas com caracteres,
não levando em consideração as telas com gráficos ricamente ilustrados, comuns nas
interfaces gráficas (GUI) atuais.

A maneira ótima de apresentar o seqüenciamento das informações, em uma tela de
computador, é determinada por diferentes fatores, incluindo os seguintes (TULLIS, 1997):

- a seqüência de utilização – se os elementos de informação, para tarefas do usuário,
devem ser empregados em uma dada seqüência, então devem ser apresentados seguindo
essa ordem. Um exemplo comum seria quando o usuário entra com informações que vêm
de uma fonte externa, como um formulário de entrevista com clientes.

- a utilização convencional – existem muitos casos em que a seqüência de dados foi
determinada por convenção. Um exemplo típico são nome, endereço, cidade, estado, e
código postal, embora existam outros exemplos em domínios especializados.

- a importância – em alguns casos, o desenvolvedor pode predizer que certos elementos de
informação serão mais importantes para o usuário, do que outros. Quanto mais importante
os elementos, mais destaque deve ter a sua localização no layout da tela. Relacionado a
esta idéia de importância está a suposição de que campos de entrada de informação
opcionais geralmente vêm depois dos campos de informação obrigatória.

- a freqüência de uso – nos casos em que alguns elementos da tela são utilizados de modo
mais frequente do que outros, os elementos mais requisitados devem aparecer junto ao
topo da tela. Por exemplo: em um menu de comandos, o comando mais frequente deve ser
apresentado primeiro. Por isso, nota-se que é fundamental observar o usuário durante a
realização das suas tarefas.

- a generalidade/especificidade – quando certos elementos de informação são mais
genéricos do que outros, os mais genéricos devem preceder os mais especíicos. Isso é
particularmente adequado quando existe um relacionamento hierárquico entre os itens de
informação. Elementos gerais são normalmente aqueles que estabelecem um contexto para
os elementos subseqüentes. A pesquisa com os usuários, neste caso, também desempenha
um importante papel para o processo de Design de telas.

219

- a ordem alfabética ou cronológica – se nenhuma das regras para ordenação lógica das
informações se aplicam, outra técnica deve ser adotada. Por exemplo, no caso de uma lista
de nomes uma ordem alfabética pode ser apropriada; ou então, uma lista cronológica pela
data de criação dependendo do uso previsto para as informações.

Em suma, segundo TULLIS (1997), o mais importante para se lembrar a respeito da
diagramação e seqüenciamento de elementos na tela é que o usuário deve ser capaz de
desenvolver expectativas muito claras a respeito da categoria de informações que vai aparecer
em determinada área. Essas expectativas podem emergir da adoção de um layout padrão, ou
podem ser devidas à estrutura inerente da informação que está sendo apresentada.

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

Se a adoção de um padrão de layout e o apropriado seqüenciamento dos elementos pode
tornar mais fácil que o usuário encontre a informação desejada, as relações espaciais entre
esses elementos são igualmente importantes. Relações espaciais como o alinhamento; podem
tornar mais fácil a localização de um elemento em particular, em outras relações espaciais,
como a indentação, significados especiais podem ser transmitidos para o leitor.

Quase todas as diretrizes especificam que uma série de elementos informacionais relacionados
devem ser apresentados verticalmente, dentro de uma lista em vez de horizontalmente, como
texto corrido.

A maior parte das diretrizes (guidelines) sugerem que a técnica de alinhamento usada em
listas verticais deve diferir dependendo do tipo de dados listados. Especificamente, listas
verticais de textos e caracteres alfanuméricos devem ser alinhadas à esquerda, e listas
verticais de dados numéricos devem ser alinhados a direita, ou alinhados por seus pontos
decimais. O alinhamento à esquerda de textos e caracteres alfanuméricos torna mais fácil a
localização de cada item. Alinhar os dados numéricos em seus pontos decimais torna mais
fácil a comparação entre seus valores.

Além do uso de alinhamentos de textos na tela de um computador, outras formas de relações
espaciais devem ser consideradas:

220

- indentação – relações de subordinação ou de hierarquia entre dados podem ser mostrados
eficazmente através do emprego da indentação.

- relações de titulação – com poucas exceções, todos os itens de informação em uma tela
deverão ser titulados. Existem duas técnicas para a titulação: à esquerda do dado, ou
acima do dado. Diretrizes recomendam que os títulos dispostos verticalmente sejam
alinhados à esquerda, quando seus respectivos dados são alinhados a seu lado - mas essa
abordagem pode resultar em muito espaço entre os títulos e os dados associados, caso
sejam de comprimento variável. Por isso, outras soluções para o problema podem ser
adotadas, visando a otimização da programação visual.

- associações – displays gerados por computador têm se tornado cada vez mais comuns em
situações que envolvem a representação e o controle do status de algum processo que
ocorre no mundo real. Exemplos: redes de telefonia, plantas de usinas nucleares, o metrô.
Esses displays comumente empregam gráficos para representar elementos reais do
processo. As relações espaciais entre os gráficos devem permitir ao usuário visualizar as
relações de funcionamento entre os elementos do processo no mundo real.

- simetria – várias diretrizes (guidelines) propuseram que as relações espaciais entre
elementos de uma tela de computador deveriam permitir a simetria. Por exemplo,
GALITZ, apud TULLIS (1997) propôs que a simetria deveria ser alcançada através da
centralização do layout em um eixo central, mantendo uma igual distância em cada um
dos lados. Além disso, outros pesquisadores propuseram uma medida de balanço, como
técnica para determinar as propriedades do Design de telas. Essa medida fora computada
como a diferença entre o centro da massa dos elementos mostrados e o centro físico da
tela de computador. Entretanto, não existem evidências de que essa medida poderia
auxiliar na previsão das características de usabilidade do display.

O principal ponto sobre relações espaciais é que uma vez que o usuário identificou as
localizações de alguns elementos da tela, ele deve ser capaz de utilizar essas informações para
encontrar outros elementos. Esse tipo de previsibilidade visual pode ser atingida através do
alinhamento dos elementos com os outros, ou através da adoção de outras relações espaciais,

221

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

5.6.6 – Utilização de elementos textuais:

A grande maioria das telas geradas por computador, mesmo as que possuem gráficos, incluem
algum tipo de texto. Várias diretrizes se propõem a guiar a apresentação de textos, sendo que
poucos são os estudos empíricos que abordam os diferentes aspectos da apresentação dos
textos.

As principais questões relacionadas com as apresentações dos textos nas telas são: utilização
de caixa alta ou caixa baixa, espaçamento entre palavras, espaçamento entre linhas,
espaçamento entre parágrafos, comprimento das linhas, tipos e tamanhos de fontes de letras,
fontes monoespaçadas e fontes espaçadas proporcionalmente, hifenação, além do contraste
entre figura e fundo e cores.

Idealmente, segundo TULLIS (1997), o texto no Design de telas deve ser apresentado em
forma mista de letras maiúsculas (caixa alta) e minúsculas (caixa baixa), utilizando
espaçamento proporcional entre letras e palavras; as letras devem ser fontes sem serifa (com o
tipo Arial), de oito a dez pontos, com alto contraste de cores, de preferência caracteres pretos
com fundos brancos. Linhas de texto corrido devem ter entre 26 e 78 caracteres de
comprimento na tela do computador. O espaço entre as linhas (entrelinha) deve ter altura no
mínimo igual à das letras (altura do tipo em caixa alta).

No caso específico do uso de tipografia para as interfaces da World Wide Web, veremos que
uma série de limitações é imposta pela linguagem padrão HTML ao projeto das páginas dos
sites. Por isso, mais detalhes e explicações sobre o emprego da tipologia nos sites da Internet
serão apresentados adiante, como um tópico específico deste capítulo.

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

Não há dúvida que, em algumas situações, uma imagem representa mil palavras. Mas quais
seriam essas situações? Quando gráficos podem ser usados para comunicar informações mais
adequadamente? Uma lista não exaustiva para identificar usos mais comuns de gráficos, nas
interfaces, incluiria:

222

- representação de imagens do mundo real ou imaginário;
- representação de sistemas complexos do mundo real;
- representação de dados numéricos multidimensionais; e
- representação de objetos e ações de manipulação direta (ícones).

Os gráficos estão sendo cada vez mais empregados como importante parte das interfaces dos
sistemas computacionais; uma grande variedade de técnicas existe para apresentação de
informações graficamente. Cada vez mais essas técnicas tem se tornado acessíveis sobre o
ponto de vista econômico: em certas situações, a informação só pode ser razoavelmente
apresentada com utilização de gráficos, e há muitas outras situações em que os gráficos são
mais eficazes do que os caracteres alfanuméricos. Apesar disso, pesquisas adicionais ainda
são necessárias para definir os tipos de displays gráficos mais apropriados, considerando-se as
várias categorias de tarefas e de dados.

5.7 – Desenho de metáforas para interfaces

Interfaces bem sucedidas fariam ainda uso de metáforas parcialmente genéricas e
parcialmente únicas – que definem conceitos fundamentais através de palavras e de imagens
assim como de sons e de interações. Ao administrar expectativas dos usuários, no que diz
respeito às estruturas conhecidas, processos e surpresas diante de novidades, o designer
atingiria formas instigantes, que permitem às pessoas serem mais produtivas.

As metáforas aparecem de modo proeminente nas interfaces com os usuários. Elas seriam
constituídas por telas contendo conteúdos informacionais, estéticos e persuasivos, além de
meios de interação, numa mistura de formas e de funções. Para usuários específicos -
definidos pela demografia, experiência, educação e papéis desempenhados - e suas tarefas, as
interfaces apresentariam metáforas, modelos mentais, navegação, aparência e interatividade.

Cada um desses cinco componentes poderia ser definido da seguinte forma, segundo
MARCUS (1997):

223

1 – Metáforas - seriam determinadas visualmente, através de palavras e imagens, ou através
de meios táteis ou acústicos.

2 – Modelos mentais – significariam a organização das informações, as funções, as tarefas, os
papéis e as pessoas que participam de grupos de trabalho ou de entretenimento.

3 – Navegação – seria o movimento através de modelos mentais, propiciado por janelas,
menus, caixas de diálogo, painéis de controle etc.

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

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

Antigamente, estudantes de universidades aprendiam a utilizar metáforas, na comunicação,
através do estudo da retórica. A retórica seria, segundo MARCUS (1997), um componente da
semântica – esta, uma das três dimensões da semiótica, a ciência dos signos. O termo
“metáfora” significaria a técnica de substituir um signo por outro, de modo a tornar a
comunicação eficaz. Todos nós usaríamos metáforas na linguagem cotidiana.

Em geral, as metáforas auxiliam a comunicação das seguintes formas: (1) representam
pessoas, objetos, estruturas e processos: por exemplo, jogar um arquivo numa lata de lixo,
passou a ser sinônimo de apagá-lo do disco rígido; (2) descrevem estrutura ou processo -
numa interface gráfica, uma lista de pastas se refere a uma estrutura hierárquica; (3) explicam
causas e efeitos em um processo ou estrutura. Por exemplo, a barra de progresso mostra o
tempo de download de um arquivo; (4) expressam conceitos e valores - numa interface
gráfica com o usuário, a seta de reciclagem pode sugerir re-uso ou ecologia.

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

- Estruturais - substituem partes de um sistema por outro: uma estrutura em outline serviria
para representar uma estrutura de arquivos hierárquicos.

- Operacionais – substituem o comportamento de um sistema por outro: como clicar e
arrastar um arquivo para a lixeira do computador.

224

- Pragmáticas – possibilitam que o usuário compreenda melhor: no desktop, objetos
concretos substituem componentes abstratos dos sistemas operacionais.

Utilizadas corretamente, metáforas trariam inúmeras vantagens à eficácia da comunicação.
Utilizar conceitos familares aos usuários reverte-se em menor tempo de treinamento, porque
eles podem intuir atributos primários de estruturas ou de processamentos. Nesses casos,
conhecimentos de um dado domínio tornam-se transferíveis para outro domínio. Conceitos
familiares em um ambiente não-conhecido podem adicionar apelo às interfaces; reconhecer as
referências reduz a tensão, o estresse, a confusão, a ansiedade e a alienação, ao mesmo tempo
em que aumenta a segurança, a calma, o interesse e o engajamento.

As metáforas podem desenvolver a facilidade de aprendizado, a memorização e o uso.
Monumentos conceituais simples, claros e consistentes, na paisagem cognitiva, permitem que
os usuários possam focalizar e reter um número limitado de atributos primários de um sistema
complexo. Metáforas selecionadas, visando a uma determinada comunidade de usuários,
podem tornar a comunicação de produtos mais eficaz e, além disso, espelhar as preferências
estéticas, a auto-imagem e as associações culturais dessas comunidades. Por isso, desenhar
metáforas seria uma poderosa ferramenta de comunicação que desenvolve o interesse nos
produtos tecnológicos, ao facilitar a compreensão de conteúdos complexos e promover uma
atitude positiva.

Técnicas de comunicação verbal serviram à literatura durante milhares de anos e também
foram aplicadas à comunicação visual. Hoje, quando computadores se tornaram intensas
experiências multimídia - empregando ícones, fotografias, vídeo e som -, o Design de
metáforas se tornou um importante desafio para a inovação tecnológica.

5.8 - Desenhando menus

PAAP e COOKE (1997) analisaram a usabilidade de interfaces baseadas em menus. Para
esses pesquisadores, uma definição precisa, completa e universalmente aceita dos menus seria
necessária para a discussão teórica pesquisa aplicada ao Design. Para seus propósitos
específicos, utilizaram a seguinte definição: “um menu é definido como uma gama de opções,
mostradas na tela, onde a seleção e a execução de uma ou mais opções resulta na mudança no
estado da interface”.

225

Menus consistem, normalmente, numa lista de opções, que podem ser expressas por palavras
ou ícones. A palavra (ou ícone) não é um símbolo arbitrário: fornece informações sobre as
conseqüências da seleção da opção. Certas vezes, as opções são acompanhadas de descritores
verbais, sendo que a gama total de opções é distribuída através de diferentes painéis. Isso
permite que o sistema mostre ao usuário as opções úteis e que esconda as demais. Entretanto,
colocar opções em vários painéis de menu requer que o usuário seja capaz de navegar entre
painéis, com o objetivo de encontrar opções que não estão disponíveis no painel corrente.

A utilização de menus dever ser estudada considerando-se duas grandes classes de softwares.
Uma tem o propósito de gerar um produto; por exemplo, um documento realizado em um
editor de textos. Estas aplicações tendem a ser altamente interativas - selecionar opções do
menu gera meios de criar os produtos. Em contrapartida, outra classe tem o propósito
primordial de resgatar informações, como os hipertextos da Web.

Considerando-se a gama de opções apresentadas num painel de menu, dois importantes
fatores devem ser determinados: a descrição verbal de cada opção e o seqüenciamento ou
agrupamento das opções. O melhor Design depende do tipo de busca e de operações de
comparação que ocorrerão na medida em que o usuário considera conteúdos do painel de
menus. Essas operações podem ser de identidade, equivalência ou de inclusão numa classe. A
raiz de um sistema de menus geralmente consiste em numa gama de opções que especifica
categorias abrangentes e abstratas, sendo que os usuários devem realizar julgamentos de
inclusão em classes, para acessar diferentes objetivos situados nos níveis mais baixos da
hierarquia. Por exemplo, uma "margarida" é uma instância da categoria "flores"? Uma
pesquisa considerando as tarefas e o modelo mental do usuário pode ajudar na definição
dessas categorias e subcategorias.

A maioria dos erros ocorridos em sistemas acionados por menus acontece porque o
significado das opções não é clara para o usuário. Um método de aumentar a clareza do
sistema de menus é adicionar um elemento descritivo adicional para cada palavra ou
expressão do menu. Um estudo realizado por SNOWBERRY, PARKINSON, e SISSON
(1985), apud PAAP e COOKE (1997) mostra que o número de erros pode ser
significativamente reduzido, ao se apresentar opções do nível superior da hierarquia.

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

226

aleatórios, alfabéticos e categorias. A organização aleatória não deve ser considerada como
opção de Design, mas serviu para que os pesquisadores para estabelecessem uma linha básica
de mensuração dos benefícios dos outros dois tipos de organização. Certos menus podem
apresentar uma gama de opções em ordem convencional, que não é nem alfabética, nem de
categorias. Por exemplo, as opções podem ter ordenação com padrão temporal, como dias da
semana ou meses do ano. Outras opções podem estar associadas a dimensões de magnitude,
como ‘pequena, média ou grande’. Uma organização eficaz é listar as opções dos menus em
sua ordem de freqüência de utilização. Mais diretrizes para a organização de menus (segundo
objetivos dos usuários) estão identificadas no diagrama que se segue.

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

227

A figura apresentada ilustra diretrizes para se escolher entre as organizações alfabéticas, por
categorias, convencional ou por freqüência de uso. A parte superior da figura pressupõe que a
maior parte dos usuários tem um objetivo específico em mente, que provavelmente se
adequará a uma das opções. Nessas circunstâncias, usuários poderão obter as vantagens da
ordenação alfabética. Designeres raramente poderão pressupor que os usuários são capazes de
antecipar o título da opção desejada; sendo que, a próxima questão a ser respondida pelo
designer de interface é se a lista de opções é longa ou curta. Opções ordenadas
convencionalmente formarão provavelmente, uma lista curta. Note-se que ordenações
convencionais induzem expectativas de que as opções estejam dispostas de modo familiar.
Em tais circunstâncias, não se deve abandonar a ordem convencional, substituindo-a pela
alfabética.

Se a lista for longa, será provavelmente melhor adotar a ordenação alfabética de opções, a
menos que a oportunidade de utilizar as informações separadas em categorias seja óbvia. Se
as opções puderem ser arranjadas em categorias, distintas (que têm poucas sobreposições
conceituais) e bem conhecidas dos usuários finais, deve-se agrupá-las desta forma.

A parte inferior da figura apresenta diretrizes para aplicativos onde usuários têm metas pouco
definidas em mente. Se não faz sentido dividir uma lista pequena em categorias, a opção
estará limitada às ordenações convencional ou alfabética. Uma exceção será quando a lista
pequena estiver composta por expressões ou frases difíceis de serem colocadas em ordem
alfabética, ou seja, quando a palavra inicial da expressão for arbitrária ou for pouco
importante. Nesses casos, a ordenação semântica ou baseada em freqüências será melhor.

Para listas longas, agrupar os itens de menu por categorias será, provavelmente, a melhor
estratégia. Uma exceção aqui seria quando uma pequena sublista de opções é selecionada
mais freqüentemente do que as outras. Nesse caso, listar as opções em ordem decrescente de
freqüência permitirá melhor arranjo, particularmente se as categorias não puderem ser
separadas ou se os usuários não estiverem familiarizados com cada categoria (figura 5.1).

O título ou expressão utilizada para designar cada opção do menu deve ter precisão. Deve
permitir ao usuário inferir com precisão ações ou objetos controlados por sua seleção. Isso é
mais fácil de ser dito do que de ser feito. Sabemos que agregar elementos descritivos, como
uma lista de exemplos ou de opções do nível abaixo na hierarquia poderá auxiliar, embora

228

fatores que determinam a magnitude dos benefícios ainda não sejam compreendidos. Para
grandes interfaces testar os títulos de cada painel de menu junto a uma amostra dos usuários
finais pode ser dispendioso, mas seria a única técnica garantida para remover os problemas da
interface.

Existem várias tecnologias para selecionar itens de menus. Algumas, como listas pull-down
casadas com seleção pelo cursor do mouse são mais comuns que outras. Técnicas menos
convencionais como menus de áudio estarão limitadas a tecnologias muito específicas. Todas
as técnicas de seleção de menus envolvem listas de itens que podem ser apresentadas em uma
variedade de formatos visuais ou auditivos: por exemplo, pull-down, pop-up, ou pie (torta).

O menu pull-down descortina para baixo (ao clicar do mouse) a sua lista de sub-opções (como
no menu ‘Arquivo’ do Word). O menu pop-up é uma janela extra que aparece sobre a tela,
apresentando mais opções durante a interação. O menu pie (torta) apresenta um formato
circular. Todas as técnicas envolvem a identificação de um item do menu, utilizando-se um
mecanismo como o ponteiro do mouse, o ato de teclar uma letra ou entrar com um dígito
identificador.

PAAP e COOKE (1997) estudaram também tipos de layouts de menus. Freqüentemente,
menus contêm listas discretas de itens, organizados horizontalmente ou verticalmente. Em
alguns casos, entretanto, as opções não são apresentadas como lista, mas em forma de prosa -
causando dificuldades de leitura (ou de escaneamento). Um exemplo de menus baseados em
prosa pode ser "hot link" encontrado nos documentos hipertextuais. O hot link é uma porção
enfatizada da prosa, que pode ser selecionada para mais informações. Neste caso, os itens do
menu não são explícitos, mas situam-se no meio de blocos de texto. Esses menus de texto
necessitam de discriminação entre texto selecionável e não – selecionável. Além disso,
adicionam dificuldades potenciais à sua seleção.

Considerando que é melhor que os itens sejam ser apresentados em lista explícita, há várias
possibilidades de layouts a serem exploradas. Listas horizontais são freqüentemente
encontradas no topo da tela. Na maior parte dos casos, entretanto, os itens de um menu são
arranjados verticalmente e, se não forem fixos, podem ser abertos ou fechados através do
sistema pull-down e pop-up. Os menus pull-down são selecionados e apresentados na mesma
localização, cada vez que são abertos; os menus pop-up aparecem na posição corrente do

229

cursor.

Formas não convencionais de layout de menus foram propostas por NORMAN (1991), apud
PAAP e COOKE (1997), embora existam poucas pesquisas empíricas sobre o tema. Os
layouts não convencionais incluem o matricial (por exemplo: selecionar elementos de uma
tabela periódica) e o layout gráfico (por exemplo: selecionar localizações num mapa.). O
autor sugere que certas características dos itens de menus tendem a esse tipo de representação
não linear e espacial, sendo que se poderia capitalizar essas formas visuais para facilitar o
reconhecimento. Ao se tirar partido da capacidade de memória visual do ser humano, obter-
se-ia interfaces mais eficazes.

Deve ser enfatizado que a formatação de uma lista de opções de menu envolve mais do que
decidir o layout geométrico dos itens. Particularmente, a escolha dos tamanhos,
espaçamentos, agrupamentos, tamanhos de fontes, estilos e cores deve ser considerada. Esses
temas são os mesmos considerados no projeto geral de telas de interfaces. Aspectos desses
temas (cores, fontes) aparecem comentados em tópicos mais específicos, neste capítulo.

Embora sistemas lineares explícitos, como o pull-down e pop-up, sejam comuns, outros
formatos de listas de opções são possíveis e podem ser desejáveis, dependendo dos itens
específicos, da tarefa, ou da tecnologia. Menus em formato de torta são adequados para listas
pequenas, facilmente representadas em formato cíclico, e funcionam bem para tecnologias de
seleção baseadas em canetas, com o adequado espaço de tela. Técnicas de marcação podem
oferecer alternativas promissoras às tradicionais interfaces point-and-click (do tipo apontar
com o cursor do mouse e clicar), quando usadas em combinação com menus em torta e
interfaces baseadas em canetas. Se os itens tenderem às representações gráficas, as
alternativas matriciais ou layouts visuais devem ser também considerados. Na medida em que
outros mecanismos de seleção se desenvolvem, o mouse tende a ser favorecido para as
interfaces dos menus tradicionais. Entretanto, também existe suporte a outras tecnologias,
como entrada de caracteres identificadores ou telas sensíveis ao toque.

Os autores estudados desenvolveram bastante a questão da “profundidade versus
horizontalidade”, numa estrutura de menu hierárquica. A maior parte dos sistemas de menus
estão organizados dentro de uma árvore hierárquica, em que cada nó (painel) da hierarquia
pode ser acessado somente por um único nó superior, que se encontra diretamente acima. A

230

profundidade (d - do inglês depth) é aqui definida como o número de níveis de uma
hierarquia. A horizontalidade (b - do inglês breadth) é aqui definida como o número de
opções do painel do menu. Quando existe um número igual de opções, em cada painel, o
número de nós (N) na terminação pode ser representado por uma função da horizontalidade
elevada à potência da profundidade, da seguinte forma:

N=bd

Por exemplo, 64 nós terminais de um menu podem ser acessados utilizando três níveis de
hierarquia, com quatro opções em cada painel:

64 = 43

Ou, alternativamente, os 64 nós podem ser arranjados em seis níveis, com somente duas
opções por cada painel:

64 = 26

Fatores humanos que favorecem a maior horizontalidade da hierarquia dos menus. A estrutura
hierárquica com vários níveis requer que o usuário se lembre onde está ou descubra como
navegar de onde está para o local que procura. O problema de navegação fica cada vez pior
na medida em que a profundidade da hierarquia aumenta. SNOWBERRY, PARKINSON e
SISSON (1983), apud PAAP e COOKE (1997) mostraram que as taxas de erros elevam-se de
4% para 34%, quando a profundidade da hierarquia dos menus cresce de um nível para seis
níveis.

Também segundo MAYHEW (1992), uma das diretrizes para o melhor Design dos menus
seria minimizar a profundidade das hierarquias, aumentando sua horizontalidade. Geralmente,
dois fatores afetariam a decisão sobre a profundidade versus horizontalidade da hierarquia dos
menus: o tempo de decisão do usuário e o tempo de execução. Em geral, quando o tempo de
decisão do usuário é longo, menos horizontalidade é desejável. Mas, quando o tempo de
execução é grande, uma maior horizontalidade seria desejável.

231

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

MILLER (1981), apud PAAP e COOKE (1997) foi o primeiro a investigar diretamente a
questão da profundidade em relação à horizontalidade, através da manipulação dos itens de
procura de uma base de 64 itens de menu. Sua experiência variou a organização da árvore
hierárquica, visando a experimentação. O autor concluiu que, dentro de certos parâmetros
preestabelecidos, dois níveis hierárquicos com oito opções por menu seria a melhor
organização.

A pesquisa e as aplicações analisadas por PAAP e COOKE (1997) sugerem que, quando a
organização categorial dos itens de menu é desejada, embora não óbvia, deve-se considerar a
geração de menus pelos próprios usuários. Essa organização seria baseada em informações
coletadas dos usuários finais. Devem ser coletados dados de uma amostra representativa dos
usuários finais, a partir de um modelo consensual, não pessoal. As categorias dos menus
devem ser derivadas dos modelos dos usuários.

Os fatores relacionados à hierarquia dos menus (horizontalidade e verticalidade) são
influenciados também por outras variáveis. Tempos de decisão são maiores quando (1) os
usuários são inexperientes, (2) os itens da escolha são complexos e (3) quando os itens da
escolha tendem a uma abordagem por categorias. Os tempos de execução são maiores quando

232

os tempos de resposta do sistema são longos, ou quando os mecanismos de seleção do sistema
demoram (por exemplo: uso do teclado versus mouse).

A tabela a seguir mostra mais aspectos relativos à horizontalidade da hierarquia dos menus,
segundo MAYHEW (1992).

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

Itens de escolha são complexos e/ou 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

233

horizontalidade for variável, nos diferentes níveis, deve-se ter em mente que uma maior
abertura nos níveis profundos pode facilitar a procura para usuários inexperientes, embora
esta consideração não deva se impor à categorização natural.

Existe uma condição na qual a profundidade pode se tornar preferível à horizontalidade: é
quando alguns grupos de usuários estão utilizando somente um subsetor da funcionalidade
total. Permitir aos usuários que naveguem através de um caminho para baixo, em direção à
desejada funcionalidade, significa que eles não terão que passar por opções de nível profundo
que não utilizam nunca. Esse processo é chamado de isolamento ou delimitação (insulation) e
existem evidências de que pode ser vantajoso, sob certas circunstâncias (PAAP e ROSKE-
HOFSTRAND, 1988, apud MAYHEW, 1992).

De acordo com PAAP e COOKE (1997), as razões existentes para considerar um sistema de
menus com maior profundidade hierárquica seriam três: super-povoamento (crowding),
isolamento (insulation) e afunilamento (funneling).

Super-povoamento diz respeito às limitações impostas pelo espaço disponível na tela ou
painel. Quando o espaço disponível é excedido, alguma profundidade deve ser introduzida.
Superpovoar com opções uma tela não deve ser tolerado, se isto requer nomes ou elementos
descritivos muito curtos para serem precisos. O isolamento (insulation) se refere à
oportunidade para os sistemas de menus apresentarem as seleções que serão provavelmente
necessárias, enquanto escondem as opções que são menos usadas. A oportunidade do
isolamento pode ser maior quando cada população de usuários aprende uma pequena parte de
um sistema complexo, enquanto o restante não aparece. O afunilamento (funneling) está
relacionado ao isolamento, mas enfatiza ganhos de eficiência que podem ser alcançados
mesmo quando os usuários são responsáveis pela utilização do sistema inteiro. O
afunilamento se refere a uma redução do número total de opções processadas, que é atingido
ao se desenhar um sistema com mais profundidade e menos abertura. Quando uma maior
profundidade é escolhida, em detrimento da abertura, o afunilamento gera ganhos de
eficiência, particularmente quando o tempo de processamento por opção é longo. O tempo de
processamento inclui o tempo que o usuário leva para decodificar a opção, comparar a
representação codificada com o objetivo e decidir se vai terminar a busca ou continuar a
examinar outras opções. O tempo de processamento será mais longo quando o usuário se
engaja em uma busca semântica dificultada, que envolve elementos descritivos pouco claros.

234

Mas os benefícios do afunilamento não podem ser obtidos sem custos. Na medida que
aumenta a profundidade da hierarquia de opções, cresce o número de transações. Uma
transação é iniciada pelo usuário quando uma seleção é feita na tela. Cada painel
adicional requer mais uma resposta (pressão de uma tecla, seleção com o mouse) do ser
humano e mais uma resposta do computador (display). Cada transação adiciona tempos
de resposta para cada componente ao tempo total. Considerando-se um banco de 64 itens
de escolha, a organização com profundidade máxima teria tempo de execução e resposta
seis vezes maior, quando comparado com o caso de um painel simples.

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

De acordo com MAYHEW (1992), as diretrizes (guidelines) para o adequado Design de
menus, podem ser agrupadas nos cinco diferentes tipos, a seguir: (1) estrutura; (2) ordem;
(3) seleção; (4) invocação e (5) navegação.

Com relação à estrutura do menu, a autora descreve as seguintes diretrizes:
- Adequar a estrutura do menu à estrutura da tarefa
– Minimizar a profundidade da hierarquia, aumentando sua abertura (horizontalidade)
– Em menus de tela cheia, apresentar listas verticalmente
– Utilizar formato de torta para listas de poucos itens, que tendem ao formato circular. Por
exemplo: norte, leste, sul e oeste.
– Desabilitar itens do menu, dependendo da experiência do usuário
– Criar categorias semânticas com significados claros e mutuamente exclusivos
– Titular opções dos menus de modo curto e consistente no estilo gramatical, e compatível
com as correspondentes categorias.
– Considerar elementos descritivos adicionais às opções do menu, caso os títulos sejam
ambíguos.

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

- ordenar de acordo com convenção, a freqüência de uso, ordem de uso, categorias ou
ordem alfabética, dependendo do usuário e das tarefas.

235

Quanto à seleção das escolhas do menu:

- Nos sistemas de menus direcionados ao teclado, a seleção pelo cursor é aceitável para os
menus curtos, especialmente se a freqüência de uso for casual. Para menus longos, ou para
usuários freqüentes, códigos de seleção são preferíveis. Nas interfaces direcionadas ao mouse,
apresentar uma seleção direcionada ao cursor do mouse é mais recomendado.

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

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

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

Quanto à invocação dos menus:

- reservar menus pop-up, ou invocados pelo usuário, para usuários de alta freqüência. Os
menus permanentes na tela são preferíveis.

Quanto à navegação do menu:

- estabelecer convenções para o desenho dos menus e aplicá-las, consistentemente, em
todas as telas do sistema.

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

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

- facilitar sempre a retronavegação.

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

De acordo com LYNCH e HORTON (1999), os usuários procurariam clareza, ordem e
credibilidade nas fontes de informação, sejam documentos em papel, sejam páginas da Web.
Um Design eficiente pode prover essa credibilidade: a organização espacial de gráficos e de

236

textos da Web pode motivar leitores com seu impacto gráfico, captar atenção, priorizar
informações e tornar as interações com o site agradáveis e eficazes.

O Design gráfico cria a lógica visual e persegue o balanceamento entre a informação e a
sensação visual. Sem o impacto da forma, da cor, e do contraste, as páginas se tornam
monótonas e não motivam o usuário. Documentos de textos muito densos, e sem contraste ou
relevo visual, são difíceis de ler - particularmente nas telas de baixa resolução de
computadores. Entretanto, sem o aprofundamento e a complexidade do texto, páginas
excessivamente gráficas arriscam- se a desapontar o usuário, oferecendo pobre equilíbrio
entre sensação visual, informação textual e interatividade hipermídia. Ao se perseguir o
equilíbrio, restrições primárias ao Design são criadas pela linguagem HTML, e pelas
limitações da largura de banda do acesso via modem do usuário.

A continuidade funcional e visual da organização do Web site, o Design gráfico e a tipografia
seriam aspectos essenciais para convencer a audiência de que o site oferece informações
precisas e relevantes. A abordagem sistemática e cuidadosa quanto ao Design de telas pode
simplificar a navegação, reduzir erros cometidos pelos usuários, e tornar mais fácil aos
leitores utilizar informações e serviços oferecidos.

A primeira tarefa do desenho gráfico seria, segundo LYNCH e HORTON (1999), criar uma
consistente hierarquia visual, onde elementos importantes são enfatizados, e o conteúdo é
organizado de modo lógico e previsível. O Design é uma forma de gerenciamento da
informação, utilizando as ferramentas do layout, da tipografia e da ilustração, para direcionar
os olhos do leitor através da página. Os leitores, primeiro, enxergam as páginas como grandes
massas de forma e de cor; como figuras em contraste com o fundo. Secundariamente,
começam a delinear informações específicas, primeiro dos gráficos, e depois começam a
escanear o texto para então ler palavras individuais e frases, num próximo estágio.

O contraste seria essencial. O equilíbrio gráfico e a organização da página seriam cruciais
para levar o leitor até o conteúdo, dizem os autores. Uma página monótona com texto puro
repele os olhos, como uma massa cinza sem diferenciações - sem pistas para a estrutura da
informação. Deve-se conseguir o equilíbrio entre atrair os olhos através do contraste visual e
prover o senso da organização. O Design eficaz para audiências da Internet utiliza o equilíbrio
cuidadoso de textos e links, com gráficos pequenos. Ao criar um projeto para Web, deve-se

237

considerar o propósito geral, a natureza do conteúdo, e, o mais importante, as expectativas dos
usuários do site.

A consistência também seria fundamental. Seria preciso estabelecer uma grade de layout e
estilos para gerenciar textos e gráficos e então aplicá-los consistentemente em de todas as
páginas do site, para construir ritmo e unidade. A repetição do diagrama não é entendiante:
empresta ao site identidade gráfica, que cria e enfatiza a sensação de “lugar” distinto e
memorável. Abordagem consistente do layout e da navegação permite aos leitores se adaptar
rapidamente ao Design e predizer, com confiança, a localização das informações e dos
controles de navegação.

Embora nenhum diagrama ou sistema de diagramação seja apropriado para todas as páginas
da Web, o primeiro passo seria estabelecer um layout básico. Com essa “coluna vertebral”
pode-se determinar como os principais blocos de textos e de ilustrações aparecerão em todas
as páginas e como será a colocação de títulos, subtítulos, links de navegação e botões. O
objetivo é estabelecer um layout lógico para as telas, de modo que se possa adicionar textos e
gráficos, sem ter que parar para repensar a abordagem básica página por página. Sem a
diagramação básica, o projeto será direcionado à problemas casuísticos e o desenho global do
Web site se parecerá com uma colcha de retalhos - gerando confusão ao usuário.

Quanto ao estabelecimento das dimensões da página, observe-se que, embora páginas da Web
e documentos impressos conjuguem similariedades editoriais, as telas de computador se
tornam o principal meio de distribuição da informação baseada em Internet. Há que se
considerar que a tela é muito diferente da página impressa.

A área segura para gráficos e páginas da Web segundo LYNCH e HORTON (1999), pode ser
determinada por dois fatores: a resolução mínima da tela comum (640 x 480 pixels) e a
largura do papel utilizado para se imprimir páginas da Web. A maior parte dos monitores de
computador utilizados hoje, na academia e nos negócios, são de 14 ou de 15 polegadas -
geralmente pré-configurados para o display de 640 x 480 pixels. Páginas com gráficos que
excedam a largura desses monitores parecerão amadorísticos e causarão inconveniências a
muitos leitores, forçando-os a utilizar elevadores da janela do browser (horizontal e vertical)
para ver toda a imagem. Se fazer o “scrolling” em uma direção já ruim; fazê-lo nas duas seria
intolerável.

238

Até nos monitores menores é possível apresentar gráficos que são muito grandes para ser
impressos, de modo apropriado, nas larguras dos papéis comuns, como A4, Legal e Carta. A
área de segurança do gráfico, levando em consideração os layouts para página da Web e para
páginas impressas, utilizados na largura máxima de um monitor com tela de 640 x 480 pixels,
foi mostrada na figura a seguir. As dimensões dessas áreas de segurança foram determinadas
levando-se em consideração os navegadores Netscape e Internet Explorer, nos ambientes
Windows e Macintosh. Note-se que, se fizermos a escolha de maximizar a largura da página
da Web, pode-se perder quase 2 cm do canto direito da página, na hora da impressão
(LYNCH e HORTON, 1999).

Por outro lado, determinar o comprimento de uma página requer equilíbrio entre quatro
fatores: (1) a relação entre a página da Web e o tamanho da tela, (2) o conteúdo do
documento, (3) determinar se o leitor vai navegar no conteúdo online, vai fazer o download
para futura leitura, ou se vai imprimir o documento, (4) a largura de banda disponível para a
audiência.

“Pesquisadores notaram a desorientação que resulta da movimentação vertical de telas de um
computador. O leitor perde contextualização, o que é particularmente problemático quando
elementos navegacionais básicos como títulos, identificadores e links desaparecem da tela.
Esse efeito pede a criação de home pages e de menus que contenham uma quantidade de
informação que possa ser apresentada em uma ou duas telas de 640 x 480 pixels, e que links
de navegação locais estejam posicionados no início e no fim do layout.” (LYNCH e
HORTON, 1999)

“Em certas interfaces gráficas - como o Macintosh e o Windows - o elevador se torna fixo e
não provê indicações sobre o comprimento do documento em relação às informações visíveis,
na tela do computador, de tal modo que o leitor não infere o tamanho da página. Em páginas
Web muito longas, pequenos movimentos do elevador podem alterar totalmente a visão dos
conteúdos da tela, sem deixar ao leitor marcos de familiaridade para orientá-lo.”

Para os autores, páginas Web longas têm, entretanto, algumas vantagens. São, normalmente
mais fáceis para que seus gerentes possam organizá-las e para que usuários possam executar o
download. Gerentes de sites não terão que manter tantos links, e usuários não terão que fazer
download de múltiplos arquivos, para coletar informações sobre um único tema. As páginas

239

longas são particularmente úteis ao prover informações que usuários não vão ler na tela (de
modo realista, qualquer documento maior do que duas páginas impressas). Entretanto, se a
página Web for longa demais, ou se contiver muitos gráficos, poderá prejudicar usuários com
conexões lentas. Além disso, páginas grandes com gráficos pesados podem sobrecarregar a
memória RAM (Random Access Memory) de computadores, causando o congelamento do
browser ou a apresentação e impressão inadequada das informações nele contidas.

“Faz sentido, entretanto, colocar informações relacionadas nos limites de uma única página da
Web, particularmente quando se espera que o usuário a imprima ou a salve no seu disco
rígido. No entanto, deve-se considerar que mais do que quatro telas de informação em uma só
página Web força o usuário a utilizar excessivamente o elevador, de modo a deteriorar a
versão online. Além disso, páginas longas freqüentemente falham ao tirar vantagem de
recursos de interatividade, disponíveis no meio Web” (LYNCH e HORTON, 1999).

De uma maneira geral, deve-se favorecer as páginas Web curtas para:

1 - home pages e páginas com elementos navegacionais e menus;

2 - documentos para serem navegados e lidos na tela;

3 - páginas com gráficos grandes.

Quanto aos diagramas para páginas Web, os autores observam que um dos objetivos de
utilizá-los é imprimir organização às páginas. Entretanto, as ferramentas atuais do HyperText
Markup Language (HTML) não permitiriam as facilidades de controle que os desenhistas
gráficos rotineiramente esperam de softwares de layout de páginas ou de sistemas de autoria
multimídia.

Diferenças entre o Design impresso e o Web Design

A diferença crucial entre o desenho para a Web e o desenho de páginas para impressão é que,

240

quando os leitores passam a página de um livro ou de uma revista, eles vêm não somente a
totalidade da página seguinte, como as próximas duas páginas. No desenho impresso,
portanto, a “dupla de páginas” torna-se a unidade fundamental de Design. Por isso, o desenho
impresso pode atingir uma unidade e uma densidade de informação que o desenho na Web
não conseguirá emular: não importa a largura ou a resolução do monitor, o usuário só pode
ver mesmo uma página de cada vez.

Por isso, o Web Design deve ser criado visando a cada tela de informação. A maior parte das
páginas da Web podem ser divididas, verticalmente, em zonas com diferentes funções e níveis
de complexidade. “Quando a página é progressivamente revelada pelo elevador vertical, um
novo conteúdo aparece e o conteúdo superior desaparece. Um novo contexto gráfico seria
estabelecido cada vez que o leitor move a página para cima, utilizando o elevador. O layout
da página Web deve ser julgado não somente pela visão da página como um todo, mas
dividindo-a em zonas funcionais, para cada tela de informação”, explicam LYNCH e
HORTON (1999).

Muitos autores capitulam diante dos apelos de uma home page com ênfase gráfica,
esquecendo-se que uma página da Web não significa somente uma experiência visual. Uma
imagem pesada pode instigar surfistas casuais, mas fará com que o leitor desperdiçe um
minuto inteiro para o download do topo do site. Um Design cuidadoso dará ao Web site uma
assinatura gráfica e o layout da página permitirá ao leitor perceber, imediatamente, o
propósito do documento e a sua relação com as outras páginas do site. Os gráficos utilizados
em cabeçalhos podem sinalizar os relacionamentos dentro de uma série de páginas da Web.
Ao contrário dos designeres de impressos, os criadores de sistemas Web nunca poderão ter
certeza de que outras páginas o leitor poderá ter visto, antes de se conectar à página corrente.
Mesmo que a escolha seja não utilizar imagens, a área de cabeçalho deve conter o título junto
ao seu topo. Cada página deve conter também informações básicas sobre a origem e a data de
criação, embora esses dados repetitivos e prosaicos não precisem ser colocados no topo.
Rodapés de páginas bem desenhados oferecem ao usuário uma gama de links para outras
páginas, em adição às informações essenciais sobre o site – defendem os dois autores.

Para LYNCH e HORTON (1999), desenvolver o layout de páginas da Web envolve um pouco
de “prestidigitação”. A linguagem HTML foi criada por engenheiros e por cientistas, que
nunca a imaginaram como ferramenta de layout de páginas. Seu objetivo era fornecer uma

241

maneira de descrever informação sobre um documento, e não determinar a aparência deste
documento. Uma vez que o mundo real começou a trabalhar com a Web, os designeres
iniciaram a adaptação das primitivas ferramentas HTML para produzir documentos mais
parecidos com seus equivalentes impressos, seguindo convenções que se desenvolveram
através de centenas de anos, por razões práticas e concretas, e que oferecem vantagens
funcionais sobre o layout demasiadamente simples, visualizado pelos primeiros designeres e
criadores da World Wide Web. Somente colocar um texto em uma página fará com que o
comprimento da linha de texto seja determinada pelas dimensões da janela do browser do
usuário. Quando o usuário redimensiona sua tela, o texto reflui, de modo a preencher o novo
espaço. Muito embora alguns possam considerar que este fato é uma ferramenta, isso
deteriora a experiência do usuário. Convenções tipográficas já estabelecidas direcionam
questões relativas à legibilidade, leiturabilidade e ao estilo, que devem ser gerenciadas pela
habilidade do designer de posicionar palavras, imagens e demais elementos na tela, de modo
a aderir aos padrões editoriais estabelecidos.

Segundo outro pesquisador, NIELSEN (2000), as páginas Web deveriam destacar o conteúdo
de interesse do usuário: infelizmente, muitos sites gastam mais espaço de tela com elementos
de navegação do que com informações. A navegação seria um mal necessário e não o objetivo
em si - por isso, deveria ser minimizada.

O conteúdo deveria corresponder a pelo menos metade das páginas e, de preferência, em
torno de 80%. A parte de navegação deve ficar abaixo de 20%. Na perspectiva da usabilidade
de interfaces, seria melhor eliminar a propaganda; mas, caso seja necessária, deve-se
considerá-la parte do overhead (carga) da página, junto com as opções de navegação - o que
implica na redução do peso dos menus de navegação.

O princípio geral dos projetos de interfaces seria passar por cada elemento e removê-los, um a
um. Se o projeto funcionar sem um dado elemento, deve-se retirá-lo. A simplicidade vence a
complexidade. Principalmente na Web - onde cada 3 bytes economizados significam 1
milissegundo a menos no tempo de resposta.

Na Web, seria impossível prever o tamanho do monitor do usuário, assim como a janela usada
para exibir a página. No futuro, a negociação de conteúdo detalhada entre browsers
(navegadores) e servidores resultará na disposição inteligente de páginas de acordo com as

242

características do monitor específico. Por enquanto, as previsões de um conteúdo adaptável
são esperança para o futuro e seria ainda necessário trabalhar com dispositivos de exibição
diferentes.

Desenhar para uma variedade de plataformas

Segundo NIELSEN (2000), o desenho deveria funcionar em várias plataformas. Num projeto
tradicional de interface gráfica, cada pixel da tela seria controlado: ao criar uma caixa de
diálogo, podemos estar certos de que ela aparecerá idêntica para os usuários. Conhece-se o
sistema, sabe-se quais as fontes instaladas, sabe-se qual o tamanho de tela típico e tem-se o
guia de estilo do fornecedor com regras de dispositivos de interação. Na Web, o usuário
controlaria a navegação: poderiam enveredar-se por caminhos não pretendidos pelos
designeres – podem ir direto ao centro de um site a partir de um mecanismo de busca, sem
passar pela home page. Os usuários também podem controlar seu próprio menu de
bookmarks, usando-o para criar uma interface personalizada.

Web designeres deveriam adaptar-se, aceitando a navegação controlada pelo usuário. Seria
possível forçar usuários por caminhos definidos e evitar que estabeleçam links com
determinadas páginas, mas os sites que o fazem parecem rígidos e dominadores. Seria melhor
desenhar visando a liberdade de movimentos.

Com as interfaces gráficas, tivemos o luxo de viver uma fase inicial de pesquisa e
desenvolvimento, em empresas de ponta com especialistas de interfaces. Porém, a Web estaria
evoluindo neste momento e os experimentos acontecem na Internet (e não em um laboratório
de usabilidade equipado com videoteipes) – portanto, todos nós somos cobaias, afirma
NIELSEN (2000).

Seria melhor não predeterminar fontes e aceitar a fonte padrão, pois sempre funcionará. Uma
alternativa para quando se quiser criar numa determinada fonte é listar várias alternativas para
maximizar a probabilidade de que uma delas esteja disponível na máquina do usuário.

243

Também seria um engano criar páginas excessivamente compactas: o espaço em branco
orienta e ajuda usuários a entender o agrupamento de informações. O espaço em branco seria
inevitável, na maioria dos casos, já que é impossível fazer com que as páginas sejam exibidas
num retângulo perfeito da tela, em todas as circunstâncias. Na Web, a maioria das
pressuposições para projeto de interfaces gráficas caem por terra: os usuários podem acessar a
Web através de computadores tradicionais, mas também podem usar um palmtop, um telefone
celular Nokia ou o carro como um dispositivo Internet. Precisamos conciliar atualmente um
fator de 100 na área de tela entre palmtops e estações de trabalho e um fator de 1.000 em
largura de banda, entre modems e conexões velozes.

Segundo o pesquisador, a maioria das páginas Web funcionaria bem em um monitor de 17
polegadas, com uma resolução de 1.024x768 pixels (tamanho médio). Qualquer monitor
inferior deixaria muitos layouts cortados e os usuários precisam rolar a tela para ver partes da
página (ver a tabela a seguir).

Tamanhos da tela 1997 1999

Muito pequena (640 x 480 ou 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).

244

Não há como saber o tamanho da tela dos usuários, por isso, deve-se criar para todas as
resoluções. Em outras palavras: páginas independentes de resolução que se adaptam a
qualquer tela. O princípio do Design independente de resolução seria nunca usar larguras de
pixels fixas para tabelas, quadros ou gráficos; em vez disso, especificar-se-ia layouts enquanto
percentuais do espaço disponível na tela.

A questão mais freqüente no desenho de páginas para a Web é a largura final para a qual
deve-se criar - se o objetivo é 640 pixels ou 800 pixels. Para NIELSEN (2000), não se deveria
criar para uma largura padrão; seria melhor criar layouts que funcionassem em uma série de
tamanhos de janela: os usuários têm tamanhos de monitores diferentes, com uma série de
resoluções e nem sempre usam janelas maximizadas de forma a deixar toda a tela disponível.
Usuários com telas menores não devem ter que rolar o elevador horizontalmente; a rolagem
vertical também seria desaconselhável.

Atualmente, é raro ver páginas Web muito estreitas (por exemplo, com 300 pixels de largura),
embora alguns sites usem o Design “líquido”, ou seja, sem larguras específicas. Seria melhor
criar esse tipo de página independente de resolução, que pode adaptar-se às telas. Se não for
possível, o conselho seria supor que os usuários ainda vão usar 640 pixels nos próximos
muitos anos.

As páginas Web que não são independentes de resolução não funcionam bem quando
impressas: seria melhor oferecer versões impressas separadas para documentos longos.
Páginas criadas para exibir larguras fixas ficaram horríveis quando impressas; saem como
uma lista lateral estreita, desperdiçam papel, ou são cortadas, sendo largas demais para a
impressora. O layout típico de 600 pixels de largura, que funciona na maioria dos monitores
de computador, terá 21 cm de largura, quando impresso, na resolução de 72 pixels por
polegada. Já que as impressoras precisam de 0,6 a 1,2 cm de margem, a área imprimível em
uma folha de papel carta tem entre 19 e 20 cm de largura. Ou seja, pelo menos 0,8 cm da
página Web serão cortados. Os usuários que imprimem em papel A4 perderão ainda mais.

Outro fator técnico observado na Web diz respeito às cores. Em 1997, pouco menos da
metade dos usuários restringiam-se a 256 cores e pouco mais da metade eram capazes de
exibir milhões de cores. Dois anos depois, em 1999, apenas 11% dos usuários restringiam-se a
uma paleta de 256 cores, ao passo que 89% podiam visualizar milhares de cores ou mais.

245

Portanto, talvez estejam contados os dias em que teremos que criar para um número limitado
de cores. Ao mesmo tempo, com o crescimento de dispositivos portáteis, se tornará necessária
a apresentação de gráficos em tons de cinza, explica NIELSEN (2000).

A ESTRATÉGIA DO “DESIGN LÍQUIDO”

Para FINCK (1999), haveria três tipos de enfoques de desenvolvimento para Web, com
relação ao que é apresentado no monitor do usuário: o “líquido”, o “gelo” e o “gelatinoso”. Os
tipos de sites “gelo” seriam os de dimensões fixas, congelados do lado esquerdo do monitor e
que funcionam melhor em uma determinada resolução. Não existiriam muitos sites
“gelatinosos”. Estes e os sites “gelo” seriam praticamente idênticos, talvez os primeiros um
pouco mais flexíveis: se a resolução for alterada, os sites “gelatinosos” ficarão centralizados
na tela, com a adição de tags de centralização no código HTML.

O Design “líquido” seria o símbolo do Design ideal: a página é reinterpretada de acordo com
as dimensões da tela do usuário, sejam quais forem. Este tipo de projeto envolve longa etapa
de planejamento, durante o processo. Neste caso, o projetista deverá considerar não somente
questões como layout, aplicação de textos, títulos e inconsistências nas diferentes versões de
navegadores, como também a visualização em qualquer largura ou altura de monitores de
usuários. Segundo FINCK (1999), dois aspectos deverão ser levados em consideração,
durante o projeto de Design “líquido”: será um projeto difícil, mas a dificuldade será
recompensada com o tempo. Além disso, nenhum Design pode ser perfeito caso se proponha
a ser “líquido”. “Quando se deseja a perfeição em Design, a World Wide Web não é o local
mais indicado.”

O melhor método para testar o sucesso do Design “líquido” seria vizualizá-lo em diferentes
browsers, em diferentes sistemas operacionais e em diferentes resoluções. Somente se saberá
se um projeto funciona, quando expande-se ou contrai-se a página para qualquer tela,
qualquer browser, em qualquer plataforma. O projeto que consegue atingir o nível ótimo de
flexibilidade pode ser considerado um caso bem sucedido de Design “líquido”.

246

Embora reconheçam-se vantagens no Design “líquido”, há os que percebem nele pontos
negativos. KALBACH (2001), por exemplo, observa as seguintes desvantagens: em
resoluções mais altas, as linhas de textos se tornam muito alongadas, o que dificultaria a
leitura. Além disso, esse estilo de site teria uma aparência de “ser barato, feito em HTML
puro” - o que não se coadunaria com o padrão imposto pelos atuais stakeholders do mercado.

FIGURA 5.3 – O site do Senac São Paulo seria do tipo “gelo”, na concepção de FINCK
(1999).

247

FIGURA 5.4 – As larguras do portal Senac Nacional foram definidas como porcentagens da
largura visível da tela, em HTML, o que o torna adaptável a diversas resoluções (aqui 640 x
480 pixels).

248

FIGURA 5.5 – O portal Senac aproxima-se do conceito de Design “líquido”,
embora a sua melhor visualização seja determinada como 800 x 600 pixels.

FINCK (1999) dá os seguintes exemplos de sites “gelo”: CNN.com e Adobe.com. Para o
designer, os seguintes sites seriam do tipo “gelatinoso”: The Web Standards Project, Digital
Thread e HeadSpace. Os exemplos a seguir representam os poucos e bons sites de sucesso no
conceito de Design “líquido”: Builder.com, FalkonDesign e ProjectCool.

249

FIGURA 5.6 – Segundo FINCK (1999), o Design “líquido” permite uma visualização
adaptada para qualquer resolução, como o Builder.Com (aqui, em 640 e em 1024 pixels).

Observa-se ainda que usuários têm preferências com respeito ao tamanho de fontes, que
podem ser alteradas pelo navegador; portanto, o projeto deverá funcionar bem com fontes
maiores e menores, e não com preferências pessoais do designer. Em geral, recomenda-se não

250

incluir textos em formatos de imagem, pois isso retardaria a transmissão e exigiria esforço
extra para traduzir interfaces para outros idiomas (NIELSEN, 2000).

Além disso, há que se levar em conta, também, a inércia de instalação: nos primeiros anos da
Web, usuários faziam atualizações de navegadores a uma taxa 2% por semana. Transições
entre versões acontecerão lentamente no futuro; a pressão para atualizar está ficando fraca.
Nos primeiros anos, havia vantagens em se fazer atualizações, mas hoje não parecem ter o
mesmo nível de inovações. Atualmente, a população de usuários mudou de um grupo pioneiro
de entusiastas para uma massa de consumidores. A taxa de atualização caiu para cerca de 1%
por semana em 1998 e em 1999. Por isso, o único formato que se poderia usar com total
confiança é a especificação original HTML 1.0.

Recomendar-se-ia a contanção em relação a novas tecnologias, até um ou dois anos após ter
sido introduzida em uma versão não-beta (versão de testes). Coisas que devem ser evitadas no
primeiro ano: novas versões de HTML, plug-ins (aditivos ao navegador HTML para permitir
a visualização de conteúdos gravados em formatos proprietários) e outros componentes,
novos formatos de dados e qualquer recurso específico a certos navegadores.

Haveria três razões para ser conservador nas inovações:

- Com uma velocidade de atualização de cerca de 1% por semana, demorará um ano até que
a maioria seja capaz de acessar a nova tecnologia – e dois anos antes que todos a possuam.

- Mesmo depois que uma nova tecnologia abandona o status beta e passa a oficial, terá bugs
(defeitos) que precisarão ser resolvidos, em versões subseqüentes.

- Há muito ensaio e erro na determinação das novas tecnologias para comunicação com os
usuários. Os primeiros a usarem novos recursos trazem mais prejuízos do que benefícios aos
usuários.

As principais exceções à regra de conter-se durante um ano são os consultores da Web que
desejam demonstrar sua mestria na tecnologia avançada. Entretanto, muitas pessoas têm seu
navegador instalado por um amigo ou colega “superusuário”. Há na maioria das empresas e
famílias indivíduos que apreciam a tecnologia pela tecnologia. Quando um superusuário

Design de telas: elementos e diretrizes para interfaces gráficas

Design de telas: elementos e diretrizes para interfaces gráficas

Recomendados

Recomendados

Más contenido relacionado

Similar a Design de telas: elementos e diretrizes para interfaces gráficas

Similar a Design de telas: elementos e diretrizes para interfaces gráficas (20)

Design de telas: elementos e diretrizes para interfaces gráficas