Tcc vilson martins filho design norte da ilha

UNIVERSIDADE DO SUL DE SANTA CATARINA VILSON MARTINS FILHO

REDESIGN DE INTERFACE DO ESPAÇO UNISUL VIRTUAL DE APRENDIZAGEM

FLORIANÓPOLIS 2009

VILSON MARTINS FILHO

REDESIGN DE INTERFACE DO ESPAÇO UNISUL VIRTUAL DE APRENDIZAGEM

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

FLORIANÓPOLIS 2009

VILSON MARTINS FILHO

REDESIGN DE INTERFACE DO ESPAÇO UNISUL VIRTUAL DE APRENDIZAGEM

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

Florianópolis 06 de Julho de 2009

Profa. Renata da Silva Krusser, Msc. Universidade do Sul de Santa Catarina

Profa. Cláudia Regina Batista, Dra. Universidade do Sul de Santa Catarina

Prof. Cláudio Henrique da Silva, Msc. Universidade do Sul de Santa Catarina

AGRADECIMENTOS. Agradeço a Jesus Cristo, que através de sua morte e ressurreição possibilitando a todo ser humano, o relacionamento com Único e Soberano Deus Criador.

Agradeço a minha esposa amada Michelle Martins pelo apoio e encorajamento diário, a minha mãe Albertina pelo suporte e dedicação na minha formação profissional e de caráter todos esses anos.

Agradeço também a direção da Unisul Virtual, especialmente ao eterno professor Vianney, pela garra e inspiração, no trabalho de levar educação a todos aqueles dispostos mudar suas vidas. Finalmente, agradeço a todo o corpo docente do curso de Design da Unisul, a minha família e a todos os parceiros de trabalho da Unisul Virtual.

RESUMO O presente trabalho busca o redesign de interface do Espaço Unisul Virtual de Aprendizagem, principal ferramenta de mediação da Unisul Virtual, campus responsável pela Educação Superior a Distância da Universidade do Sul de Santa Catarina, através do uso de metodologia de design de experiência, abordando aspectos de usabilidade, arquitetura de informação, design de interação e design visual de interface, contribuindo assim para a reconstrução de uma interface com design centrado no usuário, criando possibilidades de mediação e socialização.

Palavras chaves: design. educação a distância. interface. design de experiência. ambiente virtual de aprendizagem.

ABSTRACT This paper seeks to redesign the interface of the Espaรงo Unisul Virtual de Aprendizagem, the main tool for mediation of Unisul Virtual, campus for Distance Higher Education of the Universidade do Sul de Santa Catarina, through the use of methodology of design experience, covering aspects of usability, information architecture, interaction design and visual interface design, thus contributing to the reconstruction of an interface with the user centered design, creating opportunities for mediation and socialization.

Keywords: design. distance education. interface. design experience. virtual environment for learning.v

LISTA DE IMAGENS Figura 01 – Espaço de interação com o Professor Tutor. ..............................................................17 Figura 02 – Midiateca, espaço onde o aluno encontra materiais didáticos digitais. ..............18 Figura 03 – SISEAD, Sistema utilizado pelos docentes. ..............................................................18 Figura 04 – Chat. ...................................................................................................................................19 Figura 05 – Menu de navegação com as áreas de interação separadas. ...................................20 Figura 06 – Espaço de interação com o conteúdo didático das unidades. ...............................20 Figura 07 – Cabeçalho de Ferramentas do EVA. ...........................................................................21 Figura 08 – Espaço de login no http://www.virtual.unisul.br. ....................................................28 Figura 09 – Estrutura de interação atual para login. ....................................................................29 Figura 10 – Sugestão de mudança de interação entre as etapas de login. ................................29 Figura 11 – Midiateca. ..........................................................................................................................30 Figura 12 – Avaliação. ......................................................................................................................... 31 Figura 13 – Ferramenta Desempenho. ..............................................................................................31 Figura 14 – Interação existente entre os elementos da ferramenta Avaliação. .......................32 Figura 15 – Interação sugerida entre os elementos da ferramenta Avaliação. ........................32 Figura 16 – Lista de tópicos da ferramenta Fórum. ......................................................................33 Figura 17 – Comentários dentro de cada Tópico da ferramenta Fórum. ..................................34 Figura 18 – Espaço final para realizar a participação no Fórum. ..............................................35 Figura 19 – Estrutura de interação atual entre os espaços do Fórum. ......................................35 Figura 20 – Possibilitar o comentário no momento de leitura do conteúdo. ...........................36 Figura 21 – Ferramenta Exposição. ...................................................................................................37 Figura 22 – Ferramentas do EVA e suas relações de interação com o Aluno. ........................38 Figura 23 – Arquitetura da informação atual. ................................................................................40 Figura 24 – Nova proposta de Arquitetura da informação. .........................................................41 Figura 25 – Wireframe do layout atual do EVA. ...........................................................................42 Figura 26 – Nova proposta de Estrutura de Interface. ..................................................................43 Figura 27 – Área superior de interação. ...........................................................................................44 Figura 28 – Área intermediária de interação. .................................................................................44 Figura 29 – Área de interação com conteúdo. ................................................................................45 Figura 30 – Aplicação de menu dropdown para mudança de status. ........................................46 Figura 31 – Aplicação de menu dorpdown para o campo de ferramentas. ..............................46 Figura 32 – Aplicação de menu em abas. ........................................................................................47 Figura 33 – Controles de janelas. .......................................................................................................48

Figura 34 – Janelas simultâneamente dispostas. .......................................................................49 Figura 35 – Opções para controle de posição. ...........................................................................49 Figura 36 – Apresentação do elemento cortina, que sobrepõe as outras janelas. .............50 Figura 37 – Família Arial. ..............................................................................................................51 Figura 38: Ícones de status. ............................................................................................................51 Figura 39: Botões e elementos de navegação. ............................................................................52 Figura 40: Menu superior. ..............................................................................................................52 Figura 41: Barra de ferramentas. ..................................................................................................53 Figura 42: Janela de conteúdo. ......................................................................................................53 Figura 43: Simulação Mural...........................................................................................................54 Figura 44: Simulação Monitor. .....................................................................................................55 Figura 45: Simulação Comunidades. ...........................................................................................56 Figura 46: Simulação Conteúdos. .................................................................................................57

LISTA DE SIGLAS AD - Avaliação a Distância.

EaD - Educação a Distância.

EVA - Espaço Unisul Virtual de Aprendizagem.

UV - Unisul Virtual.

Unisul - Universidade do Sul de Santa Catarina.

SUMÁRIO 1. INTRODUÇÃO .....................................................................................................................................12 2. PROBLEMATIZAÇÃO .................................................................................................................... 12 3. OBJETIVOS ...........................................................................................................................................13 4. JUSTIFICATIVA ..................................................................................................................................14 5. PLANO METODOLÓGICO PRELIMINAR ............................................................................15 6. DESENVOLVIMENTO .....................................................................................................................16 6.1 Necessidades dos usuários (foco na tarefa) ...............................................................17 6.2 Objetivos do ambiente (foco na informação) ...........................................................,19 6.3 Especificações funcionais (foco na tarefa) ................................................................21 6.4 Conteúdos necessários (foco na informação) ...........................................................22 6.5 Design de interação (foco na tarefa) ..........................................................................28 6.5.1 - Ações para a tarefa “Acessar ao EVA”. ................................................................28 6.5.2 - Ações para a tarefa “Como visualizar os materiais na Midiateca”. ............30 6.5.3 - Ações para a tarefa “Consultar e enviar arquivos de avaliação a distância” e “Checar os comentários sobre avaliações enviadas” ................................................31 6.5.4 - Ações para a tarefa “Comentar no Fórum” 33 6.5.5 - Ações para a tarefa “Publicar trabalho na Exposição” ....................................36 6.6 ARQUITETURA DA INFORMAÇÃO (FOCO NA INFORMAÇÃO) ...........................40 6.7 PROJETO DA INTERFACE (FOCO NA TAREFA) .............................................................41 6.8 DESIGN DA INFORMAÇÃO (FOCO NA INFORMAÇÃO) ............................................44 6.9 PROJETO DE NAVEGAÇÃO (FOCO NA TAREFA) ...........................................................45 6.10 DESIGN VISUAL (FOCO NA INFORMAÇÃO E NA TAREFA) .................................50 7. CONCLUSÃO .......................................................................................................................................58 8. REFERÊNCIAS ..................................................................................................................................60

12 1. INTRODUÇÃO

