Página 1 de 10

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 Marcia Maia Designer de interface responsável por pesquisas e testes de usabilidade da Globo.com marciamaia@corp.globo.com

Palavras-chave: Design centrado no usuário, teste de usabilidade, menu de navegação, hierarquia 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.

1. Introdução Conhecer e entender as necessidades do público é fundamental no processo de criação e desenvolvimento de qualquer projeto de mídia interativa. Felizmente, a preocupação sobre como os usuários interagem com os sistemas vem se mostrando crescente no mercado de internet. A internet de hoje está bem diferente de alguns anos atrás, hoje temos novas tecnologias, novos usos das tecnologias, um aumento no uso de banda larga, usuários mais participativos gerando demandas, vários modelos de negócio, e claro, as questões referentes à usabilidade também acompanham essas mudanças. O que não mudou é que quanto mais projetarmos conciliando a demanda do cliente com as necessidades dos usuários, mais chances teremos de chegar a bons resultados. Este artigo relata um estudo de caso sobre o menu de navegação do GloboEsporte.com. Testes de usabilidade foram realizados para identificar o modelo mais adequado para atender os requisitos do projeto e as necessidades dos usuários. 2. Contextualização, requisitos e restrições do projeto O objetivo principal do estudo era definir qual seria o melhor formato de menu de navegação para um portal com grande volume de conteúdo e com vários níveis de profundidade. A pesquisa teve como objeto material de estudo o portal GloboEsporte.com (www.globoesporte.com).

Página 2 de 10

O GloboEsporte.com é um portal de internet que faz parte do portal Globo.com. Tem como temática principal à cobertura de várias modalidades esportivas, possui uma arquitetura complexa e seu conteúdo é distribuído em vários níveis hierárquicos. Entre os designers e arquitetos envolvidos com o projeto havia dúvidas sobre qual seria a melhor forma de disponibilizar todo o conteúdo do GloboEsporte.com no menu.Tendo por finalidade a navegação do usuário e expor claramente a diversidade e quantidade de conteúdo do portal. À princípio, foi feito um estudo de benchmark com menus de vários portais. Com base nessa análise, foram estabelecidos alguns tipos de menus que atendiam, do ponto de vista funcional, as necessidades do GloboEsporte.com. Neste artigo, o termo ‘tipos de menu’ se refere a mecânica de funcionamento do menu, ou seja, a forma como o menu aparece na tela, a maneira como os sub-níveis são expostos para o usuário e a forma como as ações são disparadas a partir do interação do usuário. Para definir os tipos de menu que seriam testados com os usuários foram utilizados os seguintes critérios: Formato Por definição de projeto e por padrões internos da Globo.com, o menu do GloboEsporte.com deveria ser vertical. Níveis de profundidade A arquitetura de informação do GloboEsporte.com, no período do teste, contava com 103 itens, distribuídos em até três níveis hierárquicos. Foram avaliados menus de navegação com uma mecânica de funcionamento capaz de atender a essa dimensão e profundidade. Restrições tecnológicas A tecnologia utilizada para a implementação do menu é um ponto fundamental para propiciar uma melhor experiência do usuário. Uma boa adequação de tecnologia e interface permite que o sistema seja utilizado pelo usuário de forma tão natural que não se perceba a complexidade do que está por trás. O menu não poderia ser dependente de plugins que o usuário precisasse baixar ou tecnologias que aumentassem o peso do código tornando as respostas do sistema mais lentas. Freqüência de uso : Curva de aprendizado x Facilidade no primeiro uso O público consumidor do GloboEsporte.com é muito abrangente. É composto por pessoas de diversas faixas etárias, diferentes classes sociais e com diferentes graus de uso e conhecimento de internet. O menu precisava ser fácil de usar e compreender tanto no primeiro uso, quanto com o uso contínuo da ferramenta. Com o objetivo de encontrar o equilíbrio entre atender aos usuários que usam o site com mais ou menos freqüência, decidimos criar atalhos para itens de assuntos/campeonatos em evidência e manter também a estrutura prevista na arquitetura. Por exemplo, o item ‘Brasileirão’, estava disponível em primeiro nível, no primeiro bloco entitulado ‘destaques’ (atalho) e também estava disponível em segundo nível na estrutura prevista na arquitetura: Futebol > Brasileirão.

Página 3 de 10

