Des ign de I nter AÇÃO

Transcrição

1 Des ign de I nter face Alex F. T. Primo A inter face Design de inter face Elementos da inter face Background Janelas e painéis Botões e ícones I magens O conceito de inter face aplicado es pecificamente à infor mática " des igna um dispositivo que gar ante a comunicação entr e dois sistemas informáticos distintos ou um sistema infor mático e uma r ede de comunicação. Nesta acepção do ter mo, a inter face efetua es s encialmente oper ações de transcodificação e de adminis tração dos fluxos de infor mação" (Lévy, 1993, p. 176). Já o que s e chama de inter face homem/máquina r efer e- s e aos aparelhos materiais (hardware) e pr ogr amas (software) que fazem a mediação de comunicação entre um sistema infor mático e s eus usuários humanos. Lévy aponta que o conceito de inter face r emete a oper ações mais gerais como tradução e estabelecimento de contato entre meios heterogêneos. Dessa for ma ela manter ia j untas duas dimensões do devir : o movimento e a metamor fos e. Sendo assim, aponta que a inter face trabalha com a pas s agem. Conclui então que a inter face é por tanto " uma s uper fície de contato, de tradução, de ar ticulação entr e dois espaços, duas espécies, duas ordens de r ealidade difer entes : de um código para outr o, do analógico par a o digital, do mecânico par a o humano... Tudo aquilo que é tradução, transformação, passagem, é da or dem da inter face" (p. 181). S egundo Er ic Jus ti n Gould (1995), o design de inter faces precisa es tar em harmonia com o conteúdo. Em um primeiro momento, porém, é pr ecis o s aber com quem se comunica. Ele pr opõe que nos imaginemos como um botão na tela olhando par a for a do monitor. Que s e vê? Que ex pr essão a pessoa do outro lado do monitor tem? Onde es tão (no tr abalho, em casa)? Quanto de s ua atenção ele está dedicando? Ques tões como es s as devem ser levantadas para que o pr oduto s e adeqüe à s ua audiência. Gould ir onicamente lembr a que ex is tem apenas duas indústrias que denominam o s eu público como usuários: a que vende tecnologia e a que vende dr ogas. Devemos tratar nosso público como mer os usuários? Ou como leitor es, espectadores? Ou como par ticipantes? A maneir a como vemos nossa audiência deter minar á a qualidade do pr oduto e condicionar á o tr atamento dado ao título multimídia. É preciso lembr ar também que o pr oduto final terá impacto s obr e o público. Da mes ma for ma como as interações diárias, formais ou informais, nos afetam emocionalmente, determinam a maneir a como nos relacionamos conosco, com os outros e com o mundo, o computador tem um impacto s obr e nós e nosso compor tamento. Portanto, precisamos estudar com profundidade as características que conferimos ao pr oduto multimídia. O es tilo de engaj amento pr opos to pelo pr oduto pode s upor tar a intenção nar r ativa ou antagonizá-la, quebrando a r elação com o pr oduto. Cada meio de comunicação motiva difer entes sentidos, os quais em combinação cr iam um todo perceptivo. Além das tradicionais motivações sensoriais dos meios de comunicação (sons, imagens, etc.) a multimídia acr es centa outr o ingr ediente motivacional à r eceita: a par ticipação da audiência. Mas como essa capacidade de par ticipação ainda é um elemento bas tante r ecente, torna-se o elemento mais imaturo da multimídia. "Não é bem compreendido, não possui uma linguagem de design, e ainda não evoluiu como uma tar efa de comunicação nem artisticamente, nem praticamente" (Gould, 1995, p. 87). O mes mo autor entende que " Em termos grosseiros, interface significa o lugar onde a pes s oa e o sistema s e encontram. É o ponto de contato, o limite e a ponte entr e o conteúdo e o leitor " (p. 87). Em multimídia, segundo ele, isso inclui tudo des de a or ganiz ação do mater ial ao layout da tela, até a maneira como as pessoas usam suas mãos e dedos. Devido a es s a var iedade de elementos, Gould s uger e que o es tudo de inter faces seja dividido em três grandes grupos de des ign: design de infor mação, design de inter face, e des ign de inter ação. Essa divisão pode contr ibuir para a identificação de pr oblemas e ques tões e facilitar a pr odução de soluções. Des ign de I nfor MAÇÃO T rata-s e da or ganiz ação do conteúdo e o s istema de ar quitetur a que o s us tenta. Nessa fas e deve- s e decidir onde e quando as informações, em diversos meios, serão dis poníveis. É preciso es tudar o

