Princpios de design na elaborao de material multimdia para a Web

Anna Christina de Azevedo Nascimento Projeto RIVED, Ministrio da Educao annanascimento@mec.gov.br

Introduo
Somos bombardeados a todo instante com mensagens de todos os tipos, sob todas as formas, todas tentando nos fazer olhar, ouvir e reagir. Algumas dessas mensagens so mais importantes que outras, mas nem sempre as informaes que realmente precisamos so fornecidas numa forma que prontamente podemos entender. Pense em todos os manuais de instrues, mapas de estradas, sinais de rodovias, contas de telefone e formulrios que voc j teve dificuldades de interpretar. H claramente uma demanda para o design da informao no nosso mundo, para a organizao de dados, o tratamento da escrita, e a apresentao, de modo que todos possam acess-la e compreend-la. Apesar das novas tecnologias oferecerem cada vez mais recurso para a aprendizagem, o mau planejamento na apresentao do material multimdia pode causar desorientao no usurio e mesmo desmotiv-lo a se engajar na atividade proposta. Se a atividade multimdia cuidadosamente desenhada, os usurios podem acompanh-la em seu prprio ritmo, acessar facilmente a informao e se engajar de forma independente num aprendizado por descoberta. Com a utilizao de imagens, som e experincias de simulao e experimentao, a atividade multimdia envolve o estudante num nvel que poucas publicaes, leituras, ou mesmo, demonstraes, poderiam fazer. Programas de multimdia tem a vantagem de envolver mltiplos sentidos simultaneamente, e assim, acomodar uma grande variedade de estilos de aprendizagem. Os mdulos RIVED so formados por atividades multimdia, na forma de objetos de aprendizagem. Este artigo tem o propsito de oferecer alguns princpios bsicos de design para os mdulos educacionais j existentes e os que futuramente sero publicados na web.

Caractersticas dos usurios

Antes de comear a tomar qualquer deciso sobre o design das atividades e objetos de aprendizagem, necessrio identificar as caractersticas dos alunos e professores que iro utilizar esse material, pois eles sero os usurios dos nossos mdulos. Esse procedimento ajudar a equipe de desenvolvimento a planejar tanto as estratgias pedaggicas quanto os elementos multimdia, de forma a facilitar a aprendizagem do aluno e o trabalho do professor. Exemplo de questes que devem ser levantadas sobre os usurios: Quais so suas caracterstica pessoais (idade, status socioeconmico, regio onde mora, sexo, etc). Qual o nvel educacional dos usurios (primeiro, segundo, terceiro ano). Qual a experincia anterior dos usurios com computadores e internet? Que recursos de tecnologia tm disponveis?

Essas informaes ajudaro a equipe de produo dos mdulos a tomar decises adequadas na hora de planejar o roteiro das atividades e o layout das pginas. Um material criado sem considerar esses fatores pode no obter a efetividade esperada junto aos alunos e professores que pretendemos atingir.

O planejamento da interface instrucional

O design da interface de um produto multimdia deve ser consistente e agradvel do ponto de vista esttico, a fim de orientar e ganhar a ateno do estudante. As primeiras impresses tm uma grande influncia na atitude de uma pessoa em relao a um objeto ou situao. Se voc puder estimular a curiosidade de um aluno durante os primeiros minutos de uma atividade, mais chances voc ter de ter um aluno motivado a se engajar no estudo de determinado mdulo. No RIVED, elaboramos mdulos educacionais compostos por atividades multimdia em forma de objetos de aprendizagem. Esses objetos so publicados na web em pginas html, combinados com outros formatos de informao, como o texto que apresenta e complementa as atividades produzidas. A informao apresentada na pgina deve ser organizada de forma a facilitar a sua visualizao e interpretao correta. O propsito do design da pgina de um mdulo educacional no s apresentar a informao, mas tambm ajudar o estudante no seu processo de aprendizagem.

Organize adequadamente a quantidade de informao que dever aparecer na tela do computador.

A fim de garantir a ateno do aluno na tarefa, e no sobrecarreg-lo com informaes desnecessrias, no mostre as informaes todas de uma vez. Apresente apenas o que for relevante para o usurio naquele momento. Pense na tarefa, ou situao proposta para o usurio durante uma atividade interativa, e identifique a sequncia lgica de informaes necessrias. Por exemplo: durante uma atividade, que simula um experimento no laboratrio, voc quer que o estudante, depois de fazer o experimento, responda uma questo sobre o assunto da atividade. Nesse caso, voc dever identificar toda a sequncia de aes que ser desempenhada pelo estudante, mais as informaes necessrias para que isto acontea. Ele ter que manipular alguns botes? Acessar tabelas de dados? Utilizar um quadro de frmulas? Assim como tambm identificar o momento em que o sistema dever disponibilizar essas informaes ao estudante, inclusive o feedback.

