Relatório da Avaliação da Interface do Portal UFS

Diego A. Martins1, Diego A. de O. Meneses1, Felipe J. R. Vieira1

1Departamento de Computação – Universidade Federal de Sergipe (UFS)São Cristovão – SE – Brazil

{diego.amartins, diegoarmandooo, felipejrvieira}@yahoo.com.br

Resumo.  Este   artigo,   elaborado   como   forma   de   avaliação   da   matéria  Interface   Humano   Computador,   tem   como   objetivo   mostrar   como   foi  realizada a avaliação da interface do Portal UFS e seus principais resultados,  seguindo os princípios de usabilidade, padrões Web e acessibilidade.

1. IntroduçãoO Portal UFS tem como função ser um meio de comunicação fácil e prático entre a Universidade   Federal   de   Sergipe   (UFS)   e   a   sociedade.   Informações   sobre   ensino, pesquisa e extensão devem ser apresentadas de forma clara a todos os interessados, não importando se eles são internos ou externos à universidade.

Este   trabalho  analisa   a   interface  do  Portal  UFS através  de   três  visões:   a  da usabilidade, proposta por Nielsen (1993); a dos padrões Web, desenvolvido por Vora (2009)  e  a  da acessibilidade,  proposta  pela  W3C e editada  por  Henry et  al   (2008). Devido às inúmeras quantidades de páginas e sistemas presentes no Portal, foi decidido fazer apenas a avaliação da tela inicial, pois esta serve de entrada para interação com o usuário e forma de acesso para outras partes do site. Esta escolha também possibilitou a realização de uma avaliação com maior profundidade.

A   estrutura   do   artigo   está   dividida   em   cinco   seções:   a   segunda   trata   do referencial teórico, a terceira da metodologia de avaliação, na quarta seção é realizada a avaliação da interface do Portal UFS e por último são feitas as conclusões.

2. Referencial TeóricoPara o desenvolvimento deste trabalho foi necessário o entendimento dos conceitos que foram  utilizados   como  base  para   avaliação.  Estes   são:   usabilidade,   padrões  Web   e acessibilidade, que serão apresentados a seguir.

2.1. UsabilidadePela definição da International Organization for Standardization (1997), usabilidade é a medida pela qual um produto pode ser usado por usuários específicos para alcançar objetivos específicos com efetividade, eficiência e satisfação em um contexto de uso específico.

Na área de computação, a usabilidade está relacionada aos estudos de Ergonomia e de IHC(Interface Humano­computador), ou seja, a usabilidade está diretamente ligada ao diálogo na interface e a capacidade que o software tem em permitir que o usuário alcance seus objetivos de interação com o sistema de maneira simples.

Um sistema computacional é dito usável se apresentar fácil aprendizagem, uma utilização eficiente e apresentar poucos erros. Além disso, ele deve facilitar os caminhos 

que o usuário deve percorrer para usá­lo, deixando o usuário mais à vontade e mais independente.

Até   quem   tem   dificuldade   motora   ou   problemas   de   navegação   por   falta   de conhecimento   técnico  poderá   alcançar  o  que  deseja,   se  os  processos  de  usabilidade forem respeitados.

2.2. Padrões WebOs padrões Web são padrões de desenvolvimento para aplicações Web, que descrevem e apontam a solução correta de problemas comuns a essas aplicações. Eles são usados por serem   soluções   testadas   e   comprovadas   para   resolver   problemas   já   conhecidos, aprimorando   o   processo   de   design   da   interface,   tornando­as   mais   consistentes   e reusáveis. Além disso, é possível criar uma boa documentação do processo, tornando as aplicações Web mais utilizáveis.

As motivações para a criação e o uso dos padrões é a flexibilidade da arquitetura das   aplicações   Web,   o   conjunto   limitado   de   controles   interativos   suportados   pelos navegadores e a falta de um projeto de interface que informe como as interações com os usuários devem ser implementadas.

