Usabilidade de Interfaces e Arquitetura da Informação

Web Design - Avançado

1 Introdução

A World Wide Web é um sistema baseado em navegação, onde milhares de hyperlinks guiam os usuários em busca da informação. A arquitetura da informação projetada de forma deficiente prejudica a conclusão de tarefas executadas pelos usuários, que levam mais tempo e podem ser mal sucedidos, na busca pelo conteúdo.

A Internet oferece aos profissionais especializados um grande desafio: como projetar interfaces capazes de organizar tamanha quantidade de informação em um espaço tão pequeno de tela?Como exemplo, pode-se mencionar o Google, maior ferramenta de busca da rede, que indexa atualmente mais de 3 bilhões de ocorrências.

Para que esta questão seja resolvida, torna-se necessária a utilização de formas auxiliares de navegação, dando suporte aos usuários de forma a oferecer opções de deslocamento diferentes dos convencionais “vá para a página x”, ou simplesmente, link “página x”, além de posicioná-los em relação a estrutura organizacional em que se encontram.

A navegação estrutural surgiu para diminuir estas deficiências, possibilitando que as pessoas tenham controle sobre sua localização, possam pular etapas e tenham uma visualização da forma como a informação está estruturada no website. Apesar de não ser a solução para todos os problemas de navegação, esta ferramenta cumpre um papel interessante no seu funcionamento, principalmente pela simplicidade de desenvolvimento e pouco espaço necessário para implementação.

2 A Navegação pelo hipertexto

A capacidade de utilização de zonas de salto é a função mais básica da Internet e sua característica primordial, possibilitando o acesso as informações de forma não linear.

Padovani (1998), acredita que existam dois pontos de consenso sobre a definição 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 rápido a informação na medida em que permitem aos usuários seguir às zonas de salto rapidamente.

Nielsen (2000), defende que as interfaces de navegação precisam ajudar a responder as três perguntas fundamentais dos usuários:

  • “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 não será entendida, o que tornará muito difícil concluir se o link enviou o usuário para o lugar desejado.

Krug (2001) acrescenta mais três funções importantes da navegação:

  • Revelar o conteúdo do site;
  • Explicar como o site deve ser usado (dizendo implicitamente por onde começar e qual serão as suas opções);
  • Gerar confiança por parte dos usuários, o que certamente é um fator determinante para futuros retornos.

3 Convenções de navegação

Nielsen (1999) criou uma “Lei da Experiência dos Usuários na Web”, onde afirma que as pessoas gastam mais tempo em “outros” sites. Com isso, tudo que fosse uma convenção 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 consistência, como por exemplo a encontrada em programas utilizados na plataforma Windows(que seguiu o exemplo dado pelas interfaces do Macintosh). Uma série de padrõessão 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 utilização, poupando tempo precioso dos usuários. Se cada software tivesse sua linguagem própria, as dificuldadesseriam muito maiores.

O mesmo Nielsen (1999) afirma que com a padronização do design, assegura-se que os usuários entendam a mensagem com mais facilidade.

Na Internet essa padronização não existe, mas passados alguns anos, certas convenções(fig. 1) já são utilizadas e respeitadas em uma série de websites.

Além das convenções relacionadas à arquitetura da informação, padrões de formatação de conteúdo também são muito úteis para agilizar o acesso as informações.

Em pesquisa realizada em 2002,Jakob Nielsen mostra que 55% dos websites disponibilizam as informações institucionais em links “About (nome da empresa)”, 21% como “About Us”, 7% como “Company Information” e 5% como “Who We Are”. Portanto, uma melhor solução para o suposto site de uma empresa hipotética Acme, onde o link institucional se chamava “Who we are”, seria mudar a nomenclatura para “About Acme”. Este tipo de estudo enumera uma série de formas comuns de se intitular determinados serviços, possibilitando que os responsáveis pelos projetos utilizem uma nomenclatura clara.

Outra convenção já adotada pela grande maioria dos websites, e com a qual os usuários mais experientes tem boa familiarização é a presença de um link para a home em todas as páginas (menos na própria home), localizado ao lado da marca da empresa, ou simplesmente incluído na própria assinatura visual da companhia.

