Desenvolvimento de objetos de aprendizagem: um estudo...

Desenvolvimento de objetos de aprendizagem: um estudo sobre o design gráfico da interface

Development of learning objects: a study of the interface graphic design

Sabrina BLEICHER 1 Silvia Regina QUEVEDO2 Vânia Ribas ULBRICHT 3

Tarcisio VANZIN 4 Universidade Federal de Santa Catarina/UFSC

Resumo O presente artigo tem como objetivo descrever o processo de desenvolvimento de uma interface para um objeto de aprendizagem com foco nas especificidades do design gráfico. O início da discussão descreve os principais conceitos e características referentes aos objetos de aprendizagem. A seguir, e dentro deste contexto, destaca-se a importância do design gráfico para a interface, como ferramenta de apoio inerente à construção de um objeto de aprendizagem. Por fim, relata-se o caminho percorrido e as conclusões obtidas na criação da interface de um objeto de aprendizagem específico produzido no âmbito do projeto de pesquisa "WebGD Educação Inclusiva: Ambiente Web Acessível com Objetos de Aprendizagem para Representação Gráfica", desenvolvido por pesquisadores da Universidade Federal de Santa Catarina com apoio da CAPES e CNPQ. Palavras-chave: Objetos de aprendizagem. Interface. Design gráfico. Abstract This article aims to describe a learning object development process that focuses on the interface graphic design concepts. The beginning of the discussion describes the key concepts and features related to learning objects. The next step highlights the importance of graphic design for an interface, as a support tool for the construction of a learning object. Finally, it is reported the progress made and the conclusions reached after the development of a learning object interface that belongs to the project "WebGD Educação Inclusiva: Ambiente Web Acessível com Objetos de Aprendizagem para Representação Gráfica", developed by Santa Catarina Federal University researchers with the support of CAPES and CNPq. Keywords: Learning objects. Interface. Graphic design.

1 [email protected] 2 [email protected] 3 [email protected] 4 [email protected]

6º CONAHPA – João Pessoa – PB – 04 a 06 de setembro de 2013

2

1. Introdução

A possibilidade de uma aprendizagem autônoma, ou seja, sem a presença física de

aluno e professor em um mesmo local conquista cada vez mais espaço. Com o passar do tempo,

e principalmente nas duas últimas décadas, as velozes transformações das Tecnologias de

Informação e Comunicação (TICs) trouxeram consigo um novo cenário que facilitou de forma

imensurável as possibilidades de interação entre as pessoas, impondo novos ritmos de

aprendizagem e trazendo para a Educação a Distância (EAD) novas alternativas, que permitiram

sua expansão. Neste contexto, surgem os objetos de aprendizagem (OA), tema central deste

artigo.

Os objetos de aprendizagem advêm da “evolução da tecnologia e da sociedade do

conhecimento, que gerou a necessidade de sistemas mais flexíveis e adaptativos nos meios

educacionais”. (MACEDO, 2010, p. 81). Nessa perspectiva e no âmbito da tecnologia

educacional, adota-se um enfoque comum de que a composição das partes dos conteúdos

desenvolvidos para EAD deve ser pequena, digital e com capacidade para a reutilização,

características que definem o conceito de objetos de aprendizagem. (SANTOS et al., 2007).

Wiley (2000) corrobora com o exposto ao afirmar que a ideia fundamental dos objetos

de aprendizagem é obter pequenos componentes educacionais possíveis de serem utilizados em

diferentes contextos de aprendizagem. Além disso, o autor acrescenta que os objetos de

aprendizagem são geralmente definidos como entidades digitais acessíveis por meio da Internet,

de modo que fica subentendido outra característica desse recurso: a de que um número ilimitado

de pessoas pode acessá-los e usá-los simultaneamente (em oposição a outros recursos didáticos,

tais como um livro ou um DVD, que só podem existir em um determinado local e em um

determinado momento).

Longmire (2000) complementa que há vários argumentos que justificam a concepção e

o desenvolvimento de objetos de aprendizagem, incluindo os seguintes:

• a flexibilidade, pois ao ser projetado para vários contextos, pode ser reutilizado com

muito mais facilidade que o recurso que tem de ser reescrito para cada novo cenário;

• a facilidade de atualização e gerenciamento de conteúdo, pois ao ser projetado com

tags de metadados, a atualização e gestão de conteúdo tornam-se rápida, permitindo o uso de

filtros e mecanismos de seleção para um conteúdo relevante a um determinado propósito;

• a possibilidade de customização, pois a abordagem just-in-time dos objetos de

aprendizagem os torna modulares, permitindo que a recombinação de conteúdos possa acontecer

de diferentes formas;

• o maior valor de conteúdo, pois o conteúdo pode ser complementado cada vez que o

objeto for reutilizado.


3

Em outras palavras, Filatro (2007, p. 194) explica que entre os benefícios de usar

objetos de aprendizagem, “estão os custos mais baixos decorrentes do compartilhamento de

iniciativas para diferentes propósitos", que caracterizam uma efetiva personalização dos

recursos educacionais, já que as possibilidades de adaptação e atualização do conteúdo podem

estar estreitamente vinculadas às necessidades dos alunos, conforme a demanda existente.