2.3. AcessibilidadeO termo acessibilidade está mais presente na sociedade a cada dia. Nas cidades já vemos rampas e elevadores para deficientes físicos, placas em braile para deficientes visuais, entre outras iniciativas, e no mundo digital a preocupação com acessibilidade também existe e é definida como acessibilidade na Web.

Segundo o SERPRO, a acessibilidade na Web deve permitir o acesso à Web por todos, independente de tipo de usuário, situação ou ferramenta.

A   acessibilidade  na  Web   cria   ou   torna   as   ferramentas   e   páginas  Web  mais acessíveis   a   um   maior   número   de   usuários,   inclusive   pessoas   com   deficiências, beneficiando também pessoas idosas, usuários de navegadores alternativos, usuários de tecnologia assistiva e de acesso móvel.

3. Metodologia de AvaliaçãoExistem várias técnicas utilizadas para realizar uma avaliação de interface. Cybis (2003) as classificam em três tipos: técnicas prospectivas (questionários, entrevistas), técnicas preditivas   ou   diagnósticas   (avaliações   analíticas,   heurísticas,   checklists)   e   técnicas objetivas (ensaios de interação, sistema de monitoramento). Neste trabalho é utilizado a análise heurística proposta por Nielsen (1993):usar diálogo simples e natural,  falar a linguagem do usuário, minimizar a carga de memória do usuário, possuir consistência, fornecer  feedback  (retorno),   fornecer   saídas   claramente   marcadas,   fornecer   atalhos, possuir   mensagens   de   erros   bem   definidas,   prevenir   erros   e   fornecer   ajuda   e documentação.  A avaliação  é   complementada  com a análise  dos  padrões  Web e  da acessibilidade.

A   análise   heurística   consiste   em   percorrer   a   interface   diversas   vezes, inspecionando   os   diferentes   componentes   do   diálogo.   Caso   seja   detectado   algum problema,   o   mesmo   deverá   ser   relatado,   associando   claramente   com   as   heurísticas violadas. A avaliação no nível de usabilidade foi realizada por três avaliadores e foi divido em duas etapas: primeiramente percorreram a interface para conhecer melhor o sistema, depois realizaram um percurso de tarefas, acessando cada item de informação, 

“estressando” o sistema.

Na avaliação dos Padrões Web foram realizadas comparações entre o Portal UFS e alguns dos padrões propostos por Vora: formulários, filtros, pesquisa, autenticação, aplicação  principal,   navegação   e   internacionalização;   buscando   identificar   falhas   na interface.   Já   na   avaliação   de   acessibilidade   foi   analisado,   além   dos   requisitos   de acessibilidade, os requisitos técnicos do site, através de sistemas automatizados como o Da Silva, para validação de acessibilidade, o CSS Validation Service para validação do CSS,   Markup   Validation   Service   que   checa   o   HTML   de   documentos   Web   e   o PageSpeed para a otimização da velocidade da página.

3.1. Grau de SeveridadePara mensurar o nível dos problemas de usabilidade foi criada uma escala de 0 a 2: 0 – sem problemas, 1 – problema médio e 2 – problema grave.

4. Avaliação da Interface do Portal UFS

4.1. Diálogo Simples e NaturalConcluímos que a interface do Portal não é simples. Não existe um agrupamento lógico dos itens de informação. Além disso, é cansativo ler uma notícia na página principal do portal. As notícias estão muito próximas uma das outras.

A produtividade do usuário é minimizada ao acessar os itens de informação, pois as operações são de difícil  acesso.  Os elementos  mais   importantes  não se destacam como deveriam. Existem informações duplicadas na tela, ou seja, quanto mais objetos de diálogo, mais tempo o usuário leva para localizar os itens que são relevantes para ele.

Severidade: 2

4.2. Falar a Linguagem do UsuárioComo já foi citado, existem basicamente dois tipos de comunidades de usuários que acessam o Portal UFS: externa e interna. A comunidade externa, por exemplo, engloba os   estudantes   inscritos   no   PSS   (Processo   Seletivo   Seriado).   A   comunidade   interna engloba estudantes de graduação da universidade. A linguagem apresentada no Portal é simples e direta, atendendo as comunidades de usuários.

