Interfaces n

download Interfaces n

of 23

Transcript of Interfaces n

  • 8/18/2019 Interfaces n

    1/23

    Museu de Arte Contemporânea – Niterói - RJ

    Interfaces Rosa Maria E. M. da CostaVânia Marins

    "Não é o ângulo reto ue me atrai! nem a lin a reta! dura! in#le$%&el! 'riada peloomem. ( ue me atrai é a 'ur&a li&re e sensual! a 'ur&a ue en'ontro nas montan asdo meu pa%s! no 'urso sinuoso dos seus rios! nas ondas do mar! no 'orpo da mul er

    pre#erida. )e 'ur&as é #eito todo o uni&erso! o uni&erso 'ur&o de Einstein." *(s'ar Nieme+er,

    Objetivos• Desenvolver uma visão crítica a respeito da usabilidade das interfaces virtuais.

    O desenho de conteúdos e atividades para e-learning é uma tarefa que envolvecriatividade e um tempo considerável de plane amento. Diferente de uma aula presencial! em que a corre"ão pode ser feita durante seu desenvolvimento! a #aD deveestabelecer critérios de previsão! adequa"ão e clare$a para que o conteúdo possa sertransmitido e assimilado de maneira %tima! criando assim! um poderoso canal decomunica"ão.

    &ertsch '())*+ assegura que a a"ão mediada 'em #aD essa media"ão é feitaatravés das interfaces dos materiais impressos e das mídias de comunica"ão+ não podeser desvinculada do meio que a torna possível! ou se a! o foco do design didático nãodeve estar nem na tecnologia mediadora! nem na concep"ão de aprendi$agem de modoisolado. ,esta aula vamos discutir o tema das Interfaces e algumas das quest esassociadas! tra$endo novas perspectivas para o design didático.

    1

  • 8/18/2019 Interfaces n

    2/23

    Interfacesídias de comunica"ão! mídias sociais e /mbientes 0irtuais de /prendi$agem

    '/0/+ são interfaces entre o que se dese a comunicar e a quem se dirige acomunica"ão! ou se a! são mediadores. 1egundo 2aurel '())3+! interface é umasuperfície de contato como a ma"aneta é a interface entre as pessoas e a porta. O mouse!o teclado! o microfone e a tela do monitor são! portanto! e4emplos de interfaces! pois!são mediadores entre o homem e a máquina.

    O ator mais importante! em se tratando de interfaces! é o usuário. Interfaces nãosão criadas para pro etistas! muito menos para programadores. Interfaces devem sercriadas para seus usuários finais. 5ma boa interface deve atender a seus usuários emseus ob etivos de uso! suas necessidades e suas limita" es.

    Os esfor"os dos pro etistas de interface devem ob etivar a oferta de maiornúmero possível de op" es e facilidades sem que ha a uma sobrecarga cognitiva para osusuários. 2aurel adverte-nos queo e$'esso de op /es e de 'on&en /es ue eu de&oaprender para ue eu possa me tornar pro#i'iente no uso de uma inter#a'e me dei$a'on#usa e 'ansada. (s psi'ólogos ' amam isso de so0re'arga 'ogniti&a. Eu ' amo de pro0lema.1'2aurel!())3! pág. 4i+

    5ma interface é tanto melhor quanto mais atenda ao seu usuário padrão! ou se a!uma interface torna-se tanto mais eficiente quanto mais ela é fácil deusar por seususuários típicos6 quando não são necessários grandes esfor"os para apreend7-la! quandoo usuário sente-se 8 vontade nela e quando ele consegue tirar proveito de todas asfuncionalidades oferecidas pelo sistema9 daí o conceito de usabilidade que vem sendoempregado para avaliar sistemas. / pr%pria palavra á o define : usável! apropriado para o uso.

    1antos ';33*+ entende que as interfaces educacionais devem seguir os mesmos princípios dos pro etos de interfaces em geral e que também! deveriam se fundamentarem alguma teoria de como as pessoas aprendem. / atividade de pro etar pode serconsiderada! também! como uma atividade artística9 os conceitos considerados válidossão sub etivos e partem da e4peri7ncia de profissionais consagrados. odernamente! podemos di$er que pro etar é aati&idade respons2&el pela ela0ora ão de o03etos deuso e sistemas de in#orma ão. ( pro3etista determina materiais! te'nologias de

    2

  • 8/18/2019 Interfaces n

    3/23

    #a0ri'a ão! #ormas! 'ores! &olumes! te$turas! imagens! tipogra#ia e in'orporare'omenda /es ergon4mi'as1.5

    2aurel '())3+ ressalta que o pro etista de sistemas interativos deve integrar as

    habilidades de engenheiro! de artista e de psic%logo. 5m engenheiro porque deveentender e tradu$ir os procedimentos do sistema! um psic%logo porque ele precisaconhecer as necessidades e os modos de agir dos usuários e um artista porque precisaser criativo nas solu" es.

    Oren '())3+ oferece uma sugestão interessante de ser seguida! principalmente para quem vai pro etar para a &eb. #le aconselha6(s pro3etistas de inter#a'es gr2#i'as de sistemas interati&os podem o0ter idéias *inspira ão, prestando aten ão 6s

    solu /es en'ontradas por artistas de &anguarda em seus tra0al os. Estas o0ser&a /es podem ser um guia para a 'onstru ão das pró$imas gera /es de inter#a'es. 7 0emmel or desen&ol&er no&as #ormas do ue repli'ar as antigas1 *(ren apud 8aurel 599:! p2g.;e0 é o hiperte4to '1ilva ()))+! ou se a! a nãolinearidade da informa"ão! a informa"ão dentro da informa"ão! a interatividade.

    1 ?olheto publicitário distribuído pela Bontifícia 5niversidade Cat%lica do io de Eaneiro! ;33*

    3

  • 8/18/2019 Interfaces n

    4/23

    ?igura ;.(6 Fuadro A; de ondrian6 Composi"ão em vermelho! preto! amarelo e

    cin$ento. Bintado em ();3. #stá no useu /nd@ &arhol.

    ?igura ;.;6 Bágina do site da 1un '15,! ;33A+.

    4

  • 8/18/2019 Interfaces n

    5/23

    ?igura ;.*6 Bágina de abertura do useu do 2ouvre '2ouvre! ;3(3+.

    #stes sites e4ploram algumas técnicas de organi$a"ão de modo a facilitar aleitura e a busca de informa" es! como descrito a seguir.

    2.1. Organização da informação: proximidade e afastamentoOrgani$ar a informa"ão é o ob etivo do desenho gráfico. Bodemos organi$ar a

    informa"ão criando uma rela"ão entre os elementos através da pro4imidade. Itens oucon untos de informa" es que possuem alguma rela"ão devem ser apro4imados e! demaneira inversa! itens ou con untos de informa" es que não estão relacionados nãodevem estar pr%4imos '&illiams! ())G+. Observe como o site da ?igura ;.H agrupou as

    informa" es em cai4as! apro4imando as que possuem rela"ão entre si! oferecendo aousuário uma refer7ncia visual da página.

    / informa"ão também está diferenciada pelas cores e se relaciona visualmentecom a barra superior6 notícias em vermelho! esportes em verde! entretenimento emlaran a e vídeos em a$ul.

    5

  • 8/18/2019 Interfaces n

    6/23

    2.2 Organização da informação: contraste5ma maneira de dar destaque 8 informa"ão e oferecer um atrativo visual 8

    página é criar situa" es de contraste. Bara que o contraste se a realmente efica$! ele deve

    ser forte '&illiams! ())G+.Bodemos alcan"ar o contraste de várias maneiras. 5ma letra grande pode ser

    contrastada com uma fonte pequena! uma fonte em estilo antigo com uma em negrito!um fio fino com um grosso! uma cor fria com uma cor quente! uma te4tura áspera comuma lisa! um elemento hori$ontal 'uma longa linha de te4to+ com um elemento vertical'uma coluna estreita de te4to+. 5m e4emplo de contraste é o uso de fonte maior e emnegrito para os títulos e subtítulos. Observe! na ?igura ;.H! o contraste causado pelo

    tamanho da fonte dos títulos em rela"ão aos tamanhos das fontes do te4to.

    ?igura ;.H

  • 8/18/2019 Interfaces n

    7/23

    O alinhamento ob etiva! também! equilibrar os elementos da página. Ocentrali$ado é a forma mais intuitiva e mais segura de alinhar os elementos. #le parte doequilíbrio simétrico da página e! segundo

  • 8/18/2019 Interfaces n

    8/23

    '())A+ recomenda a redu"ão da variedade de elementos gráficos e do número de fontesutili$adas. 1egundo ele! deve ser usado uma ou duas famílias de fontes apenas.

    5m e4emplo dedesign simples e dedo=nload rápido é o buscador oogle!

    ?igura ;.>. #le também é um e4emplo de alinhamento centrali$ado bem-sucedido! ae4trema funcionalidade dispensa umla+out mais sofisticado.

    ?igura ;.>

  • 8/18/2019 Interfaces n

    9/23

    2.(. )fici*ncia: a web ! cultura da impaci*ncia/plica" es eficientes e4ecutam o má4imo de trabalho com um mínimo de

    informa"ão dos usuários ' orgna$$ini! ;33*+. / quantidade de etapas que o usuáriodeve e4ecutar para acessar o que dese a deve ser redu$ida ao mínimo. O desenho dainterface deve proporcionar ao usuário o má4imo de efici7ncia e conforto com omínimo de aprendi$ado e de fadiga! utili$ando a e4peri7ncia anterior do usuário. O buscador oogle! ?igura ;.>! é um bom e4emplo de página de interface simples e dedo=nload rápido onde os usuários rapidamente podem conseguir a informa"ão quedese am.

    2.+. ,onsist*ncia: identidade visual do ambienteOs elementos da interface devem ser consistentes em todas as telas do site

    ' orgna$$ini! ;33*+. / repeti"ão de elementos gráficos oferece consist7ncia 8 página./lgum aspecto do desenho! repetindo-se no material inteiro! oferece um sentido deunidade9 o elemento repetido pode ser uma fonte em negrito! um fio grosso! umelemento gráfico! algum formato específico! rela" es espaciais! barra superior quando possuir uma! uso de cores etc. 5m e4emplo de repeti"ão é a cria"ão de títulos com o

    mesmo tamanho de fonte. O recurso da repeti"ão é muito útil em pe"as de uma s% página e é essencial em documentos de muitas páginas.

    / consist7ncia dos elementos! que nada mais é do que a sua padroni$a"ão no site inteiro! é importante para a orienta"ão do usuário. / utili$a"ão de c%digos áapreendidos anteriormente facilita a compreensão da interface! agili$a os procedimentosda navega"ão! proporciona conforto visual ao usuário e libera a aten"ão para outrastarefas. 5m e4emplo de boa orienta"ão eme-learning é a utili$a"ão de refer7ncias para

    que o aluno saiba em que parte do curso ele se encontra.Observe! na ?igura ;.=! como a página do site da Apple Computers oferece

    orienta"ão através da barra de navega"ão na parte superior da página. #la é consistenteem todo o site 'com o mesmo desenho+ e indica! com uma aba de cor diferente! em que página o usuário se encontra. #sse tipo de navega"ão através de barra com abas á é um padrão para os usuários de interfaces=indo=s como as planilhas #4cel! o que facilita acompreensão da interface.

    9

  • 8/18/2019 Interfaces n

    10/23

    ?igura ;.A

  • 8/18/2019 Interfaces n

    11/23

    ?igura ;.=6 Larra de navega"ão do site da /ma$on '/ma$on! ;3(3+

    ,ielsen ';333+ relata! em seus estudos de usabilidade! que os usuários quei4am-se quando um site tenta usar interface de navega"ão que se a muito diferente das queestão acostumados a usar.

    2. . Layout : espaços em branco

    JBáginas com bom design fa$em uso de muito espa"o em branco : comomargens! espa"os de separa"ão entre o cabe"alho e o corpo do te4to '...+.K ' isanchuM!());! pág.(AH+. #specialistas em design gráfico recomendam não ocupar com te4totodo o espa"o da tela dei4ando espa"os em branco. O ob etivo desta prática é nãosobrecarregar visualmente o leitor! orientar o olhar e a udar os usuários a entender oagrupamento de informa" es. / ?igura ;.A é um bom e4emplo de uso de espa"os em branco.

    2.1 . egibilidade: o conte4do a ser aprendido@udo – design e 'onte do – #al am uando os usu2rios não 'onseguem ler o

    te$to.1',ielsen! ;333! pág.(;G+. / legibilidade é um dos aspectos mais importantes! senão! o mais importante quando se dese a estabelecer uma comunica"ão direta com ousuário. #me-learning! se o aluno tiver dificuldade em ler o te4to! com certe$a! ficarádesmotivado e isso irá pre udicar sua aprendi$agem.

    /s considera" es a respeito da legibilidade de um te4to vão desde o tamanho dafonte! ao contraste da fonte com o fundo! 8 boa reda"ão! 8 largura que ele ocupa na telae 8 quantidade de informa" es que é disponibili$ada em tela.

    / escolha do tamanho da fonte deve levar em conta a varia"ão da resolu"ão detela utili$ada '(3;H 4 A>= pi$els! =33 4 >33 pi$els são as mais comuns+! a e4ist7ncia de pessoas com problemas visuais! ou a prefer7ncia das pessoas mais idosas por tamanhosde fonte maiores.

    / legibilidade de um te4to também tem rela"ão com o comprimento de suaslinhas. Nilian '()))+ sustenta que linhas de te4to muito longas dificultam a leitura! pois

    11

  • 8/18/2019 Interfaces n

    12/23

    os leitores podem ter dificuldade de encontrar o início da pr%4ima linha 'observe ?igura;.)+.

    Outro aspecto relevante! na questão da legibilidade! di$ respeito ao uso da cor.

    ,este caso! recomenda-se o uso de tipos pretos sobre fundo branco. #m primeiro lugar! por uma questão de contraste9 em segundo! por uma questão de hábito! pois estamosacostumados a ler te4to com letras pretas em fundo branco nos materiais impressos.Bara quebrar a monotonia do te4to preto em fundo branco! os mesmos recomendam!que podem ser usadas cores claras para fundo de página como o amarelo claro! a$ulclaro! lilás! etc. ?undo preto deve ser evitado! bem como! combina" es de cores quecausem efeitos visuais desagradáveis! como é o caso do uso de letras vermelhas sobre

    fundos a$uis ou verdes. ,ielsen ';333+ sugere que o te4to não deve se mover ou piscar! pois isso

    também dificulta a leitura. #m geral! o te4to deve ser ustificado 8 esquerda de modoque e4ista um ponto de partida constante para o olhar leitor come"ar a percorrer a linhado te4to. e4tos alinhados a esquerda permitem uma leitura muito mais rápida do que ote4to centrali$ado ou alinhado 8 direita. O autor ressalta que! a leitura de um te4toescrito todo em letras maiúsculas é (3Q mais lenta! pois é mais difícil para o olho

    reconhecer a forma das palavras e os caracteres na apar7ncia mais uniforme! logo! seuuso não é recomendado.

    Observe o e4emplo deste te4to todo em maiúsculas. ,RO 51# #S O #/IT1C52/1. / 2#I 5 / DO #S O ODO # /IT1C52/1 U (3Q /I1

    2#, /! BOI1 U /I1 DI?VCI2 B/ / O O2

  • 8/18/2019 Interfaces n

    13/23

    ?igura ;.)6 Bágina inicial do site sobre Che uevara 'Che! ;3(3+. 5m e4emplo dedesign ruim9 observe as linhas do te4to ocupando toda a largura da tela e acor de fundo com tom muito forte.

    2.11. ,onsideraç0es sobre o uso de cor nas interfaces/ cor está impregnada de informa"ão. /ssociamos significados 8s cores que

    vemos nas árvores! no céu! na água! nos alimentos e assim por diante. ambématribuímos valores simb%licos 8s cores6 o vermelho! que é associado 8 raiva! passoutambém para a capa vermelha! que se agita diante do touro.

    / cor constitui uma fonte de valor inestimável para os comunicadores visuais e! portanto! para osdesigners de interface. ,as pr%4imas subse" es! discutiremos algunsaspectos relevantes que comp em as interfaces.

    2. 12.1 5eorias de uso da cor

    1egundo Bedrosa '()AA+! cor geratri$! primária ou fundamental! é cada uma dastr7s cores indecomponíveis que! misturadas! produ$em todas as outras. Bara os quetrabalham com cor-lu$! como é o caso da televisão e dos monitores de computador! as

    13

  • 8/18/2019 Interfaces n

    14/23

    primárias são6 vermelho! verde e a$ul-violetado. Bara os artistas e todos que trabalhamcom cor-pigmento! as cores indecomponíveis são6 o vermelho! o amarelo e o a$ul.

    / partir dessa classifica"ão! vários pintores e estudiosos de arte e cores! como2eonardo da 0inci e Delacroi4! criaram modelos e normas para alcan"ar harmonia nouso das cores! tentando desta maneira sistemati$ar o que se costuma chamar de intui"ãoou inspira"ão artística. #ntretanto! esses modelos se mostraram ineficientes pela suacomple4idade! pois é muito grande o número de variáveis e porque a utili$a"ão dascores depende de outros fatores! como por e4emplo6 área! forma preenchida! pro4imidade eXou superposi"ão de outras cores 'Bedrosa! ()AA+. / seguir! citamosalguns argumentos contra os sistemas de combina"ão de cores6

    JOra! a harmonia é realmente necessária no sentido amplo de que todas as coresde uma composi"ão devem se a ustar num todo unificado! se é que devem se relacionaruma com as outras....O que é muito menos provável é que as cores usadas pelos artistas!em muitos casos! este am de acordo com quaisquer regras bastante simples como assugeridas pelos sistemas de harmonia de cor... Fue destino miserável para um pintorque gosta de lourasK! disse Bicasso a Christian Yervos! Jter que dei4ar de colocá-lasnum quadro porque não combinam com a cesta de frutas ZK '/rnheim! ()GH! pág.**=+.

    J5ma combina"ão de cores nunca é errada. Fualquer combina"ão de corestransmite uma determinada sensa"ão! mesmo se for de Jmau gostoK. / sensibilidadecromática do ser humano varia muitoK ' aus$! ()A>+.

    #ssas argumenta" es refor"am a idéia de que o uso das cores está diretamenterelacionado com seu conte4to! com as formas em que a cor está aplicada e com a idéiaque se dese a e4pressar. / ?igura ;.(3 mostra um e4emplo do uso de combina" es

    inusitadas de cor para criar diferentes efeitos.

    ?igura ;.(3 - (3 aril@ns '&arhol!()>A+.

    14

  • 8/18/2019 Interfaces n

    15/23

    2.12.2 ,or e ,ontexto... a luB de uma dada 'or a#etar2 di#erentes 'ores de um uadro. Não se pode

    #alar 'omo uma 'or realmente é! pois num sentido seguro! ela é sempre determinada por seu 'onte$to1'Bedrosa! ()AA! pág.())+. ,ão se pode pensar na cor isoladamente. U preciso observar os efeitos causados pelas cores que lhe estão pr%4imas. Com isso! podemos escolher combina" es que valori$em e destaquem as cores e! principalmente!evitar efeitos %ticos desagradáveis.

    / seguir! selecionamos alguns e4emplos de como a cor se comporta em rela"ãoa outras cores6

    / ?igura ;.(( mostra que a mudan"a de apenas uma cor! o contorno branco pelo preto! altera todo o aspecto do padrão.

    ?igura ;.(( / altera"ão da cor de contorno das formas em vermelho mudandotodo o aspecto da padronagem.

    ,a ?igura ;.(;! notamos que o amarelo fica pouco visível quando aplicadosobre fundo branco. 1obre fundo preto ganha for"a e vibra"ão. #mcontraste! com o cin$a! se enriquece em qualidade cromática.

    15

  • 8/18/2019 Interfaces n

    16/23

    ?igura ;.(;6 /ltera"ão na percep"ão do amarelo nos diversos fundos.

    ,a ?igura ;.(*! podemos observar que o vermelho parece mais brilhantesobre o fundo preto do que sobre o fundo branco! e neste! assume umaapar7ncia escura e terrosa. #m contraste com o laran a! parece sem vida9 em

    contraste com o verde a$ulado! e4ibe brilho. ,ote como o quadradovermelho parece mais largo sobre o preto do que sobre as outras cores.

    ?igura ;.(*6 /ltera"ão na percep"ão do vermelho nos diversos fundos.

    ,a ?igura ;.(H! temos um e4emplo de um efeito desagradável com asuperposi"ão de cores9 o vermelho aplicado em pequenas por" es! sobrefundo verde ou a$ul! agita-se e causa desagradável sensa"ão de crepita"ão.

    ?igura ;.(H6 #feitos %ticos desagradáveis

    2.12.3 6eação 7 cor/ cor é um elemento importante de comunica"ão visual. #la nos fornece

    informa" es sobre o mundo que nos cerca. U pela cor que identificamos se um frutoestá verde ou maduro! se um documento está envelhecido! se uma superfície está su a.

    16

  • 8/18/2019 Interfaces n

    17/23

  • 8/18/2019 Interfaces n

    18/23

    ?igura ;.(G6 5so da metáfora do controle remoto ' usicover@!;3(3+

    2.13 8conesVcones são imagens ou sinais gráficos que possuem as propriedades de um

    ob eto! uma a"ão ou uma idéia que eles representam ' isanchuM !());+. O uso deícones em interfaces visa a udar o usuário a locali$ar mais rapidamente a informa"ão! pois são elementos de percep"ão.

    2.1". 9avegação/ navega"ão deve a udar os usuários a responder 8s tr7s perguntas

    fundamentais6 '(+ Onde estou \ ';+ Onde estive \ '*+ /onde posso ir \ ,ielsen ';333+ recomenda que a navega"ão deve ser consistente! ou se a! que

    suas ferramentas devem possuir o mesmo desenho em todo o site. #la deve serdeterminada pelas tarefas que os usuários dese am ou precisam reali$ar. # como aInternet é inerentemente não-linear! uma navega"ão linear é muitas ve$es um sinal dealerta de má usabilidade.

    18

  • 8/18/2019 Interfaces n

    19/23

    2.1%. esen'o do ,onte4doConteúdos educativos podem aproveitar recomenda" es gerais para conteúdos

    na =e0 da mesma forma que a interface gráfica se utili$ou de conceitos de usabilidadedas interfaces em geral. ,ielsen ';333+ destaca que conteúdo de qualidade é um dosdeterminantes mais importantes da usabilidade na Internet. 1egundo ele! é de sumaimport[ncia apresentar o conteúdo de forma atraente para os leitores.

    / elabora"ão de te4tos na Internet voltados parae-learning ! deve observar osseguintes aspectos6

    • Os te4tos devem ser pequenos! com blocos não muito longos!

    preferencialmente com parágrafos curtos! subtítulos e listas com 0ullets.e4tos longos devem ser dei4ados para serem bai4ados para a máquina do

    usuário 'do=nload,9• / linguagem deve ser simples com estruturas sentenciais simples. 1enten"as

    simples são muito mais fáceis de serem lidas e a escrita com floreios e palavras comple4as dificulta a leitura9

    • Os títulos devem ser significativos9• Báginas longas com rolagem de tela também não são recomendadas. LlacM

    '())A+ e ,ielsen ';333+ sugerem como par[metro não escrever mais do queG3Q do te4to que se escreveria para tratar do mesmo assunto em uma publica"ão impressa9

    • ambém é observado que os usuários costumam imprimir documentosgrandes para leiturao##-line! portanto! recomenda-se gerar duas vers es detodos os documentos longos6 uma otimi$ada e outra completa para

    do=nload ou impressão9• O hiperte4to não deve ser usado para segmentar um artigo longo e linear em

    várias páginas. #le deve ser usado para aprofundar pontos da leitura9• ,ão se deve sublinhar o te4to! na internet te4to sublinhado é padrão para

    lin .#m e-learning! a proposta de sugerirlin s para outras páginas é bastante

    relevante! mas a escolha desseslin s deve ser criteriosa para não afastar o aluno do foco

    da aprendi$agem. ,este caso! é melhor vincular um número redu$ido de páginas

    19

  • 8/18/2019 Interfaces n

    20/23

    e4ternas altamente relevantes! do que todos os possíveis sites alternativos na=e0. 5moutro aspecto importante é incluir te4to adicional! que e4plique de que se trata olin esua relev[ncia para o assunto. Bodemos sugerir indica" es do tipo6 visita obrigat%ria!

    recomendável! bastante recomendável e assim por diante! para que o aluno possadirecionar sua pesquisa.

    2.1(. ;magens )st$ticasBodemos di$er que a primeira coisa que vemos em uma página! se a ela

    impressa ou eletrPnica é a imagem que ilustra o te4to! se ele possuir uma. #mbora o usode ilustra" es tenha sido bastante pesquisado! seus resultados ainda não foram

    conclusivos e isso se dá por causa do grande número de variáveis envolvidas6 o tipo deilustra"ão! sua rela"ão com o te4to! sua locali$a"ão! dimens es! estilo! etc. Urecomendado que todas imagens utili$adas possuam legendas descritivas. # que se amvistas por inteiro na página! não deve ser necessário rolar a página para v7-las.

    ?elice e ,ace '?elice e ,ace apud isanchuM! ());+ afirmam que ilustra" es possuem duas fun" es6 e4pandir e elaborar o assunto e4posto no te4to e oferecer 8 página um apelo visual. Do ponto de vista da aprendi$agem! o apelo visual é a fun"ão

    menos importante! contudo não podemos desvalori$ar este aspecto. /s imagens podemser utili$adas para quebrar a monotonia de uma página s% de te4to e despertar interesseno leitor.

    Duchastel 'Duchastelapud isanchuM! ());+ sugere tr7s regras para o uso dasilustra" es6

    • Chamar a aten"ão e motivar o leitor9• #4plicar o conteúdo do te4to9 e•

    Bromover maior reten"ão através do uso redundante da informa"ão!através da linguagem verbal e da gráfica.

    2.1+. ;magens em movimento e v deos/tualmente a tecnologia vem! cada ve$ mais! permitindo o uso de imagens em

    movimento na internet. #ssas mídias podem ser utili$adas para levantar discuss es emtorno de algum tema abordado no conteúdo! motivar o aluno ou a udá-lo através desimula" es tridimensionais '*D+! como é o caso da utili$a"ão de ealidade 0irtual

    20

  • 8/18/2019 Interfaces n

    21/23

    '?igura ;.(>+. ambém! a utili$a"ão de pequenos vídeos com apresenta" es reali$adas pelo professor podem ser elementos de liga"ão afetiva com o aluno.

    ?igura ;.(G6 1ite que mostra uma visita virtual a caverna de 2ascau4 que é um

    comple4o de cavernas ao sudoeste da ?ran"a! famoso pela suas pinturas rupestres.http6XX]]].lascau4.culture.frX

    2.1-. < educação do ol'ar U muito importante para quem pretende pro etar conteúdos para a Internet

    possuir viv7ncia de navega"ão. 0isitar sites de qualidade! tanto educativos comocomerciais! é a prática inicial recomendada. Isso permitirá perceber os pontos fortes e

    trará conhecimentos sobre os aspectos negativos! que devem ser evitados na elabora"ãode produtos educacionais. #sta viv7ncia Jeduca o olharK! gerando profissionais críticose criativos.

    2ucena '()))+ observa que o maior problema encontrado pelos professores quedese am publicar seus materiais na Internet é o aprendi$ado de linguagens de programa"ão necessárias a esta tarefa e refor"a a idéia de que essa car7ncia pode sersuperada através das equipes multidisciplinares.

    21

    http://www.lascaux.culture.fr/http://www.lascaux.culture.fr/

  • 8/18/2019 Interfaces n

    22/23

    #ntretanto! outros caminhos v7m surgindo6 as interfaces gráficas e asferramentas de autoria abrem novas perspectivas para que os professores adquiram demaneira crescente! a autonomia necessária para que eles pr%prios possam criar seus

    materiais de aprendi$agem. ,este cenário de inser"ão crescente da tecnologia nas práticas educativas! despontam as ferramentas da &eb ;.3! oferecendo novas possibilidades para que os professores tornem-se os autores de valiosos conteúdos paraa dissemina"ão do conhecimento.

    efer7ncias/ma$on! ';3(3+! Disponível em6 http6XX]]].ama$on.com. /cessado em maio de ;3(3./pple Computers ';3(3+! Disponível em http6XX]]].apple.com. /cessado em maio de;3(3./rnheim! udolf '()GH+=isual? 1ão Baulo6 0isual #ditora.LlacM! .@ebsites que funcionam.1ão Baulo6 FuarM #ditora! ())A. p.;*AChe uevara! ';3(3+! disponível em http6XX]]].informagiovani.itXche.htm. /cessadoem maio de ;3(3.

    lobo ';3(3+! Disponível em http6XX]]].globo.comX. /cessado em maio de ;3(3.oogle ';3(3+! Disponível em http6XX]]].google.com.br. /cessado em maio de ;3(3.

    Neller! E.9 LurMman! #. '())+Chapter(6 otivation Brinciples In6 ?2# I, ! .9 and2#0I#! &.

  • 8/18/2019 Interfaces n

    23/23

    ,ielsen! EaMob./rojetando @ebsites. io de Eaneiro6 #ditora Campus! ;333. p.H(>.usicover@ ';3(3+! Disponível em6 http6XX]]][email protected]. /cessado em maio

    de ;3(3.

    Oren! . '())3+= esigning a 9eC &edium? In6 2aurel! Lrenda. he /rt Of A+ Disponível emhttp6XX]]].]arhol.orgXdefault.asp. /cessado em maio;3(3

    http://www.ime.uerj.br/professores/neidenew/Interfaces.htm.%20Acessado%20em%202003http://www.ime.uerj.br/professores/neidenew/Interfaces.htm.%20Acessado%20em%202003http://www.asktog.com/http://www.warhol.org/default.asphttp://www.ime.uerj.br/professores/neidenew/Interfaces.htm.%20Acessado%20em%202003http://www.ime.uerj.br/professores/neidenew/Interfaces.htm.%20Acessado%20em%202003http://www.asktog.com/http://www.warhol.org/default.asp