13
Esquemas de Navegação Entenda como é possível descrever a estrutura de navegação de um website em tempos de “Ajax” Por Ricardo Nogueira Maekawa Menu esquerdo, menu direito, barrinha lateral, sub-menu. É comum ter que apelar para termos desse tipo na hora de explicar a lógica usada para estruturar e fornecer acesso ao conteúdo de um website. Convenhamos: termos desse tipo não são elegantes e nem eficientes. Na maior parte das vezes, esse ordenamento de coisas é feito de maneira absolutamente intuitiva, e simplesmente não faz uso de vocabulário apropriado. Mas será que esse vocabulário existe? É possível trabalhar com termos capazes de relacionar uma determinada taxonomia e suas características hierárquicas à forma com que devem ser apresentadas na interface? A resposta é sim. A arquitetura da informação é um campo do conhecimento que se preocupa, entre outras coisas, com a definição de um vocabulário capaz de atender esse tipo de situação. Trata-se de uma poderosa ferramenta, capaz de prover elementos que permitem que toda navegação de um website seja descrita em palavras com rapidez, precisão e eficiência. A descrição de um esquema de navegação resulta em um rico vocabulário que permite conectar conteúdo e usuários. Apesar das bibliografias especializadas já usarem nomes para definir tipos de sistemas de navegação que podem existir em um website, é bastante incomum ler alguma crítica ou até mesmo participar de um diálogo onde esses termos estão bem sedimentados entre todos os participantes. Cada um inventa o nome que quer: menu superior, menuzinho esquerdo, menuzinho direito... Não há nada de errado nisso. E por vezes, a lógica empregada por um projetista pode estar inteiramente correta, porém a ausência de um padrão nada mais faz que tornar a produção mais lenta, uma vez que contratantes, contratados e sub-contratados precisam usar muitas palavras para se referir à certos objetos. Importância das estruturas de navegação Foi na época das grandes navegações nos séculos XIV e XV que o tema da precisão das ferramentas de navegação ficaram no foco das atenções. O tema serviu até de inspiração para o poeta Fernando Pessoa elaborar a sua célebre frase “Navegar é preciso, viver não é preciso” –preciso nesse caso, tem sentido de precisão, e não de necessidade. Uma falha no equipamento ou um erro de cálculo e uma embarcação inteira podia se perder no mar e morrer. No mundo físico, dependendo do contexto, isso ainda pode acontecer. Ainda hoje, tem gente que se perde no deserto do Novo México, por exemplo, tentando ir para os Estados Unidos, e quase morre. Ou morre mesmo. Como dizem Peter Morville e Louis Rosenfeld em “Information Architecture”, não há dúvidas: estar perdido é sempre uma coisa ruim. Não dá para discordar disso. Estar perdido é algo que sempre está associado à confusão, frustração, raiva e medo. Em resposta à esse perigo, a humanidade tem desenvolvido ferramentas para se prevenir

Esquemas de Navegação

Embed Size (px)

DESCRIPTION

Artigo trata de mostrar a formação de alguns jargões destinados à tornar mais efetivo o desenvolvimento de estruturas de navegação em projetos de produção de websites.

Citation preview

Page 1: Esquemas de Navegação

Esquemas de Navegação Entenda como é possível descrever a estrutura de navegação de um website em tempos de “Ajax”

Por Ricardo Nogueira Maekawa

Menu esquerdo, menu direito, barrinha lateral, sub-menu. É comum ter que apelar para termos desse tipo na hora de explicar a lógica usada para estruturar e fornecer acesso ao conteúdo de um website. Convenhamos: termos desse tipo não são elegantes e nem eficientes. Na maior parte das vezes, esse ordenamento de coisas é feito de maneira absolutamente intuitiva, e simplesmente não faz uso de vocabulário apropriado. Mas será que esse vocabulário existe? É possível trabalhar com termos capazes de relacionar uma determinada taxonomia e suas características hierárquicas à forma com que devem ser apresentadas na interface?

A resposta é sim. A arquitetura da informação é um campo do conhecimento que se preocupa, entre outras coisas, com a definição de um vocabulário capaz de atender esse tipo de situação. Trata-se de uma poderosa ferramenta, capaz de prover elementos que permitem que toda navegação de um website seja descrita em palavras com rapidez, precisão e eficiência. A descrição de um esquema de navegação resulta em um rico vocabulário que permite conectar conteúdo e usuários.

