Usabilidade de Interfaces e Arquitetura da Informao: Navegao Estrutural. Interfaces Usability and Information Architecture: Structural Navigation.

Felipe Ferraz Pereira Memoria Mestrando em Design PUC-Rio felipe@fmemoria.com.br

Usabilidade, interao homem-computador, navegao

Em virtude do crescimento contnuo da quantidade de informao disponvel na Internet, problemas relacionados a navegao tornam-se uma constante para usurios e desenvolvedores. O artigo trata da navegao estrutural, um elemento que funciona como acessrio no processo hipertextual, responsvel pelo mapeamento da estrutura organizacional e disponibilizao de atalhos para diferentes pginas dos websites. Apresenta ainda o resultado de pesquisas que avaliaram o uso desta ferramenta.

Usability, human-computer interaction, navigation

Problems related to navigation are becoming more common as more information is being provided by the Internet. This article approaches the Structural Navigation, which works as an accessory element in hypertext, responsible for mapping the organizational structure and shortcuts between different website areas. It also presents researches results that evaluated the efficiency of that tool.

1. Introduo A World Wide Web um sistema baseado em navegao, onde milhares de hyperlinks guiam os usurios em busca da informao. A arquitetura da informao projetada de forma deficiente prejudica a concluso de tarefas executadas pelos usurios, que levam mais tempo e podem ser mal sucedidos, na busca pelo contedo. A Internet oferece aos profissionais especializados um grande desafio: como projetar interfaces capazes de organizar tamanha quantidade de informao em um espao to pequeno de tela? Como exemplo, pode-se mencionar o Google, maior ferramenta de busca da rede, que indexa atualmente mais de 3 bilhes de ocorrncias. Para que esta questo seja resolvida, torna-se necessria a utilizao de formas auxiliares de navegao, dando suporte aos usurios de forma a oferecer opes de deslocamento diferentes dos convencionais v para a pgina x, ou simplesmente, link pgina x, alm de posicion-los em relao a estrutura organizacional em que se encontram. A navegao estrutural surgiu para diminuir estas deficincias, possibilitando que as pessoas tenham controle sobre sua localizao, possam pular etapas

e tenham uma visualizao da forma como a informao est estruturada no website. Apesar de no ser a soluo para todos os problemas de navegao, esta ferramenta cumpre um papel interessante no seu funcionamento, principalmente pela simplicidade de desenvolvimento e pouco espao necessrio para implementao. 2. A Navegao pelo hipertexto A capacidade de utilizao de zonas de salto a funo mais bsica da Internet e sua caracterstica primordial, possibilitando o acesso as informaes de forma no linear. Padovani (1998), acredita que existam dois pontos de consenso sobre a definio de hipertexto: as zonas de salto apoiadas pelo computador ou base de dados e o fato de que hipertextos idealmente tendem a fornecer um acesso mais rpido a informao na medida em que permitem aos usurios seguir s zonas de salto rapidamente. Nielsen (2000), defende que as interfaces de navegao precisam ajudar a responder as trs perguntas fundamentais dos usurios: Onde estou? Onde estive? Onde posso ir?

Pode-se considerar que a primeira das perguntas mais importante. Se a resposta for insuficiente, a estrutura do website no ser entendida, o que tornar muito difcil concluir se o link enviou o usurio para o lugar desejado. Krug (2001) acrescenta mais trs funes importantes da navegao: Revelar o contedo do site; Explicar como o site deve ser usado (dizendo implicitamente por onde comear e qual sero as suas opes); Gerar confiana por parte dos usurios, o que certamente um fator determinante para futuros retornos. 3. Convenes de navegao Nielsen (1999) criou uma Lei da Experincia dos Usurios na Web, onde afirma que as pessoas gastam mais tempo em outros sites. Com isso, tudo que fosse uma conveno e utilizado na maioria destes outros sites seria fixado de forma muito forte em suas mentes. Seria muito bom se a grande maioria dos websites apresentassem uma consistncia, como por exemplo a encontrada em programas utilizados na plataforma Windows (que seguiu o exemplo dado pelas interfaces do Macintosh). Uma srie de padres so constantemente repetidos, como por exemplo os itens File,Edit, View e Window das barras superiores dos programas, ou os atalhos para copy (ctrl+c) e paste (ctrl+v). Isto facilita seu aprendizado e utilizao, poupando tempo precioso dos usurios. Se cada software tivesse sua linguagem prpria, as dificuldades seriam muito maiores. O mesmo Nielsen (1999) afirma que com a padronizao do design, assegura-se que os usurios entendam a mensagem com mais facilidade. Na Internet essa padronizao no existe, mas passados alguns anos, certas convenes (fig. 1) j so utilizadas e respeitadas em uma srie de websites.

