inspeção de usabilidade

Website

Centro Universitário de Belo Horizonte - Uni-BH

Inspeção de usabilidade

Técnicas aplicadas:

• Percurso cognitivo

• Análise Heurística

Novembro 2007

Eduardo Loureiro

SUMÁRIO

1. CONCEITUAÇÃO GERAL........................................................................2

1.1 Inspeções de usabilidade .................................................................2

1.2 Percurso cognitivo .........................................................................3

1.3 Análise heurística..........................................................................5

2. SOBRE O WEBSITE DO UNI-BH ................................................................8

3. APLICAÇÃO DO PERCURSO COGNITIVO ......................................................9

3.1 Planejamento da análise (definição de tarefas, cenários, públicos e seqüência de ações) ........................................................................................9

3.2 Análise .................................................................................... 11

4. APLICAÇÃO DA ANÁLISE HEURÍSTICA ...................................................... 19

4.1 Análise .................................................................................... 21

5. CONCLUSÕES ................................................................................. 25

Inspeção de usabilidade | Website Uni-BH | Novembro 2007 2

Eduardo Loureiro | [email protected] | eduardoloureiro.com

1. CONCEITUAÇÃO GERAL

1.1 Inspeções de usabilidade

A inspeção de usabilidade engloba métodos de avaliação de interfaces aplicadas por especialistas. Os métodos podem ser aplicados em qualquer fase do ciclo de design, com o objetivo de se encontrar as falhas de usabilidade, que possam atrapalhar os usuários durante a utilização do sistema.

A aplicação das técnicas de inspeção de usabilidade é uma alternativa menos dispendiosa, do ponto de vista de custo e de tempo, em relação aos testes de usabilidade, pois podem ser aplicadas sem a presença do usuário alvo da interface. Porém, a característica de não envolver diretamente os usuários, faz com que as inspeções não conseguem prever 100% dos problemas de usabilidade. Dessa forma, as técnicas de inspeções devem ser aliadas aos testes com usuários, para que o maior número possível de problemas de usabilidade possa ser encontrado.

Foram aplicadas as duas técnicas de inspeção de usabilidade para a avaliação do website do Centro Universitário de Belo Horizonte, o percurso cognitivo e a avaliação heurística. Depois foi feita uma comparação entre quais problemas em comum foram encontrados pelas duas técnicas.



1.2 Percurso cognitivo

A técnica do percurso cognitivo consiste na avaliação de tarefas típicas realizadas pelos usuários da interface, a fim de encontrar problemas de usabilidade relacionados à facilidade de aprendizagem dos passos necessários para realizar as tarefas. Dessa forma, os especialistas simulam o percurso das tarefas realizadas pelos usuários, verificando se a cada passo o usuário conseguiria alcançar o objetivo correto, evoluindo na interação com a interface.

A aplicação da técnica consiste em:

• Definição de quem são os usuários da interface, analisando suas características e comportamentos.

• Definição das tarefas típicas que serão analisadas.

• Definição da seqüência de ações para a realização correta de cada tarefa.

• Definição da interface a ser analisada, que é a descrição de informações necessárias para que as tarefas sejam realizadas, como requisitos, regras funcionais etc.

Os especialistas têm como guia as questões listadas abaixo, para descrever a interação do usuário com a interface, através de uma história, que poderá ser um caso de sucesso caso o usuário consiga alcançar seu objetivo, ou um caso de fracasso, caso o objetivo não seja alcançado.

As seguintes questões devem ser respondidas pelos especialistas:

1. Os usuários farão a ação correta para atingir o resultado desejado?

• Dada a decomposição de uma tarefa em sub-tarefas, o usuário saberá por onde começar?

• Saberá qual é o próximo passo? O que o usuário vai tentar fazer a cada momento?

2. O usuário perceberá que a ação correta está disponível?

• Onde está o elemento de interface correspondente ao próximo passo?

• Que ações a interface torna disponíveis?



3. O usuário associará o elemento de interface correto à meta a ser atingida?

• O elemento de interface revela seu propósito e comportamento?

• O usuário consegue identificar os elementos de interface?

4. Se a ação correta é tomada, o usuário perceberá que progrediu em direção à solução da tarefa?

• Como a interface apresenta o resultado de cada ação?