Todas as especificidades supracitadas tornam os objetos de aprendizagem recursos

perfeitamente adaptáveis às necessidades educacionais atuais. Contudo, para atender essas

características, produzir objetos de aprendizagem também se torna um processo complexo uma

vez que há que se considerar, em seu desenvolvimento, a combinação de práticas pedagógicas

com especificidades tecnológicas que, como já citado, na maior parte dos casos, são digitais.

Behar (2009), ao descrever parâmetros para a construção de um OA explica que, além

dos fatores educacionais e didáticos a serem considerados, a concepção e construção desses

objetos pressupõe fatores gráficos e técnicos. Isso quer dizer que o desenvolvedor desse tipo de

recurso educacional precisa pensar no design ao mesmo tempo em que planeja o conteúdo e

estrutura os aspectos tecnológicos. Além disso, esses fatores não podem ser considerados partes

periféricas de um projeto de OA, mas sim, partes inerentes ao objeto construído. Behar (2009)

acrescenta ainda que somente o equilíbrio entre todos esses fatores apoiarão de modo

satisfatório a interatividade entre aluno e OA e a interação entre aluno-aluno e aluno-professor.

Nesse momento, ou seja, ao considerar a interatividade e a interação entre os agentes

envolvidos, constata-se a relevância da interface, afinal, toda a interação do aluno com

conteúdos, ferramentas e outras pessoas se dá a partir de sua interação com a interface, e nesse

sentido, torna-se fundamental conhecer as possibilidades e as limitações que ela impõe. (LIMA

et al., 2007; FILATRO, 2008).

2. A interface e o design gráfico

A interface pode ser descrita como um elemento de ligação que faz a ponte entre os

seres humanos e o computador e seus sistemas. A área interdisciplinar do estudo da interface

insere-se em outra grande área denominada Interação Homem-Computador (IHC), que se

preocupa com "o design, a avaliação e a implementação de sistemas computacionais interativos

para uso humano [...]" (PREECE et al., 2005, p. 29).

O referido campo de estudo da IHC, ao longo do tempo, passou por uma evolução

significativa, na qual a interface evoluiu a partir da necessidade de se desenvolver sistemas

acessíveis e utilizáveis por qualquer tipo de usuário. Isso porque as primeiras interfaces entre

usuários e computadores eram essencialmente textuais. A entrada de qualquer informação era

digitada via teclado por meio de linguagem de programação, compreensível apenas por


4

profissionais da área, como engenheiros e programadores. Com o desenvolvimento do

computador pessoal e o consequente acesso de um público cada vez mais diversificado aos

sistemas computacionais, fez-se necessário adaptar a interface textual para uma interface

voltada para o usuário comum. Como resposta a essa necessidade, surge o conceito de

"Interface Gráfica do Usuário" que − através de elementos visuais, ícones e metáforas e com

interação por meio de "cliques" e feedback imediato, em tempo real − passou a representar

graficamente, na tela do computador, os softwares, as informações e os objetos dos sistemas

computacionais. (BATISTA, 2003; PREECE et al., 2005; FILATRO, 2008).

Com o desenvolvimento da interface gráfica, novas possibilidade de aplicações e

softwares surgiram como forma de oferecer suporte às atividades diárias das pessoas. Educação

e treinamento foram duas áreas que receberam muita atenção por meio do desenvolvimento de

ambientes de aprendizagem interativos, softwares educacionais e simuladores para treinamento,

consolidando a ideia de que uma interface bem projetada facilita a aprendizagem e a

compreensão do conteúdo. (FERNANDES et al., 2004, PREECE et al., 2005).

Convém destacar, nesse cenário, que independente do tipo de tecnologia empregada,

para esse tipo de interface, a organização do conteúdo e o formato da informação podem causar

grande impacto no momento da interação do usuário com o sistema. Por isso, deve-se levar em

consideração uma série de fatores ao longo do seu desenvolvimento. Assim sendo, a Interface

Gráfica do Usuário oferece um vasto campo para diversas áreas de estudo da IHC, uma vez que

vinculados à construção e à implementação de interfaces gráficas eficientes devem estar

presentes conhecimentos das áreas de engenharia de software, ergonomia, usabilidade e

comunicação visual, sendo esta última o foco de estudo deste artigo. (BATISTA, 2003;

FERNANDES et al., 2004).

A engenharia de software tem a função de pensar na interação dos usuários com o

sistema, na eficiência de navegação dos programas, na melhor utilização dos recursos, nos erros

possíveis e no rendimento da tarefa a ser executada. Já a ergonomia define parâmetros para o

projeto da interface no sentido de priorizar e encadear as informações, visando garantir que

sistemas e dispositivos estejam adaptados à maneira como o usuário pensa, comporta-se e

trabalha, objetivando, como consequência, uma melhor usabilidade do sistema. (MORAES,

2002; CYBIS et al., 2007).

A usabilidade é um requisito que tem como objetivo facilitar, para o usuário, a

utilização de um sistema computacional. Segundo Cybis et al. (2007, p. 11), "a essência da

usabilidade é o acordo entre interface, usuário, tarefa e ambiente". Para esses autores, esse é um

requisito composto de aspectos objetivos, que se referem à qualidade da interação do usuário, e