Com mais de 9 mil alunos, a UnisulVirtual é o campus responsável por todos os projetos e programas de ensino a distância da Universidade do Sul de Santa Catarina (Unisul).

Está autorizada a oferecer esse tipo de educação em nível superior em todo o território brasileiro.

Com isso, os diplomas dos cursos de pós-graduação, graduação tecnológica, licenciatura e bacharelado são válidos em todo o país, e com total equivalência a diplomas dos mesmos cursos oferecidos na modalidade do ensino presencial.

Baseado no conceito de universidade virtual, o modelo pedagógico adotado pela UnisulVirtual garante flexibilidade total aos alunos, permitindo a escolha dos horários e locais de estudo, com o acompanhamento de professores tutores que são doutores, mestres ou especialistas, além de atendimento permanente via internet. O único momento de encontro presencial é na época das avaliações, no final de cada módulo. Essa dinâmica de aprendizagem permite que um aluno aprovado no processo seletivo conclua um curso superior e obtenha um diploma de graduação com apenas dois anos de estudos, tempo dos cursos de graduação tecnológica.

Os alunos contam com materiais didáticos impressos e on-line que são disponibilizados no início de cada disciplina. Recebem guias de estudo para orientar a aprendizagem na educação a distância, guias com as orientações específicas de cada curso e, ainda, contam com manuais de orientação e com equipes de monitores que auxiliam o aluno a utilizar os recursos da internet na educação a distância.

2. PROBLEMATIZAÇÃO

A popularização do acesso à internet e, principalmente, o acesso via banda larga, tem a curtos passos, moldado o comportamento dos atores em ambientes de EaD. A possibilidade de comunicação para muitos tem apresentado novos paradigmas para todos os modelos de EaD, modelos estes construidos quando o acesso a internet era restrito a apenas algumas camadas sociais. Outra tendência comportamental é a possibilidade do aluno de EaD tornar-se não apenas um leitor crítico, mas também um autor crítico de conteúdo, através do uso de ferramentas colaborativas cada dia mais amigáveis a usuários leigos em Programação e Tecnologias de Informação. As ferramentas colaborativas apresentam um futuro cada dia mais presente, onde os encontramos cada vez mais ambientes de aprendizagem apoiados, potencializados, equipados, integrados pela tecnologia (RIVOLTELLA, 2007).

13 Desta forma, não é raro encontrarmos mudanças de paradigmas em modelos educacionais de EaD, nas avaliações e adequações estruturais nos Ambientes Virtuais de Aprendizagem, visando acessibilidade, usabilidade, domínio e customização de interface, possibilitando o comportamento colaborativo dos alunos, tutores e professores, como wikipédias e laboratórios virtuais.

A interface do Espaço Unisul Virtual de Aprendizagem – EVA atual foi desenvolvida de maneira e mergencial em 2001 pelas equipes de Tecnologia e Design Gráfico da Unisul Virtual, desprovido de aplicação de metodologias projetuais de design, usabilidade e acessibilidade, considerando prioritariamente a velocidade de produção e atualização de conteúdo de novas disciplinas no EVA. A necessidade de um novo projeto de interface pode ser percebida pelas mudanças de roteiros de estudos, investimentos em orientar o aluno sobre como utilizar e encontrar as ferramentas através de manuais impressos, leitura e participação nas áreas colaborativas, principalmente encontar arquivos no espaço Midiateca. Como estratégia mais recente, todas as turmas calouras de cada semestre, antes de iniciarem as disciplinas, devem a participar de uma sala virtual de introdução ao EVA, esta, sempre com baixo índice de participação. Percebe-se claramente que o design do EVA não se adequa à maneira como os alunos usam a internet. É um impasse do qual provavelmente se poderá sair somente aceitando que uma temporada acabou e que é preciso começar outra. Os prenúncios desta transição já podem ser vistos na afirmação social dos instrumentos da Web 2.0, mas também na consciência de que estas aplicações podem ser usadas pelo “e-learning normal”. Pensemos, neste propósito, na difusão dos blogs escolares, na adoção da tecnologia wiki como substituta da intranet empresarial nas pequenas e médias empresas (neste sentido, o software open source T-Wiki está tornandose um verdadeiro caso – conforme consta na internet: http://twiki.org/), mas também na adoção do Google Apps como plataforma de serviço Web por muitos ateneus italianos, entre os quais as Universidades de Messina, Ferrara e Camerino, a exemplo daquilo que já está acontecendo nos Estados Unidos, na Arizona State University, ou na Europa, na Universidade de Linkoping, na Suécia. (RIVOLTELLA, 2008).

3. OBJETIVOS

GERAL Redesenhar a interface do EVA da Unisul Virtual, através do design centrado no usuário utilizando metodologias de design de experiência, promovendo a interação e melhorando a usabilidade.

14 ESPECÍFICOS Identificar as necessidades dos usuários para uso do EVA, seu contexto e suas funções como ambiente virtual.

Identificar os objetivos pedagógicos do EVA, conceituando-o como ferramenta na metodologia de EaD da Unisul Virtual.

Delinear as funções específicas de cada espaço do EVA considerando cada momento de uso do aluno no decorrer das disciplinas e dos cursos.

Detalhar os conteúdos para cada parte do EVA, investigando a quantidade e o tipo de conteúdo para cada parte específica.

Reconstruir o fluxo de atividades definindo as tarefas e aplicações específicas que o aluno deve realizar no EVA. Re-elaborar de arquitetura de informação de modo a simplificar o modelo mental elaborado pelo usuário.

Reconstruir elementos visuais da interface com o objetivo de melhorar a cognição e clarear a topologia do EVA relacionando cada espaço com sua função na metodologia de ensino.

Restruturar a maneira como a informação é apresentada ao usuário, através de um modelo mental centrado no usuário.

Reprojetar os elementos de navegação na interface, visando criar ferramentas que facilitam e orientam a navegação.

Redesenho das regras tipográficas e elementos estéticos, dando suporte a arquitetura de informação e ao design de interação previamente definidos.

4. JUSTIFICATIVA

Este projeto possui uma abordagem no redesign de interface, a partir da aplicação de metodologia de design de experiência, com foco centrado no usuário do EVA, que no caso são docente e dicentes.

15 Ao resolver problemas de baixa aplicabilidade, problemas de interação entre usuário e interface do EVA melhorando a eficiência de uso e produtividade na interação entre aluno e conteúdo e aluno e instituição, pretende-se ampliar a interação entre usuário e conteúdo, usuário e instituição, e principalmente usuário com outros usuários.

Desta forma, através do redesign de interface, pretende-se potencializar o Espaço Unisul Virtual de aprendizagem como uma verdadeira ferramenta de mediação colaborativa entre aluno e professor, ampliando cada vez mais o cenário brasileiro em educação a distância atendendo a mudança que os instrumentos da Web 2.0 estão predispondo a uma mudança de paradigma capaz de dar novo impulso a um movimento e a um mercado que, nos últimos anos, está estagnado sobre os modelos e as experiências-padrão. (RILVOTELLA, 2008).

5. PLANO METODOLÓGICO PRELIMINAR

A metodologia de projeto adotada como guia para as diferentes etapas, considera o objetivo de redesign a partir do modelo pedagógico já estabelecido. A metodologia de design de experiência adotada foi a sugerida por Garrett 2002 adaptada aos aspectos de Usabilidade, Arquitetura de Informação e Design de Interação.

A metodologia sugerida caracteriza-se pelas seguintes etapas:

Etapa

1

Abordagem ou Foco Objetivo da etapa

Tarefa

1

Informação

2

Tarefa

2

Informação

Descrição do objetivo

Necessidades dos Usuários

Metas e objetivos do usuário delineadas para a hipermídia através de investigação e levantamento de dados sobre os conceitos pedagógicos da Unisul Virtual.

Objetivos do ambiente

Delinear as funções do EVA. Socialização, compras, pesquisa, tutoriais, aquilo ao qual o EVA se presta como serviço através de investigação sobre a metodologia da Unisul Virtual.

Especificações Funcionais

Descrições detalhadas das funcionalidades acadêmicas de cada elemento do EVA.

Conteúdos Necessários

Definição detalhada dos conteúdos necessários para cada ação do usuário no EVA.

16

3

Tarefa

3

Informação

4

4

Tarefa

Informação

Levantamento do fluxo de aplicações que facilitam a realização das tarefas, a interação do usuário com o Design de Interação definindo funcionamento da hipermídia através de construção e análise modelos mentais e possibilidades ações.

Arquitetura de Informação

Definir a topologia dos espaços de informações facilitando o acesso intuitivo a conteúdo.

Construção dos elementos visuais interface, facilitando a interação Projeto de Interface da com a funcionalidade do site através do uso de wireframes.

Design da Informação

Análise e sugestões da maneira como as informações são apresentadas em função da topologia da extrutura hipertextual.

Construção de elementos interface que facilitam a Projeto de Navegação da navegação pelos elementos da arquitetura de informação.

4

Tarefa

5

Mista

Design Visual

Tratamento estético do conjunto de elementos da interface.

5

Mista

Design Visual

Tipografia, iconografia e componentes de navegação.

O alvo principal a que se propõe este projeto, é redesenhar a interface do sistema, respeitando a estrutura e ferramentas já desenvolvidos, não propondo novas ferramentas e funcionalidades para o EVA, apenas readequando os espaços, valores e momentos da interface.

6. DESENVOLVIMENTO

O desenvolvimento do projeto segue a partir da aplicação da metodologia definida acima, onde inicialmente a aplica-se das duas primeiras etapas, Necessidades dos Usuários e Objetivos do Ambiente.

Cabe aqui ressaltar que cada etapa da metodologia adota uma ótica diferenciada em foco na tarefa, ou ação que o usuário precisa realizar em determinado momento, e foco na informação, onde considera-se as principais informações visuais que o usuário espera ou necessita encontrar para realizar as tarefas.

17 6.1 NECESSIDADES DOS USUÁRIOS (foco na tarefa)

A metodologia de Educação a Distância da UnisulVirtual, aponta o EVA como ponto principal de interação entre alunos e professores, dos alunos com os seus colegas e dos alunos com as equipes de apoio da UnisulVirtual.

O acesso principal ao conteúdo didático se dá através do livro didático impresso, o qual o aluno recebe em casa. O processo de mediação, portanto é feito via EVA, on-line preferencialmente de maneira assíncrona onde, a comunicação não ocorre em sincronia às ações dos participantes. Para isso, existe o Sistema Tutorial, onde a figura do Professor Tutor se faz presente. O Professor Tutor é um mediador no processo de ensino-aprendizagem sendo o responsável pela motivação dos alunos e pela criação de oportunidades de aprendizagem (MANUAL DO ALUNO, 2008). No aspecto ao acesso ao conteúdo didático, o EVA é também utilizado como espaço para exercício dos conhecimentos adquiridos, através de hipermídias mais seletivas, que permitem atividades de auto-avaliação, onde o aluno interage com o próprio conteúdo.

Portanto, identifica-se que a principal necessidade do usuário, no caso o aluno é ter acesso a arquivos e informações digitais, e em segundo plano, interagir com conteúdos gerados pelos alunos e pelo Professor Online, ou Professor Tutor. Logo, caracteriza-se um espaço de coleta de arquivos e socialização.

Figura 01: Espaço de interação com o Professor Tutor.

Fonte: Elaboração do autor.

18 Existe ainda uma necessidade secundária, a do uso do EVA como ambiente de download e publicação de dados acadêmicos. É um espaço onde os alunos tem acesso à arquivos digitais das avaliações, e publicação de notas e provas. Neste aspecto, o EVA é um espaço onde a Universidade se faz presente mais formalmente, como instituição de ensino, não apenas como espaço de sala de aula e de aprendizagem , mas um espaço equivalente a secretaria, e cordenação de curso, com outros objetivos mais formais.

Figura 02 Midiateca, espaço onde o aluno encontra materiais didáticos digitais.

Fonte: Elaboração do autor.

Da mesma maneira, entende-se que as necessidades dos usuário que fazem parte do corpo docente, são as mesmas que as dos alunos, sendo mais centrada em publicação de arquivos e retirada de relatórios das atividades realizadas pelos alunos.

Ressalta-se aqui a existência do SISEAD, um sistema on-line que é utilizado pelos docentes e administradores do sistema tutorial da Unisul Virtual em 80% dos procedimentos na atualização de arquivos e conteúdos do EVA.

Figura 03: SISEAD, Sistema utilizado pelos docentes.

Fonte: Elaboração do autor.

Delineia-se portanto, as necessidades dos usuários com foco na tarefa:

19 a) Acesso aos materiais didáticos b) Acesso aos conteúdos complementares c) Acesso às avaliações d) Publicação de documentos de avaliação e) Publicação de textos f) Compartilhar conhecimentos através do envio de arquivos e inserção de texto; g) Compartilhar dúvidas através da inserção de texto; h) Acesso às informações acadêmicas.