• O resultado apresentado tem correspondência com o objetivo do usuário?



1.3 Análise heurística

A análise heurística é uma técnica de inspeção feita por especialistas, que tomam como base princípios e orientações práticas de usabilidade. O objetivo é identificar os problemas de usabilidade existentes nas interfaces, através da rigorosa aplicação desses princípios durante o processo de análise.

Os problemas encontrados foram classificados em 3 graus de criticidade:

• Alta

• Média

• Baixa

Essa classificação tem o objetivo de identificar quais são os problemas mais graves, que impedem a interação do usuário com a interface; quais são medianos, que tem grande chance de causar problemas na interação; e quais são leves, que eventualmente podem causar problemas de interação.

Os graus de criticidade são proporcionais à prioridade com que os problemas devem ser solucionados.

Problemas de criticidade alta devem ser resolvidos em curto prazo; problemas médios têm prioridade média de resolução; e problemas de criticidade baixa podem ser solucionados em longo prazo.

Para a avaliação do website do Uni-BH, foram utilizadas 15 recomendações baseadas nos 10 princípios de Jakob Nielsen (1993), adequadas ao novo cenário da Internet (evolução dos usuários, das interfaces, das conexões e da tecnologia).

São elas:

1. Relevância dos elementos

Informações irrelevantes ao contexto devem ser evitadas.

2. Linguagem simples e compreensível

As expressões, labels e nomenclaturas devem ser claras, utilizando o vocabulário do usuário.



3. Reconhecimento de padrões

Padrões e convenções gerais já estabelecidos na web devem ser usados para tornar a interface do site mais intuitiva.

4. Minimização da carga cognitiva (memória) do usuário

O usuário não deve precisar recorrer à memória para conseguir realizar as tarefas.

5. Consistência

A interface do site deve ser consistente em termos de navegação, design, formato e posição dos elementos de interação.

6. Feedback e transparência do sistema

O usuário deve ser informado sobre o resultado de suas ações.

7. Controle do usuário

O site deve oferecer ao usuário a opção de abortar processos, voltar atrás, desfazer e refazer ações.

8. Eficiência, acessibilidade e flexibilidade de uso

Os sites devem ser fáceis de usar e acessíveis para usuários de todos os níveis de experiência e dificuldade de acesso.

9. Recuperação de erros

O site deve ter mensagens de erros consistentes, que informem ao usuário o que exatamente aconteceu e orientem o que deve ser feito para solucionar o problema.

10. Prevenção de erros

A interface do site deve prever possíveis erros por parte do usuário, procurando evitá-los.



11. Agrupamento Intuitivo de informações

Tópicos e informações semelhantes devem estar agrupados juntos para facilitar o acesso do usuário.

12. Informações hierarquizadas

As informações devem ser organizadas de forma hierárquica, com pesos diferentes e apropriados à sua importância.

13. Apresentação do texto

Os textos devem ser redigidos especificamente para leitura na Internet, onde o usuário varre a informação em vez de lê-la integralmente.

14. Tempo de resposta

O carregamento das páginas do site deve ser rápido para que o usuário não desvie sua atenção ou até mesmo desista de acessar o site.

15. Obviedade do conceito / conteúdo

O conteúdo do site deve ser óbvio e auto-evidente ao primeiro relance, além de completo e atualizado.



2. SOBRE O WEBSITE DO UNI-BH

O Centro Universitário de Belo Horizonte – Uni-BH é uma instituição particular de ensino superior, localizada em Belo Horizonte e com 43 anos de atividade.

O website do Uni-BH é o principal canal de comunicação online da instituição com os seus públicos. Ele possui informações pertinentes para as pessoas que desejam ingressar em algum de seus cursos oferecidos, ou tem interesse em algum serviço prestado pela instituição, para as pessoas que já são seus clientes, ou seja, alunos e para seus funcionários, os professores.

Dessa forma, o público do website do Uni-BH, pode ser classificado em dois grandes grupos:

• Público externo: pessoas que desejam se tornar alunos da instituição e pessoas que utilizam os serviços prestados a comunidade.

• Público interno: alunos, funcionários e professores.



3. APLICAÇÃO DO PERCURSO COGNITIVO