O mesmo Nielsen (2000) classifica os links que podem ser usados em uma página da seguinte forma:

  • Links Embutidos: textos sublinhados que indicam a existência de “mais informações” sobre um tópico qualquer.
  • Links Associativos: usados para dar aos usuários dicas de “consulte também”, sobre páginas que podem interessar.
  • Links Estruturais: links que apontam sistematicamente a outros níveis da estrutura do site, bem como irmãos e filhos em uma hierarquia.

Estes links denominados “estruturais” estão diretamente relacionados a navegação estrutural, e serão o tema tratado a seguir:

Breadcrumbs: Uma forma de estruturar a navegação

Devido a essa grande quantidade de informação, e principalmente a necessidade de localizar os usuários dentro da organização estrutural do site, agilizando a realização das tarefas, uma forma interessante de se auxiliar a navegação que vem sendo muito utilizada por diversos websites é a utilização dos chamados “Breadcrumb Trails”, ou “Caminhos de Migalhas de Pão” (fig. 2) se traduzidos literalmente.

Este recurso tem duas principais funções como objetivo: Possibilitar aos usuários saltos a diferentes níveis de informação diminuindo etapas e agilizando o acesso ao conteúdo, e localizar os usuários dentro da arquitetura do site, mapeando sua estrutura, de forma a representar a página em que ele se encontra juntamente com a “profundidade” da mesma em relação a homepage.

Esta representação textual composta de links normalmente se encontra no espaço 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 estivéssemos na página de “dissertações e teses de 2002”, os Breadcrumbs poderiam estar representados da seguinte forma: home > pós-graduação > dissertações e teses > 2002,sendo que todas as palavras, exceto “2002”,seriam links para as respectivas sessões. Como o usuário se encontraria na página das dissertações e teses de 2002, não haveria necessidade de link na última etapa da estrutura, representada pelo elemento “2002”.

Hoje em dia, podemos ver o recurso das “Migalhas de Pão” não só no ambiente web, mas também em programas como o Macromedia Flash (fig. 3), onde o recurso é utilizado para facilitar a velocidade de transição entre os editores de imagens, grupos, botões e animações.

Alguns profissionais também costumam usar a navegação estrutural na barra de título dos websites, o que utiliza apenas uma das características do recurso (localização), mas funciona de forma eficiente por gerar um link para organização dos favoritos (bookmarks do browser) de forma precisa, além de não ocupar nenhum tipo de espaço extra na tela (fig. 4).

Acredita-se que o nome “Breadcrumb” tenha sido batizado pela WebTC, uma empresa norte americana especializada em e-learning, com representação em diversos países.

A denominação pode parecer um tanto quanto confusa, mas trata-se de uma referência ao conto de fadas de João e Maria, quando o protagonista jogava migalhas de pão no chão paramarcar o caminho percorrido pela floresta e não se perder na volta para casa.

Um ponto interessante: assim como na história, onde os pássaros comem as migalhas, os links já visitados (aqueles que mudam de cor), depois de algum tempo, deixam de ter a cor diferente. Isto ocorre graças a exclusão dos arquivos do histórico de páginas visitadas da internet.

Boas práticas para a utilização

Krug (2001), cita o site “About.com” como uma ótima referência para boa utilização desta forma de navegação estrutural. Segundo o autor, uma boa organização das “Migalhas de Pão” deve seguir as seguintes especificações:

1. Colocá-las no alto: acredita-se que o posicionamento na parte superior do site, colado à margem, faça com que a navegação seja realmente encarada como um acessório, como números das páginas de um livro ou de uma revista. Quando as “Migalhas de Pão” são posicionadas muito abaixo, elas podem entrar em conflito com a navegação primária;

2. Utilização do sinal “>” entre os níveis: depois de experiências de tentativa e erro, concluiu-se que o melhor separador entre os níveis de navegação é o sinal em questão, apesar dos também muito utilizados “:” e “/”. O sinal “>” é mais claro à medida que sugere visualmente o movimento pelos níveis.

3. Tipografia em corpo pequeno: é importante para que fique bem claro que se trata de uma navegação de menor importância, como um acessório;

4. Uso da frase “Você está aqui”: apesar da maioria dos usuários entender o sentido das “Migalhas de Pão”, não atrapalha torná-las auto-explicativas;

5. Colocar o ultimo item em negrito: o último elemento da lista deve ser a página em que o usuário se encontra. Com a utilização do negrito, o texto tem o destaque necessário;