6.2 OBJETIVOS DO AMBIENTE (foco na informação)

Neste aspecto, o EVA funciona como principal canal de comunicação a respeito do conteúdo da disciplina, pois é o suporte para todo tipo de discussão e mediação no avançar do curso. A comunicação é feita basicamente através de textos digitais, e nos últimos meses, com a popularização do acesso a internet banda larga, a Unisul Virtual tem apresentado vídeos com o perfil do Professor Online. Os vídeos tem como intenção humanizar a figura do professor, estratégia esta que tem apresentado louvável aceitação por parte dos alunos. É importante notar que os alunos podem comunicar-se apenas por imagens e textos enviados, sob supervisão do Professor Tutor, não sendo disponível o recurso de vídeo e áudio.

Nota-se que em alguns casos, os alunos utilizam recursos externos para apresentar conteúdos multimídia, como sites de broadcast de vídeo e comunicadores instantâneos.

Os usuários contam com uma ferramenta de interação síncrona, chamada de CHAT, que é pouco utilizada e pouco estimulada, pois as seções contam com raros participantes e tal tipo de interação requer regras de comunicação ordenada, o que dificulta em muito o processo de mediação.

Figura 04: Chat.

Fonte: Elaboração do autor.

20

As informações em texto, vídeo e áudio são agrupadas em espaços específicos, não integrados, relacionados com o tipo de tarefa que cada espaço está planejado para suprir.

Existe portanto, uma área diferente para cada tipo de interação, o Fórum, a Exposição, Ajuda, Professor.

Figura 05: Menu de navegação com as áreas de interação separadas.

Fonte: Elaboração do autor.

O processo de interação do aluno com o conteúdo da disciplina, se dá através do campo Unidades, que é um reflexo das unidades do Livro Didático, onde o aluno, através do Cronograma pode acompanhar a evolução do conteúdo com as semanas de estudo, sendo assim tambem com as Avaliações.

Figura 06: Espaço de interação com o conteúdo didático das unidades Fonte: Elaboração do autor.

Os objetivos do EVA com foco na informação apontados são: a) Acessar a parte do conteúdo didático nos espaços das Unidades b) Colaborar com textos e conteúdos digitais em espaços específicos para cada atividade A seguir, a segunda etapa delineada pela metodologia adotada é a de Especificações Funcionais e Conteúdos Necessários.

21 6.3 ESPECIFICAÇÕES FUNCIONAIS (foco na tarefa)

Nesta etapa, realiza-se o levantamento de todas as ferramentas do EVA e a principal função designada para cada uma.

Figura 07: Cabeçalho de Ferramentas do EVA. Fonte: Elaboração do autor.

Nome do Aluno: Corresponde ao nome do Aluno. Funciona como acesso aos dados do Perfil do Aluno; Outras Disciplinas: Retorna a tela de abertura do EVA, onde o Aluno escolhe outra disciplina que estiver cursando; Mural: É o meio de comunicação do sistema tutorial com os alunos. Sua função é passar informações, avisos, mensagens e eventos de interesse geral; Plano de Ensino: Apresenta ao nome da disciplina acessada, e dá acesso aos conteúdos detalhados do plano de ensino da disciplina e critérios de avaliação; Midiateca: Área destinada para o download de materiais didáticos da disciplinas, o Livro Didático, referências, e links; Monitor: Espaço para solução de dúvidas administrativas, ou seja, aquelas não relacionadas com o conteúdo didático da disciplina; Avaliação: Download e envio dos arquivos de Avaliação a Distância; Professor: Permite o envio de dúvidas a respeito do conteúdo da disciplina. As perguntas de outros colegas podem ser acessadas por este mesmo espaço; FAQ: Agrupa as perguntas e respostas mais frequentes; Ajuda: Informações sobre como Estudar a distância, termos, dicas sobre condutas, dicas de organização pessoal e informações gerais sobre software e hardware de computadores;