Figura 1:Exemplo de organizao de navegao muito utilizada na Internet.

Alm das convenes relacionadas arquitetura da informao, padres de formatao de contedo tambm so muito teis para agilizar o acesso as informaes. Em pesquisa realizada em 2002, Jakob Nielsen mostra que 55% dos websites disponibilizam as informaes institucionais em links About (nome da empresa), 21% como About Us, 7% como Company Information e 5% como Who We Are. Portanto, uma melhor soluo para o suposto site de uma empresa hipottica Acme, onde o link institucional se chamava Who we are, seria mudar a nomenclatura para About Acme. Este tipo de estudo enumera uma srie de formas comuns de se entitular determinados servios, possibilitando que os responsveis pelos projetos utilizem uma nomenclatura clara. Outra conveno j adotada pela grande maioria dos websites, e com a qual os usurios mais experientes tem boa familiarizao a presena de um link para a home em todas as pginas (menos na prpria home), localizado ao lado da marca da empresa, ou simplesmente includo na prpria assinatura visual da companhia. O mesmo Nielsen (2000) classifica os links que podem ser usados em uma pgina da seguinte forma: Links Embutidos: textos sublinhados que indicam a existncia de mais informaes sobre um tpico qualquer. Links Associativos: usados para dar aos usurios dicas de consulte tambm, sobre pginas que podem interessar. Links Estruturais: links que apontam sistematicamente a outros nveis da estrutura do site, bem como irmos e filhos em uma hierarquia.

Estes links denominados estruturais esto diretamente relacionados a navegao estrutural, e sero o tema tratado a seguir: 4. Breadcrumbs: Uma forma de estruturar a navegao Devido a essa grande quantidade de informao, e principalmente a necessidade de localizar os usurios dentro da organizao estrutural do site, agilizando a realizao das tarefas, uma forma interessante de se auxiliar a navegao que vem sendo muito utilizada por diversos websites a utilizao dos chamados Breadcrumb Trails, ou Caminhos de Migalhas de Po (fig. 2) se traduzidos literalmente.

Hoje em dia, podemos ver o recurso das Migalhas de Po no s no ambiente web, mas tambm em programas como o Macromedia Flash (fig. 3), onde o recurso utilizado para facilitar a velocidade de transio entre os editores de imagens, grupos, botes e animaes.

Figura 3: Exemplo de Migalha de Po utilizado na barra superior do Macromedia Flash.

Figura 2: O diretrio do Yahoo (www.yahoo.com) provavelmente o primeiro contato dos usurios da Internet com os Breadcrumbs.

Alguns profissionais tambm costumam usar a navegao estrutural na barra de ttulo dos websites, o que utiliza apenas uma das caractersticas do recurso (localizao), mas funciona de forma eficiente por gerar um link para organizao dos favoritos (bookmarks do browser) de forma precisa, alm de no ocupar nenhum tipo de espao extra na tela (fig. 4).

Este recurso tem duas principais funes como objetivo: Possibilitar aos usurios saltos a diferentes nveis de informao diminuindo etapas e agilizando o acesso ao contedo, e localizar os usurios dentro da arquitetura do site, mapeando sua estrutura, de forma a representar a pgina em que ele se encontra juntamente com a profundidade da mesma em relao a homepage. Esta representao textual composta de links normalmente se encontra no espao superior dos websites, e na maioria dos casos, vem representada pelo sinal >, ou qualquer tipo de elemento que ilustre o conceito de continuidade. Para o site do Departamento de Artes da PUC-Rio por exemplo, se estivssemos na pgina de dissertaes e teses de 2002, os Breadcrumbs poderiam estar representados da seguinte forma: home > ps-graduao > dissertaes e teses > 2002, sendo que todas as palavras, exceto 2002, seriam links para as respectivas sesses. Como o usurio se encontraria na pgina das dissertaes e teses de 2002, no haveria necessidade de link na ltima etapa da estrutura, representada pelo elemento 2002.

Figura 4: O website da Rocha Design (www.rochadesign.com) utiliza os Breadcrumbs na barra de ttulo em todas as suas pginas.

