Este documento resume um relatório de avaliação da interface do portal da Universidade Federal de Sergipe (UFS) seguindo princípios de usabilidade, padrões web e acessibilidade. A avaliação identificou problemas como falta de agrupamento lógico de informações, carga de memória alta para o usuário e inconsistências visuais. Recomendações incluem melhorar a organização das notícias e menus para facilitar a navegação do usuário.
POO - Aula 02 - Fatores de Qualidade de Software e Introdução ao Java
Relatório da Avaliação da Interface do Portal UFS
1. Relatório da Avaliação da Interface do Portal UFS
Diego A. Martins1, Diego A. de O. Meneses1, Felipe J. R. Vieira1
1
Departamento 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ção
O 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órico
Para 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. Usabilidade
Pela 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 Humanocomputador), 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
2. 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 Web
Os 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, tornandoas 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. Acessibilidade
O 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ção
Existem 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,
3. “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 Severidade
Para 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 Natural
Concluí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ário
Como 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
4. 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
5. 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 devese
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.
6. Severidade: 1
4.9. Prevenção de Erros
Percebeuse 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
7. 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 Principal
O 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
8. 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ção
Por 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ção
Como 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
9. 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.
10. 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ão
A 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ências
Nielsen, 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 924111: 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.