IV Congresso Brasileiro de Computao CBComp 2004

Informtica na Educao

Interface de Software Educacional: Desafios de Design Grfico

L. S. Fernandes, A. L. A. Raabe e F. B. V. Benitti

Resumo - Este artigo apresenta desafios de design grfico abordados no projeto Softvali. Este projeto busca conceber um Software Educacional aliando conceitos ergonmicos e de design coerentes com a perspectiva pedaggica adotada.

Apresenta-se sucintamente o projeto SoftVali, as diretrizes de design adotadas e os cenrios desenvolvidos.

Palavras-chave - Design; Interao Humano Computador; Software Educacional. Abstract - This paper presents graphical design challenges approached by Softvaly project. This project aims to built a educational software integrating ergonomical and graphical design issues accordind to a pedagogical perspective. The paper presents Softvaly project briefly, its graphical design guidelines and the developed

interfaces.
Keywords - Design; Educacional Software Human Computer Interaction;

de fornecer ao usurio dados que possam enriquecer o seu saber. Infelizmente, a maioria dos softwares educacionais existentes no mercado, deixam a desejar no quesito pedaggico. Muitos possuem interfaces esteticamente atrativas, cheias de cor e animaes, porm, no possuem teor educativo, fugindo do verdadeiro propsito que se propem a cumprir. Neste artigo apresentado o projeto Softvali, cuja proposta construir um software educacional coerente com uma perspectiva pedaggica, sem perder de vista questes referentes a motivao ao uso e abertura para explorar a criatividade dos alunos. O foco do artigo mostrar os conceitos de ergonomia de interface e diretrizes de design que foram adotados na criao e construo do Software buscando uma adequao a linguagem do pblico alvo (faixa etria de 6 a 11 anos), facilidade de aprendizagem e de utilizao. II. ERGONOMIA DE SOFTWARE EDUCACIONAL PARA CRIANAS A interface de um software educacional de extrema importncia, pois a interface que realiza o contato com o usurio e atravs dela que as informaes so comunicadas. No processo de desenvolvimento da interface, deve-se levar em considerao uma srie de fatores, dentre eles a ergonomia. A ergonomia trata dos conhecimentos cientficos do homem e de sua aplicao na concepo e construo de mquinas e ferramentas que garantam a facilitao de um desempenho global em determinado sistema, ou seja, das condies que afetam diretamente uma situao de trabalho em seus aspectos tcnicos, econmicos e sociais [2]. A adequao ergonmica de um sistema de extrema importncia, para que este seja melhor compreendido e manejado pelo usurio. Da surge o termo Interao HumanoComputador IHC (HCI Human Computer Interaction). Em termos de design, HCI o estudo do processo de desenvolvimento cujo objetivo principal promover uma mudana do projeto centrado no software para projeto centrado no usurio. Independente do tipo de tecnologia empregada no sistema, todo o contedo e formato da informao causar grande impacto na interao com o usurio. Devido isso, a interface deve se enquadrar ao perfil de quem ir utilizada, sendo fcil de ser manejada, suprindo as necessidades do usurio e evitando ao mximo que este se confunda e cometa erros. Para que isso acontea, a interface deve possuir a 254

ma das grandes tarefas dos educadores nas escolas manter os alunos atentos e motivados durante as aulas. Alm do giz, apagador e tradicional quadro negro, o professor tem como instrumento de ensino os livros e mais recentemente, uma importante aliada: a tecnologia. A tecnologia vem provocando mudanas na educao. Trouxe ao alcance do aluno um mundo de informaes e diferentes meios de aquisio de conhecimentos. O computador um claro exemplo de tecnologia que aplicada educao facilita o acesso Internet, o uso de aplicativos e de softwares educacionais. Software educacional um sistema de ensino ligado a contextos educacionais formais e a tarefas orientadas para objetivos, que engloba diferentes nveis de informao tais como currculo, informtica e comportamento; apresenta caractersticas observveis podendo se citar cor, forma, textura, interface, etc; e outros aspectos subjacentes referentes ao rigor, qualidade, interesse e usabilidade [1]. Os softwares educacionais podem ser usados como uma boa ferramenta pelos professores nas escolas. O software interage e prende a ateno do aluno, facilitando a assimilao de informaes e tornando o aprendizado mais divertido. Para que isso acontea, o sistema deve apresentar uma interface bem diagramada, de fcil manejo, interativa e atraente, alm