Severidade: 0

4.3. Minimizar a Carga de Memória do Usuário

Nesse Portal, o usuário é obrigado a memorizar ao passar de um diálogo para outro.

Por exemplo (figura 1), a imagem abaixo mostra que no menu principal horizontal, existe o item “Curso” que possui “Vestibular/PSS” como subitem. Não existe uma relação lógica entre eles.

Severidade: 1

Figura 1 – Portal UFS

4.4. Consistência

O Portal tem uma boa consistência, porém, apresenta algumas falhas nesse aspecto. A página do portal é atualizada automaticamente no navegador em um intervalo de tempo, causando incômodo ao usuário que passa alguns minutos navegando na página principal do Portal, o ideal é  deixar a página estática,  removendo a atualização automática.

A imagem abaixo (figura 2) mostra alguns erros de consistência, onde o link "Marcas" não apresenta nenhuma mensagem explicativa, deve-se clicar nele para saber exatamente o que é. Além disso, o link "Dicas" quando clicado redireciona para a página principal do Portal (a página onde está o link).

Figura 2 – Portal UFS

Sugestão: usar uma dica no link “Marcas” quando o ponteiro do mouse ficar em cima do link, como é feito no menu horizontal principal e desabilitar o link “Dicas”, deixando apenas o texto "Dicas" já que o mesmo não redireciona para outra página.

Severidade: 1

O link "Química", localizado no item "Cursos" no menu vertical (figura 3), localizado na parte esquerda ( Setores --> Núcleos de Pesquisa --> Química ) não se destaca como os outros quando é colocado o ponteiro do mouse sobre ele, podendo deixar o usuário com dúvida sobre seu funcionamento.

Sugestão: usar o mesmo padrão usado nos links contidos no submenu "Núcleos de Pesquisa".

Severidade: 1

Figura 3 – Portal UFS

4.5. Feedback (Retorno)

Em alguns aspectos o sistema fornece retorno para o usuário, por exemplo, quando colocamos o ponteiro do mouse em cima de algum link ou item do menu a cores dos mesmos mudam, confirmando para o usuário o objeto de diálogo selecionado.

Severidade: 0

4.6. Fornecer Saídas Claramente Marcadas

Não existe nenhuma saída clara no Portal. Para voltar o histórico de navegação deve­se usar os botões de voltar e avançar do navegador. 

Sugestão: criar um histórico de navegação, informando a página de origem quando for possível.

Severidade: 1

4.7. Fornecer Atalhos

Não existem atalhos que são realizados por comando nos teclado. Os atalhos fornecidos são   links   que   ficam   embaixo   do   item   que   estão   localizados   no   menu   principal horizontal. Esses atalhos são de difícil acesso, se você for acessá­los de cima para baixo o menu cobre o atalho desejado. Além disso, também são de difícil entendimento, pois alguns estão com o texto cortado por causa do espaço.

Sugestão: remover esses atalhos, além dos problemas citados, eles ainda poluem o Portal. Criar um item no menu que contém os itens de informação mais acessados.

Severidade: 2

4.8. Mensagens de Erros Bem Definidas

Não existem mensagens de erro bem definidas. Por exemplo, alguns links na página apontam para páginas que não existem, e a seguinte mensagem é exibida:

Not Found

The requested URL /gestao/proquali/ was not found on this server.

Sugestão: quando a página solicitada não fosse encontrada, o próprio sistema deve informar ao usuário com uma mensagem mais definida.

Severidade: 1

4.9. Prevenção de Erros

Percebeu­se que a prevenção de erros no Portal  não é eficiente.  Alguns links fazem referências a páginas que não existem ou redirecionam para a mesma página. Isso pode causar uma má impressão no usuário.

Sugestão: realizar testes antes de adicionar qualquer item de informação no site e possibilitar o usuário a fazer sugestões/reclamações sobre o Portal UFS.

Severidade: 2

4.10. Ajuda e Documentação

O Portal  não possui  nenhum tipo  de ajuda para os  usuários.   Isso atrapalha muito  a navegação de usuário iniciantes.

