HIPERMÍDIA APLICADA AO ENSINO DA LÍNGUA JAPONESA

UNIVERSIDADE TECNOLÓGICA FEDERAL DO PARANÁ

DEPARTAMENTO ACADÊMICO DE DESENHO INDUSTRIAL

TECNOLOGIA EM DESIGN GRÁFICO

CRISTINA KEIKO YAMAGUTI

HIPERMÍDIA APLICADA AO ENSINO DA LÍNGUA JAPONESA

TRABALHO DE DIPLOMAÇÃO

CURITIBA

2013


HIPERMÍDIA APLICADA AO ENSINO DA LÍNGUA JAPONESA

Trabalho de Conclusão de Curso apresentada como requisito parcial à obtenção do título de Tecnólogo em Design Gráfico, do Departamento de Desenho Indústrial, da Universidade Tecnológica Federal do Paraná.

Orientador: Prof. Kando Fukushima.

CURITIBA

2013

2

Ministério da EducaçãoUniversidade Tecnológica Federal do ParanáCâmpus CuritibaDiretoria de Graduação e Educação ProfissionalDepartamento Acadêmico de Desenho Industrial

TERMO DE APROVAÇÃO

TRABALHO DE DIPLOMAÇÃO N0 564

“HIPERMÍDIA APLICADA AO ENSINO DA LÍNGUA JAPONESA”

por


Trabalho de Diplomação apresentado no dia 30 de Agosto de 2013 como requisito parcial para a obtenção do título de TECNÓLOGO EM DESIGN GRÁFICO, do Curso Superior de Tecnologia em Design Gráfico, do Departamento Acadêmico de Desenho Industrial, da Universidade Tecnológica Federal do Paraná. O(s) aluno(s) foi (foram) arguido(s) pela Banca Examinadora composta pelos professores abaixo, que após deliberação, consideraram o trabalho aprovado.

Banca Examinadora: _____________________________________ Prof(a). Dra. Elenise Leocádia da Silveira Nunes DADIN - UTFPR

_____________________________________Prof(a). Msc. Daniela Fernanda Ferreira da Silva

DADIN - UTFPR

_____________________________________Prof. Msc. Kando FukushimaOrientador(a)DADIN – UTFPR

_____________________________________Prof(a). Msc. Maria Lúcia SiebenrokProfessor Responsável pela Disciplina de TD DADIN – UTFPR

“A Folha de Aprovação assinada encontra-se na Coordenação do Curso”.

RESUMO

YAMAGUTI, Cristina Keiko. Hipermídia aplicada ao ensino da língua japonesa - Trabalho de diplomação, Universidade Tecnológica Federal do Paraná. Curitiba, 2013.

Este projeto trata-se do desenvolvimento de um aplicativo para smartphones, voltado para o ensino da língua japonesa, para que, através disso, pudessem ser feitas pesquisas sobre como o design de instrução, o design de interface, hipermídia e a experiência do usuário, juntamente com a psicologia cognitiva podem colaborar no aprendizado do idioma.

Palavras-chave: Design de Instrução; design de interface; hipermídia; design de interação; experiência do usuário.

3

ABSTRACT

YAMAGUTI, Cristina Keiko. Hypermedia applied to Japanese language teaching - Trabalho de diplomação, Federal University of Technology of Paraná. Curitiba, 2013.

This project is about the development of an app for smarthphones focused on teaching the japanese language, so that trough it reasearch about instructional design, interface design, hypermedia and UX design, and how these things could work with cognitive psychology could be made.

Keywords: Design of Instruction; interface design, hypermedia, interaction design, UX.

4

LISTA DE FIGURAS

FIGURA 1 - MODELO ADDIE ...................................................................................................18FIGURA 2 - TELAS INICIAIS DO APLICATIVO KANA ............................................................43FIGURA 3 - TELAS DO APLICATIVO KANA............................................................................43FIGURA 4 - JOGO DO APLICATIVO KANA..............................................................................44FIGURA 5 - TELA INICIAL DO APLICATIVO IMIWA.................................................................45FIGURA 6 - TELAS DE KANJI DO APLICATIVO IMIWA...........................................................45FIGURA 7 - TELA DE LISTAS DO APLICATIVO IMIWA.......................................... .................46FIGURA 8 - TELAS DECONFIGURAÇÃO DO APLICATIVO IMIWA ........................................46FIGURA 9 - TELA DE PALAVRA NÃO ENCONTRADA DO IMIWA................ ..........................47FIGURA 10 - TELA INICIAL E LIÇÕES DO APLICATIVO JA SENSEI........................................48FIGURA 11 - TELAS DE USO FRASES ÚTEIS DO JA SENSEI.................................. ..............48FIGURA 12 - TELAS DE QUIZ DO APLICATIVO JA SENSE......................................................50FIGURA 13 - TELA INICIAL DO APLICATIVO DUOLINGO........................................................49FIGURA 14 - TELA DE JOGOS DO APLICATIVO DUOLINGO..................................................50FIGURA 15 - NOVA PALAVRA, NO APLICATIVO DUOLINGO...................................................51FIGURA 16 - FEEDBACK, NO APLICATIVO DUOLINGO..........................................................51FIGURA 17 - CASO ABANDONO DE ESTUDOS APLICATIVO DUOLINGO.............................52FIGURA 18 - PERDA DE CONHECIMENTO APLICATIVO DUOLINGO....................................52FIGURA 19 - ORIGAMI...............................................................................................................55FIGURA 20 - REFERÊNCIAS DO TEATRO KABUKI.................................................................56FIGURA 21 - ENCADERNAÇÃO MANUAL JAPONESA............................................................57FIGURA 22 - DESENVOLVIMENTO DE ÍCONES......................................................................58FIGURA 23 - TELA DO MENU PRINCIPAL................................................................................59FIGURA 24 - TELAS DO DICIONÁRIO.......................................................................................59FIGURA 25 - TELAS DE CONFIGURAÇÕES.............................................................................60FIGURA 26 - TELAS DE LIÇÕES ............................................... ...............................................61FIGURA 27 - TELAS DE FLASH CARD......................................................................................61FIGURA 28 - TELA DE JOGO.....................................................................................................62FIGURA 29 - FAMÍLIAS TIPOGRÁFICAS...................................................................................62FIGURA 30 - TELAS DO MODO TOMODACHI..........................................................................63FIGURA 31 - TELAS DE CONFIGURAÇÕES.............................................................................64FIGURA 32 - TELAS DO MODO ONLINE E ANOTAÇÕES.......................................................65FIGURA 33 - TELAS DA LIÇÃO DE REPETIÇÃO......................................................................66FIGURA 34 - TELAS DA LIÇÃO DE TRADUÇÃO.......................................................................66FIGURA 35 - TELAS DA LIÇÃO DE RESPOSTA........................................................................66FIGURA 36 - TELAS DE FLASHCARD.......................................................................................67FIGURA 37 - TELA DE JOGO.....................................................................................................68FIGURA 38 - MAPA DO APLICATIVO.........................................................................................69 FIGURA 39 - MUDANÇA DE LAYOUT........................................................................................75FIGURA 40 - INTRODUÇÃO DE IMAGENS NO TUTORIAL......................................................75

LISTA DE GRÁFICOS

GRÁFICO 1 - ÍNDICE DE ESTUDANTES DA LÍNGUA JAPONES.............................................38GRÁFICO 2 - INTERESSE EM ESTUDOS ATRAVÉS DE DISPOSITIVOS MÓVEIS................39GRÁFICO 3 - TEMPO DEDICADO POR DIA AO ESTUDO DE JAPONÊS................................39GRÁFICO 4 - ATIVIDADES MAIS UTILIZADAS PARA O ESTUDO DE JAPONÊS...................40GRÁFICO 5 - ESTILO DE ATIVIDADES MAIS UTILIZADAS PARA O ESTUDO.......................40GRÁFICO 6 - IMPORTÂNCIA DE HABILIDADES......................................................................41GRÁFICO 7 - INTERESSE DE UTILIZAÇÃO DE JOGOS..........................................................41GRÁFICO 8 - IINTERESSE DE INTERAÇÃO ON-LINE.............................................................42

LISTA DE QUADROS

QUADRO 1 - QUESTÕES NORTEADORAS DO PROJETO NAS FASES DO DI....................20QUADRO 2 - TIPOS DE APRENDIZAGEM ..............................................................................22QUADRO 3 - RECOMENDAÇÕES DE USO DE CORES NA WEB..........................................36

SUMÁRIO

........................................................................................................1 INTRODUÇÃO 7...............................................................2 PROCEDIMENTOS METODOLÓGICOS 8

................................................................................3 REVISÃO DA LITERATURA 10......................................................................................................3.1 HIPERMÍDIA! 10

..................................................................................3.1.1 Conceito de Hipermídia 13..............................................................3.1.2 Tecnologias utilizadas na hipermídia 15

.................................................................................3.2 DESIGN INSTRUCIONAL! 16...........................................................................3.2 EXPERIÊNCIA DO USUÁRIO! 25

...............................................................................3.3.1 Arquitetura da informacão 26........................................................................................3.3.2 Design de interação 26

.....................................................................................................3.3.3 Usabilidade 27.......................................................................3.3.4 Interação humano-computador 28

.......................................................................................................3.3.5 Ergonomia 29....................................................................................3.3.6 Critérios Ergonômicos 30

.........................................................................................3.3.5 Design de interface 32...................................................................................3.4 APLICAÇÃO DE CORES! 34

.....................................................................................................3.5 TIPOGRAFIA! 35..........................................................................4 NECESSIDADES DO USUÁRIO 38

..............................................................5 DESENVOLVIMENTO DO APLICATIVO 54......................................................................................................5.1 CONTEÚDO! 54

.........................................................................................5.2 O PROJETO VISUAL! 55..........................................................................5.3 ATIVIDADES DO APLICATIVO! 63

.....................................................................................5.4 MAPA DO APLICATIVO! 68.......................................................................................................6 AVALIAÇÕES 72

.........................................................................6.1 ETAPA DO CICLO DE DESIGN! 72.........................................................................................6.2 COLETA DE DADOS! 72

.......................................................................................................7 CONCLUSÃO 76

.......................................................................................................REFERÊNCIAS 78...........................................................................................................GLOSSÁRIO 82

7

1 INTRODUÇÃO

Este projeto apresenta os estudos e desenvolvimento de um aplicativo para

dispositivos móveis, como plataforma de utilização da hipermídia na otimização do

aprendizado da língua japonesa.

Baseado no formato multidisciplinar do design de instrução, o produto trata-

se de um elemento complementar ao primeiro livro do módulo básico do Curso de

Línguas Estrangeiras Oyama. Visa possibilitar a utilização do conteúdo aprendido

junto ao professor, inserindo-o no cotidiano dos usuários através de experiências

diferentes das vivenciadas apenas na sala de aula.

Inicialmente destinado a faixa etária de 12 a 30 anos, teve seu público - alvo

ampliado devido ao interesse de estudantes mais velhos, tendo sido atualizado para

atender as demandas de estudantes variando entre 12 a 50 anos, de ambos os

sexos, iniciantes ou não no idioma.

Para o desenvolvimento do aplicativo, foi realizado um estudo através dos

conceitos e aplicações do design instrucional, arquitetura da informação, interação

humano-computador, design de interação, design de interface, usabilidade e

ergonomia que foi tomada como base para a análise de outros aplicativos que

auxiliam no ensino de uma língua estrangeira, e juntamente aos resultados de

questionários com possíveis usuários, traçou-se sua diretriz para melhor atender as

necessidades encontradas.

Como finalização do processo, testes com usuários foram realizados através

de cenários de usos, juntamente com o desenvolvimento da interface, buscando

criar um design intuitivo, facilitador, incentivador e relacionado à cultura japonesa.

7

2 PROCEDIMENTOS METODOLÓGICOS

Para a composição deste projeto, foi seguida a metodologia sugerida por

Scapin (apud SILVA, 1998) quanto a um desenvolvimento ergonomicamente

apropriado, e o apontado pelas autoras Preece, Rogers e Sharp (2002 p. 33-49) no

livro Design de Interação: Além da Interação homem-computador.

O projeto foi iniciado com um briefing do que é preciso para o produto. Visa

determiná-lo através de estudos bibliográficos - pesquisas de livros, artigos

acadêmicos e científicos sobre o funcionamento da aprendizagem, neurociência,

design de instrução, experiência do usuário e hipermídias relacionadas ao processo

didático - e pesquisas de campo -, estudo das características dos usuários, sendo

estes, como citado anteriormente, alunos iniciantes de japonês de 12 a 50 anos,

entrevistas e questionários, com o intuito de definir suas necessidades e

preferências. Realizada tal análise, estudou-se materiais didáticos de língua

japonesa, tanto físicos quanto eletrônicos, e outros aplicativos com funções similares

a do projeto em questão. Finalizando com entrevistas junto à professores do idioma,

pôde-se fazer uma pequena analise dos métodos de ensino em diferentes escolas e

também como isto ocorre no Japão , durante a alfabetização infantil.

No desenvolvimento das alternativas, traçou-se um paralelo do conteúdo do

aplicativo (em relação ao material didático e as necessidades do aluno para um

melhor aproveitamento do sistema) junto ao projeto visual.

Para a otimização do produto, focando na grande importância de assegurar

a capacidade de aprendizagem do usuário em relação ao aplicativo, de forma que

leve o menor tempo possível para compreender seu funcionamento, sendo o mais

intuitivo e facilitando sua utilização, realizou-se testes de usabilidade, ao fim e

durante o processo de desenvolvimento do sistema, a fim de confirmar metas de

eficácia - levar ao usuário um aplicativo que realmente o ajude com o estudo da

língua japonesa -, e de segurança - que colabore com o mesmo, possibilitando a

reparação de erros e possua ergonomicamente menor probabilidade de realizar

1SCAPIN, Dominique L.; BASTIEN, J. C. Christian, A validation of ergonomic criteria for the evaluation of human‐computer interfaces. International Journal of Human-Computer Interaction, 1992.

8

ações indesejáveis, permitindo mais segurança ao explorar o aplicativo e suas

possibilidades.

Por fim, ressaltando a importância de tornar o processo de aprendizado

através do aplicativo mais atraente, melhorando cada vez mais a experiência do

usuário, focou-se da criação uma interface estéticamente agradável, incentivadora,

compensadora e emocionalmente adequada.

9

3 REVISÃO DA LITERATURA

Neste capítulo, encontra-se a revisão da literatura com algumas

explanações sobre sua abordagem no projeto.

O estudo foi realizado a fim de desenvolver o melhor sistema possível, do

ponto de vista cognitivo e do design, centrado no usuário e ressaltando a

importância deste em sua realização.

3.1 HIPERMÍDIA

Escolhida como base para este projeto devido aos paralelos entre a

associatividade da hipermídia e a aparente associatividade da mente humana

(GLENN; CHIGNELL, 1992), pois sua natureza cognitiva em muitos contextos é

