Tcc entrega impressao

UNIVERSIDADE DO SUL DE SANTA CATARINA SILMARA CARVALHO POLETTO

REDESIGN DO WEBSITE DE EDUCAÇAO MUSICAL ZORELHA: UM ESTUDO DA USABILIDADE INFANTIL

Florianópolis 2008

SILMARA CARVALHO POLETTO

REDESIGN DO WEBSITE DE EDUCAÇAO MUSICAL ZORELHA: UM ESTUDO DA USABILIDADE INFANTIL

Trabalho de Conclusão de Curso apresentado ao Curso de Graduação em Design da Universidade do Sul de Santa Catarina, como requisito parcial à obtenção do título de Bacharel.

Orientadora: Prof. Renata Krusser, Msc.

Florianópolis 2008

SILMARA CARVALHO POLETTO

REDESIGN DO WEB SITE DE EDUCAÇAO MUSICAL ZORELHA: UM ESTUDO DA USABILIDADE INFANTIL

Este Trabalho de Conclusão de Curso foi julgado adequado à obtenção do titulo de Bacharel em Design e aprovado em sua forma final pelo Curso de Design, da Universidade do Sul de Santa Catarina.

Florianópolis, 10 de novembro de 2008.

____________________________________ Prof. e orientadora Renata Krusser, Msc. Universidade do Sul de Santa Catarina.

_____________________________________ Prof.. Karla Coelho Grillo, Msc. Universidade do Sul de Santa Catarina

______________________________________ Prof.. Claudia R. Batista, Dr. Universidade do Sul de Santa Catarina

Dedico este trabalho aos meus pais, ao filho e ao meu marido.

AGRADECIMENTOS

Agradeço aos meus pais primeiramente porque sem o apoio e o amor deles dificilmente estaria concluindo minha faculdade. Muito obrigada, pai, por ser um exemplo na minha vida. E a você, minha querida mamãe, por estar sempre presente, mesmo a distância.

Amo vocês demais. Obrigada ao meu marido, companheiro que sempre me ajudou, mesmo nos momentos de pouca criatividade, ajudando com suas idéias; ao meu filho, que foi a força e o maior motivo para encarar todos os dias de batalha.

Agradeço a amiga Keli Christy por toda amizade e paciência nas horas que pedi uma ajuda opinião e participação de suas habilidades profissionais como designer gráfica.

Agradeço também à professora e orientadora Renata Krusser pela paciência e competência para me orientar.

Meu agradecimento vai também para toda a equipe que me ajudou no desenvolvimento: Elieser, autor do “Zorelha”; a Escola Dinâmica e alunos, colaboradores nos testes de usabilidade.

RESUMO

O presente trabalho descreve o processo de reconstrução do design da interface do web site de educação musical Zorelha, desenvolvido originalmente para o Trabalho de Conclusão de Curso (graduação em ciência da computação) de Elieser Ademir de Jesus, no 1º semestre do ano de 2008, pela universidade do vale do Itajaí. Com o avanço das tecnologias em informática e da internet, a educação através do uso da internet, tornou-se cada vez mais uma realidade em todo o mundo. Neste contexto, foi desenvolvido o Zorelha, direcionado para o público alvo de crianças entre 4 e 6 anos. Trabalhar para melhorar a comunicação visual do site teve como objetivo principal desenhar novo design da interface do website Zorelha, baseado em análise de usabilidade e ergonomia para o uso do público infantil. Durante o processo de desenvolvimento da nova interface foi necessário atingir alguns objetivos específicos como investigar a adequação de técnicas de análise ergonômica ao estudo de ambiente de educação infantil, além de aplicar estas técnicas no website, fazendo as adaptações necessárias para o público infantil. Foi preciso ainda planejar a estrutura do website buscando propiciar ao usuário facilidade de uso em relação à interatividade e fluidez na navegação e localização da informação desejada. A partir daí, realizou-se o tratamento visual utilizando linguagem gráfica compatível com a proposta do ambiente educacional e com o perfil do público-alvo, que permitiu ao usuário maior facilidade para apreender e compreender o conteúdo abordado. E, por fim, foi apresentada a nova interface para o público-alvo, obtendo a avaliação das crianças e propiciando aferir o grau de satisfação. Os testes de análise da usabilidade foram realizados na Escola Dinâmica, em Florianópolis (SC).

Trabalhar com crianças exigiu criatividade, mas foi satisfatório, com resultados importantes e relevantes para a construção da nova interface.

Palavras-chave: Interface. Usabilidade. Redesign.

ABSTRACT

The present work describes the process of rebuilding the interface design from the musical education web site Zorelha, initially developed as the final paper (Computer Science undergraduate degree) from Elieser Ademir de Jesus, in the first semester of 2008 at the Universidade do Vale do Itajaí. With the development of computer technologies and the Internet, education through the Internet became more and more a reality around the world. In this context, Zorelha was developed aiming at children from 4 to 6 years-old as its target audience. The main purpose of improving the visual communication of the site was to create a new design for Zorelha‟s interface, based on the analysis of usability and ergonomics for the target audience. During the process of developing the new interface, some objectives were achieved, as investigating the suitability of ergonomic analysis techniques for the study of pre-school environments, as well as applying these techniques to the website, with the necessary adaptations for children. It was also necessary to plan the structure of the website, with the purpose of providing users with ease of use, related to interactivity and smoothness for browsing and finding the desired information. Based on this approach, the visual treatment was carried out, using a graphical language appropriate to the purpose of the educational environment and to the target audience profile, thus providing the user with greater easiness to learn and comprehend the content addressed. Finally, the new interface was presented to the target audience; at this point an evaluation was obtained from the children that allowed assessing their degree of satisfaction. The tests for the usability analysis were carried out at Escola Dinâmica, in the city of Florianópolis (state of Santa Catarina). Working with children required creativity but was satisfactory, providing important and relevant results for building the new interface.

Keywords: interface, usability, redesign.

LISTA DE ILUSTRAÇÕES

Figura 1 – Interface gráfica sujeita a redesign do website de educação musical Zorelha ....................................................................................................................

14

Figura 2 – Website Zorelha disponível na internet.................................................

15

Figura 3 – Interpretação do design de interação......................................................

28

Figura 4 – Interface gráfica do ambiente de educação musical Zorelha ................. 37 Figura 5 – Diagrama da navegação principal do website Zorelha .........................

39

Figura 6 – Professora do website Zorelha................................................................ 40 Figura 7 – Imagem do carregador do website Zorelha ........................................

40

Figura 8 – Menu da tela de abertura do website Zorelha ........................................ 40 Figura 9 – Menu 1, botões para escolha das músicas..............................................

41

Figura 10 – Personagens do estilo Rock..................................................................

42

Figura 11 – Personagens do estilo sonoro nordestino.............................................. 42 Figura 12 – Personagens do estilo samba................................................................

42

Figura 13 – Personagens da sonoridade do corpo humano......................................

43

Figura 14 – Menu 2, botões para sonoridades.........................................................

43

Figura 15 – Menu onde os músicos ficam posicionados apos escolha do estilo, e o usuário escolhe qual vai para o palco.................................................................... 44 Figura 16 – Foto registro do momento da navegação das crianças no ambiente Zorelha.....................................................................................................................

49

Figura 17 – Foto registro do momento da navegação das crianças no ambiente Zorelha.....................................................................................................................

50

Figura 18 – Foto registro do momento da navegação das crianças no ambiente Zorelha.....................................................................................................................

50

Figura 19 – Foto registro do momento da navegação das crianças no ambiente Zorelha.....................................................................................................................

51

Figura 20 – Imagem do cursor utilizado no Zorelha...............................................

51

Figura 21 – Imagem do cursor utilizado..................................................................

52

Figura 22 – Imagem do menu da página de entrada................................................

52

Figura 23 – Imagem do carregador..........................................................................

53

Figura 24 – Imagem da personagem que apresenta o website do Zorelha............... 53 Figura 25 – Imagem das setas para mover o músico para frente e para trás............ 54

Figura 26 – Interface gráfica do ambiente de educação musical Smartkids............

60

Figura 27 – Interface gráfica do ambiente de interação e educação Edumusical....

61

Figura 28 – Interface gráfica do website de interação infantil Goldfish.................

62

Figura 29 – Interface gráfica do software de educação infantil Coelho Sabido......

63

Figuras 30 – Interface gráfica do website infantil Discovery Kids Brasil..............

63

Figuras 31 – Interface gráfica do website infantil Discovery Kids Brasil..............

64

Figuras 32 – Tela seção pistas musicais................................................................... 64 Figuras 33 – Tela seção pistas musicais................................................................... 64 Figuras 34 – Tela seção melodias............................................................................

64

Figuras 35 – Tela seção melodias............................................................................

64

Figura 36 – Alternativa 1.........................................................................................

67

Figura 37 – Alternativa 2.........................................................................................

68

Figura 38 – Alternativa 3.........................................................................................

69

Figura 39 – Alternativa 4.........................................................................................

70

Figura 40 – Alternativa 5.........................................................................................

71

Figura 41 – Alternativa 6........................................................................................ ........................................................................

Figura 42 – Imagem Interface escolhida................................................................

72

Figura 43 - Imagem Botões de navegação...............................................................

74

Figura 44 – Imagem Carregador..............................................................................

74

73

Figura 45 – Imagem personagem apresentadora menina......................................... 74 Figura 46 – Imagem personagem apresentador menino.........................................

75

Figura 47 - Imagem ícones estilo sonoros...............................................................

77

Figura 48 - Imagem ícones estilo sonoros...............................................................

78

Figura 49 – Imagem do cursor utilizado na nova interface...................................... 78 Figura 50 – Foto registro do momento da navegação das crianças no novo ambiente Zorelha.....................................................................................................

80

Figura 51 – Foto registro do momento da navegação das crianças no novo ambiente Zorelha. ...................................................................................................

80

Figura 52 - Imagem página carregando(imagem do carregador). ........................... 82 Figura 53 - Imagem apresentadora do site Zorelha.................................................

83

Figura 54 – Imagem página inicial..........................................................................

83

Figura 55 – Imagem página menu escolha das músicas.........................................

84

Figura 56 – Imagem página menu escolha das músicas.........................................

84

Figura 57 – Imagem página modulo show, instrumentos em detalhes...................

85

Figura 58 – Imagem página modulo show, com um músico tocando sozinho......

85

Figura 59 – Imagem da tela de carregamento do website.......................................

86

Figura 60 – imagem da tela modulo show, instrumento em detalhes.....................

89

LISTA DE TABELAS

Tabela 1 – Problemas de usabilidade encontrados na interface do website

49

Zorelha, glossário das heurísticas atingidas em anexo............................................

Tabela 2 – Tabela de porcentagem onde demonstra em porcentagem das crianças

56

que tiveram dificuldades e onde foi que ocorreu.....................................................

Tabela 3 – Tabela para identificação os erros mais graves...................................... 58 57

SUMÁRIO

1 INTRODUÇÃO ..................................................................................................

14

1.1 PROBLEMÁTICA ............................................................................................ 14 1.2 OBJETIVOS......................................................................................................

15

1.2.1 Objetivo geral................................................................................................

15

1.2.2 Objetivos específicos.....................................................................................

15

1.3 JUSTIFICATIVA..............................................................................................

16

1.4 METODOLOGIA..............................................................................................

17

1.5 ESTRUTURA DO TRABALHO....................................................................... 18 2 USABILIDADE DE WEBSITE EDUCACIONAL INFANTIL ..................... 20 2.1 INFORMÁTICA NA EDUCAÇÃO..................................................................

20

2.1.1 Educação, interação e tecnologia.................................................................

21

2.1.2 A cognição e o conhecimento........................................................................ 22 2.1.3 Tipos específicos do processo cognitivo....................................................... 22 2.1.4 A cognição em ambientes virtuais de aprendizagem infantil.................... 24 2.1.4.1 Fatores emocionais....................................................................................... 25 2.1.4.2 Fatores motivacionais..................................................................................

26

2.1.4.3 Fatores sensoriais.........................................................................................

27

2.1.4.4 Fatores intelectuais....................................................................................... 27 2.2 DESIGN DE INTERAÇÃO............................................................................... 27 2.2.1 Recursos visuais............................................................................................. 29 2.2.2 Conceitos da semiótica para interfaces.......................................................

29

2.3 USABILIDADE E ERGONOMIA DE INTERFACES....................................

31

2.3.1 Navegação......................................................................................................

32

2.3.2 A construção da interface centrada no usuário.......................................... 33 2.3.3 As interfaces expressivas..............................................................................

34

2.3.4 Técnicas para avaliação da usabilidade......................................................

36

3 ANÁLISE DA SITUAÇÃO ATUAL DO WEBSITE DE EDUCAÇÃO 38 ZORELHA ..............................................................................................................

3.1 PUBLICO ALVO.............................................................................................. 39 3.2 ESTRUTURA DO WEBSITE ZORELHA.......................................................... 39 3.2.1 Menu 1 – Repertório de músicas.................................................................

41

3.2.2 Menu 2 – Sonoridades .................................................................................

42

3.2.3 Menu 3 – Músicos e Instrumentos...............................................................

3.3 ESCOLHENDO AS TÉCNICAS DE ANÁLISE DA USABILIDADE PARA

44 45

O PÚBLICO INFANTIL.........................................................................................

3.3.1 Requisitos para escolha das técnicas usadas no redesign do website 45 3.4 TÉCNICAS PREDITIVA APLICADA – ANÁLISE ERGONOMICA DA Zorelha:

46

INTERFACE......................................................................................................

3.4.1 Relato do teste da técnica preditiva – análise da interface........................ 49 3.5 TÉCNICA OBJETIVA APLICADA – TESTES COM O USUÁRIO.............

50

3.5.1 Relato da técnica objetiva – participação do usuário................................

52

3.5.1.1 Considerações finais do relato da técnica objetiva – participação do

55

usuário......................................................................................................................

3.6 TÉCNICAS PROSPECTIVAS

APLICADAS – QUESTIONÁRIO E

56

ENTREVISTA.........................................................................................................

3.6.1 Relato da entrevista realizada com as crianças da Escola Dinâmica.......

57

3.6.2 Questionário aplicado com a especialista “professora”............................. 59 3.6.3 Considerações finais da entrevista............................................................... 59 3.7 ANÁLISE COMPARATIVA COM WEBSITES SEMELHANTES.................

60

3.7.1 Considerações finais relativas aos websites semelhantes...........................

66

4 REDESIGN DO WEBSITE ZORELHA............................................................

