Página de Início
Download do PDF para impressão- 46KB
USABILIDADE E A PADRONIZAÇÃO NO E-LEARNING
Andre de Abreu

Introdução

Atualmente, a maioria dos cursos on-line não possui um padrão mínimo e fixo de navegação interna. Como cada programa tem seu próprio leiaute e suas peculiaridades, o mesmo acontece com o sistema de navegação deles: eles são proprietários em relação a sua interface não havendo coerência visual e navegacional entre um curso e outro.

Isso gera problemas, tanto aos alunos quanto à equipe de produção. Sem uma navegação comum a todos os cursos o aluno precisará a cada novo módulo re-aprender a localização e o funcionamento de cada elemento do site (cor dos hiperlinks, destaques, identificação de textos para leitura, entre outros).

Com o crescimento da internet como ferramenta de educação a distância e após a promulgação da portaria 2.253 do Ministério da Educação brasileiro, é bem provável que os futuros estudantes do ensino superior nacional necessitem freqüentar mais de uma disciplina on-line para concluírem a carga horária regular de seus cursos. Esse documento, publicado no Diário Oficial da União em 18 de outubro de 2001, garante a toda instituição universitária a possibilidade de oferecer 20% da carga horária de seus cursos superiores de maneira não-presencial, inclui-se ai o ensino por meio da internet, mas conhecido como e-learning. Tendo isso em vista, é extremamente necessário trabalhar padrões de interface. Desta forma, o aluno precisará aprender apenas uma vez como usar os recursos do ambiente de ensino utilizado por ele.

Obviamente, serão permitidas personalizações em cada curso, porém a lógica de funcionamento e a disposição dos elementos na tela serão sempre a mesma. Ou seja, com o tempo, os cursos da instituição ganharão uma “cara” que será facilmente reconhecida pelas pessoas que o cursam mais de uma vez.

Adotando uma padronização, a instituição leva vantagens em quatro pontos:

  • Tempo de trabalho, já que o maior esforço será feito apenas uma vez durante a elaboração dos padrões;
  • Na produção dos próximos cursos. Com um sistema navegacional fixo, a equipe terá mais tempo para investir em melhorias de conteúdo e apresentação das aulas;
  • As despesas de suporte tenderão a diminuir, pois uma interface básica padrão dará ao aluno muito mais domínio sobre o ambiente de ensino e, com isso, ele passará a resolver seus problemas de forma independente, recorrendo ao suporte apenas em casos extraordinários;
  • E os professores, com essas diretrizes, poderão desenvolver o conteúdo de seus cursos pensando nesses padrões. Isso diminui o tempo gasto na adaptação dos textos finais dos conteudistas para a web.

Este trabalho procurará encontrar saídas para esse tipo de padronização usando como base as heurísticas de usabilidade, principalmente as propostas por Jakob Nielsen em suas obras Projetando Web Sites e Homepage Usability: 50 websites deconstructed. Este artigo será dividido em itens que abordarão cada ponto componente de um curso on-line, sua descrição e as possíveis soluções a serem adotadas.

As orientações desta proposta podem ser, futuramente, adotadas por qualquer instituição interessadas na implantação de programas de e-learning. Afinal, todas as constatações descritas nesse estudo têm, além da pesquisa bibliográfica, a prática vivenciada nos projetos de e-learning da Universidade Anhembi Morumbi de São Paulo, instituição esta com quase 10 anos de experiência em educação a distância via internet.

Cor dos hiperlinks

Os usuários geralmente estão acostumados a identificar como hiperlink toda a palavra sublinhada em azul. No entanto, acostumou-se a não seguir padrões para isso. Apenas adapta-se o formato do hiperlink ao leiaute do curso esquecendo como o aluno pensa o formato de um hiperlink (palavra azul sublinhada). De um tempo para cá, os usuários de Internet estão aceitando outra cores para o destaque de hiperlinks, porém continua padrão qualquer elemento sublinhado em um site ser sinônimo de hiperlink ou elemento “clicável”.

O ideal é adotar como padrão de indicação de hiperlink o sublinhado em tons de azul aceitando-se variações na cor apenas em casos extremos, caso a cor azul não se adapte de forma alguma ao restante do projeto visual do site . No caso de hiperlinks visitados, o recomendável é a utilização de tons rosa. Esse padrão é extremamente importante, pois indica ao aluno por quais seções ele já passou. Com isso, evitamos que o estudante se desaponte ao entrar em uma seção, aguardar todo o carregamento da página e, depois, descobrir que aquele local onde ele clicou não era o esperado.

Aspectos do texto e formas de exibição

Apesar de muitos defenderem o texto curto na internet, não se pode esquecer também que uma das vantagens da web em relação a outras mídias é a ausência de limites físicos de espaço. Por isso, devemos buscar a conciliação dessas duas teorias sobre a disposição de conteúdo na internet.

Assim como é desconfortável ler textos longos na tela do computador, da mesma forma é desconfortável a necessidade de clicar quatro ou cinco vezes até ter acesso à conclusão de uma aula. Não obstante, a quebra do texto em muitos pedaços incomoda os alunos que gostam de imprimir os conteúdos para leitura off-line.

O formato de apresentação dos textos também influencia muito na forma como as pessoas assimilam o conteúdo. É necessário tentar utilizar cores contrastantes entre texto e fundo da página. Neste caso, poder-se-ia seguir a seguinte recomendação de padronização:

Procurar manter, aproximadamente, a média de 8 a 12 palavras por linha de texto e evitar textos marginados (justificados). O excesso de palavras por linha em parágrafos marginados faz com que os pontos de referência criados pelo olhar humano durante a leitura deixem de existir, fazendo com que, desta forma, o aluno se perca ao ler as aulas on-line.

  • Sempre tentar aplicar fundo branco às áreas de leiaute destinadas a texto, buscando utilizar o chamado texto positivo (texto na cor preta sobre o fundo branco).
  • Dividir partes do conteúdo em lista de itens (como esta) . Com essa atitude, quebramos um pouco o ritmo cansativo dos textos corridos e mostramos algumas partes das aulas de forma mais agradável e pertinente a leitura em monitor.
  • Utilizar boxes para destacar partes do texto ou informações que não estão relacionadas diretamente ao assunto tratado na aula em questão.
  • Buscar destacar palavras-chave ao longo dos textos . Assim, os alunos podem identificar os trechos mais importantes da aula com uma rápida olhada na tela logo que acessa o conteúdo pela primeira vez.
  • Fazer com que os professores conteudistas (ou a equipe responsável pela adaptação das aulas à internet) adquiram o costume de indicar em quais partes os textos podem ser cortados para formar uma nova página e introduzir o hábito de transformar, sempre que possível, algumas partes das aulas em listas com pequenas frases.
  • Ao mesmo tempo em que as informações devem ser quebradas em vários blocos menores de conteúdo, é extremamente necessário um hiperlink que leve o aluno a uma versão completa do texto. Desta forma, criaremos mais uma facilidade aos alunos que preferem imprimir a estudar em frente ao monitor.

Conteúdo multimídia e plug-ins

O uso de conteúdo multimídia deve ser aproveitado ao máximo nas aulas, ainda mais agora que o acesso à banda larga está barateando e aumentando. Só em 2002 houve um aumento de 112% no número de usuários de internet rápida em relação a 2001. Porém, ainda se deve produzir esse tipo de conteúdo de forma que ele não seja essencial para a compreensão da aula, mas um complemento a ela. Muitos alunos ainda acessam a internet por meio de modems e linhas telefônicas, outros não gostam de ficar esperando o download completo do vídeo ou do áudio. Resumindo, o conteúdo multimídia deveria servir como uma opção extra ao conteúdo escrito, não como substituto.

O mesmo acontece com o uso da tecnologia Flash, de propriedade da empresa Macromedia. Esse recurso deveria ser utilizado para explicar melhor e facilitar o entendimento das idéias apresentadas na aula, e não substituir o texto.

Os professores, conhecendo os recursos de multimídia que têm a disposição, já poderiam elaborar o conteúdo das aulas dando sugestões e materiais em vídeo e áudio para a equipe de produção acrescentar aos cursos. Além disso, é necessária uma apresentação em vídeo dos professores, pois ajuda o aluno a diminuir a frieza e a individualidade do meio on-line, como já foi comprovado ao ouvirmos alguns alunos dos atuais cursos on-line da Universidade Anhembi Morumbi.

Durante a produção do curso, é recomendável desenvolver o conteúdo multimídia no maior número de formatos possível. Sempre uma versão em Quick Time (para usuários de Macintosh) e outra para plataformas PC em tecnologia de compressão a ser escolhida, atualmente Windows Media ou Real.

Para evitar o transtorno dos usuários é aconselhável também disponibilizar os softwares e plug-ins necessários para a visualização de conteúdo multimídia em servidores próprios com instruções em português. Como também já foi constatado ao ouvirmos alunos dos cursos on-line da Universidade Anhembi Morumbi, muitos deles têm dificuldade em instalar os programas da forma como são disponibilizados nos sites dos fabricantes.

Mensagens de erro, status e confirmação

É sempre bom haver mensagens de confirmação após o envio de exercícios para os alunos. Como muitas vezes os usuários dos cursos on-line não são experts em informática, as mensagens de confirmação ou de erro devem informar exatamente a ação realizada e qual o próximo passo a seguir.

Ao adotar as mesmas mensagens em todos os cursos, os alunos ficarão habituados a elas e, conseqüentemente, poderão resolver pequenos problemas sozinhos, sem recorrer ao suporte, além de terem certeza que suas ações foram realizadas com sucesso.

Por isso, é necessário desenvolver respostas padrão para cada ferramenta que exija a interação do aluno. São exemplos disso o envio de exercícios e mensagens em fóruns, uso de plug-ins ou a instalação de outros programas, páginas não encontradas, problemas no servidor etc.

Tamanho e tipo de corpo

O tipo mais recomendado em textos para a web é o Verdana. Essa família de fonte foi concebida especialmente para uso digital , fazendo com que os textos tenham melhor legibilidade em monitores, mesmo em tamanhos pequenos. Porém, como cresce a cada dia o número de alunos que acessam os cursos por meio de computadores Macintosh, é necessário, na programação das páginas, colocar a Helvetica como segunda opção de tipo, pois essa é uma família de fontes nativa dos computadores Apple. No caso de sistema operacional Linux não há a necessidade de qualquer adaptação tipográfica.

Para tamanho de corpo de texto, um valor razoável para os conteúdos das aulas seria o 2 (equivalente a 10 pontos). É um padrão que não compromete tanto o projeto gráfico do site e ao mesmo tempo agrada aos usuários.

Para não comprometer o aspecto visual da página e satisfazer os alunos que preferem textos em corpo maior é recomendável acrescentar uma opção no menu que aumente e diminua o tamanho das letras. Isso é facilmente implementado usando JavaScript aliado a cookies. Um exemplo disso pode ser visto nas reportagens do JB Online, o site do Jornal do Brasil.

É possível também a utilização da tecnologia de folhas de estilo em cascata (em inglês, Cascading Style Sheets ou simplesmente CSS). A adoção desse mecanismo permite oferecer ao usuário o máximo de usabilidade em relação à apresentação de conteúdo na web, já que ela possibilita a formatação de espaçamentos entrelinhas; a utilização de tamanhos ímpares para textos; a criação de esquemas de leiaute diferenciados de acordo com a mídia utilizada pelo aluno, um para computadores domésticos outro para palmtops, por exemplo; entre dezena de outros recursos que podem ser conhecidos no site da instituição responsável pela padronização das tecnologias utilizadas na web, o World Wide Web Consortium.

Indicação de arquivos externos

Quando uma página fazer referência a algum arquivo que não seja comum ao browser – como vídeos e arquivos PDF (Portable Document Format) – é necessário indicar ao usuário o tipo e tamanho desse arquivo, como é utilizado no site da desenvolvedora de softwares Adobe. Neste sítio, sempre onde há a necessidade de referência a arquivos PDF ou executáveis há a indicação, por meio de um ícone e do tamanho do arquivo em questão, do que o usuário encontrará ao clicar nesta referência.
Adotando essa medida, o aluno não estranhará caso sua tela fique toda em branco por alguns segundos, fato comum ao acessar arquivos PDF, ou de repente abra um programa na sua frente, o que acontece ao visualizar vídeos em formato Real ou Windows Media.