22 Cronograma: Informações sobre o cronograma de atividades da turma , datas sugeridas para realização das atividades acadêmicas; Turma: Acesso ao Perfil de cada Aluno, Professor Tutor, Professor Conteudista; Chat: Ferramenta de mensagens instantâneas; Fórum: Discutir determinados assuntos com os colegas e com o Professor Tutor; Exposição: Expor trabalhos realizados pelos alunos; Unidades On-line: Espaço reflexo da unidade do Livro Didático. Acesso aos Objetivos de Aprendizagem, Atividades de Auto-Avaliação, Avaliação a Distância, Dicas, Síntese, e Saiba Mais.

6.4 CONTEÚDOS NECESSÁRIOS (foco na informação)

Para tornar o trabalho mais prático, listar-se todos os tipos de elementos que constituem o conteúdo necessário em cada ferramenta do EVA. Nome do Aluno(Perfil): Campo para as seguintes informações: Foto Email Sexo Homepage Cidade onde mora País Data de Nascimento Descrição Projeto de Vida Expectativas em relação ao Curso Instituição/ Empresa que trabalha Cargo / Função Trajetória Profissional Formação Cursos Botão Fechar

23 Outras Disciplinas: Disciplinas abertas Lista das disciplinas finalizadas Mural: Cronograma Locais de Prova Mensagens em texto e vídeo do professor tutor Mensagens em texto da Monitoria Botão próxima (mostrar outras mensagens) Botão Anterior (mostrar mensagens anteriores) Plano de Ensino: Campos de texto com as seguintes informações: Professores conteudistas Professor (tutor) Créditos Carga Horária (hora-aula) Ementa Justificativa Objetivos Conteúdo Programático Sistema de Avaliação Critérios de Avaliação Referências Midiateca: Filtrar Biblioteca Virtual Material da Disciplina (lista de hiperlinks para arquivos) Textos (lista de hiperlinks para arquivos) Material da Turma (lista de hiperlinks para outros sites) Monitor: Ajuda FAQ Campo de edição de texto Botão enviar Lista de perguntas

24 Botão resposta (Relacionado a pergunta) Avaliação: Desempenho Pesquisa Unidade / Atividade / Arquivo AD (descrição da atividade) Arquivo AD (link para o arquivo) Enviar Ad (janela nova)

Unidade (descrição)

Atividade (descrição)

Texto (espaço para preenchimento em texto)

Anexo (botão para enviar arquivo)

Enviar (botão)

Cancelar (botão) Professor: Ajuda Faq Campo de edição de texto Botão enviar Lista de perguntas Botão resposta (Relacionado a pergunta)

FAQ: Filtrar Voltar Lista de perguntas Botão resposta (Relacionado a pergunta) Ajuda: Menu Seleção Manual do Aluno (link para arquivo) Ajuda Net (textos e hiperlinks)

Glossário Interativo (textos)

Menu de seleção de letras

Lista de Conceitos Etiqueta Net (textos e hiperlinks) Aprendizagem e o estudo (textos e hiperlinks) Equipamento (textos, hiperlinks e imagens de tutoriais)

25 Cronograma: Tabela de texto Turma: Meu Perfil Campos de textos para preencher cada linha

Foto

Email

Sexo

Homepage

Cidade onde mora

País

Data de Nascimento

Descrição

Projeto de Vida

Expectativas em relação ao Curso

Instituição/ Empresa que trabalha

Cargo / Função

Trajetória Profissional

Formação

Cursos

Botão Fechar Monitor Lista de monitores

Foto

Email

Sexo

Homepage

Cidade onde mora

País

Data de Nascimento

Descrição

Projeto de Vida

Expectativas em relação ao Curso

Instituição/ Empresa que trabalha

Cargo / Função

Trajetória Profissional

Formação

26

Cursos Botão Fechar

Chat: Janela nova de Chat Sair Campo de texto (conversa) Lista de usuários conectados Campo de edição de mensagem Campos de opções de mensagem Enviar (botão) Rolagem automática (campo de marcação) Fórum: Lista de fóruns abertos (título) Lista de fóruns abertos (título e texto) Comentar (botão) Buscar (botão)

Foto

Autor

Título

Mensagem

Título da resposta

Mensagem (campo para edição de texto) Botão de recebimento por email Enviar (botão) Voltar (botão) Próxima (botão) Exposição: Incluir (botão) Título Unidade Descrição Arquivo (envio de arquivo) Enviar (botão) Cancelar (botão) Filtrar Filtrar por

27 Que contenha o texto Enviar (botão) Voltar (botão) Títulos dos trabalhos Título Arquivo Campo para comentário Enviar (botão) Voltar (botão) Lista de comentários

Unidades On-line: Objetivos Texto Dicas Texto Síntese Texto Fechar (botão) Saiba Mais Texto Hiperlinks Atividades Textos Imagens Hipermídias Hiperlinks Imagem livro (link midiateca) Biblioteca Virtual (link Biblioteca)

Com todas as ferramentas mapeadas, percebe-se como cada espaço é constituído e seus objetivos como ferramenta, observa-se asssim como cada tarefa requer tipos de informações diferentes em cada espaço. A seguir, temos a análise voltada a tarefa, fazendo o levantamento da interação entre os espaços.

28 6.5 DESIGN DE INTERAÇÃO (foco na tarefa)

Nesta etapa analisa-se as principais ações que o aluno deve realizar para usar o EVA e também os modelos mentais propostos para tais ações. Ao fazer isso, propõe-se novas dinâmicas, sempre relevando a importância de uma estrutura centrada nos usuários e não no sistema, utilizando dos conceitos de abrangência e profundidade topológica, que deve seguir a topologia natural entre as intenções e ações necessárias, entre as ações e resultados subseqüentes e entre a informação visível e o estágio em que se encontra o sistema (NORMAN 1990), a fim de guiar as ações toma-se como base o Manual do Aluno, que demonstra as principais ações que os alunos devem realizar no EVA para finalizar cada tarefa. É importante ressaltar que esta etapa não apropria-se de fluxogramas de aplicação, mas de esquemas topolígicos de navegação, identificando apenas os espaços que a hipermídia apresenta.

6.5.1 - AÇÕES PARA A TAREFA “ACESSAR AO EVA”.

Esta tarefa relativamente simples conceitua-se pelos seguintes passos: a) Acessar http://www,.irtual.unisul.br b) Buscar o espaço para inserção de Login e Senha. c) Incluir os dados d) Escolher a turma na qual está matriculado.

Figura 08: Espaço de login no http://www.virtual.unisul.br Fonte: Elaboração do autor.

29 Ao logar com informações erradas, o Aluno encontra uma tela de login inválido, que leva a outra tela para finalmente ter o re-envio de senha.

Neste aspecto temos o seguinte desenho de interação:

Figura 09: Estrutura de interação atual para login.

Fonte: Elaboração do autor.

Para esta ação, sugere-se diminuir os passos para o re-envio de senha via email, de maneira que o usuário possa já de antemão antes de tentar uma senha provável, possa re-enviar sua senha por email, seguindo a seguinte estrutura de navegação:

Figura 10. Sugestão de mudança de interação entre as etapas de login.

Fonte: Elaboração do autor.

30 6.5.2 - AÇÕES PARA A TAREFA “COMO VISUALIZAR OS MATERIAIS NA MIDIATECA”.

Esta etapa consiste basicamente em acessar os hiperlinks onde o aluno pode fazer o download de arquivos em PDF do livro didático e dos conteúdos complementares indicados pelos Professores.

A Ferramenta Midiateca pode ser acessada a qualquer momento e lista todos os arquivos que o aluno tem disponível. A lista de arquivos é apresentada e ao clicar no link Midiateca, o aluno é direcionado a outra página, com a descrição do arquivo e o link para download.

Figura 11: Midiateca.

Fonte: Elaboração do autor.

Sugere-se aqui a redução de estrutura, pois não há necessidade de levar o usuário a um espaço que descreve o material disponível, sugere-se então o uso de recurso de descrição por ação de mouse sobre o hiperlink, o que diminui a navegação em uma tela, agregando velocidade no acesso a informação e dando acesso ao arquivo no prório hiperlink apresentado, ao contrário de uma nova página, como no modelo atual.

31 6.5.3 - AÇÕES PARA A TAREFA “CONSULTAR E ENVIAR ARQUIVOS DE AVALIAÇÃO A DISTÂNCIA” E “CHECAR OS COMENTÁRIOS SOBRE AVALIAÇÕES ENVIADAS”.

O acesso aos arquivos de avaliação a distância é parte fundamental para o sistema tutorial da UnisulVirtual. A estrutura de acesso é enxuta e rápida, onde ao acessar a ferramenta “Avaliação” o aluno é levado a outra página onde encontra dois hiperlinks, um para realizar o download do arquivo e outro, onde é levado a uma nova tela de envio de arquivo. Tal estrutura de interação deve ser mantida, pois é clara e rápida para a construção de um modelo mental simplificado.