considerada como redes de memória (Collins; Loftus2 (1975); Anderson3 (1983) apud

HIRATSUKA(1996).

Segundo Lévy (1993 p.25-26) uma rede hipermidia possui seis princípios

abstratos:• Princípio de metamorfose: a rede hipertextual encontra-se em constante

construção e renegociação. Sua extensão, composição e desenho estão sempre

em mutação, conforme o trabalho dos atores envolvidos, sejam eles humanos,

palavras, sons, imagens, etc.• Princípio de heterogeneidade: os nós de uma rede hipertextual são

heterogêneos; podem ser compostos de imagens, sons, palavras, entre outros. E

o processo sociotécnico colocará em jogo pessoas, grupos, artefatos, com todos

os tipos de associações que pudermos imaginar entre eles.• Princípio de multiplicidade e de encaixe das escalas: no hipertexto

quando uma conexão é acesada, pode revelar-se como sendo composto por toda

uma rede de nós e conexões, e assim, indefinidamente.

2COLLINS, A. M.; LOFTUS, E. A spreading-activation theory of semantic processing. Psychological Review, 1975.

3ANDERSON, J. J. Multimedia: about interface. MacUser,1989.

10

• Princípio de exterioridade: O crescimento e diminuição da rede,

composição e recomposição dependem de um exterior indeterminado, como

adição de novos elementos, conexões com outras redes, etc.• Princípio de topologia: no hipertexto, tudo funciona por proximidade e

vizinhança. Os acontecimentos acontecem através de caminhos, se o usuário

eliminar uma parte do assunto, pulando-o ou deixando-o para mais tarde, não

afetará o entendimento do todo ao final da experiência (BRAGA, 2004 p.55). A

rede não está no espaço, ela é o espaço.• Princípio de mobilidade dos centros: a rede possui não um, mas diversos

centros móveis, saltando de um nó a outro, trazendo ao redor de si uma

ramificação infinita.

Os princípios da hipermídia permitem ao usuário que se aprofunde ou não

em determinados assuntos, conforme suas próprias decisões. Isso o ajuda a guiar o

estudo conforme suas vontades, sem despender tempo com assuntos que já

domina, e sem que suas escolhas prejudiquem o resultado final.

Lévy também cita que a estrutura de nossa memória nos faz reter e

compreender melhor um conteúdo que esteja organizado de acordo a relações

espaciais. A hipermídia coloca a disponibilidade de seu usuário tal relação, através

de diagramas e mapas interativos e dinâmicos. Com grandes similaridades com a

mente humana, ela colabora não apenas com o reforço do aprendizado, como na

recuperação de memórias por associação. Neste projeto, a aplicação deste conceito

encontra-se na maneira como o conteúdo é disponibilizado ao usuário, separando-

os em capítulos de lições ou por conteúdo (nos cartões de memorização FlashCard),

criando um mapa de conteúdo que colabore com a organização de conceitos

relacionados a matéria estudada.

Segundo Alavarce (2007 p.27), a aprendizagem deve ser favorecida pelo

ambiente virtual educativo, que deve despertar a vontade de aprender no usuário,

distribuindo apropriadamente as informações em momentos adequados e

contextualizados para promover a internalização dos conceitos. Dessa forma, como

cita Lévy, a hipermídia ganha um papel de destaque em um aplicativo educativo.

11

O hipertexto ou a multimídia interativa adequam-se particularmente aos usos educativos. É bem conhecido o papel fundamental do envolvimento pessoal do aluno no processo de aprendizagem. Quanto mais ativamente uma pessoa participar da aquisição de um conhecimento, mais ela irá integrar e reter aquilo que aprender. Ora, a multimídia interativa, graças à sua dimensão reticular ou não linear, favorece uma atitude exploratória, ou mesmo lúdica, face ao material a ser assimilado. É, portanto, um instrumento bem adaptado a uma pedagogia ativa.(LÉVY 1993 p.40).

Quanto à sua utilização no aprendizado de língua estrangeira, Souza (2008)

coloca como diferentes canais - visual, verbal, sonora - beneficia alunos que

possuam essas diferentes capacidades cognitivas. Braga4 (2004, apud SOUZA,

2008 p. 110) cita, em sua pesquisa, que estudar através da hipermídia "torna

possível ao aprendiz determinar a trajetória e as combinações que melhor apóiem

suas interações com as informações veiculadas pelo material, facilitando assim a

aquisição do conhecimento.", ressaltando, entretando, que a utilização de variados

meios deve ser utilizada com cuidado, pois o excesso de informação dificulta a

construção do conhecimento.

A autora também ressalta que pesquisas sugerem um impacto positivo

quanto ao uso da hipermídia relacionados a "anotações na forma de glossário,

dicionário eletrônico e concordancer, entre outros, no aprendizado implícito de

vocabulário, em particular, e, de forma mais geral, na compreensão de textos."

Al-Seghayer 5 (2001, apud SOUZA, 2008 p.113), investigou a eficiência do

aprendizado de língua estrangeira através da utilização de texto verbal juntamente

com vídeo (transcrição do vídeo), e conclui que a combinação contribui

principalmente para o aprendizado de palavras-chave do assunto tratado,

colaborando com a retenção de novas palavras, principalmente para alunos

iniciantes, e ainda facilitando o entendimento do termo através do contexto em que

foi colocada, tanto visualmente (imagens do vídeo), quanto na frase utilizada.

Em relação a ferramenta Concodancer, Souza (2008, p.117) cita as pesquisas

realizadas por Hardisty e Windeatt (1989), St. John (2001) e Thurstun e Candlin

(1998), que propõe a utilização desta para o desenvolvimento de material

4BRAGA, D. A natureza do hipertexto e suas implicações para a liberdade do leitor e o controle do autor nas interações em ambiente hipermídia. São Paulo: Revista da ANPOLL, USP, v.15, n.1, p.65-86, 2003

5 AL-SEGHAYER, K. The effect of multimedia annotation modes on L2 vocabulary acquisition: a comparative study. Language Learning and Technology, 2001

12

instrucional, com foco em vocabulário e gramática, principalmente para os alunos no

nível inicial. Completando que tais teóricos apontam como vantagens da

Concordancer a apresentação de vocabulário em vários contextos reais, variados

aspectos do conhecimento da palavra, como relações semânticas e padrões

gramaticais, e a geração de um aprendizado compensador e gratificante para o

usuário.

No aprendizado de língua japonesa, um aplicativo disponível que trás essa

ferramenta é o “ImiWa”, que pode ter seu nome traduzido como “o significado é”. Ele

disponibiliza ao aluno tradução de palavras, classificações, exemplos de utilização e

ideogramas que são utilizados para escrevê-lo, e é a mais utilizada entre os

estudantes do idioma. O “ImiWa” será analisado mais a frente, no capítulo 4.

Sendo assim, pode-se concluir que a hipermídia e suas ferramentas,

possuem qualidades que tornam seu sistema vantajoso para o âmbito educacional,

tal como usabilidade, comunicabilidade, aplicabilidade e acessibilidade,

enquadrando-se também nas importantes características de aprendizado,

colaboração, entretenimento e sociabilidade. Ressaltando que sistemas

educacionais necessitam de avaliações que qualifique a capacidade do sistema de

atingir seus objetivos educacionais e fomentar o aprendizado ( WESTERINK et al. 6,

1994 apud PRATES ET AL, 2006).

3.1.1 Conceito de Hipermídia

A hipermídia trata-se de um ambiente virtual multilinear, onde o usuário pode

interagir da forma que desejar. Isso é possível pela estrutura associativa da

hipermídia, construída como uma rede de informações, como se estes fossem os

nós, que por sua vez são ligados pelos links (SOUZA, 1998). Segundo Negroponte:

A hipermídia é um desenvolvimento do hipertexto, designando a narrativa com alto grau de interconexão, a informação vinculada (...) Pense na hipermídia como uma coletânea de mensagens elásticas que podem ser

6 Westerink, J. H. D. M., Rankin, P. J., Majoor, G. M. M., Moore, P. S. (1994) A New Technique for Early User Evaluation of Entertainment Product Interfaces, Proceedings of the Human Factors and Ergonomics Society, 38th Annual Meeting, 1994

13

esticadas ou encolhidas de acordo com as ações do leitor. As idéias podem ser abertas ou analisadas com múltiplos níveis de detalhamento. (NEGROPONTE, 1995 p.6)

Os elementos de hipermídia que possibilitam tal interação do conteúdo com

as ações do usuários são:• Interatividade - A interatividade gera satisfação, senso de diversão e

controle de conteúdo ao usuário.• Gráficos - Podem ser imagens, desenhos, letras, pictogramas, sinais. A

presença dos gráficos permite compreensão mais imediata da informação do que

em um texto, facilitando e agilizando o processo. • Texto - Este é um ponto delicado do projeto, uma vez que para utilizar o

sistema baseado em texto, o usuário deve possuir um conhecimento prévio da

língua utilizada e da leitura. No caso deste projeto, o texto será aplicado em dois

idiomas diferentes, a língua portuguesa e a japonesa, a fim de que aquela

colabore com a compreensão desta.• Imagens seqüenciais - São imagens que permitem uma representação

mais rápida do que o texto e mais completa e de fácil compreensão do que os

gráficos. Muito utilizadas do projeto, uma vez que colabora com a geração de

conceitos de uma palavra ou frase, ponto importante uma vez que durante o

aprendizado de uma língua estrangeira, conceituar palavras ao invés de decorar

sua tradução colabora com o avanço do domínio do novo idioma.• Vídeo - Deriva da palavra em latim com significado de “eu vejo”, em que

imagens seqüenciais são reproduzidas de forma a simular o movimento.• Animações - Também composto de imagens seqüenciais que são

reproduzidas de forma a simular o movimento.• Áudio - Neste projeto ele será abordado como uma ligação entre o que é

escrito em japonês e o que o usuário precisa absorver como sua pronúncia, os

fonemas da língua portuguesa. • Linguagens computacionais - Permitem a plataforma digital a simular o

ambiente de hipermídia.

O início da hipermídia se deu através do hipertexto, no projeto Xanadu de

Theodor H. Nelson. Tal projeto, visava criar uma rede universal, instantânea e

14

eletrônica em que os usuários poderiam realizar leituras em diversas direções, e não

linearmente como em um livro.

O desenvolvimento do hipertexto iniciou-se em 1968, quando entrou no

mercado o sistema de editoração de texto Augment, desenvolvido em Stanford

Reseach Institute, por Douglas Engelbart, além dos recursos já citados do

hipertexto, contava com uma amigavel interface que funcionava através de janelas ,

em que o usuário podia controlar a interface e capacidade de realizar

compartilhamento de mensagens eletrônicas.

Em 1972, na Carnegie Mellon University, foi criado o Knowledge

Management System, um sistema hipertexto distribuído em que todas as

informações podiam ser alteradas pelo usuário, sem separação de autor e leitor.

Mais tarde nessa década, o lançamento dos primeiros PC's (computadores

pessoais) da IBM e Apple, houve o desenvolvimento pelo Massachusetts Institute of

Technology Aspen do Movie Map, o primeiro videodisco de hipermídia, um hipertexo

com textos, sons e imagens ligados por links.

Na década seguinte, podemos ver um grande avanço na tecnologia, com o

desenvolvimento de mídias óticas, videotexto, fibra ótica, tela sensível ao toque e a

base da internet atual. Tudo isso, permitiu hipertextos comercialmente viáveis, o

primeiro deles foi desenvolvido por Peter Brown, na University of Cantebury,

batizado de Guide, ele foi o primeiro sistema hipertexto para computadores

pessoais.

No ano de 1989, a World Wide Web é proposta por Tim Berners-Lee, o que

seria o conjunto de textos, sons e imagens digitalizadas ligadas entre si por uma

grande rede e espalhadas mundialmente, enfim concretizando os sonhos de Ted

Nelson.

Atualmente, o conceito de hipermídia faz parte do nosso cotidiano, através

de computadores, televisores, dispositivos móveis, entre outros, ampliando a

interação homem-computador e tornando-a natural e cada vez mais difundida.

3.1.2 Tecnologias utilizadas na hipermídia

A hipermídia funciona como uma grande rede, em que as informações são

os nós e os links são os inúmeros fios que ligam esse conteúdo uns aos outros de

15

variadas formas. Para isso, algumas tecnologias são utilizadas para criar tais

ligações, entre elas estão os padrões:• SGML - O Standard Generalized Markup Language (SGML) define uma

linguagem de marcação para os documentos. Criada para permitir que os

documentos pudessem ser legíveis durante décadas, é pouco difundida por ter

uma utilização complexa e não suportar estruturas mais desenvolvidas, como

vídeos e mídias.• XML e RSS - o XML (eXtensible Markup Language) é baseado na

linguagem RSS, um formato utilizado para distribuição de conteúdos, em que é

possível reunir conteúdos de diversas fontes em um único local. Para sua

utilização, entretanto, é necessário um leitor especial, uma vez que o computador

não realiza a leitura do XML, e consequentemente do RSS.• HTML - O (HyperText Markup Language), muito utilizado para o formato

de hiperdocumento na WWW ( World Wide Web), e sua navegação funciona por

três operações básicas: seleção livre de relacionamento e histórico de navegação.

Em 2011, o HTML5 entrou no mercado com inúmeras mudanças, incorporando

recursos que antes só eram possíveis através de outras tecnologias, otimizando o

suporte para multimídias e mantendo sua leitura fácil tanto para seres humanos,

quanto para máquinas.

Para que se possa utilizar a hipermídia como ferramenta no aplicativo

educacional que neste projeto se desenvolveu, duas outras bases foram de grande

importância: O design Instrucional e a Experiência do usuário.

3.2 DESIGN INSTRUCIONAL

O Design instrucional (DI), também conhecido como design educacional,

pedagógico ou didático, segundo Filatro (2003, p. 56), não se trata apenas da forma

ou da função, mas da união dos dois para que possa atingir seus objetivos na

didática.

Tem em suas origens as ciências humanas, da informação e administração.

Iniciado na década de 40, em que muitos psicólogos foram chamados pelo exército

norte americano, durante a Segunda Guerra Mundial, para fazer pesquisas sobre

aprendizagem e comportamento humano, e desenvolver programas que

16

otimizassem o treinamento militar durante a Segunda Guerra Mundial. Edward

Thorndike auxiliou no treinamento dos recrutas seguindo sua linha de raciocínio na

qual a aprendizagem ocorre quando um tema é controlado e sequenciado e quando

os alunos recebem reforço apropriado para isso.

Na década de 50, no pós-guerra, várias abordagens diferentes foram feitas,

tais como análise, desenvolvimento e avaliação de materiais didáticos. Em 1957, o

lançamento do Sputnik - programa responsável pela produção da primeira série de

satélites artificiais soviéticos, para estudar capacidades de lançamento de cargas ao

espaço, efeitos da ausência de peso e da radiação sobre os organismos vivos -

pelos russos influenciou o governo dos Estados Unidos a investir no

aperfeiçoamento da educação de ciências e matemática levando o design

instrucional (DI) a um novo patamar. Nessa época, desenvolveu-se o conceito de

avaliação formativa, ou seja, a inclusão de testes e revisões durante o processo e

não ao fim dele.

Nos anos 60, a área ganhou forte influencia com a publicação de Robert

Gagné de seu livro Como se realiza o Aprendizado, conceituando os cinco domínios

ou tipos de resultados da aprendizagem (informação verbal, habilidades intelectuais,

habilidades psicomotoras, atitudes e estratégias cognitivas), tendo, nessa década e

na seguinte, tanto na área militar como corporativa e acadêmica, um grande

crescimento, ganhando cursos universitários sobre a área.

Por fim, nos anos 80, o design instrucional perde a força no ambiente

acadêmico, mas por outro lado ganha uma nova entrada que cresce até os dias de

hoje, pelo uso dos computadores e afins com a produção de material instrucional

multimídia.

Ao longo dos anos, podemos perceber cada vez mais a presença do DI no

cotidiano, como sistemas de suporte, manuais de instruções multimídias, educação

a distância, entre outros produtos que crescem graças ao advento da internet.

Para compreendermos o design de instrução, é importante ressaltar que a

instrução diferencia-se da informação, como cita Myers7(APUD FILATRO, 2003 p.62)

“o tipo de tarefa, o objetivo da instrução e as necessidades dos alunos devem ser

7MYERS; Kenneth L. Is There a Place for Instructional Design in the Information Age?, Educational Technology, 1999

17

http://pt.wikipedia.org/wiki/Uni%C3%A3o_Sovi%C3%A9tica

http://pt.wikipedia.org/wiki/Uni%C3%A3o_Sovi%C3%A9tica

http://pt.wikipedia.org/wiki/Espa%C3%A7o_sideral

http://pt.wikipedia.org/wiki/Espa%C3%A7o_sideral

considerados. A instrução também inclui orientação ao aluno, feedback e prática, o

que a informação sozinha não pode fornecer”.

Sendo assim, podemos compreender que o DI consiste em um processo

sistemático que utiliza de técnicas, métodos e atividades com um planejamento afim

de facilitar o aprendizado a partir dos princípios de aprendizagem e instrução.

O Design Instrucional contextualizado, colocado por Filatro (2003, p.3-4),

utilizado neste projeto, propõe um processo que identifica as necessidades do

público-alvo, para então desenhar as soluções necessárias e avaliação dos

resultados, ao final e durante o processo. Como demonstra a figura 1, é baseado no

estilo de projeto conhecido como modelo ADDIE: análise, design, desenvolvimento,

implementação e avaliação.

Figura 1 - Modelo ADDIEFonte: Why Instructional System Design?, CLARK (1995)

Filatro (2007, p.3), define tais fases tradicionais do design instrucional

sendo:• Análise - nesta fase do projeto, deve-se estudar as necessidades de

aprendizagem, objetivos instrucionais e restrições para o desenvolvimento do

sistema.• Design e desenvolvimento - fase em que ocorre o planejamento da

instrução e elaboração dos materiais instrucionais.• Implementação - onde ocorre a ambientalização do projeto, juntamente

com os docentes, realizando, por fim, a situação instrução e aprendizagem,

18

• Avaliação - fase final, em que ocorre acompanhamento, revisão e

manutenção do projeto. Lembrando que no design instrucional contextualizado,

aqui utilizado, tal fase ocorre durante todo o processo e ao final dele.

Cada fase possui questões norteadoras do projeto, como mostra o quadro 1,

neste projeto, devido ao pouco envolvimento de profissionais das outras áreas

necessárias para DI durante o desenvolvimento do sistema, foram realizadas

apenas algumas questões selecionadas como base, utilizadas juntamente com as

teorias do design instrucional, que parte de estudos sobre a neurociência, um ramo

da ciência que estuda o sistema nervoso, investigando como funciona o processo do

aprender e do lembrar.

Os estudos sobre a influência da neurociência na aprendizagem é um

importante fator para entendermos como e quais estímulos externos colaboram para

a formação das redes neurais, resultando na retenção das informações.

Segundo a professora Sandra Regina da Luz Inácio (2007) pesquisas no

campo da neurociência fornecem razões concretas do porquê determinadas

abordagens e estratégias educativas possuem maior eficiência que outras. Alguns

pontos relevantes para este projeto são:

• Interligação entre aprendizagem, memória e educação, quando ativadas

pelo processo de aprendizagem, sendo essa uma atividade social em que os

indivíduos possuem oportunidade de discutir tópicos em ambiente encorajador para

expor seus sentimentos e idéias. Este ponto, muito importante para estimular não

apenas o aprendizado, mas a vontade de aprender, pode utilizar das redes sociais

para que os alunos entrem em contato com outros estudantes e professores.

• A existência de modificações fisiológicas e estruturais como resultado de

experiências, por isso, aulas práticas que envolvam o conteúdo aprendido colabora

com a associação entre o novo assunto e os prévios.

• Estudantes que se sentem no domínio durante o aprendizado, ou seja,

atividades pré-selecionadas que habilitem escolhas de tarefas pelo aluno aumentam

sua responsabilidade no aprendizado. Daí a grande vantagem de um ambiente

didático interativo.

• Ter vivências que “reflitam” situações na vida real colabora com a fixação

da nova informação.

19

Quadro 1 - Questões norteadoras do projeto nas fases do DI Fonte: FILATRO (2007, p. 68-69)

20

• Atividades prazerosas e desafiadoras facilitam o “disparo” entre as células

neurais, fortalecendo sinapses e estabelecimento das redes neurais.

• Estudos neurocientíficos nos mostram que o processo de aprendizagem

funciona quando, como já mencionado anteriormente, há o relacionamento entre

dois ou mais sistemas, ressaltando a importância de aliar o aprendizado a

hipermídia (músicas, jogos, vídeos e outras atividades) que possibilite o trabalho dos

sistemas auditivos, visuais e até mesmo táteis. Além disso, ajudam a prender a

atenção do aluno e tornam o momento de aprendizado muito mais divertido e

prazeroso.

Entre as várias teorias que explicam o funcionamento da aprendizagem,

sendo ou não bases do design instrucional, as utilizadas neste projeto são:• Teoria da Aprendizagem Cumulativa: parte da idéia de que esta acontece

devido a interação do sujeito com o ambiente, sendo representada pela

modificação comportamental, fato de grande importância por demonstrar a

mudança que ocorre, por um fator externo, no interior da mente humana ao

aprender. Tem como principal característica a taxionomia de tipos de

aprendizagem, em que classifica-os em: informação verbal; habilidades

intelectuais; estratégias cognitivas; atitudes; e habilidades motoras. Robert Gagné

e Leslie Briggs, principais representantes, explicam esta divisão como mostra o

quadro 2, retirada do livro Introdução à Psicologia da Aprendizagem de André Luiz

Viana Nunes (2007).

Segundo Gagné, os processos internos ocorrem primeiramente com um

registo sensorial, em que o estímulo é registrado na forma de representação - o

indivíduo vê a imagem de uma xícara, e é apenas a imagem da xícara que fica

registrada em sua mente - e então se torna uma memória de curto prazo, o estímulo

ganha um conceito - o indivíduo vê a mesma xícara mas já discorre sobre ela, “isso

se chama xícara, é funda, possui uma alça e é branca -, caso o estímulo não seja

repetido é apagado, caso reforçado, pode ficar mais tempo na memória de curto

prazo ou ser fixado como memória de longo prazo,onde as informações que foram

repetidas e recordadas com maior freqüência ficam armazenadas. A informação é

passada então da área de memória de longo prazo ou mesmo da área de memória

de curto prazo para o gerador de respostas, produzindo uma ação, comportamento

ou atitude que modifica o ambiente do sujeito.

21

Quadro 2 - Tipos de aprendizagem Fonte: NUNES (2007 p. 43)

!"

#$%&'()*+',-,./01'2'304,(4,56&7$(084379