subjetivos, que se referem ao prazer que o usuário tem no momento da interação. Preece et al.

(2005, p. 35) corroboram com o exposto ao afirmar que a usabilidade “é geralmente considerada

como o fator que assegura que os produtos são fáceis de usar, eficientes e agradáveis – da


5

perspectiva do usuário”. Para que se assegure a usabilidade de um sistema diversos fatores são

considerados e são diversas as diretrizes existentes com o objetivo de garanti-la. Preece et al.

(2005), Cybis et al. (2007) e Nielsen e Loranger (2007) são alguns dos autores cujos estudos

apresentam diversas orientações nesse sentido.

Contudo, um planejamento e um projeto bem desenvolvido nas áreas supracitadas não

são eficazes se a interface não for igualmente bem pensada em relação ao design gráfico, visto

que é por meio da configuração dos elementos visuais de uma interface que todas as camadas

anteriores aparecem para o usuário. Tem-se, com essa perspectiva, a relevância da comunicação

visual. Segundo Machado Junior (2008, p. 85): "a visão, a interpretação do que se vê e a

manifestação visual são pilares cognitivos da construção do conhecimento [...]". Em outras

palavras, é por meio do design gráfico que são traduzidas graficamente as modalidades

cognitivas (por meio de linguagens, hipertextos, metáforas, mapas conceituais, realidade virtual)

e sensoriais (por meio de cores, formas, texturas e sons) de um sistema computacional.

A partir do exposto, é possível compreender porque o desenvolvimento de uma

interface para um OA traz intrínseca a função do design gráfico. Segundo Filatro (2008), os

alunos interagem com os conteúdos, as atividades, as ferramentas e outras pessoas apenas

depois de assimilarem o projeto visual do OA. Além disso, o design gráfico e a identidade

visual, se aplicados de forma coerente, podem produzir telas atraentes e efetivas, capazes de

promover a motivação do aluno, permitindo não somente a sua reflexão, mas principalmente o

desenvolvimento do seu pensamento crítico, e consequentemente, seu aprendizado. (LIMA et

al., 2007; FILATRO, 2008; BEHAR, 2009).

Tendo o design gráfico da interface como objeto de estudo para o desenvolvimento de

objetos de aprendizagem, foram identificados, com base na literatura (SOUZA, 2002; PREECE

et al., 2005; LUPTON, 2006; NIELSEN e LORANGER, 2007; FILATRO, 2008; BEHAR,

2009) elementos e requisitos que o compõe e podem conferir qualidade a esse tipo de recurso

educacional. Entre os elementos, destacam-se o texto, as imagens e os recursos gráficos, a cor e

os ícones (Quadro 1). Entre os requisitos, destacam-se a legibilidade, a leiturabilidade e a

hierarquia (Quadro 2).


6

Quadro 1: Elementos do design gráfico da interface

Elementos do design gráfico da interface

Texto

O texto permanece amplamente presente nas interfaces, contudo, considera-se relevante destacar que os textos para o meio digital não obedecem às mesmas regras do meio impresso. Nielsen e Loranger (2007), a partir de seus testes de usabilidade em ambientes virtuais5, descrevem que blocos densos de texto são uma importante causa de repulsa para os usuários da web. Segundo os autores, ao visualizar uma página com uma extensa quantidade de texto, os usuários imediatamente concluem que terão dificuldade para encontrar a informação desejada. A recomendação é que, de modo geral, utilize-se, em um ambiente virtual, a metade das palavras que se que utilizaria para mídias impressas. Ou seja, os textos devem ser enxutos, sucintos, objetivos. Textos longos devem ser quebrados em parágrafos breves; subtítulos e listas devem ser numerados ou conter marcadores; e palavras-chave devem ser destacadas com recursos de formatação.

Imagens (fotografias, ilustrações

etc.) e recursos gráficos

Quando existe um tema em que as explicações somente com texto parecem ser insuficientes, o uso dos recursos gráficos pode servir como uma excelente opção, principalmente devido a grande variedade de formas que podem apresentar (fotografias, ilustrações, barras, linhas, fios ou linhas, caixas etc.). Sua utilização, desde que seja com coerência, torna as páginas mais interessantes e dinâmicas, e facilitam a leitura e compreensão do leitor. No caso do uso de imagens, há que se ter um planejamento prévio levando em conta o conteúdo utilizado e o público abordado, para que o aluno possa refletir a partir das imagens. Caso contrário, elas terão um mero sentido ilustrativo que pode até prejudicar a cognição. Behar (2009) explica que nesses casos deve-se ter em conta o conceito da relevância, que se refere a uma relação de equilíbrio entre o esforço mental despendido e os efeitos contextuais alcançados ao ser processada uma informação. Quanto maior o efeito e menor o esforço, maior será a sua relevância, por isso muitas vezes uma imagem chama mais a atenção do que um texto. A sua interpretação é mais rápida. Não se objetiva com isso diminuir a utilização de textos, mas sim, incentivar uma consciente exploração de imagens em materiais educacionais com base em suas possibilidades cognitivas. Além disso, quando uma informação é apresentada em diferentes modalidades sensoriais – textual e visual, por exemplo – são ativados diferentes sistemas de processamento e a capacidade da memória de trabalho é estendida. Portanto, a combinação de uma imagem com sua designação verbal é mais facilmente lembrada do que a apresentação dessa mesma imagem duas vezes ou a repetição dessa designação verbal várias vezes, de forma isolada. Por fim, as interfaces devem incluir não somente palavras, mas uma combinação de palavras e imagens. A facilidade com que é possível fazer, atualmente, estas combinações permite uma exploração ilimitada deste recurso que atrai visualmente e é de rápida localização e compreensão pelo usuário.

