a importância do processo de design na criação e...

7th CIDI

7th Information Design

International Conference

7th CONGIC

7th Information Design

Student Conference

Blucher Design Proceedings

Setembro, 2015 – num. 2, vol.2

proceedings.blucher.com.br

N. Brunnet. 2015. A importância do processo de design na criação e desenvolvimento de materiais didáticos digitais. In: C. G. Spinillo; L. M. Fadel; V. T. Souto; T. B. P. Silva & R. J. Camara (Eds). Anais [Oral] do 7º Congresso Internacional de Design da

Informação/Proceedings [Oral] of the 7th Information Design International Conference | CIDI 2015 [Blucher Design Proceedings, num.2, vol.2]. São Paulo: Blucher, 2015. ISSN 2318-6968, DOI 10.5151/designpro-CIDI2015-cidi_56

A importância do processo de design na criação e desenvolvimento de materiais didáticos digitais The importance of the design process to create and develop educational digital materials

Natália Brunnet

educação, tecnologia, design, material didático

Este artigo aborda o processo de design como método capaz de tornar conceitos tangíveis e reduzir o retrabalho em projetos de materiais didáticos digitais. Destacam-se especificamente nesse estudo, os benefícios das etapas de prototipagem, testes e validações, por auxiliarem o designer a cumprir os requisitos do projeto, proporcionar uma excelente experiência ao usuário e garantir a boa performance do produto em diferentes plataformas. Os conceitos discutidos nesse trabalho serão demonstrados com a análise da metodologia e a apresentação dos resultados alcançados no desenvolvimento das atividades digitais educativas do projeto “Meet Brownie”.

education, technology, design, educational material

This paper discusses the design process as a method to make concepts tangible and to reduce rework on projects of digital educational materials. In this study, the benefits of the stages of prototyping, testing and validation were highlighted, because they help the designer to implement the project requirements, to provide an excellent user experience and to ensure the good performance of the product on different platforms. The concepts discussed in this work will be demonstrated with the analysis of the methodology and a presentation of the results achieved in the development of digital educational activities of the "Meet Brownie" Project.

1 Introdução

Estamos vivendo um momento de constantes inovações tecnológicas e de diferentes visões sobre a dinâmica de ensino e aprendizagem. Para Ramal (2003), os suportes digitais são as tecnologias intelectuais de que a humanidade passará a se valer para aprender, gerar informação, interpretar a realidade e transformá-la. Entretanto, para Ioschpe (2014) a educação não é um problema que a tecnologia deva ter a esperança de resolver.

Apesar do futuro da dinâmica ensino-aprendizagem se mostrar incerto e controverso, é notório que são criados e experimentados atualmente novos formatos de materiais digitais, na educação presencial ou a distância, como consequência desse complexo cenário.

Diante desse contexto, este artigo tem por objetivo discutir a importância do processo de design e o papel do designer na criação de produtos educativos digitais, para auxiliar nas

244

Anais [Oral] do 7º Congresso Internacional de Design da Informação | CIDI 2015 Proceedings [Oral] of the 7th Information Design International Conference | IDIC 2015

diversas questões técnicas e conceituais que os novos suportes, sistemas operacionais, equipamentos, formatos e resoluções de telas trazem atualmente.

Além disso, serão destacados neste trabalho, os benefícios das etapas de prototipagem, testes e validações que auxiliam o designer a cumprir os requisitos idealizados para o projeto, priorizar a usabilidade e assegurar um desempenho adequado do produto em variados suportes e sistemas operacionais.

Finalmente, para que se tenha um entendimento prático dos conceitos discutidos nesse estudo, será detalhada a metodologia do projeto “Meet Brownie”. Composto por atividades digitais para crianças de três e quatro anos, o projeto “Meet Brownie” tinha como um dos requisitos seu uso mediado por professores em salas de aula de diferentes escolas. Havia, portanto, o desafio que o produto final funcionasse com sucesso para grupos distintos de usuários e em equipamentos com diferentes configurações de hardware, sistemas operacionais e navegadores de internet.