3. Escolha do método Para que o menu comunique e favoreça a navegação do site, é fundamental que seja bem estruturado, use uma linguagem adequada ao público e atenda as necessidades explícitas e implícitas dos usuários. Para definir a estrutura do menu e a nomenclatura mais adequada ao público, fizemos um card sorting anteriormente. Teste de usabilidade foi o método que se mostrou mais adequado para atender os objetivos da pesquisa de acordo as restrições de tempo e orçamento do projeto. Os objetivos da pesquisa eram avaliar o grau de facilidade de uso e satisfação do usuário em relação ao menu, identificar dificuldades e problemas de interface e interação em tipos diferentes de menus. 4. Teste de usabilidade O teste de usabilidade realizado foi individual, acompanhado por moderador, onde os usuários seguiram um roteiro pré-determinado de tarefas. Os testes aconteceram entre 14 e 16 de agosto de 2006 no laboratório de usabilidade da Globo.com, localizado no Rio de Janeiro. Todo procedimento foi organizado e conduzido internamente. O recrutamento dos usuários foi feito por uma empresa especializada com base na definição de perfil feita pela equipe da Globo.com.

Página 4 de 10

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 como a única variável o menu. Os menus não apresentavam variação de posicionamento, formato ou conteúdo. Os menus avaliados tinham funcionamentos diferentes em relação à maneira de exibir os subitens. Os usuários não foram informados que o objeto de estudo do teste era o menu de navegação. As tarefas foram criadas de modo que a navegação no site fosse feita pelo usuário através do menu sem que houvesse indução ou pedido direto para uso do menu. 4.1. Perfil Para definir o perfil dos usuários para o teste, foram utilizados os dados da audiência IBOPE no segmento esportes. Definidas as características de sexo, idade e características de uso de internet selecionamos usuários consumidores de sites de esportes com graus de experiência diferentes quanto ao uso de internet. O teste foi realizado com 15 usuários (10 homens e 5 mulheres), distribuídos por faixa etária da seguinte forma: 15-19 anos: 3 homens e 1 mulher 20-25 anos: 3 homens e 2 mulheres 26-30 anos: 2 homens e 1 mulher 31-35 anos: 2 homens e 1 mulher Nielsen realizou estudos que indicam que com cinco usuários por perfil é possível identificar a maior parte dos problemas de um site. Com um número maior que esse, os resultados começam a se repetir e o custo do teste passa a não valer a pena. É importante lembrar que o teste de usabilidade é uma pesquisa qualitativa e não quantitativa. 4.2. Funcionamento dos tipos de menus avaliados no teste de usabilidade Menu 1 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.

Página 5 de 10

Menu 2 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. O clique no primeiro nível apenas abre os subitens.

Página 6 de 10

Menu 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 Menu 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)

Página 7 de 10

5. Avaliação dos menus Menu 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. Resultados Usuários não tiveram dificuldade para navegar entre os itens que estavam em primeiro nível

no menu. A maioria dos usuários apresentou dificuldade para perceber ou não percebeu a existência do

segundo e do terceiro nível do menu. O clique no item de primeiro nível exibir os itens de segundo nível e ao mesmo tempo carregar a página correspondente faz com que a atenção do usuário seja desviada do menu para a página, fazendo com que o usuário não perceba os subitens do menu Muitas pessoas não viram no menu os itens de segundo nível e por isso concluíram que o site

não oferecia tais conteúdos. Afirmavam ainda tais itens deveriam estar no menu. Quando a intenção do usuário era encontrar uma página que estava em segundo nível, o

