2035. Design de telas5.1 O que é Design de telas?O termo Design de telas (screen Design) se refere ao processo de determin...
204diversas fontes, entre elas:- a pesquisa básica em psicologia;- estudos em ergonomia;- experiências de usuários e desig...
205entre si de diversas maneiras, incluindo o uso de itens alfanuméricos e gráficos. Incluídosnesta categoria estão estudo...
206A manipulação da linguagem visível seria tarefa básica das interfaces. Os três princípios aseguir podem se tornar úteis...
207                                      Diretrizes Fisiológicas1. Evitar apresentar, na tela, cores altamente saturadas e...
208MARCUS (1986) tornou-se um conhecido designer de interfaces e consultor da indústria decomputadores, com background em ...
209vozes e músicas, começarem a incomodá-los ou a e a interromper seu trabalho. Deve-se saberquando utilizar informações a...
2105.4 - Como utilizar animações na interface com o usuárioOutro recurso das interfaces com o usuário é o emprego da anima...
211       Tópico da interface              Perguntas que a animação responde:1. Identificação                  1. O que é ...
2126. mais passos para gerenciar as telas da interface, do que para completar tarefas;7. ligações complexas dentro e entre...
213considerados “bons” revelaram uma carga em torno de 15%. Por outro lado, diretrizes daNASA afirmam que uma tela de comp...
214características da configuração de telas, sendo que o designer deve determinar qual aquantidade ótima de informação dev...
215-   caixas de diálogo expansíveis: com esta abordagem, a caixa de diálogo tem dois    tamanhos. Na versão menor, que é ...
216similares, de forma a que fiquem juntos na tela, aumenta a sua legibilidade e enfatiza asrelações entre os diferentes g...
217repetitivo, para todas as telas em uma aplicação, ou em uma série de aplicações similares.Esta consistência permitirá q...
218princípio deve ser aplicado com cuidado, porque diz respeito somente às telas com caracteres,não levando em consideraçã...
219-   a ordem alfabética ou cronológica – se nenhuma das regras para ordenação lógica das    informações se aplicam, outr...
220-   indentação – relações de subordinação ou de hierarquia entre dados podem ser mostrados    eficazmente através do em...
221consistentes com as relações semânticas entre os dados.5.6.6 – Utilização de elementos textuais:A grande maioria das te...
222-   representação de imagens do mundo real ou imaginário;-   representação de sistemas complexos do mundo real;-   repr...
2231 – Metáforas - seriam determinadas visualmente, através de palavras e imagens, ou atravésde meios táteis ou acústicos....
224-   Pragmáticas – possibilitam que o usuário compreenda melhor: no desktop, objetos    concretos substituem componentes...
225Menus consistem, normalmente, numa lista de opções, que podem ser expressas por palavrasou ícones. A palavra (ou ícone)...
226aleatórios, alfabéticos e categorias. A organização aleatória não deve ser considerada comoopção de Design, mas serviu ...
227A figura apresentada ilustra diretrizes para se escolher entre as organizações alfabéticas, porcategorias, convencional...
228fatores que determinam a magnitude dos benefícios ainda não sejam compreendidos. Paragrandes interfaces testar os títul...
229cursor.Formas não convencionais de layout de menus foram propostas por NORMAN (1991), apudPAAP e COOKE (1997), embora e...
230profundidade (d - do inglês depth) é aqui definida como o número de níveis de umahierarquia. A horizontalidade (b - do ...
231    FIGURA 5.2 - Profundidades na hierarquia dos menus, segundo MAYHEW (1992).MILLER (1981), apud PAAP e COOKE (1997) f...
232os tempos de resposta do sistema são longos, ou quando os mecanismos de seleção do sistemademoram (por exemplo: uso do ...
233horizontalidade for variável, nos diferentes níveis, deve-se ter em mente que uma maiorabertura nos níveis profundos po...
234Mas os benefícios do afunilamento não podem ser obtidos sem custos. Na medida queaumenta a profundidade da hierarquia d...
235Quanto à seleção das escolhas do menu:-   Nos sistemas de menus direcionados ao teclado, a seleção pelo cursor é aceitá...
236textos da Web pode motivar leitores com seu impacto gráfico, captar atenção, priorizarinformações e tornar as interaçõe...
237considerar o propósito geral, a natureza do conteúdo, e, o mais importante, as expectativas dosusuários do site.A consi...
238Até nos monitores menores é possível apresentar gráficos que são muito grandes para serimpressos, de modo apropriado, n...
239longas são particularmente úteis ao prover informações que usuários não vão ler na tela (demodo realista, qualquer docu...
240quando os leitores passam a página de um livro ou de uma revista, eles vêm não somente atotalidade da página seguinte, ...
241maneira de descrever informação sobre um documento, e não determinar a aparência destedocumento. Uma vez que o mundo re...
242características do monitor específico. Por enquanto, as previsões de um conteúdo adaptávelsão esperança para o futuro e...
243Também seria um engano criar páginas excessivamente compactas: o espaço em brancoorienta e ajuda usuários a entender o ...
244Não há como saber o tamanho da tela dos usuários, por isso, deve-se criar para todas asresoluções. Em outras palavras: ...
245Portanto, talvez estejam contados os dias em que teremos que criar para um número limitadode cores. Ao mesmo tempo, com...
246Embora reconheçam-se vantagens no Design “líquido”, há os que percebem nele pontosnegativos. KALBACH (2001), por exempl...
247FIGURA 5.4 – As larguras do portal Senac Nacional foram definidas como porcentagens dalargura visível da tela, em HTML,...
248       FIGURA 5.5 – O portal Senac aproxima-se do conceito de Design “líquido”,         embora a sua melhor visualizaçã...
249   FIGURA 5.6 – Segundo FINCK (1999), o Design “líquido” permite uma visualização  adaptada para qualquer resolução, co...
Cap05 dissertacao agner
Cap05 dissertacao agner
Cap05 dissertacao agner
Cap05 dissertacao agner
Cap05 dissertacao agner
Cap05 dissertacao agner
Cap05 dissertacao agner
Cap05 dissertacao agner
Cap05 dissertacao agner
Cap05 dissertacao agner
Cap05 dissertacao agner
Cap05 dissertacao agner
Cap05 dissertacao agner
Cap05 dissertacao agner
Cap05 dissertacao agner
Cap05 dissertacao agner
Cap05 dissertacao agner
Cap05 dissertacao agner
Cap05 dissertacao agner
Cap05 dissertacao agner
Cap05 dissertacao agner
Cap05 dissertacao agner
Cap05 dissertacao agner
Upcoming SlideShare
Loading in...5
×

Cap05 dissertacao agner

1,058

Published on

designer

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

  • Be the first to like this

No Downloads
Views
Total Views
1,058
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Cap05 dissertacao agner

  1. 1. 2035. Design de telas5.1 O que é Design de telas?O termo Design de telas (screen Design) se refere ao processo de determinação da aparênciavisual e do conteúdo de um quadro simples e do resultado final desse processo. Nos temposdos terminais remotos, as telas eram sinônimos de telas físicas: apresentar uma nova telaimplicava em repintar a tela física inteira. Com as interfaces gráficas (GUI), o Design de telasassumiu um significado diferente. Nessas aplicações, as pessoas se referem ao Design de telascomo 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 maisimportante de comunciar informações ao usuário. Uma variedade de estudos ilustraram aimportâ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 doDesign de telas acumulou-se durante os últimos 30 anos. Esse conhecimento deriva-se de
  2. 2. 204diversas 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 detelas e outras características das interfaces humano-computador. Diversas diretrizes são bemembasadas em pesquisas básicas e aplicadas, porém, muitas não.O Design da interface visual dos sistemas computadorizados recebeu mais atenção no estudoe nas diretrizes da Interação Humano-Computador (HCI), do que qualquer outro aspecto dainterface.Se a maior parte dos documentos de diretrizes (guidelines) são independentes dos sistemasoperacionais, existem duas grandes exceções: as descrições da Apple sobre a interface gráficodo Macintosh, que datam de 1992, e as descrições da interface gráfica do Windows, elaboradapela Microsoft, em 1995. Esses dois livros apresentam as regras de Design de telas adotadaspara os dois sistemas. Esses livros descrevem as convenções específicas adotadas pelasempresas citadas, enquanto que as diretrizes genéricas existentes abordam uma gama deconvenções a serem adotadas por qualquer interface.A aparente abundância de diretrizes (guidelines) que abordam o Design de telas de sistemasinformatizados pode nos levar, equivocadamente, a acreditar que existem correspondentesevidências empíricas, relacionadas ao Design de telas. Mas isso não é verdade: há poucosestudos relevantes, sendo que muitos problemas relacionados ao Design de telas precisam serpesquisados empiricamente, especialmente aqueles relacionados às interfaces gráficas com ousuário (GUI).A maior parte dos estudos abordaram exclusivamente telas alfanuméricas. O modo comum demensuração tem sido o tempo de procura da informação, isto é, o tempo de extrair um dadoespecífico ou um item de informação de uma tela. Estudos empíricos compararam aperformance em dois ou mais métodos de apresentar a mesma informação. Enquanto algunsestudos tentaram manipular variáveis sistematicamente, outros compararam telas que diferiam
  3. 3. 205entre si de diversas maneiras, incluindo o uso de itens alfanuméricos e gráficos. Incluídosnesta categoria estão estudos que comparavam uma versão existente de tela com uma versãoredesenhada. Geralmente, redesenhos envolvem grande variedade de alterações, tornandodifícil atribuir variações de performance às mudanças específicas da tela.TULLIS (1984), conduziu aprofundado estudo para investigar a variedade de formatos detelas alfanuméricas. O pesquisador utilizou um programa de computador para medir seiscaracterísticas: densidade geral, densidade local, número de grupos, tamanho médio de cadagrupo, número de itens e alinhamento dos itens. Regressões foram empregadas paradeterminar tempos de procura, assim como a facilidade subjetiva relacionada às variáveispesquisadas. Estudos abordando telas gráficas se tornaram mais difíceis, devido à sua grandecomplexidade e número de variáveis. Outros estudos enfocaram a comparação dos displaysalfanuméricos com displays gráficos, num nível global. Também foram pesquisadas quaisseriam 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 osseguintes 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 comodesenvolvimento, usabilidade e aceitação. Todos esses fatores se beneficiariam dacomunicação visual da interface. A organização conceitualmente adequada, a apresentaçãovisual consistente e o emprego da linguagem visível contribuiriam para a comunicação dainterface. O conceito de linguagem visível se refere às seguintes técnicas, usadas para acomunicação de mensagens e de conteúdos: layouts, tipografias, cores e texturas, imagens (daabstração à fotografia), animações, seqüenciamentos (roteirização), som e identidade visual(as regras para a consistência geral das interfaces).
  4. 4. 206A manipulação da linguagem visível seria tarefa básica das interfaces. Os três princípios aseguir podem se tornar úteis tanto para a prática profissional, como para a pesquisa e para odesenvolvimento – 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 doobservador: portanto, muitas cores em uma interface permitiriam que usuários prestassematenção às telas. Ajudariam a criar uma interface amigável e fácil. Entretanto, seria importanteevitar o efeito “Las Vegas”, que pode distrair os usuários de suas tarefas específicas. Coresbrilhantes atraem clientes e usuários, mas quando se senta em frente a um computador porhoras 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, nafrente 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. Essasdiretrizes continuam válidas; novos softwares e hardwares devem desenvolver a sua aplicaçãoadequada.MURCH, apud MANDEL (1997), um pesquisador respeitado no que se refere aos aspectospsicológicos e físicos da cor, afirma: “é impossível desenvolver uma gama completa dediretrizes para o uso, em todas as aplicações. Podemos, entretanto, estabelecer princípiosamplos, baseados nos mecanismos de percepção da cor pelos seres humanos”.O pesquisador apresentou vinte e cinco diretrizes divididas em três grupos: fisiológicas,perceptivas, e cognitivas (ver tabela a seguir).
  5. 5. 207 Diretrizes Fisiológicas1. 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 Perceptivas1. 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 Cognitivas1. Não abusar no emprego das cores.2. Estar consciente da manipulação não linear das cores em monitores e em cópias impressas.3. Fazer o agrupamento de elementos relacionados entre si através de uma cor de fundo comum.4. Cores similares têm a conotação de significados similares.5. Brilho e saturação atraem a atenção.6. Ligar o grau de mudanças nas cores à magnitude dos eventos da interface.7. Ordenar as cores com base em sua posição no espectro luminoso.8. Cores frias e quentes devem indicar diferentes níveis de atividade. TABELA 5.1 – “Diretrizes para o Uso de Cores em Telas de Computador” de acordo com MURCH (1984), apud MANDEL (1997).
  6. 6. 208MARCUS (1986) tornou-se um conhecido designer de interfaces e consultor da indústria decomputadores, com background em informação e Design gráfico. O pesquisador aplicou osseguintes princípios para o uso da cor: organização, economia, ênfase, interações, simbolismoe comunicação. Os seus “Dez mandamentos da cor” são estes:Dez mandamentos da cor1. 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árioA interface com o usuário pode utilizar também o emprego de áudio. Existe muita discussãosobre a eficiência do emprego de áudio como feedback, nas interfaces. Se aplicadocorretamente, torna-se não invasivo e pode ser desligado pelo usuário. Usuários rapidamenteprocuram o controle do volume dos recursos de áudio caso sons, bips e cliques, assim como
  7. 7. 209vozes e músicas, começarem a incomodá-los ou a e a interromper seu trabalho. Deve-se saberquando utilizar informações auditivas, em vez de informações visuais; deve-se determinarqual é o apropriado recurso de áudio a ser apresentado ao usuário de um sistema, em umasituação específica. O áudio precisa ser customizado pelo usuário de tal forma que o volumepossa ser abaixado ou desligado. Grande parte dos ambientes de trabalho, hoje em dia, sãoabertos, o que quer dizer que os trabalhadores não têm escritórios individuais: quando pessoastrabalham em grande proximidade com outras, juntamente com telefones e computadores, oáudio não será eficaz. Trabalhadores, nestas cirscunstâncias, freqüentemente não conseguemidentificar 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 seutrabalho. Em algumas culturas, trabalhadores envergonham- se quando cometem erros; nessescasos, a última coisa que desejam é um computador apitando, pois não querem que seuscolegas 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 ele8. A atividade do usuário requer que ele deixe permaneça em seu posto de trabalho. seu posto de trabalho continuamente. TABELA 5.3 – Diretrizes para apresentação de mensagens auditivas ou visuais, segundo DEATHERAGE (1972), apud MANDEL (1997).
  8. 8. 2105.4 - Como utilizar animações na interface com o usuárioOutro recurso das interfaces com o usuário é o emprego da animação. Animação pode serdefinida 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 consideradasentretenimento, 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. Muitasinterfaces 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çõescomplexas como os documentos multimídia. Existem entretanto poucas diretrizes disponíveispara o uso de animações nas interfaces.As diretrizes fornecidas pela Microsoft apresentam somente meia página de texto. Asmelhores descrições sobre quando e por que utilizar animações foram fornecidas porBAECKER et al. (1991), apud MANDEL (1997), que discutiram formas de auxiliar osusuá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 noprojeto de sistemas interativos, que incluem animações. As diretrizes listam o tipo deperguntas do usuário que a animação pode ajudar a responder, para nível de interação com osistema (ver a tabela a seguir).
  9. 9. 211 Tópico da interface Perguntas que a animação responde:1. Identificação 1. O que é isto?2. Transição 2. De onde vim e para onde vou?3. Orientação 3. Onde estou?4. Escolha 4. O que posso fazer agora?5. Demonstração 5. O que faço com isto?6. Explicação 6. Como faço isto?7. Feedback 7. O que está acontecendo?8. Histórico 8. O que foi que eu fiz?9. Interpretação 9. Porque isto aconteceu?10. Aconselhamento 10. O que devo fazer agora? TABELA 5.4 - Perguntas que a animação pode responder, de acordo com BAECKER et al. (1991), apud MANDEL (1997).5.5 - Problemas das interfaces com o usuárioOs maiores problemas de interfaces gráficas somam dez, segundo a experiência prática e aspesquisas dos profissionais de usabilidade da IBM, que compilaram a seguinte lista dosproblemas mais comuns encontrados nelas, envolvendo questões relativas a qualquer projetode software para computadores:1. ambigüidades dos menus e dos ícones;2. problemas de linguagem;3. limitações à entrada de informações e à manipulação direta de objetos;4. limites à seleção de opções;5. seqüência de passos não claros;
  10. 10. 2126. 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 setrata 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 simplesjanela da interface” (MANDEL, 1997).5.6 Diretrizes gerais para Design de telasTULLIS (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 deinformação que deve ser apresentada. Quase todas as diretrizes especificam que o total deinformaçã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 modocaracter, a densidade de informação é geralmente expressa como a porcentagem doscaracteres em uso. DANCHAK, apud TULLIS (1997) propôs a seguinte definição: “a cargado display (display loading), que representa a porcentagem da área da tela que está ativa, nãodeve exceder 25%”. Segundo ele, uma análise quantitativa de displays de computador
  11. 11. 213considerados “bons” revelaram uma carga em torno de 15%. Por outro lado, diretrizes daNASA afirmam que uma tela de computador não deve exceder 60%, em termos deintensidade de informação.No caso de interfaces gráficas (GUI), o designer está diante de duas decisões: qual o tamanhoque vai utilizar para a tela e quantas informações vai colocar nela. O limite máximo dotamanho 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 daaplicaçã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 revelaque a grande maioria dos elementos textuais é preta. Uma análise dos caracteres típicos dosistema Windows mostra que a letra média tem um total de 57,6 pixels, com 14,1 pixels empreto. Esses valores podem ser utilizados para converter tamanhos de janelas (em pixels) paraespaços de caracter equivalentes e o número de pixels em preto para os equivalentescaracteres. Um estudo, citado por TULLIS (1997), chegou à “densidade de informaçãopresumida” das telas de interfaces gráficas de 171 janelas de aplicações comerciais parasistema operacional Windows. O resultado (25,2%) é extremamente próximo da densidademé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 determinariamo Design dos dois tipos de telas de computador.A evidência empírica a respeito da densidade da informação demonstra consistência: namedida em que a informação necessária para completar a tarefa está presente, o desempenhohumano tende a se deteriorar com o aumento da densidade do display. Um grande número depesquisas mostrou que o tempo e o número de erros, para uma determinada tarefa, aumentamna 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 geralmentecresce, quando aumenta a densidade de informações. Apesar de a tendência de densidadesaltas estarem associadas à degradação da performance, isso pode ser amenizado por outras
  12. 12. 214características da configuração de telas, sendo que o designer deve determinar qual aquantidade ótima de informação deve ser apresentada em cada tela acessada, para cada pontoda interação do usuário com o sistema. Informações não estritamente necessárias devem serapresentadas somente se o usuário solicitar.Existem técnicas para reduzir a densidade de informações: se o designer determinar qualinformação deve ser apresentada, várias técnicas podem ser usadas para assegurar que ainformação não vai sobrecarregar a tela. Uma redução significativa do tempo que os usuáriosgastam 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ípiossã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ívelna tela, sem que seja apresentada de uma só vez:
  13. 13. 215- caixas de diálogo expansíveis: com esta abordagem, a caixa de diálogo tem dois tamanhos. Na versão menor, que é mostrada como default, estão os itens mais necessários, assim como um botão para expandir a caixa para a versão completa. A caixa maior revela opções adicionais.- Folders drop-down – essa técnica permite a fácil alteração entre os itens de uma sequência de dados, na mesma janela, selecionando-os de forma mutuamente exclusiva.- Listas drop-down e pop-ups – essa família de técnicas proveu fácil acesso a informações ou opções adicionais relacionadas a um item de controle específico. Na maior parte dos casos, o usuário clica um botão que revela as opções adicionais; em outros casos, o pop-up automaticamente revela suas opções, quando o usuário aponta o mouse sobre o controle associado.Em resumo, o Design deve assegurar que cada tela ou janela contenha somente a informaçãoque é realmente necessária para que o usuário complete a tarefa esperada, em cada ponto doprocesso de interação. A tentação de se colocar informações adicionais somente porque estãodisponíveis, deve ser evitada, já que elas claramente degradam a habilidade do usuário deextrair informações relevantes. Com telas em modo de caracter ou com interfaces gráficas, asdensidades de informação de aproximadamente 25% são a média, enquanto que densidadesmaiores do que 40-45% são atípicas. Com maiores densidades de informação, há degradaçãoda performance humana, mas ela pode ser amenizada por outras formas e características doformato da tela, como o agrupamento. Uma grande variedade de técnicas pode ser utilizadapara 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 paraque os elementos possam ser agrupados visualmente na tela. Essas formas de agrupamentotem um papel importante para a facilidade com que o usuário vai extrair informações, assimcomo na interpretração que dará a elas. A importância do agrupamento das informações temsido enfatizada na maioria das diretrizes de interfaces gráficas publicadas. Agrupar itens
  14. 14. 216similares, de forma a que fiquem juntos na tela, aumenta a sua legibilidade e enfatiza asrelações entre os diferentes grupos de informação.O agrupamento é um dos mais importantes determinantes da capacidade do usuário de extraireficazmente informações de uma tela de computador. A tela que contém vários pequenosgrupos ou somente poucos grandes grupos é mais difícil de ser visualmente escaneada do queuma 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 queos critérios para o agrupamento devem espelhar o que pensa o usuário e sua voz deve serouvida 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 certoselementos 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 decomputador, pontos importantes devem ser lembrados.Primeiro, não importando a técnica utilizada, o destaque de informações deve ser aplicado demodo 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 seremdestacados devem ser escolhidos cuidadosamente: se o elemento errado for destacado, adificuldade 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 é ainformaçã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 encontrarqualquer informação. Uma das melhores formas de fazer isto é adotar formato consistente e
  15. 15. 217repetitivo, 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ãoencontrar informações que desejam, tornando mais fácil o aprendizado de uma novaaplicação, compatível com o formato que ele já conhece. Os benefícios ganhos com layoutsconsistentes de telas foram demonstrados empiricamente por TULLIS (1981); e porTEITELBAUM e GRANDA (1983).A maior parte dos documentos de diretrizes (guidelines) advogam pelo uso da consistência noDesign de telas. Exemplo: reservar áreas específicas da tela para certas categorias deinformaçã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 (nocentro, 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 comas de MARCUS (1992), que concorda com a diretriz de que as telas gráficas dos sistemasinformatizados 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 seremaplicados em produtos individuais ou em famílias de produtos. Por exemplo, tanto oMacintosh, da Apple, quanto o Windows, da Microsoft, adotaram padrões detalhados deDesign 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 seinicia 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 deum item alvo no primeiro quadrante da tela (no alto, à esquerda) consome menos tempo paraser encontrado do que itens posicionados no quadrante inferior direito. Entretanto, esse
  16. 16. 218princí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 nasinterfaces gráficas (GUI) atuais.A maneira ótima de apresentar o seqüenciamento das informações, em uma tela decomputador, é determinada por diferentes fatores, incluindo os seguintes (TULLIS, 1997):- a seqüência de utilização – se os elementos de informação, para tarefas do usuário, devem ser empregados em uma dada seqüência, então devem ser apresentados seguindo essa ordem. Um exemplo comum seria quando o usuário entra com informações que vêm de uma fonte externa, como um formulário de entrevista com clientes.- a utilização convencional – existem muitos casos em que a seqüência de dados foi determinada por convenção. Um exemplo típico são nome, endereço, cidade, estado, e código postal, embora existam outros exemplos em domínios especializados.- a importância – em alguns casos, o desenvolvedor pode predizer que certos elementos de informação serão mais importantes para o usuário, do que outros. Quanto mais importante os elementos, mais destaque deve ter a sua localização no layout da tela. Relacionado a esta idéia de importância está a suposição de que campos de entrada de informação opcionais geralmente vêm depois dos campos de informação obrigatória.- a freqüência de uso – nos casos em que alguns elementos da tela são utilizados de modo mais frequente do que outros, os elementos mais requisitados devem aparecer junto ao topo da tela. Por exemplo: em um menu de comandos, o comando mais frequente deve ser apresentado primeiro. Por isso, nota-se que é fundamental observar o usuário durante a realização das suas tarefas.- a generalidade/especificidade – quando certos elementos de informação são mais genéricos do que outros, os mais genéricos devem preceder os mais especíicos. Isso é particularmente adequado quando existe um relacionamento hierárquico entre os itens de informação. Elementos gerais são normalmente aqueles que estabelecem um contexto para os elementos subseqüentes. A pesquisa com os usuários, neste caso, também desempenha um importante papel para o processo de Design de telas.
  17. 17. 219- a ordem alfabética ou cronológica – se nenhuma das regras para ordenação lógica das informações se aplicam, outra técnica deve ser adotada. Por exemplo, no caso de uma lista de nomes uma ordem alfabética pode ser apropriada; ou então, uma lista cronológica pela data de criação dependendo do uso previsto para as informações.Em suma, segundo TULLIS (1997), o mais importante para se lembrar a respeito dadiagramação e seqüenciamento de elementos na tela é que o usuário deve ser capaz dedesenvolver expectativas muito claras a respeito da categoria de informações que vai aparecerem determinada área. Essas expectativas podem emergir da adoção de um layout padrão, oupodem 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 podetornar mais fácil que o usuário encontre a informação desejada, as relações espaciais entreesses elementos são igualmente importantes. Relações espaciais como o alinhamento; podemtornar 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 relacionadosdevem ser apresentados verticalmente, dentro de uma lista em vez de horizontalmente, comotexto corrido.A maior parte das diretrizes (guidelines) sugerem que a técnica de alinhamento usada emlistas verticais deve diferir dependendo do tipo de dados listados. Especificamente, listasverticais de textos e caracteres alfanuméricos devem ser alinhadas à esquerda, e listasverticais de dados numéricos devem ser alinhados a direita, ou alinhados por seus pontosdecimais. O alinhamento à esquerda de textos e caracteres alfanuméricos torna mais fácil alocalização de cada item. Alinhar os dados numéricos em seus pontos decimais torna maisfácil a comparação entre seus valores.Além do uso de alinhamentos de textos na tela de um computador, outras formas de relaçõesespaciais devem ser consideradas:
  18. 18. 220- indentação – relações de subordinação ou de hierarquia entre dados podem ser mostrados eficazmente através do emprego da indentação.- relações de titulação – com poucas exceções, todos os itens de informação em uma tela deverão ser titulados. Existem duas técnicas para a titulação: à esquerda do dado, ou acima do dado. Diretrizes recomendam que os títulos dispostos verticalmente sejam alinhados à esquerda, quando seus respectivos dados são alinhados a seu lado - mas essa abordagem pode resultar em muito espaço entre os títulos e os dados associados, caso sejam de comprimento variável. Por isso, outras soluções para o problema podem ser adotadas, visando a otimização da programação visual.- associações – displays gerados por computador têm se tornado cada vez mais comuns em situações que envolvem a representação e o controle do status de algum processo que ocorre no mundo real. Exemplos: redes de telefonia, plantas de usinas nucleares, o metrô. Esses displays comumente empregam gráficos para representar elementos reais do processo. As relações espaciais entre os gráficos devem permitir ao usuário visualizar as relações de funcionamento entre os elementos do processo no mundo real.- simetria – várias diretrizes (guidelines) propuseram que as relações espaciais entre elementos de uma tela de computador deveriam permitir a simetria. Por exemplo, GALITZ, apud TULLIS (1997) propôs que a simetria deveria ser alcançada através da centralização do layout em um eixo central, mantendo uma igual distância em cada um dos lados. Além disso, outros pesquisadores propuseram uma medida de balanço, como técnica para determinar as propriedades do Design de telas. Essa medida fora computada como a diferença entre o centro da massa dos elementos mostrados e o centro físico da tela de computador. Entretanto, não existem evidências de que essa medida poderia auxiliar na previsão das características de usabilidade do display.O principal ponto sobre relações espaciais é que uma vez que o usuário identificou aslocalizações de alguns elementos da tela, ele deve ser capaz de utilizar essas informações paraencontrar outros elementos. Esse tipo de previsibilidade visual pode ser atingida através doalinhamento dos elementos com os outros, ou através da adoção de outras relações espaciais,
  19. 19. 221consistentes 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, incluemalgum tipo de texto. Várias diretrizes se propõem a guiar a apresentação de textos, sendo quepoucos são os estudos empíricos que abordam os diferentes aspectos da apresentação dostextos.As principais questões relacionadas com as apresentações dos textos nas telas são: utilizaçãode 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 contrasteentre figura e fundo e cores.Idealmente, segundo TULLIS (1997), o texto no Design de telas deve ser apresentado emforma mista de letras maiúsculas (caixa alta) e minúsculas (caixa baixa), utilizandoespaçamento proporcional entre letras e palavras; as letras devem ser fontes sem serifa (com otipo Arial), de oito a dez pontos, com alto contraste de cores, de preferência caracteres pretoscom fundos brancos. Linhas de texto corrido devem ter entre 26 e 78 caracteres decomprimento na tela do computador. O espaço entre as linhas (entrelinha) deve ter altura nomí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 queuma série de limitações é imposta pela linguagem padrão HTML ao projeto das páginas dossites. Por isso, mais detalhes e explicações sobre o emprego da tipologia nos sites da Internetserã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 quaisseriam essas situações? Quando gráficos podem ser usados para comunicar informações maisadequadamente? Uma lista não exaustiva para identificar usos mais comuns de gráficos, nasinterfaces, incluiria:
  20. 20. 222- representação de imagens do mundo real ou imaginário;- representação de sistemas complexos do mundo real;- representação de dados numéricos multidimensionais; e- representação de objetos e ações de manipulação direta (ícones).Os gráficos estão sendo cada vez mais empregados como importante parte das interfaces dossistemas computacionais; uma grande variedade de técnicas existe para apresentação deinformações graficamente. Cada vez mais essas técnicas tem se tornado acessíveis sobre oponto de vista econômico: em certas situações, a informação só pode ser razoavelmenteapresentada com utilização de gráficos, e há muitas outras situações em que os gráficos sãomais eficazes do que os caracteres alfanuméricos. Apesar disso, pesquisas adicionais aindasão necessárias para definir os tipos de displays gráficos mais apropriados, considerando-se asvárias categorias de tarefas e de dados.5.7 – Desenho de metáforas para interfacesInterfaces bem sucedidas fariam ainda uso de metáforas parcialmente genéricas eparcialmente únicas – que definem conceitos fundamentais através de palavras e de imagensassim como de sons e de interações. Ao administrar expectativas dos usuários, no que dizrespeito às estruturas conhecidas, processos e surpresas diante de novidades, o designeratingiria formas instigantes, que permitem às pessoas serem mais produtivas.As metáforas aparecem de modo proeminente nas interfaces com os usuários. Elas seriamconstituídas por telas contendo conteúdos informacionais, estéticos e persuasivos, além demeios 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, asinterfaces apresentariam metáforas, modelos mentais, navegação, aparência e interatividade.Cada um desses cinco componentes poderia ser definido da seguinte forma, segundoMARCUS (1997):
  21. 21. 2231 – Metáforas - seriam determinadas visualmente, através de palavras e imagens, ou atravésde meios táteis ou acústicos.2 – Modelos mentais – significariam a organização das informações, as funções, as tarefas, ospapé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 sistemae 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 dasemâ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 acomunicaçã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) representampessoas, 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) explicamcausas e efeitos em um processo ou estrutura. Por exemplo, a barra de progresso mostra otempo de download de um arquivo; (4) expressam conceitos e valores - numa interfacegráfica com o usuário, a seta de reciclagem pode sugerir re-uso ou ecologia.Para MARCUS (1997), existem alguns tipos de metáforas:- Estruturais - substituem partes de um sistema por outro: uma estrutura em outline serviria para representar uma estrutura de arquivos hierárquicos.- Operacionais – substituem o comportamento de um sistema por outro: como clicar e arrastar um arquivo para a lixeira do computador.
  22. 22. 224- Pragmáticas – possibilitam que o usuário compreenda melhor: no desktop, objetos concretos substituem componentes abstratos dos sistemas operacionais.Utilizadas corretamente, metáforas trariam inúmeras vantagens à eficácia da comunicação.Utilizar conceitos familares aos usuários reverte-se em menor tempo de treinamento, porqueeles 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. Conceitosfamiliares em um ambiente não-conhecido podem adicionar apelo às interfaces; reconhecer asreferências reduz a tensão, o estresse, a confusão, a ansiedade e a alienação, ao mesmo tempoem 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 queos usuários possam focalizar e reter um número limitado de atributos primários de um sistemacomplexo. 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ênciasestéticas, a auto-imagem e as associações culturais dessas comunidades. Por isso, desenharmetáforas seria uma poderosa ferramenta de comunicação que desenvolve o interesse nosprodutos tecnológicos, ao facilitar a compreensão de conteúdos complexos e promover umaatitude positiva.Técnicas de comunicação verbal serviram à literatura durante milhares de anos e tambémforam aplicadas à comunicação visual. Hoje, quando computadores se tornaram intensasexperiências multimídia - empregando ícones, fotografias, vídeo e som -, o Design demetáforas se tornou um importante desafio para a inovação tecnológica.5.8 - Desenhando menusPAAP e COOKE (1997) analisaram a usabilidade de interfaces baseadas em menus. Paraesses pesquisadores, uma definição precisa, completa e universalmente aceita dos menus serianecessária para a discussão teórica pesquisa aplicada ao Design. Para seus propósitosespecí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 noestado da interface”.
  23. 23. 225Menus consistem, normalmente, numa lista de opções, que podem ser expressas por palavrasou ícones. A palavra (ou ícone) não é um símbolo arbitrário: fornece informações sobre asconseqüências da seleção da opção. Certas vezes, as opções são acompanhadas de descritoresverbais, sendo que a gama total de opções é distribuída através de diferentes painéis. Issopermite 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 entrepainé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 umeditor de textos. Estas aplicações tendem a ser altamente interativas - selecionar opções domenu gera meios de criar os produtos. Em contrapartida, outra classe tem o propósitoprimordial de resgatar informações, como os hipertextos da Web.Considerando-se a gama de opções apresentadas num painel de menu, dois importantesfatores devem ser determinados: a descrição verbal de cada opção e o seqüenciamento ouagrupamento das opções. O melhor Design depende do tipo de busca e de operações decomparação que ocorrerão na medida em que o usuário considera conteúdos do painel demenus. Essas operações podem ser de identidade, equivalência ou de inclusão numa classe. Araiz de um sistema de menus geralmente consiste em numa gama de opções que especificacategorias abrangentes e abstratas, sendo que os usuários devem realizar julgamentos deinclusão em classes, para acessar diferentes objetivos situados nos níveis mais baixos dahierarquia. Por exemplo, uma "margarida" é uma instância da categoria "flores"? Umapesquisa considerando as tarefas e o modelo mental do usuário pode ajudar na definiçãodessas categorias e subcategorias.A maioria dos erros ocorridos em sistemas acionados por menus acontece porque osignificado das opções não é clara para o usuário. Um método de aumentar a clareza dosistema de menus é adicionar um elemento descritivo adicional para cada palavra ouexpressã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 sersignificativamente reduzido, ao se apresentar opções do nível superior da hierarquia.A literatura empírica existente compara organizações das opções de menus em sistemas
  24. 24. 226aleatórios, alfabéticos e categorias. A organização aleatória não deve ser considerada comoopção de Design, mas serviu para que os pesquisadores para estabelecessem uma linha básicade mensuração dos benefícios dos outros dois tipos de organização. Certos menus podemapresentar uma gama de opções em ordem convencional, que não é nem alfabética, nem decategorias. Por exemplo, as opções podem ter ordenação com padrão temporal, como dias dasemana 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 emsua ordem de freqüência de utilização. Mais diretrizes para a organização de menus (segundoobjetivos dos usuários) estão identificadas no diagrama que se segue.FIGURA 5.1 – Diretrizes para a organização de um painel de menu (PAAP e COOKE, 1997).
  25. 25. 227A figura apresentada ilustra diretrizes para se escolher entre as organizações alfabéticas, porcategorias, convencional ou por freqüência de uso. A parte superior da figura pressupõe que amaior parte dos usuários tem um objetivo específico em mente, que provavelmente seadequará a uma das opções. Nessas circunstâncias, usuários poderão obter as vantagens daordenação alfabética. Designeres raramente poderão pressupor que os usuários são capazes deantecipar o título da opção desejada; sendo que, a próxima questão a ser respondida pelodesigner de interface é se a lista de opções é longa ou curta. Opções ordenadasconvencionalmente formarão provavelmente, uma lista curta. Note-se que ordenaçõesconvencionais 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 pelaalfabética.Se a lista for longa, será provavelmente melhor adotar a ordenação alfabética de opções, amenos que a oportunidade de utilizar as informações separadas em categorias seja óbvia. Seas opções puderem ser arranjadas em categorias, distintas (que têm poucas sobreposiçõesconceituais) 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 poucodefinidas em mente. Se não faz sentido dividir uma lista pequena em categorias, a opçãoestará limitada às ordenações convencional ou alfabética. Uma exceção será quando a listapequena estiver composta por expressões ou frases difíceis de serem colocadas em ordemalfabética, ou seja, quando a palavra inicial da expressão for arbitrária ou for poucoimportante. 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 melhorestratégia. Uma exceção aqui seria quando uma pequena sublista de opções é selecionadamais freqüentemente do que as outras. Nesse caso, listar as opções em ordem decrescente defreqüência permitirá melhor arranjo, particularmente se as categorias não puderem serseparadas 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. Devepermitir 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, comouma lista de exemplos ou de opções do nível abaixo na hierarquia poderá auxiliar, embora
  26. 26. 228fatores que determinam a magnitude dos benefícios ainda não sejam compreendidos. Paragrandes interfaces testar os títulos de cada painel de menu junto a uma amostra dos usuáriosfinais pode ser dispendioso, mas seria a única técnica garantida para remover os problemas dainterface.Existem várias tecnologias para selecionar itens de menus. Algumas, como listas pull-downcasadas com seleção pelo cursor do mouse são mais comuns que outras. Técnicas menosconvencionais como menus de áudio estarão limitadas a tecnologias muito específicas. Todasas técnicas de seleção de menus envolvem listas de itens que podem ser apresentadas em umavariedade 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 (comono 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 formatocircular. Todas as técnicas envolvem a identificação de um item do menu, utilizando-se ummecanismo como o ponteiro do mouse, o ato de teclar uma letra ou entrar com um dígitoidentificador.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. Emalguns 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 emprosa pode ser "hot link" encontrado nos documentos hipertextuais. O hot link é uma porçãoenfatizada da prosa, que pode ser selecionada para mais informações. Neste caso, os itens domenu não são explícitos, mas situam-se no meio de blocos de texto. Esses menus de textonecessitam 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áriaspossibilidades de layouts a serem exploradas. Listas horizontais são freqüentementeencontradas no topo da tela. Na maior parte dos casos, entretanto, os itens de um menu sãoarranjados verticalmente e, se não forem fixos, podem ser abertos ou fechados através dosistema pull-down e pop-up. Os menus pull-down são selecionados e apresentados na mesmalocalização, cada vez que são abertos; os menus pop-up aparecem na posição corrente do
  27. 27. 229cursor.Formas não convencionais de layout de menus foram propostas por NORMAN (1991), apudPAAP e COOKE (1997), embora existam poucas pesquisas empíricas sobre o tema. Oslayouts não convencionais incluem o matricial (por exemplo: selecionar elementos de umatabela periódica) e o layout gráfico (por exemplo: selecionar localizações num mapa.). Oautor sugere que certas características dos itens de menus tendem a esse tipo de representaçãonão linear e espacial, sendo que se poderia capitalizar essas formas visuais para facilitar oreconhecimento. 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 quedecidir o layout geométrico dos itens. Particularmente, a escolha dos tamanhos,espaçamentos, agrupamentos, tamanhos de fontes, estilos e cores deve ser considerada. Essestemas são os mesmos considerados no projeto geral de telas de interfaces. Aspectos dessestemas (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, outrosformatos de listas de opções são possíveis e podem ser desejáveis, dependendo dos itensespecíficos, da tarefa, ou da tecnologia. Menus em formato de torta são adequados para listaspequenas, facilmente representadas em formato cíclico, e funcionam bem para tecnologias deseleção baseadas em canetas, com o adequado espaço de tela. Técnicas de marcação podemoferecer alternativas promissoras às tradicionais interfaces point-and-click (do tipo apontarcom o cursor do mouse e clicar), quando usadas em combinação com menus em torta einterfaces baseadas em canetas. Se os itens tenderem às representações gráficas, asalternativas matriciais ou layouts visuais devem ser também considerados. Na medida em queoutros mecanismos de seleção se desenvolvem, o mouse tende a ser favorecido para asinterfaces 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 versushorizontalidade”, numa estrutura de menu hierárquica. A maior parte dos sistemas de menusestão organizados dentro de uma árvore hierárquica, em que cada nó (painel) da hierarquiapode ser acessado somente por um único nó superior, que se encontra diretamente acima. A
  28. 28. 230profundidade (d - do inglês depth) é aqui definida como o número de níveis de umahierarquia. A horizontalidade (b - do inglês breadth) é aqui definida como o número deopções do painel do menu. Quando existe um número igual de opções, em cada painel, onúmero de nós (N) na terminação pode ser representado por uma função da horizontalidadeelevada à potência da profundidade, da seguinte forma: N=bdPor exemplo, 64 nós terminais de um menu podem ser acessados utilizando três níveis dehierarquia, com quatro opções em cada painel: 64 = 43Ou, alternativamente, os 64 nós podem ser arranjados em seis níveis, com somente duasopções por cada painel: 64 = 26Fatores humanos que favorecem a maior horizontalidade da hierarquia dos menus. A estruturahierárquica com vários níveis requer que o usuário se lembre onde está ou descubra comonavegar de onde está para o local que procura. O problema de navegação fica cada vez piorna medida em que a profundidade da hierarquia aumenta. SNOWBERRY, PARKINSON eSISSON (1983), apud PAAP e COOKE (1997) mostraram que as taxas de erros elevam-se de4% para 34%, quando a profundidade da hierarquia dos menus cresce de um nível para seisníveis.Também segundo MAYHEW (1992), uma das diretrizes para o melhor Design dos menusseria minimizar a profundidade das hierarquias, aumentando sua horizontalidade. Geralmente,dois fatores afetariam a decisão sobre a profundidade versus horizontalidade da hierarquia dosmenus: o tempo de decisão do usuário e o tempo de execução. Em geral, quando o tempo dedecisão do usuário é longo, menos horizontalidade é desejável. Mas, quando o tempo deexecução é grande, uma maior horizontalidade seria desejável.
  29. 29. 231 FIGURA 5.2 - Profundidades na hierarquia dos menus, segundo MAYHEW (1992).MILLER (1981), apud PAAP e COOKE (1997) foi o primeiro a investigar diretamente aquestão da profundidade em relação à horizontalidade, através da manipulação dos itens deprocura de uma base de 64 itens de menu. Sua experiência variou a organização da árvorehierárquica, visando a experimentação. O autor concluiu que, dentro de certos parâmetrospreestabelecidos, dois níveis hierárquicos com oito opções por menu seria a melhororganização.A pesquisa e as aplicações analisadas por PAAP e COOKE (1997) sugerem que, quando aorganização categorial dos itens de menu é desejada, embora não óbvia, deve-se considerar ageração de menus pelos próprios usuários. Essa organização seria baseada em informaçõescoletadas dos usuários finais. Devem ser coletados dados de uma amostra representativa dosusuários finais, a partir de um modelo consensual, não pessoal. As categorias dos menusdevem ser derivadas dos modelos dos usuários.Os fatores relacionados à hierarquia dos menus (horizontalidade e verticalidade) sãoinfluenciados também por outras variáveis. Tempos de decisão são maiores quando (1) osusuários são inexperientes, (2) os itens da escolha são complexos e (3) quando os itens daescolha tendem a uma abordagem por categorias. Os tempos de execução são maiores quando
  30. 30. 232os tempos de resposta do sistema são longos, ou quando os mecanismos de seleção do sistemademoram (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 diferentescondições (MAYHEW, 1992). Por exemplo: até não mais que 20 opções por tela é o númeroideal quando os usuários são casuais (não freqüentes), as escolhas são simples e os itenspodem ser arranjados em algum tipo de organização significativa. Essa tabela deve serutilizada como um ponto de partida para tomar decisões sobre hierarquias de menu, noreferente a sua profundidade e horizontalidade. Nesse caso, a partir da gama otimizada deabertura recomendada pela tabela, a horizontalidade e a profundidade reais podem serdeterminadas pela categorização natural dos itens. A categorização natural deve serdeterminada empiricamente, através de análises estatísticas aplicadas às informaçõescoletadas de usuários representativos do público-alvo do sistema desenhado. Quando a
  31. 31. 233horizontalidade for variável, nos diferentes níveis, deve-se ter em mente que uma maiorabertura nos níveis profundos pode facilitar a procura para usuários inexperientes, emboraesta 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 funcionalidadetotal. 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 profundoque não utilizam nunca. Esse processo é chamado de isolamento ou delimitação (insulation) eexistem 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 demenus 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 oupainel. 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 elementosdescritivos muito curtos para serem precisos. O isolamento (insulation) se refere àoportunidade para os sistemas de menus apresentarem as seleções que serão provavelmentenecessárias, enquanto escondem as opções que são menos usadas. A oportunidade doisolamento pode ser maior quando cada população de usuários aprende uma pequena parte deum 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çadosmesmo quando os usuários são responsáveis pela utilização do sistema inteiro. Oafunilamento se refere a uma redução do número total de opções processadas, que é atingidoao se desenhar um sistema com mais profundidade e menos abertura. Quando uma maiorprofundidade é escolhida, em detrimento da abertura, o afunilamento gera ganhos deeficiência, particularmente quando o tempo de processamento por opção é longo. O tempo deprocessamento inclui o tempo que o usuário leva para decodificar a opção, comparar arepresentação codificada com o objetivo e decidir se vai terminar a busca ou continuar aexaminar outras opções. O tempo de processamento será mais longo quando o usuário seengaja em uma busca semântica dificultada, que envolve elementos descritivos pouco claros.
  32. 32. 234Mas os benefícios do afunilamento não podem ser obtidos sem custos. Na medida queaumenta a profundidade da hierarquia de opções, cresce o número de transações. Umatransação é iniciada pelo usuário quando uma seleção é feita na tela. Cada paineladicional requer mais uma resposta (pressão de uma tecla, seleção com o mouse) do serhumano e mais uma resposta do computador (display). Cada transação adiciona temposde resposta para cada componente ao tempo total. Considerando-se um banco de 64 itensde escolha, a organização com profundidade máxima teria tempo de execução e respostaseis 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 demenus, 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. Porexemplo: 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ívelcom as correspondentes categorias.– Considerar elementos descritivos adicionais às opções do menu, caso os títulos sejamambíguos.Quanto à ordenação das opções dos menus:- ordenar de acordo com convenção, a freqüência de uso, ordem de uso, categorias ouordem alfabética, dependendo do usuário e das tarefas.
  33. 33. 235Quanto à seleção das escolhas do menu:- Nos sistemas de menus direcionados ao teclado, a seleção pelo cursor é aceitável para osmenus curtos, especialmente se a freqüência de uso for casual. Para menus longos, ou parausuá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 quepossível- Distinguir menus de uma só escolha dos que apresentam várias escolhas- Prover feedback (respostas) à seleção dos menusQuanto à invocação dos menus:- reservar menus pop-up, ou invocados pelo usuário, para usuários de alta freqüência. Osmenus permanentes na tela são preferíveis.Quanto à navegação do menu:- estabelecer convenções para o desenho dos menus e aplicá-las, consistentemente, emtodas 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árioexperiente.- facilitar sempre a retronavegação.5.9 - Desenho de páginas da Web: conceitos geraisDe acordo com LYNCH e HORTON (1999), os usuários procurariam clareza, ordem ecredibilidade nas fontes de informação, sejam documentos em papel, sejam páginas da Web.Um Design eficiente pode prover essa credibilidade: a organização espacial de gráficos e de
  34. 34. 236textos da Web pode motivar leitores com seu impacto gráfico, captar atenção, priorizarinformaçõ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 asensação visual. Sem o impacto da forma, da cor, e do contraste, as páginas se tornammonótonas e não motivam o usuário. Documentos de textos muito densos, e sem contraste ourelevo visual, são difíceis de ler - particularmente nas telas de baixa resolução decomputadores. Entretanto, sem o aprofundamento e a complexidade do texto, páginasexcessivamente gráficas arriscam- se a desapontar o usuário, oferecendo pobre equilíbrioentre sensação visual, informação textual e interatividade hipermídia. Ao se perseguir oequilíbrio, restrições primárias ao Design são criadas pela linguagem HTML, e pelaslimitaçõ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 tipografiaseriam aspectos essenciais para convencer a audiência de que o site oferece informaçõesprecisas e relevantes. A abordagem sistemática e cuidadosa quanto ao Design de telas podesimplificar a navegação, reduzir erros cometidos pelos usuários, e tornar mais fácil aosleitores utilizar informações e serviços oferecidos.A primeira tarefa do desenho gráfico seria, segundo LYNCH e HORTON (1999), criar umaconsistente 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 dainformação, utilizando as ferramentas do layout, da tipografia e da ilustração, para direcionaros olhos do leitor através da página. Os leitores, primeiro, enxergam as páginas como grandesmassas 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 aescanear 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 cruciaispara levar o leitor até o conteúdo, dizem os autores. Uma página monótona com texto purorepele os olhos, como uma massa cinza sem diferenciações - sem pistas para a estrutura dainformação. Deve-se conseguir o equilíbrio entre atrair os olhos através do contraste visual eprover o senso da organização. O Design eficaz para audiências da Internet utiliza o equilíbriocuidadoso de textos e links, com gráficos pequenos. Ao criar um projeto para Web, deve-se
  35. 35. 237considerar o propósito geral, a natureza do conteúdo, e, o mais importante, as expectativas dosusuários do site.A consistência também seria fundamental. Seria preciso estabelecer uma grade de layout eestilos para gerenciar textos e gráficos e então aplicá-los consistentemente em de todas aspá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 ememorável. Abordagem consistente do layout e da navegação permite aos leitores se adaptarrapidamente ao Design e predizer, com confiança, a localização das informações e doscontroles de navegação.Embora nenhum diagrama ou sistema de diagramação seja apropriado para todas as páginasda 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 todasas páginas e como será a colocação de títulos, subtítulos, links de navegação e botões. Oobjetivo é estabelecer um layout lógico para as telas, de modo que se possa adicionar textos egráficos, sem ter que parar para repensar a abordagem básica página por página. Sem adiagramação básica, o projeto será direcionado à problemas casuísticos e o desenho global doWeb 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 Webe documentos impressos conjuguem similariedades editoriais, as telas de computador setornam o principal meio de distribuição da informação baseada em Internet. Há que seconsiderar 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 serdeterminada por dois fatores: a resolução mínima da tela comum (640 x 480 pixels) e alargura do papel utilizado para se imprimir páginas da Web. A maior parte dos monitores decomputador 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 queexcedam a largura desses monitores parecerão amadorísticos e causarão inconveniências amuitos 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 seriaintolerável.
  36. 36. 238Até nos monitores menores é possível apresentar gráficos que são muito grandes para serimpressos, 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 parapá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 determinadaslevando-se em consideração os navegadores Netscape e Internet Explorer, nos ambientesWindows e Macintosh. Note-se que, se fizermos a escolha de maximizar a largura da páginada 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 quatrofatores: (1) a relação entre a página da Web e o tamanho da tela, (2) o conteúdo dodocumento, (3) determinar se o leitor vai navegar no conteúdo online, vai fazer o downloadpara futura leitura, ou se vai imprimir o documento, (4) a largura de banda disponível para aaudiência.“Pesquisadores notaram a desorientação que resulta da movimentação vertical de telas de umcomputador. O leitor perde contextualização, o que é particularmente problemático quandoelementos 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 deinformação que possa ser apresentada em uma ou duas telas de 640 x 480 pixels, e que linksde navegação locais estejam posicionados no início e no fim do layout.” (LYNCH eHORTON, 1999)“Em certas interfaces gráficas - como o Macintosh e o Windows - o elevador se torna fixo enã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áginasWeb muito longas, pequenos movimentos do elevador podem alterar totalmente a visão dosconteú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, normalmentemais fáceis para que seus gerentes possam organizá-las e para que usuários possam executar odownload. Gerentes de sites não terão que manter tantos links, e usuários não terão que fazerdownload de múltiplos arquivos, para coletar informações sobre um único tema. As páginas
  37. 37. 239longas são particularmente úteis ao prover informações que usuários não vão ler na tela (demodo realista, qualquer documento maior do que duas páginas impressas). Entretanto, se apágina Web for longa demais, ou se contiver muitos gráficos, poderá prejudicar usuários comconexões lentas. Além disso, páginas grandes com gráficos pesados podem sobrecarregar amemória RAM (Random Access Memory) de computadores, causando o congelamento dobrowser 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 daWeb, particularmente quando se espera que o usuário a imprima ou a salve no seu discorí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 aversão online. Além disso, páginas longas freqüentemente falham ao tirar vantagem derecursos 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 deutilizá-los é imprimir organização às páginas. Entretanto, as ferramentas atuais do HyperTextMarkup Language (HTML) não permitiriam as facilidades de controle que os desenhistasgráficos rotineiramente esperam de softwares de layout de páginas ou de sistemas de autoriamultimídia.Diferenças entre o Design impresso e o Web DesignA diferença crucial entre o desenho para a Web e o desenho de páginas para impressão é que,
  38. 38. 240quando os leitores passam a página de um livro ou de uma revista, eles vêm não somente atotalidade 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 desenhoimpresso pode atingir uma unidade e uma densidade de informação que o desenho na Webnão conseguirá emular: não importa a largura ou a resolução do monitor, o usuário só podever 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 daspáginas da Web podem ser divididas, verticalmente, em zonas com diferentes funções e níveisde complexidade. “Quando a página é progressivamente revelada pelo elevador vertical, umnovo conteúdo aparece e o conteúdo superior desaparece. Um novo contexto gráfico seriaestabelecido cada vez que o leitor move a página para cima, utilizando o elevador. O layoutda página Web deve ser julgado não somente pela visão da página como um todo, masdividindo-a em zonas funcionais, para cada tela de informação”, explicam LYNCH eHORTON (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. Umaimagem pesada pode instigar surfistas casuais, mas fará com que o leitor desperdiçe umminuto inteiro para o download do topo do site. Um Design cuidadoso dará ao Web site umaassinatura gráfica e o layout da página permitirá ao leitor perceber, imediatamente, opropósito do documento e a sua relação com as outras páginas do site. Os gráficos utilizadosem 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 tercerteza 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 juntoao seu topo. Cada página deve conter também informações básicas sobre a origem e a data decriaçã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 outraspá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 poucode “prestidigitação”. A linguagem HTML foi criada por engenheiros e por cientistas, quenunca a imaginaram como ferramenta de layout de páginas. Seu objetivo era fornecer uma
  39. 39. 241maneira de descrever informação sobre um documento, e não determinar a aparência destedocumento. Uma vez que o mundo real começou a trabalhar com a Web, os designeresiniciaram a adaptação das primitivas ferramentas HTML para produzir documentos maisparecidos com seus equivalentes impressos, seguindo convenções que se desenvolveramatravés de centenas de anos, por razões práticas e concretas, e que oferecem vantagensfuncionais sobre o layout demasiadamente simples, visualizado pelos primeiros designeres ecriadores da World Wide Web. Somente colocar um texto em uma página fará com que ocomprimento da linha de texto seja determinada pelas dimensões da janela do browser dousuário. Quando o usuário redimensiona sua tela, o texto reflui, de modo a preencher o novoespaço. Muito embora alguns possam considerar que este fato é uma ferramenta, issodeteriora a experiência do usuário. Convenções tipográficas já estabelecidas direcionamquestões relativas à legibilidade, leiturabilidade e ao estilo, que devem ser gerenciadas pelahabilidade do designer de posicionar palavras, imagens e demais elementos na tela, de modoa aderir aos padrões editoriais estabelecidos.Segundo outro pesquisador, NIELSEN (2000), as páginas Web deveriam destacar o conteúdode interesse do usuário: infelizmente, muitos sites gastam mais espaço de tela com elementosde navegação do que com informações. A navegação seria um mal necessário e não o objetivoem si - por isso, deveria ser minimizada.O conteúdo deveria corresponder a pelo menos metade das páginas e, de preferência, emtorno de 80%. A parte de navegação deve ficar abaixo de 20%. Na perspectiva da usabilidadede interfaces, seria melhor eliminar a propaganda; mas, caso seja necessária, deve-seconsiderá-la parte do overhead (carga) da página, junto com as opções de navegação - o queimplica 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 aum. Se o projeto funcionar sem um dado elemento, deve-se retirá-lo. A simplicidade vence acomplexidade. Principalmente na Web - onde cada 3 bytes economizados significam 1milissegundo a menos no tempo de resposta.Na Web, seria impossível prever o tamanho do monitor do usuário, assim como a janela usadapara exibir a página. No futuro, a negociação de conteúdo detalhada entre browsers(navegadores) e servidores resultará na disposição inteligente de páginas de acordo com as
  40. 40. 242características do monitor específico. Por enquanto, as previsões de um conteúdo adaptávelsão esperança para o futuro e seria ainda necessário trabalhar com dispositivos de exibiçãodiferentes.Desenhar para uma variedade de plataformasSegundo NIELSEN (2000), o desenho deveria funcionar em várias plataformas. Num projetotradicional de interface gráfica, cada pixel da tela seria controlado: ao criar uma caixa dediálogo, podemos estar certos de que ela aparecerá idêntica para os usuários. Conhece-se osistema, sabe-se quais as fontes instaladas, sabe-se qual o tamanho de tela típico e tem-se oguia de estilo do fornecedor com regras de dispositivos de interação. Na Web, o usuáriocontrolaria a navegação: poderiam enveredar-se por caminhos não pretendidos pelosdesigneres – podem ir direto ao centro de um site a partir de um mecanismo de busca, sempassar pela home page. Os usuários também podem controlar seu próprio menu debookmarks, usando-o para criar uma interface personalizada.Web designeres deveriam adaptar-se, aceitando a navegação controlada pelo usuário. Seriapossível forçar usuários por caminhos definidos e evitar que estabeleçam links comdeterminadas páginas, mas os sites que o fazem parecem rígidos e dominadores. Seria melhordesenhar visando a liberdade de movimentos.Com as interfaces gráficas, tivemos o luxo de viver uma fase inicial de pesquisa edesenvolvimento, em empresas de ponta com especialistas de interfaces. Porém, a Web estariaevoluindo neste momento e os experimentos acontecem na Internet (e não em um laboratóriode usabilidade equipado com videoteipes) – portanto, todos nós somos cobaias, afirmaNIELSEN (2000).Seria melhor não predeterminar fontes e aceitar a fonte padrão, pois sempre funcionará. Umaalternativa para quando se quiser criar numa determinada fonte é listar várias alternativas paramaximizar a probabilidade de que uma delas esteja disponível na máquina do usuário.
  41. 41. 243Também seria um engano criar páginas excessivamente compactas: o espaço em brancoorienta e ajuda usuários a entender o agrupamento de informações. O espaço em branco seriainevitável, na maioria dos casos, já que é impossível fazer com que as páginas sejam exibidasnum retângulo perfeito da tela, em todas as circunstâncias. Na Web, a maioria daspressuposições para projeto de interfaces gráficas caem por terra: os usuários podem acessar aWeb através de computadores tradicionais, mas também podem usar um palmtop, um telefonecelular Nokia ou o carro como um dispositivo Internet. Precisamos conciliar atualmente umfator de 100 na área de tela entre palmtops e estações de trabalho e um fator de 1.000 emlargura de banda, entre modems e conexões velozes.Segundo o pesquisador, a maioria das páginas Web funcionaria bem em um monitor de 17polegadas, com uma resolução de 1.024x768 pixels (tamanho médio). Qualquer monitorinferior deixaria muitos layouts cortados e os usuários precisam rolar a tela para ver partes dapágina (ver a tabela a seguir). Tamanhos da tela 1997 1999Muito pequena (640 x 480 ou 22% 13%menor)Pequena (800 x 600) 47% 55%Média (1.024 x 768) 25% 25%Grande (1.280 x 1.024) 6% 2% TABELA 5.6 – A tabela mostra a distribuição de tamanhos de tela usados para acessar a Internet em 1997 e 1999. A conclusão é que dois anos não fizeram praticamente diferença alguma na dominância de telas pequenas (NIELSEN, 2000).
  42. 42. 244Não há como saber o tamanho da tela dos usuários, por isso, deve-se criar para todas asresoluções. Em outras palavras: páginas independentes de resolução que se adaptam aqualquer tela. O princípio do Design independente de resolução seria nunca usar larguras depixels fixas para tabelas, quadros ou gráficos; em vez disso, especificar-se-ia layouts enquantopercentuais 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 qualdeve-se criar - se o objetivo é 640 pixels ou 800 pixels. Para NIELSEN (2000), não se deveriacriar para uma largura padrão; seria melhor criar layouts que funcionassem em uma série detamanhos de janela: os usuários têm tamanhos de monitores diferentes, com uma série deresoluçõ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 rolagemvertical 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 melhorcriar esse tipo de página independente de resolução, que pode adaptar-se às telas. Se não forpossível, o conselho seria supor que os usuários ainda vão usar 640 pixels nos próximosmuitos anos.As páginas Web que não são independentes de resolução não funcionam bem quandoimpressas: seria melhor oferecer versões impressas separadas para documentos longos.Páginas criadas para exibir larguras fixas ficaram horríveis quando impressas; saem comouma lista lateral estreita, desperdiçam papel, ou são cortadas, sendo largas demais para aimpressora. O layout típico de 600 pixels de largura, que funciona na maioria dos monitoresde computador, terá 21 cm de largura, quando impresso, na resolução de 72 pixels porpolegada. Já que as impressoras precisam de 0,6 a 1,2 cm de margem, a área imprimível emuma folha de papel carta tem entre 19 e 20 cm de largura. Ou seja, pelo menos 0,8 cm dapá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 dametade dos usuários restringiam-se a 256 cores e pouco mais da metade eram capazes deexibir milhões de cores. Dois anos depois, em 1999, apenas 11% dos usuários restringiam-se auma paleta de 256 cores, ao passo que 89% podiam visualizar milhares de cores ou mais.
  43. 43. 245Portanto, talvez estejam contados os dias em que teremos que criar para um número limitadode cores. Ao mesmo tempo, com o crescimento de dispositivos portáteis, se tornará necessáriaa 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, comrelação ao que é apresentado no monitor do usuário: o “líquido”, o “gelo” e o “gelatinoso”. Ostipos de sites “gelo” seriam os de dimensões fixas, congelados do lado esquerdo do monitor eque 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 umpouco mais flexíveis: se a resolução for alterada, os sites “gelatinosos” ficarão centralizadosna 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 comas dimensões da tela do usuário, sejam quais forem. Este tipo de projeto envolve longa etapade planejamento, durante o processo. Neste caso, o projetista deverá considerar não somentequestões como layout, aplicação de textos, títulos e inconsistências nas diferentes versões denavegadores, como também a visualização em qualquer largura ou altura de monitores deusuá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 proponhaa ser “líquido”. “Quando se deseja a perfeição em Design, a World Wide Web não é o localmais indicado.”O melhor método para testar o sucesso do Design “líquido” seria vizualizá-lo em diferentesbrowsers, 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 deflexibilidade pode ser considerado um caso bem sucedido de Design “líquido”.
  44. 44. 246Embora reconheçam-se vantagens no Design “líquido”, há os que percebem nele pontosnegativos. KALBACH (2001), por exemplo, observa as seguintes desvantagens: emresoluções mais altas, as linhas de textos se tornam muito alongadas, o que dificultaria aleitura. Além disso, esse estilo de site teria uma aparência de “ser barato, feito em HTMLpuro” - o que não se coadunaria com o padrão imposto pelos atuais stakeholders do mercado. FIGURA 5.3 – O site do Senac São Paulo seria do tipo “gelo”, na concepção de FINCK (1999).
  45. 45. 247FIGURA 5.4 – As larguras do portal Senac Nacional foram definidas como porcentagens dalargura visível da tela, em HTML, o que o torna adaptável a diversas resoluções (aqui 640 x 480 pixels).
  46. 46. 248 FIGURA 5.5 – O portal Senac aproxima-se do conceito de Design “líquido”, embora a sua melhor visualização seja determinada como 800 x 600 pixels.FINCK (1999) dá os seguintes exemplos de sites “gelo”: CNN.com e Adobe.com. Para odesigner, os seguintes sites seriam do tipo “gelatinoso”: The Web Standards Project, DigitalThread e HeadSpace. Os exemplos a seguir representam os poucos e bons sites de sucesso noconceito de Design “líquido”: Builder.com, FalkonDesign e ProjectCool.
  47. 47. 249 FIGURA 5.6 – Segundo FINCK (1999), o Design “líquido” permite uma visualização adaptada para qualquer resolução, como o Builder.Com (aqui, em 640 e em 1024 pixels).Observa-se ainda que usuários têm preferências com respeito ao tamanho de fontes, quepodem ser alteradas pelo navegador; portanto, o projeto deverá funcionar bem com fontesmaiores e menores, e não com preferências pessoais do designer. Em geral, recomenda-se não

×