2 O designer, o processo de design e os materiais didáticos digitais

Além de novidades para profissionais das áreas pedagógica e técnica, os materiais didáticos digitais trazem novos desafios também para os designers. O designer e o processo de design serão muito importantes na integração dos colaboradores da equipe e na consolidação de suas expertises.

Para desenvolver um material educativo digital, devem ser reunidos profissionais que possuam conhecimentos de produção de conteúdo para educação, design, programação e implementação nas plataformas de uso dentre outros. Memória (2005) diz que, para tornar o envolvimento de todas essas disciplinas possível, é importante falar de processo de design. Não só pela questão da integração entre equipes com diferentes backgrounds, mas também pela importância de um processo bem estruturado para o desenvolvimento de um produto de sucesso.

Nessa mesma linha, Fontoura (2011) afirma que o design e por natureza interdisciplinar, pois se trata de uma área propícia para o trabalho conjunto com outras áreas de conhecimento. O ponto importante da presença do designer em situações de ensino-aprendizagem seria então, segundo Portugal (2013), sua atuação como mediador do processo pedagógico direcionado à potencialização de competências para o uso de múltiplas linguagens.

Sendo assim, em projetos de materiais didáticos digitais, o designer deve atuar de forma a idealizar e criar a representação do produto, costurar as fases de conteúdo, layout e programação, pensar nas hipóteses de uso e nas interações possíveis de professores ou alunos, cumprir os requisitos técnicos, estratégicos e conceituais do projeto, bem como conhecer e se atualizar constantemente sobre o cenário de ensino-aprendizagem vigente.

3 Os benefícios das etapas de prototipagem, testes e validações

Vários autores (Krug, Memória, Norman, Nielsen e Portugal) ressaltam a preocupação com a experiência do usuário como algo essencial em produtos digitais. Também devem ser destacadas a escolha da melhor e mais viável opção de tecnologia (Nielsen e Memória) e a garantia da qualidade através da boa performance do produto nos equipamentos para os quais ele foi projetado (PMBOK, 2013).

De acordo com Juran (1992), para garantir a qualidade em um projeto, deve-se desenvolver as características dos produtos de forma a atender as necessidades dos clientes e também utilizar ou criar processos que permitam o desenvolvimento dos produtos com essas características.

245


Na produção de materiais didáticos digitais, essas questões estão presentes sendo potencializadas pelas mudanças no cenário de ensino-aprendizagem. Com uma metodologia bem estruturada e o bom uso de protótipos, testes e validações ao longo do projeto, as dificuldades em questões técnicas e os problemas de integração entre as etapas podem ser diagnosticados e resolvidos a tempo.

A importância dos protótipos

Tim Brown (2010) define que o protótipo é qualquer coisa tangível que nos permite explorar uma ideia, avaliá-la e então levá-la adiante. Os protótipos são importantes ferramentas para tornar conceitos tangíveis, auxiliar na visualização e resolução de problemas inéditos e diminuir o volume de retrabalho da equipe. Kelley e Jonathan (2001) sugerem a criação do maior número de protótipos possíveis a fim de se esgotar todas as possibilidades e diminuir alguns dos riscos envolvidos no ciclo de vida do projeto.

Além de servirem para a visualização e entendimento das ideias entre a própria equipe de design, os protótipos contribuem para o alinhamento do projeto com a equipe de conteúdo e de programação. Afinal, é com protótipos que pela primeira vez em um projeto se visualiza a forma do conteúdo que está sendo criado ou adaptado e que, em etapas seguintes, se pode projetar os elementos interativos que serão programados.

Para tanto, é crucial que se invista algum esforço em sua elaboração como afirma Brown (2010), ao dizer que apesar de parecer que desperdiçamos tempo em esboços, modelos e simulações e que isso atrasará o trabalho, a prototipagem gera resultados com mais rapidez.

Da mesma forma que as ilustrações passam pela etapa do esboço antes de serem finalizadas, as interfaces e interações precisam ser esboçadas com wireframes e storyboards, de baixa ou alta fidelidade, nas etapas de prototipagem.

