INTERFACES PARA SOFTWARES EDUCATIVOS

Eliseo Reategui*
Resumo. Por que a leitura de um livro bem encadernado, com boa diagramao e repleto de ilustraes coloridas prov uma leitura mais prazerosa e at nos permite lembrar mais informaes do que se lssemos o mesmo material em um livro mais modesto sem nenhuma preocupao com formatao? Este artigo responde esta pergunta atravs da discusso de como a utilizao de imagens, a apresentao de textos, o layout de pgina e outros fatores afetam a interface de um sistema computacional, do mesmo modo que afetam a construo de um bom livro. Aspectos pedaggicos relativos concepo das interfaces tambm so destacados, mostrando como estes norteiam o design dos sistemas para promover o pensamento, a reflexo e conseqentemente, a aprendizagem. Palavras-chave: interface humano-computador, usabilidade, softwares educativos

INTERFACES FOR EDUCATIONAL SOFTWARE

Abstract. Why does the reading of a book with a nice cover, with well presented contents and illustrations promote a more pleasurable reading and even enables us to remember more information than if we read the same material in a less fancy book? This article answers this question through the discussion on how the use of images, the presentation of texts, the design of page layouts and other factors affect the interface of a computational system in the same way they affect the creation of a good book. Pedagogical aspects related to interface design are also highlighted, showing how they guide system design in order to promote thinking, reflection and, consequently, learning. Keywords: human-computer interface, usability, educational software

1. Introduo A distncia entre as expectativas geradas pelo uso de tecnologia na educao e a realidade dos prprios softwares disponveis uma constante nos dias de hoje (Resnick, 2002). Tal distncia muitas vezes ocasionada no apenas pela concepo dos softwares e de suas funcionalidades, mas tambm pelo design simplista das interfaces e de seus processos interativos. Uma interface atraente com dispositivos de interao adequados tem um efeito positivo na usabilidade do software, em sua aceitao, bem como no seu potencial para promoo da aprendizagem. Por isso a concepo do software e de sua interface deve estar alinhada a princpios pedaggicos adequados, atendendo desde requisitos como formato de apresentao de contedo e interao, at a quantidade de informao apresentada. Este artigo decompe a interface de um software educativo em oito aspectos e apresenta algumas diretrizes de como projetar adequadamente cada um deles. Interao,

Doutor em Computao. Professor Adjunto do Departamento de Informtica Universidade de Caxias do Sul (UCS). Rua Francisco Getlio Vargas, 1130 95070-560 Caxias do Sul RS. E-mail: ebreateg@ucs.br

usabilidade e afetividade so alguns dos tpicos tratados, relacionando-os com princpios pedaggicos fundamentais na concepo destes softwares. 2. Utilizao de imagens e animaes Shimada e Kitajima (2006) apontam dois fatores que fazem com que ilustraes tenham um impacto positivo na aprendizagem: Efeito de motivao: este caracterizado pelo impulso que temos em realizar ou no uma ao. Uma ilustrao pode, por exemplo, nos motivar a ler um texto ou nos levar a ignor-lo. Efeito de elaborao: quando um indivduo visualiza uma imagem junto a um texto, este cria uma representao da imagem e a associa ao contedo lido. O processo chamado de efeito de elaborao.

Ambos os fatores influenciam positivamente na construo do conhecimento. Mayer e Moreno (2007) tambm evidenciam a importncia das imagens na compreenso de textos. Os autores apontam que, de acordo com o princpio da representao mltipla, melhor apresentar uma explicao atravs de textos e ilustraes do que apenas atravs de textos. Em uma srie de experimentos, verificou-se que estudantes que ouviram uma narrao enquanto visualizavam uma animao ilustrando o funcionamento de uma bomba de pneu foram capazes de produzir mais solues teis em testes subseqentes do que os estudantes que apenas ouviram a narrao (Mayer e Anderson, 1992). O poder explicativo das imagens, no entanto, est associado forma com que estas so empregadas. Meyer (2001) aponta que imagens podem ser utilizadas com diferentes funes: Funo decorativa: uma imagem possui a funo decorativa quando tem o propsito de melhorar a aparncia esttica do material no qual est inserida. Portanto, as imagens utilizadas desta maneira no carregam nelas nenhuma mensagem diretamente ligada aos contedos tratados. Funo representativa: nesta funo, a imagem exemplifica um conceito apresentado textualmente, representando-o atravs de uma ilustrao. Por exemplo, uma descrio textual de determinada planta pode ser ilustrado por uma imagem representativa do vegetal. Funo organizacional: as imagens empregadas com a funo organizacional ilustram relaes entre conceitos ou entre elementos que compem determinado objeto. Por exemplo, uma imagem com funo organizacional pode ilustrar a disposio dos diversos componentes do motor de um automvel. Funo explanatria: nesta funo, as imagens explicam como o funcionamento de um sistema dinmico, no qual a varivel tempo considerada. Por exemplo, a imagem anterior que apresentava o motor de um automvel pode assumir a funo explanatria se a dotarmos de setas indicando como o funcionamento dos pistons do automvel quando o motor ativado.