Apesar das bibliografias especializadas já usarem nomes para definir tipos de sistemas de navegação que podem existir em um website, é bastante incomum ler alguma crítica ou até mesmo participar de um diálogo onde esses termos estão bem sedimentados entre todos os participantes. Cada um inventa o nome que quer: menu superior, menuzinho esquerdo, menuzinho direito... Não há nada de errado nisso. E por vezes, a lógica empregada por um projetista pode estar inteiramente correta, porém a ausência de um padrão nada mais faz que tornar a produção mais lenta, uma vez que contratantes, contratados e sub-contratados precisam usar muitas palavras para se referir à certos objetos.

Importância das estruturas de navegação

Foi na época das grandes navegações nos séculos XIV e XV que o tema da precisão das ferramentas de navegação ficaram no foco das atenções. O tema serviu até de inspiração para o poeta Fernando Pessoa elaborar a sua célebre frase “Navegar é preciso, viver não é preciso” –preciso nesse caso, tem sentido de precisão, e não de necessidade. Uma falha no equipamento ou um erro de cálculo e uma embarcação inteira podia se perder no mar e morrer. No mundo físico, dependendo do contexto, isso ainda pode acontecer. Ainda hoje, tem gente que se perde no deserto do Novo México, por exemplo, tentando ir para os Estados Unidos, e quase morre. Ou morre mesmo.

Como dizem Peter Morville e Louis Rosenfeld em “Information Architecture”, não há dúvidas: estar perdido é sempre uma coisa ruim. Não dá para discordar disso. Estar perdido é algo que sempre está associado à confusão, frustração, raiva e medo. Em resposta à esse perigo, a humanidade tem desenvolvido ferramentas para se prevenir

Page 2: Esquemas de Navegação

desse tipo de situação. Ferramentas que garantem sempre encontrar o caminho de volta para casa. Das migalhas-de-pão de Joãozinho e Maria, passando pelo compasso e o astrolábio, a bússola, os mapas, a sinalização das ruas, e os sistemas de posicionamento global por satélite, as pessoas tem demonstrado grande ingenuidade no design e no uso de ferramentas de navegação e estratégias de wayfinding.

Na web, raramente navegação é questão de vida ou morte. Entretanto, perder-se em um site pode causar confusão e frustração. Esse tipo de sentimento não é nada bom em um ambiente como a Internet, onde um usuário pode abandonar o seu serviço com um único clique e isso pode representar prejuízo financeiro. Porém, um esquema de navegação bem montado, baseado em uma taxonomia consistente, pode reduzir as chances disso acontecer.

Porque usar um sistema de nomenclaturas

A grande vantagem de se adotar um vocabulário apropriado para o desenvolvimento de um esquema de navegação é o aumento na capacidade de trocar informações complexas em menos tempo. A lógica é a mesma que faz com que todas as disciplinas acabem fazendo o uso de jargões que por vezes, acabam por tornar-se herméticos demais, como no caso da medicina, da física, entre outros. No entanto, apesar do risco de tornar o papo inacessível para não iniciados, vale mais a pena dedicar algumas horas explicando o significado de algumas palavras no início de um projeto, do que ter que se referir aos diversos tipos de “menu” que compõe um determinado website de forma vaga, imprecisa, deselegante e ineficiente.

De um lado você tem todo o conteúdo que precisa ser disponibilizado no website. De outro, você tem a padronização dos termos para os diferentes sistemas de navegação que podem ocorrer na interface. O trabalho torna-se então dinâmico, fluido e acaba acontecendo em cima de uma estrutura lógica que permite desenvolver as idéias sem que ocorram efeitos colaterais significativos em caso de mudanças.

Em um website pode haver diversos sistemas de navegação atuando em conjunto, fornecendo ao usuário a experiência de navegar em diversos tipos de navegação. Uma determinada página pode ser acessada através de uma navegação matricial, e dentro dela, em sua micro-arquitetura, apresentar navegação linear e orgânica, por exemplo. Todo esse conjunto de sistemas de navegação, cada qual com seu grau de persistência e importância, pode ser chamado de esquema de navegação.

Tipos e Sistemas de Navegação: cada livro uma língua Dois livros sobre arquitetura da informação são proeminentes ao tratar e tentar estabelecer um padrão para nomenclatura dos esquemas de navegação em interfaces digitais. Um deles, escrito pela dupla de biblioteconomistas Peter Morville e Louis Rosenfeld, chama-se “Information Architeture”. O outro, escrito pelo Jornalista e inventor do termo “Ajax” Jesse James Garret, chama-se “The Elements of User Experience”. Existe ainda uma tentativa no sentido de fazer referência aos sistemas de navegação no livro “Don´t Make me Think”, de Steve Krug, mas o que ele diz ali é algo muito insipiente. Os livros são

Page 3: Esquemas de Navegação