Wodtke e Govella (2009) definem wireframes como sendo um esquema básico de uma tela específica, elaborado para indicar seus elementos, relacionamentos e hierarquia. O wireframe pode ser criado com diferentes técnicas, dependendo da fidelidade que o designer e a equipe precisam naquele momento.

As técnicas vão desde desenho a lápis no papel, papéis colados, desenho em ferramentas vetoriais, como Adobe Illustrator, a desenho em ferramentas especializadas para a criação de wireframes, como o Axure1 e o Sketch2.

Um ponto importante no desenho de wireframes, segundo Memória (2005), é criá-los utilizando as medidas reais em pixels, para se obter uma maior fidelidade na representação.

1 O Axure é uma ferramenta para a criação de protótipos interativos de sites e aplicativos, sem que seja necessário saber programar. Disponível em: http://www.axure.com - acesso em 02/4/2015.

2 Com o Sketch é possível criar protótipos vetoriais de alta fidelidade. Disponível em http://www.bohemiancoding. com/sketch - acesso 02/4/2015.

246


Figura 1: Exemplo de wireframe de uma página de login. Fonte: autoria própria.

Enquanto os wireframes são protótipos estáticos, o storyboard é interativo e simula a

experiência de uso. Nas palavras de Memória (2005, p. 36), “o storyboard usa uma sequência de wireframes referentes a um cenário particular. Ele ilustra as principais interações relacionadas a determinadas tarefas”. O autor recomenda ainda que os storyboards devam focar nas novas formas de interação e não naquelas que todos sabem o desfecho.

Um protótipo de alta fidelidade requer avanço no detalhamento do layout ou no código programado para que o visual e as interações fiquem mais realistas. O ponto positivo desse tipo de protótipo é sua maior aproximação do real, que pode garantir com mais clareza o entendimento do resultado do projeto por todas as partes interessadas. Os pontos negativos são um desenvolvimento mais demorado, custoso e trabalhoso e também o fato de que nem sempre o código de programação pode ser aproveitado no produto final.

Com os testes durante o projeto é possível ter respostas relevantes de outros membros da equipe, dos usuários finais ou do cliente sobre o produto antes que ele esteja pronto. Os testes com usuários trazem respostas sobre escolhas feitas em arquitetura da informação, layout e interações e os testes nas plataformas e locais de uso geram importantes feedbacks no que se refere ao desempenho e às condições de uso.

Já as validações são importantes para alinhar as expectativas do cliente ou responsável pelo projeto e reavaliar se o produto está o mais perto possível do conceito sob o qual ele foi idealizado e dentro dos requisitos que ele deve ser construído.

Alguns problemas que os protótipos, testes e validações ajudam a resolver

Na contagem geral, os questionários aplicados com a sequência 1 e 3 apresentaram diferença entre a recepção da imagem sem e com cor. A imagem PB teve menos acertos que a imagem colorida nos dois casos (figura 7 e 8). A fala das crianças durante o exercício indica que na

247


ausência de cor as crianças se guiaram mais pela forma do alimento, enquanto que na colorida pela cor: “É um limão claro, porque tem cor de limão ... (pausa para observação da imagem) ... e porque tem a forma de um limão” (criança de 7 anos).

Se um projeto tem etapas consistentes de acompanhamento e controle, podem ser evitados problemas como os citados nas situações a seguir, recorrentes no dia a dia de projetos.

Situação 1

Problema: descaracterização do material didático que foi inicialmente concebido devido à falhas de comunicação no decorrer do processo, gerando sucessivas distorções que se acumulam. Isto torna o produto ineficaz para atingir os objetivos pedagógicos.

Solução: pontos de controle de acompanhamento periódico, com o uso de protótipos e validações para entendimento comum e alinhamento de expectativas. É interessante que o perfil das pessoas responsáveis pelas validações seja multidisciplinar – para que se tenha soma de experiências – e que pessoas externas àquele momento de produção também participem, para que se obtenham diferentes visões dos resultados parciais do projeto.