6. Não utilizar o último item como nome da página: não deixar de identificar a localização do usuário simplesmente pela já existência do recurso de navegação estrutural. Alguns sites tentam aumentar o corpo do último elemento em detrimento a uma segunda identificação. Krug (2001) acredita que esta utilização seja deficiente devido as expectativas dos usuários de encontrar identificações ao centro ou à esquerda das páginas.

Categorização dos Breadcrumbs

O recurso de navegação estrutural costuma funcionar basicamente desta forma, mas o nome Breadcrumb não é preciso para todos os casos de sua ocorrência, pois os usuários não percorrem necessariamente o caminho que os arquitetos da informação consideram ideal para chegar a determinadas páginas, o que torna o conceito de “Migalhas de Pão”, da fábula, errôneo.

O site Looksmart (www.looksmart.com) é citado por Nielsen (2000) e Krug (2001) por fornecer diferentes possibilidades de utilização dos Breadcrumbs. Além de utilizar o recurso em sua forma de apresentação maistradicional, ele também oferece outras alternativas de possíveis caminhos a serem seguidos para o alcance de determinada página, isto porquê o Looksmart possui páginasinternas, resultantes de convergências de uma série de caminhos diferentes.

Keith Instone, arquiteto da informação e membro do Time de Estratégia para Interfaces com o Usuário da IBM, de forma a separar os diferentes tipos de Breadcrumbs, os classifica em três categorias: Location Breadcrumbs (Breadcrumbs de Localização), Path Breadcrumbs (Breadcrumbs de Caminho) e Attribute Breadcrumbs (Breadcrumbs de Atributo).

Location Breadcrumbs (Breadcrumbs de Localização)

São a forma mais simples e mais utilizada de navegação estrutural (fig. 5), justamente por ter uma implementação extremamente simples. Mostram aos usuários sua atual localização em determinada página e em relação a estrutura do website, mas não como eles chegaram até lá. Este tipo de recurso também era chamado de “Mapa de Profundidade” (Depth Map) para que se distinguisse dos Breadcrumbsreais, que realmente são caminhos percorridos pelos usuários (classificados como Path Breadcrumbs).

Éa representação mais adequada do nome “Migalhasde Pão”, em virtude da metáfora da história de João e Maria. O texto da navegação estrutural é necessariamente o caminho percorrido pelo usuário, e não uma representação pré-determina da de um possível caminho. Em outras palavras, resultados iguais encontra dos por caminhos diferentes possuem Breadcrumbstão precisos quanto as últimas páginas visitadas.

Esta forma de suporte a navegação só é possível em websites dinâmicos, dotados de páginas resultantes de uma programação mais elaborada. As aplicações devem obter os dados fornecidos pelos usuários (neste caso, as páginas já visitadas) e enviar a informação correspondente para a estrutura de Breadcrumbs. Sua apresentação é idêntica a forma dos Location Breadcrumbs, mas poderia moster diferentes “Migalhas de Pão”para páginas idênticas, como por exemplo:

  • Consulting > Services > Implementation > Service A
  • Consulting > Services > Optimization > Service A
  • Consulting > Services > Upgrade > Service A

Attribute Breadcrumbs (Breadcrumbs de Atributo)

São as Migalhas de Pão que não representam toda a página, mas atributos dela. Representam informações de caminho, com formatação de Breadcrumb Trail, que normalmente se encontram na base da página. Esta representação possui a peculiaridade de não oferecer zonas de salto em cada item da estrutura, mas sim um link simples para a página procurada.

Este tipo de recurso é muito encontrado em sites de e-commerce, e faz parte da estrutura de busca do Google (fig. 6).

4 A navegação estrutural funciona?

Pouco se sabe sobre a eficiência real da utilização dos Breadcrumbs. Ainda se faz necessária uma maior quantidade de experimentos para saber ao certo até onde os links estruturais são eficientes.

Bowler, Ng e Schwartz (2001), da Universidade de Maryland, concluíram que a navegação pelas “Migalhas de Pão” auxiliam os usuários a conseguir navegar e buscar informação, 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 condições reais de uso, os Breadcrumbs eram realmente utilizados, assim como os botões de navegação do browser(back, barras de navegação, busca, etc.).

