analise de usabilidade menus - globoesporte.com (marciamaia)
DESCRIPTION
Apresenta resultados de teste de usabilidade de 4 modelos de menus de navegação para o Site do GloboEsporte.com. Trabalho apresentado no EBAI 2007.TRANSCRIPT
![Page 1: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/1.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
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
![Page 2: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/2.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
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çãoPesquisas anterioresTeste de usabilidadeRequisitos e restriçõesModelos de menus avaliadosAvaliação dos menus testadosConclusões
![Page 3: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/3.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
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
![Page 4: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/4.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
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
![Page 5: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/5.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
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?
Problema
?
??
??
?
?
![Page 6: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/6.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
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
![Page 7: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/7.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
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.
![Page 8: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/8.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
Pesquisas anterioresAntes 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.
![Page 9: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/9.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
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.
![Page 10: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/10.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
Requisitos e restriçõesFormatoMenu vertical
Níveis de profundidade103 itens, distribuídos em até três níveis hierárquicos (no período da pesquisa)
Restrições tecnológicasO 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 usoO menu deveria ser fácil de usar e compreender tanto no primeiro uso, quanto com o uso contínuo da ferramenta.
![Page 11: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/11.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
Perfil e amostragem
Definição de perfilBaseado em dados da audiência IBOPE no segmento esportes
CaracterísticasForam selecionados usuários consumidores de sites de esportes com graus de experiência diferentes quanto ao uso de internet
AmostragemO teste foi realizado com 15 usuários (10 homens e 5 mulheres) com idade entre 15 a 35 anos
![Page 12: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/12.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
Modelos avaliados
![Page 13: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/13.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
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 sitedo GloboEsporte.com no período do teste.
![Page 14: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/14.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
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.
![Page 15: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/15.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
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
![Page 16: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/16.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
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)
![Page 17: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/17.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
Avaliação Modelo 1
![Page 18: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/18.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
Modelo 1
![Page 19: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/19.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
clique na palavra exibe sub-itens e carrega a página
Nível 1 - fechado Nível 2 - aberto
Modelo 1
![Page 20: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/20.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
nível 1 nível 2Pontos fortesMenu é compreensível em 1º nível
Pontos fracosMenu 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, ocarregamento 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 1 - Avaliação
![Page 21: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/21.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
Avaliação Modelo 2
![Page 22: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/22.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
Modelo 2
![Page 23: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/23.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
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
![Page 24: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/24.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
clique no item exibe sub-itens (3º nível) e não carrega página correspondente
Nível 1 - fechado Nível 2 - aberto Nível 3 - aberto
Modelo 2
![Page 25: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/25.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
nível 1 nível 3nível 2Pontos fortesTodas 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 fracosNão foram identificados pontos fracos em relação a utilização do menu
Modelo 2
![Page 26: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/26.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
(funcionamento de árvore de diretório)Avaliação Modelo 3
![Page 27: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/27.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
Modelo 3
![Page 28: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/28.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
Clique no “+”
clique no “+” exibe sub-itens
Modelo 3
![Page 29: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/29.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
Clique no itemClique no “+”
clique no “+” exibe sub-itens
clique na palavra exibe sub-itens e carrega a página
Modelo 3
![Page 30: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/30.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
Pontos fortesMenu é compreensível em 1º nível
Pontos fracosPoucas 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 menuporque 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
Modelo 3 (árvore de diretórios)
![Page 31: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/31.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
(funcionamento de “cascata”)Avaliação Modelo 4
![Page 32: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/32.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
Modelo 4 (cascata)
![Page 33: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/33.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
Nível 1
Ao passar o mouse sobre o item abre cortina com sub-itens (não é preciso clicar)
Modelo 4 (cascata)
![Page 34: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/34.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
Nível 1 Nível 2
Modelo 4 (cascata)
![Page 35: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/35.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
Nível 1 Nível 2 Nível 3
Modelo 4 (cascata)
![Page 36: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/36.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
nível 1 nível 2 nível 3Pontos 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 precisamde 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.
Modelo 4 (cascata)
![Page 37: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/37.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
Atalhos
![Page 38: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/38.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
Bloco ‘Destaques’Se mostrou eficaz ecompreensí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
![Page 39: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/39.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
Considerações finais
![Page 40: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/40.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
clique no item exibe sub-itens (3º nível) e não carrega página correspondente
Nível 1 - fechado Nível 2 - aberto Nível 3 - aberto
Menu que apresentou melhor desempenho
![Page 41: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/41.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia
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.
Considerações finais
![Page 42: Analise de Usabilidade Menus - GloboEsporte.com (MarciaMaia)](https://reader036.vdocuments.com.br/reader036/viewer/2022081401/5582f180d8b42a38168b4ae2/html5/thumbnails/42.jpg)
Out.2007GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia