AVALIAÇÃO DA INTERFACES WEB
Autor: Blog de Antônio Artur de Souza              | Publicado: 2011-05-25T18:34:00-07:00

Apresento uma avaliação do sítio eletrônico (site, página) do Centro de Apoio à Educação a Distância (CAED) da Universidade Federal de Minas Gerais (UFMG), disponível em http://www2.ufmg.br/ead/. O CAED é o setor da UFMG que cuida de todas as atividades relacionadas com a Educação a Distância (EAD). Apesar de a denominação começar com “Centro”, o CAED é uma “Diretoria” por meio da qual são estabelecidas as relações da UFMG com a UAB (Universidade Aberta). Seus objetivos são implantar, estruturar e articular a EAD na UFMG e oferecer cursos de graduação, especialização, aperfeiçoamento e atualização (CAED, 2011). Conta com uma estrutura física na universidade para o desenvolvimento das atividades administrativas. Nesse mesmo espaço, funcionam os colegiados de cursos e coordenações de programas. O sítio eletrônico do CAED tem muita importância para o desenvolvimento de suas atividades. Dentre elas, destacam-se: (a) criação de material didático, (b) apoio e incentivo na elaboração de material didático, (c) divulgação dos cursos, (d)&nbsp;implantação de plataforma de EAD para auxiliar a oferta de cursos, (e)&nbsp;elaboração de projetos para financiar a oferta de cursos e a implantação de polos regionais, (f) fortalecimento do uso da webconferência nos cursos, através de treinamento das equipes dos cursos e de apoio técnico, (g) oferta de curso de capacitação de tutores, (h) organização de fóruns de formação continuada de professores e de coordenadores de cursos e de polos, (i)&nbsp;desenvolvimento de pesquisas sobre EAD e (j) incentivo e apoio na realização de eventos científicos que utilizem as ferramentas da EAD (CAED, 2011).&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; A versão atual do referido sítio eletrônico está no ar desde o início de 2010, em substituição a uma versão que podia ser considerada muito limitada e que apresentava muitos problemas de atualização. As limitações da versão anterior foram relatadas em diversas reuniões ao longo de 2009 e 2010, das quais participaram os coordenadores de todos os cursos EAD da UFMG.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; De uma maneira geral, pode-se dizer que a versão atual do sítio eletrônico do CAED ainda é muito limitada e apresenta muitos problemas. Diversos links ainda levam a páginas em branco, o que significa que o sítio ainda não está terminado. É importante destacar que a versão antiga ainda está no ar, no mesmo endereço anterior: http://caed.grude.ufmg.br/. Como a nova versão foi colocada no ar sem estar completa, a versão antiga continua sendo atualizada com as principais notícias.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; A avaliação do sítio eletrônico do CAED é apresentada logo a seguir, tomando por base os quesitos indicados por Costa &amp; Marins (2011). Ao final é apresenta uma avaliação com base nas heurísticas de Nielsen (2005).
Organização da informação: proximidade e afastamento Logo na página inicial, observa-se que as informações estão agrupadas em dois blocos, um na esquerda e outra na direita da tela. Na parte superior da tela, há uma faixa horizontal com uma imagem identificado o CAED e a UFMG, com um menu horizontal na parte inferior da imagem. No bloco da esquerda, estão as notícias mais recentes e, no da direita, é apresentado um menu vertical repetindo a maioria dos itens do menu horizontal. Na parte superior do bloco da esquerda, há uma imagem para representar a primeira e a mais recente das notícias. Ao clicar na imagem, o usuário é redirecionado para um edital para seleção de tutores para o curso de graduação em geografia. Pode-se dizer que a organização das informações é muito precária, pois se consegue visualizar a relação das notícias apenas de forma imediata. No bloco da direita, há apenas uma seleção dos principais itens do menu, ou seja, das principais informações disponíveis no sítio eletrônico. Ao clicar nas diferentes opções do menu, pode-se observar que diversas seções da página ainda estão em branco, ou seja, foram disponibilizados links para arquivos em branco. Na versão antiga do sítio eletrônico, as informações já estavam organizadas de forma não funcional, em três blocos verticais. Na esquerda, há um menu vertical em cujo centro se encontra uma lista com as ultimas notícias, vinculadas a imagens. Na direita, tem-se uma longa lista simples com as notícias, dispondo-se no topo a mais recente e no final (embaixo) a mais antiga. 
Organização da informação: contraste Na nova versão do sítio eletrônico, é usado contraste para destaque no bloco da esquerda, nas notícias, bem como no bloco da direita. O título da notícia é apresentado em negrito e, para cada notícia, há uma pequena imagem, com exceção da primeira (mais recente), para a qual a imagem ocupa cerca de 25% da tela. Nos menus (superior e direito), não há nenhum tipo de destaque. A cor da fonte do bloco da direita é azul, mas esse destaque se mostra inócuo, pois todo o bloco tem a mesma cor. Nesse bloco, há diferença no tipo da fonte. No primeiro nível do menu, a fonte é Geórgia, enquanto, no segundo nível, é Arial. O tamanho no primeiro nível é 10,5 e o do segundo é 9,5. O contraste entre o primeiro e o segundo nível é pequeno, mas perceptível. É fácil de visualizar que há quatro itens principais nesse bloco de menu, cada um deles com subitens. No menu superior, há um destaque por meio da cor de fundo, que é laranja e destaca bem o menu horizontal. Há outro destaque logo acima do menu horizontal, com uma retícula sobrepondo uma faixa fina da imagem usada para apresentar o CAED e a UFMG. No lado direito dessa faixa reticulada, há três links com fonte cinza claro. Um deles é para o mapa do sítio, outro para login apenas do pessoal do próprio CAED e um para “Termos-chave”, o qual direciona a uma página vazia. Esse pequeno menu com três itens é quase imperceptível para o usuário.
Organização da informação: equilíbrio simétrico e assimétricoNão há centralização de informações no sítio eletrônico, mas há um forte desvio do foco para a imagem que ocupa cerca de 25% da tela. Há uma clara simetria na divisão da tela em três áreas: barra horizontal superior, bloco esquerdo e bloco direito. O bloco da esquerda ocupa praticamente dois terços da largura. A organização da tela em áreas é muito básica e arbitrária, podendo-se dizer que o maior foco do sítio eletrônico parece estar nas notícias. Encontrar a informação que se quer é relativamente difícil para quem não está acostumado, embora o desejável fosse a apresentação da informação exata que o usuário precisa no momento de sua visita, nem mais nem menos.&nbsp; Uma sensação de frustração aparece logo de início ao se perceber que nem todas as informações da versão anterior do sítio eletrônico estão presentes na nova versão. Algumas das informações, como formulários, estão indicadas, mas o link leva o usuário a uma página em branco. Se o usuário não conhece o endereço da versão antiga, então não consegue, de forma alguma, alcançar seu objetivo.
Simplicidade: a meta do projeto de páginasA página do CAED não é simples por causa dos menus. São muitas opções no menu horizontal e nem todos os descritores são elucidativos. A terminologia deveria ser baseada na linguagem do usuário e não orientada ao sistema ou aos funcionários do CAED. Em alguns casos, não se entende qual tipo de informação que se tem disponível. Por exemplo, em “Resultados”, não se sabe de que seriam esses resultados. Outro descritor que complica o entendimento é “Portarias”, que de fato deveria ser algo relacionado à “legislação que regulamenta a EAD”. Outro fator complicador do sítio eletrônico pode ser observado ao se clicar em “Cursos” no menu horizontal, pois aparece um outro menu, para se escolher entre graduação, especialização e extensão. Todos os cursos de extensão são de aperfeiçoamento, mas descobrir essa informação demanda ler a descrição de cada um dos cursos. A página poderia já apresentar todos os cursos em uma tela, pois existem apenas 15 cursos no total. Além disso, embora nem todos os cursos tenham turmas em aberto, essa informação somente é obtida apos a leitura de todas as informações de cada curso, as quais, em alguns casos (os dos cursos de extensão), só podem ser obtidas através da versão antiga do sítio eletrônico. 
Mas nem tão simples assim: bom desenho significa credibilidadeO desenho da página inicial não é mantido depois que se clica em algum link, sendo mantida apenas a barra horizontal superior, de modo que todo o restante da tela é usado para apresentação de informações em geral sem qualquer recurso. Para a maioria (7 de 9) dos itens do menu horizontal, é apresentado um segundo menu na linha logo abaixo, destacada com uma cor de fundo laranja claro. Toda a parte abaixo dessa linha é dedicada a apresentar o mesmo submenu, mas com fonte maior. O tamanho da fonte dos descritores do menu e do submenu (horizontal) é 7,5, mas as fontes são distintas: Arial no menu principal e Tahoma no submenu. O submenu replicado logo abaixo da barra horizontal superior é apresentado na fonte Arial tamanho 12,5. Há apenas dois níveis de menu e, ao se clicar no segundo nível, aparece apenas uma página com texto simples, desprovida inclusive do recurso de hipertexto. Pode-se dizer que o design gráfico da página não facilita a busca por informações, tampouco cativa ou desperta interesse no usuário. Por outro lado, pode-se dizer que é um site cujo design pode ser classificado como de fácil utilização, ou seja, o usuário não precisa de “ajuda” pra utilizá-lo. Cabe, porém, sublinhar que, mesmo assim, essa funcionalidade “ajuda” deveria estar presente na página, pois é sempre importante orientar os usuários em caso de dúvida (a&nbsp;opção deve ser visível, facilmente acessada, sendo ainda mais eficaz se complementada por uma ferramenta de busca).
Eficiência: a web é cultura da impaciência A busca por informações no sítio eletrônico do CAED não é muito facilitada, pois são necessários dois níveis de menu para a maior parte das informações. O recurso “notícias” é o único meio rápido de se chegar às informações. Não há na página a funcionalidade para pesquisa, tampouco um ícone ou link para se voltar para a página inicial. Pode-se dizer que as notícias representam a principal característica do sítio eletrônico, pois permitem que se chegue aos editais. Pode-se concluir que os editais parecem ser a principal preocupação do site, haja vista que as demais informações são estáticas, muitas são desatualizadas e alguns dos links estão fazendo referência a páginas em branco. Há inclusive erros, como, por exemplo, quando se clica na imagem da barra horizontal superior aparece um link quebrado.
Consistência: identidade visual do ambienteApesar dos problemas apontados e da simplicidade do sítio eletrônico do CAED, pode-se dizer que ele tem, sim, uma identidade visual. Ao se clicar em sete dos nove itens do menu, observa-se exatamente a mesma estrutura visual: um segundo nível de menu que direciona o usuário para uma página com texto. Um dos nove itens é uma página para contato por email, que leva diretamente a um formulário simples e típico para essa finalidade. O outro link é “Polos”, o qual apenas direciona para um mapa do Estado de Minas Gerais, o qual, por não dispor de nenhum link adicional, parece não estar funcionando (embora esteja possivelmente em construção, não há nenhuma indicação a esse respeito). O link “Notícias” parece ser diferente, mas não é, dispondo da mesma estrutura de menus já apontada. Cada opção do segundo nível do menu é o título da notícia, seguido, na parte inferior da tela, de um pequeno texto que descreve a notícia. Clicando-se no título da notícia, é apresentada uma página com texto simples, ocupando toda a parte inferior da página, logo abaixo da barra horizontal superior.
Uso de Padrões: redução do custo cognitivoDe forma geral, o sítio eletrônico é muito parecido com outros encontrados na Internet. Pode-se dizer que é um sítio eletrônico comum, fácil de ser compreendido por usuários que já têm experiência com navegação na web. Os recursos usados são comuns e triviais. O que se pode dizer é que nem todos os recursos comuns em páginas da web são usados no caso do CAED, como por exemplo a funcionalidade de busca, já mencionada. A página também não conta com uma funcionalidade para indicar onde o usuário está na estrutura de informações. 
Layout: espaços em branco Nesse quesito, pode-se dizer que a página tem seu layout comprometido no menu horizontal superior. Há pouco espaço entre a linha do menu e a linha do sub-menu (segundo nível do menu). O tamanho da fonte usada no menu e no submenu é pequeno, o dificulta a leitura. A barra superior, acima da linha do menu, ocupa um espaço muito grande e tem pouca funcionalidade. Conforme já mencionado, o link dessa figura está quebrado. Essas mesmas limitações também estavam presentes na versão anterior da página. Na parte inferior da página há vários espaços em branco depois que se clica em algum item do menu horizontal superior. No segundo nível do menu, na parte inferior, apenas o lado esquerdo da página é utilizado.
Legibilidade: o conteúdo a ser aprendido Em termos de legibilidade do texto, pode-se dizer que o sitio eletrônico avaliado é satisfatório. Todo o conteúdo é de fato apresentado na parte inferior da barra superior. A fonte é Arial tamanho 9,5, o que permite fácil leitura. O contraste é bom, pois a fonte é apresenta com cor preta ou cinza escuro, com fundo branco. Como o texto é apresentado ao longo de toda a largura da tela, então a leitura se torna um tanto cansativa. O texto é apresentado em formato html simples, formatado em editor do tipo Microsoft Word. A busca por informação específica pode requerer a leitura de muito texto, o que é cansativo. O texto conta apenas com o recurso de negrito. Há hipertexto apenas em algumas seções, com links para editais em formato pdf ou para formulários eletrônicos
Considerações sobre o uso de cor nas interfaces Em termos de cor, na parte inferior à barra horizontal superior, nas páginas com texto não há problemas, pois, conforme já mencionado, o texto é apresentado em cor preta ou cinza escuro e o fundo é branco. O contraste é bom e permite boa leitura. Na barra horizontal superior, a cor é de fato um problema. Conforme já mencionado, nas linhas do menu horizontal a cor de fundo é laranja e pode ser considerada muito forte. A cor predominante na figura logo acima do menu é azul escuro. A figura tem a tonalidade azul escuro no lado esquerdo e quase branca no lado direito, com a mudança de tonalidade de forma gradativa. No lado direito há um globo em cor prata quase branco e os continentes na cor verde. A cor da fonte no nome da universidade é branco, então no final (palavra “Gerais”) da linha quase não se consegue distinguir a cor da fonte em contraste com a cor da imagem. A cor da fonte na denominação do CAED é cinza e o contraste também fica fraco na parte central da imagem. Pode-se dizer que a combinação de cores da imagem e da fonte, na barra horizontal superior, não é adequada.
Uso de Metáforas e temas visuais Pode-se dizer que nesse quesito a página é muito limitada. O principal recurso utilizado é o hipertexto nos menus. Não se pode deixar de considerar que “menus” também são um recurso, mas de fato são muito anteriores à existência da web. Tanto hipertexto como menus são anteriores à web e inclusive anteriores à Bitnet e ao gopher (UFPR, 1997; Stanton, 1994). Assim, a página do CAED se mostra muito precária em termos do uso de metáforas e de temas visuais. Na seção notícias são usadas imagens, uma para cada notícia. Observa-se um esforço para que a imagem transmita a idéia central da noticia. Como exemplo, para a notícia de contratação de tutores para o curso de química é usada uma imagem de um balão de Erlenmeyer, um frasco comumente usado em laboratórios de química. Para o curso de geografia a imagem é de um globo com mapa mundi. Para diversas noticias a imagem não guarda clara relação, como por exemplo as notícias sobre eventos.
Ícones Praticamente não há uso de ícones na nova versão do sítio eletrônico do CAED, mas há alguns poucos na versão antiga. Na nova versão detectou-se apenas o ícone para representar arquivos em formato pdf. Os ícones para impressão, email e arquivos pdf estão presentes em quase todas as seções da versão antiga do sitio. O ícone para pdf não está mais funcionando, mas os ícones para e-mail e impressão estão.
NavegaçãoEm termos de navegação, pode-se dizer que o sitio eletrônico do CAED é limitado, conforme já mencionado de forma indireta anteriormente. A navegação é muito linear, pois precisa sempre ser feita por meio dos menus. Os textos com as informações são quase que totalmente desprovidos de links. Há alguns poucos links em hipertextos para formulários eletrônicos e editais em formato pdf. Os formulários observados se destinam a inscrição a eventos organizados ou patrocinados pelo CAED. Os formulários eletrônicos são apresentados em uma nova janela (pop-up) em tela inteira, ou seja, até mesmo a barra horizontal superior é suprimida.
Desenho do Conteúdo Considerando-se os comentários apresentados para os quesitos anteriores, há pouco a se dizer em relação ao desenho do conteúdo. Pode-se dizer que é muito simples e limitado. A nova versão é muito melhor que a anterior, pelo menos na seção notícias. Essa seção na versão antiga é apresentada com barra de rolagem e um indicador do número de páginas no pé da página. É possível verificar que há 37 páginas de noticias, sendo que a mais atual é está na página 1. 
Imagens EstáticasAs imagens estáticas usadas no sitio do CAED são de fato de pouca utilidade, pois em apenas em poucos casos ajudam a compreender o significado do conteúdo. Nesses casos de imagens em princípio úteis, pode-se observa que o texto é muito fácil de ser compreendido e a imagem nem é necessária.
Imagens em movimento e vídeosO sitio eletrônico do CAED é desprovido de imagens em movimento e de vídeo. Detectou-se apenas alguns links para fotos dos eventos organizados ou patrocinados pelo CAED.
O uso de áudioNão há qualquer áudio no sitio eletrônico do CAED.
A educação do olharPode-se dizer que o sitio eletrônico do CAED é muito limitado se comparado com o tamanho e a relevância da UFMG. Em se tratando de um setor para a promoção das atividades de EAD na universidade, o sitio eletrônico em questão parece ter sido projetado sem levar em consideração o conhecimento já facilmente disponível sobre design instrucional e sobre o desenvolvimento de interfaces para páginas na Internet.
Avaliação com base nas 10 heurísticas de Nielsen (2005)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; As heurísticas de Nielsen são usadas para avaliar um sitio eletrônico em relação a 10 quesitos: facilidade de aprender, eficiência para se usar, facilidade de se lembrar das ações realizadas, facilidade para se recuperar de situações de erro, e, por fim, que seja agradável de usar. Quanto à visibilidade, pode-se verificar que a interface do sítio do CAED informa ao usuário, embora não claramente, as ações que estão sendo realizadas, mantendo as opções selecionadas em destaque. As opções selecionadas têm a cor da fonte alterada de preto para branca, essa modificação seria mais facilmente percebida pelos usuários se a mudança de cores fosse mais expressiva (maior contraste).&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; O relacionamento entre a interface do sitio e o mundo real esta pertinente, ou seja, as palavras usadas para definir seções e funcionalidades do sistema estão no contexto de um curso a distância e, portanto, fazem sentido para o usuário.&nbsp; A exceção está na opção Entrar, que significa que o usuário pode logar no sistema. A opção aparece em fonte pequena e grau elevado de transparência. Trata-se de fato de um link apenas para funcionários do próprio CAED, mas nada é mencionado a este respeito.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Quanto à facilidade para o usuário desfazer uma determinada ação e retornar ao ponto anterior, verifica-se que a página não apresenta tal opção. É necessário que o usuário utilize a opção fornecida pelo navegador. As funcionalidades da página são consistentes, ou melhor, ações similares são apresentadas com as mesmas denominações em pontos diferentes (da página). Dessa forma, o usuário tem facilidade para se familiarizar com as funcionalidades da página que ocorrem em pontos distintos. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Em um teste simples de acesso ao sitio eletrônico do CAED foi possível identificar que o mesmo retorna mensagens de erro para acesso com dados inválidos. No entanto, o ideal seria que a página prevenisse alguns erros e indicasse o formato adequado de entrada de login (email, login, nome, entre outros) e senha (case sensitive - distinção entre maiúsculas e minúsculas). Percebeu-se depois que essa tela de login é restrita a funcionários do CAED. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Dentre os formulários disponíveis na página analisada, foi possível identificar que os mesmos foram elaborados considerando os critérios de flexibilidade e eficiência de uso. Ou seja, é fácil para usuários leigos, mas flexível o bastante para se tornar ágil para usuários avançados. Como exemplo de ponto positivo, destaca-se o uso de navegação com tab nesses formulários.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Os “diálogos” apresentados nos textos e instruções são simples, diretos e naturais, se analisados dentro do contexto ao qual o site está inserido.&nbsp; O design do sitio pode ser classificado como muito simples, mas de fácil utilização. Não é preciso de ajuda pra utilizá-lo, mas seria bom que esta funcionalidade fosse oferecida para orientar os usuários em caso de dúvida. Deveria ser visível e facilmente acessável. A ferramenta de busca também faz falta no sitio.
Referências Costa, R.M.E.M.; Marins, V. Interfaces. 2011. Apostila (aula 2) da Disciplina Ambientes_Virtuais_e_Mídias_de_Comunicação, do Curso Planejamento, Implementação e Gestão da Educação a Distância – PIGEAD/LANTE/UFF. Universidade Federal Fluminense, abril de 2011.NIELSEN, J. Ten Usability Heuristics. 2005. Disponível em: &lt;http://www.useit.com/papers/heuristic/heuristic_list.html&gt; e em &lt;http://usabilidoido.com.br/as_10_heuristicas_de_nielsen_.html&gt;. Acesso em 27/04/2011.Stanton, M.A. A MODERNIZAÇÃO DAS REDES DE COMUNICAÇÃO DA UFF. Julho de 1994. Disponível em: &lt;http://wiki.rnp.br/download/attachments/41191387/1994_Modernizacao-das-redes-da-UFF_plano.pdf&gt;. Acesso em 27/04/2011.UFPR. A INTERNET E SUAS ORIGENS. Agosto de 1997. Disponível em &lt;http://mundodigital.nainternet.net/softwares/webdriven/whatisinternet/&gt;. Acesso em 27/04/2011.