67

4.1 DIRETRIZES CONCEITUAIS E VISUAIS.....................................................

67

4.2 GERAÇAO DE ALTERNATIVAS..................................................................

68

4.2.1 Interface.........................................................................................................

68

4.3 SOLUÇAO PROPOSTA ..................................................................................

74

4.3.1 Imagem dos botões para o menu.................................................................

75

4.3.2 Imagem do Carregador................................................................................

75

4.3.3 Personagem apresentador do site................................................................

76

4.3.4 Ícones do Menu Música..............................................................................

77

4.3.5 Ícones do menu estilos sonoros....................................................................

78

4.3.6 Imagem do cursor.........................................................................................

78

4.3.7 Análise pelo cliente........................................................................................ 79 4.3.8 Análise pelo usuário .....................................................................................

79

4.3.9 Critérios de escolha e justificativa...............................................................

81

4.4 PROJETO DETALHADO.................................................................................

82

4.4.1 Memorial descritivo......................................................................................

86

5 CONCLUSÃO

..............................................................................................

93

REFERÊNCIAS................................................................................................... 94 APÊNDICES........................................................................................................... 97 APÊNDICE A – Briefing do redesign da interface do website Zorelha............

98

APÊNDICE B –Tabela 4 – Laudo Ergolist.......................................................... 99 APÊNDICE C – Painel semântico........................................................................

100

APÊNDICE D – Brainstrom.................................................................................

101

APÊNDICE E – Wareframe..................................................................................

102

APÊNDICE F – Sitegrama....................................................................................

103

14

1 INTRODUÇÃO

Com o avanço das tecnologias em informática e da internet, a educação a distância tornou-se cada vez mais uma realidade em todo o mundo, e no Brasil não é diferente. Aos que ainda estavam reticentes sobre a evolução desta modalidade de ensino no País, um estudo recente realizado pelo Portal e-Learning Brasil não deixa dúvidas: o setor vem se consolidando ano a ano e deve manter taxas de crescimento de 40% ao ano até 2010.

Nesse contexto, foi desenvolvido um ambiente infantil para educação musical intitulado Zorelha. Através do Zorelha as crianças podem conhecer e aprender com o universo da música, proporcionando experiências com sons de diversos instrumentos e ritmos, de uma forma lúdica e interativa.

1.1 PROBLEMÁTICA

A equipe de desenvolvimento do ambiente de educação musical Zorelha (figura 1) constatou que há problemas na interface gráfica referente ao tratamento visual e apelo estético-formal. Sendo assim, foi refeito seu design baseado no estudo e análise da usabilidade e ergonomia, com o propósito de adequá-lo para o uso infantil, prevendo possíveis erros durante o uso do ambiente.

Figura 1 – Interface gráfica sujeita a redesign do website de educação musical Zorelha Fonte: Zorelha, 2008.

15

Figura 2 – Website Zorelha disponível na internet.

Fonte: Zorelha, 2008.

1.2 OBJETIVOS

1.2.1 Objetivo geral

Desenvolver novo design da interface do website Zorelha baseado em análise de usabilidade e ergonomia do uso pelo público infantil.

1.2.2 Objetivos específicos

a) investigar a adequação de técnicas de análise ergonômica ao estudo de ambiente de educação infantil; b) aplicar diferentes técnicas de análise de usabilidade no website, fazendo as adaptações necessárias para o estudo do ambiente de aprendizagem infantil; c) planejar a estrutura do website buscando propiciar ao usuário facilidade de uso em relação à interatividade, fluidez na navegação e localização da informação desejada;

16

d) realizar o tratamento visual utilizando linguagem gráfica compatível com a proposta do ambiente educacional e com o perfil do público-alvo, permitindo ao usuário facilidade para aprender e compreender o conteúdo abordado; e) testar e avaliar a implementação do Zorelha com alunos na faixa etária definida para o software.

1.3 JUSTIFICATIVA

Este projeto pretende integrar a criança ao mundo da música, redesenhando a interface do Zorelha para torná-lo fácil de usar e aprender. Jesus (2008, p.13), autor do Zorelha, diz que: Esta área da educação – chamada por alguns de Musicalização Infantil – trata de propiciar às crianças possibilidades de experimentações sonoras e através destas o envolvimento com os elementos que constituem o universo da música: os diferentes sons, ritmos, melodias, harmonias e demais possibilidades musicais.

Para Oliveira (2001 apud JESUS, 2008) musicalizar significa desenvolver o senso musical das crianças, sua sensibilidade, expressão, ritmo, “ouvido musical”, ou seja, inteirálas no mundo musical.

O Zorelha é um site disponível na internet que é utilizado gratuitamente por crianças de qualquer escola. Neste Trabalho de Conclusão de Curso (TCC) é necessário um estudo centrado no usuário para identificar possíveis problemas e erros de uso da interface. É na infância que temos a maior parte das influências que levamos para a fase adulta. Isso exige grande atenção por parte das mídias, principalmente as educativas, as empresas ou profissionais que prestam serviços na construção de materiais didáticos infantis. É importante a adequação do produto à idade do público, levando em consideração que cada fase da criança tem características específicas, para prever os riscos de casos como os de softwares e websites frustrantes, jogos que exigem demais e fazem as pessoas se sentirem “burras” por não conseguirem jogar.

Neste contexto, existe a necessidade de criar um tratamento visual e adotar uma linguagem gráfica compatível com o perfil do público infantil porque esta estrutura visual permitirá às crianças uma compreensão clara do conteúdo abordado e trará facilidade na navegação e interação.

A criança tem motivações diferentes das dos adultos; os desejos e as expectativas

17

também são diferentes. Portanto, não podemos apenas usar as medidas de “satisfação do usuário” tradicionais porque não são adequadas às crianças.

Por este motivo deve ser feito um estudo do público-alvo e aplicadas técnicas de usabilidade e ergonomia, desenvolvendo uma interface centrada no usuário.

1.4 METODOLOGIA

Para atender aos objetivos propostos, será feita uma pesquisa bibliográfica segundo Marconi e Lakatos (1999, p.73): a pesquisa bibliográfica abrange toda a bibliografia já tronada publica em relação ao tema de estudo [...] Sua finalidade é colocar o pesquisador em contato direto com tudo aquilo que foi escrito, dito ou filmado sobre determinado assunto.

Essa pesquisa será que grande importância para fornecer informações necessárias quanto à usabilidade e ergonomia, avaliação da usabilidade de websites, navegação, informática na educação, interface centrada no usuário e design de interação e demais aspectos relevantes ao estudo.

Depois, serão selecionadas técnicas de usabilidade dentre as estudadas como as técnicas preditivas, prospectivas e objetivas sendo adequada para realizar a análise da usabilidade do site com o público infantil. As análises serão realizadas com crianças da Escola Dinâmica, durante as aulas de informática e com a orientação da professora, usando as técnicas durante a navegação das crianças no website Zorelha, buscando aprofundar o tema e captar as informações relevantes quanto ao uso do site. Os dados serão analisados e servirão como base para conceituação do projeto e redesign da interface. Através dos resultados apresentados em tabelas, que mostram claramente os erros mais graves da interface.

Para desenvolver o projeto e criar uma nova interface para o site e atender aos objetivos propostos, foi utilizada a metodologia de design gráfico proposta por Melo (2000 apud SOUZA; PANIZZA, 2008) e adequada para o projeto Zorelha: a) necessidade: redesign da interface; b) briefing: informações sobre o cliente e o trabalho; c) levantamento de dados: conhecimento do público-alvo e suas necessidades, conceituação de negócio e objetivos dos usuários no web site; d) conceito: diretrizes conceituais e visuais. É nesta etapa que ocorre a fase do

18

brainstorm, escolha da melhor opção com base nas descobertas da etapa anterior; e) desenvolvimento do trabalho: propostas do trabalho, apresentado em forma de wareframe e storyboard; f) avaliação do cliente; g) ajustes: detalhamento e aperfeiçoamento; h) execução; i) implementação: apresentação.

Depois o projeto concluído foi necessário analisar crianças utilizando a interface de educação musical Zorelha com objetivo de analisar a nova estrutura visual da interface.

Esta análise aconteceu de forma simples apenas para confirmação positiva da relação entre a nova interface e seu público-alvo infantil.

Este trabalho foi desenvolvido através de uma abordagem interdisciplinar, dada as diferentes áreas do conhecimento envolvidas na pesquisa. A equipe colaboradora neste trabalho constituiu-se da designer (autora do TCC); da Escola Dinâmica e seus alunos (usuários analisados); Renata Krusser, mestre em ergonomia; e Clélia, coordenadora da Escola Dinâmica e especialista em Educação Infantil.

1.5 ESTRUTURA DO TRABALHO

O trabalho consta dos seguintes capítulos: a) o primeiro a introdução, que apresenta o tema do trabalho, incluindo sua problemática, justificativa e metodologia utilizada para a pesquisa; b) o segundo capítulo apresenta a pesquisa teórica com o título “Usabilidade de website educacional infantil”, onde esta a maior parte da pesquisa bibliográfica com estudos em áreas especificas como informática na educação, design de interação, usabilidade e ergonomia de interfaces. Este capítulo serviu para ajudar na criação da fase conceitual do projeto; c) no terceiro capítulo são apresentados os dados da situação atual do web site Zorelha também apresenta como foi a escolha e aplicação das técnicas de análise da usabilidade e ergonomia, e o resultado da aplicação destas técnicas. Este capítulo apresenta todos os dados relevantes para construção da nova interface; d) no quarto capítulo são apresentados o conceito e as etapas de desenvolvimento

19

do projeto de redesign do website Zorelha, bem como a proposta selecionada, avaliação do cliente e detalhamento da interface. É neste capitulo que mostra todas as fases de criação e desenvolvimento do projeto, e depois a proposta e análise do cliente e usuário; e) no quinto e último capítulo são apresentadas a conclusão, comentários e sugestões de trabalhos futuros, de forma que o trabalho possa sempre ter continuidade para melhora e aprimoramento do estudo infantil musical no ambiente virtual website Zorelha, sendo de forma agradável, educativa e sem usuários frustrados por não conseguir utilizar o site.

20

2 USABILIDADE DE WEBSITE EDUCACIONAL INFANTIL

Para atender ao objetivo proposto foi necessário desenvolver uma pesquisa multidisciplinar buscando subsídios em diversas áreas do conhecimento. Neste trabalho foram pesquisadas áreas como tecnologia, interação, educação, psicologia cognitiva, design de interação, usabilidade ergonomia de interfaces e comunicação visual para web, como veremos a seguir.

Itiro (2005); Matuzawa (2006); Memória (2006); Norman (2006) e Preece, Rogers e Sharp (2005) são alguns dos principais autores que contribuíram para o desenvolvimento do trabalho.

2.1

INFORMÁTICA NA EDUCAÇÃO

A pedagogia atualmente tem um foco maior na aprendizagem do que no ensino, reconhecendo que é necessário atingir os diferentes modos de aprender dos alunos. Para tanto, busca valorizar as diferenças e as experiências de cada aluno, diversificar os recursos e estimular a autonomia. Um ambiente virtual interativo é um rico recurso educacional porque possibilita formas diferentes de aprendizagem para o usuário.

As escolas que possuem laboratório de informática para as crianças podem utilizar softwares de educação em diversas áreas do ensino, e uma delas é o ensino da música.

Para Jesus (2008, p.1), “esta área é conhecida por musicalização infantil leva às crianças possibilidades de experimentação sonora e através destas o conhecimento de elementos do universo da música.”

Lenrschke e Del Bem (2003 apud JESUS, 2008) afirmam que a inserção da arte incluindo a música no processo de formação está sendo cada vez mais valorizada, há um reconhecimento de que a educação musical – seja ela formal ou informal – ensina às crianças requisitos importantes para a vida adulta.

Os aspectos lúdicos da multimídia também favorecem o uso educativo, mas o planejamento da interface educativa precisa considerar a diversidade de aprendizes e os diferentes contextos onde acontecerá a interação. Alguns já têm bastante familiaridade com

21

instrumentos, letras de música e ritmos, outros não desenvolveram habilidades nessa área, ou sequer prestaram atenção aos sons dos diferentes instrumentos. Os softwares educativos não excluem a interferência e participação do professor.

2.1.1 Educação, interação e tecnologia

A educação, a cada dia, utiliza mais recursos disponíveis no universo tecnológico para promover um aprendizado facilitado, confortável e interativo.

Nas últimas décadas, o avanço da tecnologia e sua obsolescência foram tais que nos permite dizer o que é avançado hoje. Amanhã poderão ser totalmente obsoletos.

Entretanto, a velocidade em que se dão as mudanças na tecnologia e na ciência não ocorre necessariamente da mesma forma na prática pedagógica. (OLIVEIRA NETTO, 2006, p. 9).

O mundo está acelerado e o desenvolvimento, principalmente das tecnologias de informação e comunicação, está diretamente presente nas atividades de aprendizagem.

Com este avanço constante da tecnologia, a área da educação tem procurado avançar no uso da tecnologia para aprimorar o aprendizado de seus alunos. Há alguns anos as escolas estão montando laboratórios de informática e utilizam softwares educativos para o aprendizado não apenas de informática, mas de diversas áreas de interesse pedagógico, incluindo artes e música.

Os ambientes virtuais de aprendizagem precisam estar adequados à concepção pedagógica, às fases de desenvolvimento da criança, à sua linguagem, serem adaptáveis aos diferentes interesses, conhecimentos prévios e às diferentes experiências no uso do computador. Um ambiente de ensino virtual adequado ao público-alvo pode propiciar ao aluno maior interesse, participação e facilidade no desenvolvimento das atividades. Já os ambientes virtuais de ensino sem a preocupação com o usuário além de se tornarem inadequados e ineficientes, podem ser prejudiciais. A diversidade de recursos e estratégias educativas favorece a aprendizagem porque estimula diferentes processos cognitivos. Não basta oferecer conteúdos ilustrados e animados em ricos ambientes virtuais. É necessário compreender como a criança aprende, favorecendo o processo individual de conhecer.

22

2.1.2 A cognição e o conhecimento

Norman (1993 apud Preece, Rogers e Sharp , 2005) afirma que n cognição está dividida em dois modos gerais: a cognição experimental e a cognição refletiva: a) a cognição experimental implica um estado mental no qual percebemos, agimos e reagimos aos eventos ao nosso redor de maneira eficaz e sem esforço. Exige que se atinja certo nível de perícia e envolvimento, como, por exemplo, em atividades como dirigir um carro, ler um livro, conversar, jogar videogame; b) a cognição refletiva envolve pensar, comparar e tomar decisões. Esse tipo de cognição promove novas idéias e a criatividade.