Algumas orientaes para posicionar as informaes na tela: A mesma informao, durante uma atividade, ou nas vrias atividades de um mdulo, deve aparecer na tela sempre na mesma posio. Por exemplo: as instrues da atividade, mensagens de erro, o feedback. Uso de janelas Vantagens: permite ao aluno acesso a mltiplas fontes de informao necessrias para completar a atividade. Desvantagens: perigo de poluir a tela e confundir o aluno. Design de janelas As janelas devem aparecer sempre na mesma posio e com o mesmo tamanho. Janelas com contedos distintos devem apresentar formatos distintos. Exemplo: janela de instrues, janela com tabela de dados, janela de mensagem de feedback.

Navegao
Sempre ajude o usurio a se orientar usando mltiplas tcnicas para sinalizar a atual localizao. Pode ser atravs do ttulo da atividade, ou da opo em uso marcada na barra do menu, ou o cone no topo da pgina. E tambm pode ser todas as trs tcnicas descritas. Indique claramente os links de cada pgina web.

Verifique se os links esto bvios eles esto apresentados em cores e estilos diferentes do texto padro? Links claros so ferramentas de navegao das mais importantes. Ningum deveria ter que passar o mouse atravs da pagina para ver se ele se torna uma mozinha.

Tamanho da tela
A escolha do tamanho adequado de tela tambm um fator importante no design de informao. No RIVED adotamos o design de pagina para a visualizao na resoluo 800 x 600. Porm, os objetos de aprendizagem so construdos com o tamanho de palco padronizado no tamanho 700 x 400. essa deciso evita que o usurio tenha que fazer o rolamento da pgina par visualizar a informao completa.

Uso de cores
As cores podem ser usadas para diferentes propsitos num mdulo. Um esquema de cores consistente pode servir como ferramenta de navegao. As cores podem estabelecer o tom de um site, mais informal, mais alegre, ou mais elegante e formal, etc. Porm, cores tambm podem causar distrao do objetivo principal. Use cores para agrupar ou relacionar informaes e atrair ateno aonde voc a quer. No use cores arbitrariamente; os usurios interpretam que as cores so importante ou esto relacionadas de alguma forma (Howlet, 1996). As pesquisas mostram que a maior parte dos estudantes prefere visuais coloridos do que aqueles em preto e branco. Porm, no h nenhuma diferena significativa na aprendizagem, a menos que cor seja um elemento essencial do contedo a ser aprendido. Por exemplo: quando alunos devem aprender a montar um circuito eltrico com diferentes fios coloridos, nesse caso a presena de cores essencial. (Heinich, Molenda & Russel, 1989). Estudantes daltnicos percebem as cores e os contrastes de forma diferente. Esta diferena pode tornar o uso desse recurso intil para esses usurios. Ateno tambm para a diferena tcnica entre os monitores, uma determinada cor que parece boa no seu monitor pode parecer horrvel num outro. Seja qual for o seu uso de cores, certifique-se que ele refora a proposta educacional e no se torna uma distrao.

Use com cuidado o fundo colorido.

A maior parte das pesquisas sobre legibilidade de textos em telas de computadores pr datam a World Wide Web, e, portanto, foram conduzidas com monitores menos efetivos em termos de luminescncia e contraste, sendo este fator crtico para a avaliao da combinao fonte/fundo de pgina (Bouma 1980; Mills and Weldon 1987). Porm, h uma certa consistncia entre os autores ao dizer que quanto maior o contraste entre fonte e fundo, melhor o desempenho na leitura (Hill & Scharff, 1997). No utilize cores de fundo que reduzem a legibilidade do texto ou no permitem que os usurios imprimam. Fundos com textura tambm so desaconselhveis para a apresentao de textos.

Elementos multimdia
A utilizao de mltiplos formatos de informao (simulaes, imagens estticas, textos, som, animaes, vdeos) desempenham um papel importante na aquisio do conhecimento quando bem utilizados. A psicologia cognitiva, com estudos sobre o processo da informao e a memria humana, tem dado muitas contribuies para o design desses formatos visando a aprendizagem. (Mayer,2001), (Paivio, 1986; Clark & Paivio, 1991) (Baddeley, 1999) Quando utilizar elementos multimdia para um website sempre considere a adequao dos elementos de mdia e as necessidades dos usurios.