É necessário informar também como o usuário deverá adquirir o plug-in ou software necessário para visualizar esse tipo de arquivo especial. Neste caso, é sempre recomendável manter uma cópia atualizada no servidor local, de preferência com instruções de instalação em português. Assim, evitamos encaminhar o aluno ao link da produtora do programa, geralmente em inglês, criando o problema comentado no item "Conteúdo Multimídia e Plug-Ins" deste trabalho.

Caixas de entrada de informações

Caixas de entrada de informações (ou texto) são aquelas utilizadas para os usuários inserir dados que irão interagir com o sistema, como informações de login, senha ou a inserção de palavras para a realização de buscas.

O ideal é criar caixas com larguras bem razoáveis para que as pessoas possam inserir suas informações e ao mesmo tempo conferi-las. O que muitas vezes acontece é a construção de boxes muito curtos que não permitem a visualização completa do texto pelo usuário para que ele tenha certeza do que escreveu.

Por esse motivo, Jakob Nielsen, em Homepage Usability, recomenda a implementação de caixas de entrada de texto com pelo menos 25 caracteres de largura, sendo o ideal 30.

Montagem, largura e extensão das páginas

Para evitar barras de rolagens nas páginas o ideal é desenhar o leiaute do site pensando na atual resolução padrão dos monitores doméstico. De acordo a pesquisa realizada pelo site StatMarket, em 17 de fevereiro de 2001, a maioria dos usuários de internet (53%) utiliza monitores com resolução de 800x600 pixels.

Entretanto, devemos descontar dessa medida o espaço ocupado pelas barras de rolagem e a barra de navegação do browser e, a eventual, barra de navegação do ambiente de ensino. Nesses casos, o valor a ser utilizado é 770 pixels (mais a área ocupada pela navegação do ambiente de ensino utilizado pela instituição).

De qualquer jeito, o leiaute deve ser planejado de forma líquida. Isso significa que o site deve atender a configuração padrão de tela sem barras de rolagem e se expandir nos monitores com resoluções maiores de forma que não deixe espaços inutilizados.

Deve se ter atenção redobrada com a altura das páginas. Páginas muito longas tornam a leitura muito cansativa. Por outro lado, páginas muito curtas, onde são necessários vários cliques para uma leitura completa do conteúdo, tornam-se desestimulantes. Portanto, o que vale é alcançar um meio termo. Procure desenhar páginas com, no máximo, três telas de rolagem, o que equivale a um valor de 1000 e 16000 pixels de altura.

Por último, evite o uso de quadros (frames). Eles prejudicam a organização das páginas, a impressão do conteúdo e o controle geral do site . A equipe de produção só deve recorrer a esse tipo de montagem de página em casos extremamente excepcionais.

Localização do usuário dentro do site

Autores como Steve Krug, sugerem a implantação em qualquer site, de médio ou grande porte, de uma navegação “onde fui e onde estou”, conhecida também como bread crumbs ou migalhas de pão. Trata-se de uma pequena barra que indica ao usuário por onde ele passou e em qual parte da hierarquia geral do site ele se encontra. Além disso, esse recurso serve de atalho para as seções já visitadas pelos alunos. Essa medida facilita bastante a exploração do site pelos estudantes e evita que eles se percam no meio das seções da página.

Por esse motivo, durante o desenho das páginas, o designer deve prever um espaço para a implantação desta barra de navegação. Exemplos dessa funcionalidade podem ser encontrados na livraria Amazon e no a revista eletrônica de tecnologia Cnet.com.

Testes de usabilidade

É muito comum escrevermos um texto, olharmos para ele e achá-lo perfeito. No entanto, basta pedir para algum amigo ler e uma série de defeitos, até então inexistentes, vêm à tona.