Auxílio dos protótipos: os protótipos contribuem para que todas as partes interessadas no projeto visualizem as ideias e pensamentos gerados de uma só forma. Assim, conceitos e requisitos importantes não serão esquecidos.

Situação 2

Auxílio dos protótipos: os protótipos contribuem para que todas as partes interessadas no projeto visualizem as ideias e pensamentos gerados de uma só forma. Assim, conceitos e requisitos importantes não serão esquecidos.

Problema: falta de infraestrutura mínima necessária para um bom desempenho dos materiais desenvolvidos após a entrega ao cliente.

Solução: com testes no local de uso no início e durante o desenvolvimento é possível avaliar o desempenho do produto em etapas, descobrir se a tecnologia escolhida é viável e se elementos como cores, textos e animações terão boa visibilidade.

Auxílio dos protótipos: os protótipos permitem simular a performance final de um produto digital, mesmo que apenas um percentual muito baixo dele tenha sido desenvolvido.

Situação 3

Auxílio dos protótipos: os protótipos permitem simular a performance final de um produto digital, mesmo que apenas um percentual muito baixo dele tenha sido desenvolvido.

Problema: não incorporação de características ou restrições do público-alvo no desenvolvimento do produto, por não terem sido identificadas durante as etapas de pesquisa e imersão.

Solução: realização de testes que simulam as interações, feitos por um grupo de usuários que faça parte do público-alvo. Com essa ação, pode se decidir incorporar novas interações ao produto final e descartar outras antes mesmo que a fase de programação comece. Isso evita o retrabalho desnecessário.

Auxílio dos protótipos: os protótipos permitem simular algumas interações que

248


estarão na versão final do produto utilizando uma programação mais simples, ainda que o produto final precise ser programado de forma mais robusta.

Segundo Tractenberg e Tractenberg (2012) há várias coisas que podem dar errado em projetos de educação, uma das causas é o uso de materiais didáticos e recursos tecnológicos inadequados, pouco eficientes ou que não correspondem ao estabelecido inicialmente.

Portanto, se o material será criado para a aplicação presencial em diferentes escolas, como no estudo de caso desse artigo, é necessário entender o perfil e os interesses do público que vai usá-lo, bem como fazer um levantamento dos equipamentos dos ambientes de ensino e, sempre que possível, realizar testes no local para simular efetivamente as condições de uso e a performance de um protótipo. Desta forma, é possível ter maior controle sobre o resultado.

4 Estudo de caso: metodologia de projeto “Meet Brownie”

Panorama do projeto

O projeto “Meet Brownie” foi idealizado pela Learning Factory, a editora da Cultura Inglesa3 sediada no Rio de Janeiro, e contou com uma série de livros didáticos e atividades digitais complementares para crianças.

No escopo do projeto das atividades digitais, foco deste estudo de caso, estavam o desenvolvimento de atividades para uso em sala de aula com mediação do professor. A programação deveria ser em HTML5, CSS, JS para uso em diferentes navegadores e compatibilidade com dispositivos móveis, além de serem ilustradas e animadas. O público-alvo eram crianças de três e quatro anos que estudavam em escolas bilíngues, onde a língua inglesa era o meio para o aprendizado de outras disciplinas e conceitos.

O produto digital “Meet Brownie” era dividido em dois cursos “Meet Brownie Blue” e “Meet Brownie Yellow”, cada um com oito lições principais de acordo com seus respectivos livros. Essas oito lições eram ainda subdivididas, sendo desenvolvidas dezesseis atividades para o “Meet Brownie Yellow” e trinta e seis atividades para o “Meet Brownie Blue”.

Neste artigo, serão explorados apenas os detalhes de desenvolvimento do curso “Meet Brownie Yellow”, bem como as atividades da lição “On a farm II”. A figura abaixo ilustra a hierarquia do projeto e detalha os níveis de lições e atividades do “Meet Brownie Yellow”.

Figura 2: Fluxograma do projeto digital “Meet Brownie”, com detalhamento das lições e atividades do curso “Meet Brownie Yellow”. Fonte: autoria própria.