antigos. O mais novo é o de Garret, publicado em 2002. “Information Architecture”, por sua vez, foi reeditado recentemente. Obviamente existem livros e livros que tratam do assunto. É importante saber que os livros citados foram escolhidos como referencia para esse artigo por estarem entre os mais disseminados na área. Por isso, a via está pavimentada para falarmos a partir deles. Fora o livro de Krug, que utiliza uma sistemática de nomenclaturas bastante pobre e particular -e deficitária, os outros dois chegam a utilizar mesmos nomes para quase tudo, mas em metade dos casos, a definição apresenta sentidos diferentes. Isso se deve

essencialmente ao fato de que Garret visualiza um sistema de navegação a mais que Morville e Rosenfeld e ainda ensaia a criação de um outro. Esse sistema a mais obriga uma readequação na definição de outros sistemas. Por exemplo, enquanto um mapa de site, para Lou & Morville é enquadrado como um sistema de navegação Suplementar; para Garret, esse objeto é um dispositivo de navegação remota, que se apresenta no contexto da navegação de Cortesia. Garret por sua vez, entende por navegação Suplementar, um agrupamento de “links” de atalho que dão suporte à navegação a partir de um tipo de navegação orgânico-matricial, apresentado por meio de facetas.

Por falar em tipos de navegação, ai está um ótimo suporte para um melhor entendimento dos sistemas de navegação. É preciso entender os tipos de navegação derivados de determinadas estruturas que são criadas. E mais uma vez temos Jesse James Garret identificando uma série de possibilidades a mais que Morville e Rosenfeld. Para Morville e Rosenfeld, os sistemas de navegação podem ser montados de modo a fornecer ao usuário a possibilidade de navegar de três formas: linearmente, hierárquicamente( cima para baixo, baixo para cima ) e hipertextualmente. Para Garret, as possibilidades são a navegação hierárquica( cima para baixo, baixo para cima ), a sequencial, a matricial, e a orgânica. Todos esses tipo de navegação podem ocorrer de maneira cruzada, em diversos pontos de um esquema de navegação. A navegação linear ou seqüencial é aquela que você pode avançar ou recuar, como durante a instalação de um software no seu Pc. Navegação hierárquica é quando você clica num item e ele te apresenta sub-opções de navegação. Nesse caso, você pode estar frente à um atalho que o leva diretamente à um ponto mais profundo da hierarquia. Nesse caso, diz-se que esse se trata de uma abordagem de baixo para cima ( bottom-to-up ). A navegação orgânica para Garret, é a mesma que Morville e Rosenfeld chamam de hipertextual. Mas a definição de Garret, também permite outras aplicações para o termo. É aquela que você vê a torto e à direito na Wikipedia, que são links encaixados no meio de um texto. Por último, a navegação matricial é quando você se depara com uma coleção de links todos expostos ao mesmo tempo e que são capazes de te levar para qualquer ponto do site. Um mapa de site, por exemplo, apresenta uma navegação matricial. Voltando a falar dos sistemas de navegação, em algumas definições, “Information Architecture” e “The Elements of User Experience” quase concordam. Isso acontece, por exemplo, na definição do sistema de navegação global. Enquanto Rosenfeld & Morville afirmam que a navegação global deve ser totalmente persistente, Garret diz que ela pode

Page 4: Esquemas de Navegação

não ser totalmente persistente, pois, para ele, nem sempre todos os componentes de um site “cabem” na navegação global.

Das nomenclaturas utilizadas por Morville e Rosenfeld, que são quatro (Sistemas de nagegação Global, Local, Contextual e Suplementar) , em dois casos (navegação Local e Contextual) nome e definição batem com o livro de Garret. Nos outros dois casos, como já foi citado, os significados são diferentes. Essa diferença se deve ao fato da proposta de Garret enxergar um sistema a mais de navegação que ele chama de navegação de Cortesia. Isso torna a proposta de Garret mais completa, com maior capacidade de atender com mais precisão às necessidades de projeto de websites. Agora você vai conhecer as nomenclaturas de Jesse James Garret para os sistemas de navegação.

Box:

Livro Autor Tipos de Navegação Sistemas de Navegação

The Elements of User Experience

Jesse James Garret

Hierárquica( cima para baixo, baixo para cima ), Sequencial, Matricial, Orgânica.

Sistema de navegação Global, Sistema de navegação Local, Sistema de navegação Contextual, Sistema de navegação Suplementar

Information Architecture

Louis Rosenfeld & Peter Morville

Linear, Hierárquica( cima para baixo, baixo para cima ), Hipertexto.

Sistema de navegação Global, Sistema de navegação Local, Sistema de navegação Contextual, Sistema de navegação Suplementar, Sistema de navegação de Cortesia