Por no carregarem nenhuma informao explcita em suas representaes grficas, as imagens com funo decorativa acabam cumprindo um papel secundrio no que diz respeito aos processos de aprendizagem. Contudo, estes no podem ser negligenciados, podendo estar associados a fatores como motivao e usabilidade aparente da interface, princpios discutidos com mais detalhe na seo 8.

J as animaes podem ter funes semelhantes quelas das imagens estticas. Ou seja, podem ser utilizadas com funo decorativa, representativa, organizacional ou explanatria. No entanto, as animaes se adequam mais representao de conceitos e/ou elementos dinmicos, nos quais mudanas no objeto em estudo so observadas com o passar do tempo (funo explanatria). De acordo com o princpio da congruncia, a estrutura e o contedo de uma visualizao devem corresponder estrutura e ao contedo da representao mental a ser incitada (Tversky, 2007). Princpio estabelecido inicialmente para imagens estticas, quando estendido s animaes poderia ser interpretado da seguinte forma: as animaes podem facilitar a aprendizagem na medida em que empregam movimento para representar movimento. No entanto, Morrison e Tversky, B. (2001) mostram que alunos que estudaram determinados contedos a partir de textos ilustrados por animaes ou imagens estticas obtiveram desempenho similar. As autoras enfatizam, contudo, que possvel que as animaes sejam eficientes em outras situaes, especialmente para manter a ateno dos estudantes. 3. Apresentao de textos Nielsen (1997) afirma que no se l na web da mesma maneira que no meio impresso. Portanto, no se deve escrever para a web do mesmo jeito que para o meio impresso. Em decorrncia disso, a apresentao de textos nas telas do computador deve ser feita com alguns cuidados. Um dos principais motivos pelos quais nossa leitura nas telas dos computadores diferente, que a resoluo destas ainda limitada, mesmo que pouco a pouco se aproxime da resoluo do papel. Alm disso, os monitores tm uma taxa de refresh que pode ser imperceptvel ao olho, mas que aos poucos vai o cansando o leitor. Pesquisas tambm mostram que este pisca menos ao ler em frente a um monitor, causando ressecamento nos olhos. Portanto, uma interface computacional para apresentao de textos deve seguir algumas recomendaes, dentre elas (Bailey et al., 2007): Textos na cor preta apresentados sobre fundo neutro permitem uma leitura mais rpida do que quando apresentados sobre um fundo no qual h alguma textura; A formatao de itens similares deve ser consistente em todas as sees da interface; A utilizao de texto em negrito deve ser feita espaadamente, na medida em que muitos elementos enfatizados em um mesmo texto acabam por perder o efeito. As fontes que possibilitam melhor leitura so aquelas mais conhecidas, como Times New Roman e Georgia (fontes com serifa) ou Arial, Helvtica e Verdana (fontes sem serifa). Nielsen (2002, pg. 51) complementa enfatizando que aquelas sem serifa deveriam ser preferidas, j que os detalhes das serifas no so bem renderizados nos monitores atuais que possuem baixa resoluo. No entanto, o autor destaca que, na medida em que monitores de alta resoluo se tornarem comuns, esta recomendao pode mudar. Quanto ao tamanho das fontes, 12pt tido como o tamanho mais apropriado para leitura na tela.

4. Layout de tela Nos dias de hoje, somos constantemente bombardeados por uma multitude de estmulos visuais. Nossa mente ignora a maior parte desses, processando apenas aqueles que recebem um significado especial baseado em nossa experincia anterior. Krug (2002, p.22) aponta que no lemos as pginas na web, mas rastreamos estas em busca de palavras ou frases que capturem nossa ateno. O tamanho, cor e disposio dos elementos na pgina influenciam a facilidade com que os localizamos. Elementos maiores so encontrados mais rapidamente, bem como elementos em cores saturadas que contrastam com o fundo da tela. Quanto disposio destes elementos, no mundo ocidental as pessoas esto habituadas a lerem da esquerda para a direita, de cima para baixo. Tal ordem obedecida na construo de pginas web, nas quais informaes importantes como nomes de empresas e instituies se encontram no canto superior esquerdo das pginas. Se consultarmos pginas web em pases onde a leitura de textos feita na direo contrria, veremos que a orientao dos elementos na tela tambm totalmente oposta. Por isso, interessante obedecer uma ordem no posicionamento das informaes que respeite esta norma, ou seja, elementos mais importantes nas pores da tela que so comumente percorridas em primeiro lugar. Transpondo estas idias para a concepo de softwares educativos, para que instrues e contedos apresentados em uma tela possam ser visualizados com facilidade, deve-se organizar seus itens em uma ordem que reflita a importncia relativa de cada um. Tambm importante deixar uma quantidade razovel de espaos vazios, evitando a sobrecarga cognitiva. Experimentos mostram a maior parte dos usurios percebe a densidade de uma pgina da mesma maneira, sendo que o excesso de elementos reduz a performance na busca de informaes (Wardeiner, 2007). O alinhamento consistente dos itens em uma tela (blocos de texto, colunas, checkboxes, botes de rdio, etc) tambm facilita a leitura. Um alinhamento mal feito causa movimentos excessivos do olho, na medida em que no h nenhum percurso bvio a ser seguido, como mostra o exemplo da figura 1.

Figura 2. Formulrio com mau alinhamento de rtulos e campos

Atravs do alinhamento de rtulos e de campos, os movimentos do olho so minimizados, facilitando o percurso e a busca de informaes.

Figura 3. Formulrio com bom alinhamento de rtulos e campos

Apesar de possurem a mesma densidade relativa, mais fcil encontrar dados no ltimo formulrio (figura 3), dado que suas informaes esto estruturadas visualmente de maneira lgica. 5. Orientao e Navegao Da mesma forma que podemos nos sentir perdidos quando circulamos em um local desconhecido, tambm podemos nos sentir desorientados ao utilizarmos um sistema computacional causando-nos uma sensao de insegurana e gerando uma srie de questes recorrentes: Onde estou? Que atividades j realizei? Quais os prximos passos? Como posso retornar? Um bom sistema de orientao prov respostas a estas questes o tempo todo, sinalizando os caminhos percorridos pelo usurio e indicando com clareza outros disponveis. Estas caractersticas so particularmente importantes quando tratamos de hipertextos, os quais pem em cheque a narrativa linear e oferecem mltiplas possibilidades de leitura em percursos alternativos (Landow, 1992). Desde sua criao, os hipertextos adquiriram grande importncia no contexto da educao, possibilitando uma forma de leitura e de escrita mais prximas do nosso prprio esquema mental (Ramal, 2002). A estruturao dos textos com mltiplas conexes trouxe novas possibilidades de interao com o usurio, permitindo que cada um escolhesse seu caminho na teia de associaes disponvel, construindo seu prprio conhecimento a partir de seus interesses. Neste universo no qual cada usurio define seu percurso dinamicamente, um sistema eficiente de orientao fundamental. Um dos mecanismos de orientao mais simples e mais importante o ttulo. Alm de enfatizar a poro do sistema na qual o usurio se encontra, ttulos bem redigidos e visualmente claros permitem que o usurio encontre contedos mais rapidamente (Bailey et al., 2007). Tambm possvel orientar o usurio atravs de sistemas de cores, anlogos aos mecanismos utilizados para orientar usurios no mundo real, como em redes de metr, nibus, etc (Thissen, 2004). Nestes, cada linha possui uma cor que utilizada na sinalizao de todas as estaes pelas quais a linha passa. Em sistemas computacionais, o mesmo possvel, atribuindo-se cores diferentes a sees distintas do sistema. Igualmente relevantes so os mecanismos de navegao, que permitem ao usurio se deslocar de um ponto a outro em um website ou hipertexto. Uma das principais