Os resultados não foram exatamente os esperados. Apesar de 89% dos usuários terem lembrado de ter visto as “Migalhas de Pão” nos sites, sua utilização foi abaixo do esperado. Apesar destes resultados, os autores comentam que futuros estudos deveriam investigar se os usuários entendem o propósito da navegação estrutural, e se uma vez aprendido o sentido, auxilia ou não na navegação e na localização dentro da estrutura organizacional do site

Lazar e Eisenbrey (2000), realizaram pesquisas semelhantes as desenvolvidas pela SURL. Eles acreditavam que, tendo-se websites praticamente idênticos, mas diferenciados pela presença ou ausência da navegação estrutural, o comparativo entre a velocidade de realização dastarefasteria como resultado uma paridade de valores, com uma diferença irrelevante entre as performances.

Para surpresa dos pesquisadores, os testes mostraram o contrário. Ocorreu uma grande diferença de desempenho no teste em que quase a totalidade dos alunos do departamento da universidade participaram (cerca de 67), mostrando que o protótipo com a navegação estrutural foi bem mais eficiente se comparado com aquele que não utilizava o recurso. Foi observado também que, como poderia-se esperar, os usuários mais experientes se familiarizavam melhor com a navegação, tornando a velocidade de conclusão das tarefas ainda maior. Além dos resultados obtidos através das estatísticas, inúmeros comentários foram deferidos em favor dos Breadcrumbs, até mesmo por usuários que não costumam utilizar o recurso.

Nielsen (2000) acredita que os usuários irão constantemente ignorar a navegação estrutural, assim como concluído pelo estudo da SURL. Entretanto, defende que os sujeitos irão por algumas vezes percebê-la, principalmente quando estiverem interessados em entender como funciona determinado website. Segundo Nielsen, as páginas que não possuem os links estruturai-se tornam órfãs, que não estão contextualizadas, principalmente se considerarmos que grande parte dos acessos ocorrem por mecanismos de busca. Este tipo de ocorrência faz com que os usuários visitem o website por páginas internas antes de navegarem pela homepage.

Conclusão

Como visto, a importância da arquitetura da informação vem ganhando mais força à medida que maior quantidade de informação é disponibilizada na rede a cada dia, juntamente com o crescimento da quantidade de pessoas ligadas à Internet.

A utilização da navegação estrutural, seja ela por localização, caminho ou atributo, como visto anteriormente, promove uma boa possibilidade de melhora no desempenho e na facilidade de utilização dos websites.

Apesar de existirem ainda poucos estudos relacionados ao assunto (principalmente relacionado ao nível de compreensão do recurso), podemos observar que os Breadcrumbs possuem pouca restrição por parte de pesquisadores e usuários, funcionando de forma eficiente, sobretudo para aqueles que se dispõe a entendê-los e utilizá-los como recurso de navegação.

Os estudos realizados indicam que a utilização da navegação estrutural tem um ótimo custo-benefício, tanto pela facilidade técnica de implementação, como pelo pequeno espaço que ocupa na tela. Sua apresentação na interface dos web sites representa um ótimo acessório para o auxílio da navegação, proporcionando, principalmente aos usuários mais experientes, a realização das tarefas mais rapidamente.

5 Conclusão

Como visto, a importância da arquitetura da informação vem ganhando mais força à medida que maior quantidade de informação é disponibilizada na rede a cada dia, juntamente com o crescimento da quantidade de pessoas ligadas à Internet.

A utilização da navegação estrutural, seja ela por localização, caminho ou atributo, como visto anteriormente, promove uma boa possibilidade de melhora no desempenho e na facilidade de utilização dos websites.

Apesar de existirem ainda poucos estudos relacionados ao assunto (principalmente relacionado ao nível de compreensão do recurso), podemos observar que os Breadcrumbs possuem pouca restrição por parte de pesquisadores e usuários, funcionando de forma eficiente, sobretudo para aqueles que se dispõe a entendê-los e utilizá-los como recurso de navegação.

Os estudos realizados indicam que a utilização da navegação estrutural tem um ótimo custo-benefício, tanto pela facilidade técnica de implementação, como pelo pequeno espaço que ocupa na tela. Sua apresentação na interface dos web sites representa um ótimo acessório para o auxílio da navegação, proporcionando, principalmente aos usuários mais experientes, a realização das tarefas mais rapidamente.