Sugestão: disponibilizar um mapa do site.

Severidade: 1

4.11. Formulários, Filtros, Pesquisa e Autenticação de Usuário

O portal da UFS possui dois formulários básicos em sua interface, um de Busca Rápida (figura  4)  contendo 2  TextBox  e  1  botão que   também se  caracteriza  como filtro   e pesquisa, outro de login (WebMail) contendo 2 TextBox e 1 botão que se caracteriza também com autenticação de usuário (figura 5).

Figura 4 – Busca Rápida

Figura 5 – Login Webmail

No formulário de pesquisa analisamos alguns pontos como o entendimento que o formulário passa para o usuário, neste ponto verificamos que o formulário de pesquisa não indica ao usuário os  benefícios de seu uso, este ponto é meio paradoxal, já que a colocação destas informações para o usuário acarretaria em uma interface mais poluída visualmente. A utilização de um formulário  curto de pesquisa reduz as taxas de erros nas inserções dos dados mas em contra partida afeta o  padrão  de pesquisa avançada, tirando do usuário a capacidade de um busca mais detalhas aos itens desejados.

Continuando   a   avaliação   do   formulário   de   pesquisa,   percebemos   há   não utilização de rótulos que permitem a compreensão dos elementos do  formulário, isto 

aumenta os erros de operação e dificulta a criação de um modelo mental por parte do usuário.  O  formulário  de   pesquisa   segue   o   padrão   de  alinhamento  dos   elementos deixando a interface mais amigável, a utilização de tabulação e acesso a estes elementos através do teclado demonstra também a utilização de padrões web, esse padrão auxilia na navegação do usuário. Outro ponto positivo é a utilização de valores  padrões  para uma pesquisa em um determinado assunto. Percebemos a utilização de paginação na hora de exibir os resultados de pesquisa, isto facilita a pesquisa e reduz a quantidade de ítens na tela, mas deixa a desejar nos filtros dos resultados de pesquisa, já que estes não existem e também na falta de opções de ordenação dos resultados.

O   uso   de   botões   de   ação   é   notado   no   portal,   este   elemento   facilita   o entendimento do que deve ser feito logo após preenchido os elementos do formulário, apesar do uso destes botões, seus rótulos são indevidos pois não demostram uma relação com a ação de pesquisa. As mensagens de erro nas telas de pesquisa são inconstantes, para   alguns  parâmetros  de   pesquisa   temos   como   mensagem   algumas   instruções   a exemplo da consulta por ramal, já na consulta por notícias temos como feedback uma tela sem informação alguma.

Analisando o formulário de login do webmail, percebemos o bom uso do alinhamento dos elementos e a boa utilização dos rótulos dos campos texto, proporcionando um entendimento melhor do que deve ser preenchido em cada campo. Utiliza também, de forma correta a tabulação e navegação por teclado. O uso do botão de ação também é notado neste formulário, mas como no formulário de pesquisa, também deixa a desejar no rótulo utilizado para o botão de ação (login). Outro ponto negativo é a não utilização da informação de campo requerido, ou seja, não informa ao usuário quais os campos são necessários para o perfeito funcionamento da funcionalidade, neste ponto ele não informa que é necessário a digitação da senha, deixando o sistema processar aqueles dados ou a falta deles. Também não segue o padrão de autenticação de usuário que propõe uma forma para a troca da senha no caso de esquecimento da mesma, e a utilização de CAPTCHA para a validação de usuários humanos também não foi implementada. Com relação aos feedbacks de erro o formulário aparenta erros, pois se não houver o preenchimento de nenhum campo o formulário simplesmente não retorna nada, na falta da senha somente, a mensagem retorna o erro de login inviável.

Severidade: 1

4.12. Aplicação PrincipalO portal da UFS é responsável pela centralização de acesso a todos os outros sistemas que a instituição possui, além de agregar informações sobre todos os cursos e hierarquia organizacional da instituição. Possui também a resposanbilidade de difundir as notícias relevantes a comunidade acadêmica e aos demais interessados. Por isso não podiamos deixar de avaliar o portal com relação a utilização do padrão Application Main Page, que em seu conceito, fala que esse padrão deve ser usado em páginas do sistema que concentre informação e acesso a outros módulos ou sistemas externos.