Esteja atento s limitaes dos estudantes e dos professores em relao a computadores e softwares. Quando so necessrios plug-ins e softwares especficos para ver os elementos de multimdia na web, voc deve explicar exatamente quais so os requerimentos necessrios para o acesso. Nos mdulos RIVED essas instrues so fornecidas no guia do professor.

Texto
Os princpios de design de texto para material impresso nem sempre se aplicam a multimdia. Por exemplo: o texto justificado nem sempre aumenta a legibilidade na tela (Rubstein & Hesh, 1984). Porm, o uso de maisculas e minsculas no computador torna a leitura mais fcil e mais rpida (Marcus, 1984; Tullis, 1983). Diminua a densidade do texto usando espao em branco, marcadores, e listas aumenta a velocidade de leitura (Jones, 1989). O rolamento de tela deve ser evitado, pois ele causa distrao nos usurios e tornam o material mais difcil de ser assimilado. Portanto, quebre o texto em apresentaes em pginas separadas para melhorar a compreenso da informao. Alm disso, tambm para facilitar a leitura, o texto deve ser quebrado em pequenos blocos. Em geral, no computador deve haver menos texto do que no material impresso. Os estudos mostram que a informao organizada em blocos retarda a fadiga e aumenta a compreenso de leituras feitas na tela do computador (DeBra, 1996). Prefira utilizar linhas de texto curtas ao invs de linhas longas se a sua inteno de que o texto seja lido na tela e no impresso para leitura no papel. Estudos mostram que linhas mais curtas de texto so mais efetivas do que as longas (Hansen & Haas, 1988; DeBra, 1996). O esforo de movimentar os olhos atravs de longas linhas de texto na tela do computador cansa rapidamente o usurio. Dessa forma, h uma queda na compreenso com longas linhas de texto. Uma sugesto seguir a orientao adotada pelos jornais online, que utilizam uma nica coluna de texto que no toma mais que 50% da tela (40 a 60 caracteres por linha).

Escolha fontes que facilitam a viso e a leitura na tela.

Geralmente, as fontes sem serifa so mais legveis na tela (Arial, Verdana, Tahoma). Os pequenos detalhes das fontes com serifas so difceis de se ver em tamanho pequeno, e dificultam a leitura (Times New Roman, Courier New). A fonte Verdana uma tima fonte para a web, otimizada para a tela do computador. No RIVED esta a fonte adotada como padro para as pginas dos mdulos.

Seja consistente no uso das fontes.

Crie uma hierarquia tipogrfica consistente. O corpo do texto, ttulos, e subttulos devem se apresentar sempre no mesmo formato de pgina para pgina do site. Quando elaborar instrues para as atividades/objetos de aprendizagem: use sentenas curtas oferea o passo-a-passo escreva as instrues na voz ativa use palavras claras, evite termos muito tcnicos e abreviaes.

Imagens
A principal funo das imagens, como ferramentas de comunicao, servir como uma referncia mais concreta ao significado. Normalmente, as imagens, se assemelham aos objetos que eles representam. Um fator fundamental entre os diferentes tipos de imagens o seu grau de realismo. Nenhum formato de mdia totalmente realstico. Os objetos e eventos reais sempre tm aspectos que no podem ser capturados em fotografias, desenhos ou mesmo em filmes. Porm o maior grau de realismo nem sempre ajuda na aprendizagem. H estudos que mostram que, em certas circunstncias, realismo pode at mesmo atrapalhar o processo de aprendizagem. Quando criamos material didtico, precisamos fazer uma distino entre imagens que as pessoas preferem olhar daquelas que as fazem aprender melhor. As imagens preferidas no so necessariamente as que facilitam a aprendizagem. (Heinich, Molenda & Russel, 1989). A maior parte dos estudantes prefere fotografias ao invs de desenhos. Apesar disso, em muitas situaes, os desenhos so mais efetivos para a aprendizagem. Os desenhos podem ressaltar os detalhes importantes.

Animaes
A maior aplicao para as animaes em educao est no seu uso para apresentar contedo. Animaes, com ou sem texto, oferecem muitas oportunidades para apresentar fatos, conceitos, e princpios. As animaes podem ser usadas em forma de atividades interativas, como no caso das simulaes. Utilize animaes para as aes que no podem ser expressas adequadamente com imagens estticas.

O uso de animaes deve ser feito para atrair ateno, explicar e reforar o contedo, e no para distrair o usurio. Animaes so adequadas para chamar a ateno de mudanas de um estado para outro, como por exemplo, uma animao que mostra o extermnio gradual de microorganismos causando efeito negativo na natureza.