estruturas de navegao so os hiperlinks. Por isso, importante empregarmos convenes sedimentadas para identificao destes, como a utilizao da cor azul para links textuais ainda no percorridos, e vermelho/roxo para links j percorridos. Alm da cor, o uso do formato sublinhado tambm denota a presena de um hiperlink. A combinao das duas convenes (cores e formatao) refora ainda mais a identificao do hiperlink. Mecanismos de orientao e navegao eficazes permitem que os estudantes mantenham seu foco nos objetos de estudo e no precisem despender nenhum esforo para se localizar no software ou aprender a utiliz-lo. 6. Interao Quando conversamos com pessoas, utilizamos palavras, expresses faciais e linguagem do corpo para nos comunicarmos. Atravs destes recursos de comunicao, somos capazes de expressar tanto idias quanto sentimentos. Com o computador, no podemos nos comunicar atravs destes mesmos mecanismos. Ao invs deles, empregamos dispositivos de entrada e sada que estabelecem outros paradigmas de comunicao e estilos de interao (PREECE et al., 2002). Um software educativo concebido com bases construtivistas, certamente tem na interao um dos seus principais focos. Projetos de softwares com esta perspectiva apiam as prticas pedaggicas com relao autonomia do sujeito e forma de trabalhar o erro (COSTA, 2005). Com base nesta abordagem, os alunos constroem seu conhecimento a partir de suas prprias experincias e a partir de auto-regulaes que ocorrem atravs das relaes estabelecidas entre o sujeito e o objeto (Piaget, 1973). Giraffa e Viccari (1998) classificam os softwares para apoio pedaggico em quatro categorias: Exerccio: exercita contedos (estilo acertos/erros); Tutorial: apresenta contedos de forma dirigida; Simulao e modelagem: permite a visualizao de situaes reais; Jogo educativo: proporciona uma fonte de recreao com vistas aquisio de um determinado tipo de aprendizagem;

Dentre estas, as categorias de simulao e de jogos so as que normalmente promovem maior interao com o usurio. No entanto, para desfrutar dos benefcios destes recursos interativos, fundamental conceber adequadamente os processos de comunicao entre homem e mquina (Tognazzini 2003), empregando mecanismos que promovam o pensamento e a reflexo, e vo alm da simples seleo de hiperlinks para avanar ou retornar na apresentao dos contedos. 7. Usabilidade A usabilidade mede a qualidade da experincia de um usurio quando interage com um produto ou sistema. Em geral, a usabilidade se refere facilidade que os usurios tm em aprender a utilizar um produto para alcanar seus objetivos, e o quo satisfeitos ficam com o processo. Steve Krug (2006), por exemplo, mostra como a falta de usabilidade pode afetar negativamente a utilizao de um produto. Em relao aos

softwares educativos, problemas na usabilidade da interface podem no apenas dificultar o uso do sistema quanto prejudicar a aprendizagem dos contedos. Wardeiner (2007) aponta cinco fatores para medir a usabilidade de uma interface: Facilidade de aprendizagem: avalia o quo rpido um usurio que nunca viu uma interface anteriormente pode aprend-la suficientemente para realizar tarefas bsicas. Eficincia de uso: verifica o quo rpido usurios experientes podem realizar suas tarefas. Memorizao: avalia se um usurio que j utilizou o sistema consegue lembrar-se dele para utiliz-lo efetivamente uma prxima vez. Freqncia de erro e severidade: mede o quo seguido o usurio comete erros quando utiliza o sistema e o quo srio so estes. Satisfao subjetiva: avalia o quanto o usurio gosta de utilizar o sistema.

