Cap05 dissertacao agner
Upcoming SlideShare
Loading in...5
×
 

Cap05 dissertacao agner

on

  • 1,280 views

designer

designer

Statistics

Views

Total Views
1,280
Views on SlideShare
1,279
Embed Views
1

Actions

Likes
0
Downloads
10
Comments
0

1 Embed 1

http://www.docshut.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Cap05 dissertacao agner Cap05 dissertacao agner Document Transcript

  • 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
  • 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
  • 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).
  • 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).
  • 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).
  • 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
  • 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).
  • 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).
  • 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;
  • 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
  • 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
  • 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:
  • 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
  • 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
  • 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
  • 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.
  • 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:
  • 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,
  • 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:
  • 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):
  • 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.
  • 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”.
  • 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
  • 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).
  • 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
  • 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
  • 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
  • 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.
  • 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
  • 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
  • 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.
  • 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.
  • 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
  • 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
  • 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.
  • 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
  • 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,
  • 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
  • 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
  • 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.
  • 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).
  • 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.
  • 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”.
  • 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).
  • 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).
  • 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.
  • 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
  • 250incluir textos em formatos de imagem, pois isso retardaria a transmissão e exigiria esforçoextra para traduzir interfaces para outros idiomas (NIELSEN, 2000).Além disso, há que se levar em conta, também, a inércia de instalação: nos primeiros anos daWeb, usuários faziam atualizações de navegadores a uma taxa 2% por semana. Transiçõesentre versões acontecerão lentamente no futuro; a pressão para atualizar está ficando fraca.Nos primeiros anos, havia vantagens em se fazer atualizações, mas hoje não parecem ter omesmo nível de inovações. Atualmente, a população de usuários mudou de um grupo pioneirode entusiastas para uma massa de consumidores. A taxa de atualização caiu para cerca de 1%por semana em 1998 e em 1999. Por isso, o único formato que se poderia usar com totalconfiança é a especificação original HTML 1.0.Recomendar-se-ia a contanção em relação a novas tecnologias, até um ou dois anos após tersido introduzida em uma versão não-beta (versão de testes). Coisas que devem ser evitadas noprimeiro ano: novas versões de HTML, plug-ins (aditivos ao navegador HTML para permitira visualização de conteúdos gravados em formatos proprietários) e outros componentes,novos formatos de dados e qualquer recurso específico a certos navegadores.Haveria três razões para ser conservador nas inovações:- Com uma velocidade de atualização de cerca de 1% por semana, demorará um ano até quea maioria seja capaz de acessar a nova tecnologia – e dois anos antes que todos a possuam.- Mesmo depois que uma nova tecnologia abandona o status beta e passa a oficial, terá bugs(defeitos) que precisarão ser resolvidos, em versões subseqüentes.- Há muito ensaio e erro na determinação das novas tecnologias para comunicação com osusuários. Os primeiros a usarem novos recursos trazem mais prejuízos do que benefícios aosusuários.As principais exceções à regra de conter-se durante um ano são os consultores da Web quedesejam demonstrar sua mestria na tecnologia avançada. Entretanto, muitas pessoas têm seunavegador instalado por um amigo ou colega “superusuário”. Há na maioria das empresas efamílias indivíduos que apreciam a tecnologia pela tecnologia. Quando um superusuário
  • 251instala um browser para o usuário normal, este não terá conhecimento de como atualizá-lo. Oresultado desses dois fenômenos seria uma grande inércia, na qual as pessoas continuamusando a versão do navegador já instalada.Colecionando browsersSegundo NIELSEN (2000), o designer profissional deve ser um colecionador de browsers.Em primeiro lugar, deve, durante dois anos, verificar as páginas no browser antigo paracertificar-se de que funcionam. Em segundo lugar, invariavelmente receberá relatórios debugs de usuários que se queixam de seu site. E precisará de uma coleção de browsers à mãopara repetir o problema. Esses bugs devem ser corrigidos, pois certamente haverá outrosusuários com o mesmo problema.Prever o hardware, o software e as preferências do usuário era fácil nos primeiros anos daWeb:- Em 1991 e 1992, a maioria dos usuários tinha acesso em modo texto.- Em 1993 e 1994, a maioria dos usuários tinha o Mosaic.- Em 1995 e 1996, a maioria dos usuários passou a usar o Netscape.Mas, a partir de 1997, a noção de um browser canônico usado por todos foi abandonada, comexceção das intranets que padronizaram um único fornecedor. Para NIELSEN (2000), oInternet Explorer nunca mais terá a mesma dominância de mercado. Seria pouco provável queum único browser ofereça a interface ótima, sob condições amplamente variáveis – de umpequeno telefone com tela a uma revista virtual em tela plana. Os computadores nãotradicionais, como a WebTV e os assistentes pessoais, como o Palm Pilot, serãopredominantes. Esses dispositivos têm capacidades de exibição muito diferentes do PCtradicional. Além disso, navegadores baseados na voz logo serão realidade: a maioracessibilidade a usuários com deficiências é uma das razões da navegação baseada em voz; os
  • 252usuários que enxergam bem também se encontram em situações, como ao dirigir um carro,nas quais poderiam acessar informações em voz alta.Em vez de especificações de aparência no conteúdo, o melhor seria separá-lo das instruçõespara a exibição. As informações relativas à apresentação de informações devem ficar em umafolha de estilo, vinculada a um arquivo de conteúdo que contenha apenas marcaçõessemânticas. As folhas de estilo são um avanço da Web, mas ainda não foram empregadas comtodo seu potencial.5.10 - Limitações ao emprego da tipografia na WebDesign significa controle visual e a tipografia é um recurso poderoso, mas o atual estágio dalinguagem HTML gera muitas limitações ao seu emprego na Web. A alternativa seria usarimagens (bitmaps) para representar a tipografia na Web, mas muitos sites estão cheios detextos e usar a tipologia baseada em HTML se torna a única opção para apresentar grandesquantidades de informação de uma maneira rápida e eficiente, explica WEINMAN (1998). Amaioria dos navegadores padronizam a fonte Times Roman como o padrão de visualização ehá uma grande probabilidade da pessoa que está vendo uma página estar usando as fontespadrão. A vantagem de utilizar fontes baseadas em imagens gráficas (bitmaps) é que osusuários não precisarão possuir as fontes instaladas em seu sistema. Por ser um gráfico,aparece como qualquer outro, com sombreamentos, brilhos ou texturas que o designerespecificar. A desvantagem do método é o tempo de download, que tende a ser muito maiselevado. O ideal seria mesclar as duas técnicas (fontes e gráficos).Segundo LYNCH e HORTON (1999), seria muito importante considerar a largura das linhasna Internet. Uma das falhas das interfaces da Web seria a falta de aderência aos padrõesconvencionados de leitura. Segundo os dois autores, a leitura na tela se torna desconfortávelquando existem mais do que doze palavras por linha. Se houver uma longa distância entre ofinal de uma linha e o início da outra, os olhos terão que fazer um movimentosignificativamente grande para retornar à margem esquerda. Dessa forma, o leitor ficaráperdido e deverá se esforçar para encontrar o início da próxima linha. Estudos quantitativos
  • 253mostraram que linhas de comprimento moderado aumentam significantemente a legibilidadedos textos. Dessa forma, o uso de tabelas em HTML serviria para limitar o comprimento daslinhas a um valor ideal de dez a doze palavras por linha, facilitando a leitura dos sites –acreditam LYNCH e HORTON (1999).Uma das formas adequadas para o designer trabalhar as limitações do uso da tipologia na Webé através do emprego de folhas de estilo (CSS), sugere NIELSEN (2000). Entretanto, adverteque não se deve abusar dos truques, porque as páginas devem continuar eficazes para leituraquando o usuário desativa a opção de estilos em seu navegador. Além disso, não se deveempregar mais do que duas fontes: geralmente é possível usar um tipo para os textos e outroem negrito para os títulos. Uma terceira fonte seria aceitável para representar códigos decomputador. É recomendável também usar uma longa lista de fontes alternativas paraespecificar uma classe de texto na folha de estilo. O browser escolherá a primeira fontedisponível na máquina e a apresentará em todas as páginas. Assim, o Web site poderá setornar tipograficamente unificado.Por outro lado, deve-se evitar especificar a tipologia em tamanhos absolutos. Os tamanhos detipos devem ser definidos como porcentagens relativas ao texto principal (por exemplo:150%, 200% etc.). A preferência por fontes grandes ou pequenas depende de uma série defatores (a resolução do monitor, a visão da pessoa, se está lendo a tela sozinho, entre outros) ea determinação dos seus tamanhos deve ficar sob o controle do usuário (NIELSEN, 2000).5.11 - O Design da primeira página (home page)A home page têm se tornado a página mais valiosa dos sites. É nesse pequeno espaço de telaque são investidos milhões de dólares, com um impacto determinante sobre a imagem dasorganizações. Este impacto vai muito além do lucro comercial imediato. Cada vez mais,clientes em potencial irão examinar esse pequeno pedaço de tela de computador, antes dedesejar fazer qualquer negócio com empresas ou instituições. A home page é, portanto, apágina mais importante de qualquer Web site.
  • 254O papel da home page é comunicar o que é a organização e qual o valor adicional que o siteoferece sobre a concorrência e sobre o mundo físico, além de apresentar quais são os produtose os serviços oferecidos. Muitas são as metáforas a que se costuma recorrer para definir ahome page, mas nenhuma delas é capaz de defini-la completamente. Ressalta-se que aconsideração isolada de qualquer uma dessas metáforas pode levar a distorções de projeto.São elas: capa de revista, lobby de edifício, recepcionista de empresa, rosto para o mundo,sumário de livro, arte, folheto (brochura), primeira página de jornal etc.Todas essas metáforas têm alguma coisa de correto, embora todas apresentem diferençasquanto à verdadeira natureza de uma home page. É perigoso se inspirar em apenas umametáfora. A dificuldade de criar o Design de uma home page está no fato de que ela apresentaaspectos de todas as metáforas acima, mas, geralmente, o projetista acaba se direcionando aapenas uma delas - o que não é adequado, explica-nos NIELSEN e TAHIR (2001).É na home page que os usuários deveriam poder encontrar respostas em “zero clique” parasuas perguntas. Nela, não deveriam ser incluídos elementos que não ajudam em nada osusuários a completar suas tarefas ou a chegar a seus objetivos.O desafio seria, portanto, desenhar home pages que possibilitassem acesso a todos os serviçosimportantes do site, sem ter que transformá-los, necessariamente, em botões que entulham aprimeira página. Para isso, é preciso manter o foco e a clareza, além da compreensão exatados objetivos e das tarefas do usuário.Uma das mais importantes decisões do Design da home page é determinar quais os conteúdosque merecem a cobertura da página principal. Isto depende de quem são os usuários de cadasite e de quais são suas tarefas específicas, assim como dos objetivos estratégicos dasorganizações."Infelizmente, em muitos casos, questões políticas internas de cada organização influenciamno Design das home pages, mais do que os objetivos dos usuários. Não é raro quedepartamentos lutem politicamente entre si para colocar seus conteúdos na home page, numabatalha em que os melhores lobistas vencem. Mas o ideal seria dar voz às necessidades dosusuários - como fator chave nas decisões -, além de envolvê-los durante o processo doDesign", defende NIELSEN e TAHIR (2001), em seu recente livro sobre home pages.
  • 255Nota-se que a home page seria uma espécie de “nau capitânia”. Deveria ter um desenhopróprio, diferente das outras páginas, embora mantendo o estilo. A home page deve apresentaro logotipo e o nome da empresa em proeminência. A meta de toda home page seria responderàs perguntas “onde estou?” e “o que faz esse site?”, evitando terríveis declarações de missões,vistas em sites de empresas burocráticas. Em vez disso, deve-se deixar óbvio o objetivo paraos usuários que a visitam pela primeira vez (NIELSEN, 2000).Se, para um visitante de primeira viagem, mostrar o que o site faz é essencial, para a maioriados usuários, a home page deve servir como entrada para o esquema de navegação: issoassume a forma de uma lista de níveis superiores de um diretório hierárquico.A home page também seria o local ideal para veicularem-se notícias ou promoções, para atraira atenção dos visitantes. Mas a maioria das pessoas vem ao site para fazer algo específico -elas raramente se interessam por verificar o que está acontecendo na empresa ou que produtosela deseja vender. Portanto, a área de notícias deve ficar restrita e grande parte da página estardisponível à navegação. Mesmo em sites noticiosos, seria importante lembrar que usuários ovisitarão para pesquisar artigos específicos ou materiais antigos, que estão no seu interior.Por isso, as home pages precisam de um recurso de busca destacado, já que muitos usuáriosnão querem navegar até o destino final, link a link. Para sites em que a busca é o mecanismoprimário, faria sentido incluir a caixa de busca logo na parte superior da home page. No casode outro tipo de site, talvez baste um link simples (mas proeminente) para a página de busca.Em suma, a home page deve oferecer três recursos: um diretório com as principais áreas deconteúdo, um resumo das notícias ou promoções e um recurso de busca.Para NIELSEN (2000), o nome da empresa não precisa ser o maior elemento, mas ele deveestar no canto superior esquerdo da tela ou em outro ponto facilmente visto. O nome (ou logo)deve ser repetido em todas as páginas, pois os usuários podem entrar em qualquer página, enão apenas na home page: as pessoas que navegam a partir de mecanismos de busca, ouseguem links de outros sites, precisam saber em que site aportaram. Por isso, as páginasinteriores precisam concentrar-se em mostrar conteúdo específico e não em promover boas-vindas ou a visão geral do site; estas duas metas estão reservadas somente à home page.
  • 256Seria uma estratégia errada forçar todos os usuários a entrar no site através da home page: oschamados “links profundos” permitem que outros sites apontem aos usuários o local exatoque interessa. Um Web site seria uma casa com milhares de portas e haveria várias formas deentrar - a decisão de navegação está nas mãos do usuário.Existiria conflito entre a necessidade de atender às pessoas que entram em qualquer página e anecessidade de limitar informações gerais e auxílios à navegação na home page; a soluçãodeste conflito depende da freqüência esperada de pessoas entrando no site em páginas de nívelinferior – daí a necessidade de pesquisas sobre o que faz o usuário e o que ele deseja,informação que pode ser obtida, por exemplo, com a análise dos logs do servidor Web, entreoutras pesquisas.O mais importante seria tornar a home page um ponto de referência acessível com um simplesclique, de qualquer página do site, independente de como as pessoas lá entraram: ou seja, emtodas as páginas, o logotipo deve ser clicável e vinculado à home page. Infelizmente, nemtodos os usuários compreendem o uso do logotipo como um link para a home page edemorará um pouco até que esta convenção seja estabelecida, acredita o autor. Portanto, nospróximos anos, também será necessário ter um link explícito “home” ou “início”, em cadauma das páginas.5.12 - Tempos de resposta: o principal critério de Web DesignPesquisas em Ergonomia têm demonstrado que usuários de hipertextos precisam de tempos deresposta menores que 1 segundo para passar de uma página a outra e navegar com liberdadeno espaço da informação. Estudos realizados na IBM, nas décadas de 1970 e 1980,descobriram que usuários de mainframes (grandes computadores) eram mais produtivosquando o tempo entre pressionar uma tecla e o aparecimento da tela requisitada era inferior a1 segundo.Não se obterá tempos de resposta inferiores a 1 segundo na Web tão cedo; portanto, osnavegantes vão continuar sofrendo com downloads lentos. Atualmente, a meta mínima para
  • 257os tempos de resposta deve ser obter páginas em não mais do que 10 segundos, pois este seriao limite da capacidade humana de manter a atenção fixa no computador.Para NIELSEN (2000), um décimo de segundo (0,1) seria o limite para que o usuário sintaque o sistema está reagindo instantaneamente, ou seja, que nenhum feedback (resposta) énecessário, exceto exibir o resultado. Esse seria o limite do tempo de resposta para qualquerapplet (pequeno aplicativo) que permite aos usuários manipular objetos na tela, em temporeal.Um segundo seria o limite para que o fluxo de pensamento humano permaneça ininterrupto,embora o usuário perceba a demora do sistema. Geralmente, nenhum feedback especial énecessário durante demoras superiores a 0,1 e inferiores a 1 (um) segundo, mas o usuárioperde a sensação de operar diretamente os dados (exemplos: aplicações com banco de dadosou jogos).Dez segundos seria o limite para manter o usuário concentrado no diálogo: em caso dedemoras maiores, os usuários voltam-se para outras tarefas, enquanto esperam o computadorterminar. Obter uma nova página no prazo de até 10 segundos, embora irritante, significa queo usuário pode ficar concentrado na navegação.Para o especialista, tempos de resposta devem ser previsíveis, durante toda a operação dohipertexto. Se a mesma ação demorar sempre o mesmo tempo, usuários saberão o que esperar.Por isso, estabilizar os tempos de resposta resultaria em melhor usabilidade.Seria necessário ainda, ajudar os usuários a prever o tempo de resposta de páginasespecialmente grandes ou arquivos multimídia, indicando o tamanho do download. Ostamanhos devem ser informados caso demorem mais de 10 segundos, considerando a largurade banda predominante da audiência.O tempo de resposta experimentado pelo usuário durante o diálogo com o site é determinadopelo elo mais fraco na cadeia servidor-navegador:- a resposta do servidor;- a conexão do servidor com a Internet;- a Internet propriamente dita;
  • 258- a conexão do usuário com a Internet;- a velocidade de renderização do navegador e do computador do usuário.Cada um desses passos introduz demora na obtenção de uma página do servidor. Infelizmente,as demoras são acumulativas, ou seja, não se pode melhorar os tempos de respostas aomelhorar um único elo da cadeia. Deve-se levar em consideração também os tempos deresposta do servidor.Às vezes, recuperar uma página compreende conexões a mainframes ou a servidores debancos de dados, retardando o processo. Mas os usuários não querem saber o porquê dalentidão, só que o site não oferece um bom serviço. Tempos de resposta lentos são traduzidosem menor nível de confiança e perda de audiência.Os tempos médios de resposta das principais páginas do portal Senac Nacional forammonitorados, em agosto de 2001, através do seu link corporativo de 128 Kb com a Embratel, efoi gerada a tabela a seguir. Para cronometrar as medidas foram apagados os arquivostemporários de Internet do cache do computador - um Pentium 450 MHz, rodando Windows98. Página do portal Senac Tempos de resposta (médios) Home page (abertura) 19,5 s Página de saída (links para estados) 4,8 s Áreas de educação e atuação 5,6 s Área de informática 4,3 s Área de administração 4,0 s Área de artes 4,6 s Área de saúde 9,0 s Área de moda e imagem pessoal 3,3 s Área de conservação e zeladoria 3,0 s Subsite Editora Senac Nacional 5,6 s FAQ (perguntas freqüentes) 6,3 s
  • 259 Endereços nos estados 2,6 s Média geral 6,0 s TABELA 5.7 – Tempos de resposta obtidos para as principais páginas do portal Senac (2001).O resultado obtido mostra que o portal Senac Nacional apresenta tempo de resposta médiodentro dos limites aceitáveis propostos por NIELSEN (2000) para a navegação confortáveldos usuários. Isto acontece, possivelmente, devido à simplicidade do seu hipertexto e àeconomia de recursos gráficos e multimídias. O portal Senac também não utiliza acesso aservidores de bancos de dados - o que poderia retardar o diálogo com o usuário final.Observa-se, entretanto, que a primeira página (home page) demora mais para ser carregada -quase o dobro do tempo aconselhado por NIELSEN (2000). Esse fato ajuda a embasar ahipótese de trabalho considerada para esta dissertação de mestrado e a explicar, em parte, osproblemas observados no portal – como a desistência de usuários diante de sua home page.Voltaremos a discutir esse assunto, mais adiante, nos próximos capítulos deste trabalho.Nas tabelas apresentadas a seguir, registram-se dados relativos aos tempos de resposta obtidospor sites pertencentes ao mainstream da Internet brasileira, pesquisados por alunos do Cursode Pós-Graduação em Design de Interfaces da Universidade Carioca (2001), em situações deconexão doméstica de no máximo 56 Kbps – tendo sido o levantamento realizado emdiferentes bairros do Rio de Janeiro, e em máquinas diferentes. Foi solicitado aos alunos querepetissem a experiência cinco vezes e que calculassem uma média aritmética simples, semprecom a liberação da memória cache do computador. Mesmo que as condições de medição nãotenham sido totalmente controladas, o resultado nos mostra um tempo de resposta longo paraum bom número de Web sites.
  • 260 Portal Bradesco Tempos de resposta (médios) Home page (abertura) 35 s Novos horários 1s Acesse sua conta 5s Private 15 s Financie um micro 17 s Cartões Bradesco 17 s Média geral 15 sTABELA 5.8 – Tempos de resposta obtidos para as páginas do portal Bradesco (2001). Portal Anatel Tempos de resposta (médios) Home page (abertura) 1min 34s Central de atendimento 36 s Sistemas interativos 19 s Consultas públicas 16 s Reajustes 20 s Telefonia fixa 25 s Média geral 35 s TABELA 5.9 – Tempos de resposta obtidos para as páginas do portal Anatel (2001).
  • 261 Portal Globo.Com Tempos de resposta (médios) Home page (abertura) 12 s Globo Compras 30 s Diversão e arte 20 s Notícia sobre arte em Veneza 20 s Tempo 30 s Média geral 22,4 sTABELA 5.10 – Tempos de resposta obtidos para as páginas do portal Globo.Com (2001). Portal X (Xuxa) Tempos de resposta (médios) Home page (abertura) 40 s Xuxa Meneghel 12 s Biografia 40 s Plano astral 19 s Baby Xuxa 16 s Média geral 25,4 s TABELA 5.11 – Tempos de resposta obtidos para as páginas do portal da Xuxa (2001). Shell do Brasil Tempos de resposta (médios) Home page (abertura) 64 s Institucional 30 s Shell na sociedade brasileira 20 s RH 18 s
  • 262 Produtos e serviços 18 s Média geral 30 s TABELA 5.12 – Tempos de resposta obtidos para as páginas do portal Shell do Brasil (2001). Metropolitan / ATL Hall Tempos de resposta (médios) Home page (abertura) 1min 10 s Pontos de venda 17 s Agenda de shows 23 s Próximas atrações 20 s Conheça o ATL Hall 21 s Média geral 30,2 s TABELA 5.13 – Tempos de resposta obtidos para as páginas do portal ATL Hall (2001).Os dados das tabelas acima mostram que, pelo menos no quesito tempos de resposta, o portaldo Senac apresenta boa performance de usabilidade, em comparação com outros conhecidosportais da Internet brasileira. Assim como o Senac Nacional, muitos portais analisadosofereceram maior carga de download na primeira página (home page), em comparação com aspáginas interiores de conteúdo - desmotivando o usuário logo em sua entrada. Ressalta-se que,entre os sites investigados, figuram tradicionais vencedores do prêmio “IBEST – o oscar daInternet brasileira”, um evento que privilegia aspectos ligados ao marketing das empresas naWeb e que pode inspirar futuros trabalhos de pesquisa no campo da Ergonomia e dausabilidade da Interação Humano-Computador (HCI).
  • 263“A velocidade deveria ser o principal critério de Design.” Para isso, “devem-se mantertamanhos de página pequenos, número de elementos gráficos reduzido e efeitos demultimídida somente quando estes ajudam o usuário a compreender a informação”, defendeNIELSEN (2000).O uso conservador de gráficos e multimídia não implica páginas desinteressantes. Pode-sefazer muita coisa com células de tabela coloridas e uso criativo (mas restrito) de fontes. Emparticular, as folhas de estilo podem ser empregadas para melhorar o Design de páginas, semque estas sejam prejudicadas pela demora do download.Quando é necessário usar gráficos, deve-se adotar ocorrências da mesma imagem, em vez deimagens diferentes, pois as ocorrências de um mesmo arquivo de imagem são transmitidasrapidamente, já que estará no cache local do usuário. A reutilização freqüente de um pequenovocabulário virtual não só acelerará o download como também dará consistência visual a todoo site.O conceito de tamanho de página na Web“Define-se o conceito de tamanho de página como a soma dos tamanhos dos arquivos detodos os elementos que compõem a página - inclusive o arquivo de HTML que a define - comtodos os objetos incluídos (por exemplo: arquivos de imagens GIF ou JPG).”A tabela a seguir mostra o tamanho de página máximo para se obter os tempos de respostadesejados, em várias velocidades de conexão, segundo NIELSEN (2000).
  • 264Tipo de conexão Tempo de resposta de Tempo de resposta de 1 segundo 10 segundos Modem 2 Kb 34 Kb ISDN 8 Kb 150 Kb T1 100 Kb 2 Mb TABELA 5.14 - Tamanhos de páginas em Kbytes e seus respectivos tempos de resposta, para diferentes conexões com a Internet, segundo NIELSEN (2000).Os tempos de resposta específicos das multimídias também foram abordados pelo autor.Elementos multimídia são grandes e seu download muito demorado, nas larguras de bandabaixas disponíveis para a maioria dos usuários. O autor recomenda que o formato e o tamanhode arquivos multimídia sejam indicados em parênteses após o link, sempre que o downloaddemorar mais que 10 (dez) segundos. Se o designer não souber a largura de banda usada porseus visitantes, deve realizar uma pesquisa, pois esta informação será importante para váriasquestões relativas ao Web Design. A maioria dos usuários domésticos têm no máximo 56Kbps - ou seja, arquivos maiores do que 50 Kb precisam apresentar um alerta sobre seutamanho.Antes de os usuários decidirem investir seu tempo num download de multimídia, é necessárioque compreendam o que obterão. Não clicam em algo apenas porque está disponível, há muitacoisa na Web atualmente. Tanto no caso do áudio quanto no caso do vídeo, deve-se escrever oresumo do que o usuário ouvirá ou verá. O designer deveria, ainda, restringir-se ao uso deformatos que funcionam com software antigo, pois muitos usuários deixam de fazeratualizações do navegador (browser). Se os usuários forem obrigados a fazer download denovos plug-ins ou a instalar mais softwares para ver o site, a maioria desistirá da interação.
  • 2655.13 - Modelos de avaliação para Design de telasDesde meados dos anos 80, houve várias tentativas de desenvolvimento de modelos quepoderiam auxiliar o Design e a avaliação da diagramação das telas de computador. Cadamodelo adotou um tipo de abordagem diferente ou focalizou distintas categorias de telas.TULLIS (1997) informa que desenvolveu um programa, batizado de Screen Analyzer, paramensurar telas de computador no modo caracter, sob os aspectos de densidade global,densidade local (a medida do número de outros caracteres junto a cada caracter), número deagrupamentos visuais, tamanho médio dos grupos, alinhamento e número de elementos deinformação. O programa foi aplicado na avaliação quantitativa de centenas de telas, quanto aotempo de obtenção de informações e aspectos subjetivos.Uma variedade de outras técnicas de mensuração e sistemas de medição foram desenvolvidospara auxiliar a criação de telas eficazes. Esses sistemas cresceram para conter definições cadavez mais ricas de características visuais das interfaces, assim como das tarefas dos usuários:existe a expectativa de que seja criado um padrão ou um sistema para redesenharautomaticamente interfaces gráficas. Entretanto, ainda não há consenso sobre a validadedessas pesquisas ou sobre seus resultados.Apesar de seu exaustivo trabalho, TULLIS foi muito criticado por seus colegas pesquisadores,mas o próprio TULLIS (1997) afirma que esse modelo de ferramenta automatizada nãopoderá substituir totalmente o julgamento de um designer ou os testes com os usuários,embora possa vir a servir como um complemento no processo de Design.SCHWARTZ (apud MAYHEW, 1992) notou que as pesquisas de TULLIS tiveram comopremissa apenas a realização de uma tarefa simples: a procura de informações. Essepesquisador desenvolveu um estudo para determinar se o Design de telas identificado porTULLIS teria a mesma performance se aplicado a diferentes tarefas. Quatro tipos de tarefasforam incluídas no estudo: (1) escaneamento, (2) detecção de padrões, (3) julgamentosmúltiplos, e (4) alocação de energia. As dimensões de Design de telas propostas por TULLISnão tiveram efeitos claros nos três últimos tipos de tarefas. Desse modo, parece que diferentesdimensões de tarefas deverão resultar em diferentes pré-requisitos para as telas. Embora asconclusões de TULLIS possam ser generalizadas para telas que envolvem a procura de
  • 266informações, suas conclusões provavelmente não poderão ser generalizadas para interfacesque envolvem outros tipos de tarefas.Mais pesquisas serão necessárias para associar as principais categorias das tarefas àsdimensões de Design relevantes. Enquanto isso não ocorre, os designeres devem considerar otrabalho de TULLIS somente quando a procura de informações é o principal componente dastarefas do usuário. Mas devem testar, empiricamente, os projetos de telas, especialmentequando as tarefas envolvem monitoramento ou processos complexos de decisão – aconselha aautora.Limitações ao modelo de TULLIS foram apontadas por PERLMAN (1987), apud MAYHEW(1992). Ele notou o seguinte: (1) o modelo TULLIS não leva em consideração efeitosgerados por caracteres quase gráficos, como linhas, bordas, negritos, cores e videos reversos,entre outros, (2) o modelo TULLIS não considera a estrutura subjacente da informação, (3) omodelo TULLIS é somente descritivo; não é diagnóstico nem prescritivo. Embora o número eo tamanho dos agrupamentos sejam fatores importantes, PERLMAN ressaltou que a maneiracomo a informação é dividida em grupos seria também importante, mas o modelo TULLISnão considera esta questão.Um outro estudo - realizado por WILLIAMS and LEAF (1986), apud MAYHEW (1992) -,apontou que as previsões do tempo de procura de informações do modelo TULLIS nãolevavam em consideração julgamentos de facilidade de uso feitos por usuários experientes epor designeres considerando aspectos semânticos e espaciais do agrupamento e doalinhamento. Um aspecto que não foi levado em consideração por TULLIS e estudosrelacionados seria o nível de experiência do usuário.Mais pesquisas seriam necessárias para determinar as diretrizes e princípios de Design detelas com relação à experiência do usuário. Se o modelo TULLIS enfatiza certos parâmetrosimportantes de desenho de telas, ele não é uma ferramenta completa. Os designeres deveriamconsiderar um grande número de parâmetros para além do simples layout espacial,considerados pelo modelo TULLIS: os próprios valores de parâmetros considerados,
  • 267provavelmente, irão depender das características do usuário e da tarefa – explica-nosMAYHEW (1992).Segundo SEARS (1992), TULLIS investigou a performance de usuários para displaysalfanuméricos não interativos: explorou a relação entre formas de avaliar uma tela, como adensidade de informações, a densidade local, o agrupamento de objetos, a complexidade dolayout e o tempo requerido para extrair informações de um display. TULLIS foi uminvestigador que conduziu experimentos e desenvolveu equações e modelos para predizer otempo de procura e taxas de preferência dos usuários. Entretanto, sem descrição das tarefas, omodelo TULLIS não seria capaz de avaliar a adequação de uma interface para tarefasespecíficas. TULLIS teria apresentado somente valores recomendados para guiar designeres,em cada item do Design de telas, mas não explorou as descrições de tarefas.Por outro lado, PERLMAN desenvolveu um modelo axiomático para apresentação deinformações. O modelo permitiu que designeres especificassem relações entre informaçõesapresentadas e regras para estes relacionamentos. Um protótipo incorporou este modelo eapresentou feedback sobre os problemas nas interfaces. Entretanto, não haveria mecanismospara comparar layouts alternativos.A única contribuição do modelo PERLMAN seria o fato de que ele começa com a intenção dodesigner. Isso significa um avanço em relação ao trabalho de TULLIS, que não incorpora nemas intenções do designer, nem tarefas do usuário; no entanto, enfatiza o designer e não ousuário. Embora a intenção do designer possa ser gerar regras e relações que reflitam tarefasdo usuário, nenhuma descrição de tarefas é explicitamente incorporada no modelo proposto.Outro método citado por SEARS (1992) é o “GOMS” (Goals, Operators, Methods andSelection Rules). É um método baseado nos objetivos (goals) do operador e nas regras deseleção utilizadas por ele. Este método é usado para descrever o conhecimento que o usuáriotem ao desempenhar tarefas, num determinado sistema. Desenvolver análises pelo método“GOMS” e construir modelos de produção pode se tornar difícil. Embora a estruturahierárquica de uma análise pelo método “GOMS” providencie um bom quadro para análise detarefas, utilizá-lo requer treinamento, de tal modo que pode se tornar caro ou impraticável.
  • 268Um outro pesquisador, LOHSE, citado por SEARS (1992), desenvolveu modelo para predizero tempo necessário para que o usuário extraia informações de um gráfico. Este trabalhofocalizou-se nos locais onde os usuários fixam seu olhar e em tarefas cognitivas requeridaspara cada passo da interação. O modelo de LOHSE simplesmente prediz a quantidade detempo necessária para se responder a uma questão, trabalhando apenas com tarefas cognitivasde baixo nível. Um outro tipo de trabalho proposto é o chamado “cognitive walkthrough”:técnicas relativamente novas, nas quais o designer ou a equipe, especifica tarefas a seremdesempenhadas pelos usuários e a seqüência de ações necessárias para completá-las. Quandoos passos são completados, avalia-se a facilidade de aprendizado para a interface proposta.Inicialmente, estas análises foram desenvolvidas para a avaliação de temas “walk up and use”e muitas aplicações da técnica foram reportadas com variados graus de sucesso.Numerosos outros sistemas de pesquisa foram desenvolvidos, para, automaticamente ousemiautomaticamente, gerar interfaces para o usuário. Esses sistemas variaram muito: algunsbasearam-se na estrutura interna da informação a ser apresentada aos usuários e, outros, emuma gama de diretrizes (guidelines). A maior parte desses sistemas permite aos designeresmodificar o layout gerado automaticamente. Se, por um lado, esses sistemas são úteis -gerando interfaces equilibradas, seguindo diretrizes gerais de Design e agrupandoinformações relacionadas - eles não incluem informações que dizem respeito às tarefas dousuário, explica-nos SEARS (1992).Outro sistema abordado pelo autor é o de CASNER e LARKIN, que utiliza descrições detarefas para gerar displays gráficos visando à extração de informações. Infelizmente, nenhumaanálise é apresentada para o designer, de tal modo que o profissional fica com muitasalternativas de telas e pouca informação sobre quais delas poderiam gerar a melhorperformance para o usuário.Especialistas em fatores humanos utilizaram também a análise de links para redesenhardisplays, equipamentos ou salas. A análise de links inclui a localização de objetos e valoresatribuídos a cada link entre objetos. Os valores dos links podem representar a freqüênciarelativa dos movimentos de um objeto para outro sua importância ou qualquer outro dado deinteresse. O objetivo da análise de links seria minimizar a soma dos valores de linksmultiplicados pelas distâncias entre os links.
  • 269De acordo com SEARS (1992), designeres monitoram muitos aspectos do projeto de umainterface, na medida em que está sendo criada. O método do Layout Appropriateness (L.A.)poderia monitorar automaticamente várias medidas, reduzindo demandas dos designeres epermitindo que eles se concentrem em outros aspectos da interface. A computação pelométodo L.A. tira vantagem de descrições de freqüências de tarefas simples, para determinar olayout ótimo. Se, por um lado, a análise de tarefas mais aprofundada pode ser útil,desenvolvê-la esta análise detalhadamente é difícil e dispendioso. Nesse caso, os designerespodem desenvolver uma versão simplificada da análise para coletar a freqüência e a seqüênciade ações dos usuários, assim como outras informações necessárias para computar o L.A.. Nocaso de existir uma interface pronta, os designeres podem coletar dados do seu uso real.Diante de uma descrição de tarefa simplificada e de uma gama de objetos a serem organizadosna tela, um layout otimizado do tipo L.A. pode ser computado.O L.A. enfatizaria os processos mais freqüentes enquanto incorporaria também métodosmenos freqüentes, considerando a seqüência de ações que forma as tarefas. Os designerespoderiam então comparar layouts existentes ou propostos de forma gráfica ou utilizar amétrica do L.A., para determinar se mudanças deveriam ou não ser efetuadas na interface. Namedida em que a totalidade dos critérios importantes não puderam ser incluídos nosalgoritmos do L.A., os designeres permanecem com a liberdade total para tomar as decisõesfinais.Aplicar o método proposto por SEARS (1992) seria útil em duas situações: primeiro, no casode uma nova interface estar sendo desenhada. Neste caso, o L.A. pode gerar um layout inicialque o designer modifica posteriormente, se necessário. Segundo, se layouts alternativosexistirem, o designer pode utilizar o método L.A. para compará-los. O layout gerado peloL.A. também pode ser comparado com um layout gerado pelo designer.O L.A. se propõe a suplementar outras métricas e não tem a palavra final. Idealmente,métricas adicionais deveriam ser desenvolvidas e utilizadas em conjunto com o método L.A.para fornecer feedback aos designeres, no que concerne aos possíveis efeitos de mudançassobre a performance do usuário. Prover feedback adicional será benéfico para tanto osengenheiros de software, que ocasionalmente devem enfrentar o desafio de desenhar umainterface, quanto para designeres experientes, afirma SEARS (1992).
  • 2705.14 Conclusões deste capítuloPara concluir este capítulo, observamos que a abundância de diretrizes (guidelines) queabordam o Design de telas de sistemas informatizados pode nos levar a acreditar que existemmuitas evidências empíricas relacionadas ao Design de telas. Mas isso não é verdade: hápoucos estudos relevantes, sendo que muitos problemas de telas precisam ser testadosempiricamente.No que se relaciona ao Web Design, a questão fica mais delicada: acredita-se que uma décadade pesquisas e de comprovação de hipóteses ainda será necessária para se chegar a diretrizesque norteiem os projetos dos designeres. Isso coloca as pesquisas com usuários na ordem dodia.Conhecer quem são os usuários finais é a etapa fundamental do processo de Design deinterfaces: o mais importante na Internet é que cada serviço precisa ser baseado na análise dosobjetivos dos seus usuários específicos, assim como nas suas necessidades e tarefas. É issoque será considerado neste trabalho, inclusive quanto à avaliação do Design de telas.Nesta pesquisa de mestrado, empregaremos as técnicas da análise de conteúdo e doquestionário online para conhecer o perfil real e as opiniões e atitudes do usuário, tal comoserão pormenorizadas no próximo capítulo, que aborda métodos e técnicas utilizados.
  • 271Referências deste capítuloFINCK, Nick. Liquid web design: build it right and it will work no matter what the container. 1999.Digital Web Magazine. Disponível em: <http://www.digital.web.com/>. Acesso em: jul. 2001.KALBACH, James. The myth of 800 x 600: Web Review – Cross training for web teams. 16 mar.2001. Disponível em: <http://www.webreview.com/>. Acesso em: jul. 2001.LYNCH, Patrick J.; HORTON, Sarah. Web style guide: basic design principles for creating websites. New Haven: Yale University Center for Advanced Instructional Media, 1999. 165 p.MANDEL, Theo. The elements of user interface. New York: W. Computer; J. Wiley & Sons, 1997.432 p.MARCUS, Aaron. Metaphor design in user interfaces. In: International Conference on Human-Computer Interaction, 9º, 2001. Tutorial # 5: user – interface design for work, home and on the way.California: A. Marcus and Associates, 2001. Coletânea de obras do autor apresentada nessaConferência.______. Principles of effective visual communication of graphical user interface design. In:International Conference on Human- Computer Interaction, 9º, 2001. Tutorial # 5: user – interfacedesign for work, home and on the way. California: A. Marcus and Associates, 2001. Coletânea deobras do autor apresentada nessa Conferência.MAYHEW, Deborah J. Principles and guidelines in software user interface design. New Jersey:Prentice Hall, 1992. 610 p.
  • 272NIELSEN, Jakob. Designing web usability: the practice of simplicity. Indianapolis: News Riders,2000. 420 p.__________.; TAHIR, Marie. Home page usability: 50 websites deconstructed. Indianapolis. NewsRiders, 2001. 322p.PAAP, Kenneth R.; COOKE, Nancy J. Design of menus. In: HANDBOOK of human-computerinteraction. Amsterdam: Elsevier,1997. p. 533-573.SEARS, Andrew. Layout appropriateness: a metric for evaluating user interface widget layout.In: UNIVERSITY OF MARYLAND. Human Computer Laboratory & Computer Science Department.Technical Reports. Dez. 1992. Disponível em: <http://www.cs.umd.edu/library/TRS/.>. Acesso em:jun. 2001.TULLIS, Thomas, S. Screen design. In: HANDBOOK of human-computer interaction. Amsterdam:Elsevier, 1997. p. 503-532WEINMAN, Lynda. Design gráfico na Web. 1. ed. São Paulo: ed. Quark do Brasil, 1998. 448p.