2 produto e definir onde o par ticipante es tar á e como a mídia o atingir á. Existem dois modelos básicos de localização do us uár io no pr oduto. No pr imeir o modelo os usuários movem os dados. Como ex emplo pode- s e citar uma inter face onde o us uár io vê na tela uma pas ta de arquivo com diversas folhas e fotos. Nesse cas o, onde o es paço par ece s er menor que o us uár io, ele precisa manus ear os elementos, folheando as informações da pas ta. No s egundo modelo, o pr ópr io usuário move- s e por entre os dados. Nesse cas o, o us uár io é menor que o es paço apr es entado. Por exemplo, uma inter face que pos iciona o us uár io nos corredores de um grande mus eu. É preciso caminhar pelo ambiente em busca de infor mações. Gould s uger e que ao cr iar - s e a es tr utura de navegação o des igner deve pos icionar - s e no lugar do usuário e fazer as seguintes perguntas: "Quem sou eu? Como cheguei aqui? Onde pos s o ir". Logo após, o des igner deve per guntar - s e " como deve es tar sentido minha audiência chegando a es ta s eção do pr oduto? A que es tou convidando-os a pens ar e s entir enquanto es tiver em aqui? O que es per o que eles levem ao s aírem?" (p. 87). Logo, o des ign deve s e bas ear na infor mação que s e pr etende tr ans mitir. Por exemplo, em um CD- ROM s obr e uma cultura em que as relações não s ão hier ár quicas não cabe bem um sistema de navegação hier ár quico. Gould aponta que s er ia mais apropriado um sistema de links entre as telas representativas dos tipos de r elações interpessoais que ex is tem naquela cultura. Des ign de I nterf ACE O des ign de inter faces se r efer e aos aspectos sensórios de " us abilidade". É neste momento que s e encontram o des ign de infor mação e o des ign de inter ação. É o momento de s e definir, entre outras coisas, como o us uár io poder á agir e como ele pode tomar conhecimento disso; que apelos estéticos (visuais e s onor os ) a inter face apr es entar á; como s er á or ganiz ado o compos to de mídia (vídeos, sons, fotos, etc). Uma definição comum de inter face aponta que tr ata- s e da mediação entr e a or ganiz ação do conteúdo e as ações do us uár io. É preciso as s egur ar, porém, que haj a um equilíbrio entr e a es tr utura do conteúdo e a apr es entação es tética. É fácil encontrar produtos multimídia e s ites que pos s uem uma grande quantidade de infor mações, organizadas em uma boa es tr utura funcional, mas que assustam o us uár io por seu aspecto ár ido. Por outro lado, também são comuns as interfaces de bonito apelo estético mas que apr es entam dificuldades de navegação e r ecuper ação de infor mações. Nessas interfaces, o us uár io r econhece a belez a das telas, mas não cons egue " mer gulhar " no conteúdo. Logo, é pr ecis o que haj a uma s iner gia per feita entr e tais elementos. Vale a pena pr oduzir múltiplos designs e tes tá- los com diversos usuários. A obs er vação de s eus usos podem apontar dificuldades impostas pela inter face e s uger ir modificações. Ainda, existem muitos padrões já cons agr ados que valem ser considerados. A quebr a de padr ões é uma das qualidades do ar tis ta, mas como o des igner de inter faces deve s e pr eocupar com a navegabilidade ele deve s e pr eocupar com o que s e chama de " intuitividade" da inter face. Isto é, a interface deve s er auto-explicativa, onde a cur va de apr endizagem de us o do pr oduto deve s er pequena. Parece óbvio que um usuário ao ex per imentar uma nova inter face s air á clicando s obr e os botões. Mas será que ele es tá navegando com rumo ou à der iva? Lembr e- s e, quanto mais fácil e intuitiva é a inter face e quanto menos cliques o us uár io pr ecis a dar para chegar aonde quer melhor é seu design. Des ign de I nter AÇÃO T rata-s e das formas como s e convida o us uár io a inter agir. Nesse es tágio do des ign é pr ecis o questionar-se à r es peito de que tipo de r elação e pr oximidade s e quer ter com o us uár io. Como ele vai se s entir ao navegar pelo s ite ou CD-ROM. É a r elação entre usuário e mídia. Que emoções emergem desse encontro, que tipo de atitude des per tar á a par tir da r elação? Não trata- s e apenas de como ele s ente o pr oduto (do que ele pens a s obr e o s ite ou CD-ROM), mas também de como ele s e sente fr ente ao pr oduto. E lement os de inter face A inter face é um conjunto de elementos que devem formar um conjunto com unidade, harmonia, e coerência. Esse conj unto deve ter unidade para não apr es entar elementos soltos e des conex os (que podem confundir o us uár io, levá-lo a per der - s e no pr oduto, confundir ou ignorar informações). Para alcançar-se es s a unidade a inter face deve s er harmônica. Dessa for ma, a inter face deve s er planejada e dis cutida com antecedência por toda a equipe. O es tilo de des ign deve s er bem definido, e apresentar características de equivalência (uma pers onalidade que s ej a facilmente r econhecida) por todo o pr oduto. De nada adianta des enhar três telas, todas de bonito apelo es tético, se elas não apresentam uma unidade es tilística e mos tram ícones e botões em lugares diferentes e confus os. Decorre daí o fator coerência. Os controles, links e ícones devem ser apresentados com mesmas