O portal da UFS usa bem o padrão portal pois fornece uma página central que agrega conteúdo e diversos sistemas e funcionalidades de várias fontes diferentes e não apenas apresenta aos usuários uma aparência unificada, mas também serve como uma plataforma de lançamento ou ponto de acesso único para outras aplicações internas ou externas.  Outro ponto positivo  no uso do padrão no portal  da UFS é  a restrição de acesso a determinados conteúdos e funções com base em suas funções e diretivas de 

acesso, isto é necessário por razões de segurança e privacidade. Percebemos também que o uso da interface dividida em várias áreas de interesse mostram o quanto este padrão esta presente, já que em seu conceito ele fala que os portais devem organizar peças individuais de conteúdo e/ou funções em áreas afins normalmente agrupado em janelas.

O único ponto que o portal da UFS não tem, que faz parte deste padrão, é a capacidade   de   personalização   do   portal   permitindo   que   os   usuários   selecionem   e personalizem seu conteúdo e forma de apresentação.

Severidade: 0

4.13. NavegaçãoPor ser o portal da UFS, e conter diversos assuntos e funcionalidades diferentes, e pelo fato do mesmo ser acessado por pessoas com interesses distintos, estes conteúdos devem ser apresentados de formas consistentes e devem ter diferentes formas de navegação.

No portal UFS vemos que este padrão utiliza de duas técnicas essenciais para uma boa interface.  A navegação  em primeiro  nível   e   segundo  nível   (figura  6),  o  uso  destes padrões  não   indica  que  os  menus  de  navegação  estejam   implementados  da  melhor forma,   o   uso   de   forma   errada   destes   padões   pode   até   piorar   a   navegabilidade   da aplicação.

Figura 6 – Estrutura de menu

As Tags e as nuvens de Tags são recursos que não encontramos no portal da UFS, esta é uma das caracteristicas deste padrão que não vemos implementada na aplicação, o uso dele poderia melhorar as pesquisas e as organizações dos conteúdos.

Severidade: 1

4.14. InternacionalizaçãoComo a UFS é uma entidade que fomenta os estudos e a pesquisa, e tem apoio de outras instituições,   não   só   brasileiras   como   estrangeiras,   o   uso   do  padrão  de internacionalização é de extrema necessidade (figura 7).

Avaliando o portal percebemos que existe uma opção para outra página que informa tudo o que é necessário sobre a instituição, este é um caso típico do seguimento do padrão internacionalização disponibilizando as informações da Universidade para outras línguas através de um seletor de línguas ou de ícones que representam bem a

língua desejada (utilização das bandeiras como ícone). Deixa apenas a desejar na utilização de data para outras regiões, já que só a data local é tomada como parametro.

Severidade: 0

Figura 7 – Portal UFS para estrangeiros

4.15. Acessibilidade

O   sistema   Da   Silva   realiza   a   avaliação   de   acordo   com   três   prioridades.   Onde   a prioridade 1 deve ser satisfeita,  pois causa impossibilidade no acesso ao documento, sendo o requisito básico para uso. A prioridade 2 pode ser satisfeita, já que dificulta o acesso   a   informação   e   sua   satisfação   remove   barreiras   significantes   de   acesso   ao documento.   E   a   prioridade   3   não   é   obrigatória,   representa   uma   melhoria   da acessibilidade do documento.

O sistema Da Silva localizou 16 erros e 180 avisos de prioridade 1, 18 erros e 43 avisos de prioridade 2 e 1 erro e 102 avisos de prioridade 3. Os erros de prioridade 1 foram devido ao fato de que em certas situações  o site não fornece um equivalente textual  para as   imagens e em relação a scripts  não existe  a alternativa  noscript.  Os principais   avisos   foram   referentes   à:   fornecimento   de   resumos   nas   tabelas, disponibilização   de   todas   as   informações   veiculadas   com   cor   estejam   também disponíveis sem cor, organização dos documentos de tal forma que possam ser lidos sem recurso de folha de estilo, criação de sequência lógica de tabulação para percorrer links,   utilização   de   cores   entre   o   fundo   e   o   primeiro   plano   seja   suficientemente contrastante para poder ser vista por pessoas com cromodeficiências.