Sistema de navegação Global

Fornece a pontos-chave do site, que por sua vez permitem os usuários façam uma varredura em todo o site. O uso do termo ”global” aqui não necessariamente quer dizer que esse sistema de navegação aparece em todas as páginas do site –apesar de que, segundo Garret, isso não é uma má idéia. ( o termo “persistente” se refere a elementos de

Page 5: Esquemas de Navegação

navegação que aparecem ao longo de todo o site; novamente, é preciso ter mente que elementos persistentes não são necessariamente globais. )

Sistema de navegação Local

Dá aos usuários a possibilidade de acesso ao que está “próximo” na arquitetura. Estritamente em uma arquitetura hierárquica, a navegação local é responsável pelo acesso à páginas similares e filhas. Se sua arquitetura é feita para refletir o modo com que os usuários enxergam o conteúdo do site, a navegação local tipicamente vai ter mais uso que outros sistemas de navegação.

Sistema de navegação Suplementar

São atalhos para conteúdos relacionados que não são prontamente atendidos pela navegação local ou global. Esse tipo de sistema de navegação oferece algum benefício de classificação facetada ( permite aos usuários mudar o foco de sua exploração do conteúdo sem ter que começar do começo ) , ao mesmo tempo, permite que o website mantenha sua arquitetura primária.Sistema de navegação contextual

É encaixada no contexto da própria página. Esse tipo de navegação –por exemplo, um hyperlink com texto de uma página –frequentemente é sub-utilizado. Na maior parte das vezes, o momento em que os usuários decidem que eles precisam de

Page 6: Esquemas de Navegação

um pedaço a mais de informação é quando eles estão lendo um texto. Em vez de forçá-los à procurar na interface o elemento de navegação mais correto – ou mais errado, você pode colocar o link na própria palavra que precisa de informações complementares.

Sistema de navegação de cortesia

. Dá acesso a itens que os usuários não precisam em uma base regular, mas que são comumente percebidos como uma conveniência. No mundo físico, uma loja de varejo vai usualmente marcar suas horas de operação ( entrada e saída de seus funcionários, por exemplo ) . Para os clientes, dificilmente essa informação é algo que pode ajudar em alguma coisa. Na web, links para informações de contatos. Formulários de feedback e políticas de uso são comumente encontrados na navegação de cortesia.

TDI, MDI, SDI: GUI Design Patterns, “Ajax” e Arquitetura da Informação

No fim dos anos 1990, quando a internet ganhou força e começou a ser implantada no mundo todo de maneira sistemática e intensiva, as interfaces gráficas de usuário já estavam em nível relativamente avançado de desenvolvimento. Mac/Os e o Windows já estavam por ai e em edições relativamente avançadas. Afinal, passara-se 20 anos desde a criação da interface Xerox PARC, que marcou a criação do primeiro sistema operacional dotado de "GUI". GUI" é abreviação para Graphical User Interface e traduz-se em uma interface que permite a interação humano-computador por meio de ícones e controles associados à texto. Um sistema dotado de GUI permite que um usuário utilize um "dispositivo ponteiro", como o mouse por exemplo, para manipular esses icones e controles. Antes, o usuário era obrigado a interagir com o computador por meio de linhas de comando.

20 anos de desenvolvimento é um tempo considerável. A área de desenvolvimento de software já usava e abusava dos “GUI” Design Patterns, onde três padrões tornaram-se capazes de atender a grande maioria das necessidades dos softwares que estavam sendo desenvolvidos. Esses três padrões ficaram conhecidos como “Multi-Document Interface”(MDI), “Single Document Interface” e “Tabbed Document Interface”(TDI).