I. INTRODUO

IV Congresso Brasileiro de Computao CBComp 2004

propriedade de usabilidade. Ou seja, ela deve agrupar uma srie de critrios, que estes juntos, faro o sistema ser bem compreendido pelo usurio. De acordo com [3], a interface deve apresentar conduo, carga de trabalho, controle explcito do usurio, adaptabilidade, gesto de erros, homogeneidade e coerncia, significado dos cdigos e denominaes e compatibilidade. A aprendizagem em um sistema ergonmico se torna muito mais fcil e os ensinamentos melhor compreendidos. As propriedades de usabilidade e aprendizagem caminham juntas na relao Interao Homem-Computador, conferindo interface qualidade pedaggica a um software educacional. III. DIRETRIZES DE DESIGN DO PROJETO SOFTVALI O Projeto Softvali busca construir um software educacional coerente com a perspectiva pedaggica da Escola Sem Fronteiras, adotada no municpio de Blumenau. O software desenvolvido pretende facilitar o aprendizado de conceitos relacionados aos projetos de trabalho em desenvolvimento na sala de aula. Como uma forma de modularizar o desenvolvimento e proporcionar diferentes tipos de atividades de aprendizagem, decidiu-se conceber o software a partir de cenrios. Em cada cenrio, diferentes contedos e habilidades poderiam ser exploradas. Dentre as inmeras possibilidades de cenrios relacionados aos conceitos trabalhados nas disciplinas ministradas na rede municipal de ensino, foram selecionados trs estabelecimentos para compor o software, sendo eles: o supermercado, a Fundao Cultural, esta composta por um Museu Virtual em 3 Dimenses e o Estdio de Cinema; e a fazenda. Na fase de idealizao do projeto, levando em considerao o pblico alvo e tambm a temtica da Rede Pblica de Ensino de Blumenau, foram discutidos vrios tpicos integrantes do software, tais como a metodologia que seria empregada, de que maneira o aluno seria estimulado a aprender, dentre um universo de segmentos que deveriam ser estabelecidos para que pudesse ser concebida a interface do sistema, algumas diretrizes para a representao grfica do Softvali foram traadas. De acordo com [4] a criana de seis a dez anos, no entendimento de Piaget, encontra-se em um momento especial de seu desenvolvimento cognitivo. Superando progressivamente, o egocentrismo do pensamento, admite relaes de cooperao, brincando e aprendendo com o outro; as assimilaes e acomodaes ocorrem de forma mais gil, ampliando notavelmente os esquemas mentais; a formao de classes e sries j ocorre mentalmente, com a internalizao de aes fsicas como operaes aes mentais; apresenta facilidade de operar concretamente, mas a dificuldade em solucionar problemas verbais faz com que opere freqentemente com tentativas e erros. E ainda: a criana, nesta fase de desenvolvimento, apresenta notvel crescimento das possibilidades de utilizao da faculdade da linguagem, atingindo a fala socializada e a adquirindo uma capacidade crescente de utilizar a linguagem em variados sistemas