carregamento da página de primeiro nível gerou confusão. (Exemplo: usuários queriam entrar na página de Fórmula 1”, que de acordo com a arquitetura, é um item de segundo nível, ficando abaixo do item “Esporte à motor”. Para chegar na página de “Fórmula 1” (item de segundo nível do menu), usuários clicavam em “Esporte à motor” (item de primeiro nível), a página de “Esporte à motor era carregada e usuários achavam que estavam na página de “Fórmula 1”, confudiam a página e não percebiam os subitens no menu.

Página 8 de 10

Conclusões Comportamento de carregar a página ao clicar no item de primeiro nível não favorece

navegação de segundo nível através do menu. Menu não favorece a navegação entre níveis através do menu.

Menu 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. O clique no primeiro nível apenas abre os subitens. Resultados Todas as pessoas utilizaram esse modelo com facilidade Todas as pessoas navegaram por 2º e 3º nível

Conclusões O comportamento do menu favorece a navegação entre níveis porque o clique no item abre

apenas os subitens e não carrega a página correspondente. A atenção do usuário se mantém no menu facilitando a navegação. Este foi o modelo que apresentou melhor desempenho quanto ao uso e favoreceu a

compreensão dos usuários, tanto do menu quanto do site como um todo. Menu 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 Resultados Menu se mostrou compreensível para navegação entre itens de primeiro nível. Poucas pessoas perceberam que o clique no “+” é diferente do clique na palavra. A maioria das pessoas clicou apenas na palavra e não percebeu a diferença entre áreas

clicáveis. Comportamento de carregar a página ao clicar no item de primeiro nível não favorece

navegação de segundo e terceiro nível através do menu. Com isso, a atenção do usuário se volta para a página. Muitas pessoas não encontraram no menu os itens que estavam em segundo ou terceiro nível

e diziam que tais itens deveriam estar presentes no menu. Os itens estavam no menu, mas não foram percebidos.

Conclusões O modelo “árvore de diretórios” no contexto de navegação do site do GloboEsporte.com não

foi percebido ou compreendido pela maioria. Antes do teste, acreditava-se que este modelo teria um bom desempenho por causa da familiarização dos usuários com o sistema operacional Windows que usa esse tipo de menu. A navegação entre níveis através deste menu não foi favorecida.

Página 9 de 10

Menu 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) Resultados Usuários consideraram positivo não precisar clicar nos itens de primeiro nível para ver os

subitens Todos os níveis hierárquicos do menu foram percebidos com facilidade Navegação entre níveis foi favorecida através do menu A maioria dos usuários apresentou dificuldades quanto ao uso do menu. A maioria dos

usuários precisava de várias idas e vindas para conseguir clicar no item desejado Houve dificuldade para perceber que o item que exibe os subitens não é clicável. Era

necessário clicar em “página inicial” para entrar na home da sessão. Conclusões Menu favorece a percepção dos níveis hierárquicos do menu Menu apresentou problemas graves quanto ao uso Menu dificultou a navegação dos usuários no site como um todo

5. Conclusão Durante os testes as reações, respostas, comentários e fluxos feitos pelos usuários foram registrados através de anotações, vídeo e programa especializado instalado na máquina de teste. Ao final dos testes, os dados foram compilados. Foi feito um relatório e os resultados da pesquisa foram apresentados formalmente para a diretoria da empresa e para a equipe envolvida com o projeto (arquitetos, designers, desenvolvedores, etc.). 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. A Globo.com tem investido cada vez mais em pesquisas centradas nos usuários com o objetivo de melhorar a qualidade de seus produtos. Ainda há um longo caminho a percorrer, mas na empresa, cada vez mais as decisões de projeto vêm sendo tomadas com base em pesquisa. A aproximação do meio acadêmico com o mercado contribui para o aprimoramento dos produtos. 6. Agradecimentos Gostaria de agradecer a toda equipe Globo.com envolvida nesse projeto, a Juarez Queiroz, CEO da Globo.com, pelo apoio à publicação deste artigo, e a Carlos Bahiana, mestre em design, pela orientação durante a produção deste artigo.

Página 10 de 10

7. Referências DUMAS, Joseph S.; REDISH, Janice C. Pratical guide to usability testing. Intellect, Ltd (UK), 1999. GARRETT, Jesse James. The elements of user experience: user-centered design for the web. New Rider Press, 2002. LARSON, Kevin; CZERWINSKI, Mary. Web Page Design: Implications of Memory, Strutre and Scent for Information Retrieval. Microsof Research. NIELSEN, Jakob. Usability engineering. Morgan Kaufmann, 1994 NORMAN, Donald A. O Design do dia-a-dia. Rocco, 2ª ed.,2003 ROSENFELD, Louis; MORVILLE, Peter. Information Architecture for de World Wide Web: Designing large-scale web sites. O'Reilly; 2ª ed., 2002. U.S. DEPARTMENT OF HEALTH AND HUMAN SERVICES. Research-Based Web Design & Usability Guidelines / Chapter 7: Navigation. Disponível em: http://www.usability.gov/pdfs/chapter7.pdf, 2006