Iu - Design de Telas Para Web

8/8/2019 Iu - Design de Telas Para Web

1/13

1

DESIGN DE INTERFACE PARA WEB

1. Layout

1.1. Consideraes

O projeto visual de uma pgina naWeb deve ser fcil de aprender e usar pelo fato de empr

efetivamente a comunicao visual e a esttica. Ele uma ferramenta importante para a comunicaComo voc organiza a informao na pgina pode fazer a diferena entre comunicar uma mensadeixar o usurio perplexo ou sobrecarregado. At mesmo a funcionalidade da pgina pode ser afela no tiver uma apresentao bem projetada. Um bomlayout depende do contexto em que est inserie cumpre uma proposta maior do que simplesmente decorativa, pois todos os elementos visuais infuns aos outros.

1.2 Recomendaes

1. Use fr ames com cuidado.O uso de fr ames pode ajudar a orientar o usurio a navegar no site , mas cuidado com o momento

impresso para no imprimir o fr ame errado.2. Recomenda-se agrupar os diferentes tipos de informao da sua pgina naWeb. (Kristof e Satran, 1995) Ns organizamos o que lemos e o que pensamos sobre uma informao, agrupando-a espacAgrupe cada item de informao em pequenos nmeros de 2 7 por categorias.(Mullet e Sano, 1995)

3. Use cores e cones para atrair a ateno da sua pgina naWeb. (Marcus, 1992)O olho sempre atrad por elementos coloridos antes dos elementos em preto e branco e por desenhos antes do texto.

4. Respeite as convenes delayout de leitura da informao.Em pases ocidentais isto significa da esquerda para a direita e de cima para baixo. As informaimportantes devem estar localizadas no canto superior esquerdo.(OSF/Motif, 1990)

5. Quando a informao posicionada verticalmente, alinhe oslinks por suas extremidadeesquerdas (em pases ocidentais).(Schriver, 1997)

6. Quando projetar a organizao e a composio de elementos visuais da sua pgina nWeb ,recomenda-se respeitar os seguintes princpios: hierarquia de informao, foco e nfase, estequilbrio, relao de elementos e unidade de integrao.

1.3 Hierarquia de InformaoEste princpio diz respeito disposio da informao dentro de uma pgina naWeb baseada em suimportncia relativa com os outros elementos visuais. O resultado dessa disposio afeta todos o princpios de organizao e composio de umlayout e determina que informao o usurio v e o ele encorajado a fazer primeiro. Para utilizar este princpio, faa estas perguntas:y Qual informao mais importante para o usurio? (Em outras palavras, quais so as prioridadeusurio quando encontrar seu site ?).y O que o usurio quer ou precisa ver em primeiro, segundo, terceiro lugares, e assim por diante? usurio v primeiro deve corresponder prioridade do usurio).


2/13


3/13

3

2 Cor

2.1 Consideraes

A cor uma importante propriedade esttica em uma pgina naWeb . Devido a suas qualidades atrativa podemos usar a cor para identificar os elementos que devem atrair a ateno do usurio.Quando usada indiscriminadamente, a cor pode ter um efeito negativo ou de distrao. Isso pode asomente a reao do usurio em relao pgina, mas afetar a produtividade, pois se torna difcil na tarefa.(Windows, 1995)Aqui ns vamos tentar responder s questes mais freqentes dos projetistas e usurios de mgrficos de computadores coloridos como: Que cores eu devo usar? Quantas cores eu devo usarcores so apropriadas? Como eu posso melhor-las?

2.2 Percepo e Efeitos da Cor

2.2.1 Recomendaes

1. Recomenda-se que as cores de uma pgina naWeb no sejam selecionadas separadamente, e s

dentro de um contexto geral.(Robertson, 1993)

A aparncia de uma janela pode ser alterada quando outras janelas so abertas na mesma tela.

2. Recomenda-se que sejam respeitadas as diferenas culturais e fisiolgicas entre os ind(Robertson, 1993)Pessoas idosas tm uma sensibilidade reduzida para cores, o que, por sua vez, pode requerer o usomais brilhantes.

3. Evite usar azul para pequenas reas.(Robertson, 1993)Uma pequena rea em azul vai parecer mais desbotada do que uma grande rea da mesma cor.

