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


...
Vamos ver nesta apresentação

Análise de usabilidade de menus de navegação em portal com
grande quantidade de informação e...
Contextualização
O GloboEsporte.com é o canal de esportes do portal Globo.com.
É um dos principais produtos da empresa res...
Contextualização

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

  Possui ...
?
Problema
Qual seria o formato de menu de navegação
mais adequado para um portal com grande
volume de conteúdo e com vári...
Escolha do método
Teste de usabilidade

   Avaliar o grau de facilidade de uso e satisfação do usuário em
relação aos menu...
Teste de usabilidade

  O teste de usabilidade realizado foi
individual, acompanhado por moderador,
onde os usuários segui...
Pesquisas anteriores
Antes do teste de usabilidade, foi realizado:

  Card Sorting para avaliar a categorização utilizada ...
Teste de usabilidade

   Foram testados com usuários, quatro
tipos diferentes de menus (entre eles, o menu que
estava send...
Requisitos e restrições
Formato
Menu vertical

Níveis de profundidade
103 itens, distribuídos em até três níveis hierárqui...
Perfil e amostragem
Definição de perfil
Baseado em dados da audiência IBOPE no segmento esportes


Características
Foram s...
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 correspo...
Modelos avaliados


2
     FUNCIONAMENTO:
     Ao clicar no item de primeiro nível do menu, os subitens ficam aparentes e ...
Modelos avaliados


3    FUNCIONAMENTO:
     Modelo “Árvore de diretórios”: O Clique no “+” expõe os subitens. O clique no...
Modelos avaliados


4
     FUNCIONAMENTO:
     Modelo “Cascata”: Ao passar o mouse sobre o item de primeiro nível, os subi...
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




                                              ...
Modelo 1 - Avaliação
nível 1                                          nível 2
Pontos fortes
  Menu é compreensível em 1º n...
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




                                                            ...
Modelo 2

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




    ...
Modelo 2
nível 1                            nível 2                                            nível 3
Pontos fortes
  Tod...
Avaliação Modelo 3
(funcionamento de árvore de diretório)




     GloboEsporte.com: Análise de usabilidade de menu de nav...
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...
Modelo 3

Clique no “+”                                                         Clique no item




          clique no “+”...
Modelo 3 (árvore de diretórios)
Pontos fortes
  Menu é compreensível em 1º nível

Pontos fracos
  Poucas pessoas percebem ...
Avaliação Modelo 4
(funcionamento de “cascata”)




 GloboEsporte.com: Análise de usabilidade de menu de navegação | Marci...
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 ...
Modelo 4 (cascata)

Nível 1                  Nível 2




             GloboEsporte.com: Análise de usabilidade de menu de ...
Modelo 4 (cascata)

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




         ...
Modelo 4 (cascata)
                                                                           nível 3
nível 1             ...
Atalhos




GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia   Out.2007
Bloco ‘Destaques’
                                                     Se mostrou eficaz e
                               ...
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                                   ...
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....
marciamaia@corp.globo.com




GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia   Out.2007
Upcoming SlideShare
Loading in...5
×

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

2,137

Published on

O artigo reforça a importância da utilização de métodos de pesquisa centrados no usuário para o desenvolvimento de produtos de mídias interativas. Relata um estudo sobre a comparação de quatro modelos diferentes de menu com até três níveis hierárquicos, através de teste de usabilidade, para o portal do GloboEsporte.com. Descreve o método de pesquisa utilizado, o estudo para chegar aos tipos de menu que seriam avaliados, as definições para criação dos protótipos utilizados no teste, o processo de preparação do teste, definição de perfil, aplicação e resultados do teste. Conclui ressaltando a importância da aplicação de métodos de pesquisa para o desenho de interfaces mais eficientes e indica o benefício da aproximação entre o meio acadêmico e o mercado.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,137
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
117
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. 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
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. ? 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. Modelos avaliados GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. Avaliação Modelo 1 GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007
  18. 18. Modelo 1 GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007
  19. 19. 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
  20. 20. 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
  21. 21. Avaliação Modelo 2 GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007
  22. 22. Modelo 2 GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. Modelo 3 GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007
  28. 28. Modelo 3 Clique no “+” clique no “+” exibe sub-itens GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007
  29. 29. 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
  30. 30. 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
  31. 31. Avaliação Modelo 4 (funcionamento de “cascata”) GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007
  32. 32. Modelo 4 (cascata) GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007
  33. 33. 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
  34. 34. Modelo 4 (cascata) Nível 1 Nível 2 GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007
  35. 35. 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
  36. 36. 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
  37. 37. Atalhos GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007
  38. 38. 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
  39. 39. Considerações finais GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007
  40. 40. 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
  41. 41. 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
  42. 42. marciamaia@corp.globo.com GloboEsporte.com: Análise de usabilidade de menu de navegação | Marcia Maia Out.2007
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×