Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)

Análise de usabilidade de menus de navegação em
portal com grande quantidade de informação e
vários níveis hierárquicos

Marcia Maia
Outubro/2007

GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

Vamos ver nesta apresentação

Análise de usabilidade de menus de navegação em portal com
grande quantidade de informação e vários níveis hierárquicos

Contextualização e Problematização
Pesquisas anteriores
Teste de usabilidade
Requisitos e restrições
Modelos de menus avaliados
Avaliação dos menus testados
Conclusões


Contextualização
O GloboEsporte.com é o canal de esportes do portal Globo.com.
É um dos principais produtos da empresa responsável por grande
parte da audiência do portal.

Visitantes únicos:
Agosto de 2006: 1,011,000
Agosto de 2007: 2,400,000

Notícias Esportes Entretenimento


Contextualização

O GloboEsporte.com tem como
temática principal a cobertura de várias
modalidades esportivas

Possui uma arquitetura complexa e seu
conteúdo é distribuído em vários níveis
hierárquicos

No período da pesquisa contava com
103 itens distribuídos em 16 categorias


?
Problema
Qual seria o formato de menu de navegação
mais adequado para um portal com grande
volume de conteúdo e com vários níveis de

?
profundidade?

?
? ?
?
?

Escolha do método

Avaliar o grau de facilidade de uso e satisfação do usuário em
relação aos menus

Identificar dificuldades e problemas de interface e interação em
tipos diferentes de menus



O teste de usabilidade realizado foi
individual, acompanhado por moderador,
onde os usuários seguiram um roteiro
pré-determinado de tarefas.

Data: Agosto de 2006

Local: Laboratório de usabilidade da
Globo.com, localizado no Rio de Janeiro.


Pesquisas anteriores
Antes do teste de usabilidade, foi realizado:

Card Sorting para avaliar a categorização utilizada no menu do GloboEsporte.com

Análise de mercado dos menus aplicados em sites com características similares
as do GloboEsporte.com. Com base nessa análise foram definidos 4 modelos a
serem testados.



Foram testados com usuários, quatro
tipos diferentes de menus (entre eles, o menu que
estava sendo utilizado pelo GloboEsporte.com na época da
pesquisa).

Foram criados quatro protótipos de alta
fidelidade com exatamente o mesmo
conteúdo, tendo o menu como a única
variável.

Os usuários não foram informados que o
objeto de estudo do teste era o menu de
navegação.


Requisitos e restrições
Formato
Menu vertical

Níveis de profundidade
103 itens, distribuídos em até três níveis hierárquicos
(no período da pesquisa)

Restrições tecnológicas
O menu não poderia ser dependente de plugins que o usuário precisasse
baixar ou tecnologias que aumentassem o peso do código da página

Freqüência de uso / Curva de aprendizado / Facilidade no primeiro uso
O menu deveria ser fácil de usar e compreender tanto no primeiro uso,
quanto com o uso contínuo da ferramenta.


Perfil e amostragem
Definição de perfil
Baseado em dados da audiência IBOPE no segmento esportes

Características
Foram selecionados usuários consumidores de sites de esportes com graus
de experiência diferentes quanto ao uso de internet

Amostragem
O teste foi realizado com 15 usuários (10 homens e 5 mulheres) com idade
entre 15 a 35 anos


Modelos avaliados


Modelos avaliados

1 FUNCIONAMENTO:
O clique no item de primeiro nível, abre subitens e carrega a página correspondente.

Obs: esse era o modelo que
estava sendo utilizado no site
do GloboEsporte.com no
período do teste.


Modelos avaliados

2
FUNCIONAMENTO:
Ao clicar no item de primeiro nível do menu, os subitens ficam aparentes e não
carrega a página correspondente ao item clicado.


Modelos avaliados

3 FUNCIONAMENTO:
Modelo “Árvore de diretórios”: O Clique no “+” expõe os subitens. O clique no item
abre subitens e carrega a página correspondente


Modelos avaliados

4
FUNCIONAMENTO:
Modelo “Cascata”: Ao passar o mouse sobre o item de primeiro nível, os subitens são
exibidos em cortina lateral (não há necessidade de clicar para ver os subitens)


Avaliação Modelo 1


Modelo 1


Modelo 1