3 características no decor r er do título inter ativo. Um botão de avançar página, por exemplo, deve ter a mesma for ma e pos ição em todas as telas em que apar ece. Além disso, um ícone ou botão nunca deve des encadear diferentes ações. Por exemplo, o botão sair não deve em um página levar o usuário de volta par a o menu principal, e em outra encer r ar o software. Um conhecimento impor tante é que tudo é comunicação. Todos os elementos em uma inter face s ão significativos. E esses elementos fazem parte de um todo. Logo, de nada vale um bonito background se ele contradiz o texto expos to. Todo e qualquer elemento deve s er apresentado de for ma cons ciente, estudada e planej ada. Cada botão ou menu tem seu conteúdo. Não s e deve pens ar nesses elementos como itens sem informação. Um CD-ROM ou página da web é s ignificado pur o. É preciso tratar cada elemento como uma mensagem. Não s e deve des pr ezar nenhum item, pois por menor que s ej a o elemento, ele ainda faz parte de um conjunto. Se es s e elemento não tiver uma mens agem importante ou consistente com o restante talvez valha a pena omiti- lo. A s eguir analisar-se-á elementos constitutivos de uma inter face: background, janelas e painéis, botões, ícones, imagens, e tex to. B ackgr ound O background ou fundo é o elemento que mais ocupa es paço na tela (na maior ia das vezes a totalidade da tela). O background estabelece o contexto par a a ação na inter face. Porém, o background não pode s er o elemento de maior apelo. Na ver dade, as informações s obr e o background é que devem captar a atenção do us uár io. Mas isso não quer dizer que o fundo deva s er apenas decorativo. Segundo K r is tof e S atram (1995, p. 96) o background tem dois importantes obj etivos: a) influenciar e deter minar o visual, o equilíbrio e a localiz ação de outr os elementos na tela; b) ao ocupar o es paço vazio na tela, o background não deixa que os outros elementos fiquem flutuando. Como haver ão obj etos sobre o background, esse fundo pr ecisa s er desenvolvido ao lado desses elementos que es tar ão pr es entes na inter face. Essa pr odução em paralelo contribui para a determinação de cor es, formas, disposição e contr as te de todos os elementos. O fundo não deve concorrer pela atenção do us uár io. Para tanto, não deve ter características fortes (como cor es intensas, um emaranhado de detalhes, efeitos de ilus ão ótica, etc.). Isso dificulta a leitura de tex tos e confunde a dir eção do olhar. Se uma imagem é utilizada como fundo, ela deve ter relação com o conteúdo das informações e com o es tilo de outr os elementos como botões de navegação, imagens, etc. Finalmente, o fundo deve contr ibuir para max imiz ar o contras te. Um texto verde não é legível sobre um fundo ver melho, pois causa um efeito de vibr ação. Além disso, um fundo com uma gr ande var iedade de detalhes e cor es também dificulta a leitura e difer enciação de ícones, botões e links. Um recurso bas tante us ado em backgrounds formado por imagens é baix ar a saturação das cores utilizadas, clareando o fundo e pos s ibilitando um melhor contraste. Com a popular iz ação da Wor ld Wide Web (WWW) e com a facilidade de us o de s oftwar es para a produção de páginas e cr iação e manipulação de gr áficos, além da gr ande quantidade de ar quivos de texturas em CD-ROMs e até mes mo na pr ópr ia r ede, parece ter havido uma vulgar iz ação de páginas com fundos extremamente color idos e r epletos de tex tur as impregnadas de detalhes. Pela facilidade de obtenção de tex tur as para backgrounds de sites surge um uso exces s ivo de tais fundos sem que haj a uma r acionaliz ação s obr e essa pr ática. Texturas com muitos detalhes prejudicam a leitura dos textos acima do background e podem cansar a vis ta do us uár io. Além disso, parece ter - s e popularizado entr e os iniciantes em webdesign o us o de uma tex tura difer ente em cada página. Assim, o fundo da pr imeir a página é um gramado, da S egunda s ão balas, da ter ceir a pr egos, e as s im por diante. O que ocorre é que não s e per cebe que a tex tura de fundo também é conteúdo, logo a escolha do background deve obedecer ao es tilo, ao conceito ger al e adequar - s e ao conteúdo do site. S e cada página tem uma tex tur a totalmente difer ente, não s e apr es enta uma consis tência conceitual entre as telas. Enfim, além de es colher um fundo que facilite a legibilidade dos textos (afinal, o que é mais importante, a belez a e a complex idade do fundo ou a legibilidade das informações?) ele deve es tar em harmonia com os fundos das outras seções e coer ente com a finalidade, com o conteúdo e com o conceito ger al do s ite ou CD-ROM. Janelas e painéis Algumas das funções das janelas e painéis são (Kr is tof e S atram, 1995, p. 98): a) delinear numa deter minada r egião da tela par a um fim específico ou para um determinado