Figura 12: Avaliação.

Fonte: Elaboração do autor.

A outra tarefa do aluno é ter acesso aos comentários do Professor após corrigir as avaliações enviadas. Para realizar tal tarefa, o aluno deve realizar a ação de clicar sobre o link “Desempenho” no espaço de submenu. Tal link leva o aluno a outro espaço onde lista a quantidade de avaliações da disciplina e um resumo do comentário do Professor.

Figura 13: Ferramenta Desempenho.

Fonte: Elaboração do autor.

Temos a seguir a seguinte estrutura de interação:

32

Avaliação

Desempenho

Descrição Download AD

comentários

Envio AD

Figura 14: Interação existente entre os elementos da ferramenta Avaliação.

Fonte: Elaboração do autor.

Para tal estrutura, sugere-se uma melhor ligação entre as etapas, como incluir no mesmo espaço, as ações que o aluno pode realizar quando se trata de avaliação. Desta maneira, após enviada a avaliação o aluno pode visualizar na mesma tela a descrição, link para download do arquivo, link para o envio e comentários do Professor.

Dessa forma, o aluno pode realizar qualquer ação para tarefas relativas a Avaliação a partir do mesmo ponto.

Tal estrutura apresentaria-se da seguinte maneira:

Avaliação

Descrição

Download AD

Envio AD

Figura 15: Interação sugerida entre os elementos da ferramenta Avaliação Fonte: Elaboração do autor.

comentários

33 6.5.4 - AÇÕES PARA A TAREFA “COMENTAR NO FÓRUM” Como analisado anteriormente, a ferramenta Fórum existe para que o aluno possa cumprir a tarefa de discutir determinados assuntos com os colegas e com o Professor Tutor. O tópico a ser discutido, é sempre levantado pelo Professor, que faz a primeira postagem, onde os alunos podem comentar a mensagem do professor ou a mensagem de resposta de outros alunos.

Assim sendo, ao clicar em Fórum, o aluno é levado a um espaço com a lista de tópicos. Apresenta-se também todo o conteúdo do tópico gerado pelo Professor, conforme vemos na imagem a seguir:

Figura 16: Lista de tópicos da ferramenta Fórum.

Fonte: Elaboração do autor.

Para participar de um tópico, o aluno deve clicar no título do mesmo para acompanhar a lista de comentários e réplicas. Somente clicando sobre um dos títulos dos comentários, é que o aluno pode finalmente colaborar com comentários. O aluno também pode ler o comentário antes de selecionar comentá-lo, porém não pode realizar comentários nesta etapa.

34

Figura 17: Comentários dentro de cada Tópico da ferramenta Fórum.

Fonte: Elaboração do autor.

Percebe-se aqui a quantidade de passos que o aluno necessita para poder participar ou até mesmo ler, pois ainda nesta etapa não lhe é permitido comentar os tópicos dos colegas.

Para tal, o aluno deve clicar no título de cada réplica para poder vincular seu comentário a réplica. Tal ação somada a apresentação da interface, torna ainda mais complexo a tarefa de comentar no fórum.

Observa-se na imagem a seguir, o espaço final onde o aluno pode finalmente fazer o comentário.

35

Figura 18: Espaço final para realizar a participação no Fórum.

Fonte: Elaboração do autor.

A estrutura de interação aqui é talvez uma das mais complexas, pois a estrutura hipertextual acaba tornando-se cada vez mais profunda, representada na imagem das interações que vemos abaixo:

FORUM

TOPICO1 descrição

cometário1

cometário2

TOPICO2 descrição

cometário1

cometário2

TOPICO2 descrição

cometário1

COMENTAR

Figura 19: Estrutura de interação atual entre os espaços do Fórum.

Fonte: Elaboração do autor.

cometário2

36 A partir desta estrutura, sugere-se uma simples mudança quando montamos modelos metais. Basta possibilitar ao aluno a inserção de comentários no momento em que lê o conteúdo do Fórum, colaborando com o senso de localização.

A seguinte mudança pode ser melhor compreendida na imagem a seguir:

FORUM

TOPICO1 descrição

COMENTAR

TOPICO2 descrição

COMENTAR

cometário2

COMENTAR

cometário2

COMENTAR

cometário1

COMENTAR

cometário1

COMENTAR

Figura 20: Possibilitar o comentário no momento de leitura do conteúdo.

Fonte: Elaoração do autor.

6.5.5 - AÇÕES PARA A TAREFA “PUBLICAR TRABALHO NA EXPOSIÇÃO” A ferramenta Exposição tem como objetivo ser um espaço onde o aluno publica trabalhos (arquivos) e pode realizar comentários a partir destas entradas de aquivos. Com uma estrutura relativamente simples, o aluno pode fazer a inclusão do seu trabalho a qualquer momento, pois o botão “Incluir” se faz presente no submenu constantemente. Ao acessar a ferramenta Exposição, o aluno encontra a listagem de unidades abordadas e a listagem de trabalhos publicados, bem como a descrição de quem e quando foi postado.

37

Figura 21: Ferramenta Exposição.

Fonte: Elaboração do autor.

A ferramenta exposição é essencialmente igual a ferramenta Fórum, tendo como única diferença, a sua função pedagógica no Sistema Tutorial da Unisul Virtual. A estrutura de interação no uso da ferramenta Exposição para publicar trabalhos, é fácil de ser compreendida e pode ser mantida desta maneira. Semelhantemente, para excluir um trabalho publicado, basta apenas o aluno clicar no botão “Excluir” posicionado ao lado do título do trabalho publicado.

Tal estrutura é simples e direta, o que justifica ser mantida.

No entanto, nota-se apenas problemas de design visual, como o alto grau de homogenidade, o que dificulta ao usuário encontrar o botão “Incluir”, e compreender a ferramenta como de Atividades de Avaliação. Todas as telas, devem ter um ponto mais forte, um pronto principal. Assim, a página pode passar a idéia de confusão e desorganização, conforme aponta Memória 2006.

A partir deste momento, busca-se uma ótica um pouco mais ampliada ao analisar a interação do EVA com relação à Unisul como instituição acadêmica e portanto, considerar o EVA como cada ferramenta está inserida neste contexto.

O aluno tem ao seu serviço, quatro principais campos de interação, como o Portal da Unisul, o Portal da Unisul Virtual, o Sistema Acadêmico Minha Unisul e o EVA. A distinção entre tais espaços é evidente pelo tipo de conteúdo que se destina aos mesmos, onde o Portal Unisul atinge o relacionamento de mercado e acadêmico interno da mesma maneira que o Portal da UnisulVirtual, porém com ênfase nos assuntos relativos a EaD. O ambiente Minha Unisul é um espaço onde o aluno encontra informações administrativas da Universidade, e o EVA, informações de conteúdo didático, interação e mediação centrada no mesmo conteúdo.

Diferente dos portais da Unisul e UnisulVirtual, o EVA e o sistema Minha Unisul são de uso exclusivo de docentes e discentes da Unisul. O EVA no entanto é o único espaço oficial da Unisul que permite que os alunos interajam entre si de maneira colaborativa através do envio de mensagens instantâneas e construção de perfil social.

38 Tal possibilidade implica diretamente nos aspectos de interação entre as ferramentas do EVA, e apesar de este trabalho não sugerir mudanças no Sistema Tutorial da Unisul Virtual, é extremamente relevante para o redesign da interface considerar todas as ferramentas do EVA em relação a possibilidade de tornar-se uma rede social.

Portanto, agrupa-se as ferramentas pelos seguintes tipos de interação: a) Interação dos alunos com os Colegas de Turma; b) Interação dos alunos com a Unisul Virtual como instituição; c) Interação dos alunos com o Conteúdo Didático e Disciplina do curso.

A partir dos níveis de interação, cada ferramenta pode ser relacionada ao seu campo de interação, conforme nos mostra a imagem abaixo.

Ferramentas do EVA e os níveis de interação do aluno com: Colegas / Alunos

UnisulVirtual

Conteúdo / Disciplina

Nome do Aluno Turma Chat Fórum Exposição

Outras Disciplinas Monitor Avaliação FAQ Ajuda

Plano de Ensino Mural Midiateca Professor Avaliação Exposição Cronograma Fórum Exposição Unidades On-line

Figura 22: Ferramentas do EVA e suas relações de interação com o Aluno.

Fonte: Elaboração do autor.