Informtica na Educao
simblicos. Tudo contribui para isto, inclusive a esquematizao e progressiva coordenao do corpo, dos esquemas mentais e do universo conceitual j construdo. Ref. [5] afirma que os interesses de crianas nessa faixa de idade mudam gradualmente do mundo da fantasia para a realidade. Passam a se interessar por coisas mais complexas e desafiantes. Comeam a desenvolver um senso lgico e no apenas aprendem a ler, mas lem para aprender. Nessa idade elas tambm desenvolvem o raciocnio abstrato, elaboram sentenas complexas e desenvolvem a habilidade de analisar criticamente o que lem. Desenvolvem um amplo vocabulrio e entendem o significado de vrias palavras, por conseguinte, passam a escrever sentenas completas e com pontuao. A partir destas diretrizes, foram sendo desenvolvidos prottipos dos cenrios que foram apresentados equipe interdisciplinar que apia o desenvolvimento do projeto. A partir das reunies realizadas, outras diretrizes foram definidas e so apresentadas a seguir. Quase todos os ambientes do Softvali so feitos em primeira pessoa, ou seja, a criana no v seu personagem em cena, mas ela tem o ngulo de viso desse, evitando assim o uso de figuras humanas no software. Tal deciso baseia-se no fato da variedade de raas existentes no mundo, e estereotipar personagens fugiria de um dos ideais da Rede Pblica de Blumenau: a ascenso de uma sociedade que supere a realidade linear e desigual que discrimina, domina, oprime, marginaliza e explora. Logo, esse cuidado com o uso de figuras humanas de alguma forma media o preconceito existente na sociedade e permite a criana fazer uso de sua prpria identidade. Levando todos os fatores e dados existentes durante a concepo do sistema, seja sobre o pblico-alvo, a temtica da rede de ensino, o objetivo do software e tambm questes de design, a composio das telas, harmonizando imagens, cores e tipos, passam equilbrio e facilitam a leitura da interface. Nos cenrios foi trabalhada a questo dos detalhes, projetando ambientes esteticamente atrativos, o mais prximo do real, embora com uma viso ldica. Os grafismos que integram a interface, tanto da janela principal quanto dos cenrios que compem o software, lembram formas orgnicas, dando uma cara mais divertida e infantil ao software. Os desenhos em sua maioria foram projetados em uma dimenso, so chapados, lembrando a maneira que as crianas costumam desenhar, sem muitos detalhes e perfeccionismo, embora bastante expressivos. As tipologias utilizadas so simples e dinmicas, de boa legibilidade, evitando que os dizeres sejam mal interpretados ou no entendidos. Outra coisa que pode-se notar no software, o uso de aplicaes hipermdia. De acordo com [6], as aplicaes hipermdia apresentam conjuntos de informao, interligados de forma no seqencial. Estas informaes podem estar no formato de texto, de fotografias, de filmes, de animao, de voz e msica. O uso dessas aplicaes no Softvali constante, principalmente na forma de animaes, por se tratar de um sistema destinado ao pblico infantil, enriquecendo a interface, tornando-a mais atraente e auxiliando a criana na 255

IV Congresso Brasileiro de Computao CBComp 2004

compreenso desta. Todos estes recursos integrados do ao Softvali um ar descontrado, instigando o aluno a explor-lo, para assim desempenhar sua verdadeira funo: ser uma ferramenta integrada ao projeto ao qual apia, favorecendo a criatividade de seus usurios. IV. CENRIOS DESENVOLVIDOS A janela principal do Software caracterizada por um mapa estilizado da cidade de Blumenau, contendo as principais ruas, avenidas, pontes e representaes icnicas de estabelecimentos comuns em um municpio, supermercado e escola por exemplo, alm de lugares que compem a histria e arquitetura de Blumenau como a sede da Prefeitura, o Teatro Carlos Gomes e a Igreja Matriz; enfim, ambientes que fazem parte do dia a dia dos futuros usurios do software. Houve a inteno de manter as caractersticas geogrficas das ruas e aspectos arquitetnicos no mapa da interface, primeiramente para no confundir as crianas mediante localizao das ruas e avenidas e no descaracterizar os estabelecimentos mais conhecidos de Blumenau; em segundo lugar, a questo de valorizar a cidade que subsidia a temtica do software. Este mapa possui o recurso de zoom, onde a criana pode ampliar para navegar e visualizar com mais detalhes a rea que pretende explorar. A barra em que o usurio tem acesso a esse recurso se localiza na parte inferior esquerda da tela, no tirando a ateno do mapa, nem por isso passando despercebida no layout, conforme ilustra a Fig 1.

Informtica na Educao
contidos no mapa. Como citado anteriormente, trs dos cenrios, no caso o Supermercado, a Fundao Cultural e a Fazenda, foram escolhidos inicialmente para compor o software. J incorporados ao sistema, ao clicar sobre os supostos cones, a criana tem acesso direto ao ambiente selecionado. Enquanto os outros estabelecimentos que iro compor o software no so concebidos e incorporados ao sistema, para que os cones que do acesso aos referidos ambientes no sejam meramente ilustrativos e sem funcionalidade, o usurio ao clicar sobre estes, ter acesso um pequeno texto informativo sobre o ambiente selecionado, explicando ao aluno no que consiste aquele estabelecimento. Como suporte ao aluno em seu passeio pelo mapa, o software disponibiliza ferramentas tais como: calculadora, mquina fotogrfica, carteira com dinheiro, bloco de anotaes, entre outros; que so apresentados dentro de uma mochila que o usurio poder ter acesso sempre que achar necessrio. Essa mochila (Fig.2) aparece na forma de uma janela sobreposta janela principal do sistema e parte das ferramentas disponibilizadas nesta, tem cooperao com ferramentas de autoria disponveis, Paint Brush e Microsoft Word como exemplo, permitindo ao usurio expressar suas prprias idias e conceitos, dependendo da atividade que desempenhar no software e tambm em funo da orientao do professor.