Para a aplicação do percurso cognitivo foram escolhidas quatro tarefas, sendo que duas pertinentes aos alunos, público interno do Uni-BH e as outras duas pertinentes ao público externo, ou seja, pessoas sem relação com o Uni-BH.

3.1 Planejamento da análise (definição de tarefas, cenários, públicos e seqüência de ações)

USUÁRIO - Aluno (Universitários que utilizam o site do Uni-BH para obter informações específicas disponibilizadas para o público interno).

TAREFA 1 - Consultar resultado da bolsa ProUni.

CENÁRIO - O aluno quer saber se o seu nome está na lista do resultado da bolsa ProUni.

SEQÜÊNCIA DE AÇÕES

Passo 1 – Acessar o item “Programa de bolsas” no menu de navegação.

Passo 2 – Acessar o item “Classificados - ProUni 2007/2º” no sub-menu de navegação.

Passo 3 – Clicar no elemento “Classificados” para visualizar o arquivo com o resultado da bolsa.

TAREFA 2 - Consultar os recessos acadêmicos do mês atual no calendário acadêmico.

CENÁRIO - O aluno quer saber em quais dias do mês não terá aula devido a recessos acadêmicos.


Passo 1 – Acessar o item “Calendário e Guia Acadêmico” na parte superior do site.

Passo 2 – Encontrar o mês atual na página acessada.

Passo 3 – Percorrer a programação do mês para encontrar os recessos.



USUÁRIO - Público externo (Pessoas sem relação com o Uni-BH, interessadas em ingressar em algum curso, ou interessadas nos serviços oferecidos para a sociedade).

TAREFA 3 - Ver horários de funcionamento dos serviços prestados pela clínica-escola.

CENÁRIO - A pessoa quer se informar sobre os horários de atendimento da clínica-escola.


Passo 1 – Selecionar em “Escolha seu curso” dentro de “Graduação”, o curso de Fisioterapia.

Passo 2 – Clicar no link “Conheça o site do curso”.

Passo 3 – Clicar no link “Clínica Escola” no menu “Páginas”.

TAREFA 4 - Saber quais são os documentos necessários para a matrícula no Vestibular.

CENÁRIO - O candidato ao vestibular, quer se certificar sobre quais documentos precisará para realizar a matrícula na instituição.


Passo 1 – Clicar no banner referente ao Vestibular.

Passo 2 – Clicar no menu “QUERO SABER +”.

Passo 3 – Dentro do combo “Qual é a sua dúvida?”, selecionar o item matrícula.

Passo 4 – Rolar a página até o título “Quais os documentos necessários para efetuar a matrícula?”.



3.2 Análise

» Tarefa 1 - Consultar resultado da bolsa ProUni

Questões / Passos Acessar o item “Programa de bolsas” no menu de navegação

Acessar o item “Classificados - ProUni 2007/2º” no sub-menu de navegação

Clicar no elemento “Classificados” para visualizar o arquivo com o resultado da bolsa

A ação que o usuário pretende realizar está presente na interface

Sim. Sim. Sim.

A ação correta é evidente para o usuário?

Sim. Mas o usuário precisa varrer todo o menu até chegar ao último, que é a opção correta.

Sim, mas é apenas um item entre vários no sub-menu. Não há uma classificação entre o que é inscrição, o que é resultado e o que é apenas informação.

Sim.

O usuário irá associar as ações corretas ao que pretende fazer?

Sim. Sim. Sim.

Irá o usuário interpretar de forma correta a resposta do sistema a ação escolhida?

Sim. Sim. Sim.

Resultados

No geral a tarefa 1 está bem resolvida na interface do website, mas alguns problemas podem se originar devido à falta de destaque dos itens, que o usuário deve clicar. São eles:

• Visibilidade prejudicada

No passo 1, o item a ser acessado “Programa de Bolsas”, é o último do menu principal de navegação, que possui vários itens que não tem uma separação visual clara, o que pode prejudicar o processo de “varredura”, feita pelos usuários atrás da informação desejada.

Figura 1 - Menu de navegação principal do website do Uni-BH



• No passo 2, o item que deve ser acessado também não tem o devido destaque por estar inserido entre outros vários itens no sub-menu de navegação, sem nenhuma classificação aparente.

Figura 2 - Sub-menu de navegação da página "Programa de Bolsas"