Na imagem acima, através do agrupamento por área de interação, percebe-se com maior facilidade o propósito de de cada ferramenta do EVA, porém esta organização não é respeitada na construção da interface atual do EVA. A estrutura atual de interação do EVA é construida de maneira desordenada através de estruturas hipertextuais curtas e profundas. Não apresenta distinção no design visual, pois a disposição exacerbada das ferramentas através do cabeçalho principal não traz nenhuma referência a respeito do que o usuário encontra em cada ferramenta.

O que propõe-se na imagem acima é um modelo mental de contraste mais claro, de maneira que sirva como um mecanismo de compreensão do meio, um guia do usuário para a execução de ações e uma orientação para a atenção do usuário quanto às coisas mais interessante e uma forma de armazenamento de informações (ROYO, 2008).

39 Assim o aluno pode perceber facilmente que para dúvidas de secretaria ou acertos financeiros, ele deve relacionar-se com as ferramentas realcionadas ao grupo Unisul Virtual, onde está selecionada a ferramenta Monitor, e não confundindo-a com a ferramenta Professor.

Algumas destas orientações são apresentadas no Manual do Aluno que a Unisul Virtual disponibiliza, porém a falta de clareza nos campos de interação, ou a alta homogenindade entre as ferramentas não colaboram para a formação de um modelo mental mais semelhante com a realidade do EVA e da Unisul Virtual.

Apesar de ser uma plataforma de mediação didática, o EVA é também um canal de comunicação e relacionamento entre a comunidade acadêmica. uma possibilidade pouco explorada por não apresentar um espaço específico para socializão e total desconexão com páginas dos cursos, e outras comunidades de aprendizagem. Até mesmo nas ferramentas onde existe um incentivo maior a discussão, o Fórum e Exposição, percebe-se o isolamento que tais espaços apresentam em relação a todos os outros espaços do EVA, como a conexão com outros espaços da Universidade, cursos etc. Basicamente todas as ferramentas apresentam baixa interação com todas as outras, limitando o usuário a realizações de ações isoladas em cada atividade que deve cumprir, pois conta com ferramentas que não comunicam entre si.

Abaixo são relacionadas as diretrizes principais que serão observadas nas etapas a seguir, de Arquitetura de Informação e Projeto de Navegação: a) Construir espaço para relacionamento com toda a comunidade acadêmica; b) Criar uma estrutura de navegação que permita o acesso a duas ou mais ferramentas diferentes simultaneamente; c) Criar uma interface que permita ações simultâneas em áreas de interação diferentes; d) Criar uma interface que colabore com o tipo de interação que o Aluno disporá, Aluno-UnisulVirtual, Aluno-Colegas, Alunos-Conteúdos Didáticos e) Criar uma interface inicial onde o aluno pode ter acesos a eventos e outras comunidades dentro da Unisul Virtual.

De posse das diretrizes acima, analisa-se a partir da arquitetura de informação existente, construíndo uma nova proposta de organização informacional.

40 6.6 ARQUITETURA DA INFORMAÇÃO (foco na informação)

De acordo com Dijck (2003), o arquiteto da informação trabalha a informação de um site, para que seus usuários consigam encontrar as informações que precisam e alcançar seus objetivos. A partir de tais conceitos analisou-se a estrutura atual do EVA. LOGIN

Lista das disciplinas

Unidades

Exposição

Fórum

Chat

Atividades

Saiba Mais

Dicas

Síntese

Turma

Cronograma

Ajuda

FAQ

Professor

Mural

Nome

Ouras Disciplinas

Plano de Ensino

Midiateca

Avaliação

Desempenho

Conteúdo Didático

Figura 23: Arquitetura da informação atual.

Fonte: Elaboração do autor.

Nota-se portanto a estrutura superficial e larga construída para o EVA, o que a princípio pode parecer uma estrutura simples. Todo problema acontece a partir do ponto em que o aluno passa a interagir, pois tal arquitetura faz com que cada elemento de interação esteja inserido dentro de cada nível, fazendo com que toda a informação principal mude constantemente para o nível em que o aluno está, perdendo portanto o contato com a ferramenta anteriormente acessada. Neste caso, como já observado, não existe interação entre as informações de cada ferramenta, tornando-as isoladas umas das outras.

Um exemplo típico, é quando o aluno encontra-se na área de Conteúdo Didático, não consegue participar do Fórum ou Exposição por exemplo, nem ao menos consegue consultar a Midiateca para ter acesso ao arquivo digital do livro didático sem deixar o espaço que está acessando no momento.

Outro aspecto que percebe-se na arquitetura atual, é a desconexão entre os espaços e sua atividade, ou entidade de relacionamento. Apesar de interagir com partes diferentes do ambiente, a estrutura hipertextual confunde o Aluno, pois não apresenta nenhuma distinção que diferencie cada parte do EVA. A seguir a arquitetura do EVA ganha uma nova configuração, considerando a possibilidade de novas ferramentas, como o espaço de relacionamento entre os Alunos.

41

LOGIN

UnisulVirtual

Ajuda

FAQ

Desempenho

Monitor

Disciplina 01

Cronograma

Disciplina 02

Relacionamento

Mural

Unidades

Exposição

Fórum

Ouras Disciplinas

Atividades

Saiba Mais

Dicas

Síntese

Plano de Ensino

Midiateca

Avaliação

Professor

Nome

Turma

Chat

Conteúdo Didático

Figura 24: Nova proposta de Arquitetura da informação.

Fonte: Elaboração do autor.

A nova arquitetura da informação apresenta a mudança mais significativa do novo EVA, onde ao fazer o login, o aluno tem a sua frente níveis de informações agrupadas por tarefa. Tal agrupamento apoiado por uma estrutura de navegação que respeite as diretrizes de design de interação anteriormente definidas, simplifica a construção do modelo mental do EVA. O agrupamento também cria contrastes entre as áreas, e evita as recorrentes confusões entre a ferramenta Professor e Monitor, onde a primeira é utilizada para dúvidas de conteúdo e a segunda é utilzada para informações acadêmicas.

Ao aproximar as ferramentas entre si conforme a sua relevância para cada tarefa ou atividade, os níveis de profundidade de navegação tornam-se mais perceptíveis, e ao mesmo tempo, de baixa profundidade, ou seja, o usuário consegue perceber o que vai encontrar em cada nível de navegação antes de acessar a ferramenta. Percebe-se que em apenas três níveis de ramificação, o aluno chega ao conteúdo mais profundo, o acesso às atividades didáticas, e tal estrutura apresenta dois níveis a menos que a estrutura anterior.

A partir das novas diretrizes da arquitetura de informação construiu-se o Projeto de Interface, o Projeto de Navegação e o Design de Informação.

6.7 PROJETO DA INTERFACE (foco na tarefa)

Nesta etapa, temos o que muitos autores consideram como wireframe, ou seja, a estrutura que define a organização e proporção dos elementos em cada etapa do ambiente.

Antes de iniciar o desenvolvimento de uma nova interface, analisou-se brevemente a estrutura existente, com o cabeçalho fixo (ferramentas) submenu e área dinâmica na parte inferior.

42

ÁREA FIXA SUBMENU

ÁREA DINÂMICA

Figura 25: Wireframe do layout atual do EVA. Fonte: Elaboração do autor.

Basicamente todo o EVA é apresentado com a estrutura mostrada acima, o que limita a interação entre as ferramentas pois existe apenas uma área dinâmica disponível, não permitindo o uso de diferentes ferramentas de maneira simultânea. Ao acessar uma das ferramentas da área fixa, o submenu muda consequentemente com a área dinâmica, fazendo com que a tela anteriormente acessada não possa ser visualisada.

Como vimos anteriormente, tal dinâmica cria uma estrutura hipertextual superficial e larga, resultando em umaestrutura linear de navegação, própria para tarefas muito definidas conforme explica Royo 2008. Como todos os hiperlinks mudam apenas a área inferior, sendo que os conteúdos são apresentados um de cada vez e, no máximo, a maioria das atividades torna-se linear, o que limita a interação entre ferramentas diferentes.

Desta maneira, para orientar o desenvolvimento do wireframe para o novo EVA, é relevante recordar os itens apontados nas etapas anteriores: a) Construir espaço para relacionamento com toda a comunidade acadêmica; b) Criar uma estrutura de navegação que permita o aceso a duas ou mais ferramentas diferentes simultaneamente; c) Criar uma interface que permita ações simultâneas em áreas de interação diferentes;