A maior parte destes fatores est relacionada a algum dos tpicos j apresentados no artigo. Por exemplo, a facilidade de aprendizagem est relacionada aos mecanismos de orientao e navegao empregados. A eficincia de uso e freqncia de erros esto relacionadas principalmente aos mecanismos de interao utilizados, enquanto a memorizao pode estar vinculada densidade de informao existentes nas telas (layout). J a satisfao subjetiva est ligada principalmente a fatores como esttica e afetividade, aspectos comentados na prxima seo. 8. Esttica e Afetividade Emoo e motivao so foras centrais por trs de atos humanos. A pesquisa na rea de motivao assume que esta est presente no desempenho de todas as atividades, ou seja, um comportamento aprendido no ocorrer a no ser que seja energizado (Huitt, 2001). Por esta razo, um bom software educativo explora no apenas o lado cognitivo, mas tambm o lado afetivo, e utiliza estratgias de motivao especficas. O apelo esttico de uma interface pode motivar um usurio a utilizar determinado sistema. Pesquisadores na rea de fatores humanos demonstraram tambm que a esttica pode afetar usabilidade aparente de uma interface (Korosu & Kashimura, 1995; Tractinsky, 1997) ou seja, pode influenciar a percepo do usurio quanto facilidade de uso do sistema. Donald Norman, que demonstrou porque a forma de utilizao de um produto nunca deveria ser confusa (Norman, 2002), em obra mais recente argumenta que a pesquisa em emoo e cognio tem comprovado que objetos atrativos funcionam melhor, na medida em que as pessoas tm mais disposio para utiliz-los (Norman, 2004). Outros pesquisadores argumentam que, nos ltimos anos, muitas evidncias foram encontradas apontando que cognio e afetividade juntas guiam o comportamento racional, a busca de fatos na memria, a criatividade e a tomada de deciso (Picard et al., 2004). Tais pesquisas enfatizam a necessidade de se desenvolver teorias e tecnologias nas quais cognio e afetividade sejam integradas de modo apropriado. Uma forma eficaz de se trabalhar afetividade em um sistema computacional atravs de agentes de interface animados, personagens virtuais capazes de perceber os estados afetivos do usurio e reagir a estes de maneira apropriada. Vrios pesquisadores tm

investigado o impacto destes personagens em sistemas computacionais aplicados educao. Craig et al. (2002) mostraram que a interao com personagens estticos e animados podem afetar a aprendizagem dos estudantes. Outros experimentos demonstraram que a presena da figura humana tem um efeito positivo nas experincias interativas dos estudantes, mostrando que estudantes consideraram um tpico em estudo menos difcil e a apresentao mais ldica na presena de um personagem virtual (Andr e Rist, 2002). 9. Consideraes finais comum que as interfaces dos softwares educativos sejam desenvolvidas com o simples propsito de operar e controlar um sistema, sem considerar implicaes pedaggicas envolvidas no design de cada um dos seus componentes. Este trabalho apresentou como empregar adequadamente diversos recursos na concepo de interfaces para softwares educativos, de maneira a promover construo do conhecimento. Aspectos importantes no design de interface foram abordados, como usabilidade, interao, afetividade, entre outros. Dado o carter multidisciplinar do desenvolvimento de softwares educativos, no qual profissionais das mais diversas reas devem interagir, torna-se de extrema importncia a utilizao de diretrizes especficas para o design das interfaces, normas fundamentadas em princpios pedaggicos e direcionadas promoo da aprendizagem. 10. Referncias ANDR, E. & RIST, T. (2002). From adaptive hypertext to personalized web companions. Communications of the ACM, v45 n5, May. APARICI, R. e GARCA-MATILLA, A. (1998). Lectura de Imgenes. Madrid: Ediciones de la Torre. BAILEY, R. W. et al. (2007). Research-Based Web Design & Usability Guidelines. U.S. Department of Health and Human Services. Disponvel em: http://www.usability.gov/pdfs COSTA, L. A. C. e FRANCO, S. R. K. Ambientes Virtuais De Aprendizagem e suas Possibilidades Construtivistas. Revista Novas Tecnologias na Educao, v. 3, n. 1. Maio, 2005. CRAIG, S., GHOLSON, B. e DRISCOLL, D. (2002). Animated Pedagogical Agents in Multimedia Educational Environments. Journal of Educational Psychology, Vol. 94, No. 2, 428-434. GIRAFFA, L. M., VICCARI, R. M. (1998). Estratgias de Ensino em Sistemas Tutores Inteligentes modelados atravs da tecnologia de agentes. SBIE - Simpsio Brasileiro de Informtica na Educao, Fortaleza: UFCE/SBC. v.1. p.260-269. HUITT, W. (2001). Motivation to learn: An overview. Educational Psychology Interactive. Valdosta, GA: Valdosta State University. Disponvel em: http://chiron.valdosta.edu/whuitt/col/motivation/motivate.html