Com um briefing estruturado e já possuindo os primeiros roteiros das atividades, criados por professores e editores, a Learning Factory buscou uma empresa especialista em design e tecnologia para trabalhar nas etapas de criação de ilustrações e animações e no desenvolvimento das interações e programação, e escolheu a PICTUS.

3 A Cultura Inglesa é um dos maiores e mais importantes institutos de ensino de língua inglesa do mundo.

249


As empresas envolvidas

Nos doze anos em que produz materiais, a Learning Factory estabeleceu-se como uma editora inovadora e criativa de materiais de alta qualidade tanto impressos quanto digitais. Sua equipe de escritores está preparada para criar produtos que atendam as necessidades dos estudantes brasileiros de língua inglesa nas salas de aula de hoje.

Os materiais didáticos desenvolvidos desde então foram adotados pela Cultura Inglesa em várias cidades do Brasil, bem como por escolas parceiras. A empresa também ganhou reconhecimento internacional e licenciou alguns de seus materiais para grandes editoras internacionais e para mercados fora do Brasil4.

A PICTUS foi fundada em 2003 na cidade do Rio de Janeiro como uma empresa de webdesign, atuando principalmente em criacao e desenvolvimento de sites. Em meados de 2004, teve a primeira oportunidade de desenvolver um projeto voltado para treinamento de pessoas e, desde então, a maioria dos produtos criados e servicos prestados pela PICTUS foram voltados para o mercado de campanhas de incentivo e treinamento empresarial.

Ao longo de mais de 10 anos, outros segmentos de mercado afins ao design foram explorados, como educação, e novos produtos criados, como os jogos digitais. A PICTUS hoje se torna cada vez mais especialista no desenvolvimento de produtos educativos e de treinamento.

Metodologia do projeto: o processo de trabalho no projeto “Meet Brownie”

Apesar de terem etapas básicas como pesquisa e testes, todos os projetos são singulares e devem ser assim vistos, tal como consta nas boas práticas do desenvolvimento de projetos:

“Cada projeto cria um produto, servico ou resultado unico. O resultado do projeto pode ser tangivel ou intangivel. Embora elementos repetitivos possam estar presentes em algumas entregas e atividades do projeto, esta repeticao nao muda as caracteristicas fundamentais e exclusivas do trabalho do projeto. Por exemplo, predios de escritorios podem ser construidos com materiais identicos ou similares e pelas mesmas equipes ou equipes diferentes. Entretanto, cada projeto de predio e unico, com uma localizacao diferente, um design diferente, circunstancias e situacoes diferentes, partes interessadas diferentes, etc.” (PMBOK, 2013, p. 3).

Na fase de entendimento do projeto e início do planejamento, foi iniciado um esboço de qual seria o melhor processo para esse projeto. Foi um consenso entre as duas empresas que uma produção linear em série não funcionaria para este caso. Isto é, não seria inteligente produzir todos os esboços das dezesseis atividades, seguidos por todas as ilustrações, todas as animações, para só então aplicar a programação e realizar os testes no local. Esse processo poderia gerar muito retrabalho caso qualquer elemento precisasse ser ajustado.

O partido adotado foi uma produção em fases e etapas. Assim, as lições aprendidas no desenvolvimento das primeiras atividades seriam absorvidas nas seguintes. Mesmo os roteiros que ainda não haviam sido escritos poderiam ser criados de forma mais integrada conforme o produto tivesse elementos e funcionalidades tangíveis.

Sendo assim, a equipe da PICTUS consolidou com a Learning Factory um cronograma de entregas por etapas. Após pensar na base do produto, se pensaria nas atividades, desenvolvendo e finalizando uma ou duas atividades por vez, antes de iniciar as seguintes. O processo estruturado somou características do processo de trabalho da Learning Factory e da PICTUS e afetou os processos de ambas as empresas nesse projeto, considerando etapas de concepção, roteirização, conceituação visual, programação e validação.

4 Tradução livre de texto institucional sobre a Learning Factory. Disponível em: http://www.learningfactory.net - acesso

