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
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

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
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

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
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

?
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?
?
? ?
?
?
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

Escolha do método
Teste de usabilidade
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
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

Teste de usabilidade
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.
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

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.
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

Teste de usabilidade
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.
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

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.
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

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
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

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

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.
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

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.
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

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
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

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)
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

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

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

Modelo 1
Nível 1 - fechado Nível 2 - aberto
clique na palavra
exibe sub-itens e
carrega a página
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

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
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

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

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

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
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

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
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

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
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

Avaliação Modelo 3
(funcionamento de árvore de diretório)
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

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

Modelo 3
Clique no “+”
clique no “+”
exibe sub-itens
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

Modelo 3
Clique no “+” Clique no item
clique no “+”
exibe sub-itens
clique na palavra
exibe sub-itens e
carrega a página
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

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
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

Avaliação Modelo 4
(funcionamento de “cascata”)
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

Modelo 4 (cascata)
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

Modelo 4 (cascata)
Nível 1
Ao passar o mouse
sobre o item abre
cortina com sub-itens
(não é preciso clicar)
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

Modelo 4 (cascata)
Nível 1 Nível 2
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

Modelo 4 (cascata)
Nível 3
Nível 1 Nível 2
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

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.
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

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

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
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

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

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
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

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.
GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007

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