KOROSU, M., e KASHIMURA, K. (1995). Apparent Usability vs. Inherent Usability: Experimental Analysis on the Determinants of the Apparent Usability. Conference Companinon on Human Factors in Computing Systems. Denver, Colorado. KRUG, S. (2005). Don't Make Me Think: A Common Sense Approach to Web Usability (2nd Edition). New Riders Press, 2005. LANDOW, G. P. (1992). Hypertext: The Convergence of Comtemporay Critical theory and Tecnology. Baltimore and London: The John Hopkins Universty Press. MAYER, R. (2001). Multimedia Learning. New York, NY: Cambridge University Press. cap. 4. MAYER, R. E. e ANDERSON, R. B. (1991). Animations need narrations: An experimental test of a dual-coding hypothesis. Journal of Educational Psychology, 83, 484-490. MORRISON, J. B. e TVERSKY, B. (2001). The (In)Effectiveness of Animation in Instruction. CHI 2001 - Conference on Human Factors in Computing Systems, ACM Press. Short Talk. Seattle, USA, 31 March-5 April. NIELSEN, J. (1997). How users read on the web. Alertbox, October, 1. Disponvel em: http://www.useit.com/alterbox/9710a.html NIELSEN, J. e TAHIR, M. (2002). Homepage Usability: 50 Websites Deconstructed. Indianapolis, IN, USA: New Riders Publishing. NIELSEN, J. (2003). The Ten Most Violated Homepage Design Guidelines. Alertbox, November 10, 2003. Disponvel em: http://www.useit.com/alertbox/20031110.html NORMAN, D. A. (2002). The Design of Everyday Things. New York, NY: Basic Books. NORMAN, D. A. (2004). Emotional Design: Why we love (or hate) everyday things. New York, NY: Basic Books. PIAGET, J. (1973). Estudos Sociolgicos. Rio de Janeiro: Forense. 243p. PICARD, R. W., PAPERT, S., BENDER, W., BLUMBERG, B., BREAZEAL, C., CAVALLO, D., MACHOVER, T., RESNICK, M., ROY, D., STROHECKER, C. Affective Learning: A manifesto. BT Technology Journal, Vol 22, No 4. October 2004 PREECE, J., ROGERS, Y., SHARP, H. (2005). Design de Interao. Alm da Interao Humano-Computador. Porto Alegre, RS: Bookman. RAMAL, A. C. Educao na Cibercultura: Hipertextualidade, Leitura, Escrita e Aprendizagem. Porto Alegre: ArtMed, 2002. RESNICK, M. (2002). Rethinking Learning in the Digital Age. Disponvel em: http://www.cid.harvard.edu/cr/pdf/gitrr2002_ch03.pdf SHIMADA, H. e KITAJIMA, M. (2006). Why Do Illustrations Promote Text Comprehension? Motivation Effect and Elaboration Effect. 5th International Conference of the Cognitive Science. Vancouver, British Columbia, Canad, July 26. THISSEN, F. (2004). Screen Design Manural: Communicating Effectively through Multimedia. Berlin: Springer Verlag. TOGNAZZINI, B. (2003). First Principles of Interaction Design. AskTog / Nielsen and Norman Group. Disponvel em:

http://www.asktog.com/basics/firstPrinciples.html TVERSKY, B. (2007). What makes visualization effective? Disponvel em: http://visual.nlm.nih.gov/evc/meetings/vrc2004/position_papers/tversky.pdf WARDEINER, M. R. (2007). Usability Engineering Team: Design Guidelines. NASA Glen Research Center. Disponvel em: http://www.grc.nasa.gov/WWW/usability/navigatecss.html THALHEIMER, W. Another Guru Sharing the Same Old Myth. Will at Work Learning. December, 20. Disponvel em: http://www.willatworklearning.com/myths_and_worse/index.html TRACTINSKY, N. (1997). Aesthetics and apparent usability: empirically assessing cultural and methodological issues. Proceedings of the SIGCHI conference on Human factors in computing systems. Atlanta, Georgia, United States. pp.115 122.