» Tarefa 2 - Consultar os recessos acadêmicos do mês atual no calendário acadêmico

Questões / Passos Acessar o item “Calendário e Guia Acadêmico” na parte superior do site

Encontrar o mês atual na página acessada

Percorrer a programação do mês para encontrar os recessos


Sim. Sim. Sim.


Não. A opção se encontra em um menu auxiliar localizado na extremidade superior do site.

Não. Para visualizar o mês atual é necessário rolar a barra de rolagem para baixo.

Sim.


Sim. Sim. Sim.


Sim.

Sim. Sim.



Resultados

Na tarefa 2, também foram encontrados problemas referentes à visibilidade dos elementos de interação necessários para que o usuário encontre a informação desejada. Porém, os problemas apontados são mais graves e podem prejudicar a realização da tarefa de forma mais contundente.

• No passo 1, a opção correta se encontra em um menu auxiliar na extremidade superior do website. O item correto se mistura com outros, que não tem qualquer relação entre si. O agrupamento arbitrário desses itens nessa localização não tem nenhum motivo estratégico aparente e pode fazer com que o usuário passe despercebido por eles.

Figura 3 - Menu auxiliar de navegação

• No passo 2, ao acessar a página “Calendário e Guia Acadêmico”, o calendário não se encontra em ordem cronológica lógica. Dessa forma o usuário precisa rolar a barra de rolagem até encontrar o mês atual, que poderia já estar situado na parte de cima.



Figura 4 - Página "Calendário e Guia Acadêmico"



» Tarefa 3 - Ver horários de funcionamento dos serviços prestados pela clínica-escola

Questões / Passos

Selecionar em “Escolha seu curso” dentro de “Graduação”, o curso de Fisioterapia

Clicar no link “Conheça o site do curso”

Clicar no link “Clínica Escola” no menu “Páginas”


Não. É preciso escolher o curso de fisioterapia dentro do combo.

Sim. Sim.


Sim. Sim. Sim.


Não. É necessário que ele saiba que a Clínica-escola é um projeto do curso de fisioterapia.

Não. Não há nenhuma indicação de que as informações sobre a clínica-escola estão dentro do site do curso de fisioterapia.

Sim.


Sim.

Sim. Sim.

Resultados

A tarefa 3 apresenta problemas graves onde as opções corretas não têm relação direta com o objetivo do usuário.

• O passo 1 tem seu inicio prejudicado pelo problema de se precisar acessar o menu de opões para se achar a opção correta, que é o curso de fisioterapia.

• Ainda no passo 1, ocorre um grave problema entre a opção correta e o objetivo do usuário, pois é necessário que ele saiba que a clínica-escola é um serviço oferecido pelo curso de fisioterapia. Talvez nem todos os usuários vão saber previamente dessa informação.

• No passo 2, outro grave problema ocorre, pois não há qualquer indicação de que as informações sobre a clínica-escola se encontram dentro do site do curso.



Figura 5 - Página do curso de Fisioterapia

» Tarefa 4 - Saber quais são os documentos necessários para a matrícula no Vestibular

Questões / Passos Clicar no banner referente ao Vestibular

Clicar no menu “QUERO SABER +”

Dentro do combo “Qual é a sua dúvida?”, selecionar o item matrícula

Rolar a página até o título “Quais os documentos necessários para efetuar a matrícula?”


Sim. Sim. Sim. Sim.


Sim. Sim. Sim.

Sim.


Sim.

Não. Não há qualquer indicação de que as informações sobre matrícula se encontram dentro desse item do menu.

Sim, mas ele quer saber informações específicas, ele ainda não possui dúvidas como esta proposto na interface.

Não. Não há indicações corretas sobre onde na página se encontra a informação desejada.


Sim.

Não. A página não possui título e o menu clicado não fica marcado.

Sim. Sim.



Resultados

Na tarefa 4, assim como na tarefa 3, também ocorrem problemas de não correlação direta entre as opções corretas a serem seguidas pelos usuários e seus objetivos específicos.

• No passo 2, não há qualquer indicação de que as informações sobre matrícula se encontram dentro do item “Quero saber +”.

Figura 6 - Página inicial do site do Vestibular Uni-BH