A psicologia cognitiva envolve o estudo e a pesquisa sobre muitos assuntos relevantes para educação, entre eles encontram-se as seguintes bases do conhecimento humano: aprendizagem, memória, linguagem, percepção, sensação, raciocínio, pensamento e interação.

A cognição estuda as bases do conhecimento humano.

2.1.3 Tipos específicos do processo cognitivo

Geralmente é raro acontecer algum processo cognitivo isolado, mas cada processo acontece de uma forma específica. O processo cognitivo mais estudado e relevante para a psicologia cognitiva é a memória.

Para Preece, Rogers e Sharp (2005): a) memória - implica recordar vários tipos de conhecimento que nos permite agir adequadamente, nos permite reconhecer e recordar – por exemplo, lembrar do rosto de alguém conhecido. Sem memória nós simplesmente não funcionaríamos.

Um processo de filtragem é utilizado para decidir que informação será processada e memorizada. Este processo de filtragem ocorre dependendo de como a informação foi interpretada. Quanto mais atenção é repassada à informação, mais fácil será de ser lembrada.

Implicações para o design memória: - não sobrecarregue a memória dos usuários com procedimentos complicados para realização das tarefas;

23

- projetar interfaces que promovam o reconhecimento, em vez da memorização, utilizando menus, ícones

e

objetos

significativamente

consistentes e bem posicionados; - oferecer ao usuário várias maneiras de codificar a informação eletrônica. Para ajudá-los a lembrar onde as armazenaram utilize cores, registro de data, ícones. b) atenção - consiste no processo de selecionar coisas em que se concentrar, num certo momento, dentre a variedade de possibilidade disponível.

A atenção nos permite focar uma informação que é relevante para o que estamos fazendo. Em que medida esse processo pode ser fácil ou difícil vai depender de termos objetivos claros e de informações que podem estar salientes no ambiente.

Quando não estamos certos do que estamos procurando, tentamos combinar isso com a informação que está disponível. Após olharmos as possibilidades, estamos aptos a tomar uma decisão.

Implicações para o design atenção: – fazer com que a informação fique saliente quando for necessário em um dado momento da realização de uma tarefa. Para tanto, utilize técnicas como gráficos animados, cores, sublinhado, ordenação de itens, seqüenciamento de informações diferentes e espaçamento de itens; – evitar entulhar a interface com muita informação, o que deve ser aplicado especialmente ao uso de cores, sons e gráficos: assim tentando utilizar muitos deles, resultando em uma mistura de mídias, que acaba por distrair e incomodar o usuário, em vez de auxiliá-lo a prestar atenção nas informações relevantes. As interfaces simples são muito mais fáceis de utilizar, como a da ferramenta de busca do Google. c) percepção - refere-se como a informação é adquirida do ambiente pelos diferentes órgãos sensitivos – por exemplo, olhos, ouvidos, dedos – e transformada em experiência com objetos, eventos, sons.

As informações precisam ser organizadas de modo a serem percebidas e reconhecidas adequadamente , implicações para o design percepção: – os ícones e outras representações gráficas podem possibilitar aos usuários descobrir rapidamente seu significado; – os sons devem ser claros e compreensíveis, de forma que os usuários atendam o que eles querem representar; – os textos devem possibilitar aos usuários como distinguir as palavras e

24

também seus significados; – o texto pode ser legível e diferente do fundo; – o feedback tátil utilizado em ambientes virtuais pode permitir aos usuários reconhecer o significado das várias sensações de toque distinguível, de forma que, por exemplo, a sensação de espremer seja representada de uma forma tátil diferente da sensação de empurrar. d) ler, falar e ouvir - estas três formas de processamento da linguagem têm propriedades semelhantes e diferentes. Uma similaridade diz respeito ao significado das sentenças ou frases ser o mesmo, sem levar em consideração o modo em que estão expressas.

Ouvir exige menos esforço cognitivo do que ler ou falar. As crianças, em especial, geralmente preferem narrativas em multimídias e materiais de ensino baseado na web a terem que ler o texto equivalente on-line.

Implicações para o design ler, falar, ouvir: – os menus e instruções comandados por voz devem ter poucos itens. As pesquisas mostram que as pessoas consideram difícil lidar com menus que apresentam mais de três ou quatro opções. Da mesma forma, não conseguem lembrar bem de conjuntos de instruções e direções que disponham de mais do que algumas partes; – acentuar a entonação das vozes de discursos gerados artificialmente, pois eles são mais difíceis de entender do que a voz humana; – oferecer a possibilidade de ampliar o texto na tela, sem alterar a formatação, para as pessoas que têm dificuldade de ler fontes pequenas. e) resolução de problemas - o planejamento, o raciocínio e a tomada de decisão são todos os processos cognitivos que envolvem cognição reflexiva. Implicam pensar sobre o que fazer, quais são as opções e quais podem ser as conseqüências de se realizar uma das ações.

Implicações para design resolução de problemas, planejamento, raciocínio e tomada de decisões: – fornecer informações adicionais que fiquem escondidas, mas que sejam fáceis de acessar para que os que desejarem saber mais a respeito de como realizar uma atividade com mais eficiência; – conhecendo as formas de interpretações das crianças o importante é explorar o universo infantil através de pesquisas teóricas e de campo. Vivenciando um

25

pouco deste universo dentro de escolas infantis pode ser relevante; – utilize suas próprias palavras para descrever as coisas, escrever sem usar termos específicos. Isso pode atrapalhar ao invés de ajudar a criança. f) aprendizado - envolve diferentes processos cognitivos de forma integrada. As tecnologias interativas, tais como as baseadas na web, multimídia e realidade virtual, oferecem maneiras alternativas de representar e interagir com a informação, oferecendo aos aprendizes a possibilidade de explorar idéias e conceitos de maneiras diferentes.

Implicações para o design aprendizado: – projetar interfaces que encorajem a exploração; – projetar interfaces que guiem os usuários na seleção das ações mais adequadas.

Se a criança estiver interessada, se divertindo e pensando, ela aprenderá. Crianças têm seu próprio modo de pensar. Ensino bom é aquele que incentiva a criança a pensar e raciocinar, ao invés de limitá-la. O que nos leva a confirmar a importância de conhecer e explorar o ambiente real infantil, sem o conhecimento aprofundado do ambiente educacional e conhecimento dos hábitos e comportamento do usuário. Seria praticamente impossível planejar um ambiente adequado para a educação infantil.

2.1.4 A cognição em ambientes virtuais de aprendizagem infantil

As estratégias educacionais devem levar em conta fatores emocionais, motivacionais, sensoriais e intelectuais.

2.1.4.1 Fatores emocionais

Goleman (1994 apud OLIVEIRA NETTO, 2004) destaca a inteligência emocional como um novo tipo de competência, que pressupõe um cultivo de aptidões que são próprias do “coração humano.”

Com tantas tecnologias que nos permitem analisar o cérebro e o corpo humano,

26

pesquisadores estão descobrindo como verificar quando o homem sente determinadas emoções e como preparar o corpo para as respostas: a) na raiva o sangue flui para as mãos, o que torna mais fácil sacar uma arma; b) no medo, o sangue corre para os músculos do esqueleto, como os das pernas, facilitando uma fuga; c) a sensação de felicidade causa uma das principais alterações biológicas. A atividade do centro cerebral é incrementada, o que inibe sentimentos negativos e favorece o aumento da energia existente; d) no amor os sentimentos de afeição e a satisfação sexual implicam estimulação parassimpática, o que contribui no oposto fisiológico que mobiliza para lutar ou fugir, que ocorre quando o sentimento é de medo ou ira. Provoca estado geral de calma e satisfação, facilitando a recuperação; e) o erguer das sobrancelhas, a surpresa, proporciona uma varredura visual mais ampla e também mais luz para a retina. Isso permite perceber exatamente o que está acontecendo e conceber o melhor plano de ação; f) a expressão da repugnância envia a mensagem de que alguma coisa desagradou. A expressão facial de repugnância sugere uma tentativa de evitar, jogar fora; g) a tristeza geralmente está associada a uma grande perda, como a morte ou decepção significativa.

Essa diversidade emocional relatada segundo Goleman (1994 apud OLIVEIRA NETTO, 2004) demonstra que existem momentos e situações que propiciam uma aprendizagem mais efetiva, com condições de formar novas estruturas mentais e relacionar de forma mais eficiente os conhecimentos adquiridos.

2.1.4.2 Fatores motivacionais

Segundo Oliveira Netto (2004) é necessário um constante estímulo às motivações do aprendiz. As situações de desafios durante a aprendizagem levam o aprendiz a se questionar sobre as decisões que vai tomar para que a situação se conclua com sucesso, favorecendo a aprendizagem.

27

2.1.4.3 Fatores sensoriais De acordo com Oliveira Netto (2004) o ser humano possui sistemas de percepção capazes de estimular o cérebro a interagir com o mundo, com o intuito de compreendê-lo ou de modificá-lo, de forma a garantir a adaptação. A qualidade dessa percepção varia de pessoa para pessoa e de cultura para cultura.

Perceber é conhecer através dos sentidos. Objetos e situações novos, oferecidos para experimentação, podem contribuir com a aprendizagem.

2.1.4.4 Fatores intelectuais

Conforme Oliveira Netto (2004) o homem busca aprimorar seus conhecimentos utilizando mecanismos de assimilação, acomodação e adaptação. As pessoas aprendem com seus erros e acertos.

Para Piaget (1978 apud OLIVEIRA NETTO, 2004) a inteligência é construída de forma continua, através de processos de abstração mental que resultam das relações entre indivíduo e objeto.

Os softwares de educação devem ter um ambiente com a navegação fluida e natural, com interação baseada nos aspectos emocionais, sensoriais, motivacionais e intelectuais completando o ciclo de aprendizagem, onde o aluno estaria sendo desafiado e interpelado sensorialmente em um rico espaço de aprendizagem com estímulos e feedback.

2.2 DESIGN DE INTERAÇÃO

Atualmente a interação com sistemas digitais acontecem diariamente em nossas vidas, durante as atividades que realizamos, segundo a definição de Amstell (2006, p. 10), “design de interação é a maneira como o produto proporciona ações em conjunto entre p essoas e sistemas.”

Para que isso ocorra de forma adequada é necessário, além dos aspectos funcionais, avaliar os aspectos emocionais, como a forma de uso do sistema e de que forma

28

este sistema é inserido na vida do usuário. A usabilidade é só um aspecto entre outros que o designer deve se preocupar. Outros aspectos do design de interação são: segurança, comportamento social, política, semiótica, persuasão, design de informação e acessibilidade.

Num ambiente como websites é necessário o foco no usuário. Não adianta o cliente gostar do produto se não satisfazer as necessidades do usuário.

Sendo assim, os projetos de interação permitem a interação dos usuários entre si e com o sistema. As características que o designer define para a interface vão facilitar ou dificultar tais interações. Interface é o meio entre o usuário e o sistema.

Figura 3 – Interpretação do design de interação.

Fonte – Amstell, 2006.

Para desenvolver um projeto de interface interativa é preciso conhecer o usuário através de pesquisas como a aplicação de testes de usabilidade e ergonomia que daram resultados e dados sobre como ele se comporta diante do sistema e depois transformar dados desta pesquisa em informações importantes para definição da interface.

Num sistema interativo muitos aspectos são controlados pelo usuário e, por isso, um sistema interativo terá que reconhecer a variação do comportamento humano.

Alguns aspectos que devemos considerar para planejar a usabilidade de sistemas interativos, relacionando as atitudes e desejos do usuário com os requisitos dos ambientes, são definitos por Amstell (2004, p.10), como sendo: Comportamento: buscar conhecimento, buscar se socializar.

Atividades: buscar novidades, verificar e-mails e (ou) recados.

Tarefas: acessar, escolher, ler, jogar, logar no sistema, escolher uma imagem.

Ação: digitar, apertar botão, rolagem, click.

Adaptação: rastro de navegação, memória de ações anteriores.

Fluxos: leitura, envio de mensagens ou recados, leitura de mensagens ou recados.

Controles: imput barra de rolagem, link, seta para baixo ou para cima e lados, menu (botões), send, caixa de entrada, mensagem.

29

2.2.1 Recursos visuais

Os recursos visuais utilizados para o desenvolvimento de um projeto interativo são: a) espaço; b) textura; c) som; d) tempo; e) aparência.

E devem ser trabalhados segundo algumas diretrizes: a) simplicidade; b) empatia; c) estética; d) imersão.

2.2.2 Conceitos da semiótica para interfaces

Mesmo que a semiótica seja uma disciplina muito antiga, seu desenvolvimento nos estudos atuais são todos de origem nos trabalhos do filosofo americano Charles Pierce (1839 – 1914) e da lingüística do suíço Ferdinance de Saussure (1857 -1915).

A semiótica tudo é tudo aquilo que sob algum aspecto, representa alguma coisa para alguém. A semiótica tem como objetivo o estudo dos signos e os sistemas de signos.

Quando o usuário interage com os objetos, esta interação é mediada por signos e cria uma experiência única para cada usuário, com a possibilidade de diferentes experiências.

Alguns dos principais conceitos da semiótica, segundo Mello (2003, p.20): Sinal: qualquer manifestação natural (a formação das nuvens, por exemplo) ou artificial (gestos com instrumento que formam grafismos toscos) que pode ser formada como advertência, previsão, indício ou intenção de algo que se forma. Os sinais, dependendo do contexto cultural e da maturidade do ser que os percebe, não são possuidores de significado.

Significado: Tudo aquilo que um sinal adquire pela freqüência de ocorrência, acordo ou convenção e que passa a constituir objetos concretos e abstratos dos conceitos inteligíveis ao ser humano. É o significado que altera o sinal para signo.

Signo: Qualquer sinal com significado que permite que se façam impressões mentais, e desse modo, o signo como significante de algo, permite que se relacione aquilo que conhecemos através de semelhanças de analogias, de causa ou de contigüidade com o referente. Os signos podem representar seu objeto como ícone, é

30 índice ou símbolo.

Na avaliação de uma interface é importante avaliar os significados que ela pode gerar. Para tanto, além de estudar a estrutura básica da imagem é necessário um olhar para os elementos que a compõem: as cores, as fontes escolhidas, como foram alinhadas, como foram organizados os grupos de informações, as luzes, o estilo de linha, as texturas, as perspectivas, os tamanhos relativos e como esses elementos se relacionam no todo. Cada elemento é significativo. Qualquer alteração numa composição muda também seu significado.