Simulaes
As simulaes consistem no formato mais buscado no projeto RIVED, uma vez que elas possibilitam ao estudante: a experimentao (hands on), o envolvimento numa situao (simplificada) da vida real (reality on) e o estmulo do raciocnio e pensamento crtico ( minds on). Estes so os trs requisitos que devem estar presentes nas atividades dos mdulos educacionais, segundo os fundamentos do Projeto. A escolha da simulao deve envolver as mesmas consideraes para a seleo de elementos de mdia em geral: como este material colabora como os seus objetivos educacionais? Este o melhor meio para atender os seus objetivos, nenhum outro mtodo pode faz-lo? O custo em dinheiro e tempo para a produo valem o benefcio? Atravs das simulaes podemos oferecer aos estudantes um laboratrio que possibilita a aprendizagem por descoberta. As relaes de causa e efeito podem ser descobertas na observao das consequncias reais das aes. As simulaes oferecem a vantagem de oferecer feedback em tempo real ao estudante. As simulaes podem variar no grau de realismo das situaes que se pretende modelar. Uma simulao que incorpora muitos detalhes, e que trata de uma situao complexa, pode ser difcil demais para o estudante e exigir dele muito tempo de dedicao. Por outro lado, se o modelo super simplificado, pode falhar em obter os resultados de aprendizagem desejados Um problema comum no design de simulaes que combina atributos de jogos a nfase muito grande no fator chance. O estudante, por exemplo, pode obter um grande nmero de pontos num jogo educacional, independente das estratgias utilizadas por ele. Uma simulao com bom design apresenta um modelo fiel dos elementos mais importantes para o objetivo da atividade, e informa ao professor e estudante sobre os elementos que foram simplificados ou eliminados. Assim como outras mdias, mtodos e formatos, as simulaes no so mgicas. A efetividade da aprendizagem depende da qualidade do material criado e a sua utilizao. Estudos mostram que, estudantes inexperientes na rea do contedo abordado, podem no perceber os detalhes e as pistas importantes apresentadas na simulao (Rieber, 1990 ). Num estudo de Mayer e Anderson (1991), as animaes apresentadas sem nenhum suporte verbal falharam completamente, indicando que: ou os alunos no tiveram o foco adequado, ou no entenderam os elementos visuais mais importantes da apresentao. Portanto, as atividades de simulao e animao devem trazer informaes e dicas suficientes para guiar os estudantes, a fim de que eles aproveitem o potencial de aprendizagem desse formato. Algumas atividades que utilizam simulaes dependem bastante de discusses que devero ocorrer depois de terminadas as atividades, a fim de obter seu efeito completo. Estas estratgias devem ser cuidadosamente planejadas pelas equipes de desenvolvimento de mdulos RIVED, para constar no guia do professor, documento que acompanha cada atividade. Outro fator que deve ser considerado durante a elaborao da simulao diz respeito ao tempo necessrio para o estudante completar a atividade. As equipes de produo devem estar sempre cientes da realidade das escolas pblicas brasileiras. Isso evita, por exemplo, que venham a produzir material que requer dos alunos e professores mais tempo de uso dos computadores do que o disponvel nos laboratrios das escolas.

Simulaes de jogos
A vantagem dos jogos est no fator de entretenimento. Uma das caractersticas comum dos jogos a competio, na forma de estudante versus estudante, estudante versus computador, ou estudante versus ele mesmo (Hannafin & Peck, 1988). Procure elaborar atividades de jogos que desafiam os estudantes e instigam sua curiosidade.

Tarefas muito fceis se tornam tediosas, e aquelas muito difceis so frustrantes e intimidantes. Desafio e curiosidade so obtidos de tarefas que oferecem novidades, so relativamente complexas, ou produzem resultados inesperados. Malone (1981) oferece vrias sugestes para proporcionar desafio e curiosidade num jogo educativo: Elabore jogos com um objetivo claro e simples. Elabore jogos com resultados incertos. Estruture o jogo a fim de que os jogadores possam aumentar ou diminuir a dificuldade para atender suas habilidades e interesses. Oferea alguma forma de medir o sucesso dos jogadores, para que eles saibam como esto progredindo na atividade. Oferea feedback de forma clara sobre a performance do jogador. Oferea algum nvel de escolha para os jogadores.