4 conteúdo; b) ancorar elementos na tela dentr o de s ua es tr utura par a que não par eçam flutuar; c) integrar mídia em uma es tr utura de envolvimento. As janelas servem para conter elementos, como ícones e tex tos, dentro de s eus limites e carregá-los ao s er em deslocadas. Já os painéis servem para delimitar regiões na tela, organizar elementos soltos e acr es centar contraste e pr ofundidade. Os painéis podem ser opacos ou translúcidos, constar de apenas uma cor, degradé, textura ou imagem, e ter bordas duras ou suaves. Ao delinear e s epar ar certas áreas na inter face, os painéis podem englobar diversos links e botões demonstrando fazer em parte de um mesmo conj unto. Se um background dificulta a legibilidade de tex tos, um painel pode s er colocado entr e o fundo e o texto melhorando o contras te. B ot ões e ícones Os botões dão ao us uár io o contr ole s obr e a inter face. Algumas ações que os botões podem des encadear são: avançar para a pr óx ima página, tocar um som ou vídeo, sair do pr ogr ama, movimentar um texto par a cima ou para baix o, etc. Normalmente, no padr ão Micr os oft Windows os botões se par ecem com botões do mundo r eal. Tem forma r etangular, em relevo, apresentando br ilho e s ombr a nas suas laterais. Além disso, quando o botão é pr essionado o br ilho e s ombr a do botão s e inver tem dando a ilusão que o botão es tá pressionado. Logo, quando o des igner de inter faces utilizar-se da metáfor a botões (tal qual eles ocorrem no mundo r eal) é pr ecis o pr oduzir- s e es s as duas circunstâncias botão s olto e botão pressionado. Quando o us uár io per cebe o des enho do botão pr essionado r ecebe o feedback que s ua ação teve um resultado. Por outro lado, se um botão na tela não possuir a s ituação " pr es s ionado", o usuário pode pens ar que o pr ogr ama tr avou (no cas o da ação a s er executada demor ar a s er carregada). É importante também que os botões sejam facilmente r econhecíveis, mesmo que eles não apresentem graficamente um botão r eal. Os botões do S ys tem 7.5 da platafor ma Macintos h não apresentavam semelhança com um botão r eal (trata-se de um retângulo de bor das arredondadas), porém assim que ele é pr essionado ele é negativado o r etângulo fica pr eto e o texto br anco. Esse uso é consistente em todos os programas nessa platafor ma. Alguns programas utilizam-se de diver s as fotos e ilustrações (ícones) para atuar em como botões. Não existe pr oblema com esse r ecur s o des de que o us uár io não tenha dificuldades em perceber tais imagens como botões. Alguns títulos multimídia, sites e pr ogr amas colocam sombras por baixo dessas imagens para demons tr ar visualmente que possuem uma cer ta altura em relação ao fundo. Assim que s ão pr essionados a imagem parece apr ox imar - s e do background (isso alcança- s e pelo deslocamento da imagem para a later al e/ou pela diminuição de s eu tamanho). Outro r ecur s o us ado par a a demons tr ação do que é um botão é iluminá- lo (aumentar o br ilho da imagem) assim que o ponteir o do mous e pas se por cima dele (o chamado " rollover" ). O CD- ROM " Porto S egur o" faz um pequeno des locamento da imagem usada como botão assim que ocor r e o rollover, indicando que trata- s e de um botão. Alguns jogos de es tilo " adventure" não deixam claro o que é um botão ou controle na tela. Nesses casos, espera-se que o us uár io clique em vários pontos da tela par a des cobr ir o que pode des encadear uma ação. Isso faz parte do j ogo, mas no cas o de um CD de r efer ência isso não s er ia um bom expediente j á que far ia o us uár io per der - s e. Na ver dade, muitos desses jogos usam um expediente comum para a indicação do que é um botão. Assim que s e faça o rollover acima de uma imagem que funcione como um botão (por exemplo, uma porta que clicada leva a outr a s eção do j ogo) o ponteir o do mous e é alter ado par a outra imagem (por exemplo, a tr adicional seta tr ans for ma- s e em uma mão apontando). O us uár io pr ecis a r apidamente des cobr ir como des locar - s e pelo pr ogr ama. O tr abalho do des igner de interfaces é possibilitar a or ientação do us uár io de maneir a intuitiva e imediata. Sendo as s im, as imagens utilizadas como botões devem preferencialmente indicar pictoricamente a ação que produzem. Para que o us uár io possa s e guiar de for ma intuitiva, as imagens utilizadas como s ignos devem pertencer ao s eu "vocabulário", à s ua " bagagem cognitiva. Isto é, o us uár io deve ter a capacidade de entender o s ignificado codificado. Por exemplo, de nada adianta utilizar o s ímbolo " anka" em um CD sobre a fé católica, já que esse s ímbolo místico não faz parte do conj unto de s ignos percebidos por católicos. Portanto, é pr ecis o levar em conta o per fil do público- alvo ao pr oduzir - s e a inter face. Além disso, não deve-se contr ar iar ou deturpar o s ignificado comum de um símbolo. Uma s eta apontando par a o lado