Muitas vezes se buscam referências no mundo familiar, representando-o no mundo virtual, em outras se utilizam metáforas, para gerar novos significados. Em ambientes virtuais de educação infantil muitas vezes são utilizadas representações de ambientes onde elas costumam se divertir, como praças e jardins. Assim, as crianças se identificam com o ambiente virtual e se sentem mais familiarizadas com a interação proposta pelo website.

A importância do estudo da semiótica neste trabalho é que ela nos oferece subsídios para analisar o significado dos elementos visuais da interface gráfica voltada para o público infantil. A interpretação dos ícones do site e dos significados gerados pela composição da estrutura geral da interface conduz o usuário favorecendo ou prejudicando a identificação e empatia com o ambiente, a eficiência na transmissão das informações desejadas, podendo contribuir para que o usuário obtenha sucesso no aprendizado.

Para fazer o estudo dos significados de uma imagem é importante considerar quatro aspectos: a) a estrutura da imagem - olhar a imagem procurando identificar qual é o principal aspecto formal do conjunto, a técnica usada para organizar o conteúdo visual, a direção prioritária do olhar; o significado e os sentidos gerados pelo conjunto da imagem; b) os elementos básicos de comunicação visual - perceber, com cada vez mais detalhes, os elementos que constituem essa imagem e seus significados, as cores, texturas, volumes, planos, etc; c) o contexto - identificar o contexto onde a imagem se insere; d) as impressões pessoais - e por fim considerar as impressões e sensações pessoais, ligadas a história e recordações de cada um. Os significado são diferentes para cada pessoa, dependem de aspectos psicológicos, culturais e do contexto onde se encontra.

31

A contribuição da semiótica para este trabalho tem como objetivo melhorar a eficiência das informações visuais. É também de extrema importância o cuidado na construção da estrutura visual de uma interface porque é ela que determina a impressão que o usuário terá do produto. E com esta contribuição, o site ficará muito mais ágil e eficiente, utilizando uma linguagem apropriada para seu público-alvo.

2.3 USABILIDADE E ERGONOMIA DE INTERFACES

Itiro (2005), entre outros autores, apresenta o conceito de usabilidade e ergonomia como à facilidade e comodidade para o uso de produtos, de forma que estes produtos sejam fáceis de entender, fáceis de operar, e com pouquíssima margem de erro. A usabilidade está relacionada com a eficiência geral do produto e para que isso aconteça de forma segura sua interface deve ser adequada ao usuário.

Uma interface com a estrutura projetada com estudos de usabilidade e ergonomia centrada no usuário permite uma navegação fluida, facilitando a experiência no ambiente e favorecendo as chances para que ele retorne a usar o ambiente virtual.

A usabilidade tem componentes múltiplos e é associada a cinco atributos: a) ser fácil de aprender: o sistema deve ter aprendizado simples para o usuário; b) ser eficiente na utilização: o sistema deve ser eficiente para que o usuário aprenda como utilizá-lo, possa alcançar altos níveis de produtividade; c) ser fácil de ser recordado: o sistema deve ser fácil de ser lembrado, para que o usuário possa voltar a utilizá-lo depois de algum período inativo, sem ter que aprender tudo novamente; d) ter poucos erros: a taxa de erros do sistema deve ser baixa, para que o usuário cometa poucas falhas durante a utilização, e mesmo que cometa erros consiga facilmente recuperar o que foi perdido. Erros incorrigíveis não devem ocorrer; e) ser subjetivamente agradável: o sistema deve ser agradável de ser usado, para que o usuário fique satisfeito ao utilizá-lo.

A quantidade de erros pode indicar ineficiência do controle. Pode-se facilitar a identificação visual usando cores que sejam visíveis e melhorar as dimensões, distanciamento entre botões e a distribuição espacial entre os mesmos para que esses erros sejam reduzidos. (ITIRO, 2006, p. 320).

32

Para se avaliar a usabilidade é necessário fazer um levantamento de dados durante aplicação de testes de usabilidade com o usuário, registrando e documentando informações sobre como ele usa e interage com a interface.

Segundo Matuzawa (2007), avaliar uma interface irá contribuir para garantir que o sistema reúna todos os requisitos necessários para uma interação confortável entre o usuário e a interface, sendo necessário avaliar todo o ciclo de vida das interfaces.

Através da análise da usabilidade é possível avaliar o grau de satisfação do usuário durante a navegação e se o mesmo consegue executar as tarefas necessárias para atingir os objetivos propostos pelo site.

2.3.1 Navegação

Para ter certeza que o projeto de navegação esta bom é preciso saber se o usuário consegue responder durante a navegação, onde ele está, onde ele estava e para onde ele quer ir. Com estas questões respondidas, basta verificar se a interface tem as dez qualidades apresentadas por Fleming (1998 apud MEMÓRIA, 2005): a) ser facilmente aprendido: se o usuário for obrigado a gastar tempo aprendendo como o website funciona, ele não terá energia para absorver o conteúdo do site; b) ter consistência: quando se desenvolve um sistema de navegação que funciona; c) dar retorno: está condicionado a esperar reações às nossas ações. Quando apertamos um botão ou giramos o volume do som, obtemos sempre alguma resposta. Durante a navegação na web, a mesma coisa deve acontecer. Exemplos de retorno utilizados na prática são os botões roll-over, que sofrem uma modificação no visual quando se passa o cursor sobre eles e podem revelar mais detalhes sobre o link ou a imagem; d) estar contextualizado: para realizar tarefas as pessoas precisam das ferramentas corretas. A navegação deve estar aparente, com todo o link aparecendo, para que não seja necessário usar recursos do navegador ou tentativa de erro. Evitar redundância, seja específico. Exemplo: clique aqui; e) oferecer alternativas: é recomendável oferecer alternativas de navegação.

33

Esse conceito muitas vezes está associado à questão da acessibilidade, vai muito além dos padrões de implementação que ajudam pessoas com deficiência auditiva ou visual; f) garantir economia de tempo e ações: fazendo um paralelo ao mundo real, Fleming fala sobre as longas viagens que as pessoas fazem com as crianças, em que a pergunta mais comum delas é “se já está chegando”. Segundo a autora, devemos evitar longas viagens, ou seja, caminhos desnecessários longos e que causam frustração nos usuários; g) prover mensagens visuais claras: o processo de layout de uma tela não é somente um processo embelezador das páginas, é comunicação visual, sinalização. O design deve guiar o usuário, comunicar corretamente a mensagem, facilitando o processo de navegação e aumentando a usabilidade. Isso inclui cores, formato de botões, link e posicionamento de informações que funcionem como auxílio visual para as pessoas. Essa comunicação visual está diretamente relacionada às convenções de interface; h) criar nomenclaturas claras: uma comunicação mal elaborada pode levar a interpretações ambíguas, dificultando a navegação; i) seguir o propósito do site: deve ser projetado de acordo com os objetivos do site e dos usuários; j) apoiar e ajudar os objetivos do usuário: o principal objetivo da navegação é dar suporte às tarefas do usuário e seus objetivos dentro de um site específico. “O que o usuário vai querer fazer?” ou “Como ele vai se comportar?”. Entender o comportamento do usuário é o passo mais importante para projetar uma navegação eficiente, e os testes de usabilidade são ferramentas poderosas para saber se a navegação realmente funciona.

2.3.2 A construção da interface centrada no usuário

Uma das principais partes de um sistema é a parte visível para o usuário e é através dela que o usuário se comunica com o sistema para realizar as tarefas do ambiente.

Para criar uma interface é preciso ter claro qual é o público-alvo, o objetivo do produto e quais são as principais tarefas a serem executadas no sistema.

34

Em The elements of interfaze, disse Agner (1997 apud OLIVEIRA NETTO, 2004, p. 74): É preciso buscar dado junto às pessoas que estão efetivamente utilizando os sistemas, não junto às pessoas que gerenciam suas organizações ou que possuem uma visão estreita sobre o que os usuários realmente fazem. Adquirem-se informações completamente díspares das pessoas que decidem ou investidores, em relação às informações fornecidas pelos usuários reais dos produtos de tecnologia da informação.

Portanto, é importante saber ouvir o que os usuários têm a dizer. Tudo o que o usuário diz representa sua visão pessoal e preferência individual sobre o produto que está sendo desenhado ou avaliado. Daí a importância de se coletar dados suficientes relevantes para construção da nova interface, de modo a determinar sugestões comuns e não opiniões individuais. Deve-se reunir feedback de um grupo de indivíduos, com uma ampla gama de experiências profissionais, pessoais e computacionais.

A pesquisa dos hábitos e comportamento do público-alvo possui informações fundamentais para o trabalho a fim de saber e conhecer com quem estamos trabalhando, alinhando assim a comunicação, interface, programação, enfim, tudo para projetar soluções que funcionem bem para cada usuário.

2.3.3 As interfaces expressivas

A interface consiste em utilizar elementos gráficos para transmitir estados emocionais. Um bom exemplo utilizado por Preece; Rogers e Sharp (2005) é a marca da Apple que utiliza um ícone que aparece na tela quando a máquina é inicializada. O ícone sorridente quer transmitir uma sensação de cordialidade, o que deixa o usuário confortável e seguro e passa a mensagem de que tudo está correndo bem.

Preece; Rogers e Sharp (2005, p.163) apresentam formas de transmitir mensagens de um sistema: – Ícones dinâmicos: por exemplo, a lixeira se enchendo quando um arquivo é nela inserido.

– Animações: por exemplo: uma abelha voando na tela, indicando que o computador está fazendo algo, como verificar arquivos.

– Mensagens faladas: utilizando vários tipos de vozes e dizendo ao usuário o que precisa ser feito.

– Vários sons indicando ações e eventos: um exemplo é uma janela se fechando, arquivos sendo arrastados, mensagens novas de e-mail chegando.

35

A vantagem dos detalhes expressivos é o feedback que transmite segurança ao usuário e confirma que o sistema está trabalhando muito bem.

O estilo de uma interface é definido pelas formas, fontes, cores e elementos gráficos que são utilizados e como eles são combinados. Isso tudo resulta no conforto e satisfação do usuário em relação ao sistema.

As formas expressivas transmitem estados emocionais e por isso em alguns casos provocam respostas emocionais positivas e em outros emocionais negativas – a mais comum é a frustração do usuário. É fato de que todos que utilizam a internet já passaram por uma experiência frustrante ao utilizar uma interface mal projetada, e os efeitos desta frustração vão desde achar graça até ficar extremamente indignado. Preece, Rogers e Sharp (2005, p. 167) coloca algumas das razões que levam às reações negativas emocionais: – Quando a aplicação não funciona adequadamente ou falha; – Quando um sistema não faz o que o usuário deseja; – Quando as expectativas do usuário não são atendidas; – Quando um sistema não fornece informações suficientes que permitam ao usuário saber o que fazer; – Quando as mensagens de erro são vagas, confusas ou reprovadas; – Quando a aparência de uma interface apresenta muitos efeitos de cor ou é muito confusa, espalhafatosa ou muito autoritária; – Quando um sistema requer que os usuários realizem muitos passos para cumprir uma tarefa, então descobrir que um erro foi cometido em alguma parte do procedimento e que será preciso começar tudo de novo.

Uma interface mal projetada pode causar efeitos e levar o usuário a abandonar o ambiente e talvez nunca mais voltar. Alguns exemplos básicos de frustrações apresentados por Preece, Rogers e Sharp (2005) procuram despertar a importância de que esses erros podem ser evitados ou reduzidos.

– Ilusões causadas pelas expectativas do usuário: quando não são atendidas e em vez disso é apresentado um display ilusionista. Um exemplo é um site ainda em desenvolvimento; – Aparência causada: quando a aparência da interface é desagradável geralmente também não funciona.

Assim, a interface pode reduzir os riscos e não causar a indignação no usuário.

Para isso, ela deve ser simples, facilmente percebida, elegante, e deve estar de acordo com os princípios da usabilidade e ergonomia e seguir estas recomendações.

36

2.3.4 Técnicas para avaliação da usabilidade

Para avaliar a usabilidade podemos utilizar diferentes técnicas:

a) técnicas preditivas ou diagnóstica - buscam prever os erros sem a participação direta do usuário.

Durante a aplicação das técnicas preditivas o usuário não participa. A avaliação baseia-se em versões intermediárias ou finais e podem ser: – avaliação analítica: envolve a decomposição hierárquica da estrutura para verificar as interações propostas. Para fazer uma avaliação analítica são descritos os métodos necessários à realização de objetivos específicos. Os métodos são uma série de passos que consistem nas ações que os usuários realizam para atingir determinados objetivos. Essas ações podem ser atos motores (clicar, teclar, arrastar, mover rosto), cognitivos (lembrar, planejar, raciocinar), perceptivos (ver, ouvir, sentir) ou uma combinação de todos; – avaliações heurísticas: baseiam-se nos conhecimentos ergonômicos e na experiência dos avaliadores que percorrem a interface ou seu projeto para identificar possíveis problemas de interação humano-computador; – inspeções por checklist: usam listas de verificação das funcionalidades do website. b) técnicas prospectivas - buscam a opinião do usuário sobre a interação com o sistema. Uma maneira de fazer a análise é usar questionários em que o usuário responde questões sobre facilidades e dificuldades, faz sugestões e críticas. Pode ser usado durante toda a vida útil da interface.

Para elaborar um questionário de satisfação é importante ter atenção aos seguintes itens: – número pequeno de questões; – cuidado com questões ambíguas, seja sucinto; – deixar o usuário expressar sua opinião por meio de sugestões e críticas.

Existem alguns modelos de questionários para análise de usabilidade de websites como o QUIS – Questionaire for user interaction satisfaction. Modelo de questionário disponibilizado na internet aborda questões como legibilidade, layout de telas, significado de ícones, interação e terminologia. Acesso em

37

<www.lap.umd.edu/QUIS/index.html> UNIV Maryland (Norman, 1989) e o SUMI – desenvolvido pelo Human Factors Reserch Group da Universidade de Cork, Irlanda, procura medir a usabilidade considerando percepções a atitudes dos usuários. c) técnicas objetivas ou empíricas - Buscam constatar os problemas através da observação do usuário navegando no sistema.

38

3 ANÁLISE DA SITUAÇÃO ATUAL DO WEBSITE DE EDUCAÇÃO ZORELHA