• Ainda no passo 2, ao clicar no item correto, não há feedback sobre qual item foi clicado ou para qual página o usuário foi direcionado.

Figura 7 - Página "Quero saber +" do site do Vestibular



• No passo 3, pode ocorrer uma falha na comunicação com o usuário, pois as opções, inclusive a opção desejada pelo usuário, se encontram em um combo box com o título “Qual é a sua dúvida?”, quando na verdade ainda não existe uma dúvida, mas um desejo de encontrar determinada informação.

Figura 8 - Página "Quero saber +" do site do Vestibular

• No passo 4, como não existe um índice geral sobre quais informações estão disponibilizadas naquela página, o usuário precisa rolar a barra de rolagem e varrer todo o texto em busca da informação que deseja.

Figura 9 – Parte de baixo da página "Quero saber +"



4. APLICAÇÃO DA ANÁLISE HEURÍSTICA

A análise heurística foi feita nas páginas onde se perpassam as quatro tarefas analisadas no percurso cognitivo.

Além da página inicial do website, que é por onde todas as tarefas se iniciam, serão analisadas:

• A página “Programa de bolsas” da tarefa 1 “Consultar resultado da bolsa ProUni”;

• A página “Calendário e Guia Acadêmico” da tarefa 2 “Consultar os recessos acadêmicos do mês atual no calendário acadêmico”;

• A página do curso de fisioterapia da tarefa 3 “Ver horários de funcionamento dos serviços prestados pela clínica-escola”;

Legenda das heurísticas utilizadas na avaliação:

H1. Relevância dos elementos

H2. Linguagem simples e compreensível

H3. Reconhecimento de padrões

H4. Minimização da carga cognitiva (memória) do usuário

H5. Consistência

H6. Feedback e transparência do sistema

H7. Controle do usuário

H8. Eficiência, acessibilidade e flexibilidade de uso

H9. Recuperação de erros

H10. Prevenção de erros

H11. Agrupamento Intuitivo de informações

H12. Informações hierarquizadas

H13. Apresentação do texto



H14. Tempo de resposta

H15. Obviedade do conceito / conteúdo



4.1 Análise

» Página inicial

ID Problema Heurística(s) desobedecida(s)

Recomendação Criticidade

1 No browser Internet Explorer 6.0, não é possível aumentar o tamanho dos textos, o que prejudica a acessibilidade.

H8

O tamanho das fontes está definido em pixels na folha de estilo, deve-se usar outra unidade de identificação para que o redimensionamento não fique comprometido no Internet Explorer.

Alta

2

Há uma falta de padrão entre os links. Alguns recebem underline quando se passa o mouse (hover), enquanto outros não apresentam esse mesmo comportamento, ficando inalterados.

H5

Determinar um padrão para todos os links, com preferência para o underline para o estado hover para que o usuário perceba com clareza de que se trata de um link.

Baixa

3

A ferramenta de busca é caracterizada apenas com o ícone de “lupa” sem nenhum label e o botão para concretizar a ação também é apenas um ícone sem label. Apesar dos ícones utilizados já serem convenções mundiais, usuários mais leigos podem encontrar dificuldades em identificar a ferramenta de busca.

H3 H15 Para tornar a ferramenta mais intuitiva, labels devem ser utilizados junto aos ícones.

Baixa

4

O logo do Uni-BH possui link redundante para a própria página inicial, além do rótulo “Home” no ALT. Esse comportamento é próprio das páginas internas, mas não faz sentido na página inicial podendo ocasionar erros.

H10 Retirar o link e o rótulo do logo do Uni-BH.

Baixa

5 Na área dinâmica em destaque, o banner atual permanece com o link apontando para ele mesmo, o que pode ocasionar erros.

H10 Retirar o link do banner, quando este se encontra ativado. Baixa

6

Em volta dos links de algumas seções existem áreas vazias que possuem links que não apontam para lugar algum. Esse erro pode confundir os usuários, já que, deixa áreas vazias com o mesmo aspecto de links reais.

H10 Retirar os links dessas áreas vazias. Média

7

Ao desabilitar a folha de estilos o conteúdo do website não fica corretamente organizado e as imagens não têm descrição apropriada no atributo ALT. Isso pode confundir usuários portadores de deficiência visual, que utilizam leitores de tela para navegar, a encontrar a informação desejada e se localizar no website.