Fig 2: Zoom de uma parte da tela principal do Software e a mochila (menu sobreposto)

O ambiente do supermercado apresenta a viso superior do cenrio (Fig.3), onde o aluno, munido de uma certa quantia de dinheiro e de uma lista de compras, ambos prestabelecidas pelo educador, poder passear pelas gndolas e efetuar compras de acordo com as solicitaes do professor. A criana ter que ficar atenta ao preo dos produtos, pois ter que gerenciar a quantia de dinheiro disponvel, olhar a data de validade dos produtos, entre outras atividades, exercendo assim seu papel de cidad.
Fig 1: Mapa Estilizado de Blumenau

O mapa, assim como os outros cenrios que constituem o software, possui um layout descontrado, com traos arredondados e cores alegres, no abstrato mas tambm no muito complexo, de fcil entendimento, chamando a ateno da criana, despertando seu interesse em explorar a interface. As representaes icnicas dos ambientes em que a criana realiza as atividades so animados. Quando o usurio passa o mouse sobre os cones que representam os estabelecimentos, estes se ampliam, se diferenciando dos demais grafismos 256

IV Congresso Brasileiro de Computao CBComp 2004

Informtica na Educao
elaborar falas e dilogos, interagindo mais com o ambiente. Dessa maneira, a criana estar estimulando a criatividade e assimilando contedos referentes ao que o educador estiver ensinando. Interessante o fato da criana para poder inserir alguma imagem na criao de seus filmes ter que digitar o nome do suposto objeto, personagem ou cenrio no campo referente na interface. O mesmo ter q ser feito para excluir a imagem da cena. Assim o usurio estar exercitando o uso da linguagem e a ortografia.

Fig 3. Vista area de uma das partes do Supermercado

No Museu Virtual 3D (Fig.4), encontrado no ambiente da Fundao cultural, se tentou criar um cenrio ldico, o mais prximo possvel da realidade, trazendo ao aluno um mundo que muitos no possuem acesso, como as galerias de arte, exposies de obras famosas e magnficos museus. Neste cenrio, representado por uma galeria composta com oito quadros em exposio, a criana poder se locomover por entre as obras, apreciando-as, podendo conhecer um pouco sobre os supostos artistas, assimilando conhecimentos de histria, artes e uma gama de informaes relevantes ao aprendizado. Alm disso tudo, estar desenvolvendo tambm seu senso crtico e esttico.

Fig 5. Visualizao do Aplicativo Estdio de Cinema

O terceiro estabelecimento que foi selecionado para compor o software refere-se a fazenda. A dinmica empregada se assemelha jogos de RPG , abreviao da sigla Role Playing Game, que se refere a Jogos de interpretao. Neste ambiente, a criana se depara com o universo rural e realiza inmeras atividades que englobam vrias disciplinas ministradas na sala de aula, como geografia e cincias, por exemplo, alm de exercitar o raciocnio e lgica, o software instiga a conscincia ambiental das crianas, coerente com a proposta da rede municipal de ensino de Blumenau que almeja a formao de cidados conscientes.

Fig 4. Amostra de uma das partes do Museu Virtual 3D

Ainda no museu, o professor poder organizar exposies de acordo com o tema que estiver lecionando por meio do Configurador do Museu. O prprio aluno poder montar suas exposies, criar suas obras de arte (por meio de ferramentas de autoria) e ser autor das amostras com o suporte desta ferramenta, tornando assim o ato de estudar e aprender mais prazeroso. No Estdio de Cinema (Fig. 5), outro cenrio que compe o ambiente da Fundao Cultural, o aluno poder criar seus prprios filmes. O usurio poder escolher cenrios, objetos e personagens que iro compor suas cenas, alm de

Fig 6. Um dos cenrios da Fazenda

257