Cor

A cor é outro recurso muito importante em uma interface. Dependendo de sua posição e de seu contraste com o restante do texto, uma pequena palavra colorida pode chamar mais atenção que o negrito ou até mesmo que um texto inteiro. No design da interface, os textos coloridos devem ser usados com cuidado e de forma bastante explícita, já que também podem representar links de hipertexto. Segundo Nielsen e Loranger (2007, p. 97) houve um tempo em que os usuários não sabiam onde clicar nas telas. Como as páginas web, no seu início, eram altamente gráficas e os links ficavam ocultos, não havia sugestões de "clicabilidade" ao leitor. Hoje, os usuários sabem que podem clicar em um texto se ele estiver colorido ou sublinhado. Por isso, desde que se siga uma dessas convenções de design, não será difícil para o usuário saber onde pode clicar.

5 Nielsen e Loranger (2007) baseiam a maioria de suas diretrizes em lições gerais provenientes de testes de 716 websites realizado com 2.163 usuários, sendo que a maior parte da pesquisa foi desenvolvida nos Estados Unidos e o restante em países diversos como: Austrália, Bélgica, Canadá, Dinamarca, Finlândia, França, Alemanha, Israel, Itália, Japão, Hong Kong, Coréia, Suíça e Reino Unido.


7

Ícones

Ícones devem ser incluídos na interface apenas quando facilitarem a comunicação. Se os ícones não forem facilmente inteligíveis, é melhor não forçar a metáfora. Ou seja, deve-se considerar o grau de iconicidade de uma imagem, a semelhança entre a imagem apresentada e o ícone que a evoca. Se a semelhança for distante ou de difícil compreensão é melhor evitar.

Fonte: dos autores (2013).

Destaca-se, a partir do exposto e com base nos elementos do design gráfico da interface,

que a composição visual de uma interface tem como objetivo o rápido entendimento do

conteúdo pelo leitor. O uso adequado dos elementos considera, normalmente, requisitos como:

hierarquia, legibilidade e leiturabilidade.

Quadro 2: Requisitos do design gráfico da interface

Requisitos do design gráfico da interface Legibilidade

A legibilidade refere-se à facilidade com que um leitor consegue discernir o tipo numa página, e baseia-se na relação da forma da tipografia com o fundo e na capacidade de distinguir as letras entre si. Para que possam ser lidas, as letras terão que ser bem identificadas. A legibilidade foi classificada em terceiro lugar entre os problemas na escala de dificuldades desenvolvida nos estudos de Nielsen e Loranger (2007). Segundo os autores, uma legibilidade ruim pode fazer com que as pessoas ignorem ou não enxerguem uma informação importante.

Hierarquia

A hierarquia, segundo Lupton (2006), indica um sistema que organiza conteúdo, enfatiza alguns dados, preterindo outros. Ajuda os leitores a localizarem-se no texto, sabendo onde entrar e sair e como selecionar seus conteúdos. Cada nível deve ser indicado por um ou mais sinais aplicados consistentemente ao longo do texto. Desse modo, a informação mais importante será percebida imediatamente. Essa característica pode ser obtida por meio de infinitas possibilidades de recursos gráficos como: uso de molduras, espaços em branco, negrito, itálico, cores, marcadores, numeração, recuo, entrelinha, posição na página, tamanho ou estilo de fonte. Também é possível criar ênfase usando diferentes fontes. Famílias tipográficas de amplo espectro possuem muitas variantes projetadas para funcionarem de maneira harmoniosa umas com as outras e são um excelente recurso para definir a hierarquia de um conteúdo textual.

Leiturabilidade

A leiturabilidade é um termo criado a partir da palavra inglesa readability, que resumidamente significa “facilidade de leitura” e é afetada pelo tipo de letra escolhido, o corpo da letra, o espaço entre letras e palavras, o comprimento das linhas de texto e pelo entrelinhamento. A leiturabilidade relaciona-se também com a uniformidade do tom de cinza criado pela composição de texto na página. O ideal seria criar uma textura cinzenta homogênea com espaçamento entre as linhas constante, onde não existam áreas escuras nem claras que distraiam a atenção do leitor.

Fonte: dos autores (2013).

Considerando o exposto até aqui e os elementos e requisitos apresentados para o design

gráfico da interface, relata-se, a seguir, como se deu o desenvolvimento do design gráfico de

duas interfaces diferentes criadas para o mesmo objeto de aprendizagem. Observa-se que as

justificativas de organização do conteúdo abordado centram-se essencialmente nas relações, nos

critérios e nos princípios dos elementos e requisitos supracitados.


8

3. Desenvolvimento do Objeto de Aprendizagem