5 direito na cultura ocidental significa avanço j á que nos s a leitura vai da es quer da par a a dir eita. Essa seta então deve s empr e indicar "avanço" (para a pr óx ima página, por exemplo) e nunca " volta". Deve-s e também considerar o conhecimento, a familiaridade do público- alvo com a infor mática e multimídia. Para aqueles que conhecem pouco de títulos interativos uma boa es colha é utilizar-se de botões tradicionais e que mos tram em sua s uper fície uma palavra indicativa de s ua função. É preciso que os botões que des empenham funções equivalentes tenhas uma ligação es tética. Se o botão de avanço é o ícone de uma mão apontando par a a dir eita, o botão de r etr oces s o deve pois ser uma mão apontando par a a es quer da. Não far ia s entido s e es s e último ícone fos s e uma flecha. Isso não s er ia cons is tente e eventualmente caus ar ia confus ão. Certos botões e contr oles precisam sempre ter a mes ma pos ição r elativa entr e eles. Os controles de vídeo devem sempre s er apresentados da mes ma for ma. Se o botão de paus a s itua- s e entr e o botão de r epr odução (à dir eita) e r etroces s o (à es quer da), esse pos icionamento deve s er apresentado consistentemente no decor r er do pr oduto. É possível que haj a a necessidade da movimentação de cer tos controles e botões em diferentes telas. I s so deve s er bem trabalhado par a evitar confusão. No cas o de contr oles de vídeo (como paus a, reproduz, e r etrocede) que apar ecem abaixo da j anela do vídeo podem ser movidos sempre que es s a j anela for transportada par a outr os quadrantes da tela. O impor tante é que es s es controles estejam sempre na mes ma pos ição em relação à j anela do vídeo. Como o conteúdo s imbólico é deter minado ar bitrar iamente, alguns ícones ganharam um conteúdo específico na " cultura infor mática". Por exemplo, o ícone de uma por ta aber ta ganhou o s ignificado de " saída" (de uma s eção ou do pr ogr ama). A ilustração de uma bomba no Macintos h indica er r o fatal no sistema. É importante que o des igner de inter faces tenha um bom conhecimento dos ícones comumente utilizados para não confundir - s e e, posteriormente, confundir o us uár io. Por exemplo, o ícone de uma pas ta entr eaber ta s ignifica abr ir um arquivo. Se tal ícone for utilizado par a fechar um arquivo apenas contribuirá par a guiar mal o us uár io e talvez até fazer com que ele per ca dados impor tante. Um programa infantil que s e utiliza de bonecos caricatos receberia bem botões desenhados "à mão", com formas simples e em estilo " cartoon". Já em um CD corporativo es s es ícones não ter iam o mesmo s uces s o. A gr ande quantidade de botões em uma mes ma tela pode caus ar confusão visual ou até levar o usuário a clicar um botão errado. O des igner de inter faces deve, em seu planejamento, decidir se a inclusão de um grande númer o de botões é s empr e neces s ár io. Se um controle não tem importância em uma deter minada s eção, então s ua apar ição não é neces s ár ia. Se os objetos na tela podem ser movidos seria então necessário que o us uár io clicasse em um botão " move" antes de des locar o obj eto? I s s o cans a o us uár io des necessariamente e tor na a inter ação enfadonha. Deve s e minimizar o esforço do us uár io ao máximo par a que ele possa s e movimentar entre as telas e s eções e des encadear as ações esperadas. Gould (1995) lembra que não adianta colocar uma gr ande quantidade de botões na tela (um para cada opção). Segundo ele, há um limite de quantas opções as pessoas podem ou querem tomar em um determinado momento. Kristof e S atr an (1995) sugerem que quando exis tir em muitos botões na tela eles devem ser agrupados por função. Botões de navegação (menu, avança, volta, sair, etc.) podem ser posicionados dentro de uma painel e a lis ta de links para os diversos tópicos em outro painel ou grupo. Freqüentemente, ícones são us ados como botões. Segundo a s emiótica, ícones estão no lugar de outra cois a com a qual se par ecem. Por outro lado, em informática a palavra ícone tem se r efer ido a qualquer imagem clicável na tela. Segundo aqueles autores um ícone deve s er : a) instantaneamente r econhecido: seu significado é r apidamente per cebido; b) internacional: seu significado é trans cultur al; c) escalonável: funciona bem em vários tamanhos; d) simples: formas pouco complexas funcionam melhor que aquelas detalhadas ou com linhas muito finas. I magens I lustrações, fotos e animações são par te impor tantes em hipermídia. Sendo assim, vale pr es tar atenção na pr odução de tais imagens, bem como s ua integr ação no pr oduto. Primeiramente, é pr ecis o atentar que as imagens em uma inter face não devem ser pensadas da mesma for ma que imagens produzidas para impr es s os. As imagens em hipermídia s er ão visualizadas em um monitor que não tem a mes ma qualidade de uma folha de papel impressa. Enquanto um