Nível 1 - fechado Nível 2 - aberto

clique na palavra
exibe sub-itens e
carrega a página


Modelo 1 - Avaliação
nível 1 nível 2
Pontos fortes
Menu é compreensível em 1º nível

Pontos fracos
Menu não favorece a navegação entre níveis através do menu.

Carregamento da página ao clicar no item de 1º nível desvia a atenção, do usuário, do menu para a
página. Quando a intenção do usuário é encontrar uma página que está em segundo nível, o
carregamento da página de primeiro nível gera confusão. (ex: a home de esporte à motor (1º nível) é
confundida com a home de F1 (2º nível)).

Muitas pessoas não encontraram no menu os itens que estavam em 2º nível, gerando a percepção
de que tais itens não estavam disponíveis no menu


Modelo 2


Modelo 2

Nível 1 - fechado Nível 2 - aberto

clique no item exibe
sub-itens (2º nível) e
NÃO carrega página
correspondente


Modelo 2

Nível 1 - fechado Nível 2 - aberto Nível 3 - aberto

clique no item
exibe sub-itens
(3º nível) e não
carrega página
correspondente


Modelo 2
nível 1 nível 2 nível 3
Pontos fortes
Todas as pessoas utilizaram esse modelo com facilidade

Todas as pessoas navegaram por itens do 2º e 3º nível através do menu

A atenção do usuário não é desviada para a página facilitando a navegação através do menu

Favorece a percepção e a navegação entre níveis através do menu

Pontos fracos
Não foram identificados pontos fracos em relação a utilização do menu


(funcionamento de árvore de diretório)


Modelo 3


Modelo 3

Clique no “+”

clique no “+”
exibe sub-itens


Modelo 3

Clique no “+” Clique no item

clique no “+”
exibe sub-itens
clique na palavra
exibe sub-itens e
carrega a página


Modelo 3 (árvore de diretórios)
Pontos fortes
Menu é compreensível em 1º nível

Pontos fracos
Poucas pessoas percebem que o clique no “+” é diferente do clique na palavra

A maioria das pessoas clica apenas na palavra

Não favorece a navegação entre níveis através do menu

Carregar a página ao clicar no item de 1º nível não favorece navegação de 2º e 3º nível através do menu
porque a atenção do usuário se volta para a página

Muitas pessoas não encontraram no menu os itens que estão em 2º ou 3º nível, dando a impressão aos
participantes de que os itens não estavam disponíveis no menu


(funcionamento de “cascata”)


Modelo 4 (cascata)


Modelo 4 (cascata)

Nível 1

Ao passar o mouse
sobre o item abre
cortina com sub-itens
(não é preciso clicar)


Modelo 4 (cascata)

Nível 1 Nível 2


Modelo 4 (cascata)

Nível 3
Nível 1 Nível 2


Modelo 4 (cascata)
nível 3
nível 1 nível 2
Pontos fortes
Não é preciso clicar para ver os sub-itens

Navegação entre níveis é favorecida através do menu

Pontos fracos
Dificuldade no manuseio. Nem todos os usuários têm controle total do mouse sobre o menu e precisam
de várias idas e vindas para conseguir clicar no item desejado

Dificuldade para perceber que o item que abre sub-itens não tem link, deve-se clicar em “página inicial”
para entrar na home da seção.


Atalhos


Bloco ‘Destaques’
Se mostrou eficaz e
compreensível. Muitas pessoas
procuraram os itens desejados
nesse bloco do menu

Bloco ‘Multimídia’
Se mostrou eficaz e
compreensível. A maioria
conseguiu localizar a página de
vídeos útilizando essa parte do
menu


Considerações finais


Menu que apresentou melhor desempenho

Nível 1 - fechado Nível 2 - aberto Nível 3 - aberto

clique no item
exibe sub-itens
(3º nível) e não
carrega página
correspondente


Considerações finais
O tipo de menu que mais favoreceu
a navegação dos usuários e a
exposição do conteúdo do
GloboEsporte.com foi implementado
no portal em substituição ao modelo
que vinha sendo utilizado.

As descobertas desta pesquisa
contribuíram não só para o portal do
GloboEsporte.com, mas também
para outros portais da Globo.com
com características similares.


marciamaia@corp.globo.com


Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)