Som
O som deve complementar, e no competir com a informao na tela. Quando decidir pelo uso de som numa atividade, certifique-se que ele refora o contedo, mas no o nico formato para apresent-lo. Essa orientao, no s conribui para enriquecer a oferta da informao, como tambm previne que aqueles usurios que no tm os recurso para ouvir som, ou no querem utiliz-lo, fiquem sem ela. Outra considerao que voc dever fazer, diz respeito a viabilidade do uso de som pelos alunos no ambiente de aprendizagem. Num laboratrio de computadores sendo utilizado por vinte alunos ao mesmo tempo, o uso de som pode no ser uma boa idia.

Vdeo
Uma das razes mais importantes para o uso de vdeo na educao o seu potencial de evocar uma resposta emocional imediata num estudante. Tal reao pode ser determinante em motiv-lo a se engajar em determinada tarefa. O vdeo pode ser um recurso poderoso num programa multimdia. Ele adiciona realismo e permite demonstraes que animaes e imagens estticas nunca podero substituir, como a erupo de um vulco, por exemplo. Eles tambm podem oferecer um contexto significativo para a aprendizagem. Um exemplo seria apresentar aos estudantes um segmento de um vdeo de uma situao real e de interesse deles, para em seguida explor-la em outro formato mais simplificado. Um exemplo de uso de vdeo no RIVED a rpida apresentao de um clipe de um jogo de vlei na introduo de um objeto de aprendizagem que simula este jogo para ensinar conceitos de fsica.

Comentrios finais
O perigo de confundir bom design com o mero uso da ltima tecnologia disponvel muito grande na rea dos computadores. Apesar de sua importncia e potencial, o computador uma ferramenta, um recurso para facilitar a aprendizagem. Este artigo no teve a inteno de esgotar o assunto e nem ser um substituto para um estudo mais profundo das idias e reas includas aqui. Porm, o propsito foi sensibilizar as pessoas responsveis pelo design de atividades educacionais no computador, e principalmente as equipes de desenvolvimento de mdulo do RIVED, sobre fatores relevantes que devem ser considerados na hora de elaborar o material.

Bibliografia
Baddeley, A.D (1999) Working Memory. Oxford, England: Oxford University Press. Bouma, H. (1980) Visual Reading Processes and the Quality of Text Displays, in Ergonomic Aspects of Visual Display Terminals, E. Grandjean and E. Vigliani (eds.), London: Taylor & Francis, , pp. 673-702. Calvert, P. (1996) the Communicators Handbook: tools, techniques, and technology. ACE. Maupin house. DeBra, P.M. (1996). Hypermedia structures and systems. (Web Course, Eidenhoven University of Technology) Hannafin, M., & Peck, K. (1988). The design, development, and evaluation of instructional software. New York: MacMillan. Hansen, W.J & Haas, C. (1988). Reading and writing with computers: A framework for explaining differences in performance. CACM, 31, 1080-1089. Heinich, R., Molenda, M. & Russel J. D. (1989). Instructional media and the new technologies of Instruction. Macmillan Publishing Company. NY Hill, A.L. and Scharff, L.V. Legibility of Computer Displays as a Function of Colour, Saturation, and Text Backgrounds, in Engineering Psychology and Cognitive Ergonomics (Vol. 4), D. Harris (ed.), Sydney: Ashgate, 1999, pp. 123-130. Howlett, V. (1996). Visual Interface Design for Windowns, New York: John Wiley & Sons. Jones, M.K. (1989) Human-computer interaction: a design guide. Englewood Cliffs, NJ: Educational Technology Publications. Macaulay, L. (1995). Human computer interaction for software designers. international Thomsom Publishing. London UK. Malone, T. (1981). Toward a theory of intrinsically motivating instruction. Cognitive Science, 4, 333-369. Marcus, A. (1984).Corporate identityfor iconic interface design: the graphic design perspective. IEEE Conputer Graphics and Applications, 4(12), 24-32. Mayer, R. E., & Anderson, R. B. (1991). Animations need narrations: An experimental test of a dual-coding hypothesis. Journal of Educational Psychology, 83(4), 484-490. Mills, C.B. and Weldon, L.J. Reading Text from Computer Screens, ACM Computing Surveys, (19:4), 1987, pp. 329358. Paivio, A. (1971). Imagery and verbal processes. New York: Holt Rinehart & Wiston. Rieber, L. P. (1990a). Animation in computer-based instruction. Educational Technology Research and Development, 38(1), 77-86. Rubeinstein, R., & Hersh, H.M.(1984) the human factor: designing computer systems for people. New York: Digital Press. Tullis,T. S. (1983). the formatting of alphanumeric displays: a review and analysis. Human factors, 25(6), 657-682.