O mesmo acontece nos projeto de e-learning. Não são raras as vezes nas quais equipes inteiras despendiam meses na elaboração de um projeto e, no final, com o curso no ar, se dão conta dos inúmeros problemas que ele contém.

Por isso, se você quiser um ótimo site, terá que testá-lo. Depois de ter trabalhado em um site, mesmo que tenha sido por poucas semanas, você já não pode vê-lo imparcialmente. Você o conhece demais. A única forma de descobrir se ele realmente funciona é testando. Os teste fazem você lembrar que nem todos pensam como você, sabem o que você sabe, nem usam a Web como você (KRUG, 2001).

Mais informações sobre o assunto, além de metodologias para a avaliação de usabilidade em sites podem ser encontradas na obra Handbook of Usability Testing, de Jeffrey Rubin .

Considerações finais

Apesar de ainda pouco considerada na estruturação de projetos de e-learning, é notável a ascensão da usabilidade na internet.

Como toda novidade, ela ainda é pouca aceita no ambiente da educação a distância, justamente por não demonstrar resultados em curto prazo. Atualmente, o ponto mais preocupante de instituições de ensino são o design e a tecnologia por trás de seus ambientes de ensino, justamente por impressionarem a opinião pública assim que são colocados no ar.

Já os efeitos da usabilidade são, aparentemente, inconscientes e sem resultados táteis a princípio. Entretanto, as várias entidades que engatinham ainda nessa emergente área de estudos já colem frutos como os já citados nesse trabalho e sentidos na prática na Universidade Anhembi Morumbi:

  • Diminuição no uso das centrais de atendimento pelos alunos do curso.
  • Diminuição da evasão dos alunos matriculados em cursos on-line.
  • Aumento da participação dos alunos nas diversas atividades oferecidas pelos cursos on-line da universidade.
  • Diminuição de re-trabalho na produção das páginas e das interfaces dos cursos oferecidos pela instituição.

Essas são algumas pequenas melhorias conquistadas com as propostas desse trabalho, facilmente aplicáveis a qualquer instituição e aos mais variados fluxos de produção de e-learning.

Contudo, um aprofundamento no estudo da usabilidade e a sua adaptação ao ensino a distância via internet trarão cada vez mais eficiência da equipe de produção e satisfação do principal agente de um curso on-line, o aluno.

Referências

BRYAN, Marvin. Digital typography sourcebook. Wiley, Hoboken NJ, 1997, 167.

CEILA, Santos. Usuários de banda larga crescem 112% no Brasil. IDG Now!, São Paulo SP, 2003, <http://idgnow.terra.com.br/idgnow/internet/2003/01/0060>.

DOHERTY, Libby. The Reading Process. Dyspel Project. Londres, 1997, <http://www.dyspel.org.uk/resources.htm>.

KRUG, Steve. Não me Faça Pensar. Market Books, São Paulo SP, 2001, p. 75–79.

LOUIS, Rosenfeld; MORVILLE, Peter. Information Architecture for the World Wide Web: Designing Large-Scale Web Sites. O'Reilly & Associates, Sebastopol CA, 1998.

NIELSEN, Jakob, Projetando Web Sites. Campus, Rio de Janeiro RJ, 2000.

_____________, Error Message Guidelines. Alertbox, Fretmont CA, 2001, <http://www.useit.com/alertbox/20010624.html>.

NIELSEN, Jakob; TAHIR, Marie. Homepage Usability: 50 Websites Deconstructed. New Riders Publishing, Indianapolis IN, 2001.

RUBIN, Jeffrey. Handbook of Usability Testing: How to plan, design, and conduct effective tests. Wiley, Hoboken NJ, p. 1994.

INFO
Andre de Abreu é jornalista, colunista do Jornal do Brasil e pós-graduando em Jornalismo Multimídia pela PUC-SP. Atualmente, trabalha no departamento de e-learning da Universidade Anhembi Morumbi. É também membro da Academia iBest de Imprensa e colaborador dos sites Magnet, Webinsider e Jornalistas da Web.

CONTATO
R. Casa do Ator, 52
Vila Olímpia
São Paulo - SP
04546-000