O site de educação infantil musical Zorelha (figura 4) é um objeto de aprendizagem para auxiliar o desenvolvimento da percepção musical das crianças. O responsável pela criação do sistema e desenvolvimento foi Elieser Ademir de Jesus, e teve como mérito o título da graduação do curso de Ciência da Computação da Universidade do Vale do Itajaí.

Figura 4 – Interface gráfica do ambiente de educação musical Zorelha.

Fonte: Zorellha, 2008.

O principal objetivo do website Zorelha é servir como uma ferramenta para a exploração sonoro-musical e em conseqüência desta possibilitar o desenvolvimento da percepção musical infantil.

Para desenvolver o redesign da interface, foi preciso contato direto com o usuário desde o início do trabalho por se tratar de algo que não é novo. Sua interface será criada com base nas experiências dos usuários com o objetivo de torná-la mais fácil de usar e agradável em relação à interface atual.

39

3.1 PUBLICO ALVO

O público-alvo do Zorelha são crianças de 4 a 6 anos, que nessa idade estão sendo inseridas no mundo virtual, ou seja, estão aprendendo como utilizar o computador e a informática. Em algumas escolas existem salas de aula de informática, onde os alunos interagem em ambientes de educação infantil. A criança dessa idade ainda não foi alfabetizada, o que demonstra a importância do ambiente ser apresentado através de uma interface dequada e de narração.

Considerações a respeito das capacidades musicais de crianças de 4, 5 e 6 anos: • 4 anos: a criança progride no controle da voz; participa com facilidade de jogos simples, cantados; interessa-se muito em dramatizar as canções; cria pequenas músicas durante a brincadeira; • 5 anos: a criança entoa mais facilmente e consegue cantar melodias inteiras; reconhece e gosta de um extenso repertório musical; consegue sincronizar os movimentos da mão ou do pé com a música; percebe a diferença dos diversos timbres (vozes, instrumentos, objetos), dos sons graves e agudos, além da variação de intensidade (sons fortes e fracos); e • 6 anos: a criança percebe seqüências de sons ascendentes e descendentes; identifica ritmos, os fraseados musicais, as variações de andamento e a duração das notas; acompanha e repete uma seqüência rítmica. (JEANDOT, 1993 apud JESUS, 2008, p.22).

3.2 ESTRUTURA DO WEBSITE ZORELHA No diagrama (figura 5) podemos observar as tarefas oferecidas pelo sistema do Zorelha:

Figura 5 – Diagrama da navegação principal do website Zorelha.

Fonte: JESUS (2008, p. 39).

40

A estrutura esta dividida nas duas tarefas oferecidas pelo site do site são divididas em duas como mostra o menu da página inicial dos fator observados do fluxo de uso é o carregador do ambiente (figura 7), que carregar toda vez que se escolhe uma opção diferente dos menus disponíveis.

Na tela da abertura do website (figura 1) automaticamente aparece à personagem intitulada como professora (figura 6) que apresenta o ambiente e orienta o usuário durante a navegação; em seguida aparece o menu inicial com duas opções para o usuário: módulo jogo e módulo show.

Modulo show: é a opção disponível para a criança logo no inicio no menu da página inicial, seu ícone representado pela imagem da bateria (figura 7), a criança escolhe a musica, o estilo sonoro e depois escolhe os músicos que irão para o palco fazer o show.

Modulo jogar: é basicamente a mesma interação que o modulo show com uma única diferença que a criança escolhe a música e o estilo sonoro, então o sistema baseado nas primeiras escolhas sorteia um instrumento e toca assim para a criança que deve escutar o som e clicar no musico que está com aquele instrumento que tocou, caso a criança acerte o personagem avisa que ela acertou e irá para o próximo instrumento e assim vai montando toda a banda que aparece no palco.

Figura 6 – Professora do website Zorelha.

Fonte: Zorellha, 2008.

41

Figura 7 – Imagem do carregador do web site Zorelha.

Fonte: Zorelha, 2008.

Figura 8 – Menu da tela de abertura do website Zorelha.

Fonte: Zorelha, 2008.

A estrutura do website é simples, mas o fluxo de navegação encontra-se confuso porque as funções oferecidas pelos menus não estão facilmente reconhecíveis, um exemplo é o menu inicial.

3.2.1 Menu 1 – Repertório de músicas

O menu da coluna esquerda onde o usuário escolhe o repertório de músicas do Zorelha oferece quatro músicas folclóricas infantis: a) o sapo não lava o pé;

42

b) atirei o pau no gato; c) marcha soldado; d) cai, cai balão.

Figura 9 – Menu 1, botões para escolha das músicas.

Fonte: Zorelha, 2008.

3.2.2 Menu 2 – Sonoridades

O menu da coluna do lado direito dispõe das opções de sonoridade. Segundo Jesus (2008) estas sonoridades foram definidas junto com uma especialista em Educação Musical, e assim utilizadas quatro sonoridades diferentes: – A sonoridade do rock: a sonoridade do rock é amplamente difundida em todo o mundo e é parte da realidade cultural dos alunos;

Figura 10 – Personagens do estilo Rock.

Fonte: Zorelha, 2008.

– A sonoridade dos ritmos nordestinos: o Nordeste brasileiro apresenta uma grande variedade de ritmos e instrumentos musicais característicos;

43

Figura 11 – Personagens do estilo sonoro nordestino.

Fonte: Zorelha, 2008.

– A sonoridade do samba: o samba é considerado um dos gêneros musicais mais populares do Brasil;

Figura 12– Personagens do estilo samba.

Fonte: Zorelha, 2008.

– A sonoridade do corpo humano: uma das possibilidades de se produzir sons musicais é utilizando o próprio corpo humano como um instrumento musical – uma oportunidade de educadores musicais realizarem atividades com os “sons do corpo” em suas aulas de musicalização infantil;

Figura 13 – Personagens da sonoridade do corpo humano.

Fonte: Zorelha, 2008.

44

Figura 14 – Menu 2, botões para sonoridades.

Fonte: Zorelha, 2008.

3.2.3 Menu 3 – Músicos e Instrumentos

Este é o local (figura 15) onde aparecem os personagens que o usuário irá posicionar no palco conforme as setas que são para mover o músicos no palco.

Figura 15 – Menu onde os músicos ficam posicionados apos escolha do estilo, e o usuário escolhe qual vai para o palco.

Fonte: Zorelha, 2008.

45

3.3 ESCOLHENDO AS TÉCNICAS DE ANÁLISE DA USABILIDADE PARA O PÚBLICO INFANTIL

O conhecimento sobre o mundo e cotidiano do público infantil pode evitar danos irreparáveis, principalmente no que diz respeito à educação infantil. Efeitos negativos sobre o usuário, como achar que o erro seja seu e não da interface mal projetada, podem ser evitados com adequação do ambiente ao projeto pedagógico e com uma cuidadosa avaliação da usabilidade. Matuzawa (2007, p.122) afirma que: uma interface não pode atender ao mesmo tempo todos os seus usuários em potencial. Para que ela não tenha efeitos negativos sobre o usuário, esta interface deve estar conforme o contexto, se adaptar ao usuário (...). Deve-se, portanto, fornecer ao usuário procedimentos, opções, comandos diferentes, permitindo-lhe alcançar um mesmo objetivo.

Para desenvolver uma estrutura de navegação e linguagem adequada para o público infantil, o redesign do website Zorelha procura além de analisar o site atual, sua estrutura e funcionalidades, observar o uso no ambiente infantil real, conhecendo este usuário, chegando o mais próximo possível de seu universo.

Para escolher as melhores formas de analisar o website foi considerado o públicoalvo, o objetivo do site, o cronograma e os recursos disponíveis para desenvolver o trabalho.

3.3.1 Requisitos para escolha das técnicas usadas no redesign do website Zorelha:

a) adequada ao público infantil; b) eficiente e objetiva; c) possibilidade de aplicação no ambiente real do usuário; d) contato direto com o usuário; e) ser significativa para aplicação com no máximo 15 crianças; f) responder às questões específicas; g) custo baixo.

Para a avaliação da interface analisamos as vantagens e desvantagens de algumas técnicas.

46

Entre as técnicas preditivas optamos por fazer uma análise da estrutura do site e investigar as heurísticas ergonômicas de Sebastian e Scarpin através da lista de verificação ergolist do Laboratório de Utilizabilidade da Universidade Federal de Santa Catarina (UFSC), disponível ao público no site <www.labiutil.inf.ufsc.br/ergolist/>. Considerando a sua natureza diante da tarefa a ser executada, a estrutura pequena de links e a simplicidade dos objetivos, nos parece que essas análises são viáveis no nosso cronograma e útil para indicar problemas de navegação.

Entre as técnicas prospectivas foi aplicado de um questionário com as crianças e uma entrevista com a professora, adaptados para a realidade do projeto em questão. A técnica do questionário é boa para responder a questões específicas.

A vantagem desta técnica é que pode atingir várias pessoas com poucos recursos; e a desvantagem é o índice de respostas que pode ser baixo e requer tempo.

A técnica de entrevista explora melhor as questões de acordo com o objetivo em questão e oferece dados qualitativos – sua vantagem é a aplicação no ambiente real do usuário, o que possibilita também a observação do ambiente.

A técnica objetiva de observação foi aplicada na Escola Dinâmica Kids durante as aulas de informática do infantil 4 e 5 com crianças de 4, 5 e 6 anos. Foi utilizado o software espião Camtasia para gravar as ações das crianças.

A técnica de observação natural é adequada para entender o contexto do universo infantil em seu ambiente real, adquirir dados qualitativos e poder observar o usuário em seu ambiente agindo com naturalidade, uma vantagem que nenhuma outra técnica oferece. A única desvantagem é que requer muito tempo, mas se consegue grande quantidade de dados.

Outra técnica adequada para conseguir bons dados neste trabalho é a técnica grupo de foco: pode-se conseguir dados com vários pontos de vista qualitativos e quantitativos. Sua vantagem é a coleta de opiniões e usuários diferentes ao mesmo tempo, e a desvantagem é a possibilidade de serem influenciados pelos colegas.

3.4 TÉCNICAS PREDITIVA APLICADA – ANÁLISE ERGONOMICA DA INTERFACE

Esta técnica nomeada como análise heurística é uma maneira de verificar se a interface está adequada para o usuário – procura sintetizar um problema da interface, ou seja, situações quando a interface fica difícil de ser usada. Esta foi a primeira técnica utilizada para

47

avaliação da interface Zorelha: a lista de verificação, aplicado o modelo sugerido pela autora Flavia

L.

Matuzawa

o

Ergolist,

disponível

<http://www.labiutil.inf.ufsc.br/ergolist/check.htm>,

na

internet

no

endereço

oferece no final um relatório da

avaliação, a lista está baseada nos critérios ergonômicos de Scapin e Bastien.

A aplicação desta técnica teve como objetivo verificar o site e decompor em objetivos e tarefas necessárias para atingi-los, e observar os caminhos e a orientação para se chegar lá.

Esta técnica ajuda na reestruturação da nova interface, analisando o mapa do site e relatando se os objetivos e os passos são claros e fáceis de seguir.

Primeiramente será apresentado o relatório do sistema Ergolist, que através dele foi organizado em forma de tabela (tabela 1), uma estrutura onde mostra os problemas da interface. Estes problemas foram classificados como intensidade alta e baixa, sendo as cédulas de cor amarela de intensidade baixa e cédulas vermelhas de intensidade alta.

Foram escolhidas as heurísticas descritas pela Ergolist (2008) resumidas da seguinte forma: a) flexibilidade - verifica se o sistema permite personalizar as apresentações e os diálogos; b) experiência do usuário - avalia se usuários com diferentes níveis de experiência têm iguais possibilidades de obter sucesso em seus objetivos; c) proteção contra erros - verifica se o sistema oferece as oportunidades para o usuário prevenir eventuais erros; d) mensagens de erro - avaliam a qualidade das mensagens de erro enviadas aos usuários em dificuldades; e) correção de erros - verifica as facilidades oferecidas para que o usuário possa corrigir os erros cometidos; f) consistência - avalia se é mantida uma coerência no projeto de códigos, telas e diálogos com o usuário; g) significados - avalia se os códigos e denominações são claros e significativos para os usuários do sistema; h) compatibilidade - verifica a compatibilidade do sistema com as expectativas e necessidades do usuário em sua tarefa; i) presteza - verifica se o sistema informa e conduz o usuário durante a interação; j) agrupamento por localização - verifica se a distribuição espacial dos itens traduz as relações entre as informações;

48

k) agrupamento por formato - verifica os formatos dos itens como meio de transmitir associações e diferenças; l) feedback - avalia a qualidade do feedback imediato às ações do usuário; m) legibilidade - verifica a legibilidade das informações apresentadas nas telas do sistema; n) concisão - verifica o tamanho dos códigos e termos apresentados e introduzidos no sistema; o) ações mínimas - verificam a extensão dos diálogos estabelecidos para a realização dos objetivos do usuário; p) controle do usuário - avalia as possibilidades do usuário controlar o encadeamento e a realização das ações; q) ações explícitas - verificam se é o usuário quem comanda explicitamente as ações do sistema; r) densidade informacional - avalia a densidade informacional das telas apresentadas pelo sistema.

49

3.4.1 Relato do teste da técnica preditiva – análise da interface

Heurística atingidas, erros classificados por gravidade baixa e alta..

Tabela 1 – Problemas de usabilidade encontrados na interface do website Zorelha, glossário das heurísticas atingidas em anexo.

Fonte: Elaboraçao do autor.

50

3.5 TÉCNICA OBJETIVA APLICADA – TESTES COM O USUÁRIO

A aplicação desta técnica teve a participação e contato direto com o público infantil – foi realizada com 20 crianças de cada turma, observadas durante as aulas de informática no dia 9 de setembro de 2008 na Escola Dinâmica, sob orientação e auxílio da professora Patrícia Lemos e avaliação da acadêmica Silmara Poletto. Obteve-se resultados para a pesquisa de caráter qualitativo.

A avaliação da aplicação desta técnica objetiva aconteceu com as crianças do infantil 4 e 5 com idade entre 4 e 6 anos. A professora Patrícia Lemos apresentou o website Zorelha e deixou que as crianças explorassem livremente o software, e quando necessário as orientava.

A avaliadora Silmara observou e registrou os dados da avaliação com uma máquina fotográfica, além do software Camtasia e anotações.