4. Evite o uso do azul e do vermelho, simultaneamente.(Robertson, 1993)O azul e o vermelho tm diferentes profundidades de foco e esse processo fatigante para humano.

2.3 Cdigo de Cores

2.3.3 Recomendaes

1. As cores que voc usar devem satisfazer as propostas da pgina naWeb . (Windows, 1995)As cores no devem ser usadas indiscriminadamente, somente como elemento decorativo.

2. Recomenda-se o uso de um grupo limitado de cores, dando ao usurio a opo de mud-las(Windows,1995)Desse modo as pginas de um mesmosite estaro mais propensas a terem um padro consistente.

3. Quando permitir que sua pgina naWeb mude de cores, considere a complexidade da tarefahabilidade do usurio.(Windows, 1995)Permita que o conjunto de cores-padro possa ser recupervel e restabelecido para que o usurio perca na realizao da tarefa devido ao uso indiscriminado da cor.(ISO 9241-8)

4. Use a cor como uma forma de informao adicional ou aumentada.(Windows, 1995)Evite confiar na cor como o nico meio de expressar um valor ou uma funo particular.


4/13

4

5. Use cor para realar ao invs de usar sublinhado (e use sublinhado ao invs de itens pi(Nielsen, 1996)Restrinja o uso do sublinhado paralinks para no confundir o usurio.

6. Sempre que possvel, evite usar cores muito quentes, tais como o rosa e o magenta.(Robertson, 1993)As cores muito quentes parecem pulsar na tela e ficam difceis de focalizar.

7. Se for usado um fundo colorido, selecione as cores do texto de modo a obter o contraforte entre o texto e o fundo. Isso aumenta a visibilidade e a legibilidade do texto.

8. No use vrias cores em uma nica pgina.Isso distrai a ateno do usurio e causa a perda de foco na atividade principal.

9. Forma, localizao e rtulos de texto so outras maneiras de distinguir a informao.(Windows, 1995)(Robertson, 1993)A cor no deve ser o principal elemento para esse fim.

10. Use cores brilhantes e contrastantes com cautela.(Robertson, 1993)Esses elementos atraem a ateno do usurio e o seu emprego deve ser reservado paraimportantes; caso contrrio o usurio pode achar mais difcil saber para onde olhar e ficar confuso.

11. Use cores monocromticas para o texto sempre que for possvel.(Robertson, 1993)As cores monocromticas so mais ntidas aumentando a legibilidade e visibilidade do texto.

12. Recomenda-se o uso de uma cor neutra para fundos.As cores neutras (por exemplo, cinza-claro) aumentam a visibilidade das outras cores.

13. Evite reas piscando sempre que possvel.(Robertson, 1993) (Nielsen, 1996)Quando isso for realmente necessrio, lembre-se de no usar mais que uma rea piscando ao mesmo

14. Recomenda-se usar o mximo de duas cinco cores.(Marcus, 1992)

No que diz respeito cor, melhor ser conservador. Para usurios novatos o uso de quatro cores dmais apropriado.

15. Use um cdigo de cores consistente e familiar, com referncias apropriadas.(Marcus, 1992)As denotaes comuns no ocidente so as seguintes:Vermelho: pare, perigo, quente, fogo;Amarelo: cuidado, devagar, teste;Verde: ande, OK, livre, vegetao, segurana;Azul: frio, gua, calmo, cu;Cores quentes: ao, resposta requerida, proximidade;Cores frias: status, informao de fundo, distncia; Cinzas, branco e azul: neutralidade.

16. Recomenda-se o uso da mesma cor para agrupar elementos relacionados.(Marcus, 1992) importante ser consistente no agrupamento de cores. No use uma cor particular para um elemno esteja relacionado com outro elemento.

17. Use o mesmo cdigo de cores para treinamento, teste, aplicao e publicao.(Marcus, 1992)Uma vez estabelecido o cdigo de cores, as mesmas cores devem ser usadas por todo o ciclo de disseminao e gerao de conhecimento.


5/13

5

2.3.2 Observaes

1. Ao mesmo tempo em que voc pode usar cor para mostrar relao ou agrupamento, assoccor com um significado particular no sempre bvio ou fcil de aprender.(Windows, 1995)2. Cores monocromticas parecem ser mais ntidas do que as cores policromticas.(Robertson, 1993)3. As pessoas gostam de displays coloridos.(Guimares, 1997)4. Cor uma propriedade muito subjetiva e o que agradvel para voc pode ser desagradoutro.(Windows, 1995)

5. A interpretao da cor pode variar culturalmente, e, at mesmo em uma nica cultassociaes individuais podem diferir.(Windows, 1995)6. Aproximadamente 8% dos homens e 0,5% das mulheres tm deficincia em visualizarsendo que a mais freqente a falta de habilidade para distinguir o vermelho, o amarelo e o verde(ISO 9241-8)7. Cores muito quentes podem parecer pulsar na tela.(Robsertson, 1993)8. Cores complementares, como vermelho e verde, podem tornarem-se difceis para o olho foca9. Cores escuras tendem a retroceder o espao visual, enquanto que cores claras fazem ovisual vir para frente.


6/13

6

3 Fundo3.1 Consideraes

O fundo de uma pgina naWeb composto por padres de texturas e/ou cores. A escolha do fdesempenha um papel muito importante no resultado final de uma pgina. Ele pode aumentar o pelo projeto visual.Para que esse fundo seja harmonioso com o restante da pgina ele deve seguir as recomendobservaes sobre cores.

3.2 Recomendaes

1. Recomenda-se usar cores neutras para o fundo de uma pgina naWeb . (ISO 9241-8)Cores neutras, usadas para fundos, aumentam a legibilidade do texto.

2. No use fundo muito carregado.(Kristof e Satran, 1995)Isso faz com que sua pgina fique demorada para carregar.

3. No use cores muito escuras para fundo de toda a pgina.(Kristof e Satran, 1995)

Em pequenas reas elas ajudam a direcionar a ateno do usurio, mas em toda a pgina elas aumcansao visual.

4. No utilize elementos aleatrio como fundo de uma pgina naWeb . (Kristof e Satran, 1995)O elemento de fundo da pgina deve aumentar o entendimento do seu contedo.

5. Se for usado um fundo colorido, selecione as cores do texto de modo a obter o contraste mentre o texto e o fundo.(Robertson, 1993)Isso aumenta a visibilidade e a legibilidade do texto.

3.3 Observaes

1. Utilize fundos simples para no comprometer a compreenso da pgina, a legibilidade do tetempo para ser carregada.

2. O fundo no deve chamar mais ateno do que a informao.

3. Use figura (texto, cones, figuras, etc) cromtica (azul, verde, vermelho, etc) sobre fundo acr(branco, preto e cinza) e vice versa.(ISO 9241-8)


7/13

7

4 Fontes4.1 Consideraes

As fontes tm muitas funes de modo a propiciar formas de letras para a leitura. Assim comelementos visuais, as fontes organizam a informao ou criam uma disposio particular.Variando o tamanho e o peso de uma fonte, ns vemos um texto como sendo mais ou importante e, tambm, percebemos a ordem em que ele deve ser lido. Pela prpria natureza dacomputador, as fontes so geralmente menos legveis na tela do computador do que quando impre4.2 Esquema de Fontes

4.2.1 Recomendaes

1. Recomenda-se o uso fontes com serifa.(Marcus, 1992)Estudos mostram um pequeno aumento de legibilidade em fontes com serifa.

2. Limite o nmero de fontes e estilos em uma mesma pgina.(Robertson, 1993)Use o mximo de duas fontes (por exemplo, Ar ial e Times New Roman ), duas inclinaes (romanoitlico), dois pesos (regular e negrito), e quatro tamanhos (ttulo principal, subttulo, texto e nota de).(Marcus, 1992) (Mullet e Sano, 1995)

3. No recomendado o uso de fontes muito grandes.(Nielsen, 1996)O uso de fontes muito grandes d ao usurio a impresso de que o texto est gritando com ele.

4. Recomenda-se usar fontes com caixas alta e baixa.(Robertson, 1993)Fontes com caixas alta e baixa usadas juntas so mais legveis e compreensveis.(Guimares, 1997)

5. Recomenda-se que a seleo da fonte seja feita de acordo com o tipo de documentexecutado.(Marcus, 1992)Tipos com serifa so mais apropriados para documentos formais. Para literatura pode ser utilizados

sem serifa, Helvtica ou A

r ial .6. Use, sempre que possvel, o sistema-padro de fontes para elementos comuns do site . (Windows,1995)O uso de um sistema padro torna a interface mais consistente, gerando uma padronizao da mes

7. De preferncia, use o conjunto de fontes-padro do seubr owse r e ajuste a fonte da sua pgina acordo com ele.Isso evita que sua pgina naWeb apresente problemas cada vez que o usurio alterar obr owse r .

8. Em terminais de vdeo de baixa resoluo, recomenda-se o uso de fontes sem serifa e coregular.(Marcus, 1992) Nesse caso, o uso da serifa deve ser evitado, pois ela pode no ser visualizada.

9. Recomenda-se deixar um espao antes e depois da palavra para aumentar a visibilidade dreverso.(Robertson, 1993)Tal procedimento aumenta a visibilidade da palavra.

10. Recomenda-se o uso do itlico para atrair a ateno do usurio.(Robertson, 1993)O uso do itlico atrai a ateno do usurio e no causa quebras significativas no ritmo da leitudeve ser usado somente para textos curtos.

11. Evite o uso de caracteres brilhando e piscando.(Nielsen,1996) (Robertson, 1993)Eles distraem e competem pela ateno do usurio. O usurio precisa de paz para l-la as informaes.(Nielsen, 1996)


8/13

8

4.2.2 Observaes

1. As fontes podem ser usadas para realar uma pgina naWeb da mesma maneira que a cor.(Robertson, 1993)

2. Os leitores preferem fonte a qual eles esto mais acostumados a ler.(Marcus, 1992)

3. As fontes com serifa so mais apropriadas para documentos formais.(Marcus, 1992)

4. Uma organizao clara e regular de tipografia na pgina aumenta a legibilidade e a leiturabilidad(Marcus,1992)

5. De preferncia, use caixa baixa ou caixa mista (caixa alta e baixa) do que caixa alta.(Marcus, 1992)

6. Usar muitas fontes normalmente resulta em poluio visual.(Marcus, 1992)

7. Fontes de diferentes famlias (por exemplo, Times New Roman e Arial) de um mesmo estilo (comserifa) no devem ser misturadas em nenhuma circunstncia.( Mullet e Sano, 1995)


9/13

9

5 Texto5.1 Consideraes

O texto o resultado do agrupamento de letras de modo a formar palavras. Esse agrupamento pfeito atravs de um arranjo simtrico ou assimtrico.O uso de tamanhos e tipos de fontes coerentes no texto ajuda na compreenso e apreciao de u pgina naWeb pelo leitor, ou seja, na legibilidade e na leiturabilidade desta pgina.

5.2 Recomendaes

1. Recomenda-se que os textos sejam escritos em uma fonte proporcional.(Robetson, 1993) (Marcus, 1992)Letras com larguras variveis consomem menos espao e criam um texto mais facilmente lido do texto escrito em uma fonte com largura fixa.(Marcus, 1992)

2. Recomenda-se o uso de caixa alta e baixa.(Robertson, 1993)Um texto em caixas alta e baixa mais legvel do que um texto todo em caixa alta porque possiidentificao da forma, especialmente da metade superior da palavra.(Ideografia, 1986) (Marcus, 1992) (Guimares, 1997)

3. No use o sublinhado para realar o texto.O uso do sublinhado em um bloco contnuo de texto pode dificultar a leitura da linha superior, aconfundir o usurio.(Robertson, 1993)

4. Recomenda-se evitar o uso do sublinhado para enfatizar ttulos.Reserve o uso do sublinhado paralinks, que o padro adotado naWeb .

5. Evite o alinhamento direita.O alinhamento do texto direita prejudicial compreenso pelos leitores inexperientes.(Robertson, 1993)(Schriver, 1997)

6. Evite o uso de hfen.(Robertson, 1993)O uso de hfen reduz a velocidade de leitura tanto para leitores experientes quanto para inexperientes.

5.3 Observaes

1. Itlico til para atrair a ateno do usurio sem causar quebras severas no ritmo de leitura.(Robertson,1993)

2. Linhas curtas facilitam a leitura, pois elas reduzem o movimento excessivo dos olhos.(Robertson, 1993)3. Letras legveis tm normalmente 10 ou 12 pontosG de tamanho para monitores com resoluo de 8 por 600 pontos por polegada (dpi).4. O comprimento timo de uma linha para textos legveis de 10 a 12 palavras ou de 4caracteres por linha.(Marcus, 1992) (Cybis, 1997)5. Uma organizao clara e regular de fontes na pgina aumenta a legibilidade e leiturabilidade do(Marcus, 1992)


10/13

10

6 cones6.1 Consideraes

cones, ndices e smbolos so freqentemente utilizados em interfaces com o usurio. Esses ele proporcionam um guia funcional e esttico para interfaces grficas como, por exemplo, umahomepage queutiliza centenas de cones diferentes. Esses elementos pictogrficos e ideogrficos funcionam cosistema de signos. Estritamente falando, o que chamamos cones so uma mistura de cones, nsmbolos.(Marcus, 1992) Nenhum grupo de regras ou normas pode garantir que um cone seja perfeitamente projetado, observaes e recomendaes citadas aqui podem ajudar nesta tarefa.(Marcus, 1992)cones so usados por toda aWeb para representar objetos ou tarefas. Em funo dos corepresentarem os objetos de uma pgina naWeb , importante proporcionar aqueles que efetivamecomuniquem a sua proposta.

6.2 Recomendaes

1. Recomenda-se projetar os cones criando esboos rpidos.(Marcus, 1992)

Uma vez que o contedo semntico tenha sido organizado, crie vrios esboos que variem da ablgica imagem concreta. Indique todos os elementos visuais, seu tamanho e sua localizao apro importante no ser muito preciso ou detalhista no incio do projeto; o mais importante etodas as variaes possveis. Avalie se os cones vo de encontro s necessidades do emissreceptor e do meio em que ele ser usado.

2. Comece identificando a proposta do cone e o seu uso.(Windows, 1995)Faa uma tempestade cerebral sobre possveis idias. freqentemente difcil projetar conedefinam operaes ou processos, ou seja, atividades que dependam dos verbos; por isso, recomenuso de substantivos.

3. Recomenda-se o uso de metforas do mundo real.(Windows, 1995)Isso facilita o reconhecimento, identificao e associao do cone por parte do usurio que podeexperincia e aprendizado prvio para interpretar o cone.

4. Classifique os cones por estilos.(Marcus, 1992)Um tratamento estilstico consistente tem grande importncia. Os estilos devem ser estabelecimodo que todos os cones sejam agrupados por uma abordagem consistente ou pela sua aparncia.

5. Recomenda-se que seja projetado um g r id g para organizar todos os elementos que compemcone.(Marcus, 1992)O uso do gr id importante para estabelecer padres de linhas horizontais, verticais e oblquas alm nmero limitado de tamanhos para os objetos que compem o cone.

6. Use objetos grandes, linhas grossas e reas simples para distinguir os cones.(Marcus, 1992)Uma vez selecionado o estilo da apresentao, continue a usar a mesma abordagem dentro de conjunto de cones. Evite que os elementos mais significativos do cone sejam muito pequencomparao com o seu tamanho total.(Marcus, 1992)

7. Recomenda-se que o cone tenha uma aparncia simplificada.(Marcus, 1992)Um cone composto demuitas partes pode confundir o usurio. As diferenas visuais devem ser significativas sob o p


11/13

11

vista da comunicao. No devemos adicionar elementos decorativos sem necessidade, pois isso ao tempo de processamento para a mente humana e cria a possibilidade de erros de interpretao.

8. Avalie os projetos de cones mostrando-os para usurios potenciais.(Marcus, 1992)Quando os prottipos estiverem disponveis, eles devem ser revisados e testados por usurios tpiavaliaes que podem afetar todos os aspectos do projeto do cone devem ser repetidas.

9. Recomenda-se ter precauo com o uso doanti-aliasing . (Windows, 1995)

A tcnica chamadaanti-aliasing envolve a adio de pontos coloridos para suavizar as extremid pontiagudas de uma figura grfica. Entretanto, no useanti-aliasing sobre o lado de fora da extremidadde um cone, pois os pontos contrastantes podem parecer irregulares ou dentados quando houvvariao do fundo.

10. Use um estilo comum para todos os cones.(Windows, 1995)Repita as caractersticas comuns como o uso da mesma fonte de luz (canto superior esquerdo) econtornos em preto; eles aumentam a poluio visual.

11. Recomenda-se que se comece a projetar os cones em preto e branco.(Window, 19 95)Considere a cor como uma propriedade adicional. Tambm teste as imagens em diferentes fundos

usurio pode mudar o padro de fundo do seubr owser .Para a criao de um cone suficiente o uso de cinco cores ou at menos, incluindo o preto, oe/ou o cinza. Muita variao de cores distrai a ateno do usurio.

12. Finalmente, lembre de considerar o potencial cultural do impacto dos seus cones.(Windows, 1995)O que pode ter certo significado em um pas ou cultura pode ter significados imprevistos em omelhor evitar letras ou palavras, se possvel, pois podem fazer com que os desenhos sejam difaplicar em outras culturas.

6.3 Observaes

1. Os cones e smbolos podem substituir a linguagem escrita e contribuir para que as pginWeb tenham compreenso internacional.(Marcus, 1992)2. Um cone ocupa menos espao do que o seu equivalente em palavras.(Marcus, 1992)3. cones bem concebidos, sistematicamente projetados e efetivamente organizados, devefceis e rpidos de reconhecer em um contexto visual complicado.(Marcus, 1992)4. Faa do cone um documento reconhecvel e representativo do contedo da sua pgina.(Windows,1995)

5. Quando projetar cones, projete-os como um conjunto, considerando o relacionamento com os outros e com as tarefas dos usurios.(Windows, 1995)

6. Certifique-se que a escala (tamanho) de seus cones sejam consistentes com os outros com os quais eles esto relacionados e que se encaixam bem dentro do site . (Windows, 1995)7. Recomenda-se a projeo de imagens, assumindo que a fonte de luz venha do canto sesquerdo.(Windows, 1995)8. A grande vantagem que os cones tm sobre as palavras que eles podem ser alegres, inteligter apelo visual.(Marcus, 1992)


12/13

12

7 Referncias bibliogrficas

CYBIS, Walter de Abreu.Ergonomia de interfaces homem-computador , Florianpolis, 1997, Apostil para o curso de Ps-Graduao em Engenharia de Produo Universidade Federal dCatarina.

GUIMARES, Lia Buarque Macedo.Ergonomia cognitiva , Conferncia proferida no 8o CongressoBrasileiro de Ergonomia, Florianpolis, 1997, (disquete).


13/13

13

HORTON, William.T he icon book Visual symbols f or compute r systems and documentation ,USA, 1994, John Wiley & Sons, ISBN 0-471-59901-8.

KRISTOF, Ray e SATRAN, Amy.I nteractivity by design C r eating & communicating wit h new media , Indiana, USA, 1995, Macmillan, ISBN 1-56830-221-5.MARCUS, Aaron.G raphic design for electronic documents and user interfaces , New York,

1992, ACM Press, ISBN 0-201-54364-8.

MULLET, Kevin e SANO, Darrell.Designing visual interfaces , C ommunication o r iented techniques , New Jersey, 1995, SunSoft Press, ISBN 0-13-303389-9.INTERNATIONAL ORGANIZATION FOR STANDARDIZATION,P rojeto de Norma

I nternacional , Requi r ements f or displayed colou r s ISO 9241 parte 8, final draft., GenebSua,1997.

OSF/Motif SYTLE GUIDE.G uia de estilos para interface com padro OSF/Motif , Cambridge, USA, 1990, Open Software Foundation.PEDROSA, Israel.Da cor cor inexistente , Universidade de Braslia, 3.ed., Braslia, UnB, 1982.ROBERTSON, Douglas. (July 16, 1993)HC I Report .

SCHRIVER, Karen A.Dynamics in document design , USA, 1997, John Wiley & Sons, ISBN 0-430636-3.

-------,Tipos G rf icos Legibilidade , Revista Ideografia, So Paulo, (02/04/1986).WINDOWS STYLE GUIDE,T he Windows interface guidelines A guide f or designing so f twa r e ,

USA, 1995, Microsoft Corporation. NIELSEN, Jakob. ( site ) http://www.sun.com/columns/alertbox/9605.html http://www.useit.com

(1996).PARIZOTTO, Rosamelia. Guia de Estilos para Servios de Informao em Cincia e Tecnologia

Web. 1997.

Documents

Iu - Design de Telas Para Web