14/3/2015.

250


Mesmo com essa integração entre os processos, os papeis de cada empresa e de cada profissional envolvido ficaram bem definidos. A idealização do projeto e a roteirização das atividades foram responsabilidades da Learning Factory. Durante a conceituação visual, a PICTUS adaptou elementos já criados para os livros impressos – elementos do projeto gráfico e o personagem Brownie – e desenvolveu as demais ilustrações necessárias, todas as animações e a programação das atividades e da base do produto. As etapas de testes e validações foram compartilhadas por ambas as empresas, realizadas presencialmente pelo editor principal e pelo diretor de criação, com participação de designers e programadores.

As fases e etapas do processo de trabalho

O processo foi dividido em duas grandes fases:

Fase A: Entendimento do projeto, planejamento e desenvolvimento base. (4 macroetapas únicas, resultando a base do produto).

Fase B: Desenvolvimento das atividades. (6 macroetapas cíclicas, resultando as 16 atividades).

Cada fase foi dividida em etapas, que por sua vez foram compostas por tarefas. A Fase A foi linear, ou seja, suas etapas ocorreram sequencialmente e apenas uma vez, enquanto a Fase B foi cíclica, tendo suas etapas repetidas várias vezes ao longo do desenvolvimento das atividades, como pode ser visto no detalhamento e na imagem e a seguir.

Figura 3: Fases A e B do projeto “Meet Brownie”. Fonte: autoria própria.

Fase A: Entendimento do projeto e desenvolvimento da base do produto.

Etapa 1: Conhecimento do público-alvo, mercado, objetivo e conceito do projeto. Primeira análise do conteúdo das atividades (roteiros, imagens dos personagens, identidade visual, marca e outras mídias como áudio e vídeo). Verificação da viabilidade tecnológica e definição da tecnologia a ser usada.

Etapa 2: Macroarquitetura da informação, mecânica e jogabilidade. Definição dos elementos e recursos que serão utilizados e do fluxo de navegação. Produção dos primeiros wireframes e storyboards. Validação e ajustes nos wireframes e storyboards.

Etapa 3: Layout das interfaces principais. Validação e ajustes no layout e no fluxo de navegação. Início da programação da base em HTML5+CSS+JS.

Etapa 4: Testes no local de uso e finalização da programação da base.

251


Fase B: Desenvolvimento das atividades.

Etapa 5: análise detalhada do roteiro da atividade que será feita, geração de ideias e criação dos esboços das demais ilustrações complementares (objetos, formas, pessoas e animais) e storyboards da atividade. Validação dos conceitos e esboços.

Etapa 6: Início da arte-finalização dos desenhos. Validação e ajustes do traço, cores formas e tamanhos dos elementos criados com testes no local de uso.

Etapa 7: Finalização das ilustrações após os testes e criação dos frames de animação com a técnica de sprites.

Etapa 8: Programação das animações, inserção dos áudio e programação das primeiras interações das atividades em HTML5+CSS+JS. Validação, testes e ajustes.

Etapa 9: Finalização da programação e validação e feedback das atividades com total funcionamento. Ajustes em detalhes das animações e interações, caso necessário.

Etapa 10: Testes finais nas salas de aula. Validação e ajustes finais.

Nas quatro primeiras etapas se pensou no produto de forma ampla e única com o objetivo de criar as interfaces e navegação base. A partir da etapa 5, foi criado o ciclo, sendo primeiro feita a prototipagem de duas atividades iniciais, para depois replicar o conhecimento gerado e os elementos desenvolvidos nas demais atividades, chegando ao total de dezesseis atividades.

Uma particularidade deste processo foi a possibilidade de incluir ou deslocar tarefas dentro das etapas conforme o desenvolvimento acontecia, até chegar ao processo ideal.

Com o objetivo de identificar previamente possíveis desvios de execução em relação ao que havia sido planejado e de evitar o excesso de ajustes em ilustrações e animações, foram feitos acompanhamentos semanais ou quinzenais – dependendo da etapa em que o projeto estava e da complexidade das atividades ou ajustes que estavam sendo desenvolvidos – entre as equipes da Learning Factory e da PICTUS.