Figura 16 – Foto registro do momento da navegação das crianças no ambiente Zorelha.

Fonte: Elaboração do autor, 2008.

51

Figura 17 – Foto registro do momento da navegação das crianças no ambiente Zorelha.

Fonte: Elaboração do autor, 2008.

Figura 18 – Foto registro do momento da navegação das crianças no ambiente Zorelha.

Fonte: Elaboração do autor, 2008

52

Figura 19 – Foto registro do momento da navegação das crianças no ambiente Zorelha.

Fonte: Elaboração do autor, 2008.

3.5.1 Relato da técnica objetiva – participação do usuário

Inicialmente com a primeira turma com seis alunos verificou-se que existem problemas de usabilidade, e a participação das crianças foi fundamental para detectar tais problemas.

Figura 20 – Imagem do cursor utilizado no Zorelha.

Fonte: Zorelha, 2008.

53

Figura 21 – Imagem do cursor utilizado.

Fonte: Zorelha, 2008.

A imagem do cursor é muito similar à imagem do cursor da internet Explorer, o que confunde o usuário quando está na tela do Zorelha ou quando está no navegador do Explorer. No momento que o usuário coloca o cursor numa área de clicar a imagem se transforma em uma mão, o que causa confusão para a criança. Esta mudança também deixa o cursor lento, o que faz a criança achar que não está funcionando.

Figura 22 – Imagem do menu da página de entrada.

Fonte: Zorelha, 2008.

NA (figura 22) mostra a imagem que representa o menu onde aparece primeiro o usuário faz a primeira escolha entre o módulo show e modulo jogo.

Módulo show: o usuário escolhe a música que deseja que a banda toque, depois escolhe um estilo das sonoridades para os instrumentos musicais.

Módulo jogo: o usuário escolhe uma música, um estilo da sonoridade para os instrumentos e depois tem que adivinhar o som do instrumento que está tocando.

O problema identificado está na leitura do menu: a caixa de som não remete que seja uma interação de jogo, e a bateria não remete que seja para montar uma banda para o show.

54

Figura 23 – Imagem do carregador.

Fonte: Zorelha, 2008..

Esta é a imagem (figura 23) que representa o carregador do site. Este carregador aparece toda vez que a criança escolhe uma opção diferente no site, e isso deixou as crianças irritadas – geralmente as crianças não têm muita paciência para esperar, o que torna a navegação “chata”, como disse a aluna Luiza, que participou do teste. Luiza: “Que demora essa música chata” (referindo-se ao carregador).

A lentidão, a imagem e a música que toca quando está carregando o website deixaram as crianças impacientes.

Figura 24 – Imagem da personagem que apresenta o website do Zorelha.

Fonte: Zorelha, 2008.

Na análise comparativa com websites (descrito na sessão secundária 3.7) foi observado que na maioria dos websites destinados ao público infantil o personagem se apresenta de corpo inteiro, e não apenas a sua cabeça. O personagem de corpo inteiro é mais

55

agradável de se ver e dá mais abertura para a criança interagir no ambiente. O gráfico também pode ser melhorado.

Figura 25 – Imagem das setas para mover o músico para frente e para trás.

Fonte: Zorelha, 2008.

Estas são as setas (figura 25), utilizadas para mover o músico no palco para frente e para trás, uma interação que foi apontada como difícil de ser reconhecida para sua função, as setas não demonstram de forma clara que é para o músico ir para frente e para trás. E pode ser resolvida com uma simples ação de arrastar o músico, o que dá mais opção para a criança interagir no ambiente.

3.5.1.1 Considerações finais do relato da técnica objetiva – participação do usuário

As crianças não gostaram muito de esperar. Quando elas escolhem uma nova opção do website Zorelha, como uma música ou estilo sonoro, têm que esperar carregar e são obrigadas a escutar várias vezes a mesma música do carregador, a imagem do carregador e a música são definidas pelos alunos como “chata”, e deixa o usuário sem opção. Uma das soluções possíveis pode ser carregar sem som e com animação, deixar a opção disponível para escolha da criança com ou sem som. O site ficaria mais leve e eliminaria o problema da tal música “chata”, como comentou a aluna Luiza.

Outra observação foi a dificuldade de clicar, primeiro por causa da imagem do cursor que confunde, segundo porque a área de clique está muito próxima da borda do menu.

Deixar um espaço considerável em volta do ícone ajudaria a resolver o problema; já a imagem

56

do cursor resolveria se a mesma fosse uma só, sem trocar quando o cursor passar na área de clique do botão. Esta função realmente é importante para que a criança reconheça um botão, mas existem outras formas de dar destaque para a área de clique de um botão. Uma solução que pode ser adequada para o trabalho é o uso de cores.

A participação das crianças foi fundamental para detectar os problemas e pensar em um diagnóstico correto baseado nos problemas reais encontrados no uso do website, além de proporcionar uma abertura entre as crianças e o avaliador – desta forma as crianças podem expressar espontaneamente suas vontades.

Tabela 2 – Tabela de porcentagem onde demonstra em porcentagem das crianças que tiveram dificuldades e onde foi que ocorreu.

Tiveram

dificuldade

e sim

Não

pediram ajuda Imagem do cursor

40%

60%

Carregador

60%

30%

Menu inicial

90%

10%

Personagem

70%

30%

apresentadora Fonte: Elaboraçao do autor.

3.6 TÉCNICAS PROSPECTIVAS APLICADAS – QUESTIONÁRIO E ENTREVISTA

O SUMI - para aplicação desta técnica foi adequada as perguntas sugeridas pela técnica Sumi para o questionário feito com as crianças.

O questionário foi aplicado em um grupo de crianças da escola dinâmica, e foi aplicado logo após o teste de observação, com quatro perguntas simples e objetivas para não confundir as crianças e causar dúvidas na hora de responder. Também foi feita uma entrevista com a professora, que respondeu sobre o que achou do website Zorelha e como foi auxiliar as crianças durante o teste.

57

3.6.1 Relato da entrevista realizada com as crianças da Escola Dinâmica

GRUPO 1 Participantes do grupo 1: Juliana, Diogo, Ian, Luiza Faixa de idade: 4 e 5 anos GRUPO 2 Participantes do grupo 2: Daniel, Vinícius, Francisco, Luana Faixa de idade: 5 e 6 anos GRUPO 3 Participantes do grupo 3: André, Heloisa, Pedro, João Faixa de idade: 4 e 5 anos GRUPO 4 Participantes do grupo 4: Murilo, Kian, Julia, Sabrina.

Faixa de idade: 5 e 6 anos GRUPO 5 Participantes do grupo 5: Francisco, Breno, Sophia, Patrícia.

Faixa de idade: 4 e 5 anos

Breve resumo da entrevista:

1 Você achou fácil ou difícil usar o Zorelha?

“Um pouquinho...”

“Eu tive e chamei a professora.”

2 O que você mais gostou no Zorelha?

“O show.”

“As músicas.”

3 Você conseguiu conhecer os instrumentos musicais no Zorelha?

“Sim.” „Alguns.”

4 Qual foi o momento mais difícil para você?

“Foi quando vi a primeira escolha.”

58

“O jogo de descobrir os instrumentos.”

“Clicar nos objetos.”

Com o resultado da entrevista foi montado uma tabela de porcentagem para identificar os erros mais comentados: Tabela 3 – Tabela para identificação os erros mais graves:

legenda

Pergunta1

Pergunta2

Pergunta3

Pergunta4

% dificil

%show

%sim

% menu

% fácil

%musicas

%alguns

inicial % área de click dos botões

GRUPO 1

GRUPO 2

GRUPO 3

GRUPO 4

GRUPO 5

70%

40% show

80 %

60 %

30%

60% musicas

20 %alguns

40 %

80%

30%

90%

80%

20%

70%

10%alguns

20%

60%

50%

80%

100%

40%

50%

20%

20%

50%

60%

100%

60%

50%

40%

0%

40%

60%

20%

60%

70%

40%

70%

40%

30%

Fonte: Elaboração do autor, 2008.

59

3.6.2 Questionário aplicado com a especialista “professora”:

Professora: Patrícia Lemos 1 O que você viu mais: interação ou dificuldades?

“Achei que o Zorelha tem pouca interação e que algumas crianças tiveram dificuldades de compreender o módulo jogar.”

2 Você acredita que as crianças aprenderam com o Zorelha?

“Sim, as músicas são ótimas, divertidas, conhecidas e educativas.”

3 A linguagem visual é adequada para elas?

“Acredito que sim, poderia ser um pouco mais colorido.”

4 Foi fácil ou difícil orientá-las a encontrar as informações desejadas? (menus de navegação) “Um pouco tumultuado por ser uma atividade nova, mas a orientação foi legal depois que elas começaram a entender, porque no início foi difícil. Tive que explicar cada menu, pois não estavam muito legíveis para suas funções.”

3.6.3 Considerações finais da entrevista

Esta foi a última etapa da aplicação de técnicas de avaliação da interface e foram confirmados alguns problemas já relatados anteriormente, como as dificuldades no significado dos botões durante a navegação; no módulo show foi mas fácil para as crianças de 4 e 5 anos, mas apenas as de 6 conseguiram executar com sucesso o módulo jogar. Outra dificuldade apontada foi na área de clique do botões e o manuseio do mouse com a imagem definida para o cursor que causa confusão, repetidamente a professora foi chamada pelas crianças para ajudar.

A professora Patrícia ajudou também respondendo ao questionário e apresentou alguns softwares educativos que as crianças costumam usar durante as aulas de informática, como Coelho Sabido, A Fazenda, Alfabeto da Alegria, Kid Pix.

60

Opinião da professora: O que mais achei legal foram as músicas. As crianças ficaram bem animadas e até cantaram durante a navegação no Zorelha, já que elas estão acostumadas a usar estas mesmas músicas para atividades da escola. São músicas que trabalhamos na escola, por isso são educativas e conhecidas pelas crianças.

Embora a participação das crianças não tenha sido uma tarefa fácil, o desafio foi bastante colaborativo para construção do redesign da interface. Após os testes foram identificados alguns problemas da interface atual do website Zorelha. Várias observações já indicaram caminhos e soluções possíveis. Uma das soluções possíveis poderia ser carregar sem som e com animação ou deixar uma opção disponível com ou sem som. O site ficaria mais leve e eliminaria o problema da tal música “chata”, como comentou uma das crianças. Outra solução que pode ser adequada para o trabalho é o uso da cor para dar destaque para a área clicável dos botões.

Com estes resultados mais as teóricas estudadas no capítulo anterior e a análise de similares apresentada na próxima sessão foi definido o conceito que será trabalhado para construção da nova interface do ambiente de educação infantil Zorelha, descrito no próximo capítulo.

3.7 ANÁLISE COMPARATIVA COM WEBSITES SEMELHANTES

O mercado de softwares dirigidos ao público infantil é grande, mas existem poucos que são gratuitos e menor ainda o número de sites de educação musical infantil. Os poucos que existem, apenas alguns são realmente projetados pensando nas crianças.

Além da identificação junto aos usuários dos pontos fortes e fracos do ambiente Zorelha, é preciso fazer uma análise profissional da solução atual para averiguar o que pode ser feito. Comparando com websites semelhantes, é possível encontrar soluções para os problemas identificados, bem como estimar seu impacto na experiência do usuário.

Foram escolhidos dois aspectos para fazer a comparação entre o ambiente Zorelha e os demais ambientes de educação infantil de mesmo porte: ergonomia da interface e aparência estética, o design gráfico da interface.

61

Figura 26 – Interface gráfica do ambiente de educação musical Smartkids.

Fonte: Smartkids, 2008.

O portal Smartkids (figura 26) apresenta o jogo dos instrumentos musicais, hospedado no provedor de acesso à internet Terra. O site também tem inúmeras atividades que exploram recursos multimídia como jogos, passatempos e atividades educativas. O jogo dos instrumentos musicais funciona da seguinte forma: quando a criança passa o mouse sobre os músicos, seus instrumentos musicais tocam. O jogo é simples e fácil de usar, apenas para a criança conhecer os sons dos instrumentos.

Pontos fortes: a simplicidade do uso e o colorido chamam atenção das crianças.

Pontos fracos: com pouca interação, logo a criança perde o interesse e muda de tela.

62

Figura 27 – Interface gráfica do ambiente de interação e educação Edumusical.

Fonte: Portal Edumusical, 2008.

O portal Edumusical (figura 27) foi bem desenvolvido, fácil e intuitivo. O portal valoriza a música clássica, desenvolve a percepção auditiva das crianças e é cultural e divertido. A interface foi desenvolvida para a criança explorar o ambiente e descobrir todas as suas funções sempre de forma musical.

No ambiente Edumusical a criança desliza o mouse sobre o ambiente (prédio da escola) e descobre outro ambiente clicando sobre os objetos. Exemplo: a bandeira toca o Hino Nacional.

Alguns ambientes: sala do professor, sala de música.

Pontos fortes: a interface gráfica favorece explorar todo o ambiente, o que o faz ser bastante interativo.

Pontos fracos: os ícones são muito pequenos para compreensão dos seus significados.

63

Figura 28 – Interface gráfica do website de interação infantil Goldfish.

Fonte: Goldfish, 2008.

O portal infantil Goldfish (figura 28) é um portal internacional disponível em inglês, e oferece às crianças muitas atividades, como aprender com os amigos, e jogos personalizados. A interface tem um cursor animado de estrela divertido e agradável. Além das atividades, oferece também vídeos infantis.

Pontos fortes: a interface do site é um ambiente natural da criança no caso do Goldfish um quarto infantil. Além de o personagem apresentar ser simpático, o carregador é interativo, não deixa o usuário esperando de forma monótona.

Pontos fracos: o website ainda só está na versão inglês, o que para crianças brasileiras ainda é uma barreira, apesar de ser bem fácil de usar.

64

Figura 29 – Interface gráfica do software de educação infantil Coelho Sabido.

Fonte: Coelho Sabido, 2008.

O software infantil Coelho Sabido (figura 29) foi escolhido para análise de similares por ser o software mais utilizado na educação infantil do Brasil. O Coelho Sabido é um ambiente onde a criança navega se divertindo e aprendendo. Seu ambiente é bastante colorido e sua navegação agradável.

Pontos fortes: muita interação, colorido e divertido.

Pontos fracos: não é gratuito.

Figuras 30 – Interface gráfica do website infantil Discovery Kids Brasil, (tela seção brinque de ser artista).

Fonte: Discovery Kids Brasil, 2008.

65