Acredita-se que o nome Breadcrumb tenha sido batizado pela WebTC, uma empresa norteamericana especializada em e-learning, com representao em diversos pases. A denominao pode parecer um tanto quanto confusa, mas trata-se de uma referncia ao conto de fadas de Joo e Maria, quando o protagonista jogava migalhas de po no cho para marcar o caminho percorrido pela floresta e no se perder na volta para casa. Um ponto interessante: assim como na histria, onde os pssaros comem as migalhas, os links j visitados (aqueles que mudam de cor), depois de algum tempo, deixam de ter a cor diferente. Isto ocorre graas a excluso dos arquivos do histrico de pginas visitadas da internet. 4.1. Boas prticas para a utilizao Krug (2001), cita o site About.com como uma tima referncia para boa utilizao desta forma

de navegao estrutural. Segundo o autor, uma boa organizao das Migalhas de Po deve seguir as seguintes especificaes: 1. Coloc-las no alto: acredita-se que o posicionamento na parte superior do site, colado margem, faa com que a navegao seja realmente encarada como um acessrio, como nmeros das pginas de um livro ou de uma revista. Quando as Migalhas de Po so posicionadas muito abaixo, elas podem entrar em conflito com a navegao primria; 2. Utilizao do sinal > entre os nveis: depois de experincias de tentativa e erro, concluiu-se que o melhor separador entre os nveis de navegao o sinal em questo, apesar dos tambm muito utilizados : e /. O sinal > mais claro medida que sugere visualmente o movimento pelos nveis. 3. Tipografia em corpo pequeno: importante para que fique bem claro que se trata de uma navegao de menor importncia, como um acessrio; 4. Uso da frase Voc est aqui: apesar da maioria dos usurios entender o sentido das Migalhas de Po, no atrapalha torn-las auto-explicativas; 5. Colocar o ultimo item em negrito: o ltmo elemento da lista deve ser a pgina em que o usurio se encontra. Com a utilizao do negrito, o texto tem o destaque necessrio; 6. No utilizar o ltmo item como nome da pgina: no deixar de identificar a localizao do usurio simplesmente pela j existncia do recurso de navegao estrutural. Alguns sites tentam aumentar o corpo do ltmo elemento em detrimento a uma segunda identificao. Krug (2001) acredita que esta utilizao seja deficiente devido as expectativas dos usurios de encontrar identificaes ao centro ou esquerda das pginas. 4.2. Categorizao dos Breadcrumbs O recurso de navegao estrutural costuma funcionar basicamente desta forma, mas o nome Breadcrumb no preciso para todos os casos de sua ocorrncia,

pois os usurios no percorrem necessariamente o caminho que os arquitetos da informao consideram ideal para chegar a determinadas pginas, o que torna o conceito de Migalhas de Po, da fbula, errneo. O site Looksmart (www.looksmart.com) citado por Nielsen (2000) e Krug (2001) por fornecer diferentes possibilidades de utilizao dos Breadcrumbs. Alm de utilizar o recurso em sua forma de apresentao mais tradicional, ele tambm oferece outras alternativas de possveis caminhos a serem seguidos para o alcance de determinada pgina, isto porqu o Looksmart possui pginas internas, resultantes de convergncias de uma srie de caminhos diferentes. Keith Instone, arquiteto da informao e membro do Time de Estratgia para Interfaces com o Usurio da IBM, de forma a separar os diferentes tipos de Breadcrumbs, os classifica em trs categorias: Location Breadcrumbs (Breadcrumbs de Localizao), Path Breadcrumbs (Breadcrumbs de Caminho) e Attribute Breadcrumbs (Breadcrumbs de Atributo). 4.2.1. Location Breadcrumbs (Breadcrumbs de Localizao) So a forma mais simples e mais utilizada de navegao estrutural (fig. 5), justamente por ter uma implementao extremamente simples. Mostram aos usurios sua atual localizao em determinada pgina e em relao a estrutura do website, mas no como eles chegaram at l. Este tipo de recurso tambm era chamado de Mapa de Profundidade (Depth Map) para que se distinguisse dos Breadcrumbs reais, que realmente so caminhos percorridos pelos usurios (classificados como Path Breadcrumbs).

Figura 5: Exemplo de Location Breadcrumbs utilizado no site da Nielsen Norman Group (www.nngroup.com).