5 Resultados do projeto Estudo de caso: “Meet Brownie”

Detalhamento e exemplificação dos resultados durante a criação da base do produto (Fase A)

Após algumas sessões de brainstorming, a conclusão da equipe foi a de que a barra de navegação deveria ter o mínimo de botões possível – apenas avançar e voltar – pois o foco do produto eram as interações durante as atividades. Entretanto, também foi necessário incluir um botão fixo para a ação recarregar. Como o público-final eram crianças, em qualquer momento durante as atividades ou ao final delas, o professor poderia recomeçá-la ou repeti-la.

Ao final da etapa 2, foi possível chegar a um storyboard que mostrasse a interface principal, o acesso às atividades e a navegação entre elas, como pode ser visto a seguir.

Figura 4: Storyboards das interfaces do “Meet Brownie Yellow”. Fonte: Projeto “Meet Brownie”.

252


Após validado o fluxo, iniciou-se a etapa 3 com o layout das interfaces principais – tela inicial com o menu principal e tela de menu da lição – seguido pela programação da base.

Figura 5: Layout final do menu principal do “Meet Brownie Yellow”. Fonte: Projeto “Meet Brownie”.

Detalhamento e exemplificação dos resultados durante o desenvolvimento da lição “On a farm II” (Fase B)

Com o layout da interface principal e a programação base já criados e testados, foi iniciado o desenvolvimento das atividades. A Fase B do projeto foi beneficiada por informações obtidas na Fase A, principalmente em relação às condições de uso e performance do protótipo após os testes no local.

253


Na Etapa 5 foi feita a leitura detalhada do roteiro5 da lição e gerados os esboços de todos os elementos da cena.

Figura 6: Resultados obtidos ao final da Etapa 5 da Atividade 1 de “On a farm II”. Fonte: Projeto “Meet Brownie”, ilustração de Melissa Ribeiro.

Ao final da Etapa 6, os desenhos já vetorizados e coloridos foram visualizados com o uso do projetor das salas de aula para regulagem de cor e tamanhos.


A produção das animações começava na Etapa 7, com o desenho quadro a quadro de cada elemento que seria animado. Após serem feitos todos os desenhos necessários, os arquivos precisavam ser montados com medidas precisas seguindo os eixos vertical ou

5 O roteiro de uma atividade tinha aproximadamente duas páginas e, além da descrição detalhada, continha uma pauta

dos áudios que seriam utilizados em cada momento da atividade.

254


horizontal, e exportados como imagem com fundo transparente para serem posicionados sobre o cenário. Esta técnica chamada de sprite é aplicada em animações em games e em websites. Os sprites são imagens que agrupam várias outras imagens em sequência6.


6 No site tuts+ há alguns exemplos e um passo a passo ensinando como utilizar os sprites. Disponível em:

http://gamedevelopment.tutsplus.com/tutorials/an-introduction-to-spritesheet-animation--gamedev-13099 - acesso 02/4/2015.

255


Ao final da Etapa 8, já se podiam ver as animações acontecendo e interagir com os elementos, pois funções como clique e arrastar/soltar já estavam programadas.

256


Figura 9: As imagens são prints de uma pequena parte da animação da Atividade 2 de “On a farm II”. Nesta atividade, os personagens contam o número de frutas, legumes e ovos da fazenda. Fonte: Projeto “Meet Brownie”, ilustração de Melissa Ribeiro.

Na Etapa 9, foram ajustados todos os detalhes das animações e interações e também finalizada a programação da lógica da atividade. Cada atividade possuía uma lógica específica, de acordo com o tipo, podendo ser uma atividade simples com animações e cliques, animações e arrastar/soltar ou mais elaboradas do tipo jogo da memória ou colorir.

Em seguida, na Etapa 10, foram feitos os últimos testes no local de uso para validação e ajustes finais. Neste momento era feita uma simulação realista da navegação de acordo com o comportamento mais provável pelo usuário e também era feito o mapeamento de bugs em simulações de comportamentos que provavelmente não seriam frequentes, como cliques sucessivos muito rápidos.