Nos   de   prioridade   2   temos   erros   de   tabelas   de   dimensão   fixa,   atualização automática, não utilização da tag label para fazer ligações com os id de entrada. Os avisos   apresentados   são   não   utilizar   tabelas   para   efeitos   de   disposição   de   página, assegurar o correto posicionamento de todos  os controles  de formulário  que tenham rótulos implicitamente associados, fornecer informações de como o site está organizado, através   de   um   mapa   ou   sumário,   não   provocar   o   aparecimento   de   janelas   de sobreposição.

O único erro encontrado de prioridade 3 foi a solicitação de inserção, entre links adjacentes, caracteres que deixem claro a distinção entre eles. Os avisos são diversos para que facilitem o entendimento do usuário, por exemplo: identificar claramente o destino de cada link, utilizando textos mais claros, completar o texto com apresentações gráficas ou sonoras, sempre que facilitar a compreensão, fornecimento de metadados para que sejam úteis para os mecanismos de busca, oferecer atalhos por teclado, utilização de palavras relevantes no início de cabeçalhos, parágrafos e listas, entre outras.

Severidade: 1

4.16. Avaliação Técnica

Na parte técnica encontrou-se alguns erros de html, 36 erros e 12 perigos, e css, 9 erros. No entanto, são erros simples e que facilmente podem ser corrigidos. Em sua maioria são propriedades que são atribuídas a tags que não a possuem. No quesito eficiência, o PageSpeed encontrou diversas formas de melhoramento como a habilitação do gzip compression, reduzindo o tamanho a ser transferido em aproximadamente 365,3kB, a utlização do cache do navegador, redução do número de arquivos javaScript que são 16 no total, realizar minifying, retirada de caracteres inúteis, do arquivos CSS, sendo uma redução de 70,2% no tamanho dos arquivos, otimizar as imagens, tendo uma redução de 63,1%. Medidas como estas poderiam reduzir e muito os atuais 997,1 kB de arquivos trafegados.

Severidade: 2

5. ConclusãoA realização desta atividade possibilitou o aprendizado prático das teorias de IHC, nos fornecendo uma visão real do que acontece com a maioria dos sites. Neste estudo foi observado o Portal UFS por três contextos, o da usabilidade, acessibilidade e padrões Web,   e   foi   constatado   que   o   portal   possui   muitos   problemas   de   usabilidade   e acessibilidade, como foram identificados por este artigo, e estes não só poderão, mas deverão   ser   corrigidos  para   que  possibilite   a   melhoria   de   sua   comunicação   com   a sociedade.

ReferênciasNielsen, J. (1993) “Usability engineering”, Academic Press Inc., Boston, USA.

Henry, S. L. et al (2008) “Web Content Accessibility Guidelines (WCAG) Overview”. Disponível em http://www.w3.org/WAI/intro/wcag.php . Acesso em 08/11/2009.

Vora,   Pawan   (2009).   “Web   Application   Design   Patterns”.   Morgan   Kaufmann Publishers.

ISO (1997). ISO 9241­11: Ergonomic requirements for office work with visual display terminals   (VDTs).  Part  11 — Guidelines   for   specifying  and measuring  usability. Gènève: International Organisation for Standardisation.

SERPRO.   “Acessibilidade   na   Web”.   Disponível   em http://www.serpro.gov.br/acessibilidade/index.php . Acesso em 08/11/2009.

Chisholm,   W.;   Vanderheiden,   G;   Jacobs   I.   (1999)   “Web   Content   Accessibility Guidelines   1.0”.   Disponível   em   http://www.w3.org/TR/WCAG10   .   Acesso   em 08/11/2009.