6 impresso deve tr abalhar com imagens de no mínimo 300 dpi (pontos por polegada), o monitor do computador atinge apenas 72 dpi. Já s e vê que a qualidade das imagens visualizadas nesse per ifér ico oferecem menos detalhamento visual. Além disso, de nada vale us ar um arquivo de 300 dpi se a resolução do monitor não atinge tanto. É gastar mais espaço em disco e pr ej udicar a tr ansmissão de dados via linha telefônica, o que caus a demor as de car r egamento das imagens. No cas o da Web isso se tor na ainda mais problemático, tendo em vista a pequena lar gura de banda par a a tr ans missão de dados, e as dificuldades e pr oblemas de r ede e linha telefônica (como r uídos e queda da conex ão) enfrentados pelos usuários, principalmente no B r as il. Portanto, imagens para hiper mídia devem ter no máximo 72 dpi. Assim, os arquivos ficam mais enxutos e car r egam mais rápido (tanto na Web quanto a par tir de CD- ROM). Devido às mesmas dificuldades de carregamento e as pequenas dimensões do monitor, as imagens devem ter tamanhos menores. Imagens menores, além de car r egar em mais rápido, permitem que outros elementos sejam usados ao s eu redor. É comum permitir ao us uár io clicar sobre a imagem para que a possa ver em tela cheia. Normalmente, trata-se de dois arquivos (um menor e outr o maior). Se ele não quiser ver a imagem com maior detalhamento, não pr ecis a ficar esperando um tempo adicional por seu carregamento. Mais uma vez, é pr eciso dar o contr ole ao us uár io e não for çálo a es per ar freqüentemente par a que ar quivos sejam "baixados" quando não havia inter es s e em visualizá-los. Bem, se as imagens terão tamanho menor e r es oluções menores, devido a es s as limitações técnicas, é pr ecis o lembr ar que planos mais fechados serão melhor visualizados. Planos abertos de gr andes paisagens podem borrar os detalhes e deix ar informações escondidas. Uma s olução é quebr ar uma única imagem em plano aber to em vários planos fechados. Finalmente, é pr ecis o lembr ar que o númer o de cor es que podem ser mostradas ao mes mo tempo no monitor varia de 16 a milhões de cor es. Portanto, uma foto que pos s a par ecer bonita e color ida em seu computador, pode s er reproduzida em apenas 256 cores no computador de outr o us uár io. Portanto, deve-se cons ider ar essa pr oblemática na pr odução de inter faces. T ext o Como o monitor de output de computador permite hoj e uma r es olução máxima de 72 dpi (em resolução 640X480). Dessa for ma, textos de cor pos 10 e 12 (tamanhos padrão em jornais e r evis tas ) tem aparência pobr e (s errilhada) na tela. Esse mes mo ecr an oferece outr as limitações que prej udicam a leitura. Por ter sua imagem formada por um feixe contínuo de var r edur a, processo similar ao da televis ão, um efeito de flickering (um pisca-pisca da imagem) é ger ado. Esse r uído visual fadiga a vis ão, prejudicando a leitura. Finalmente, a dimens ão do monitor oferece outra limitação à quantidade de infor mações em um mesmo momento. T endo em vista es s as limitações, os textos de CD- ROM e Web precisam ser curtos e quebr ados em links, com a finalidade de não cans ar ainda mais a vis ão do us uár io. Em textos maiores é inter essante posicionar links que facilitem a navegação pelo texto. Convenhamos, é enfadonho ao ler um texto ter que ficar movendo a bar r a de s cr oll. Como é fundamental dar o contr ole ao us uár io e minimizar seu esforço, links e botões que facilitem sua leitura s e tor nam ferramentas importantes em textos longos. Um recurso muito us ado é apr es entar um menu com os diversos subtítulos do texto. Através dele, o usuário pode r apidamente s e des locar ao trecho que lhe inter es s a. Por outro lado, um texto " quebrado demais " pode cans ar o us uár io s e ele tiver que ficar "indo e vindo" entre o menu e itens com um ou poucos e pequenos parágrafos. Outro fator a cons ider ar é em que for mato o texto s er á agr egado à inter face. Existem dois tipos básicos para isso: modo texto ou convertido par a bitmap. No pr imeir o modo, o computador salva o texto como uma s ér ie de códigos que r epr es entam letras, fontes, formatação, etc. A vantagem aqui é que o texto pode s er alterado e r efor matado (se o software em que o texto vai ser visualizado assim permitir). Por outro lado, se o texto for salvo em bitmap ele s er á conver tido em uma figur a. Dessa forma, ele não poder á mais ser alterado. Outra difer ença fundamental entre es s es dois tipos é o tamanho final dos arquivos. Um escrito de 400 palavras gravado em modo texto ocupa 4K, enquanto a mes ma quantidade de tex to s alvo como bitmap poder á aumentar o ar quivo par a 300K. Assim apresentado, parece que não vale a pena s alvar texto em modo bitmap. Porém, a gr ande utilidade des s e último modo é que a for matação es tética do texto (fonte, tamanho, alinhamento, etc.) permanecerá s empr e imutável já que trata- s e de um gráfico. Claro, que us a- s e conver ter apenas pequenos textos para bitmap, como títulos, "olhos", etc. Por outro lado, o texto s alvo como letras terá s eu aspecto visual dependente das configurações do sistema do us uár io. Disso dependem o tamanho das fontes e até o compr imento final do texto (existem variações entre s istemas operacionais e possibilidades de per s onalização do tamanho das

7 fontes, como no Windows, onde existe o modo " fonte gr ande" ). Além disso, o modo texto exige que o usuário final tenha ins talada em seu sistema a fonte em que o texto foi formatado. De outra for ma, na inex is tência daquela fonte, o texto s er á apr es entado com outra fonte difer ente daquela planej ada pelo des igner. Menus A navegação em uma inter face (capacidade do us uár io de conduzir - s e pelas várias telas de um programa) é possibilitada, além de botões, por menus. Na ver dade, os menus foram uma das únicas formas de contr ole de navegação antes do s ur gimento do mouse. Como os botões precisam ser clicados pelo ponteir o contr olado pelo mouse eles ganharam importância com o s ur gimento desse per ifér ico. Os menus podem ter várias formas e es trutur as. Podem se tratar de uma lis ta numer ada de itens. Ao escolher que ação pr etende des encadear o us uár io digita o númer o do item desejado. Em alguns menus como es s e a es colha pode s er feita atr avés de uma s eta que é movida ao lado dos itens através do teclado (como em um menu gopher). Esses menus tem sentido em uma platafor ma baseada em texto, como o DOS. Mas se você es tá des envolvendo par a o Windows e/ou MacOS vale a pena ex plor ar a funcionalidade do mouse. Outro tipo de menu são os chamados "pop-up menus ". Eles ganham esse nome pois se abr em ao clique do mous e. Esse é o tipo de menu tradicionalmente us ado nos sistemas operacionais baseados em janelas (Windows, MacOS, OS/2, etc.). Por outro lado, eles já er am usados ainda mes mo em DOS. A linguagem de pr ogr amação Clipper para DOS já possibilitava a fácil criação do pop-up menus. Normalmente, os pop-up menus apres entam-se como uma faix a ou barra na tela (nor malmente em sua par te s uper ior ou inferior). Horizontalmente na bar r a apr es entam-s e diver s os títulos de menus. Eles podem ser abertos clicando-se s obr e eles ou usando o teclado: uma letr a do nome do menu é sublinhada; para abr i- lo tecla- s e es s a letr a em combinação com uma tecla de função (tecla alt no Windows). No Windows, assim que s e clica s obr e o nome do menu, ele s e abr e e per manece aber to. Já no S ystem 7.x do Macintos h, era pr ecis o manter o botão do mous e pr essionado e des lizar pelos itens do menu. Ao s oltar - s e o botão ele dis par ar ia a função do item abaixo do ponteir o. Alguns pop-up menus tem diversos níveis. Isto é, se um item do menu possuir uma s eta ou reticências ao s eu lado, ele abr ir á um novo pop- up menu ao s eu lado. T radicionalmente, os itens de um menu constituem-se de palavr as. Hoje, vários menus (como o menu iniciar do Windows 95) também apresentam ícones ao lado dos nomes do item de menu. Dessa forma, o item pode s er reconhecido tanto pelo texto como pela imagem. Isso pos s ibilita a cr ianças ainda não alfabetizadas utilizarem esses menus. Sem contar que per cebe- s e o ícone mais rapidamente do que s e lê uma ou mais palavras. A vantagem da utilização de menus é que a tela não necessita ficar demonstrando botões que não serão us ados, e que ficam ocupando es paço des neces s ár io. Tanto is s o é ver dade que o Windows 95 posicionou uma barra na par te infer ior da tela que es tá s empr e vis ível (no modo default). Isso permite que s e possa s empr e acessar o menu principal (isso j á er a possível no MacOS anos antes do Windows 95). Alguns pop-up menus mantém a mes ma função e oper acionalidade mas são apr es entados de for ma mais criativa como as gavetas de um software da F r actal Design. Ao confecci onar menus procure colocar itens de apenas uma palavra (que s ej a altamente s ignificativa e des cr ita da função que des encadear á), já que itens extensos ocupam muito es paço na tela. Não cr ie menus que possuam apenas um item. Seria melhor colocar esse item em outro menu mais genérico. Por outro lado, evite cr iar menus com muitos níveis. Eles consomem mais energia do usuário e podem confundi-lo. S e os menus tiverem um número muito gr ande de itens pode-se colocar uma bar r a de r olagem nesses menus. Esse tipo funciona melhor em menus flutuantes no meio da tela. Outro r ecur s o bas tante us ado é iluminar, negativar, ou colorir a linha ou item do menu em situações do rollover ou assim que o item seja clicado. Isso dá feedback ao us uár io s obr e exatamente qual item o ponteir o es tá. No Macintos h assim que um item é s elecionado, e o botão do mous e é s olto, o item pisca algumas vezes (na ver dade, ele passa da s ituação nor mal para negativado). Lembre-se, é sempre bom oferecer feedback ao us uár io demons trando que s ua es colha foi recebida pelo s oftwar e. Muitos títulos interativos mantém constantemente um menu (às vezes chamado de histórico) cujos itens demonstram o nome das últimas telas ou seções visitadas. Isso é inter es s ante pois permite que o us uár io volte a uma tela ou recupere uma infor mação de maneir a r ápida e ins tantânea. Isso é válido pois muitas vezes queremos voltar a algum lugar ou alguma infor mação e não lembr amos