O objeto de aprendizagem apresentado neste artigo foi desenvolvido no âmbito do

projeto "WebGD Educação Inclusiva: Ambiente Web Acessível com Objetos de Aprendizagem

para Representação Gráfica". Esse projeto é composto por pesquisadores da Universidade

Federal de Santa Catarina e conta com apoio da CAPES e CNPQ desde 2009. O projeto tem

como um de seus objetivos principais desenvolver objetos de aprendizagem para um Ambiente

Virtual de Ensino Aprendizagem (AVEA) Inclusivo voltado ao ensino da Representação

Gráfica. Esse ambiente pretende contemplar pessoas com deficiência auditiva, visual e sem

deficiência.

O objeto de aprendizagem em questão foi construído sob a forma de um conto, mais

precisamente em forma de uma narrativa hipermidiática6, e conta ilustrações, fotografias,

vídeos e hiperlinks. O tema central é a Geometria Descritiva, e especificamente nesse OA, o

conteúdo trata sobre Projeção Cilíndrica Ortogonal. A narrativa hipermidiática em questão é

intitulada "O gato, o cavalo e um sonho” 7 e faz parte de uma série de quatro contos que

compõe a empiria da tese intitulada "Narrativas hipermidiáticas para ambiente virtual de

aprendizagem inclusivo e as questões ocultas da surdez". (QUEVEDO, 2013).

A construção desse OA foi realizada com a colaboração de um grupo multidisciplinar,

que envolveu as seguintes equipes:

• pedagógica (envolvendo professores da área de matemática e especialistas em

geometria), vinculada ao desenvolvimento do conteúdo referente à Geometria Descritiva;

• jornalística e de comunicação, responsável pela criação do conto;

• de design gráfico, envolvida na criação dos roteiros para a implementação, seleção das

imagens, desenvolvimento das ilustrações e definição do projeto visual da interface;

6 A narrativa hipermidiática encaixa-se no molde proposto pela web que une som, imagem e movimento em um ambiente interativo. O tradicional “começo, meio e fim” de uma narrativa com perspectiva linear (nesse caso, um conto), tem seu percurso alterado por outras possibilidades de conexão de sentido em que o leitor torna-se dono de seu próprio caminho de leitura. A chamada “não linearidade”, ou seja, o estabelecimento de uma “desordem” na “ordem” de se demonstrar os fatos é uma característica desse tipo de narrativa digital. 7 O conto descreve a história de um cavalo que estava muito preocupado com o fato de seu dono ser muito baixo e não conseguir montá-lo. Um gato sugere ao cavalo construir um cubo e, com ele, uma escada, para o que precisa também de um paralelepípedo. O cavalo, que nunca tinha ouvido falar sobre o tema, sentiu-se perdido. A história adota um caminho alternativo quando os dois animais chamam o João de Barro para ajudar na construção da escada. Depois de retornar para o conteúdo principal da narrativa, o usuário depara-se com dois finais. No primeiro deles, o cavalo constrói a escada; no segundo fracassa em seu intento. Para cada final há uma "moral" correspondente: o fato de o cavalo construir a escada enseja a frase de Walt Disney (1901-1966): "Se você pode sonhar, você pode fazer". Já no segundo caso, como o cavalo não consegue construir a escada por não haver anotado o que os amigos disseram, a frase final está relacionada a um provérbio chinês: "Ouço, esqueço. Escrevo, lembro. Faço, aprendo".


9

• de informática, responsável pela implementação do roteiro, pela gravação e

implementação dos vídeos em língua de sinais (recurso adotado como alternativa ao texto

escrito com o objetivo de auxiliar a compreensão dos surdos) e, por fim, pela inserção do objeto

de aprendizagem no Ambiente Virtual de Ensino e Aprendizagem (AVEA), que nesse caso,

utiliza-se da plataforma Moodle.

O primeiro passo para o desenvolvimento da interface do OA, após a escolha e

definição do conteúdo que seria abordado, foi desenvolver um roteiro inicial (Figura 1) que

serviu como base para a primeira implementação e que apresentou:

• o conteúdo (já adaptado para uma linguagem em formato de conto);

• as imagens que seriam utilizadas (selecionadas previamente em bancos de imagens

livres online8);

• a indicação das palavras que serviriam como links para outras janelas, criando assim

hipertextos que conectariam um conceito ao seu significado ou um termo à sua explicação mais

detalhada ou ainda um conteúdo a sua respectiva atividade.

Figura 1: Primeiro roteiro do objeto de aprendizagem – Conto “O gato, o cavalo e um sonho”.

Fonte: Acervo dos autores (2012).

8 O banco de imagens livre utilizado para a escolha das imagens foi o SXC (Stock.xchng), disponível em: <http://www.sxc.hu/>. Este banco de imagens existe desde fevereiro de 2001, e é uma alternativa aos inúmeros bancos de imagens pagos existentes na Internet. O objetivo do SXC foi criar um site onde as pessoas pudessem trocar suas fotos sem nenhum custo. O site se consolidou e evoluiu para uma comunidade fotográfica livremente compartilhada - com mais de 2,5 milhões de usuários cadastrados e cerca de 400.000 fotos on-line.


10