4.2.2. Path Breadcrumbs (Breadcrumbs de Caminho) a representao mais adequada do nome Migalhas de Po, em virtude da metfora da histtia de Joo e Maria. O texto da navegao estrutural necessariamente o caminho percorrido pelo usurio, e no uma

representao pr-determinada de um possvel caminho. Em outras palavras, resultados iguais encontrados por caminhos diferentes possuem Breadcrumbs to precisos quanto as ltimas pginas visitadas. Esta forma de suporte a navegao s possvel em websites dinmicos, dotados de pginas resultantes de uma programao mais elaborada. As aplicaes devem obter os dados fornecidos pelos usurios (neste caso, as pginas j visitadas) e enviar a informao correspondente para a estrutura de Breadcrumbs. Sua apresentao identica a forma dos Location Breadcrumbs, mas poderamos ter diferentes Migalhas de Popara pginas idnticas, como por exemplo: Consulting > Services > Implementation > Service A Consulting > Services > Optimization > Service A Consulting > Services > Upgrade > Service A 4.2.3. Attribute Breadcrumbs (Breadcrumbs de Atributo) So as Migalhas de Po que no representam toda a pgina, mas atributos dela. Representam informaes de caminho, com formatao de Breadcrumb Trail, que normalmente se encontram na base da pgina. Esta representao possui a peculiaridade de no oferecer zonas de salto em cada item da estrutura, mas sim um link simples para a pgina procurada. Este tipo de recurso muito encontrado em sites de e-commerce, e faz parte da estrutura de busca do Google (fig. 6).

navegar e buscar informao, assim como encontrar caminhos pela hierarquia do website. Lida, Huel e Pilcher (2003), da Software Usability Research Laboratory (SURL), do Departamento de Psicologia da Wichita State University, desenvolveram uma pesquisa que visava saber se em condies reais de uso, os Breadcrumbs eram realmente utilizados, assim como os botes de navegao do browser (back, barras de navegao, busca, etc.). Os resultados no foram exatamente os esperados. Apesar de 89% dos usurios terem lembrado de ter visto as Migalhas de Po nos sites, sua utilizao foi abaixo do esperado. Apesar destes resultados, os autores comentam que futuros estudos deveriam investigar se os usurios entendem o propsito da navegao estrutural, e se uma vez aprendido o sentido, auxilia ou no na navegao e na localizao dentro da estrutura organizacional do site. Lazar e Eisenbrey (2000), realizaram pesquisas semelhantes as desenvolvidas pela SURL. Eles acreditavam que, tendo-se websites praticamente idnticos, mas diferenciados pela presena ou ausncia da navegao estrutural, o comparativo entre a velocidade de realizao das tarefas teria como resultado uma paridade de valores, com uma diferena irrelevante entre as performances. Para surpresa dos pesquisadores, os testes mostraram o contrrio. Ocorreu uma grande diferena de desempenho no teste em que quase a totalidade dos alunos do departamento da universidade participaram (cerca de 67), mostrando que o prottipo com a navegao estrutural foi bem mais eficiente se comparado com aquele que no utilizava o recurso. Foi observado tambm que, como poderia-se esperar, os usurios mais experientes se familiarizavam melhor com a navegao, tornando a velocidade de concluso das tarefas ainda maior. Alm dos resultados obtidos atravs das estatsticas, inmeros comentrios foram deferidos em favor dos Breadcrumbs, at mesmo por usurios que no costumam utilizar o recurso. Nielsen (2000) acredita que os usurios iro constantemente ignorar a navegao estrutural, assim como concludo pelo estudo da SURL. Entretanto, defende que os sujeitos iro por algumas vezes

Figura 6: Resultado de busca do Google (www.google.com) para Pontifcia Universidade Catlica, exemplificando os Attribute Breadcrumbs.

5. A navegao estrutural funciona? Pouco se sabe sobre a eficincia real da utilizao dos Breadcrumbs. Ainda se faz necessria uma maior quantidade de experimentos para saber ao certo at onde os links estruturais so eficientes. Bowler, Ng e Schwartz (2001), da Universidade de Maryland, concluram que a navegao pelas Migalhas de Po auxiliam os usurios a conseguir