8 como chegar até lá. Alguns navegadores de WWW guardam os últimos endereços visitados (digitados no campo " location" ). Mesmo que os menus tenham grande funcionalidade, grande par te dos CD-ROMs prefere botões a usar menus. Na Web, menus flutuantes podem ser criados em linguagens como Java e S hockwar e. W ebdesign O des ign de home-pages para a WWW (webdesign) merece uma s ér ie de cons ider ações à r es peito de suas limitações. O código HT ML, usado par a a pr ogr amação e diagr amação de sites é bas tante limitado. É, em verdade, muito fácil de apr ender e es cr ever HTML, o que per mite a qualquer pessoa, com um mínimo de familiaridade com a I nter net, produzir páginas para a I nter net. Porém, diferentemente do des ign de impr es s os, onde tudo deve s er estritamente planej ado e deter minado (cor, fonte, diagramação, etc.), o webdes ign trabalha com possibilidades cuja r ealização dependem de uma s ér ie de var iáveis presentes no computador do us uár io navegando pela I nter net. Como s e s abe, cada usuár io pode além de es colher seu browser de pr efer ência e modificar uma s ér ie de fator es que alter ar ão o r es ultado visual do s ite pr oduzido. Primeiramente, é pr ecis o lembr ar que cada br ows er (como Nets cape e I nter net Explorer) "montam" as páginas, a par tir do código HT ML recebido, de maneir as diferentes. Um mesmo código pode ter uma apar ência em um browser e um visual diferente em outro. E, em alguns casos, certos comandos HTML não s ão nem compreendidos por certos programas de navegação (por exemplo, o comando B LI NK não funciona em I nternet Explorer. Além do que, mesmas funções tem comandos diferentes em diferentes browsers). Outra ques tão é que o br ows er pode colocar certos controles no poder do us uár io que modificam o planej amento visual do webdesigner. Por exemplo, no I nter net Explorer o us uár io pode aumentar ou diminuir o tamanho da fonte, passando por cima da for matação do código es cr ito pelo pr ogr amador. I s so par ece inter es s ante, do ponto de vis ta do us uár io (que pode ter algum tipo de dificuldades de percepção dos textos na tela). Por outro lado, cada alter ação des s as modifica toda a diagr amação e o planej amento vis ual. S e a diagr amação par a impr es s os toma um cuidado es pecial com relação à quantidade de palavr as em cada linha, ao es paçamento entr e letras, palavras e linhas, à altura das colunas, ao tamanho e estilo das fontes, em webdesign muitas dessas determinações são vir tualmente impossíveis. Na Web as páginas não s ão mandadas prontas, diagramadas e fechadas à modificações. O que é transmitido é o código HT ML. A montagem, e, enfim, a diagr amação final é feita no br ows er, e em acordo com as variáveis do s istema do us uár io. O tex to no código HT ML é ins er ido de for ma " corrida". A for matação final, e nor malmente quebr as de linhas, quantidade de car acter es por linha, etc., serão definidas somente no momento que o código for a decodificado pelo br ows er. Um dos recursos usados em webdesign para gar antir a lar gura de colunas e manter a quantidade de tex to por espaço determinado entr e difer entes configurações de s is temas é o us o de tabelas com borda tr ans par ente. Bem, a conclus ão des ta r ápida dis cussão é que o webdesigner, consciente das diferenças entre os browsers e s istemas, deve tes tar seu código HT ML em diversos navegadores e s ob as mais diversas configurações. Ciente das alterações que s ofr eu a página nesses testes, o des igner deve adequar seu código par a eliminar ou minimizar os erros e pr ej uízos ao conteúdo es tético e tex tual do s ite entre as diferentes configurações e entr e os diversos browsers (lembre-se uma bonita página vis ualiz ada no Nets cape pode ter seu conteúdo visual totalmente alter ado em outro br ows er, e vice- ver s a). No s ite " Es pir al Interativa" ( aprimo) tive o cuidado de pr oj etar um código que per mitisse que as páginas que fazem uso intens ivo de frames não tives s em sua vis ualiz ação prej udicada em resoluções de 640x480. Nessa r es olução os frames superiores e infer ior es são eliminados, abrindo mais espaço par a o fr ame pr incipal, onde apar ecem os textos. Essa neces s idade surgiu na medida em que o s ite ia s endo pr oduzido e s endo tes tado nas mais deferentes configurações e nos diferentes navegadores. R ef er ências bibliográficas BAI RON, Sérgio. Multimídia. São Paulo: Global, BUS H, Vannevar. As we mau think. T he Atlantic Monthl y. July ERI CKS ON, Thomas D. Working with interface metaphor s. In: BRENDA LAUREL (Ed.) T he ar t of human-computer interface des ign. Menlo Par k, CA, Addis on- Wes ley, GAT ES, Bill. A es trada do futur o. São Paulo: Companhia da Letr as, GOULD, Eric Jus ti n. Empowering the audience: the inter face as a communications medium. I nteractivity. S an Mateo, v. 1 n. 4, p , set./out GYGI, Kathleen. Recognizing the s ymptoms of hpertext...and what to do about it. In: LOUREL, Brenda ( Ed.) T he ar t of human-interface des ign. Reading: Addison-Wesley, P KRI S T OF, Ray e S AT RAN, Amy. Interactivity by design: creating & communicating with new