Figuras 31 – Interface gráfica do website infantil Discovery Kids Brasil, (tela seção brinque de ser artista).

Fonte: Discovery Kids Brasil, 2008.

Figuras 32 – Tela seção pistas musicais.

Fonte: Discovery Kids Brasil, 2008.

Figuras 34 – Tela seção melodias.

Fonte: Discovery Kids Brasil, 2008.

Figuras 33 – Tela seção pistas musicais.

Fonte: Discovery Kids Brasil, 2008.

Figuras 35 – Tela seção melodias.

Fonte: Discovery Kids Brasil,2008.

O website infantil Discovery Kids Brasil (figuras 30 a 35) é um portal conhecido internacionalmente disponível em português, e oferece às crianças muitas atividades como aprender músicas através de jogos educativos – como mostram nas figuras 34 e 35 as melodias através de um teclado de piano. As figuras 32 e 33 mostram a tela do jogo das pistas musicais onde a criança repete o que for acontecendo. Cada instrumento toca uma vez e a criança deve repetir na mesma seqüência que foi tocado. Nas figuras 30 e 31, o teclado mágico ensina as notas musicais de forma divertida.

66

Pontos fortes: o personagem já conhecido pelas crianças favorece o uso do website, e sua linguagem visual colorida é adequada ao ambiente infantil.

Ponto fracos: existem alguns erros de usabilidade, como alguns lugares que falam e outros não, o que confunde o usuário.

3.7.1 Considerações finais relativas aos websites semelhantes

Levantados os problemas de interface do website Zorelha e comparados com ambientes semelhantes foi possível a identificação de problemas suficientes e é preciso uma solução que atenda as necessidades das crianças sem dificuldades para aprender e se divertir no ambiente de educação musical Zorelha.

Durante a análise de semelhantes foi possível identificar bons exemplos, e também verificar os pontos fracos de cada um e evitar que o mesmo aconteça com a interface do Zorelha.

Diante do quesito estético do ambiente, o Zorelha mostrou problemas graves e com necessidades de mudanças na interface e nos ícones dos botões; Diante do quesito de usabilidade e ergonomia, o site mostrou-se satisfatoriamente, porém necessita de mudanças em pontos específicos como apontado nas seções anteriores.

Portanto, o foco adotado para o redesign da interface do ambiente de educação infantil musical Zorelha foi a reestruturação da interface de forma que o aprendizado seja divertido e aconteça da forma mais natural possível.

67

4 REDESIGN DO WEBSITE ZORELHA

Neste trabalho foi apresentada a necessidade do redesign da interface do website Zorelha projetado com o objetivo de inserir as crianças no mundo musical. Para obter uma solução positiva, a construção da interface está conceituada no desenvolvimento educativo com abordagem na “diversão”. A partir deste referencial específico é possível ter um auxílio para compreender como será criada uma interface que tenha uma relação amigável com as crianças. Os personagens também devem transmitir essa essência amigável.

4.1 DIRETRIZES CONCEITUAIS E VISUAIS

O conceito está baseado na essência do universo infantil e o aspecto educativo deve se fazer presente de forma que a criança aprenda sem perceber que está aprendendo.

Assim, o resultado obtido será o mais natural possível. Bons momentos nos trazem boas lembranças e é através destes bons momentos que pretendemos instigar o interesse pela música. O amor pela música pode ser desenvolvido desde os primeiros dias, estendendo-se por toda a infância e levar resultados para a vida toda. As diretrizes visuais devem estar ligadas ao estilo lúdico junto ao universo infantil, informando de forma mais clara, simples e objetiva possível.

A interface deve ser: a) simples; b) divertida; d) desperta atenção e curiosidade; e) interativa.

68

4.2 GERAÇAO DE ALTERNATIVAS

4.2.1 Interface Alternativa 1

Figura 36 – Alternativa 1.

Fonte: Elaboração do autor, 2008.

Na primeira interface desenhada (figura 36), o objetivo foi buscar o ambiente dos jardins onde as crianças costumam se divertir, demonstrando um dia bonito e de céu azul.

69

Alternativa 2

Figura 37 – Alternativa 2.

Fonte: Elaboração do autor, 2008.

Nesse desenho da interface (figura 37), a alternativa buscou continuar no ambiente do jardim mas de inserindo outros elementos que representem um show, mantendo o palco que já existente na interface do site Zorelha, porém um palco diferenciado com iluminação de um espetáculo, mas a luz do dia.

70

Alternativa 3

Figura 38 – Alternativa 3.

Fonte: Elaboração do autor, 2008.

Nesta Interface (figura 38), a primeira idéia foi representar um verdadeiro espetáculo com tudo que um show tem direito, Durante a noite com céu estrelado e uma iluminação que transmite as sensações de estar num verdadeiro show.

71

Alternativa 4

Figura 39 – Alternativa 4.

Fonte: Elaboração do autor, 2008.

Nesta interface (figura 39) foi desenhado o ambiente do jardim, ambiente onde a criança se brincar e se divertir, mas com alguns elementos que representam a musica como as caixas de som.

72

Alternativa 5

Figura 40 – Alternativa 5.

Fonte: Elaboração do autor, 2008.

Esta interface (figura 40) foi desenhada a partir da idéia do palco, dentro de uma residência querendo transmitir sensações de estar em casa, onde a criança mora, fazendo com que ela se sinta em casa, o mais confortável possível para interagir com a interface.

73

Alternativa 6

Figura 41 – Alternativa 6.

Fonte: Elaboração do autor, 2008.

Nesta interface (figura 41) a área principal teve como intenção manter no ambiente do jardim, porém com uma aspectos de quintal de casa, ou como um sitio dos finais de semana, com um fundo as casas do amigos da vizinhança.

74

4.3 SOLUÇAO PROPOSTA

Figura 42 – Imagem Interface escolhida.

Fonte: Elaboração do autor, 2008.

Esta foi a solução para interface escolhida (figura 42), para a nova interface do zorelha. Aprovada pelo cliente e equipe de desenvolvimento, para a criança sentir-se em um verdadeiro show com holofotes focados para os músicos nos transmite a sensação de estar realmente assistindo a um verdadeiro show com músicos e luzes, assim para nós o show que ira começar.

Preenche aos requisitos impostos no início do projeto, esta interface transmite a criança as sensações de um espetáculo, e para completar o show é necessário a construção da navegação e demais elementos que complementam a interface.

75

4.3.1 Imagem dos botões para o menu

Figura 43 - Imagem Botões de navegação.

Fonte: Elaboração do autor, 2008.

Nesta imagem de forma circular (figura 43), será usada como fundo para os ícones dos botões. Em tons de azul para manter a identidade da interface escolhida.

4.3.2 Imagem do Carregador

Figura 44 – Imagem Carregador.

Fonte: Elaboração do autor, 2008.

Nesta imagem de nota musical (figura 44), foi utilizada no carregamento do site.

Imagem escolhida como representativa no universo musical.

76

4.3.3 Personagem apresentador do site

Figura 45 – Imagem personagem apresentadora menina.

Fonte: Elaboração do autor, 2008.

Figura 46 – Imagem personagem apresentador menino.

Fonte: Elaboração do autor, 2008.

77

Este foi o personagem (figura 45 e 46), criado para apresentar o website Zorelha, nas versões menina e menino. Eles estão vestidos como maestros de orquestras para tomar conta do palco e músicos.

4.3.4 Ícones do Menu Música

Figura 47 - Imagem ícones estilo sonoros.

Fonte: Elaboração do autor, 2008.

Esta imagem (figura 47), mostra os ícones desenhados para representar cada uma das musicas do site. Na ordem da esquerda para direita, cai cai balão, atirei o pau no gato, o sapo não lava o pé e marcha soldado.

78

4.3.5 Ícones do menu estilos sonoros

Figura 48 - Imagem ícones estilo sonoros.

Fonte: Elaboração do autor, 2008.