O roteiro, com as respectivas especificações foi enviado à equipe de informática que

ficou responsável por realizar a implementação. Como não havia nenhuma indicação de como

esse objeto deveria ser implementado em relação à sua interface, a escolha de como apresentá-la

graficamente ficou a critério dessa equipe. O resultado do primeiro protótipo desenvolvido é

descrito a seguir a partir das imagens de algumas das telas do objeto de aprendizagem já

inserido no AVEA.

Figura 2: Página de abertura do conto "O gato, o cavalo e um sonho" no AVEA WebGD Acessível (Moodle)


Como é possível observar na Figura 2, a metáfora utilizada na primeira interface criada

foi de um livro antigo, com folhas amareladas, inclusive com uma animação que representava o

folhar de páginas remetendo, portanto, aos livros de contos tradicionais. Sabe-se que um

material educacional digital torna-se muito mais atraente quando possui uma metáfora, ou seja,

quando os elementos gráficos da interface correspondem a um similar no mundo real. Por outro

lado, se esses elementos tiverem um caráter meramente ilustrativo isso pode ser um desperdício

de recursos, pois aumentam a carga cognitiva da interface, podendo distrair o usuário do objeto

de estudo principal.

Em um primeiro momento, a opção pela metáfora do livro foi considerada interessante,

contudo, após algumas validações informais, a metáfora passou a ser considerada pouco

expressiva e pouco harmônica com a interface do AVEA (Moodle). Questionou-se também se o

público alvo reconheceria a utilização desse recurso como adequada. Embora, nesse momento, o

OA não tivesse ainda sido testado junto ao público-alvo, o uso de um livro de contos como

fundo já se mostrava pouco relevante.

A tela seguinte à tela inicial (Figura 3) apresentava o início do conto. Nessa interface

foram observados dois aspectos fundamentais que levaram a necessidade de se pensar em um

novo design gráfico para a interface.


11

Figura 3: Segunda página do conto "O gato, o cavalo e um sonho"


O primeiro foi o extenso bloco de texto, sem ilustrações, nem nenhum recurso gráfico.

Tinha-se nessa página um simulacro a um livro impresso, com extensa quantidade de texto sem

usufruir do potencial disponível do ambiente digital. Além disso, essa solução gerou outro

problema, pois como o público-alvo era composto por ouvintes e surdos, os surdos precisariam

do apoio dos vídeos em língua de sinais. Nessa solução não havia possibilidade de inserir o

vídeo.

O segundo aspecto foi observado quando foram realizadas as primeiras leituras do conto

e foi observado que, embora existisse um botão no canto inferior da página indicando que ao

clicar nele seria possível continuar a leitura, sentiu-se necessidade também de uma alternativa

para retornar a página anterior. Essa opção não havia sido prevista nem no roteiro, nem

observada pela equipe técnica de implementação. De acordo com Nielsen e Loranger (2007, p.

63), trata-se de uma questão importante, pois "nos estudos estatísticos, o botão voltar é

normalmente o segundo recurso mais utilizado na navegação web (o primeiro recurso mais

utilizado são links para novas páginas)". Ainda segundo os autores, desde o início da década de

1980, uma diretriz de design consistente para todos os tipos de recursos digitais é oferecer o

maior suporte possível à ação voltar em todas as páginas web, pois os usuários devem se sentir

confortáveis sabendo que podem desfazer ou alterar suas ações.

Na Figura 4, observa-se como foi prevista a solução para os links do texto no primeiro

protótipo desenvolvido. Como explicado anteriormente, no roteiro enviado havia indicações, ao

longo da narrativa, de palavras que funcionariam como links. Contudo, no OA não foi

apresentada nenhuma indicação para o usuário de quais palavras poderiam ter essa função e

essas só seriam descobertas pelo usuário se ele, por acaso, passasse com o mouse por cima da

página. Ao passar por cima de uma palavra que tinha a função de link, a janela com as

explicações ou imagem (como no caso exposto na Figura 4) apareceria automaticamente. Essa


12

solução gerou dois problemas, o primeiro foi a possibilidade de o usuário não descobrir esses

links e a segunda foi que, novamente, como o público-alvo eram ouvintes e surdos, essa solução

também não permitia a possibilidades de inserir um vídeo.

Figura 4: Indicação de como funcionavam os links


As demais páginas (representadas pela figura 5) davam conta do restante do conto,

incluindo mais links e, em uma das últimas páginas, opções de dois finais diferentes.

Figura 5: Páginas finais do conto indicando os botões para os finais e o final 1, respectivamente.


Outro ponto relevante refere-se ao uso das imagens. Embora todas as imagens

selecionadas fossem livres, muitas vezes, as imagens encontradas não condiziam exatamente

àquilo que se queria representar. Ou seja, uma grande dificuldade encontrada no

desenvolvimento da interface deste OA foi encontrar imagens livres que representassem

exatamente aquilo que se trazia no texto do conto. Fez-se, então, uma aproximação com as


13

imagens encontradas. Ainda assim, sentiu-se falta de imagens que fossem, de fato, ilustrativas

ao conto.

Além disso, embora a legibilidade estivesse satisfatória, pois havia contraste entre fonte

e fundo e o tamanho da letra estivesse dentro dos padrões recomendados, não havia variações