9 media. Mountain View: Adobe, LAQUEY, Tracy, e RYER, Jeanne C. O manual da I nter net. São Paulo: Campus, LAUREL, Brenda ( Ed.). T he ar t of human-interface des ign. Reading: Addison-Wesley, LÉVY, Pierre. As tecnologias da inteligência: O futur o do pens amento na er a da infor mática. São Paulo: 34, LÉVY, Pierre. O que é o virtual? S ão Paulo: 34, NEGROPONT E, Nicholas. A vida digital. São Paulo, Companhia das Letras, RANDALL, Neil. Discover the Wor ld Wide Web. Indianapolis: SamNet, ROS ENBORG, Victoria. Guia de multimídia. São Paulo, Berkeley, S NYDER, Joel. Site bom/r uim, feio/bonito. I nternet World. São Paulo, n.12, p , Ago T WAY, Linda. Multimídia par a novos usuários. Rio de Janeir o, Berkeley, VAUGHAN, Tay. Multimedia: Marking it work. Berkeley, CA, Osborne, WAT ERS, Crystal. Web: concepção e des ign. São Paulo: Quark, Alex Primo é pr ofes s or de Comunicação S ocial na Univer s idade Feder al do Rio Gr ande do S ul, Mestre pela B all State Univer s ity e Doutor ando em Informática na Educação pela UFRGS. apr imo@ iname. com aprimo