perceb-la, principalmente quando estiverem interessados em entender como funciona determinado website. Segundo Nielsen, as pginas que no possuem os links estruturais se tornam rfs, que no esto contextualizadas, principalmente se considerarmos que grande parte dos acessos ocorrem por mecanismos de busca. Este tipo de ocorrncia faz com que os usurios visitem o website por pginas internas antes de navegarem pela homepage. 6. Concluso Como visto, a importncia da arquitetura da informao vem ganhando mais fora medida que maior quantidade de informao disponibilizada na rede a cada dia, juntamente com o crescimento da quantidade de pessoas ligadas Internet. A utilizao da navegao estrutural, seja ela por localizao, caminho ou atributo, como visto anteriormente, promove uma boa possibilidade de melhora no desempenho e na facilidade de utilizao dos websites. Apesar de existirem ainda poucos estudos relacionados ao assunto (principalmente relacionado ao nvel de compreenso do recurso), podemos observar que os Breadcrumbs possuem pouca restrio por parte de pesquisadores e usurios, funcionando de forma eficiente, sobretudo para aqueles que se dispe a entend-los e utiliz-los como recurso de navegao. Os estudos realizados indicam que a utilizao da navegao estrutural tem um timo custo-benefcio, tanto pela facilidade tcnica de implementao, como pelo pequeno espao que ocupa na tela. Sua apresentao na interface dos websites representa um timo acessrio para o auxlio da navegao, proporcionando, principalmente aos usurios mais experientes, a realizao das tarefas mais rapidamente. 7. Bibliografia
Bowler D., Ng W. & Schwartz P. 2001. Navigation bars for hierarchical websites. Shore 2000 Student HCI Online Research Experiments, Maryland. Department of Computer Science. Disponvel em: http://www.otal.umd.edu/SHORE2001/navBar/index .html. Acessado em 15 de fev. 2003. Instone, K. 2002. Location, Path & Attribute Breadcrumbs. Disponvel em:

http://keith.instone.org/breadcrumbs/Instone-BreadcrumbsIASummit.pdf. Acessado em 21 de fev. 2003. Instone K. 2002. An Open Discussion on Web Navigation. Disponvel em: http://keith.instone.org/presentations/InstoneWebNavigation-20020916.pdf. Acessado em 21 de fev. 2003. KRUG, Steve. No me faa pensar: Uma abordagem do bom senso navegabilidade da Web. So Paulo: Market Books, 2001. 208 p. Lazar N. & Eisenbrey M.. 2000. Website Structural Navigation. Shore 2000 Student HCI Online Research Experiments, Maryland. Department of Computer Science. Disponvel em: http://www.otal.umd.edu/SHORE2000/webnav/inde x.html. Acesso em 21 de fev. 2003. Lida B., Hull S. & Pilcher K.. 2003. Breadcrumb Navigation: An Exploratory Study of Usage. Usability News, Wichita, Software Usability Research Laboratory. Disponvel em: http://wsupsy.psy.twsu.edu/surl/usabilitynews/51/bre adcrumb.htm. Acesso em 7 de fev. 2003. Monteiro E. 2003. Como explorar melhor o mais completo site de buscas da Internet, eleito a Marca do Ano de 2002. O Globo, Rio de Janeiro, 17 fev. Informtica etc., p.1. NIELSEN, Jakob. Homepage Usabilidade: 50 Websites Desconstrudos. Rio de Janeiro: Campus, 2002. 315 p. Nielsen J. 2000. Is Navigation Useful? Disponvel em: http://www.useit.com/papers/icab.html. Acessado em 21 de fev. 2003. Nielsen J. 1999. Do Interface Standards Stifle Design Creativity? Disponvel em: http://www.useit.com/alertbox/990822.html. Acessado em 17 de mar. 2003. NIELSEN, Jakob. Projetando Websites. Rio de Janeiro: Campus, 2000. 416 p. PADOVANI, Stephania. Avaliao Ergonmica de Sistemas de Navegao em Hipertextos Fechados. Rio de Janeiro, 1998. 247 p. Dissertao de Mestrado. PUC-Rio, Pontifcia Universidade Catlica do Rio de Janeiro. PALM BEACH COMMUNITY COLLEGE. What are Bread Crumbs and How they are Used? Disponvel em: http://www.pbcc.edu/faculty/ottp/WebCT_site/6_Navig ation/6navigate3.htm. Acessado em 11 de fev. 2003. SANTOS, Robson. Usabilidade de Interfaces e Arquitetura da Informao: Alguns Aspectos da Organizao de Contedo para o Meio Digital. In: Anais Abergo, Gramado: 2000. 6 p.