43 d) Criar uma interface que colabore com o tipo de interação que o Aluno disporá, Aluno-UnisulVirtual, Aluno-Colegas, Alunos-Conteúdos Didáticos e) Criar uma interface inicial onde o aluno pode ter acessos a eventos e outras comunidades dentro da Unisul Virtual. f) Redução das etapas de interação A partir de tais demandas, desenvolveu-se a estrutura abaixo:

Figura 26: Nova proposta de Estrutura de Interface.

Fonte: Elaboração do autor.

A nova estrutura é composta basicamente por três áreas distintas: Área superior de status, área intermediária de ferramentas e área inferior de conteúdo.

Ao definir três áreas de informações, buscou-se agrupar as ferramentas do EVA de acordo as tarefas descritas no Manual do Aluno, criando assim espaços distintos. Ao evoluir nas etapas da metodologia, temos o design de informação, etapa responsável por detalhar as informações cada área da nova estrutura apresentará.

44 6.8 DESIGN DA INFORMAÇÃO (foco na informação)

A primeira área de interação, a área superior de status, deve apresentar a seguinte configuração:

Figura 27: Área superior de interação.

Fonte: Elaboração do autor.

Para a área de status, decide-se por disponibilizar o nome do aluno juntamente com seu status, que pode ser associado a sua disposição a comunicar-se, tal como em comunicadores de mensagens instantâneas.

Na seqüência, apresenta-se a ferramenta Mural, que deve também trazer a quantidade de novas mensagens para cada disciplina que o aluno cursa, e informações gerais.

A próxima ferramenta é a de Ajuda, que leva o aluno a informações no campo dinâmico. Por fim, temos a ferramenta Sair no final da barra.

A próxima área a ser detalhada é a de Ferramentas, uma seção intermediária que apresenta a seguinte configuração:

Figura 28: Área intermediária de interação.

Fonte: Elaboração do autor.

Para esta área, define-se uma nova nomenclatura para agrupar outras ferramentas do EVA, a “UnisulVirtual”. Tal espaço, conforme definido na etapa de arquitetura de informação, é o agrupamento das ferramentas Monitor e Desempenho, Ajuda e FAQ. Também é estabelecida como área para informações gerais sobre a Universidade, como o Mural e banners de eventos.

Seguindo a mesma lógica, disponibiliza-se as ferramentas de acesso a disciplina que o aluno está cursando. As ferramentas do EVA serão agrupadas por disciplina, construindo um subnível de navegação. Assim existe a possibilidade de variação de diferentes ferramentas por disciplinas, podendo apresentar disciplinas com ferramentas completamente diferentes.

A terceira área de interação definida é a parte dinâmica de conteúdos.

45

Figura 29: Área de interação com conteúdo.

Fonte: Elaboração do autor.

A última área de interação é destinada a apresentação direta de conteúdo. Apresenta o Título e descrição, podendo ser reduzida, ampliada ou minimizada. Apresenta espaço para conteúdos diversos e área para identificação visual.

A partir deste ponto, detalha-se o Projeto de Navegação, que agrega o Projeto de Interface com o Design de informação.

6.9 PROJETO DE NAVEGAÇÃO (foco na tarefa)

Nesta etapa tem-se a maior quantidade de modificações em relação a estrutura anterior. É neste ponto que o Design de Interação integra-se totalmente com a nova Arquitetura de Informação, criando um fluxo de ações e funcionalidades de cada elemento já definido para a interface. Inicialmente define-se como os planos interagem entre si, como cada área de informação aparecerá na interface e quais funcionalidades devem ter:

46 Menus “Dropdown” O menu dropdown é caracterizado pela apresentação de uma nova camada de informações posicionada em um campo pequeno, que é acionado pelo clique do mouse.

Para este projeto, adota-se apenas um nível de navegação com apenas uma lista de opções. Após selecionada a camada de navegação desaparece. Também deve desaparecer se o usuário clicar em qualquer outro lugar fora da camada, porém sem alterar as opções.

Figura 30: Aplicação de menu dropdown para mudança de status.

Fonte: Elaboração do autor.

Os menus dropdown são aplicados inicialmente para a mudança de status e subopções das ferramentas de cada seção da área intermediária.

Figura 31: Aplicação de menu dorpdown para o campo de ferramentas.

Fonte: Elaboração do autor.

Menu com navegação por abas.

A área intermediária, com as ferramentas terá navegação por abas, um esquema de navegação que traduz com precisão o modelo de estrutura hipertextual predeterminado nas etapas anteriores. Basicamente, a interface apresenta abas justapostas. Uma das abas já é pré

47 selecionada ao iniciar a navegação, e apresenta suas sub-categorias de navegação. Ao clicar em outra aba, apresenta-se as sub-categorias da aba selecionada, na mesma posição que as subcategorias das abas anteriores, porém por sobre a mesma.

Figura 32: Aplicação de menu em abas.

Fonte: Elaboração do autor.

O menu por abas será utilizado em algumas seções do EVA, porém recomenda-se o uso de hiperlinks no campo de informação de maneira que evite o uso exagerado do menu por abas.

Navegação por Janelas com cores distintas A navegação por janelas é um recurso conhecido como Multimodal, onde os elementos de interface podem ser posicionados, minimizados e fechados pelo usuário. Tal conceito será aplicado a parte de conteúdo, para apresentar o espaço de cada ferramenta selecionada, ou seção de ferramenta.

Cada janela aberta deverá apresentar o título e a descrição de cada ferramenta, bem como a característica visual de cada seção a que se origina. Desta maneira, existe a interação entre cada seção do EVA. Controles das janelas Com a apresentação de conteúdos em janelas, conseqüentemente amplia-se as possibilidades de navegação. Todos os possíveis elementos de navegação necessários para cada janela são descritos na imagem abaixo.

48

Figura 33: Controles de janelas.

Fonte: Elaboração do autor.

Os elementos de controle das janelas serão apresentados conforme a necessidade que o tipo de informação necessitar. Desta maneira, cada campo de conteúdo pode ser diagramado de maneira diferente. Os campos de Conteúdo Didático, podem valer-se dos controles de avanço enquanto para o Fórum , os controles de rolagem vertical são mais adequados.

A intenção é proporcionar maior liberdade na criação de conteúdo para cada ferramenta do EVA, e o critério para adoção de cada tipo de controle, fica a livre para o grupo de Desenho Educacional da UnisulVirtual de acordo com a proposta didático-pedagógica estabelecida para cada disciplina.

Janelas simultâneas e controle de posição.

Ao utilizar múltiplas janelas, necessariamente o usuário necessita de controles que organizem as janelas. Os controles constituem as seguintes funções: Fechar todas as janelas, organizar lado a lado, organizar em hierarquia de abertura.

49

Figura 34: Janelas simultâneamente dispostas.

Fonte: Elaboração do autor.

Figura 35: Opções para controle de posição.

Fonte: Elaboração do autor.

50 Cortinas para seções.

Outro recurso de navegação que se faz necessário para áreas de conteúdo de maior permanência, é a disposição de cortinas como área de conteúdo. As cortinas estendem-se logo abaixo da área de ferramentas e cobre as janelas previamente abertas. A cortina é acionada ao clicar na ferramenta e é recolhida quando clicado no mesmo local.

Na imagem a seguir, temos uma demonstração.

Figura 36: Apresentação do elemento cortina, que sobrepõe as outras janelas.

Fonte: Elaboração do autor.

Com o Projeto de Navegação estruturado, a construção do Design Visual torna-se uma etapa conclusiva no projeto, facilitando a construção das formas, linhas, ícones e tipos, já que toda a utilização do ambiente já está devidamente estruturada.

6.10 DESIGN VISUAL (foco na informação e na tarefa)

A partir das diretrizes aplicadas, desenvolve-se a seguir os componentes estéticos

51 da interface. A principal intenção aqui é aproximar cada espaço com o contexto ao qual está inserido, através de formas, texturas cores e tipos.

Inicia-se pelos elementos tipológicos, respeitando os critérios de ergonomia para web. A família escolhida é a Arial com tamanhos variando entre 24 - 18 - 12 - 9 e 7 pontos.

Figura 37: Família Arial.

Fonte: Elaboração do autor.

A seguir, constrói-se os elementos de navegação e ícones necessários. Ícones de status

Figura 38: Ícones de status.

Fonte: Elaboração do autor.

Botões e elementos de navegação

52

Figura 39: Botões e elementos de navegação.

Fonte: Elaboração do autor.

Menu superior

Figura 40: Menu superior.

Fonte: Elaboração do autor.

53 Barra de Ferramentas

Figura 41: Barra de ferramentas.

Fonte: Elaboração do autor.