H8 Estruturar o código HTML de maneira semântica de acordo com as regras criadas pela W3C.

Alta



Figura 10 – Página inicial do website do Uni-BH

3 4

5

6

6

6 6



» Programa de bolsas

Os problemas 1, 3 e 7 encontrados na página inicial também se repetem na página “Programa de bolsas”.



1

O conteúdo mais importante da seção, ou seja, as informações dinâmicas, que geram trafego para a seção, são as atualizações sobre inscrições, resultados e outras informações sobre as bolsas. Entretanto esse conteúdo é o que recebe menos destaque na seção, ficando na parte inferior do sub-menu de navegação, a baixo da barra de rolagem da pagina. Além desse fator negativo as informações sobre os tipos de bolsas ficam juntas e misturadas. Tudo isso pode acarretar em dificuldade dos usuários encontrarem as informações desejadas.

H1 H12 H15

Rápida: Trazer o conteúdo do item “Atualizações” para a parte superior do sub-menu de navegação. Mais complexa: Repensar a estrutura da seção, organizado o conteúdo dinâmico de cada tipo de bolsa, em forma de destaques, no lugar do texto de apresentação. Dessa forma, logo que entrasse nas seção o usuário já veria as inscrições, resultados e outras informações sobre as bolsas, sem precisar procurar essa informação em uma lista de links misturados.

Média

2

O resultado das bolsas, assim como outras informações semelhantes, é divulgado apenas em formato PDF, o que pode impedir usuários portares de deficiência visual de acessar o conteúdo.

H8

Segundo o WCAG (Web Content Accessibility Guidelines), que é um conjunto regras criado pela W3C para assegurar que os conteúdos publicados na internet sejam acessíveis, toda a informação disponibilizada em formato PDF também deve estar em formato HTML. Caso a informação precise estar em formato PDF, então ao menos o documento deve ser estruturado semanticamente para tornar-se um PDF acessível e capaz de ser interpretado por um software leitor de tela.

Alta

» Calendário e Guia Acadêmico

Os problemas 1, 3 e 7 encontrados na página inicial também se repetem na página “Calendário e Guia Acadêmico”.

ID Problema Heurística(s)

desobedecida(s) Recomendação Criticidade

1

A informação que mais interessa em um calendário é a atual, entretanto o mês atual do calendário encontra-se a baixo da barra de rolagem, fazendo o usuário perder tempo tendo que rolar a barra de rolagem até encontrar o mês atual.

H1 H12 H15

Inverter a ordem do calendário fazendo com que os meses passados fiquem na parte inferior e que o mês atual fique visível assim que o usuário acesse a seção.

Baixa



» Página do curso de Fisioterapia

Os problemas 1, 3 e 7 encontrados na página inicial também se repetem na página do curso de Fisioterapia.



1

O link “Conheça o site do curso” leva o usuário para fora do website do Uni-BH sem nenhum aviso prévio, o que pode confundir os usuários. Além disso, as informações contidas dentro desse site externo poderiam estar na própria seção do curso no website do Uni-BH, evitando o excesso de cliques e evitando que o usuário saia do website para acessar informações que não tem um motivo claro e evidente para estarem separadas em outra página WEB.

H4 H6 H15

Sinalizar corretamente, que o link leva a um website externo. Integrar o conteúdo do site do curso dentro da própria seção do curso no website do Uni-BH.

Baixa



5. CONCLUSÕES

Foram encontrados 11 problemas por cada técnica de inspeção de usabilidade, totalizando 22 problemas.

Dentre eles apenas 2 problemas foram levantados por ambas as técnicas.

São eles:

» Programa de bolsas

O fato da informação pertinente, que é dinâmica encontrar-se sem o devido destaque abaixo da barra de rolagem, na parte inferior da página. Além disso, as informações sobre todos os tipos de bolsas encontram-se misturados sem nenhuma estruturação ou organização.

» Calendário e Guia Acadêmico

O fato do mês atual, que é o mais importante no calendário, estar situado abaixo da barra de rolagem, enquanto os meses passados encontram-se na parte superior da página. Isso faz com que o usuário tenha o trabalho adicional de mover a barra de rolagem para baixo até encontrar o mês atual.

inspeção de usabilidade

Documents