IV Congresso Brasileiro de Computao CBComp 2004

Como recursos utilizados na criao das interfaces foram utilizadas ferramentas como CorelDraw para projeo de desenhos, CorelPhotopaint para tratamento de imagens e Macromedia Flash para criao das animaes. V. CONCLUSES O desenvolvimento de software educacional, deve priorizar o design das interfaces que iro mediar as comunicaes com os alunos. Existem muitas crenas errneas sobre a interface de software educacional, especialmente para o pblico infantil. Muitos pensam que o uso excessivo de cores e sons basta para fornecer atrativos criana. Este trabalho busca provar o contrrio. O desenvolvimento da Interface deve estar intimamente relacionado com a abordagem pedaggica que orienta o desenvolvimento das atividades e dilogos do software. Os recursos grficos e sonoros so bem vindos, desde que devidamente justificados e contextualizados nas atividades de aprendizagem. A validao dos cenrios e das interfaces desenvolvidas est sendo realizada atravs de experimentos junto aos alunos. Os resultados certamente sero explorados em outros artigos. VI. REFERENCIAS
[1] [2] SIMES, Alcino, 2003. Folha do Alcino:Guio para a produo de um hiperdocumento educativo. http://www.prof2000.pt/users/folhalcino/tec_educ/site_do/guiao.htm SOUZA, Antnio Carlos de, CATAPAN, Araci Hack, THOM, Zeina Rebouas Correa, CORNLIO FILHO, Plnio, CYBIS, Walter de Abreu. Ergonomia de Software Educacional: a possvel integrao entre usabilidade e aprendizagem. Campinas/SP. Outubro/99. Apostila do LabUtil. Material disponibilizado na Internet: http://www.labutil.inf.ufsc.br. Arquivo capturado em maio de 2001. Obra no impressa. Oliveira, E. S. G.. Villardi, R. M. Os desafios da interao entre a criana e o computador. Universidade do Estado do Rio de Janeiro, UERJ. 2002. P.Markopoulos, M. Bekker. Interaction design and Children. Editorial do Jornal Elsevier Interacting with Computers. 2003. SANTOS, Neide . Interfaces de Ambientes Educacionais: Diretrizes de Projeto.http://www.ime.uerj.br/professores/Copyofneidenew/Interfaces.h tm

Informtica na Educao
Doutorando em Informtica na Educao pela UFRGS. Trabalha desde 2000 como Docente-Pesquisador no Curso de Cincia da Computao do Centro de Cincias Tecnolgicas da Terra e do Mar (CTTMar) da Universidade do Vale do Itaja (UNIVALI), onde coordena o Grupo de Desenvolvimento de Software Educacional (diretrio CNPq) e pesquisador do Grupo de Incluso Digital (diretrio CNPq). Dedica-se ao desenvolvimento de pesquisas aplicadas nas reas de Informtica na Educao, Ambientes de Aprendizagem Inteligentes, Interfaces Humano-Computador e Bibliotecas Digitais. Fabiane Barreto Vavassori Benitti, Dra. Bacharel em Cincia da Computao pela Universidade Catlica de Pelotas, Mestre em Cincias da Computao pela Universidade Federal de Santa Catarina, Doutora em Engenharia de Produo pela Universidade Federal de Santa Catarina. Recebeu, em 1998, prmio especial no Concurso Nacional de Software pelo Ministrio da Educao e do Desporto (MEC) com trabalho referente a ambiente de aprendizagem. Atualmente, professora da rea de Engenharia de Software atuando em cursos de graduao de Cincia da Computao e Sistemas de Informao na Universidade do Vale do Itaja - UNIVALI e na Universidade Regional de Blumenau - FURB. Pesquisadora na rea de Engenharia de Software e Informtica na Educao.

[3] [4] [5] [6]

VII. BIOGRAFIA
Luciana Soares Fernandes nasceu em Governador Valadares, MG. Atualmente reside em Florianpolis, SC e acadmica do Curso de Desenho Industrial UNIVALI. bolsista do CNPq e pesquisadora na rea de Informtica na educao e Design de Interface no Laboratrio de Solues em Software do curso de Cincia da Computao na UNIVALI.

Andr Luis Alice Raabe nasceu em Rio Pardo - RS, Mestre em Cincia da Computao pela PUCRS e

258