tipográficas o que tornava a página pouco dinâmica e atrativa. Isso é possível observar

especialmente nas páginas finais (Figura 5) em que a moral da história não se destaca do

restante do texto, mostrando também uma falta de preocupação com a hierarquia das

informações na página.

Após a análise da implementação da primeira interface do OA (Figuras 2, 3, 4 e 5),

optou-se por realizar modificações com objetivo de torná-lo mais dinâmico, atrativo e coerente

com o seu público-alvo. Assim, estruturou-se um novo roteiro (Figura 6) que, diferentemente do

primeiro (Figura 1), previa exatamente o que deveria existir em cada tela do OA, ou seja, em

cada uma das interfaces. Desse modo, houve uma preocupação, desde o roteiro, de tornar claro

para a implementação questões do design gráfico da interface como: organização do texto, das

imagens e de outros recursos gráficos; como utilizar as cores de modo harmônico com a

interface do AVEA; e previsão de novos ícones, especialmente no que se referia aos botões

utilizados, tudo em acordo com o exposto no Quadro 1 deste artigo. Para estruturar esses

elementos, foram consideradas, já no roteiro, questões de legibilidade e leiturabilidade para as

manchas de texto e de hierarquia para o conteúdo, conforme o exposto no Quadro 2 do presente

estudo. Tudo isso com o objetivo final de garantir a ergonomia e a usabilidade necessárias para

uma boa utilização do OA.

Na prática, o novo roteiro considerou, como se pode observar na Figura 6, a divisão do

texto do conto em blocos menores, localizou recursos gráficos e imagens e previu espaços para

os vídeos em língua de sinais.

Figura 6: Imagem do segundo roteiro, com blocos de texto menores e previsão do vídeo em língua de sinais


Com o desenvolvimento do novo roteiro, observou-se a necessidade de outra alteração

importante: que as imagens previamente selecionadas fossem substituídas por ilustrações

desenvolvidas especialmente para a narrativa em questão. Com isso, os botões das páginas


14

também precisaram ser visualmente alterados de modo a harmonizar com o restante do layout e,

consequentemente, facilitar a navegação do usuário. Um botão de "voltar" foi acrescentado em

todas as páginas (Figura 7).

Figura 7: Página de abertura do conto "O gato, o cavalo e um sonho", segundo protótipo


Além disso, as palavras que representavam links foram sublinhadas e ao clicar sobre

elas, outra janela aparece, escurecendo a anterior. Nessa nova janela, foi possível acrescentar o

vídeo em língua de sinais (Figura 8). Essa nova solução apresentou-se mais adequada tanto

esteticamente como em termos de acessibilidade e usabilidade.

Figura 8: Indicação do novo funcionamento dos links


Variações tipográficas também foram previstas e adotadas de modo a facilitar a

identificação de diferentes elementos no texto (Figura 9 e 10), como foi o caso dos títulos e da

moral da história de cada um dos finais. Foi inserido também um índice com a numeração das

páginas na lateral direita que funcionou como um novo menu para navegação (Figura 9).


15

Figura 9: Página do primeiro final do conto indicando o novo menu de navegação


Figura 10: Página do segundo final do conto.


E, por fim, como pôde ser observado nas Figuras 7, 8, 9 e 10, a metáfora do livro como

fundo foi excluída por considerar-se que não acrescentava um valor que justificasse sua

permanência no OA. Assim, foi adotado para todas as páginas um fundo cinza claro, que

harmonizou de forma mais coerente com o restante do ambiente virtual (Moodle). O design

gráfico da página tornou mais limpo e leve, o que permitiu maior destaque para os demais

recursos utilizados (ilustrações, vídeos e botões), facilitando a compreensão da função de cada

elemento. Todas as mudanças realizadas no segundo protótipo trouxeram inúmeras melhorias

para a interface do OA e, consequentemente, para a sua utilização pelos usuários.

4. Conclusão

Ainda que exista uma pluralidade de definições para o recurso educacional denominado

objeto de aprendizagem, foi possível perceber, por meio deste artigo, as inúmeras vantagens que

este elemento pode trazer para o contexto educacional. Aspectos descritos, tais como a


16

flexibilidade, a facilidade de atualizações, o gerenciamento de conteúdo, a customização e as

possibilidades de reutilização são aspectos intimamente relacionados às exigências cada vez

maiores referentes aos recursos educacionais. Em outras palavras, a utilização de objetos de

aprendizagem, entendidos neste estudo como recursos independentes, reutilizáreis e

suplementares ao processo de aprendizagem, mostra-se com uma alternativa que vem suprir a

explícita necessidade e a tendência de sistemas pedagógicos mais flexíveis, adaptáveis e

inclusivos.

Para além disso, destaca-se, que, por se tratar de um recurso viabilizado via

computador, obrigatoriamente o objeto de aprendizagem apresentará uma interface e será este o

elemento de ligação que separa aluno, conteúdo e professor. Portanto, qualquer interface deve

ser cuidadosamente planejada, em todos os seus aspectos (pedagógicos, técnicos e gráficos).

Nesse sentido, e por meio desse estudo, foi possível perceber como o design gráfico da