!"#$%&'(&)#*(+'",)-(.

É a base da nossa educação e consiste nas infor-mações transmitidas de forma oral ou escrita. Épor meio dela que acessamos, de forma mais di-reta, o conhecimento acumulado por nossa socie-dade, trocamos informações com amigos, cole-gas, familiares, professores, dentro ou fora do con-texto escolar.

São as habilidades que a pessoa desenvolve de do-minar os símbolos (letras, números, desenhos) eutilizá-los para compreender o mundo e responder aeste. O aluno aprende a somar, a transformar escritosem palavras, a promover reações químicas etc., coma utilização dos símbolos.

São as estratégias que o aluno utiliza para apren-der, uma vez que aprender tanto é uma habilidadeintelectual quanto uma estratégia cognitiva. Elasmostram a melhor forma de dar atenção, captar,armazenar e transferir informações.

São as ações direcionadas para uma atividade. Nonosso caso, são as ações tomadas pelo aluno parafavorecer o seu aprendizado. Espera-se que o alunorespeite as regras escolares, preste atenção às au-las, faça as atividades determinadas pelo professor,participe da aula com questionamentos etc. Tais açõessão observadas a partir de modelos (o professor, oscolegas) e são fundamentais para o bom resultado.

São importantes para o ser humano, pois estão pre-sentes na maior parte das suas atividades. Pode-mos utilizá-las quando vamos à escola, quando nossentamos ou movimentamos a cabeça paradirecionar a atenção e, ainda, quando pegamos olápis para escrever. Devemos, é claro, adaptar a ati-vidade às condições motoras do aluno.

Informaçãoverbal

Habilidadesintelectuais

Estratégiascognitivas

Atitude

Habilidadesmotoras

22

Enquanto isso, os processos externos devem ser estímulos para o indivíduo

aprender, sejam eles reforços positivos, incentivo da retenção da informação,

generalização da informação, em que há a aplicação do conceito aprendido, e a

retroalimentação, que reforça os pontos principais do assunto.

• Teoria da Aprendizagem Significativa: Defende a ideia de que o melhor

modo de garantir o aprendizado é através da transmissão de conteúdo significativo.

David Ausubel, seu principal representante, nesta teoria, classifica o aprendizado em

quatro classes:

Por recepção: O aluno recebe de forma pronta o que vai aprender,

realizando apenas a compreensão e assimilação das informações.

Por descoberta: O conteúdo que deve aprender não é transmitido em sua

forma integral, sendo assim, o indivíduo precisa descobrir o complemento da

informação para então fazer a assimilação.

Significativa: O aluno deve receber a informação de uma forma que seja

substancial, atribuindo a ela significado próprio otimizando o entendimento do

conteúdo.• Repetitiva: Ocorre quando o indivíduo não possui conhecimentos prévios

do que deve aprender, ou quando necessita assimilar o conteúdo ao pé da letra.

Para este projeto, as quatro classes de Ausubel serão utilizadas para os diferentes

pontos da matéria.

• Teorias Construtivistas: Tendo como principais representantes Jerome

Bruner (1915); Lev Semenovitch Vigotsky (1896-1934) e Jean Piaget (1896-1980),

essa teoria vê o aluno como um componente ativo para seu próprio desenvolvimento

(FAW, 1981), ganhando conhecimento através de suas ações, pensamentos e

informações obtidas através da experiência (SPODEK 1998, p.73), ou seja, ações

mútuas entre o indivíduo e o meio (CARRETERO, 1997). O construtivismo defende

que o homem não nasce inteligente, ele responde a estímulos externos e organiza

seu conhecimento (Taille, Oliveira e Dantas, 1992) reestruturando o que possuía

com o novo conteúdo adquirido, nunca o substituindo, uma vez que a compreensão

e a aprendizagem são processos ativos, construtivos, generativos e de

reoganização.

Para o psicólogo socialista russo Vygotsky, o aprendizado só pode ocorrer

por meio da chamada mediação social, ou seja, é necessária a utilização de

23

instrumentos psicológicos por duas ou mais pessoas em um processo de interação,

o que Nunes (2007) cita em seu livro Introducão a Psicologia da Aprendizagem que

tal processo cria um sistema externo e social de memória, atenção, comunicação e

consciência, que uma vez dominado, passa a ser interiorizada, modificando o

conteúdo que o indivíduo sabia e sua forma de ver e agir no mundo externo. Piaget,

o principal representante das teorias construtivas, dedicou sua vida a Epistemologia

Genética, do grego epistemo = conhecimento e logia = estudo, uma ciência

entendida como o estudo dos processos de formação do conhecimento lógico,

nascimento e evolução do conhecimento humano - diz que quanto mais complexa a

interação, mais inteligente se torna o indivíduo.

Em sua teoria, o processo cognitivo inteligente é separado em duas

palavras: aprendizagem e desenvolvimento. Segundo Piaget (apud MACEDO,1994,

p.125) “a aprendizagem refere-se à aquisição de uma resposta particular, aprendida

em função da experiência, obtida de forma sistemática ou não”.

Para melhor entender como funciona a construção do conhecimento, deve -

se compreender os seguintes conceitos:

Organização: Deve haver organização no ponto de partida onde ocorrerá a

ação indivíduo-objeto de conhecimento, pois não pode haver adaptação vinda de

uma fonte desorganizada. A adaptação e organização são os processos

indissolúveis do pensamento.

Adaptação: Pode ser definido como um processo dinâmico e contínuo em

que o organismo interage com o meio externo de modo a reconstituir-se. Ela é um

movimento de equilíbrio contínuo entre a assimilação e a acomodação, que são

processos distintos, mas indissociáveis que compõem a adaptação. O indivíduo é

modificado e modificador do meio, partindo disto, observa-se que a adaptação

intelectual constitui-se de um "equilíbrio progressivo entre um mecanismo

assimilador e uma acomodação complementar" (PIAGET, 1982, p. 15).

Assimilação e Acomodação: Processo cognitivo pelo qual uma pessoa

classifica um novo dado perceptual, motor ou conceitual às estruturas cognitivas

prévias (WADSWORTH, 1996). O próprio Piaget (1996, p. 13) define a assimilação

como uma integração à estruturas prévias, que podem permanecer invariáveis ou

são mais ou menos modificadas por esta própria integração, mas sem

descontinuidade com o estado precedente, isto é, sem serem destruídas, mas

24

simplesmente acomodando-se à nova situação. Piaget (1996, p. 18) define como

acomodação: toda modificação dos esquemas de assimilação sob a influência de

situações exteriores (meio) ao quais se aplicam.

Esquema: Conforme Pulaski (1986), é uma estrutura cognitiva, ou padrão de

comportamento ou pensamento, que emerge da integração de unidades mais

simples e primitivas em um todo mais amplo, mais organizado e mais complexo.

Dessa forma, temos a definição que os esquemas não são fixos, pois tornam-se

mais refinados ao longo do tempo. Podemos tomar como base pastas de

documentos de um computador, no início, temos um número pequeno destas

pastas. A cada novo estímulo, tentamos guardá-lo em uma pasta disponível, ou seja,

um esquema existente.

• Andragogia - Malcom Knowles, principal autor de pesquisas sobre o ensino

andragógico, defendeu-a, a princípio, como uma pedagogia voltada aos alunos

adultos, mas ao longo de suas pesquisas, retificou que unindo a pedagogia clássica

e a andragogia, alunos de todas as idades poderiam se beneficiar. Knowles8 (1980,

1990 apud NOGUEIRA, 2004 ), coloca que a andragogia possui cinco bases: de que

o aluno precisa saber o motivo de seu aprendizado, que aprende-se melhor

experimentalmente, que tomam o aprendizado como uma solução de problemas e

que seu aprendizado funciona melhor se os motivos forem internos e possuírem

valor imediato. Sendo assim, para gerar um modelo de aprendizado andragógino, o

autor ressalta que os elementos gerais são:"o estabelecimento do clima, a

aprendizagem autodirigida, o contrato de aprendizagem, a instrução individualizada,

a aprendizagem experiencial, a elaboração do processo de aprendizagem, o auto-

diagnóstico e a auto-avaliação."

3.2 EXPERIÊNCIA DO USUÁRIO

Existente desde os tempos remotos, a experiência do usuário (UX) entende-

se como um conceito que abraça várias áreas, a fim de proporcionar uma melhor

relação entre produtos e usuários, atendendo suas necessidades, otimizado a curva

8 KNOWLES, M. The modern practice of adult education: from pedagogy to Andragogy. Cambridge: Englewood Cliffs, 1980

25

de aprendizado e satisfação (HORVATH, 2010).

Uma boa experiência do usuário engloba uma boa arquitetura da

informação, design de interação, usabilidade, interação homem-computador(IHC),

ergonomia e design de interface (PALUCH, 2006).

3.3.1 Arquitetura da informacão

Definida pela Information Architecture Institute com a arte e a ciência de

organizar e catalogar websites, intranets, comunidades online e software de modo

que a usabilidade seja garantida (IA Institute, 2008), funciona com a contribuição de

diversas disciplinas, como psicologia, ciência da computação, educação, ciências

cognitivas, Design centrado no usuário, Design gráfico, Desenho Industrial, Design

instrucional, sociologia, antropologia, engenharia de software, Web Design,

modelagem de dados, administração de base de dados, interação humano-

computador(IHC), recuperação de informações e ciência da informação (EWING,

MAGNUSON, e SCHANG 9 apud AGNER e SILVA, 2003 p.2).

A arquitetura de informação tem o intuito de fazer com que o usuário tenha o

que deseja no sistema utilizado (MATIOLA, 2012), observando, compreendendo e

atendendo a três variáveis segundo Rosenfeld e Morville (2006 apud SILVA, 2008, p.

4):• Usuários : Suas necessidades, interação com o sistema e público alvo.• Conteúdo: o que e como será apresentado.• Contexto: definir em que situação será utilizado e qual a finalidade do

sistema.

3.3.2 Design de interação

O Design de Interação, um dos componente da experiência do usuário,

colabora com a criação de experiências que otimizem o modo do indivíduo trabalhar

se comunicar e interagir.

9EWING, C., MAGNUSON, E., SCHANG, S. Information Architecture Proposed Curriculum. Texas: University of Texas at Austin: UTIAG, 2001.

26

http://pt.wikipedia.org/w/index.php?title=Information_Architecture_Institute&action=edit&redlink=1

http://pt.wikipedia.org/w/index.php?title=Information_Architecture_Institute&action=edit&redlink=1

Segundo Winograd10 (1997, apud PREECE ET AL, 2005 p.26) o design de

interação é “o projeto de espaços para comunicação e interação humana”.

Preece, Rogers e Sharp (2005 p.26) citam que um bom design de interação

trabalha com objetos familiares ao usuário, possui boa estética, agradável de utilizar,

simples e não requer várias ações para realizar uma tarefa, certificando-se sempre

que, ao focar no usuário, leve em consideração onde o produto será utilizado e por

quem e que atividades estarão realizando ao interagir com ele.

Seu processo inclui quatro atividades básicas:

1. Identificar as necessidades e requisitos.

2. Cumprir tais requisitos através de projetos de design.

3. Construir versões interativas do design, para fazer avaliações.

4. Avaliar o que está sendo construído durante e ao final do processo.

A avaliação é um ponto chave do design de interação, pois o produto deve

ser usável. Tal avaliação gira em torno do usuário e sua experiência com a interface

interativa, cujas maneiras de realizar serão abordados mais a frente.

O design de interação possui metas sempre centradas no usuário, sua

experiência e usabilidade do sistema, ambiente ou produto. Considerando em que

áreas as pessoas possuem habilidades ou não, o que pode auxilia-las na atual

maneira de realizar tarefas, qualificar a experiência do usuário para então projetar

sistemas usáveis, úteis e agradáveis.

3.3.3 Usabilidade

A usabilidade pode ser definida como a “medida na qual um produto pode

ser usado por usuários específicos para alcançar objetivos específicos com eficácia,

eficiência e satisfação em um contexto específico de uso.” (ISO 9241-11), sendo

assim parte essencial para uma boa experiência do usuário e, como cita Nielsen

(1993), permitindo que o usuário controle o ambiente interativo sem esse tornar-se

um obstáculo. Para isso, ela possui cinco elementos básicos:• Intuitividade – O usuário, mesmo sem experiências prévias com o sistema,

10WINOGRAD, T., 1997. From computing machinery to interaction design, In: Beyond Calculation: The Next Fifty Years of Computing, Springer-Verlag

27

deve conseguir interagir com facilidade e satisfatoriamente com o mesmo.• Eficiência – O sistema deve ter um alto nível de produtividade. Caso

contrário, o usuário tende a sentir-se frustrado com o mesmo e abandoná-lo.• Memorização – A interface deve ter fácil memorização, para que mesmo

após um longo tempo sem uso o usuário possa voltar a utilizar o sistema.• Erro – Os erros devem ser os mínimos possíveis, de resolução fácil e

rápida. Erros graves ou insolucionáveis não podem ocorrer. • Satisfação – O sistema deve proporcionar uma interação agradável, sendo

isso medido em testes de usabilidade. Essa característica é de grande importância

em aplicativos educacionais como este projeto.

Segundo Nielsen, deve-se lembrar que os usuários não são designers, ou

seja, não são responsáveis pelo projeto da interface, e embora a customização seja

uma das soluções para questões de má interpretação de elementos, pode gerar

produtos inadequados, afetando a usabilidade. Também deve-se selecionar com

cuidado que elementos farão ou não parte da interface, pois componentes demais

confundem o usuário.

A melhor interface é aquela que não necessita da ferramenta de ajuda para

ser utilizada e embora o desenvolvimento do sistema seja feito de forma a prevenir

equívocos, os usuários possuem um grande potencial de interpretar elementos

interativos de forma errônea (Nielsen,1993), por isso os testes e modificações ao

longo do projeto são indispensáveis.

3.3.4 Interação humano-computador

A interação humano computador (IHC), é um campo de estudo

interdisciplinar que possui como objetivo entender e estudar formas de "aumentar a

compatibilidade entre características comportamentais humanas e o processamento/

representação das informações através do computador” possibilitando que o usuário

possa realizar suas atividades com produtividade e segurança. (ROCHA;

BARANAUSKAS,11 2003 apud GALABO, 2010)

11ROCHA, H. V.; BARANAUSKAS, M. C. C. Design e avaliação de Interfaces Humano-Computador. Campinas, São Paulo: NIED – UNICAMP, 2003

28

A IHC beneficia o sistema, uma vez que aumenta a produtividade; reduz o

número e a gravidade dos erros cometidos pelos usuários; reduz o custo de

treinamento; reduz o custo de suporte técnico; aumenta a satisfação do cliente.

Segundo Barduco (2004), pode-se citar alguns princípios básicos de um

bom design dentro do IHC:

Visibilidade e affordances - Considera necessidades imediatas do usuário,

como precisar de ajuda, e se a mesma está disponível. Quanto ao conteúdo, leva

em conta o que deve ou não estar visível, evitando a poluição visual e confusão do

usuário.

Sendo visibilidade aquela que trata da visualização do que determinado

elemento faz, e affordance da percepção do que o elemento fará, ambos levando em

conta o ponto de vista do usuário.• Bom modelo conceitual - este possibilita que, em uma interação com o

sistema, se possa prever o efeito das ações realizadas.• Bons mapeamentos - Uma boa relação entre os controles e movimentos

com as reações que estes realizam, geralmente aproveitando analogias e padrões

culturais.• Feedback - Informar ao usuário as respostas das ações feitas e seus

resultados.

3.3.5 Ergonomia

Originado das palavras gregas, Ergo (trabalho) e  Nomos (normas, regras), a

ergonomia é o estudo científico que visa melhorar as condições de trabalho em

relação ao homem. Wisner (1972, p.12) “a ergonomia constitui o conjunto de

conhecimentos científicos relativos ao homem e necessários para a concepção de

ferramentas, máquinas e dispositivos que possam ser utilizados com o máximo de

conforto, segurança e eficácia.”

Segundo Silva (1998), tal área procura conhecer como o usuário: percebe a

tarefa a ser executada; interage com a máquina e, processa o conhecimento que

possui, transpondo seu modelo mental para o sistema computacional.

No campo do software, Wisner (1972) define-a como um particular caso de

adaptação do sistema informático a inteligência humana, importando se com sua

29

utilidade (adequar o sistema a tarefa), usabilidade (facilidade de uso) e utilizabilidade

(união de usabilidade e utilidade), adequando principalmente as interfaces à aquilo

que o software deve realizar.

Scapin13(apud SILVA,1998) cita as etapas no processo de definição

ergonômica de interfaces, que serão seguidas neste projeto: identificar

necessidades do sistema; organizar coletas de informações criar conceituações

gerais do sistema; determinar os objetivos e especificações de performances

(exigências, regras) e necessidades e características dos usuários; criar os aspectos

semânticos (definições: dos objetivos e estabelecimento das exigências, dos

organogramas de tarefas, organização das operações em unidades de tarefas, das

estruturas de dados, dos aspectos de segurança e de confidencialidade, obtenção

de consentimento); definir o que o sistema irá fazer (determinar funções de entradas

e saídas); realizar a concepção de base (alocação das funções, processos de

trabalho, análise da tarefa); fazer a concepção das estruturas sintáticas

(comparação das alternativas de apresentação, definir a sintaxe das funções,

preparar formatos de resposta do sistema, desenvolver módulos de diagnóstico de

erros, especificar os tempos de resposta, definir procedimentos de ajuda, avaliar as

especificações, testes experimentais); especificar meios de entrada/saída (toque,

teclado, mouse, modos de designação, periféricos), determinar diálogos, realizar a

concepção das entradas e saídas; facilitar a concepção (criação de manuais e

treinamentos); realizar testes; criar e desenvolver o programa (modularidade,

manutenção...); preparar possíveis evoluções futuras.

3.3.6 Critérios Ergonômicos

Dominique Scapin, em 1990, realizou um estudo que visava organizar os

conhecimentos de ergonomia de interfaces homem-computador. Em 1993, Scapin e

Christian Bastien apresentaram uma lista de critérios ergonômicos, com oito

principais: Condução, Carga de Trabalho, Controle Explícito, Adaptabilidade, Gestão

de Erros, Consistência, Significado dos Códigos e Compatibilidade. Estes ainda são

13 SCAPIN, Dominique L. Organizing Human Factors Knowledge for Evaluation and Design of Interfaces. França: Le Chesnay Cedex, 1990.

30

subdividos em Presteza, Agrupamento por Localização, Agrupamento por Formato,

Feedback, Legibilidade, Concisão, Ações Mínimas, Densidade Informacional, Ações

Explícitas, Controle do Usuário, Flexibilidade, Experiência do Usuário, Proteção

contra erros, Mensagens de Erro, Consistência, Significados e Compatibilidade,

explicado na tabela de critérios ergonômicos em anexo.

Pode-se citar, ainda, algumas recomendações, com ênfase no material

educacional, que Matuzawa (2006, p.80) observa como importantes para manter o

design do sistema agradável e seguindo critérios ergonômicos:• Design da página: manter sempre a simplicidade. O aluno precisa chegar

ao conteúdo de interesse em apenas poucos cliques.• Formatação: manter o equilíbrio entre textos e imagens. Nos textos,

manter informações importantes no canto superior esquerdo da página, utilizando

letras sem serifa, pois possuem maior legibilidade, a tipografia será melhor

abordada no capítulo 5.2 deste projeto. Para quebrar o ritmo, evitando que o texto

fique cansativo, deve-se separar os assuntos por itens. Quanto aos assuntos que

não são diretamente relacionados ao assunto do texto, deve-se utilizar boxes ou

elementos afins. Para a delimitação de grupos de informações, os espaços em

branco são mais adequados do que linhas espessas, que devem ser evitadas.• Uso de cores: Deve-se respeitar os aspectos culturais, evitando, por

exemplo, utilizar o vermelho para informações corretas e o verde para as erradas.

Links são padronizados como azul para não visitados, e vermelho ou roxo para já

visitados. O cansaço visual, falta de contraste e excesso de contraste também

deve ser cuidadosamente evitado. • Tempo de utilização: Deve-se evitar a utilização de elementos pesados, já

que isso compromete a usabilidade, tornando o sistema devagar e aumentando as

chances do usuário desanimar em relação ao estudo e ao sistema. Entretanto,

como cita Schuhmacher (apud Batista, 2008) “toda a atratividade de um ambiente

pode cair quando se tem uma imagem borrada ou de má qualidade”, portanto uma

saída viável seria a utilização de imagens vetoriais, como os formatos .wmf

(Windows metafile), .dwg e .dxf (Autocad), .cdr (Corel Draw) ou .ai (Adobe

Ilustrator).

31

• Janelas pop-up: É necessário ter precaução quanto a utlização de janelas

que se sobrepõe, pois poluem a tela original, confundem o usuário e dificulta sua

administração do sistema.

Os critérios ergonômicos são essenciais para o desenvolvimento de um bom

sistema, o que é de suma importância ao se tratar de um sistema educacional.

3.3.5 Design de interface

O design de interface trata-se do elemento de contato entre usuário e

sistema para a realização de uma determinada tarefa (BRAGA, 2004 p.21), tendo

sempre o usuário como prioridade. PORTER (2011) escreveu uma lista de princípios

do design de interface.• Clareza é o objetivo principal, para a interface ser eficaz e eficiente, deve

permitir que o usuário compreenda seu funcionamento, como ela é útil e como o

sistema vai ajudá-lo. Clareza inspira confiança e cativa o uso.• Interfaces existem para permitir interação, elas não são obras de arte, e

sim existem para que haja a realização de um trabalho, mas elas não devem ser

apenas função, precisam inspirar, mistificar e intensificar a relação usuário e

sistema.• Deve-se prender a atenção do usuário, a interface não deve possuir

elementos que podem causar distração, focando no porque da interface existir. A

atenção é um pré-requisito e deve ser conservada.• O usuário deve manter o controle, a sensação de estar no comando o

mantém confortável. A interface não pode forçá-lo a realizar interações não

planejadas.• O mais indicado ao projetar uma interface é torná-la o mais compacta

possível, com interações diretas do usuário com os objetos do sistema, sem

complicar ações que podem ser simplificadas.• Cada tela deve possuir um objetivo principal, isso irá diminuir a curva de

aprendizado, facilitando a utilização do sistema.• As ações secundárias devem ficar em segundo plano, cada tela possui

seu único objetivo principal, mas muitos secundários. Deve-se manter a hierarquia

32

de ações projetando-as com um visual mais leve ou permitindo sua visualização

apenas após a realização do primeiro objetivo.• Deve-se sempre fornecer o próximo passo, evitando que aquela interação

com o sistema seja a última do usuário. Deve ser colocada de forma natural e

relevante, ajudando-o a atingir seus objetivos.• A forma deve seguir a função. O ser humano tende a sentir que possui um

bom relacionamento com algo quando este comporta-se da forma esperada. Isso

significa que o usuário se sentirá mais confortável com o sistema se puder dizer

como a interface irá se comportar apenas olhando para ela, ou seja, o que se

parece com um botão, deve funcionar como um botão.• Deve-se manter a consistência, nenhum botão deve ser parecido com o

outro a não ser que tenham funções parecidas.• Mantenha uma hierarquia visual forte, para tanto, deve-se criar uma

ordem visual clara para todas as telas, isso assiste o usuário a encontrar as

informações. • Ao desenvolver uma organização inteligente, diminui-se a carga cognitiva,

levando o usuário a entender com maior facilidade a interface. • A cor deve funcionar apenas como suporte ou guiar a atenção, mas nunca

como única caracterização de um elemento, uma vez que pode ser afetada por

ambiente utilizado, tela ou até mesmo uma deficiência visual.• A revelação progressiva mantêm a interação mais clara. A interface deve

mostrar ao usuário apenas aquilo que ele necessita, e caso seja necessário,

oferecer a opção de vizualizar mais informações.• A ajuda deve ser oferecida ao usuário quando ele necessita, como não se

pode adivinhar tais momentos, o design de interface deve certificar que a ajuda

estará lá quando houver necessidade, sem que o usuário deva realizar uma busca

intensa por ela, e que fique fora de seu caminho ao não precisa da mesma.• O estado zero é crucial para a compreensão da interface,ou seja, deve-se

pensar no projeto do estado em que nada aconteceu ainda, o usuário desconhece

o sistema mas deve possuir uma tela inicial que lhe ofereça suporte e orientação

para que desenvolvam as tarefas que precisam.

33

• Os problemas existentes são mais valiosos do que os hipotéticos, por

isso, priorize as dificuldades já conhecidas e projete interfaces que resolvam estes

problemas.• O bom design de interface deve ser silencioso, dessa forma, ao utilizar o

sistema, pode-se concentrar em seus próprios objetivos e não na interface, o que

irá gerar usuários muito mais satisfeitos.• Outras disciplinas devem ser utilizadas como inspiração além do design. • Ao desenvolver uma interface, ela deve ser usável. Não basta a beleza de

uma cadeira se ela for desconfortável. Ela perde o sentido de existir assim que o

usuário desistir de utilizá-la.

3.4 APLICAÇÃO DE CORES

Durante o desenvolvimento do sistema, deve-se priorizar certos elementos

para otimizar a relação da interface com o usuário, o emprego adequado da cor é

muito importante, em especial em materiais educacionais. Ela ajuda em escolhas e

compreensões essenciais do sistema.

Schuhmacher (2007, p.54) cita a teoria de detecção de sinais “Signal

detection theory”, modelo estatístico elaborado na década de 50, onde “o cérebro

humano interpreta e organiza a informação que recebe em forma ótima, quando no

campo visual há um número mínimo de cores e formas: quanto menos “ruído”, mais

claro é o “sinal”.”

Ao definir a paleta cromática, deve-se, ainda, levar em consideração os

seguintes aspectos:• Assunto: do que se trata o produto: instrucional, musical, medicina, etc.• Público-alvo: Em sua maioria são de qual sexo, qual a idade, experiência

de utilização de produtos similares, são homogêneos ou heterogêneos.• Ambiente: grau de estresse do local em que será utilizado, luminosidade.

Para o fundo do ambiente virtual, Schuhmacher (2007 p.57-58) aponta que

este nunca deve chamar mais atenção que a informação, prezando pela menor

utilização de cores, sempre evitando contraste entre elas (a não ser que seja o

objetivo), ou seja, utilizando cores análogas. Caso seja uma imagem, considerar que

34

http://www.scribd.com/doc/21817079/Design-Instrucional-Contextualizado-Alexandre

http://www.scribd.com/doc/21817079/Design-Instrucional-Contextualizado-Alexandre

ela será vista durante o carregamento do sistema, ratificando que aquele não pode

comprometer este, assim como a compreensão e legibilidade.

Schuhmacher resume, as principais recomendações para o uso de cores na

Web. Os dados foram colhidos em Parizotto (1997), Winckler, Borges e Bass(2002),

Robertson (1993) e Schneidermann (2000) e são apresentados no quadro 3.

3.5 TIPOGRAFIA

Quanto a escolha da família tipográfica a ser utilizada, como cita

Schuhmacher (2005, p.222-223) as fontes sem serifas são consideradas “fontes

frias, objetivas e sérias, quase masculinas e são mais usadas na comunicação de

produtos e empresas de base tecnológica, que precisam passar solidez e

credibilidade. Já as fontes com serifas são femininas, delicadas e emocionais.”

Mesmo assim, como cita Filatro (2008 apud BATISTA, 2008, p.181), as

fontes sem serifas são as mais indicadas para materiais digitais, principalmente

educacionais, uma vez que a legibilidade e leiturabilidade, elementos essenciais

para uma satisfatória experiência do usuário, possa ser prejudicada.

Batista(2008), tem-se alguns pontos importantes sobre a tipografia apontados por

autores como Lupton (2006), Schuhmacher (2005) e Filatro (2008) (apud BATISTA,

2008, p.181-182):• Deve-se preservar o espacejamento e o espaçamento da tipografia.• Alinhamento à esquerda sugere estereótipo de leitura no Ocidente, que é

o ponto de partida pelo qual se começa a ler. Os olhos marcam uma margem, há

uma linha inteira de texto, pula para a próxima e, assim, nunca aparecem espaços

em branco nos textos.• Para textos dispostos em colunas, não deve ser usado o alinhamento

justificado. Os espaços em branco criados para preencher as colunas, dificultam a

leitura.• Deve ser usado o alinhamento à esquerda quando se tem mais de uma

coluna de texto.• Textos centralizados são estáticos, são mais usados em folhas de rostos,

convites, títulos.• Os olhos procuram a linha imaginária por onde se começa a leitura pelo

35

Quadro 3 - Recomendações de uso de cores na Web Fonte: Compilação de Schuhmacher (2005, p. 57 - 59)

36

lado esquerdo. Caso não haja uma margem para se apoiar, dificulta a leitura,

portanto não é indicado para textos corridos.• O alinhamento justificado é muito usado para aparências clássicas,

limpas. As linhas são do mesmo tamanho, no entanto, há o inconveniente de

muitos espaços em branco para preenchimento da linha.

A escolha das famílias tipográficas serão discutidas mais a frente,

juntamente com o projeto visual.

37

4 NECESSIDADES DO USUÁRIO

Para dar início ao desenvolvimento do projeto, algumas necessidades do

usuário foram destacadas. Para tanto, desenvolveu-se, no início do desenvolvimento

deste projeto, uma pesquisa com 80 pessoas entre 12 a 50 anos, de ambos os

sexos, através do aplicativo de questionários online do Google, divulgado através de

redes sociais entre conhecidos, sendo, em sua maioria, participantes de

associações nipo-brasileiras dos estados do Paraná, São Paulo, Rio de Janeiro,

Mato Grosso do Sul e Amazonas.

Iniciou-se o questionário com uma pergunta fechada relacionada ao

conhecimento da língua. Obteve-se, como mostra o gráfico 1, um resultado de 51%

de estudantes que já estudou japonês alguma vez, e 49% não. Tornando a pesquisa

equilibrada, pois o sistema é desenvolvido para ambos os públicos, uma vez que,

mesmo quem já teve contato com a língua em sala de aula pode utilizar o aplicativo

para revisar a matéria básica, avançando nas lições em seu próprio ritmo.

% de estudante

Gráfico 1 - índice de estudantes da língua japonesa Fonte: Autoria própria (2013)

De todos os alunos envolvidos na pesquisa, aproximadamente 70%

apresentou interesse em estudar através de um dispositivo móvel, o que demonstra

que o sistema seria bem utilizado desde o início de sua implementação (gráfico 2).

38

!"#$%&'

()*$+,'

% de estudante

! ! Gráfico 2 - índice de interesse em estudos através de dispositivos móveis! ! Fonte: Autoria própria (2013)

Quanto ao tempo era dedicado por dia para o estudo da língua japonesa,

pode-se observar no gráfico 3, a opção mais escolhida foi “por mais de dez minutos

por dia”, seguida de “várias vezes ao dia, por mais de um minuto”. Isso permite o

desenvolvimento de atividades mais longas e que também utilizem da repetição e

explanação para memorização.

% de estudante

Gráfico 3 - Tempo dedicado por dia ao estudo de japonêsFonte: Autoria própria (2013)

Para buscar as necessidades do usuário para o sistema, recolheu-se quais

são as atividades que mais utilizadas para o aprendizado da língua (gráfico 4),

curiosamente, as atividades realizadas comumente em sala de aula foram as

menos escolhidas. As atividades que envolvem a utilização da hipermídia, musicais

e vídeos foram as mais votadas, seguidas por atividades de fala (ressaltando que

não se trata da atividade de listening).

0 7,5 15,0 22,5 30,0

Menos de 10 minutos por diaMais de 10 minutos por diaMais de 30 minutos por diaPor menos de 1 min várias vezes ao diaPor mais de 1 min várias vezes ao diaOutros

39

()*$-.'

!"#$//'

% de estudantes

Gráfico 4 - Atividades mais utilizadas para o estudo de japonêsFonte: Autoria própria (2013)

Entre essas atividades, foi abordado quais atividades mais utilizavam como

complemento para o estudo da língua japonesa, verificando que o desenho animado

japonês é de grande preferência - geralmente visto no idioma oriental com legendas

em português - seguido de músicas japonesas, dados demonstrados do gráfico 5.

% de estudantes

Gráfico 5 - Estilo de atividades mais utilizadas para o estudo de japonêsFonte: Autoria própria (2013)

0 20,0 40,0 60,0 80,0

MúsicalVideosTextoAtividades de listeningEscritaFaladajogosoutro

0 10,0 20,0 30,0 40,0

NenhumaDorama (novela japonesa)AnimeNHK (canal mundial de TV japonês)Filmes em japonês, legendado.Filmes legendados em JaponêsVídeos na internetVídeo-aula de japonêsMúsicas japonesasMangáTextosÁudio das aulasApenas a apostila do curso

40

A habilidade considerada mais importante para os alunos, é a de falar o

idioma, seguida de entender o que escuta (gráfico 6). Com a utilização do sistema,

dando ênfase em falas do cotidiano, o usuário poderá praticar diariamente a fala e

audição do idioma, sem precisar estar em uma sala de aula com o professor.

% de estudante

Gráfico 6 - Importância de habilidadesFonte: Autoria própria (2013)

Como o projeto visa tornar o estudo mais divertido e envolvente, buscou-se

saber o interesse da utilização de jogos no processo de aprendizagem, com

resultados muito positivos (gráfico 6).

% de estudante

Gráfico 7 - Interesse de utilização de jogos Fonte: Autoria própria (2013)

Sobre a interação online durante o processo de aprendizado, os resultados

apontam um bom favoritismo para sua utilização, como mostra o gráfico 8. Como

citado anteriormente, atividades desafiadoras colaboram com o estabelecimento das

redes neurais, e colocar o usuário frente a outro em conversas reais (mesmo por

ambientes virtuais) os envolve e impulsionam a querer aprender mais.

0 17,5 35,0 52,5 70,0

EscritaFalaLeituraAudição

41

()*$.,'

!"#$*0$)!1020((3$,&'

% de estudante

Gráfico 8 - Interesse de interação on-line Fonte: Autoria própria (2013)

Para finalizar a pesquisa, foi realizada uma pergunta aberta sobre que

elementos seriam um bom complemento para o estudo da língua japonesa em um

aplicativo de celular. As repostas colocadas frisaram o fato de que o aluno necessita

de um dicionário de fácil acesso, que possibilite a tradução com contextualização da

palavra, leitura e pronúncia, explicações rápidas, jogos interativos e de

memorização, e finalmente atividades com medidas de desempenho.

Ao reunir opiniões de professores da área, tanto no Brasil quanto no Japão,

observa-se que em ambos países, há técnicas muito similares de ensino-

aprendizagem, tendo como ferramentas mais utilizadas, no início da alfabetização

japonesa e no ensino da língua, as que giram em torno da repetição, cartões de

memorização (flashcard) e exercícios de escrita.

Juntamente com estes dados, desenvolveu-se também uma pesquisa sobre

outros aplicativos voltados ao ensino da língua japonesa.

O aplicativo para a plataforma Android, chamado Kana aborda apenas a

escrita dos dois básicos alfabetos japoneses (hiragana e katakana), o que direciona-

o para o público iniciante. A tela inicial, como mostra a figura 2, apresenta uma

explicação de como utilizar o aplicativo, de forma pouco didática, a falta de concisão

e equilíbrio na formatação - muito texto e apenas duas imagens - impossibilita o

usuário que não entende o idioma inglês de utilizar o aplicativo, que sem essa

explicação fica com suas funções perdidas, uma vez que há pouca intuitividade no

sistema. Uma maneira fácil de resolver tal dificuldade seria um tutorial com mais

42

()*$4+'

!"#$5%'

Figura 2 - Telas iniciais do aplicativo Kana Fonte: Aplicativo Kana (2013)

imagens e menos texto, tornando-o compreensível até para quem não domina esta

língua ou tem dificuldades de leitura.

As telas seguintes (figura 3) já coloca o usuário com os alfabetos, que dão

um feedback de ação correto (os botões mudam de cor ao serem apertados), as

cores de figura e fundo são pastéis e confortáveis ao olhar, com uma cor de fundo

diferente para cada alfabeto, com uma condução por agrupamento adequada, já a

fonte pequena a torna ilegível em telas menores, gerando um problema ergonômico

de legibilidade.

Figura 3 - Telas do aplicativo KanaFonte: Aplicativo Kana (2013)

43

Possui um jogo que possui contagem de pontos (figura 4), para o usuário

escolher qual a leitura correta, ergonomicamente responde com um bom feedback,

separação de ações e assuntos por telas adequado e possui um layout consistente.

Figura 4 - Jogo do aplicativo Kana Fonte: Aplicativo Kana (2013)

Embora seja um aplicativo com uma carga de trabalho facilitadora, não

avança em relação ao conhecimento do usuário, sendo um aplicativo superficial.

O que poderia ser uma de suas melhores qualidades, o fato de ensinar a

pronúncia da letra, acaba falhando pela baixa qualidade do som. Outra grande falha

do aplicativo é a falta de botões para voltar e avançar, e a ausência de títulos que

ajudam o usuário a definir onde está.

O ImiWa, aplicativo para a plataforma IOS de ferramenta concordancer

citado anteriormente, apresenta um design limpo, além de utilizar uma aparência já

familiar ao usuário.

Na tela inicial (figura 5) há um local para pesquisa e uma base que se

mantêm por todas as telas. Elas contêm as cinco opções do aplicativo: dicionário -

com entradas em ideogramas japoneses ou letras romanas-, kanji - com busca

através de leitura, radicais, número de traços, entre outros, baseada no ensino do

Japão-, como favoritos e histórico (figura 7)- e configurações - idiomas de entrada e

saída de dados, informações do aplicativo, tamanho de fonte, escolhas externas de

referência (figura 8).

44

! ! ! Figura 5 - Tela inicial do aplicativo ImiWa Fonte: Aplicativo ImiWa (2013)

Figura 6 - Telas de kanji do aplicativo ImiWa. Fonte: Aplicativo ImiWa (2013)

45

Figura 7 -Tela de listas do aplicativo ImiWaFonte: Aplicativo ImiWa (2013)

Figura 8 - Telas de configuração do aplicativo ImiWa Fonte: Aplicativo ImiWa (2013)

46

O sistema trás a opção de “falar”, para que o usuário também possa aprender

a pronúncia, e a voz pode ser escolhida entre diversas opções nas configurações.

Ergonomicamente adequado, falha no feedback quando a palavra desejada não é

encontrada, deixando um espaço em branco, o que leva o usuário a pensar que o

aplicativo travou ou está processando a informação, como mostra a figura 9.

Figura 9 - Tela de palavra não encontrada do ImiWa Fonte: Aplicativo ImiWa (2013)

Quanto aos aplicativos voltados não apenas para o vocabulário, temos JA

Sensei. Ergonomicamente bom, suas cores, na maioria em tons pastéis, são

confortáveis aos olhos, mas visualmente composto por elementos e alinhamentos

causadores de ruído. Possui ícones adequados e de fácil assimilação, fonte sem

serifa com tamanho adequado para a visualização em celulares. Além de dicionário

de palavras e kanji (ideogramas), oferece lições para aprender os kanas (letras

japonesas), como demonstra a figura 10, um livro de frases úteis em viagens (figura

11), e um jogo de perguntas e repostas (figura 12). Todos eles com leituras em

letras japonesas e romanas, legibilidade adequada. Opções de ouvir e testar a

pronúncia do usuário.

47

Figura 10 - Tela inicial e lições do aplicativo JA Sensei.Fonte: Aplicativo JA Sensei (2013)

Figura 11 - Telas de uso frases úteis do JA Sensei.Fonte: Aplicativo JA Sensei(2013)

48

Figura 12 - Telas de Quiz do aplicativo JA Sensei.Fonte: Aplicativo JA Sensei (2013)

O aplicativo online para IOS Duolingo, ensina alunos de português vários

outros idiomas, embora Japonês não esteja entre eles, foi realizada a análise de

similares pelo sistema ser muito parecido com o que se deseja desenvolver com

este projeto.

Embora pouco conhecido, a pesquisa de opinião disponível nas resenhas da

Apple Store em relação ao Duolingo é muito positiva entre os usuários. Visualmente

preza por uma linguagem limpa, mas pesada devido aos ícones demasiadamente

grandes. A página inicial (figura 12) coloca o usuário diretamente nas lições,

enfatizando o desempenho e status do aluno. Com ícones próprios, deixa a desejar

em relação a assimilação, mas sua estrutura de desbloqueio dos níveis conforme se

prove o conhecimento no assunto anterior é bastante adequada (figura 13).

49

Figura 13 - Tela inicial do aplicativo Duolingo. Fonte: Aplicativo Duolingo (2013)

Figura 14 - Tela de jogos do aplicativo Duolingo. Fonte: Aplicativo Duolingo (2013)

Possuí um feedback excelente no acerto e no erro, indicando a resposta

correta, seja ela de digitação ou construção frasal (figura 15). Cada lição possui um

atalho para o usuário que já possui o conhecimento do assunto tratado, pulando a

lição após algumas atividades. Em caso de abandono do usuário ao aplicativo, uma

mensagem é colocada na tela do aparelho (figura 16), e quando volta-se para as

atividades, uma perda no domínio do conhecimento, demonstrado na figura 17.

Ao analisar os aplicativos mais conhecidos entre os smartphones, nota-se

uma falta de preocupação com o aprendizado do aluno, muitas informações são

50

colocadas a disponibilidade do usuário sem prezar pela melhor didática,

compreensão do conteúdo e memorização a longo prazo. Embora a experiência

social seja de grande importância para os estudantes atualmente, pois incentiva o

aluno no avanço de matérias e melhor desempenho, essas são deixadas de lado

nos aplicativos educativos. Por fim, pode-se ressaltar a ausência de atividades

introduzidas na realidade do usuário, o que contextualiza a utilização do conteúdo

em seu cotidiano.

Figura 15 - Nova palavra, no aplicativo Duolingo.Fonte: Aplicativo Duolingo (2013)

Figura 16 - Feedback, no aplicativo Duolingo. Fonte: Aplicativo Duolingo (2013)

51

Figura 17 - Em caso de abandono de estudos, aplicativo Duolingo.Fonte: Aplicativo Duolingo (2013)

Figura 18 - Perda de conhecimento do usuário, aplicativo Duolingo. Fonte: Aplicativo Duolingo (2013)

52

Com base nos estudos previamente desenvolvidos e análise das

necessidades dos usuários, pode-se definir como necessidades do sistema:• Material focado no usuário, suas experiências e conhecimentos prévios.• Atividades que permitam a distribuição do conteúdo em momentos

adequados e contextualizados, facilitando a compreensão e memorização da

informação, além de demonstrar ao aluno situações reais de uso, colocando o que

foi aprendido em sala de aula no cotidiano do usuário.• Textos, vídeos, som, verbalização trabalhando de forma unida,

potencializando o aprendizado e tornando a atividade mais prazerosa.• Dicionário eletrônico com animações para melhor memorização e

compreensão do vocabulário, e a introdução da ferramenta concordancer, dando

ao aluno exemplos de utilização em frases e situações.• Possibilidade do aluno fazer suas próprias anotações, dando certo

controle sobre o material e observações próprias que otimizem a experiência com

o sistema, tal como possuir a possibilidade de colocar lembretes próprios sobre

vocabulários ou marcações em caso de dúvidas na matéria.• Maior utilização de gráficos, facilitando a compreensão geral do conteúdo

e do sistema, sem leituras longas, exaustivas ou de duplo significado.• Material intuitivo, de fácil memorização e gerador de satisfação.• Ajuda sempre disponível.• Feedback sempre.• Simplicidade na interface e na interação.• Cores que zelam pelo tipo de material, tempo e contexto de utilização para

o conforto do usuário.

53

5 DESENVOLVIMENTO DO APLICATIVO

O conceito do aplicativo desenvolvido neste projeto recebe o nome de

“Keiko Tomodachi”, que em tradução literal significa amigo treino. Também é uma

brincadeira com o nome da autora, Keiko, o que só é possível pois uma mesma

palavra em japonês, quando escrita em ideogramas diferentes, possuem

significados distintos. Optou-se por não utilizar o nome do curso para o qual o

sistema foi projetado por parecer demasiadamente sério e pesado para o aplicativo

em questão.

Para seu desenvolvimento, foi traçada a seguinte diretriz:• Organização do conteúdo a partir do material didático disponibilizado na

apostila “Nihongo Nyumon” do Curso de Línguas Estrangeiras Oyama, dos

capítulos 1 ao 10.• Conceituação do aplicativo, quais serão as ações realizadas.• Estruturação do fluxo de ações e organização do wireframe.• Realização de avaliações junto aos usuários durante o desenvolvimento

do layout.

O Keiko Tomodachi é um aplicativo que funciona sem uma conexão a

internet, mas quando se encontra on-line, abre novas possibilidades de interação de

um usuário com outros.

Para este projeto, foi desenvolvido nas dimensões das telas HVGA

(resolução 480x320 px), presentes em smartphones como alguns modelos da linha

Optimus LG, Motorola Milestone Plus, linha Sansung Galaxy e linha Sony Xperia.

5.1 CONTEÚDO

O conteúdo do aplicativo trata-se de um complemento para a memorização

do que foi passado durante as aulas para os alunos iniciantes de japonês do Curso

de Línguas Estrangeiras Oyama.

Na primeira parte do módulo básico do curso, o aluno aprende três

conteúdos básicos: construções de frases utilizadas no dia-a-dia, vocabulário,

numerais e hiragana (primeiro alfabeto japonês), como apresentado no anexo B.

54

É importante ressaltar que, para o desenvolvimento do aplicativo Keiko

Tomodachi, o estilo de escrita Romaji (passagem para as letras romanas dos

ideogramas japoneses) seguiram o modelo Dewapuro Romaji, que substitui o acento

macron (o traço acima de vogais longas, também substituído por acento trema ou

acento circunflexo), por “vogal+u” ou “vogal+o”. Esse sistema permite que o usuário

escreva no alfabeto romano e seja convertido corretamente pelo alfabeto japonês,

além de não obriga-lo a instalar outros aplicativos de teclados em seu dispositivo

móvel.

5.2 O PROJETO VISUAL

Ao desenvolver o projeto visual, traçou-se três linhas base: o origami -

dobradura de papel - (figura 19), tão conhecido como parte da cultura japonesa, o

teatro Kabuki (figura 20) enquanto construção e suas cores alegres, mas

concomitantemente em tons pastéis.

Figura 19 - Origami. Fonte: Wikimedia (2013)

55

Figura 20 - Referências do Teatro KabukiFonte: Wikimedia (2013)

O público-alvo do projeto, como já citado, envolve os estudantes do Curso

de Línguas Estrangeiras Oyama, de 12 a 50 anos, em que nem todos dominam o

uso de aplicativos de smartphones. Devido a isto, prezou-se por uma interface

facilitadora quanto a navegação, evitando muitas atividades por telas, sejam elas

primárias ou secundárias, desenvolvido para ser utilizado em qualquer local,

priorizando atividades que possam ser realizadas com uma única mão.

Inicialmente, houve o desenvolvimento dos ícones, baseados em

dobraduras de papéis já existentes, e colocados em um grid simples, fundamental

para manter um maior equilíbrio entre eles.

O jogo é representado pelo pião por este ser um dos brinquedos mais

tradicionais no Japão e também conhecido no Brasil, facilitando sua assimilação.

56

Para as ferramentas de configurações, foi utilizado um de seus representantes

usuais, mas escolheu-se o martelo japonês como base do origami. O ícone de lições

trás o kanji de “lição” estampado em sua capa, com uma encadernação manual

estilo oriental (através de fios costurados) que pode ser visto na figura 21, e embora

o padrão tradicional de abertura do mesmo seja ao contrário do ocidental, optou-se

por esse para facilitar na assimilação e criar um layout mais agradável ao olhar,

trazendo equilíbrio ao colocar seus componentes voltados para a parte interna do

layout. Os cartões de memorização (FlashCard), faz alusão a um único papel

dobrado ao meio, demonstrando que contém a mesma informação em suas faces,

como observado na figura 22.

Figura 21 - Encadernação manual japonesa. Fonte: Green Heron Books Arts (2013)

A diagramação da tela inicial (figura 23), ou menu principal, utiliza como

cores principais o amarelo e o marrom, representantes da esteira e da madeira

presentes nas construções tradicionais do teatro kabuki, tal como suas formas com

ângulos retos. Os ícones, assim como a platéia do teatro, aninham-se entre as

estruturas de madeira, e levam cores que são aplicadas em todas as atividades a

eles relacionados, além disso, sua escolha deriva da paleta cromática das pinturas

de máscaras e trajes do kabuki, utilizando apenas as relacionadas a sentimentos

positivos, como o roxo, representante de nobreza e elevação de espirito; verde da

tranquilidade; vermelho da paixão e entusiasmo e azul da alegria.

57

Figura 22 - Desenvolvimento de ícones. Fonte: Autoria própria (2013)

Figura 23 - Tela do menu principal. Fonte: Autoria própria (2013)

58

Para dar maior leveza ao layout, as cores e textura de fundo levam a

delicadeza do papel de arroz, muito utiizado no Japão na prática do shodô (caligrafia

japonesa com pincel e carvão).

As três atividades principais do aplicativo, que seriam as lições, os cartões

de memorização (flashcard) e os jogos, ganham lugar de destaque no menu

principal, facilitando seu acesso. Além disso, ao ser distinguido por nomes, facilita o

caminho para o usuário e diminui a curva de aprendizado.

Na parte superior, foi colocado um dicionário de acesso rápido (figura 24),

que funciona como um pop-up sobre as telas. Ao digitar a busca, o aluno recebe

informações de tradução, exemplos de uso no dia-a-dia, sua escrita em hiragana

(primeiro alfabeto japonês), e caso toque em “mais”, uma curta animação,

colaborando na memorização do vocabulário através de reforço visual e criação de

conceito, as imagens sequenciais, colocadas também nas lições, são imagens .gif,

pois sendo mais leves, carregam com maior velocidade e não ocupam grande

espaço na memória do aplicativo.

Figura 24 - Telas do dicionário.Fonte: Autoria própria (2013)

59

O menu de base, presente não apenas na tela do menu principal, mas em

telas estratégicas, facilitam a navegação, uma vez que o usuário não precisa voltar

ao menu principal todas as vezes. Situa-se na base inferior do aplicativo, como um

facilitador, uma vez que a parte inferior é mais acessível aos dedos do que os

superiores. O atalho do menu principal encontra-se ao meio, à sua esquerda foram

colocadas as atividades mais sérias - configurações e lições - e à direita as mais

lúdicas - flashcard e jogos (ambos de memorização).

Cada área do aplicativo possui sua própria paleta cromática, de acordo com

o ícone pelo qual é representado, isso ajuda o usuário a diferenciar as atividades

umas das outras. Como visto anteriormente, o dicionário possui a paleta principal do

aplicativo em tons de marrom, as que envolvem o menu principal e configurações

possuem uma linguagem visual mais clara e limpa em relação as outras telas (figura

25), as de lições possuem tons azuis (figura 26) , flashcard tons amarelados (figura

27) e jogos tons roxos (figura 28).

Figura 25 - Telas de configurações.Fonte: Autoria própria (2013)

60

Figura 26 - Telas de lições. Fonte: Autoria própria (2013)

Figura 27 - Telas de flash card. Fonte: Autoria própria (2013)

61

Figura 28 - Tela de jogo.Fonte: Autoria própria (2013)

Quanto a família tipográfica escolhida, aplicou-se a Myriad Pro nas letras

romanas, com algumas aplicações da Optima - sendo essas apenas em textos de

tamanho grande - para um layout mais delicado, e Hiragino Kaku Gothic Pro para os

ideogramas (figura 29). Todas essas famílias tipográficas não possuem serifa,

otimizando a legibilidade e leiturabilidade em telas, mas possuem detalhes e curvas

leves e harmoniosas. Sendo a Myriad Pro e Hiragino Kaku Pro fontes com traços de

espessura regular, não perdem em visualização mesmo quando apresentadas em

tamanho pequeno. A Optima, com traços mais finos, colaborando com a quebra de

um visual demasiadamente pesado, uma vez que o layout possui tantos ângulos

retos, como no menu principal.

Figura 29 - Famílias tipográficas.Fonte: Apple Library (2013)

62

5.3 ATIVIDADES DO APLICATIVO

Buscando criar uma maneira mais divertida para os alunos continuarem a

estudar o que aprenderam na sala de aula, mesmo fora dos horários do curso, esse

aplicativo brinca com a idéia de ter um amigo virtual japonês que diariamente manda

mensagens e espera respostas corretas ao longo do dia, colocando em contextos

reais o que foi aprendido, denominado “Modo Keiko Tomodachi” (tradução literal

como “modo amigo”).

Funcionando como um aplicativo secundário enquanto aberto apenas no

“Modo Keiko Tomodachi”, evita o desperdício de bateria rodando apenas como

serviço, e envia “mensagens” de uso cotidiano que o aluno já viu durante as lições,

como “Ohayou goza imasu ” (Bom d ia ) pe la manhã ou “yaoya de

ikimashouka?” (vamos à quitanda?), próximo a hora do almoço, e espera respostas

adequadas do usuário, para que o aluno possa treinar as frases aprendidas de

forma contextualizada a sua realidade.

Tais mensagens, durante o desenvolvimento e programação do aplicativo,

são consideradas como alarmes do próprio aplicativo, não necessitando da conexão

com a internet. Cada notificação que o Keiko Tomodachi envia possuí determinadas

respostas em um banco de dados que irão definir se o usuário está certo ou não.

Figura 30 - Telas do “Modo Keiko Tomodachi”.Fonte: Autoria própria (2013)

63

O usuário pode escolher responder no momento ou deixar para mais tarde.

O tempo de espera (tempo de soneca) é definido nas configurações dentro do

aplicativo (figura 31), com um tempo pré-definido de cinco minutos. O usuário

também poderá fazer definições como desativar o “Modo Keiko Tomodachi”,

determinar horários e atividades de seu cotidiano - dentro daqueles que estão

presentes no vocabulário do modo básico - e definir quais dias da semana sua

atividade se repete. Caso o aluno não o configure de acordo com os horários que

deseja, há pré-definições de atividades como acordar, almoçar, trabalhar, jantar e

dormir. Outras configurações disponíveis são a conexão com a rede social Facebook

- em que os estudantes podem postar suas pontuacões, estar online no bate-bapo

do grupo destinado aos usuários do aplicativo e acessar o conteúdo do mesmo,

abrangendo a interação com outros alunos e professores - e reativar o modo tutorial,

que mostra instruções a serem seguidas quando o usuário utiliza determinada parte

do aplicativo pela primeira vez.

Figura 31 - Telas de configurações.Fonte: Autoria própria (2013)

64

A rede social pode ser acessada através do Modo Online, vizualizado ao

arrastar do toque para a esquerda. O usuário poderá conectar-se também ao canal

no Youtube do aplicativo, onde haverão postagens de pequenos vídeos segregados

por lições. Ao arrastar o toque para a esquerda, o usuário encontra um local

destinado a anotações, onde poderá fazer suas próprias observações de lições,

dúvidas, lembretes e dificuldades, podendo realizar uma busca, caso necessário

(figura 32).

Figura 32 - Telas do modo online e anotações.Fonte: Autoria própria (2013)

Durante as lições, o aluno passa por três tipos de atividades. O primeiro

trata-se se repetição, onde o usuário escuta a pronúncia para então repeti-la,

colaborando com a memorização do vocabulário e ajuste da pronúncia (figura 33).

O segundo estilo, pede a tradução (figura 34). Ressaltando que enquanto a

atividade está aberta, não é possível acessar o dicionário, forçando o aluno a pensar

ou pular a lição, deixando-a para mais tarde.

A terceira lição (figura 35) funciona como o “Modo Keiko Tomodachi”,

pedindo respostas para as frases dadas, mas diferente daquele, possui animações

com reforço visual.

65

Figura 33 - Telas da lição de repetição.Fonte: Autoria própria (2013)

Figura 34 - Telas da lição de tradução. Fonte: Autoria própria (2013)

Figura 35 - Telas da lição de resposta. Fonte: Autoria própria (2013)

66

A atividade de cartões de memorização, chamados de FlashCard (figura 36),

possuem a mesma informação em cada face de seu cartão, mas em idiomas

diferentes. Dessa forma, o aluno deve julgar-se, marcando o acerto ou erro. Quanto

mais acertos tiver de determinado cartão, menos ele irá aparecer na tela. Caso o

cartão seja definido como “errado” ele voltará a aparecer até que a informação seja

memorizada e consequentemente marcada como correta.

Figura 36 - Telas de FlashCardFonte: Autoria própria (2013)

A atividade jogo do aplicativo, como mostrado na figura 37, funciona de

modo semelhante ao FlashCard, disponibilizando ao usuário diversos cartões nos

dois idiomas, japonês e português. Sua finalidade é de unir as cartas com o mesmo

significado, no menor tempo possível, colaborando com a memorização e

incentivando o pensamento rápido.

67

Figura 37 - Tela de jogo. Fonte: Autoria própria (2013)

5.4 MAPA DO APLICATIVO

Direcionado a organização e visualização do projeto, foi desenvolvido um

wireframe juntamente com o layout final, pode ser visualizado na figura 38.

Para melhor compreensão dos fluxos, layouts e funcionalidades, acompanha

este projeto um material de apoio disponível em CD.

68

69

70

71

6 AVALIAÇÕES

As avaliações de interfaces, ressaltando que a elaboração da hipermídia

educativa deve basear-se no objetivo da aprendizagem, no conteúdo a ser

transmitido e quem é o usuário (Ulbricht et al, 2008), tem, para sua realização,

diversos métodos, sendo de grande importância compreender cada um deles para

adequa-los ao melhor momento de uso e finalidade.

As principais diferenças se relacionam a que momento do desenvolvimento

do sistema serão aplicados, técnicas de coleta de informações, tipos de dados

coletados (qualitativos ou quantitativos) e tipo de análise das avaliações, neste

projeto, estudaremos os métodos de avaliações segundo Prates e Barbosa (2003).

6.1 ETAPA DO CICLO DE DESIGN

Quando a avaliação é feita durante o processo de design, é denominada

formativa, (Preece et al., 1994), e acontece antes do código do sistema ser escrito.

Para tal, pode ser utilizado um cenário, storyboard, modelagem conceitual ou

protótipos do sistema. Tem como vantagens o corte de custos desnecessários com

alterações no software e problemas de usabilidade reparados antes do produto

chegar no usuário, que recebe um produto final de melhor qualidade. Já a avaliação

somativa se dá quando o produto já feito é analisado com o intuito de medir a

qualidade do mesmo, verificando se atende aos requisitos pré estabelecidos.

6.2 COLETA DE DADOS

A coleta de dados auxilia no desenvolvimento e qualificação do sistema, e

depende dos recursos disponíveis e o que é preciso saber.

Coleta da opinião de usuários: Geralmente utilizado para medir o nível de

satisfação dos usuários em relação ao sistema, seja sobre a estética e satisfação,

ou dificuldades encontradas durante a utilização do mesmo. As técnicas utilizadas

são questionários e entrevistas, podendo ser pessoalmente, ou por meios de

comunicação como telefone e web, individualmente ou não.

72

Cenários (ou casos de uso): Tem a intenção de diminuir a complexidade da

implementação do sistema através de eliminação de partes desnecessárias. Simula-

se um caminho previamente definido ao usuário dentro do ambiente interativo,

através de maquetes de papel ou prototipagens digitais, facilitando as alterações e

evitando gastos desnecessários. Esse foi o método de coleta de dados utilizada

neste projeto, sendo feito para observar quais elementos eram necessários ou não,

e em que momento o excesso de informação estava confundindo o usuário.

Verbalização simplificada: Este tipo de avaliação resume-se em um usuário

falando em voz alta o caminho e os porquês durante a utilização do sistema,

reconhecendo e evitando elementos que criem interpretações errôneas.

Observação de usuários: Os usuários não conseguem expressar totalmente

sua experiência com o sistema, portanto, a observação do usuário possibilita uma

avaliação dos pontos positivos e negativos durante a interação. Sendo registrada

através de anotações do avaliador, registro de vídeos, áudio, entre outros, pode

acontecer em ambientes do cotidiano, inserindo os elementos de avaliação em

situações do dia-a-dia, ou em laboratórios, em que o avaliador terá mais controle

sobre as variáveis do teste, como tempo de duração, atividades realizadas,

freqüência de dificuldades, número de erros cometidos e preferências do usuário.

Registro de uso: Para superar a necessidade de que o observador e o

usuário estejam juntos por um longo tempo, pode-se fazer registros de uso. Estes

podem ocorrer através de logs - que armazenam em um arquivo as ações

executadas em um sistema-, ou gravações de vídeo da interação sistema-usuário.

Coleta da opinião de especialistas: Caso não haja usuários disponíveis para

avaliação ou o custo para tanto seja elevado, pode-se levar em consideração a

avaliação de especialistas em interação homem-sistema, que irão avaliar as

possíveis dificuldades dos usuários.

Os dados coletados podem ser qualitativos - como problemas encontrados e

sugestões dos usuários - que possibilitam identificar em que áreas e características

encontram-se as dificuldades e erros, ou quantitativos - feitos através de cálculos

estatísticos - utilizados em geral para medir a eficiência e produtividade do sistema,

comparar alternativas de design ou verificar se atingiu as metas estabelecidas.

Após as coletas, os materiais devem passar por análises, que podem ser

preditivas - quando se analisa os dados reunidos pelos especialistas e se prevê

73

possíveis erros e dificuldades-, interpretativa - através dos dados resultantes dos

testes com usuários, o avaliador interpreta os fenômenos ocorridos durante a

interação, sendo esta em ambiente não controlado e sem interferência do avaliador

durante as atividades.

A avaliação deste projeto é formativa e ocorreu por cenários de uso, com

dados qualitativos. Durante o desenvolvimento do layout final, sete integrantes do

grupo de dança contemporânea japonesa Wakaba Yosakoi Soran, foram

interrogados, na Associacão Cultural Nipo-Brasileira de Curitiba-Nikkei Curitiba,

acerca de elementos componentes das telas, fluxo do sistema, o que as

incomodavam e do que sentiam falta. Através disso, algumas alterações foram

realizadas. Entre elas:• O menu e o dicionário eram elementos fixos em todas as telas. Ao

contrário do esperado, não facilitava para o usuário, por muitas vezes

confundindo-os ou tirando sua atenção. Como solução, as telas fixas foram

retiradas, aumentando textos, colaborando com a legibilidade e aumentando a

área de respiro (imagem 39).• As pessoas mais velhas tiveram dificuldades com os tutoriais por escrito

presentes nas telas, portanto, inseriu-se imagens como acompanhamento,

demonstrando onde deveriam tocar para efetuar tais tarefas (imagem 40).• Inclusão de teclas de voltar, uma vez que nem todos os usuários

pensavam em utilizar as teclas de voltar do próprio dispositivo e se sentiam sem

saída.• Alteração das animações, algumas utilizavam apenas uma pessoa e

outras duas, o que leva alguns usuários a entender de forma errônea que

determinados comprimentos não devem ser utilizados se estiverem

acompanhados.• O quadro pop-up do dicionário confunde o usuário, que precisa pensar um

pouco antes de achar a saída. Mas por questões de tempo, essa alteração não foi

realizada.

As avaliações realizadas foram curtas e em geral os usuários não

apresentaram maiores dificuldades enquanto cenário de uso, entretanto, mais

avaliações deveriam ser realizadas em busca de uma total melhoria em quesitos de

usabilidade e melhor experiência do usuário.

74

Figura 39 - Mudança de layout. Fonte: Autoria própria (2013)

Figura 40 - Introdução de imagens no tutorial Fonte: Autoria própria (2013)

75

7 CONCLUSÃO

Com a a tecnologia tão presente, viu-se uma necessidade de aplicá-la

também no ambiente educativo, colocando a importância do design, seja ele de

interface, interação ou instrucional, para a otimização do sistema didático,

colaborando com a experiência do aluno ao aprender.

Muitas pesquisas podem ser desenvolvidas para que se possa melhorar a

relação hipermídias e aprendizagem, aumentando a abrangência e o alcance do

método educativo. Entretanto, pela complexidade do assunto, são necessários

estudos mais aprofundados, com um maior envolvimento de professores de idiomas,

desenvolvedores de aplicativos e os próprios alunos, uma vez que quanto mais o

sistema for centrado no usuário, melhores resultados serão obtidos.

Durante o desenvolvimento do projeto ”Keiko Tomodachi”, pôde-se observar

que poucos aplicativos educativos são realmente centrados no usuário, tendo como

foco o conteúdo a ser apresentado, o que acaba gerando pouco envolvimento dos

alunos com o sistema.

Ao desenvolver um aplicativo com uma interface cujos usuários a

consideram ‘divertida e leve’, notou-se um maior interesse dos mesmos, além de

momentos de diversão através dos gifs e tutoriais animados, resultando na retenção

ou conceituação de palavras novas em poucas utilizações.

Ainda assim, viu-se como dificuldade e uma proposta para trabalhos futuros,

a aplicação de tarefas que realmente sejam incentivadoras e prazerosas aos alunos,

como novas maneiras de envolver mídias que atinjam com mais força o público-alvo

(tais como músicas e desenhos japoneses, também conhecidos como animes) que

poderiam ser melhor exploradas, criando um laço de identificação maior na relação

aluno - material didático, por trazer assuntos de interesse em que há o uso do

conteúdo a ser absorvido.

Outras dificuldades giraram em torno das tecnologias, a programação de

aplicativos e jogos - um assunto pouco abordado durante o curso -, as diferenciadas

resoluções de telas no mercado, que embora possam ser solucionadas através de

definições de porcentagens para cada elemento do layout, podem não apresentar

um resultado final satisfatório a partir desse método, e o orçamento que o projeto

demandaria.

76

Vale observar que os assuntos abordados geram grande interesse, em

especial o UX design, abrindo portas para o desenvolvimento de futuras pesquisas

na área por parte da autora, assim como a necessidade de um aprimoramento de

fatores relacionados ao assunto em todos os sistemas interativos que se tem

contato.

Para finalizar, foi possível, através deste projeto, que utiliza a hipermídia,

design de instrução e UX design para otimizar os estudos da língua japonesa,

constatar e comprovar a importância e o papel do design no desenvolvimento de

aplicativos, abrindo espaço para novas aplicações do ramo, demonstrando a

necessidade de profissionais no mercado atuando nessas áreas.

77

REFERÊNCIAS

ABNT; Associacão Brasileira de Normas Técnicas, ISO 9241-11. Disponível em: < http://www.inf.ufsc.br/~cybis/pg2003/iso9241-11F2.pdf>. Acessado em 16 abr. 2013

AGNER, Luiz; SILVA, Fabio Luiz Carneiro Mourilhe. Uma introdução à arquitetura da informação: conceitos e usabilidade. Rio de Janeiro, 2003. Disponível em: <http://www.agner.com.br/download/artigos/2CIPED_Uma_Introducao_AI.pdf> Acesso em: 7 de fevereiro, 2013

ALAVARCE, Débora Cristina. Elaboração de uma hipermídia educacional para o ensino do procedimento de medida de pressão arterial para utilização em ambiente digital de aprendizagem. Dissertação (Mestrado em Enfermagem na Saúde do Adulto) - Escola de Enfermagem, Universidade de São Paulo, São Paulo, 2007. Disponível em: <http://www.teses.usp.br/teses/disponiveis/7/7139/tde-12062007-093304/>. Acesso em: 18 nov. 2012

BATISTA, Márcia Luiza França da Silva. Design Instrucional: uma abordagem do design gráfico para o desenvolvimento gráfico para o desenvolvimento de ferramentas de suporte à Educação a de ferramentas de suporte à Educação Distância. Bauru, 2008. Disponível em:< http://www4.faac.unesp.br/posgraduacao/design/dissertacoes/pdf/marcia_batista.pdf> Acesso em: 12 mai 2013

BARDUCO, Eliane Cristina. O uso de IHC em ensino a distância. n:II Congreso Online del Observatorio para la CiberSociedad. Espanha, 2004. Disponível em : <http://br.monografias.com/trabalhos/ferramentas-ead-ihc-ensino-distancia/ferramentas-ead-ihc-ensino-distancia.shtml#_Toc13632994> Acesso em: 19 de mai, 2013

BRAGA, Alexandre Santaella. Design de Interface. As origens do design e sua influência na produção da hipermídia. Dissertação (Mestrado em Comunicação e Semiótica). Pontifícia Universidade Católica de São Paulo, São Paulo, 2004. Disponível em: <http://www.pucsp.br/~braga/dissertacao.pdf> Acesso em 18 nov. 2012.

CLARK, D. (1995). Why Instructional System Design? 2010. Disponível em:http://www.nwlink.com/~donclark/hrd/sat1.html> Acesso em: 16 jan. 2013

FAW, Terry. Psicologia do Desenvolvimento: infância e adolescência. São Paulo: Ed. MCGraw-Hill do Brasil, 1981

78

http://www.inf.ufsc.br/~cybis/pg2003/iso9241-11F2.pdf

http://www.inf.ufsc.br/~cybis/pg2003/iso9241-11F2.pdf

http://www.agner.com.br/download/artigos/2CIPED_Uma_Introducao_AI.pdf

http://www.agner.com.br/download/artigos/2CIPED_Uma_Introducao_AI.pdf

http://www.teses.usp.br/teses/disponiveis/7/7139/tde-12062007-093304/




http://www4.faac.unesp.br/posgraduacao/design/dissertacoes/pdf/marcia_batista.pdf




http://br.monografias.com/trabalhos/ferramentas-ead-ihc-ensino-distancia/ferramentas-ead-ihc-ensino-distancia.shtml#_Toc13632994




http://www.pucsp.br/~braga/dissertacao.pdf

http://www.pucsp.br/~braga/dissertacao.pdf

http://www.nwlink.com/~donclark/hrd/sat1.html




FILATRO. Andrea, Design instrucional contextualizado. Educação e tecnologia. São Paulo: Editora Senac São Paulo, 2003.

______. Design instrucional contextualizado. In:Planejamento, design, implementação e avaliação de programas de educação on-line. Escola de Saúde Pública do Governo do Paraná. Paraná, 2007. Disponível em: <http://pt.calameo.com/read/00010354767e41047fa8e>. Aceso em 16 jan. 2013

GALABO, Rosendy J. F. Ergonomia Informacional e IHC. História, Conceitos e Heurísticas de Nielsen. Universidade federal do Maranhão, São Luiz. 2010. Disponível em:<http://www.sl ideshare.net/RosendyJessGalabo/interao-humanocomputador-13107408>. Acesso em 12 mai. 2013

HIRATSUKA, Tei Peixoto. Contribuições da Ergonomia e do Design na Concepção de Interfaces Multimídia. Dissertação (Mestrado em Engenharia da Producão) Universidade Federal de Santa Catarina,Florianópolis, 1996. Disponível em: < http://www.eps.ufsc.br/disserta96/tei/index > Acesso em 18 nov. 2012

HORVARTH, Eduardo. What the hell is UX?. São Paulo, 2012. Disponível em: < http://www.dclick.com.br/2010/10/29/what-the-hell-is-ux/>. Acesso em15 abr. 2013

IA INSTITUTE. O Que É Arquitetura De Informação? 2008. Disponível em:< http://iainstitute.org/pt/translations/o_que_e_arquitetura_de_informacao.php> Acesso em: 12 de fevereiro, 2013

INACIO, Sandra Regina. A Importância da Neurociência na Aprendizagem e Educação. São Paulo, 2008. Disponível em: <http://www.artigos.com/artigos/humanas/educacao/a-importancia-da-neurociencia-na-aprendizagem-e-educacao.-5206/artigo/#.Uf6ME2TwLcE>. Acesso em 15 abr. 2013LÉVY, Pierre. As tecnologias da inteligência. O futuro do pensamento na era da informática. Rio de Janeiro: Editora 34, 1993.

MACEDO, Lino de. Ensaios Construtivistas. São Paulo: Casa do Psicólogo, 1994

MATIOLA, Willian . O que é arquitetura da informação, 2012. Disponível em: < http://chocoladesign.com/o-que-e-arquitetura-de-informacao> Acesso em: 26 de janeiro, 2013

MATUZAWA, Flavia Lumi; SCHUHMACHER, Vera Niedersberg .Usabilidade em ambientes virtuais de aprendizagem: livro didático. Palhoça: UnisulVirtual, 2007.

79

http://pt.calameo.com/read/00010354767e41047fa8e




http://www.slideshare.net/RosendyJessGalabo/interao-humanocomputador-13107408




http://www.eps.ufsc.br/disserta96/tei/index

http://www.eps.ufsc.br/disserta96/tei/index

http://www.dclick.com.br/2010/10/29/what-the-hell-is-ux/

http://www.dclick.com.br/2010/10/29/what-the-hell-is-ux/

http://iainstitute.org/pt/translations/o_que_e_arquitetura_de_informacao.php




http://www.artigos.com/artigos/humanas/educacao/a-importancia-da-neurociencia-na-aprendizagem-e-educacao.-5206/artigo/#.Uf6ME2TwLcE






http://chocoladesign.com/o-que-e-arquitetura-de-informacao




Disponível em:<http://busca.unisul.br/pdf/88286_Vera.pdf>. Acesso em: 21 mai. 2013

NEGROPONTE, Nicholas. A vida digital. São Paulo: Companhia das Letras, 1995

NIELSEN, Jakob. Usabilty Engineering, São Francisco: Academic Press, 1993

NOGUEIRA, Sonia Marios. A andragogia: que contributos para a prática educativa? Florianópolis, Vol.5, No 2, 2004. Disponível em:<http://www.periodicos.udesc.br/index.php/linhas/article/view/1226> Acesso em 15 abr. 2013

NUNES, André L. V. Introdução à Psicologia da Aprendizagem. Aracaju: Cesad-UFS, 2007.

PALUCH, Kimmy. What Is User Experience Design. Boston, 2006. Disponível em:<http://www.montparnas.com/articles/what-is-user-experience-design/> Acesso em 15 abr. 2013

PORTER, Joshua. Princípios do Design de Interfaces. Cambridge, 2011. Disponível em:<http://www.uxdesign.blog.br/design-de-interfaces/principios-do-design-de-interfaces/> Acesso em: 21 mai. 2013

PRATES, Raquel Oliveira; BARBOSA, Simone Diniz. Junqueira. Usabilidade Anotaçoes de Avaliação de Interfaces de Usuário – Conceitos e Métodos. Minas Gerais. Disponível em:<http://homepages.dcc.ufmg.br/~rprates/ge_vis/cap6_vfinal.pdf> Acesso em: 23 nov. 2012

PREECE, Jennifer; ROGERS, Ivone; SHARP, Helen. Design de Interação: Além da Interação Humano-Computador. Porto Alegre: Bookman, 2005

PIAGET, Jean. O Nascimento da inteligência na criança. Rio de Janeiro: Zahar editores, 1982

PULASKI, Mary Ann Spencer. Compreendendo Piaget. Rio de Janeiro : Livros Técnicos e Científicos, 1986.

SILVA, Cassandra Ribeiro de Oliveira e. Bases pedagógicas e ergonômicas para concepção e avaliação de produtos educacionais informatizados. Dissertação

80

http://busca.unisul.br/pdf/88286_Vera.pdf

http://busca.unisul.br/pdf/88286_Vera.pdf

http://www.periodicos.udesc.br/index.php/linhas/article/view/1226




http://www.montparnas.com/articles/what-is-user-experience-design/

http://www.montparnas.com/articles/what-is-user-experience-design/

http://www.uxdesign.blog.br/design-de-interfaces/principios-do-design-de-interfaces/




http://homepages.dcc.ufmg.br/~rprates/ge_vis/cap6_vfinal.pdf




(Mestrado em Engenharia da Producão) Universidade Federal de Santa Catarina,Florianópolis, 1998. Disponível em:<http://www.eps.ufsc.br/disserta98/ribeiro/> Acesso em: 28 jan. 2013

SILVA, Patrícia Maria da.; Dias, Guilherme Ataíde. A arquitetura da informação centrada no usuário: estudo do website da Biblioteca Virtual em Saúde.Encontros Bibli: revista eletrônica de biblioteconomia e ciência da informação, Santa Catarina, v 13, No 26, 2008. Disponível em: <https://periodicos.ufsc.br/index.php/eb/article/view/1518-2924.2008v13n26p119>. Acesso em: 12 de fevereiro, 2013

SOUZA, Delmar Carvalho de. Hipermídia aplicada ao ensino técnico de nível médio. Dissertação (Mestrado em Engenharia da Producão) Universidade Federal de Santa Catarina,Florianópolis, 1998. Disponível em:< http://www.eps.ufsc.br/disserta98/delmar/> Acesso em: 16 de abril, 2013

SOUZA, Patrícia Nora de. A hipermídia como uma ferramenta de ensino: uma revisão da literatura sobre o aprendizado implícito e explícito de vocabulário em língua estrangeira. Juíz de Fora: Linguagem & Ensino, Pelotas, v.11, n.1, p.101-124, jan./jun. 2008. Disponível em:<http://www.rle.ucpel.tche.br/index .php/rle/article/download/128/97> Acesso em: 14 mai. 2013

SPODEK, Bernard; SARACHO, Olivia N. Ensinando crianças de três a oito anos. Porto Alegre: Artmed, 1998

SCHUHMACHER, Vera Niedersberg. Comunicação visual e Comunicação visual para web. Palhoça: UnisulVirtual, 2005. GLENN, Bernice T.; CHIGNELL, Mark H.Hypermedia: Design for Browsing. Advances in human-computer interaction. New Jersey: Ablex Publishing Corporation, 1992.

TAILLE, Yves de La, Piaget, Vygotsky e Wallon- Teorias psicogenéticas em discussão. São Paulo: Summus, 1992

WADSWORTH, Barry. Inteligência e Afetividade da Criança. São Paulo: Ed São Paulo, 1996

WISNER, Alain. Por dentro do trabalho: ergonomia : método & técnica. São Paulo: FTD, 1987. 189 p

81

http://www.eps.ufsc.br/disserta98/ribeiro/




https://periodicos.ufsc.br/index.php/eb/article/view/1518-2924.2008v13n26p119




http://www.eps.ufsc.br/disserta98/delmar/




http://livepage.apple.com/




GLOSSÁRIO

Affordances: Conjunto das características de um objeto capazes de revelar aos seus usuário as operações e manipulação que podem fazer com ele (NORMAN, 1988).

Concordancer: Ferramenta de estudo que permite a busca de exemplos de uso, classificação, significado e outras informações de vocábulos.

Hiragana: Ideogramas que constituem o primeiro alfabeto japonês, pois geralmente é ensinado no início do aprendizado do idioma.

Katakana: Ideogramas que constituem o segundo alfabeto japonês, geralmente utilizado em palavras estrangeiras.

Kanji: Constituem o terceiro alfabeto japonês. Mais complexo, pode possuir mais de uma leitura por ideograma, sendo que cada um destes possui um significado, e não apenas um fonema.

Kabuki: Teatro tradicional japonês que teve seu início no século XVII. Pode ser traduzido ao pé da letra como canto, dança e habilidade. Nessa arte, os atores utilizam máscaras e trajes coloridos carregados de significados, com grande e constante interação com o público.

Listening: Atividade largamente utilizada para aprender uma segunda língua, em que o aluno escuta um arquivo de som e escreve ou responde o que foi dito.

82

ANEXOS

Anexo A - Tabela de critérios ergonômicos, adaptado de ErgoList.C

ritér

io e

rgon

ômic

oD

ivis

ãoSu

bdiv

isão

Rec

omen

daçõ

es

Den

sida

de In

form

acio

nal:

Rel

ativ

o a

carg

a de

trab

alho

do u

suár

io d

e po

nto

de v

ista

cogn

itivo

e p

erce

ptiv

o, o

u

seja

, dev

e-se

evi

tar q

ue e

le

rece

ba u

ma

dens

idad

e de

info

rmaç

ões m

uito

alta

ou

mui

to b

aixa

, aum

enta

ndo

a

prob

abili

dade

de

erro

s por

desc

onhe

cim

ento

ou

conf

usão

, nem

forç

ar a

mem

oriz

ação

de

açõe

s ou

proc

edim

ento

s par

a re

aliz

ar

as ta

refa

s des

ejad

as.

Con

trole

Exp

lícito

:

Ref

eren

te ta

nto

ao

proc

essa

men

to e

xplic

ito d

o

sist

ema,

qua

nto

ao c

ontro

le

expl

icito

que

o u

suár

io p

ossu

i

sobr

e el

e. S

e um

com

ando

se

real

iza

após

alg

um c

oman

do

mui

to c

laro

par

a o

usuá

rio,

este

vai

ent

ende

r mel

hor

com

o ac

onte

ce o

_

_

• For

nece

r ape

nas d

ados

nec

essá

rios e

util

izáv

eis.

• Os d

ados

não

dev

em p

reci

sar s

er tr

aduz

idos

.

• Não

faze

r o u

suár

io le

mbr

ar d

e da

dos e

xato

s de

uma

tela

par

a

outra

.

Açõ

es E

xplíc

itas d

o U

suár

io :

Rel

ativ

o ao

pro

cess

amen

to d

as a

ções

do u

suár

io e

seus

resu

ltado

s no

sist

ema

inte

rativ

o. T

ais r

esul

tado

s

deve

m a

cont

ecer

ape

nas a

pós o

usuá

rio so

licita

r.

_

• Faç

a ne

cess

ário

que

o u

suár

io te

cle

um E

NTE

R e

xplíc

ito p

ara

que

um p

roce

ssam

ento

oco

rra.

• Se

a se

leçã

o fo

r atra

vés d

e cu

rsor

, faç

a a

ativ

ação

em

doi

s

pass

os, a

pont

amen

to (

posi

cion

ar o

cur

sor)

e e

ntão

um

a en

trada

expl

ícita

de

cont

role

.

• Ao

real

izar

um

a en

trada

de

com

ando

do

usuá

rio, e

le d

eve

tecl

ar

ENTE

R o

u si

mila

r apó

s a e

diçã

o.

83

Crit

ério

erg

onôm

ico

Div

isão

Subd

ivis

ãoR

ecom

enda

ções

sobr

e el

e. S

e um

com

ando

se

real

iza

após

alg

um c

oman

do

mui

to c

laro

par

a o

usuá

rio,

este

vai

ent

ende

r mel

hor

com

o ac

onte

ce o

func

iona

men

to d

o am

bien

te

inte

rativ

o.

Ada

ptab

ilida

de:

Ref

eren

te a

cap

acid

ade

do

sist

ema

reag

ir co

nfor

me

o

cont

exto

, nec

essi

dade

s e

pref

erên

cias

do

usuá

rio.

Ada

ptab

ilida

de (c

ontin

uaçã

o)

Con

trole

do

Usu

ário

Rel

ativ

o ao

con

trole

con

stan

te q

ue o

usuá

rio d

eve

ter s

obre

o si

stem

a (e

x.:

inte

rrom

per,

canc

elar

, sus

pend

er e

cont

inua

r), s

endo

que

est

e de

ve

ofer

ecer

as o

pçõe

s par

a ca

da a

ção

poss

ível

.

_

• O u

suár

io d

eve

cont

rola

r o ri

tmo

de su

as e

ntra

das d

e da

dos,

não

o co

mpu

tado

r ou

fato

res e

xter

nos.

• O c

urso

r só

pode

ser m

ovid

o at

ravé

s do

cont

role

do

usuá

rio

(exc

eto

em p

roce

dim

ento

s est

ávei

s e c

onhe

cido

s)

• Dar

ao

usuá

rio o

con

trole

de

para

r ou

canc

elar

um

pro

cess

o em

anda

men

to

• For

nece

r um

a op

ção

para

vol

tar a

o es

tado

ant

erio

r, ap

agan

do

qual

quer

mud

ança

real

izad

a.

Flex

ibili

dade

:

Rel

ativ

o a

tudo

que

per

mite

o u

suár

io

a pe

rson

aliz

ar su

a in

terf

ace,

que

o

ajud

e a

real

izar

a ta

refa

des

igna

da. É

impo

rtant

e ob

serv

ar q

ue ta

l lib

erda

de

do u

suár

io d

eve

ser l

imita

da, e

vita

ndo

gera

r mai

s difi

culd

ades

de

usab

ilida

de

dent

ro d

o si

stem

a.

_

• Qua

ndo

houv

er e

xigê

ncia

s im

prec

isas

par

a o

usuá

rio, f

orne

ça

mei

os p

ara

que

ele

poss

a co

ntro

lar c

onfig

uraç

ões d

e te

la.

• Qua

ndo

houv

er a

ções

tem

pora

riam

ente

invá

lidas

, for

neça

ao

usuá

rio a

pos

sibi

lidad

e de

des

ativ

á-la

s.

• Qua

ndo

houv

er v

alor

es p

adrõ

es p

ré-d

efin

idos

, for

neça

ao

usuá

rio a

pos

sibi

lidad

e de

mud

ar, d

efin

ir ou

del

etá-

los.

• Per

mita

a q

ue o

usu

ário

mud

e a

orde

m d

a en

trada

de

dado

s, de

acor

do c

om su

a pr

efer

ênci

a.

• Per

mita

que

o u

suár

io sa

lve

suas

pré

-def

iniç

ões.

• Per

mita

de

o us

uário

nom

eie

os c

ampo

s de

dado

s que

ele

cria

.

84

Crit

ério

erg

onôm

ico

Div

isão

Subd

ivis

ãoR

ecom

enda

ções

Car

ga d

e Tr

abal

ho:

Ref

eren

te a

todo

s os

elem

ento

s qu

e irã

o co

labo

rar

para

min

imiz

ar a

car

ga d

e

traba

lho

do u

suár

io e

aum

enta

r seu

diá

logo

com

o

sist

ema.

Car

ga d

e Tr

abal

ho:

Ref

eren

te a

todo

s os

elem

ento

s qu

e irã

o co

labo

rar

para

min

imiz

ar a

car

ga d

e

traba

lho

do u

suár

io e

aum

enta

r seu

diá

logo

com

o

sist

ema.

Bre

vida

de:

Rel

ativ

o à

dim

inui

ção

da c

arga

de

traba

lho

de le

itura

s e

entra

das,

ass

im

com

o a

limita

ção

de p

asso

s pa

ra s

e

efet

uar u

ma

ação

.

Con

cisã

o:

A c

onci

ssão

trat

a so

bre

min

imiz

ar

as e

ntra

das

que

o us

uário

nec

essi

ta

faze

r, de

ssa

form

a, m

enos

err

os e

le

pode

rá c

omet

er.

A d

imin

uiçã

o de

text

os,

faz

a le

itura

mai

s rá

pida

e

men

os c

ansa

tiva.

Por d

efin

ição

, a C

onci

são

não

diz

resp

eito

às

men

sage

ns d

e er

ro e

de

feed

back

.

• Util

izar

títu

los

cent

raliz

ados

.

• Util

izar

cai

xa a

lta n

os ró

tulo

s.

• Man

ter o

cur

sor d

istin

to d

e ou

tros

itens

.

• Qua

nto

ao e

spaç

o pa

ra te

xtos

, util

izar

pou

cas

linha

s lo

ngas

e

não

mui

tas

linha

s cu

rtas,

util

izan

do a

o m

enos

50

cara

cter

es p

or

linha

.

• A ju

stifi

caçã

o à

dire

ita d

eve

ser e

mpr

egad

a, d

esde

que

pos

sa s

er

obtid

a po

r esp

açam

ento

, man

tend

o di

stân

cias

con

stan

tes

e

cons

iste

ntes

ent

re a

s pa

lavr

as e

seu

s ca

ract

eres

.

• Evi

tar a

util

izaç

ão d

e hí

fens

, man

tend

o as

pal

avra

s in

teira

s.

Bre

vida

de:

Rel

ativ

o à

dim

inui

ção

da c

arga

de

traba

lho

de le

itura

s e

entra

das,

ass

im

com

o a

limita

ção

de p

asso

s pa

ra s

e

efet

uar u

ma

ação

.

Açõ

es m

ínim

as:

Dim

inui

r pas

sos

para

real

izar

um

a

ação

faci

lita

a ut

iliza

ção

do

sist

ema,

redu

zind

o a

prob

abili

dade

de e

rros

.

• Ao

utili

zar c

ódig

os m

uito

long

os, u

se a

brev

iaçõ

es.

• Per

mita

que

o u

suár

io re

aliz

e en

trada

de

dado

s su

cint

as.

• Qua

ndo

há u

ma

unid

ade

pré

defin

ida

no c

ampo

, inc

lua-

a no

cam

po d

e da

dos,

ao

invé

s de

faze

r o u

suár

io d

igitá

-la.

85

Crit

ério

erg

onôm

ico

Div

isão

Subd

ivis

ãoR

ecom

enda

ções

Con

duçã

o:

Ref

eren

te a

os e

lem

ento

s que

serv

em p

ara

orie

ntar

,

acon

selh

ar, i

nfor

mar

e

cond

uzir

o us

uário

, com

o

alar

mes

e m

ensa

gens

.

Con

duçã

o (c

ontin

uaçã

o)

Con

duçã

o:

Ref

eren

te a

os e

lem

ento

s que

serv

em p

ara

orie

ntar

,

acon

selh

ar, i

nfor

mar

e

cond

uzir

o us

uário

, com

o

alar

mes

e m

ensa

gens

.

Con

duçã

o (c

ontin

uaçã

o)

Con

duçã

o:

Ref

eren

te a

os e

lem

ento

s que

serv

em p

ara

orie

ntar

,

acon

selh

ar, i

nfor

mar

e

cond

uzir

o us

uário

, com

o

alar

mes

e m

ensa

gens

.

Con

duçã

o (c

ontin

uaçã

o)

Pres

teza

:

Rel

ativ

o a

os m

eios

que

ass

iste

m o

usuá

rio a

real

izar

as a

ções

cor

reta

s,

dem

onst

rar a

ltern

ativ

as d

ispo

níve

is

dent

ro d

a m

esm

a, e

em

que

est

ado

ou

cont

exto

ele

se e

ncon

tra.

_

• Con

duzi

r a e

ntra

da a

dequ

ada,

indi

cand

o o

form

ato

que

deve

ser

usad

o (e

x.: _

_/__

/__)

.

• Mos

trar a

o us

uário

que

uni

dade

s de

med

ida

deve

m se

r usa

das

ao d

igita

r ( c

m, m

m, m

).

• Ind

icar

o e

stad

o de

inte

raçã

o.• Q

uand

o o

cam

po fo

r lim

itado

, ind

icar

seu

tam

anho

.• I

nfor

mar

um

rótu

lo p

ara

cada

cam

po d

e da

do a

ser p

reen

chid

o (e

x.: "

nom

e" "

data

de

nasc

imen

to")

• Dar

info

rmaç

ões s

uple

men

tare

s no

rótu

lo, q

uand

o ne

cess

ário

.• D

ar tí

tulo

s par

a as

jane

las.

• For

nece

r orie

ntaç

ão a

o us

uário

e a

juda

onl

ine.

Agr

upam

ento

/Dis

tinçã

o de

Iten

s:

Rel

ativ

o a

orga

niza

ção

visu

al d

os

itens

de

info

rmaç

ão, o

s rel

acio

nand

o

por o

rdem

alfa

bétic

a, h

iera

rqui

a de

uso,

cla

sses

, ent

re o

utro

s.

Isso

aju

da o

usu

ário

a e

ncon

trar o

s

itens

des

ejad

os, e

mel

hora

o

apre

ndiz

ado

e re

cupe

raçã

o de

iten

s

dent

ro d

o si

stem

a.

Agr

upam

ento

por

Loc

aliz

ação

:

O p

osic

iona

men

to d

os it

ens p

ode

ser r

ealiz

ado

de a

cord

o co

m su

a

loca

lizaç

ão, p

or e

xem

plo,

mai

s

• Org

aniz

ar it

ens p

or h

iera

rqui

a

• Org

aniz

ar o

pçõe

s de

diál

ogo

em fu

nção

dos

obj

etos

a q

ue se

aplic

am.

• Org

aniz

ar, q

uand

o vá

rias o

pçõe

s são

dis

post

as, d

e fo

rma

func

iona

l, re

leva

nte

e si

gnifi

cativ

a

Agr

upam

ento

/Dis

tinçã

o de

Iten

s:

Rel

ativ

o a

orga

niza

ção

visu

al d

os

itens

de

info

rmaç

ão, o

s rel

acio

nand

o

por o

rdem

alfa

bétic

a, h

iera

rqui

a de

uso,

cla

sses

, ent

re o

utro

s.

Isso

aju

da o

usu

ário

a e

ncon

trar o

s

itens

des

ejad

os, e

mel

hora

o

apre

ndiz

ado

e re

cupe

raçã

o de

iten

s

dent

ro d

o si

stem

a.

Agr

upam

ento

por

form

ato:

O p

osic

iona

men

to d

os it

ens p

ode

ser r

ealiz

ado

por f

orm

ato,

com

o

um la

yout

par

a aç

ões d

e

voca

bulá

rio e

out

ro p

ara

letra

s.

• Org

aniz

ar it

ens p

or h

iera

rqui

a

• Org

aniz

ar o

pçõe

s de

diál

ogo

em fu

nção

dos

obj

etos

a q

ue se

aplic

am.

• Org

aniz

ar, q

uand

o vá

rias o

pçõe

s são

dis

post

as, d

e fo

rma

func

iona

l, re

leva

nte

e si

gnifi

cativ

a

86

Crit

ério

erg

onôm

ico

Div

isão

Subd

ivis

ãoR

ecom

enda

ções

Ges

tão

de e

rros

Rel

acio

nada

a to

dos

os

mec

anis

mos

que

ass

ista

m o

usuá

rio a

evi

tar,

redu

zir e

corr

igir

erro

s. G

eral

men

te

rela

cion

adas

a e

rros

de

digi

taçã

o ou

form

atos

de

entra

da d

e da

dos

invá

lidos

.

Ges

tão

de e

rros

Rel

acio

nada

a to

dos

os

mec

anis

mos

que

ass

ista

m o

usuá

rio a

evi

tar,

redu

zir e

corr

igir

erro

s. G

eral

men

te

rela

cion

adas

a e

rros

de

digi

taçã

o ou

form

atos

de

entra

da d

e da

dos

invá

lidos

.

Ges

tão

de e

rros

Rel

acio

nada

a to

dos

os

mec

anis

mos

que

ass

ista

m o

usuá

rio a

evi

tar,

redu

zir e

corr

igir

erro

s. G

eral

men

te

rela

cion

adas

a e

rros

de

digi

taçã

o ou

form

atos

de

entra

da d

e da

dos

invá

lidos

.

Prot

eção

con

tra o

s er

ros:

Ref

ere-

se a

os m

ecan

ism

os q

ue

prev

inem

err

os d

e en

trada

s de

dad

os

ou a

ções

que

pos

sam

com

prom

eter

o

sist

ema.

_

• Pos

sibi

litar

que

se

poss

a m

odifi

car c

oman

dos

dura

nte

sua

digi

taçã

o.

• Pos

sibi

litar

que

, ao

verif

icar

um

err

o de

dig

itaçã

o, o

usu

ário

poss

a ed

itar a

pena

s a

parte

equ

ivoc

ada,

sem

com

prom

eter

o b

loco

inte

iro.

• Pos

sibi

litar

que

o u

suár

io e

fetu

e ed

içõe

s de

cor

reçã

o de

digi

taçã

o em

qua

lque

r mom

ento

que

not

ar o

err

o.

• Dis

poni

biliz

ar u

ma

expl

icaç

ão d

e bo

tões

efe

tivos

par

a a

ação

corr

ente

, cas

o o

usuá

rio a

perte

um

bot

ão d

e fu

nção

invá

lida,

sem

que

nada

mai

s ac

onte

ça.

• For

nece

r men

sage

ns d

e ac

ordo

com

a ta

refa

.

• For

nece

r men

sage

ns p

ositi

vas

e en

cora

jado

ras.

• Efe

tuar

mud

ança

s de

text

o no

cas

o de

err

os re

petid

os.

• For

nece

r men

sage

ns b

reve

s, d

e vo

cabu

lário

neu

tro, l

eve

e ev

ite

utili

zar h

umor

.

Qua

lidad

e da

s m

ensa

gens

de

erro

:

Ref

eren

te a

legi

bilid

ade,

per

tinên

cia,

expl

icaç

ão a

dequ

ada,

nat

urez

a do

err

o

com

etid

o e

açõe

s pa

ra a

cor

reçã

o.

_

• Pos

sibi

litar

que

se

poss

a m

odifi

car c

oman

dos

dura

nte

sua

digi

taçã

o.

• Pos

sibi

litar

que

, ao

verif

icar

um

err

o de

dig

itaçã

o, o

usu

ário

poss

a ed

itar a

pena

s a

parte

equ

ivoc

ada,

sem

com

prom

eter

o b

loco

inte

iro.

• Pos

sibi

litar

que

o u

suár

io e

fetu

e ed

içõe

s de

cor

reçã

o de

digi

taçã

o em

qua

lque

r mom

ento

que

not

ar o

err

o.

• Dis

poni

biliz

ar u

ma

expl

icaç

ão d

e bo

tões

efe

tivos

par

a a

ação

corr

ente

, cas

o o

usuá

rio a

perte

um

bot

ão d

e fu

nção

invá

lida,

sem

que

nada

mai

s ac

onte

ça.

• For

nece

r men

sage

ns d

e ac

ordo

com

a ta

refa

.

• For

nece

r men

sage

ns p

ositi

vas

e en

cora

jado

ras.

• Efe

tuar

mud

ança

s de

text

o no

cas

o de

err

os re

petid

os.

• For

nece

r men

sage

ns b

reve

s, d

e vo

cabu

lário

neu

tro, l

eve

e ev

ite

utili

zar h

umor

.C

orre

ção

dos

erro

s

Ref

eren

te a

os m

ecan

ism

os d

ispo

níve

is

para

que

o u

suár

io c

orrij

a se

us e

rros

.

_

• Pos

sibi

litar

que

se

poss

a m

odifi

car c

oman

dos

dura

nte

sua

digi

taçã

o.

• Pos

sibi

litar

que

, ao

verif

icar

um

err

o de

dig

itaçã

o, o

usu

ário

poss

a ed

itar a

pena

s a

parte

equ

ivoc

ada,

sem

com

prom

eter

o b

loco

inte

iro.

• Pos

sibi

litar

que

o u

suár

io e

fetu

e ed

içõe

s de

cor

reçã

o de

digi

taçã

o em

qua

lque

r mom

ento

que

not

ar o

err

o.

• Dis

poni

biliz

ar u

ma

expl

icaç

ão d

e bo

tões

efe

tivos

par

a a

ação

corr

ente

, cas

o o

usuá

rio a

perte

um

bot

ão d

e fu

nção

invá

lida,

sem

que

nada

mai

s ac

onte

ça.

• For

nece

r men

sage

ns d

e ac

ordo

com

a ta

refa

.

• For

nece

r men

sage

ns p

ositi

vas

e en

cora

jado

ras.

• Efe

tuar

mud

ança

s de

text

o no

cas

o de

err

os re

petid

os.

• For

nece

r men

sage

ns b

reve

s, d

e vo

cabu

lário

neu

tro, l

eve

e ev

ite

utili

zar h

umor

.

87

Crit

ério

erg

onôm

ico

Div

isão

Subd

ivis

ãoR

ecom

enda

ções

Ada

ptab

ilida

de (c

ontin

uaçã

o)

Hom

ogen

eida

de/C

oerê

ncia

(Con

sist

ênci

a):

Rel

ativ

o a

iden

tidad

e vi

sual

do si

stem

a. T

orná

-lo

hom

ogên

eo c

olab

ora

com

a

loca

lizaç

ão d

e el

emen

tos,

ente

ndim

ento

e a

pren

diza

do

do u

suár

io, f

acili

tand

o a

inte

raçã

o e

evita

ndo

o

aban

dono

do

sist

ema.

Con

side

raçã

o da

exp

eriê

ncia

do

usuá

rio:

Rel

ativ

o as

mud

ança

s de

inte

rfac

e qu

e

leva

m e

m c

onta

o c

onhe

cim

ento

, ou

não,

pré

vio

do u

suár

io e

m re

laçã

o ao

sist

ema.

Usu

ário

s mai

s exp

erie

ntes

pode

m te

r ace

sso

mai

s ráp

ido

ou m

ais

prof

undo

de

açõe

s e a

tivid

ades

do

sist

ema,

enq

uant

o m

ais i

nici

ante

s

nece

ssita

m d

e um

diá

logo

que

pod

e

ser c

onsi

dera

do in

côm

odo

para

os

outro

s.

_

• Pre

veja

ata

lhos

que

per

mita

que

o u

suár

io p

ule

dive

rsas

sele

ções

de m

enu.

• Pos

sibi

lite

que

o us

uário

esc

olha

a u

tiliz

ação

de

dete

rmin

ados

elem

ento

s ou

não

de a

cord

o co

m su

a ex

periê

ncia

com

o si

stem

a.

• For

nece

r um

tuto

rial p

asso

a p

asso

par

a us

uário

s ini

cian

tes.

• Per

miti

r que

usu

ário

s exp

erie

ntes

con

torn

em a

s téc

nica

s de

cond

ução

, se

esta

s o a

trasa

rem

.

_

_

• Util

izar

loca

lizaç

ão si

mila

r dos

títu

los e

m ja

nela

s.

• Util

izar

form

ataç

ão se

mel

hant

e en

tre te

las.

• Util

izar

ace

ssos

de

opçõ

es se

mel

hant

es.

• Util

izar

as m

esm

as c

onst

ruçõ

es d

e fr

ase

e po

ntua

ção

na

cond

ução

• Util

izar

os m

esm

o fo

rmat

os e

loca

lizaç

ão p

ara

cam

pos d

e

entra

da d

e da

dos.

88

Crit

ério

erg

onôm

ico

Div

isão

Subd

ivis

ãoR

ecom

enda

ções

Sign

ifica

do d

os c

ódig

os e

deno

min

açõe

s:

Rel

ativ

o a

deno

min

açõe

s

dent

ro d

o si

stem

a, q

ue d

evem

ser a

dequ

adas

, cla

ras,

com

forte

rela

ção

sem

ântic

a co

m o

que

se re

fere

, evi

tand

o qu

e a

cond

ução

aca

be p

or c

onfu

ndir

o us

uário

e fa

cilit

ando

a

mem

oriz

ação

das

açõ

es

dent

ro d

o si

stem

a.

Com

patib

ilida

de:

Rel

acio

nada

a

com

patib

ilida

de e

ntre

cara

cter

ístic

as d

o us

uário

( per

cepç

ão, m

emór

ia,

hábi

tos,

com

petê

ncia

s,

expe

ctat

ivas

, ida

de, e

tc.)

e o

diál

ogo

e de

nom

inaç

ões

e

sign

os d

o si

stem

a.

_

_

• Não

repi

ta tí

tulo

s pa

ra s

e re

ferir

a c

oisa

s di

verg

ente

s.

• Exp

licita

r reg

ras

de a

brev

iaçã

o.

• Util

izar

cód

igos

sig

nific

ativ

os fa

mili

ares

, e n

ão a

rbitr

ária

s.(e

x.:

F e

M p

ara

fem

inin

o e

mas

culin

o, e

não

a e

b)

_

_

• Man

ter a

s in

form

açõe

s na

mes

ma

orde

m d

os d

ados

a e

ntra

r.

• Rel

acio

nar f

orm

atos

de

tela

com

folh

as d

e pa

pel.

• Man

tenh

a os

pro

cedi

men

tos

de d

iálo

go d

e ac

ordo

com

o

cost

ume

do u

suár

io.

• Res

peita

r as

unid

ades

de

med

idas

e fo

rmat

os d

e da

tas

(dia

/mês

/

ano)

de

acor

do c

om o

form

ato

do p

aís

em q

uest

ão.

• Man

ter o

s te

rmos

com

pree

nsív

eis

ao u

suár

io, s

egui

ndo

a

fam

iliar

idad

e da

quel

es.

• Apr

esen

tar o

text

o na

tela

de

acor

do c

om a

s co

nven

ções

par

a

text

os e

m p

apel

.

89

Crit

ério

erg

onôm

ico

Div

isão

Subd

ivis

ãoR

ecom

enda

ções

Con

duçã

o (c

ontin

uaçã

o)C

ondu

ção

(con

tinua

ção)

Feed

back

Imed

iato

:

Rel

ativ

o a

resp

osta

s im

edia

tas

do

sist

ema

para

as

açõe

s do

usu

ário

.

Dev

e se

r util

izad

a em

todo

s os

cas

os,

pois

isso

col

abor

a co

m o

ente

ndim

ento

do

usuá

rio e

m re

laçã

o a

o qu

e es

tá o

corr

endo

, a a

usên

cia

ou

resp

osta

s in

apro

pria

das

pode

m s

er

ente

ndid

as c

omo

falh

a do

sis

tem

a e

resu

ltand

o em

açõ

es q

ue p

reju

dica

m

as q

ue já

est

avam

em

and

amen

to,

além

de

desc

onte

ntam

ento

do

usuá

rio

e pe

rda

de c

redi

bilid

ade

no a

mbi

ente

inte

rativ

o.

_

• Tod

as a

s en

trada

s do

usu

ário

dev

em s

er m

ostra

das,

exc

eto

dado

s

sigi

loso

s, q

ue p

odem

ser

sub

stitu

ídos

por

sím

bolo

s, re

aliz

ando

um fe

edba

ck p

erce

ptív

el.

• Apó

s a

inte

rrup

ção

feita

pel

o us

uário

de

algu

m p

roce

ssam

ento

,

o si

stem

a de

ve m

ostra

r que

vol

tou

ao s

eu e

stad

o pr

évio

, sem

deix

ar d

úvid

as s

e a

alte

raçã

o fo

i pu

nao

real

izad

a.

• Qua

ndo

há u

m p

roce

ssam

ento

que

nec

essi

te d

e es

pera

, dad

os

sobr

e se

u an

dam

ento

dev

em s

er fo

rnec

idos

.

Legi

bilid

ade:

Rel

ativ

o as

car

acte

rístic

as q

ue

dific

ulta

m o

u fa

cilit

am a

leitu

ra d

a

info

rmaç

ão (

efei

tos

de c

arac

tere

s,

cont

rast

e co

m o

fund

o, m

anch

a

gráf

ica

apro

pria

da o

u nã

o, e

ntre

outro

s).P

or d

efin

ição

, o c

ritér

io

Legi

bilid

ade

não

abra

nge

men

sage

ns

de e

rro

ou d

e fe

edba

ck.

_

• Util

izar

títu

los

cent

raliz

ados

.

• Util

izar

cai

xa a

lta n

os ró

tulo

s.

• Man

ter o

cur

sor d

istin

to d

e ou

tros

itens

.

• Qua

nto

ao e

spaç

o pa

ra te

xtos

, util

izar

pou

cas

linha

s lo

ngas

e

não

mui

tas

linha

s cu

rtas,

util

izan

do a

o m

enos

50

cara

cter

es p

or

linha

.

• A ju

stifi

caçã

o à

dire

ita d

eve

ser e

mpr

egad

a, d

esde

que

pos

sa s

er

obtid

a po

r esp

açam

ento

, man

tend

o di

stân

cias

con

stan

tes

e

cons

iste

ntes

ent

re a

s pa

lavr

as e

seu

s ca

ract

eres

.

• Evi

tar a

util

izaç

ão d

e hí

fens

, man

tend

o as

pal

avra

s in

teira

s.

90

Anexo B - Conteúdo dos capítulo 1 ao 10 do livro Nihongo Nyumon, do Curso de Línguas Estrangeiras Oyama.

Lição 01 - Tadashii Yomikata (Leitura correta)

Romaji – Letras Romanas Pronúncia em Português

Cha,chi,chu,che,cho tya,ti,tyu,tye,tyo

Ga,gi,gu,ge,go ga,gui,gu,gue,go

Ha,hi,fu,he,ho “R” como em [reto], [carro], etc.

Ja,ji,ju,je,jo dya,di,dyu,dye,dyo

Sa,shi,su,se,so ssa,xi,ssu,sse,sso

..su “S” como no plural das palavras

Ra,ri,ru, re,ri “R” como em [para],[área],[carinho], etc

(Consoantes repetidas) sílaba anteror mais forte

N Uma sílaba independente

Ä,ü,ë,ö aa,uu,ee,oo

Rei – Exemplo

- Konnichiwa [ko-n-ni-chi-wa]

- Sayönara [sa-yo-o-na-ra]

-Ogenki [o-ge-n-ki]

-Sumimasen [su-mi-ma-sse-n]

-Daijöbudesu [da-i-jo-o-bu-des]

-Chotto [tyo-to]

91

Lição 02 - Aisatsu( Cumprimento)

01- Ohayö gozaimasu Bom dia

02- Konnichiwa Boa tarde

03- Konbanwa Boa noite

04- Oyasuminasai Boa noite (quando vai se deitar)

05- Sayönara Tchau, adeus

06- Dewa mata Até logo, até mais

07- Otsukaresama Cumprimento utilizado no final do expediente

08- Arigatö gozaimasu Muito obrigado

09- Iie, dö itashimashite De nada / Não foi nada

10- Gomennasai Desculpe, perdão

11- Sumimasen Desculpe (forma mais polida), com licença

12- Shitsurei shimasu Com licença

13- Omedetö gozaimasu Parabéns

14- Daijöbudesuka Tudo bem? Tudo certo?

Daijöbudesu Tudo bem! Tudo certo!

Nihon no Nichijö (Cotidiano do Japão)

A – Itekkimasu Cumprimento usado para a pessoa que fica

B – Itterasshai Cumprimento usado em resposta ao acima

A – Tadaima Cumprimento usado quando se chega em casa

B – Okaerinasai Cumprimento usado em resposta ao acima

A – Itadakimasu Cumprimento usado antes de comer

B – Dözo Cumprimento usado pela pessoa que serve

A – Gochisösama Cumprimento usado após a refeição

B – Osomatsusama Cumprimento usado pela pessoa que serviu

92

Süji (Numerais)

Introdução

01 – ichi

02 – ni

03 – san

04 – shi

05 – go

06 – roku

07 – shichi/nana

08 – hachi

09 – ku/kyü

10 – jü

Kaiwa 01(Conversação 01)

Suzuki- Ohayö gozaimasu. Bom dia.

Santos- Ohayö gozaimasu. Bom dia.

Suzuki- Ogenki desuka? Tudo bem?

Santos- Ee, okagesamade genki desu. Sim, graças a Deus, tudo bem.

[Suzukisan] wa? E [você]?

Suzuki- Watashi mo genki desu. Eu também estou bem.

Lição 03 - Süji 1 (Numerais 1)

01 – ichi

02 – ni

03 – san

04 – shi/yon

05 – go

06 – roku

07 – shichi/nana

93

08 – hachi

09 – ku/kyü

10 – jü

12 – jü ni

13 – jü san

14 – jü shi /yon

15 – jü go

16 – jü roku

17 – jü shichi / nana

18 – jü hachi

19 – jü ku/kyü

20 – ni jü

10 – jü

20 – ni jü

30 – san jü

40 – yon jü

50 – go jü

60 – roku jü

70 – nana jü

80 – hachi jü

90 – kyü jü

100 hyaku

Lição 04 - Shökai (Apresentação)

P – Hajimemashite, (watashi wa) Muito prazer, {eu} sou

[Santos, Paulo] desu [Santos, Paulo]

S – [Suzuki, Mayumi] desu. Sou [Suzuki, Mayumi]

Kochirakoso yoroshiku onegai shimasu O prazer é todo meu.

94

Kaiwa

Y – Sumimasen, onamae wa? Com licença, qual o seu nome?

M – [Maria] desu. É [Maria].

Y – [Marisan] desuka? É [Mari]?

M – Iie, [Mari] ja arimasen. Não, não é [Mari]

[Maria] desu. É [Maria].

Y – [Mariasan] wa [perujin]desuka? Você é [peruana]?

M – Iie, [burajirujin] desu. Não, sou [brasileira]

Y – Sö desuka? É mesmo?

Sumimasen, {ima} nansai desuka? Com licença, qual a sua idade?

M – {Ima} [23] saidesu Tenho [23] anos.

A – Oshigoto wa? Qual a sua profissão?

B – Watashi wa [gakusei] desu. Eu sou [Estudante].

Atarashii kotoba (palavras novas)

- kaishain - empregado de firma

- kömuin - funcionário público

- gakusei - estudante

- sensei - professor

- isha -médico

- shufu - dona de casa

Lição 05 - Kaisha de (na firma)

S – Konnichiwa Boa tarde.

Y – Konnichiwa Boa tarde.

S – Kochira wa [Paurosan] desu. Este é o [Paulo]

P – [Pauro] desu. Dözo yoroshiku onegaishimasu Sou [Paulo] Muito

prazer.

Y – [Yamada] desu. Dözo yoroshiku Sou [Yamada]. Muito

prazer.

95

Okuni wa? {Veio} de qual pa[is?

P – [Burajiru] desu. Do [Brasil].

Y – [San Pauro] desuka? De [São Paulo]?

P – Iie, chigaimasu. Não {não é}

[Curitiba] kara kimashita. Vim de [Curitiba].

Y – Dewa ganbatte kudasai. Esforce-se bastante.

P – Hai, ganbarimasu. Sim, me esforçarei

bastante.

S – Osakini shitsurei shimasu. Com licença, estou

saindo antes.

Y – Dözo. À vontade.

S – Osakini. Sayönara. Licença. Tchau.

P/Y – Sayönara. Tchau.

Lição 06 - Kyöshitsu Yögo (Sala de aula)

01 – Mite kudasai Por favor, veja!

02 – Kiite kudasai Por favor, escute!

03 – Itte kudasai Por favor, fale {diga}!

04 – Kaite kudasai Por favor, escreva!

05 – Yonde kudasai Por favor, leia!

06 – Keshite kudasai Por favor, apague!

07 – Oboete kudasai Por favor, memorize!

08 – Naoshite kudasai Por favor, corrija!

09 – Dashite kudasai Por favor, tire!

10 – Shimate kudasai Por favor, guarde!

11 – Chotto matte kudasai Por favor, espere um

pouco!

12 – kashite kudasai Por favor, me empreste!

13 - Miste kudasai Por favor, mostre!

14 – Oshiete kudasai Por favor, me oriente!

15 – Renshü shite kudasai Por favor, exercite!

96

16 – Mö ichido Mais uma vez

17 – Yukkuri Devagar

18 – Hayaku Rápido

19 – Isshoni {dözo} Juntos

20 – Shitsumon ga arimasu Tenho uma pergunta

21 – Atte imasu Está certo;

22 – Machigatte imasu Está errado

23 – Hajimemashö Vamos começar

24 - Owarimashö Vamos encerrar

25 - Yasumimashö Vamos descansar

26 - Wasuremashita Esqueci

27 – Okurete sumimasen Desculpe o atraso.

28 - Osakini shitsurei shimasu Com licença, terei de

ir antes.

Kaiwa

A – Wakarimashitaka? Entendeu?

B - + Hai, wakarimashita. Sim, entendi.

- Iie, wakarimasen. Não, não entendi.

Kaiwa

A – dekimashitaka? Conseguiu fazer?

B - + Hai, dekimashita Sim, consegui fazer.

- iie, madadesu Não, ainda não

Kyöshitsu de

P – Paulo S – Sensei

P – Kore wa nandesuka?

S – [Enpitsu] desu.

P – Sore wa nandesuka?

S – [Hon] desu.

P – Are mo [hon] desuka?

97

S – Iie, are wa [hon] ja arimasen, are wa [jisho] desu.

P – Dwa, [jisho] o kashite kudasai.

S – Dore desuka?

S – Sore desu.

Atarashii kotoba:

- kore – isto

- sore – isso

- are – aquilo

- dore – qual

- chizu – mapa

- enpitsu – lápis

- hasami – tesoura

- hon – livro

- jisho – dicionário

- kaban – mala

- kami – papel

- [ ] wa nandesuka? – O que é [ ]?

- keshigomu – borracha

- nöto – caderno

- pen – caneta

- shäpen – lapiseira

- tokei - relógio

- dewa – então

- enpitsu kezuri – apontador

- isu – cadeira

- karendä – calendário

- kokuban – quadro negro

- tsukue – escrivaninha

98

Süji 2 (Numerais 2)

100 – hyaku

200 – nihyaku

300 – sanbyaku

400 – yonhyaku

500 – gohyaku

600 – roppyaku

700 – nanahyaku

800 – happyaku

900 – kyühyaku

1000 –sen

1000 –sen

2000 – nisen

3000 – sanzen

4000 – yonsen

5000 – gosen

6000 – rokusen

7000 – nanasen

8000 – hassen

9000 – kyusen

10000 – ichiman

30000 – sanman

70000 – nanaman

90000 – kyuman

100000 – jüman

400000 – yonjüman

700000 – nanajüman

2000000 – nihyakuman

8000000 – happyakuman

30000000 – sanzenman

99

Lição 09 - Yaoya de (Na quitanda)

M – Maria T – Ten-in

T – Irasshaimase.

M – [Ringo] o kudasai.

T – Ikutsu desuka?

M – [Mittsu] kudasai.

Ikura desuka?

T – [Sanbyaku] en desu.

Arigatö gozaimashita.

M – Dömo arigatö.

Atarashii kotoba

- [] {o} kudasai - por favor dè-me []

- yaoya - quitanda

- irasshaimase - seja bem vindo

- ikutsudesuka - quantos(as)

- ikuradesuka - quanto custa

- banana - banana

- budö - uva

- ichigo - morango

- kaki - caqui

- kudamono - fruta

- mango -manga

- meron - melão

- mikan - mimosa

- momo - péssego

- nashi - pêra

- orenji - laranja

- painappuru - abacaxi

- papaiya - mamão

- remon - limão

100

- ringo - maçã

- sakuranbu - cereja

-suika - melancia

- ten-in - vendedor

Lição 10 - Kazoekata (Forma de contar)

01 – hitotsu

02 – futatsu

03 – mittsu

04 – yottsu

05 – itsutsu

06 – muttsu

07 – nanatsu

08 – yattsu

09 – kokonotsu

10 – tö

11 – jü ichi

12 – jü ni

Kaiwa

A – Koko ni [ringo] ga arimasu.

B – Ikutsu arimasuka?

A – [ ] arimasu.

Kaiwa

A – Asoko no [shiroi] [ chawan] ga arimasu.

B – [Kuroi] [chawan] mo arimasuka?

A – Hai, arimasu

B – Ikutsu arimasuka?

A – [Mittsu] arimasu.

101

Atarashii kotoba:

- Ikutsu arimasuka? quantos tem?

- “mo” partícula que significa também

- chawan tijela utilizada para comer

“gohan” (arroz cozido japonês)

- koko aqui

- asoko ali/lá

102

Anexo C - Autorização de imagens e conteúdos do material o Curso de Línguas Estrangeiras Oyama.

103

Date post:	03-May-2023
Category:	Documents
Upload:	khangminh22
View:	0 times
Download:	0 times

HIPERMÍDIA APLICADA AO ENSINO DA LÍNGUA JAPONESA

Documents