O padrão MDI ( http://en.wikipedia.org/wiki/Multiple_document_interface ) é um tipo de interface onde múltiplos documentos podem ser abertos dentro de uma única janela. Cada um desses documentos, por sua vez, abrem-se cada qual em uma janela, dentro da janela “pai”. Um exemplo de aplicação que usa um padrão desse tipo é o Adobe Photoshop.

Page 7: Esquemas de Navegação

Adobe Photoshop: Multi-Document Interface

O padrão SDI ( http://en.wikipedia.org/wiki/Single_document_interface ) é um método de organização de interface gráfica onde cada documento que é aberto pela aplicação está sempre associado à inicialização de uma nova instancia da aplicação. Um exemplo bastante popular do uso desse tipo de interface é o Internet Explorer 6.0.

Page 8: Esquemas de Navegação

IE 6.0 e a Single-Document Interface: cada página em uma nova janela.

O padrão TDI ( http://en.wikipedia.org/wiki/Tabbed_browsing#Tabbed_browsing ) é popularmente conhecido como navegação por “Abas”. Esse padrão permite que múltiplos documentos sejam abertos dentro de uma única janela do aplicativo onde é possível navegar entre eles por meio de um sistema de abas. Essa foi uma grande funcionalidade implementada na versão no Internet Explorer 7.0.

Page 9: Esquemas de Navegação

Internet Explorer 7.0: agora com abas.

Portanto, dá pra ver com certa facilidade que esses três padrões trabalham de maneira cruzada. Quer dizer, as novas versões de browsers, por exemplo, oferecem a possibilidade de abrir um novo documento em uma aba, ou em uma nova instância do aplicativo. Quer dizer, ele pode funcionar no modo MDI ou no modo SDI. Há também softwares que operam em modo MDI mas são capazes de implementar o padrão TDI dentro de determinadas janelas da composião MDI.

Mas o que isso tem a ver com o que estamos falando? Isto é, com a Web, com a Arquitetura de Informação e seus termos para descrição de esquemas de navegação?

Page 10: Esquemas de Navegação

Fator "Ajax"

O que aconteceu no início da Internet até mais ou menos 2004, foi que todos esses conceitos das GUI eram totalmente inaplicáveis ao principal ambiente de interação gráfica da web, os browsers. A inaplicabilidade dos conceitos tinha três razões primordiais. Limitação de banda, o poder de processamento dos pcs e por conseguinte dos navegadores. Então, o ambiente de aplicação desktop lançava o navegador, que por sua vez usava o padrão SDI para lançar uma determinada página web. Mas essa página traduzia-se essencialmente em sistemas de hypertexto ( Ted Nelson – 1960 - http://pt.wikipedia.org/wiki/Theodor_Nelson ), quase nada mais que conteúdos informacionais inter-relacionados por links. Não que aplicativos baseados na web eram inexistentes. Os webmails, por exemplo, já estavam em cena, mas era como se o desenvolvimento de software estivesse frente à uma estrada de terra esburacada, quase que totalmente diferente de suas vias tradicionais. Não havia perspectiva de mudança a curto prazo, uma vez que mudar não se tratava de uma questão de desenvolvimento de software apenas, mas sim de desenvolvimento de infra-estrutura. Não dava para usar os padrões GUI ali. As forças que regiam aquele ambiente eram totalmente diferentes.

Esse novo contexto demandava novos paradigmas para o desenvolvimento de interfaces digitais em navegadores. Grande parte do esforço demandado estava na criação de esquemas de navegação para grupos de documentos informacionais e também para algumas aplicações simples. Portanto, pista livre para o desenvolvimento da Arquitetura da Informação. E a missão dessa disciplina foi basicamente a de decompor as unidades que formavam os padrões para que as peças pudessem ser usadas de maneira independente. Quer dizer, sob certo aspecto, pode-se dizer que um GUI design pattern nada mais é que um agregado de sistemas de navegação, que permitem determinados tipos de navegação -dependendo da ocasião- e que atendem à um determinado caso-de-uso.

Era impensável falar em padrões GUI na web até um cara chamado Jesse James Garret escrever um artigo datado de fevereiro de 2005 chamado “Ajax: a New Approach to Web Aplications” ( http://www.adaptivepath.com/ideas/essays/archives/000385.php ). A partir dessa data, os navegadores passaram a ser encarados como plataformas de lançamento de aplicativos. E isso abriu precedente para a retomada do uso de toda linha de pesquisa dos GUI Design Patterns na web. Essa linha de pesquisa, somada à linha de pesquisa da Arquitetura da Informação são capazes de dar suporte ao desenvolvimento de todo tipo de aplicação na web, em todos os seus níveis.

Page 11: Esquemas de Navegação

meebo.com: navegador como lançamento de aplicativos utilizando o GUI Design Pattern Multi-Document Interface

Page 12: Esquemas de Navegação

Uso do jargão

Page 13: Esquemas de Navegação

No caso da homepage do Yahoo! Temos uma navegação Global que não é persistente, e que leva para todos os serviços da empresa. A navegação local presente na homepage apresenta-se em estilo TDI, e destina-se exclusivamente aos principais tipos de serviço de notícias e às possibilidades do sistema de busca. O sistema de navegação de cortesia segue os padrões clássicos para esse tipo de agrupamento. O restante dos chunks de informações contém essencialmente sistemas de navegação suplementar, que fazem exatamente o mesmo efeito na navegação facetada, isto é, atende casos de uso dos usuários podendo enviá-los à qualquer ponto do grupo de websites que compõe o Yahoo!