interface tem a contribuir para o eficaz desenvolvimento deste tipo de recurso educacional.

Conforme pôde ser observado, ao longo da descrição das diferenças entre o primeiro e o

segundo protótipo, quando elementos textuais, gráficos e icônicos são utilizados com coerência

torna-se possível cumprir, com eficácia, os requisitos de legibilidade, leiturabilidade e

hierarquia e trazer para a interface de um objeto de aprendizagem melhorias significativas.

Por fim, verifica-se a relevância da comunicação visual nesse contexto, como um

elemento a ser explorado em profundidade, com mais estudos e pesquisas. O artigo apresentado

é apenas um exemplo que vem confirmar que, ao utilizar o design gráfico da interface como

apoio ao desenvolvimento de objetos de aprendizagem, um conteúdo denso e monótono pode

ser transformado em um recurso educacional dinâmico e de fácil consulta.

5. Referências BATISTA, C. R. Desenvolvimento de interface para ambiente hipermídia voltado ao ensino de geometria sob a ótica da ergonomia e do design gráfico. Florianópolis, 2003. 155 f. Dissertação (Mestrado) - Universidade Federal de Santa Catarina, Centro Tecnológico. Programa de Pós-Graduação em Engenharia de Produção.

BEHAR, P. A. Modelos Pedagógicos em Educação a Distância. Porto Alegre: Artmed, 2009.

CYBIS, W. A.; BETIOL, A. H.; FAUST, R. Ergonomia e usabilidade: conhecimentos, métodos e aplicações. São Paulo (SP): Novatec, 2007.

FERNANDES, L. S.; RAABE, A. L. A.; BENITTI, F. B. V. Interface de Software Educacional: Desafios de Design Gráfico. In: Congresso Brasileiro de Computação, 4, 2004, Porto Alegre. Anais do IV Congresso Brasileiro de Computação – CBComp 2004. Porto Alegre, 2004. p. 254 - 258. Disponível em: <http://www.ufrgs.br/niee/eventos/CBCOMP/2004/intro.htm>. Acesso em: 18 abr. 2013.

FILATRO, A. Design instrucional contextualizado: educação e tecnologia. 2. ed. São Paulo (SP): Ed. SENAC, 2007.


17

______. Design instrucional na prática. São Paulo: Person Education do Brasil, 2008.

LIMA, I. S. L; et al. Desenvolvimento de objetos de aprendizagem: criando interfaces para objetos de aprendizagem. In: PRATA, C. L.; NASCIMENTO, A. C. Objetos de Aprendizagem: Uma proposta de recurso pedagógico. Brasília: MEC, SEED, 2007. p. 39-48.

LONGMIRE, W. A Primer on Learning Objects. ASTD's Source for e-learning, 2000. Disponível em: <http://www.astd.org/LC/2000/0300_longmire.htm>. Acesso em 05 fev. 2012.

LUPTON, E. Pensar com tipos: guia para designers, escritores, editores e estudantes. São Paulo: Cosac Naify, 2006.

MACEDO, C. Diretrizes para criação de objetos de aprendizagem acessíveis. 2010. 272 p. (Doutorado). Universidade Federal de Santa Catarina, Centro Tecnológico, Programa de Pós-Graduação em Engenharia e Gestão do Conhecimento, Florianópolis.

MACHADO JUNIOR, F. S. Interatividade e interface em um ambiente virtual de aprendizagem. Passo Fundo (RS): IMED ed., 2008.

MORAES, A. Design e avaliação de interface: ergodesign e interação humano-computador. Rio de Janeiro: iUsEr, 2002.

NIELSEN, J.; LORANGER, H. Usabilidade na web. Rio de Janeiro: Elsevier, 2007.

PREECE, J.; ROGERS, Y.; SHARP, H. Design de Interação: Além da Interação homem-computador. Porto Alegre: Bookman, 2005.

QUEVEDO, S. R. P. Narrativas hipermidiáticas para ambiente virtual de aprendizagem inclusivo e as questões ocultas da surdez. Florianópolis, SC, 2013. 1 v. Tese (Doutorado) - Universidade Federal de Santa Catarina, Centro Tecnológico. Programa de Pós-graduação em Engenharia e Gestão do Conhecimento.

SANTOS, L. FLORES, M.; TAROUCO, L. Objeto de Aprendizagem: Teoria Instrutiva Apoiada por Computador. Novas Tecnologias na Educação. Porto Alegre: CINTED-UFRGS, 2007.

SOUZA, M. Guia de Tipos: Métodos para o uso das Fontes de PC. [S.l: s.n], 2002. Disponível em: <http://www.infoamerica.org/museo/pdf/guia_de_tipos01.pdf>. Acesso em: 22 ago. 2012.

WILEY, D. A. Connecting learning objects to instructional design theory: A definition, a metaphor, and a taxonomy. 2000. In: WILEY, D. A. (Ed.). The Instructional Use of Learning Objects: Online Version. Disponível em: <http://reusability.org/read/chapters/wiley.doc>. Acesso em 30 jan 2012.

Date post:	15-Dec-2018
Category:	Documents
Upload:	vancong
View:	212 times
Download:	0 times

Desenvolvimento de objetos de aprendizagem: um estudo...

Documents