6 Considerações finais

Os conceitos e a metodologia apresentados neste estudo ressaltam as contribuições que o processo de design e o designer podem fazer diante da multidisciplinaridade presente em projetos digitais voltados para educação.

A atuação do designer não deve ficar concentrada somente na criação e produção, devendo acontecer na idealização, conceituação e nos momentos de integração do projeto. Segundo Portugal (2005), o desafio para o designer no contexto do processo de ensino-aprendizagem está em descobrir as possibilidades de interação que acontecem na relação de professores, alunos, informações e construção de conhecimento.

257


Ao longo do ciclo de vida do projeto “Meet Brownie”, foi possível utilizar etapas do processo de design em um método com duas fases: uma fase com etapas únicas (layout de interface e programação base do produto) e outra fase com etapas cíclicas (desenvolvimento das atividades digitais). Esse método foi aprimorado durante o desenvolvimento até ser sintetizado podendo ser aplicado ou adaptado a outros projetos com características similares. Com esse estudo de caso, foi possível também exemplificar o uso de protótipos com algumas das técnicas e ferramentas utilizadas em cada etapa.

Portanto, diante dos desafios trazidos pelas mudanças e incertezas no cenário atual de ensino-aprendizagem, o processo de design e as habilidades do designer devem colaborar para tangibilizar conceitos, integrar equipes e etapas de desenvolvimento, propor novas ideias, experimentar novas superfícies e plataformas e explorar diferentes tecnologias em projetos de materiais didáticos digitais.

Referências

BROWN, T. 2010. Design Thinking: uma metodologia poderosa para decretar o fim das velhas ideias. Rio de Janeiro: Elsevier.

FONTOURA, A. M. 2011. A interdisciplinaridade e o ensino do design. Projética: Revista Científica de Design, Londrina, v. 2, n. 2, p. 86-95.

IOSCHPE, G. O que o Brasil quer ser quando crescer? Rio de Janeiro: Objetiva, 2014.

JURAN, J. M. A. 1998. A qualidade desde o projeto. São Paulo: Pioneira.

KELLEY, T; LITTMAN, J. 2001. A arte da inovação: lições de criatividade da IDEO, a maior empresa norte-americana de design. São Paulo: Futura.

KRUG, S. 2006. Não me faça pensar. Alta Books: Rio de Janeiro.

MEMÓRIA, F. 2005. Design para a internet: projetando a experiência perfeita. Rio de Janeiro: Elsevier.

NIELSEN, J. 2000. Projetando websites. Rio de Janeiro: Campus.

NORMAN, D. 2006. O design do dia-a-dia. Rio de Janeiro: Rocco.

PROJECT MANAGEMENT INSTITUTE (PMI). 2014. PMBOK: um guia do conjunto de conhecimentos em gerenciamento de projetos. 5. ed. Newtown Square, PA.

PORTUGAL, C. 2013. Design, Educação e Tecnologia. 1. ed. Rio de Janeiro: Rio Books.

____________. 2005. Hipertexto como instrumento para apresentação de informações em ambiente de aprendizado mediado pela internet. Revista Brasileira de Aprendizagem Aberta e a Distância, São Paulo.

RAMAL, A. C. “Educação com Tecnologias Digitais: Uma Revolução Epistemológica em Mãos do Desenho Instrucional”. IN Educação Online - Teorias, práticas, legislação e formação corporativa. Marco Silva (org.). São Paulo: Loyola, 2003.

TRACTENBERG, L; TRACTENBERG, R. 2012. Design Instrucional na Educação Corporativa. In: RAMAL, Andrea (Org.). Educação corporativa: fundamentos e gestão. Rio de Janeiro: LTC.

WODTKE, C.; GOVELLA, A.2009. Information Architecture: Blueprints for the Web. Berkeley: New Riders.

Sobre os autores

258


Natália Brunnet, PICTUS, Brasil: [email protected]

a importância do processo de design na criação e...

Documents