Esta imagem (figura 48), mostra os ícones desenhados para representar os estilos sonoros do site. Na ordem da esquerda para direita, o estilo samba, nordestino, sons do corpo e rock`roll.

4.3.6 Imagem do cursor

Figura 49 - Imagem do cursor implantado.

Fonte: Zorelha, 2008.

A solução encontrada para a imagem do cursor , foi manter uma das imagens jea utilizadas no site anteriormente, porém utilizar apenas uma imagem solucionando o problema de confundir o usuário.

79

4.3.7 Análise pelo cliente

Para o cliente, Elieser a solução apresentada foi satisfatória solucionando problemas como a quantidade de informação oferecida para criança de uma vez só.

A nova interface poderá continuar o projeto Zorelha de uma forma mais agradável e fácil de usar, dando continuidade e aprimorando o projeto que será de uso de muitas crianças.

Para Elieser, esta nova interface completa o objetivo do Zorelha que é trazer a musicalização para vida das crianças, de forma simples, clara e objetiva.

A interface escolhida transmite a sensação de um verdadeiro show que acontece sob a luz das estrelas e transmite a sensação de estar realmente num show que traz música para a vida das crianças. O que atinge o objetivo principal do website Zorelha.

4.3.8 Análise pelo usuário

Assim que a interface foi programada com exceção de algumas funções como o uso do apresentador versão menino por motivo da falta da voz de um menino narrando o site, logo foi apresentado para uma das crianças que fez parte do teste inicial com a interface atual, foi facilmente reconhecida, a criança Ian Porto que navegou na

interface e conseguiu

executar todas as tarefas estabelecidas pelo site, a navegação aconteceu de forma fluida e teve destaque no reconhecimento da opção ver instrumentos em detalhes.

Outra mudança aprovada foi a opção de escolha do apresentador entre menina e menino, Ian em particular gostaria de usar o apresentador menino por identificar-se como amigo dos meninos, também ficou muito empolgado para poder navegar na interface com o menino apresentador funcionando.

80

Figura 50 – Foto registro do momento da navegação das crianças no novo ambiente Zorelha.

Fonte: Elaboração do autor, 2008.

Figura 51 – Foto registro do momento da navegação das crianças no novo ambiente Zorelha.

Fonte: Elaboração do autor, 2008.

Foi utilizada a técnica objetiva de observação para comprovar e registrar a eficiência da nova interface, o teste de usabilidade mostrados nestas imagens (figura 50 e 51), mostra o momento de interação com nova interface parcialmente programada, o aluno da escola Dinâmica Ian Porto também participante dos testes realizados e registrados no capitulo 3 sobre a interface atual. O aluno Ian demonstrou muito entusiasmo e satisfação durante a navegação com a interface nova, descobrindo com facilidade todas os recursos oferecidos

81

pelo website Zorelha.

4.3.9 Critérios de escolha e justificativa

Para escolha da nova interface foi estabelecido critérios analisados durante a pesquisa bibliográfica e de pesquisas de campo. Estes critério foram criados a partir dos estudos bibliográficos e das dificuldades encontradas durante os testes de navegação realizado com as crianças.

Critérios: a) que a interface estivesse em um ambiente, onde a criança reconhecesse um show de musica; b) ter um estilo lúdico para conforme linguagem do público infantil; c) ser colorido; d) simples;

Para a escolha da alternativa entre as alternativas apresentadas , foi escolhida a alternativa 3 (figura 38), esta que representa um show no período noturno, passa sensações de estar realmente vivenciando um espetáculo da musica, o que faz com que a criança se sinta parte do show e consiga fazer seu próprio espetáculo.

82

4.4 PROJETO DETALHADO

Figura 52 - Imagem página carregando (imagem do carregador).

Fonte: Elaboração do autor, 2008.

Nesta imagem (figura 52), que representa o carregador do website anteriormente com aspectos cênicos foi substituída nota musical, imagem classificada como mais significativa para o universo musical.Esta é a primeira imagem que aparece no website, serve para carregar o site antes de iniciar.

83

Figura 53 - Imagem apresentadora do site Zorelha.

Fonte: Elaboração do autor, 2008.

A imagem da apresentadora foi redesenhada a partir das características da antiga apresentadora e substituída por esta apresentada na figura 53, esta imagem mostra a opção para escolha da menina e na figura 54 mostra apresenta a versão para interação com o menino esta opção foi acrescentada para escolha no menu inicial.

Figura 54 – Imagem página inicial Fonte: Elaboração do autor, 2008.

84

Esta imagem (figura 54), mostra o menu inicial onde alem do modulo show e modulo jogar foi acrescentado a opção para escolha do apresentador, esta escolha é para a criança escolher se prefere interagir no website com o apresentador menina ou menino.

Figura 55 – Imagem página menu escolha das músicas.

Fonte: Elaboração do autor, 2008.

Nesta imagem (figura 55), mostra o menu de escolha das musica, foi redesenhado todos os ícones para representar as musicas utilizando a linguagem visual adequada para o perfil do público alvo.

Figura 56 – Imagem página menu escolha das músicas.

Fonte: Elaboração do autor, 2008.

85

Nesta imagem (figura 56), mostra o menu de escolha dos estilos sonoros,utilizado um instrumento de cada estilo musical para representar os ícones dos botões dos estilos sonoros.

Figura 57 – Imagem página modulo show, instrumentos em detalhes.

Fonte: Elaboração do autor, 2008.

Nesta imagem (figura 57), mostra quando a criança clica no instrumento aparece esta janela superior, onde apresenta a opção dos instrumentos em detalhes, onde a criança pode interagir e tocar cada nota musical no instrumento, percebendo cada detalhe do instrumento.

Figura 58 – Imagem página modulo show, com um músico tocando sozinho.

Fonte: Elaboração do autor, 2008.

86

Nesta imagem (figura 58), mostra o módulo show, onde existe a possibilidade de ter todos os músicos no palco e ao mesmo tempo poder escutar apenas um instrumento tocar, ao clicar novamente no botão do músico, o músico é arrastado para trás silenciando seu instrumento, o que ficar para frente toca sozinho,o que faz a criança perceber com atenção apenas o instrumento que está tocando.

4.4.1 Memorial descritivo

a) Função estético-formal Este memorial descreve a interface sugerida como solução encontrada para o website zorelha esta a nova aparência e também nova navegação oferecida de forma mais simples e clara, com menus de no máximo cinco opções.

Predominância de linhas orgânicas, mais arredondadas e volumosas, com analogia as formas naturais. A interface em geral existem linhas mistas que busca a organização visual e o equilíbrio.

O estilo da interface esta relacionado ao estilo lúdico e infantil.

Figura 59 – Imagem da tela de carregamento do website Zorelha.

Fonte: Elaboração do autor, 2008.

87

1) INTERFACE Predominam linha retas para melhor apresentação da informação.

2) PERSONAGEM APRESENTADOR DO WEBSITE Predominam linhas orgânicas, para representar as formas naturais.

3) IMAGEM DO CARREGADOR DO WEBSITE Predominam linhas orgânicas, para chegar a imagem da nota musical com estilo lúdico.

4) ÍCONES DO MENU MUSICAS Predominam linhas orgânicas, para representar as musicas com imagens no estilo lúdico.

5) ÍCONES DO MENU ESTILOS SONOROS Predominam linhas orgânicas, para representar as musicas com imagens no estilo lúdico.

b) Princípios da Gestalt (Gomes

Filho,

2004)

Arredondamento:

“o

arredondamento

tem

como

característica marcante a suavidade e maciez que as formas orgânicas geralmente transmitem.”

A interface em sua forma geral, leva linhas retas e cantos quadrados porém seus elementos internos são todos com formas orgânicas , não possuem cantos vivos, o que transmite harmonia e equilíbrio no visual da interface.

A aplicação das cores foi criada a partir das cores primarias, complementado com cores complementares. A predominância da interface foi a cor azul a cor do céu, do espírito e do pensamento. Simboliza a lealdade, a fidelidade, a personalidade e subtileza. Simboliza também o ideal e o sonho. É a mais fria das cores frias.

88

O Azul claro significa tranquilidade, compreensão e frescura.

O Amarelo transmite calor, luz e descontracção. Simbolicamente está associado à prosperidade. É também uma cor energética, activa que transmite optimismo.

A linguagem adotada para interface zorelha é toda narrada já que o público alvo ainda esta aprendendo a ler e escrever, os ícones também também buscam uma relação adequada na comunicação visual, sempre utilizando o estilo lúdico dentro dos aspectos do universo infantil.

c) Função simbólica: Produto desenvolvido exclusivamente para o uso do público infantil, este se relaciona com uma determinada linguagem e contexto do universo infantil.

Lembrando que este produto foi desenvolvido para crianças de 4 a 6 anos.

A semiótica neste trabalho teve o objetivo de representar todas as imagens de forma adequada a linguagem infantil com intuito de melhorar a eficiência das informações com o público-alvo.

d) Função de uso: A função primária da interface é a de transmitir a informação do sistema website Zorelha para seu público-alvo no caso infantil, esta informação é inserir a musicalização na vida das crianças, de forma adequada utilizando a linguagem apropriada para o usuário.

O website Zorelha tem como objetivo ser educativo, divertido e interativo.

89

Figura 60 – Imagem página modulo show, com o instrumento em detalhes.

Fonte: Elaboração do autor, 2008.

e) Função ergonômica A interface foi projetada para o uso do público infantil, sua função ergonômica esta relacionada a usabilidade da interface.

Todos os elementos da interface foram adequados a uso do público infantil, com atenção especial na linguagem visual utilizada.

Todas as imagens são legíveis e compreendidas pelas crianças da idade pré determinada como seu público alvo, 4 a 6 anos.

A hierarquia da informação foi estudada e modificada para que a informação seja absorvida ao poucos pelas crianças, isto levou a navegação ser fluida, simples e fácil de usar.

1) ADEQUAÇÃO BIOMECÂNICA Com a navegação do sistema alterada, o usuário passa a ficar mais tempo interagindo na interface o que faz com que a criança faça mais movimentos do corpo, que pode evitar futuras dores nas costas.

90

2) ADEQUAÇÃO COGNITIVA A interface aprimorou o funcionamento ou seja a navegação de forma a facilitar a interação com o sistema. Através de testes, a interface foi aprovada pelo usuário que conseguiu executar facilmente todas as tarefas do website.

f) Função técnica SISTEMA CONSTRUTIVO

1) INTERFACE Serve para inserir os elementos que fazem do website ser interativo.

2) PERSONAGEM APRESENTADOR DO WEBSITE Os personagens são para apresentar de forma narrativa o website, destinado para crianças que ainda não sabem ler e escrever.

3) Imagem do carregador do site: A imagem do carregado serve para carregar o website, deve ser agradável para que o usuário não sinta a espera.

4) ÍCONES DO MENU MUSICAS O ícones das musicas, servem para representar as musicas oferecidas pelo website.

5) ÍCONES DO MENU ESTILOS SONOROS O ícones dos estilos sonoros, servem para representar os estilos musicais oferecidos pelo website.

MATERIAIS A interface é digital,foi construída apenas com tecnologia de computadores e software fabricados pela Adobe.

PROCESSOS E FABRICAÇÃO

91

A interface foi programada no software da Adobe Flash, o que oferece mais recurso para animação interativa.

O desenhos foram criados a partir de imagens de referencia e ilustrados no software da Adobe Illutrator.

g) Função de marketing A interface do website Zorelha fica disponível na internet e é totalmente gratuito.

A interface esta disponível na internet para o acesso de qualquer lugar do mundo, porém esta programado apenas na língua portuguesa.

h) Função Informacional 1) IINTERFACE A interface apresenta a forma de organizacnao da infromaçnao visual do website Zorelha.

2) PERSONAGEM APRESENTADOR DO WEBSITE O apresentador é o meio informacional mais importante do website, através é narrado o que deve ser feito durante a navegação.

3) IMAGEM DO CARREGADOR DO WEBSITE O carregador informa ao usuário o tempo

determinado para carregar o website

Zorelha.

4) ÍCONES DO MENU MUSICAS Os ícones do menu musica informam a musica que será tocada.

5) ÍCONES DO MENU ESTILOS SONOROS Os ícones do menu estilos sonoros informam o estilo musical que será tocado.

92

i) Função Operacional Para executar o website Zorelha basta ter instalado e funcionando o software criado pela Adobe Flash player.

93

5 CONCLUSÃO

A metodologia utilizada no desenvolvimento deste trabalho foi adequada especificamente para projetos de interface infantil. Ela oferece uma gama de ferramentas práticas para guiar o projeto rumo à facilidade de uso e maximização de entendimento para seus usuários. Os investimentos não são altos, mas o retorno é grande. No caso do website Zorelha, os testes realizados indicam que os usuários conseguiram reconhecer os recursos com mais agilidade, eliminando as dificuldades encontradas na realização dos testes de usabilidade da interface atual, descritas no capítulo 3.

Os testes de usabilidade da nova interface permitiram obter um maior grau de satisfação dos usuários em relação à navegação, além de ter contribuir para melhor o aspecto visual e estético do website. Caso o cliente Elieser Ademir de Jesus, criador e proprietário do Zorelha, adote o novo design da interface, cumprirá de forma mais eficiente os objetivos do website zorelha.

O resultado obtido foi uma navegação mais fácil e agradável, verificada com a aplicação do teste de usabilidade – através da do método da observação - o aluno da Escola Dinâmica Ian Porto garantiu a aceitação da nova interface. Porém, para comprovar esta eficiência, é sugerida a aplicação dos testes de usabilidade com todas as crianças que participaram dos primeiros testes descritos no capitulo 3.

Trabalhar com crianças requer muita atenção e responsabilidade, já que se trata de lidar com pequenas pessoas em intenso processo de desenvolvimento. Após muito estudo e planejamento – apesar do pouco tempo disponível para a execução deste trabalho - o resultado foi considerado satisfatório para a autora. O retorno por parte do cliente e dos usuários também foi positivo, o que torna a conclusão deste projeto ainda mais gratificante.

Como sugestão para trabalhos futuros sugere-se: aplicar novamente os testes de usabilidade na Escola Dinâmica, com a interface programada por completo e disponível na internet.

94

REFERÊNCIAS

AGNER, Luiz. Ergodesign e arquitetura da informação. 1. ed. São Paulo: Quartet Editora e Comunicação Ltda, 2006.

AMSTELL, Frederick Van. Design Centrado no Usuário para o Website da Universidade Federal do Paraná, 2004. TCC (Graduação em Jornalismo) - Universidade Federal do Paraná, Curitiba, 2004.

AMSTELL, Frederick Van. Uma abordagem semiótica para o design de portais infantis com a participação da criança. 2003. TCC (Graduação em Jornalismo) - Universidade Federal do Paraná, Curitiba, 2003.

COELHO SABIDO. Disponível em: <http://www.divertire.com.br/educacional>. Acesso em: 23 set. 2008.

DISCOVERY KIDS BRASIL. Disponível em: <http://www.discoverykidsbrasil.com/_home/>. Acesso em: 25 set. 2008.

ERGOLIST. Disponível em: <http://www.labiutil.inf.ufsc.br/ergolist/check.htm>. Acesso em: 02 set. 2008.

EXPERIÊNCIA PERFEITA. Disponível em: <http://www.experienciaperfeita.org>. Acesso em: 20 ago. 2008.

FILATRO, Andréa. Design instrucional contextualizado educação e tecnologia. 2. ed. São Paulo: SENAC, 2007.

FREZZA, Cristiano. Design em movimento, 2003. TCC (Graduação em Comunicação e Expressão Visual) - Universidade Federal de Santa Catarina, Florianópolis, 2003.

GOMES FILHO, João. Gestalt do objeto: sistema de leitura visual da forma. São Paulo: Escrituras, 2000.

ITIRO, Lida. Ergonomia projeto e produção. 2. ed. Brasília: Edgard Blucher, 2005.

95

JESUS, Elieser Ademir. Zorelha: um objeto de aprendizagem para auxiliar o Desenvolvimento da percepção musical em crianças de 4 a 6 anos. 2008. TCC (Graduação em Ciências da Computação) - Universidade do Vale do Itajaí, Itajaí, 2003.

KRUSSER, Renata. Introdução ao design gráfico. Palhoça: Unisul Virtual, 2008.

MARCINI, Marina de Andrade; LAKATIS, Eva Maria. Técnicas de pesquisa. 4. ed. São Paulo: Atlas,1999.

MATUZAWA, Flávia Lumi. Comunicação visual para web. 3. ed. Palhoça: Unisul Virtual, 2007.

MELLO, Amanda. Uma abordagem semiótica para o design de portais infantis com a participação da criança. 2003. Dissertação (Mestrado em Computação) - Universidade Estadual de Campinas, São Paulo, 2003.

MEMÓRIA, Felipe. Design para internet. 4. ed. Rio de Janeiro: Campus, 2005.

MORAES, Ana Maria de. Design e avaliação de interface. 1. ed. Rio de Janeiro: ivSEr, 2002.

NORMAN, Donald A. O design do dia-a-dia. Tradução de Ana Deiró. Rio de Janeiro: Rocco, 2006. 272 p. Título original: The psychology of everyday things.

OLIVEIRA NETTO, Alvim Antônio de. Interação homem-computador: IHC. 2. ed.

Florianópolis: Visual Books, 2004.

PORTAL EDUMUSICAL. Disponível em: <http://www.edumusical.org.br/>. Acesso em: 20 set. 2008.

PORTAL GOLDFISH. Disponível em: <http://www.pfgoldfish.com/default.aspx >. Acesso em: 24 set. 2008.

PORTAL SMARTKIDS. Disponível em: <http://www.smartkids.com.br/>. Acesso em: 21 set. 2008.

PREECE, Jennifer; ROGERS, Yvonne; SHARP, Helen. Design de interação: além da interação homem-computador. São Paulo: Bookman, 2005. 348 p.

96

SMARTKIDS. Disponível em: <http://smartkids.com.br>. Acesso em: 01 jul. 2008.

SOUZA, Sandra Maria Ribeiro de; PANIZZA, Janaina F. A comunicação visual: entre a ordem e a intuição - algumas questões metodológicas. Facultad de Periodismo y Comunicacion Social, Buenos Aires, n. 13, 2004. Disponível em: <http://www.alaic.net/VII_congreso/gt/gt_13/GT13-P14.html>. Acesso em: 10 set. 2008.

ZORELHA: educação musical infantil. Disponível em: <http://siaiacad17.univali.br/zorelha>. Acesso em: 01 jul. 2008.

USABILIDOIDO. Disponível em: <http://usabilidoido.com.br/>. Acesso em: 25 ago. 2008.

97

APÊNDICES

98

APÊNDICE A – Briefing do redesign da interface do website Zorelha

Data: 16 / _07 / _2008

Cliente: _Projeto “Zorelha”.

Contato: silmarapoletto@gmail.com@hotmail.com Serviço: redesign da interface do web site “Zorelha” Endereço eletrônico: http://siaiacad17.univali.br/zorelha/

Objetivo ou problema a ser resolvido Problemas na interface gráfica.

Principal diferencial a ser explorado Ambiente de Educação Musical infantil.

Público-alvo Crianças de 4 a 6 anos

Produtos semelhantes Smartkids - Provedor Terra.

Edumusical Software: coelho sabido Discovery kids Goldfish Tipo de apresentação Arquivo s.w.f.

Desenvolvido em no software flash cs3.

Quem aprova (nomes/funções): Data limite para validação: Elieser, criador e programador, Renata, orientadora, Público-alvo infantil.

Data limite para entrega: 10 de novembro de 2008.

99

APÊNDICE B – Tabela 4 – Laudo Ergolist LAUDO

Total de

ERGOLIST

Questões

Respondidas Não

Questões

Questões

Respondidas Conformes Não

Questões

Questões

Não

Adiadas

conformes Aplicáveis Concisão

14

14

0

1

4

9

0

Mensagens de

9

9

0

3

4

2

0

Flexibilidade

3

3

0

0

3

0

0

Legibilidade

27

27

0

6

11

10

0

Significados

12

12

0

4

6

2

0

Proteção contra

7

7

0

0

3

4

0

17

17

0

4

9

4

0

6

6

0

1

4

1

0

17

17

0

4

7

6

0

erro

erros Agrupamento por formato Experiência do Usuário Presteza

Comentários: 01- o site não tem caixas de diálogos, é narrado.

Controle do

4

4

0

0

4

0

0

5

5

0

0

2

3

0

Consistência

11

11

0

8

1

2

0

Agrupamento

11

11

0

4

5

1

1

9

9

0

4

4

1

0

12

12

0

7

4

1

0

Compatibilidade 21

21

0

8

5

8

0

Ações explicitas 4

4

0

1

1

1

1

Ações Mínimo

5

5

0

0

4

1

0

Total

194

194

0

57

61

73

3

Usuário Correção de erros

por localização Densidade informacional Feedback

100

APÊNDICE C – Painel semântico

101

APÊNDICE D – Brainstrom

102

APÊNDICE E – Wareframe

103

APÊNDICE F – Sitegrama