Janela de Conteúdo

Figura 42: Janela de conteúdo.

Fonte: Elaboração do autor.

54 Interface completa

Figura 43: Simulação Mural.

Fonte: Elaboração do autor.

55

Figura 44: Simulação Monitor.

Fonte: Elaboração do autor.

56

Figura 45: Simulação Comunidades.

Fonte: Elaboração do autor.

57

Figura 46: Simulação Conteúdo.

Fonte: Elaboração do autor.

Os elementos em navegação por abas permite uma variedade quase infinita para inserir acessos a outros espaços virtuais de interação, sem com isso, prejudicar o acesso a disciplina que o aluno cursa. Outro aspecto importante é a apresentação dos conteúdos em janelas diferentes, ampliando ainda mais tal possibilidade. Mantendo os conteúdos dinâmicos em janelas, o aluno tem agora a possibilidade de utilziar duas ferramentas simultâneamente, podendo consultar outros espaços do EVA. A possibilidade de personalização de conteúdo em cada janela, é uma diretriz que potencializa o uso do EVA não só como espaço de estudo, consulta, socialização, e navegação, mas o

58 trasnforma em um verdadeiro laboratório de experiências, pois o tipo de conteúdo apresentado não se limita apenas em atender os itens do Sistema Tutorial da Unisul Virtual, mas possibilita a aplicação de simuladores e laboratórios virtuais.

O campo Minha Unisul também pode se fazer presente, conforme observa-se na navegação por abas, finalizando em redução das etapas de interação entre aluno e os âmbitos da Universidade. Neste aspecto, os recursos adotados para solucionar cada levantamento durante a aplicação metodológica classificam-se como mais que suficientes, pois além de atender as diretrizes principais, ampliam ainda mais as possibilidades de uso do EVA como plataforma de aprendizagem.

7. CONCLUSÃO

A maneira genérica que cada espaço dinâmico apresenta permite que os elementos de cada espaço do EVA possam ser pensados isoladamentes, ou seja, com o sistema de interface apresentado, pode-se ter subdivisões de informações em cada janela, criando ainda mais contrastes em cada espaço do EVA. Tal possibilidade permite ainda apresentar dentro de cada janela, outros espaços virtuais, como ligações com sites externos, vídeos e até mesmo universos virtuais como Seccond Life.

Outra possibilidade apresentada é a fácil modulação em função da área de conhecimento, como por exemplo, a criação de modelos visuais para os cursos de Matemática e outros para o curso de Direito, onde um requer maioes espaços de navegação horizontal enquanto o outro de navegação vertical. Os elementos que permitem tal possibilidade podem ser encontrado na etapa de Controle de Janelas na etapa de Projeto de Navegação. É importante ressaltar ainda que tal interface aqui sugerida, abre novas possibilidades na projetação do conteúdo elaborado para a Educação a Distância da Unisul Virtual, pois a interação simultânea de conteúdos de áreas do EVA completamente diferentes criam situações reais de mudança de comportamento do aluno e dos professores. Tal espaço torna-se um ambiente de socialização, que requer novas maneiras de pensar o conteúdo, de criar estratégias de aprendizagem, e finalmente construção de conhecimento interno, que se bem projetadas inicialmente potencializam o EVA como ambiente acadêmico.

A metodologia de Design de Experiência engloba os aspectos relativos ao sistema, interface e usuário, criando assim um roteiro de abordagens analíticas complexas. Tais abordagens, apontam detalhes que dificilmente são percebidos em metodologias mais específicas de redesign e design de interfaces. É importante ressaltar a constante tarefa de mudança de foco de análise, como

59 foco na tarefa e foco na informação, o que pode confundir alguns a princípio, porém, uma vez assimilada, torna-se uma dinâmica interessante, trazendo a tona aspectos que colaboram para o design centrado no usuário.

Quais informações serão apresentadas? Quais as tarefas o usuário deve realizar para cada atividade proposta? Essas são perguntas que os designers precisam responder no projeto de interface, pois a tendência natural de encontrar soluções sem focar muito em qual problema tenta resolver o coloca em uma situação muitas vezes cíclica e espiral de soluções paliativas.

Tal exercício e aplicação metodológica aqui apresentados não são de todo conclusivos, porém trazem aplicações suficientes para o redesenho completo da interface atual do EVA, construíndo assim um espaço de interação e socialização, comportamentos estes que estão transformando a maneira como o corpo pedagógico tem abordado os ambientes virtuais de aprendizagem no mundo todo. É necessário lembrar que a simples elaboração de uma nova interface não resolve por complet todos os problemas detectados, pois o design centrado no usuário deve levar em consideração primariamente o público-alvo e o seu feedback conforme nos explica Theo Mandel em The Elements of user interface, de 1997: É preciso buscar dados junto às pessoas que estão efetivamente utilizando os sistemas, não junto a 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 dos decisores ou investidores, em relação às informações fornecidas pelos usuários reais dos produtos de tecnologia da informação.

Tem-se portanto, um longo caminho a nossa frente, na consolidação de uma nova interface, na detecção de novos paradigmas em função de um novo comportamento e, ainda mais adiante, a tendência de avanço das interfaces para o desaparecimento do próprio computador como máquina para realizar as tarefas relacionadas com a comunicação, realidades aumentadas, mundos virtuais e o controle de equipamentos a distância. Os efeitos na maneira como os designers vão projetar as interfaces para tais realidades irá impactar totalmente na atividade de design e nos comportamentos dos usuários, pois cada vez mais, projeta-se não apenas pbjeos ou produtos tangíveis, mas experiências de vida.

O design é uam atividade criadora de cultura. Assim, diante da indiscriminada superficialização dos meios e das mensagens, e diante da pessão da velocidade, a responsabilidade dos designers é manter uma ecologia da comunicação: gerar novos espaços sociais por meio da linguagem. Em outras palavras, comunicar mensagens que ajudem o ser humano a desenvolverse como tal, e não somente como produto de consumo. (ROYO, 2008).

60 8. REFERÊNCIAS

BONSIEPE, Gui. Design do Material ao Digital. Florianópolis: FIESC/IEL, 1997.

CARROL, John M. Designing interaction: psychology at the humancomputer interface.

Cambridge University Press New York, New York, 1991.

CRIPPA, Wladimir. Universidades dão aulas on-line e frustram alunos. Acesso em: 26 de Abril de 2008 no Blog Estudante Virtual. Disponível em: <http://estudantevirtual.blogspot. com/2007/09/universidades-do-aulas-on-line-e.html/>. .

DIJCK, P. Information Architecture for Designers. Hove:RotoVision, 2003.

ECHEVERRÍA, Javier. Os senhores do ar: Telépolis e o terceiro meio. Barcelona, Destino, 1999.

GARRETT, Jesse James, The elements of user experience. Nova Iorque, New Riders, 2002.

IIDA, Itiro. Ergonomia: projeto e produção. São Paulo: E. Blücher, 1990.

KNAPP, Bjéren, Alberto (comp.) A experiência do usuário. Madri: Anaya Multimedia, 2002.

KRUG, Steve. Não me faça pensar. São Paulo: Market Books, 2001.

LANDOW, George P. Hipertexto. A convergência da teoria crítica contemporânea e a tecnologia. Barcelona, Padiós. 1995.

LEMOS, André; CUNHA, Paulo (orgs). Olhares sobre a Cibercultura. Sulina, Porto Alegre, 2003; p. 11-23 LÉVY, Pierre. Cibercultura. São Paulo: Editora 34, 1999.

PREECE, J. Online Communities. NY, : John Wiley & Sons. 2000.

MEMÓRIA, FELIPE Design para Internet: projetando a experiência perfeita; Rio de Janeiro; Elsevier; 2005.

NILSEN, Jakob. Projetando Websites. Rio de Janeiro: Campus, 2000.

61 NORMAN, Donald A. A psicologia dos objetos cotidianos. Madrid Nerea, 1990.

RIVOLTELLA, P.C. L’e-learning, tra didattica e ricerca: sfondi concettuali e strategici.

ROSSI, P. (Org.). Progettare l’eLearning/ eLearning design. Macerata: EUM, 2007.

RIVOLTELLA, P.C. Depois da educação a distância: tecnologia, educação e formação na Itália Educ. Soc. vol.29 no.104 Campinas, 2008. Disponível em < http://www.scielo.br/scielo. php?pid=S0101-73302008000300010&script=sci_arttext&tlng=e> Acesso em 05 de Maio de 2009.

ROYO Javier. Design digital. São Paulo: Edições Rosari, 2008.