PROPROSTA DE DESENVOLVIMENTO PROJETUAL
1
2
3
SU MÁ RIO
INTRODUÇÃO PROBLEMATIZAÇÃO PÚBLICO-ALVO MERCADO E CONCORRÊNCIA CONCEITO DE CRIAÇÃO ESTRATÉGIA DE COMUNICAÇÃO ICONOGRAFIA PAINEL SEMÂNTICO PESQUISA EXPERIMENTAL PLATAFORMAS PROJETO DE INFORMAÇÃO PROJETO DE INTERFACE PROJETO DE NAVEGAÇÃO PROJETO DE INTERAÇÃO TIPOGRAFIAS PALETA DE CORES PEÇAS APLICATIVO SMARTWATCH PAINEL ADMINISTRATIVO TECNOLOGIAS DIGITAIS
5 6 7 8 9 10 12 13 14 16 17 18 19 20 21 22 23 24 25 26
O projeto Letra-letra tem por objetivo aplicar o Design Digital como auxílio na alfabetização e letramento de crianças do ensino fundamental. Baseando-se em conceitos de pedagogia e desenvolvimento infantil, o projeto explora os conceitos tecnológicos que podem contribuir tanto para o professor quanto para o aluno. Para tanto, computação ubíqua e gamificação foram introduzidos no cotidiano do ambiente escolar, apoiando-se na importância de aproveitar a vivência da criança para a construção do seu conhecimento em sala de aula, assim como na importância do lúdico para o aprendizado e desenvolvimento infantil, como defende Vygotsky em seus estudos. Neste documento estão presentes os conceitos e instruções para o desenvolvimento e a aplicação dos elementos estéticos e teóricos referentes ao projeto.
5
O alicerce do projeto Letra-letra se baseia no contexto sociocultural onde observa-se o avanço da tecnologia e o aumento exponencial do uso de dispositivos móveis conectados. Isso resulta em um público infantil cada vez mais multitarefa e conectado, que desde cedo apresenta uma identificação natural com a tecnologia, o que faz com que eles necessitem cada vez mais de auxílio para obter foco e concentração em atividades escolares no modelo de ensino vigente no Brasil. Somando isso com a necessidade do lúdico para aprimorar o desenvolvimento infantil, e partindo do princípio de que a computação ubíqua é uma potencial tecnologia para suprir essa necessidade, explorou-se a mesma para ajudar no fortalecimento do processo de alfabetização dessas crianças no ambiente escolar. A ferramenta desenvolvida neste projeto propõe auxiliar nos métodos tradicionais de ensino e não criar um novo, uma vez que os desenvolvedores deste projeto não têm formação pedagógica para abordar e sugerir alterações nessa nuance. Portanto, utilizou-se o design para contribuir
6
com a metodologia, fazendo com que as ferramentas utilizadas pelo professor para alfabetizar as crianças apresentem-se de maneira amigável tanto para o discente quanto para o docente, ao mesmo passo em que captura informações do dia-a-dia das escolas de forma natural e possibilita o uso das informações reunidas como material de aula. Sendo assim, o conteúdo criado pelos próprios interatores é único e personalizado para cada experiência. Cada ambiente e aplicação terá materiais de dados diferentes e úteis à sua maneira para o ensino daquele nicho.
6
Os públicos-alvo do projeto são de forma primária o professor e secundária o aluno, portanto deve-se oferecer uma funcionalidade que contribua efetivamente para o professor, mas sua estética e dinâmica devem ser agradáveis e capturar a atenção do aluno. A segmentação do público-alvo e informações detalhadas estão presentes no Plano de Negócios.
7 7
O uso de tecnologia no auxílio à educação ainda não é totalmente explorado, sendo que as ferramentas que existem limitam-se a lousas interativas e softwares que buscam, basicamente, digitalizar o material de ensino existente, por exemplo. O potencial diferencial é o de fazer com que a tecnologia produza artifícios em favor da metodologia, e não reproduza digitalmente os já existentes. A descrição detalhada do mercado e da concorrência estão presentes no Plano de Negócios.
8
Partindo de estudos de autores como Piaget e Vygotsky, baseou-se o projeto em como o lúdico pode ser benéfico a uma criança em fase de alfabetização e letramento, propondo uma mecânica que valorize sua curiosidade, explorando sua fase de descobrimento e transformando tais descobertas em aprendizado em sala de aula. Com isso, estudou-se como o Design Digital pode contribuir para suprir tais necessidades de aprendizagem, sabendo que isso precisa ser feito não simplesmente reproduzindo o conteúdo de
ensino existente em formatos analógicos para o meio digital, mas sim propondo uma ferramenta que realmente sirva de apoio à metodologia de ensino. Dessa forma, tem-se como objetivo e inovação não interferir na metodologia de ensino já existente, utilizando a tecnologia pervasiva e a gamificação para atrair a atenção da criança ao conteúdo que está sendo administrado e ao mesmo tempo criar um feedback para que o professor fique livre para utilizar os dados da forma como preferir em suas aulas.
9
As peças utilizadas para divulgação do projeto são conteúdos em vídeo, como o videocase explicativo e teaser; um website, o qual apresenta todas as funcionalidades do projeto Letra-letra para o público-alvo primário; e cartazes impressos.
10
O videocase explicativo é uma apresentação animada das funcionalidades e conceito do projeto, contendo o uso dos diferentes dispositivos, mostrando suas interações e vantagens. O teaser apresenta uma quantidade menor de informações, com a intenção de despertar interesse e atrair o público para saber mais sobre o projeto.
O website contém toda a informação necessária para o entendimento das funcionalidades do projeto e instruções de uso. O código back-end do website será desenvolvido de maneira semântica e trabalhado com palavras-chave que facilitem que os mecanismos de busca online incluam o projeto em pesquisas referentes à educação infantil e tecnologia.
Os cartazes impressos são aplicados em ambientes escolares e locais de circulação típica de educadores e pessoas interessadas no tema educacional infantil, como em palestras e congressos do setor. Esses cartazes têm as principais informações do projeto e o endereço do website informativo para maiores informações.
O principal meio de divulgação é o ambiente online, onde há uma ação coordenada com mídias sociais para o impulsionamento do conteúdo. Plataformas sociais como Facebook, e outras como Youtube e Google, possuem ferramentas de impulsionamento por meio de patrocínio, onde são definidos o público-alvo e suas segmentações para que o conteúdo seja apresentado a usuários com comportamento digital que indica quais são os potenciais interessados no tema do projeto.
11
A iconografia utilizada refere-se principalmente à infância, ludicidade e aprendizado. Tendo em vista o tema do projeto, optou-se por tais temáticas, explorando as cores vivas e permitindo a criação do Painel Semântico.
12
O painel semântico foi construído com base em quatro núcleos principais de palavraschave, sendo eles Criança, Lúdico, Tecnologia e Educação. O núcleo Criança, o principal, distinguise com formas orgânicas e arredondadas, enquanto os outros núcleos apresentam formas mais geométricas, permitindo desta forma a interpretação do painel como uma metáfora para a distância ideológica entre os núcleos, principalmente entre o Crianças e o Educação, contribuindo para o desenvolvimento da direção de arte do projeto.
13
O teste de usabilidade foi dividido em duas fases, sendo que a primeira foi realizada com alunos do quarto semestre de Design Digital da Universidade Anhembi Morumbi, e a segunda foi realizada com o público-alvo final, professor e aluno, na EMEF Mauro Faccio Gonçalves Zacaria, no bairro Parque Santo Antônio, zona Sul de São Paulo. Durante o primeiro teste, pôde-se notar a falta de feedbacks em algumas etapas, instruções que deveriam ser inseridas em algumas ações e principalmente uma reformulação na disposição de todas as funcionalidades da plataforma,
14
a fim de perceber quais as funcionalidades mais interessantes ao usuário e de que maneira as informações poderiam ser dispostas para que facilitasse a visualização e entendimento em um primeiro uso. Os feedbacks foram utilizados para solucionar problemas gerais de usabilidade no que diz respeito à navegação dentro da ferramenta, levando em consideração que o público deste teste não representou o público-alvo final do projeto, e sim novas visões de outros futuros profissionais da área. Durante o segundo teste, as crianças não mostraram dificuldades em usar o aplicativo para
smartwatch, sendo capazes de utilizar a ferramenta com pouca instrução prévia e no geral, considerou-se que a interface estava intuitiva o bastante para a faixa etária. Já em relação à plataforma administrativa, de forma geral, o professor não teve grandes dificuldades de navegação, apesar de apontar diversos problema com as funcionalidades. A principal delas foi a falta de uma ação para editar palavras já cadastradas, pois algumas demonstradas na interface haviam sido gravadas com erro de ortografia pelo aplicativo. Tal função foi apontada como bastante importante pelo usuário, e adicionada posteriormente. Outro problema
apontado foi a falta de feedback da interface em relação à ações, o que o fez se confundir em certos aspectos de navegação, e o levou a sugerir a incorporação de avisos indicando que tal ação foi ou não realizada. A partir dos testes na escola, com as crianças e professores, pode-se afirmar que o projeto Letra-letra apresenta uma ideia inovadora, capaz de despertar interesse e empolgar ambos os lados. Constatou-se que a ferramenta pode trazer bons resultados em sala de aula, a partir do momento que o professor tem uma série de dados gerados naturalmente e de forma lúdica para utilizar livremente em sua aula.
15 15
O projeto conta basicamente com três interfaces principais: aplicativo para smartwatch (relógio inteligente), aplicativo para smartphone e aplicativo web, disponível para plataforma desktop. Como protótipos de alta fidelidade dos softwares, foram desenvolvidos três web apps, cada um simulando uma das plataformas, que apresentam todas as funcionalidades de cada uma das peças do projeto, e servem para testar função e usabilidade em sua totalidade.
16
NAVEGAÇÃO LOGIN
APLICATIVO WEB
HOME
ÁREA DO PROFESSOR
RESUMO
NUVEM
QUEM SOMOS
NUVEM DE PALAVRAS
CATEGORIAS
O PROJETO
ALUNOS MODO SOLETRAR
INSTRUÇÕES
CONTATO
APLICATIVO SMARTWATCH
HOME
MODO GRAVAÇÃO
APLICATIVO SMARTPHONE
HOME
LOGIN
CONQUISTAS
NUVEM DA SALA
17
INFORMAÇÃO a-b
A interface do aplicativo de smartwatch foi pensada para ser o mais simples e prática possível, tendo em mente o público infantil como usuário. Apresenta apenas um botão grande no centro, o qual inicia a captação de áudio, e um botão menor para repetir a última palavra consultada.
18
LOGO
resumo
nuvem de palavras
LOGIN
LOGO
resumo
nuvem de palavras
LOGIN
busca nome nome nome nome nome nome
A interface da área do professor foi pensada para ser simples e dinâmica, podendo ser utilizada por usuários com níveis diferentes de experiência em tecnologia. A página Resumo apresenta diversas informações chave em “blocos arrastáveis”, para que o usuário possa montar o layout da forma como preferir.
A página Nuvem de Palavras apresenta uma área que exibirá as diversas nuvens, em junção com uma área onde o professor pode editar palavras salvas e criar grupos para dividí-las.
19 19
20
Focado no professor, o site informativo apresenta as principais vantagens de utilizar o Letraletra, e explica como que é o seu funcionamento. Sua função é tentar diminuir certa resistência por parte dos professores, apresentando os pontos positivos de sua utilização.
21
23 23
INTERAÇÃO 1
24
2
1
A voz da criança é captada pelo smartwatch por meio de um microfone acoplado.
2
O smartwatch transforma os áudio em dados escritos e os armazena no banco de dados via conexão Wi-Fi. No caso do Modo Soletrar, o smartwatch exibe para o usuário o dado escrito, letra a letra.
3
3
O computador fica responsável por exibir o conteúdo do banco de dados de forma organizada, sendo que o usuário pode também alterar tais dados, salvando-os novamente no banco.
O projeto Letra-letra consiste de duas interfaces principais. A primeira delas ĂŠ um aplicativo para smartwatch que pode ser usado pelos alunos nos intervalos de aula ou momentos que o professor achar apropriado. A segunda interface ĂŠ um painel administrativo onde o professor poderĂĄ consultar e tratar as palavras coletadas durante o uso do aplicativo e utilizĂĄ-las como material de ensino em sala de aula.
25
O aplicativo funciona de duas maneiras distintas e não simultâneas, por escolha do professor, dependendo do resultado desejado no determinado dia. A primeira funcionalidade, o modo gravação, consiste na captura contínua de palavras por meio do gadget vestível ou por um microfone bluetooth conectado previamente a um dispositivo móvel, sendo que as palavras capturadas são armazenadas em uma base de dados onde serão separadas e disponibilizadas para o professor na plataforma administrativa,
26
e deste modo pretende-se explorar o dia-adia da criança e aproveitar as palavras mais usadas por elas em seu aprendizado. A segunda funcionalidade, modo soletrar, é voltada para o conhecimento da ortografia de palavras por meio de soletramento. A usabilidade é simples, a criança pressiona o botão e diz uma palavra, o dispositivo a reconhece e a soletra visualmente e verbalmente para a criança, tendo o objetivo de despertar a curiosidade da criança pelo grafia correta de certa palavra e assim aproveitar sua fase de descoberta.
Enquanto os usuários fazem o uso do aplicativo nas duas maneiras citadas acima, a plataforma armazena os dados e organiza em um aplicativo web que possui dois níveis hierárquicos de acesso, professor e aluno. O acesso como professor possibilita a utilização de um painel de controle que permite o acesso às estatísticas de uso dos dispositivos, como palavras mais faladas; criar grupos de palavras; editar, adicionar ou excluir palavras; organizá-las por pesquisas diárias e mensais e consultar uma nuvem de palavras, criado a partir das palavras gravadas pelo aparelho, para projeção (ou outro método de exibição disponível) e utilização da forma que o professor desejar em sala de aula. Já usuários com acesso de aluno poderão consultar as palavras pesquisadas via aplicativo smartwatch, além de suas conquistas, em um sistema de recompensas baseadas em gamificação. As funções disponíveis para o acesso do tipo aluno estarão disponíveis também em um aplicativo smartphone, para facilitar o acesso pelas crianças e pais.
27
28
Tipografia principal - Logotipo
Tipografia auxiliar - Textos
BLOCKED
ROBOTO ROBOTO
Usou-se para o logotipo a fonte Blocked, cumprindo a função visual de ser divertida e concisa no projeto. Por ser toda blocada, passa um tom ao mesmo tempo lúdico e de construção, como se tivesse sido montada, com as letras “encaixando” para formar as palavras. A fonte Roboto e sua variações foram usadas para todo o restante do projeto. Utilizada em corpos de texto, garante uma leitura fluida, ao mesmo tempo que passa uma sensação lúdica e visualmente agradável para composições, seja em mídias impressas ou digitais.
ROBOTO ROBOTO ROBOTO ROBOTO ROBOTO ROBOTO ROBOTO ROBOTO ROBOTO ROBOTO
Escolheu-se como cores principais o azul, vermelho e amarelo, com o objetivo de corroborar com o conceito lúdico do projeto. As três cores são bastante vivas e contrastam muito bem entre si, remetendo à infância e diversão. Por serem as cores primárias que se aprende na escola, estão presentes tanto no universo da criança quanto no do professor, criando uma identificação visual para os dois.
29
TECNOLOGIAS DIGITAIS No desenvolvimento do projeto utilizou-se de linguagens de programação utilizadas como meio escolhido para compor a ideia inicial de inovação ao utilizar os conceitos de tecnologia vestível e pervasiva e também de gamificação. As principais linguagens utilizadas são Java, utilizada para lidar com as restrições associadas à criação de aplicativos para pequenos dispositivos, permitindo desenvolver o conteúdo dos dispositivos móveis e vestíveis; HTML e CSS, linguagens utilizadas na criação e estilização do aplicativo web; SQL, responsável por inserir, acessar e gerenciar conteúdos
30
armazenados em banco de dados; PHP, utilizado para a criação de páginas web dinâmicas e comunicação entre HTML e SQL; e JQuery, para dinamizar o HTML. Para a criação dos protótipos de alta fidelidade do aplicativo de smartphone e de smartwatch, a tecnologia Java deixou de ser necessária, sendo que as funcionalidades puderam ser simuladas com HTML, CSS, PHP, SQL e JQuery. Para a criação e aplicação da identidade visual, foram utilizados softwares gráficos como Photoshop, Illustrator e Indesign, além do After Effects e Premiere Pro para edição audiovisual.
31
32