A estrutura de navegação de mídias digitais é organizada para que cada visitante ou usuário possa compreendê-la com rapidez e se desloque facilmente entre telas e seções. Quanto mais rapidamente o visitante construir um modelo mental de resposta a esta estrutura, mais fácil será seu deslocamento.

A arquitetura de um website pode seguir diversos modelos como

Linear ou sequencial (flat model) – define o deslocamento entre etapas ou processos com botões tipo “Próxima página” e “Página anterior”. A compra online de uma mercadoria, por exemplo, segue uma ordem que vai desde a identificação do usuário e dos produtos que procura até o momento da entrega do produto e pós-compra. O início e o final são previsíveis dentro do objetivo que os encadeia.

Estrutura Linear ou sequencial (flat model)

No exemplo acima, pode-se navegar linearmente pela apresentação dos autores do site. (acesso em 8.3.2012)

A estrutura linear pode ser também classificada como “cronológica” em sites que contam histórias sequenciais em várias telas.

Hierárquico ou arborescente – para sites com grande quantidade de conteúdo, liga tópicos de interesse genérico a tópicos mais específicos, com base na construção de uma taxonomia. As informações se estruturam de alto a baixo, como os ramos de uma árvore, ou de baixo para cima, segundo a estrutura de um banco de dados hospedado em um servidor que atende às solicitações dos usuários.

Estrutura hierarquica

Estrutura hierárquica – numa loja de decoração, a categoria genérica “Casa”, se subdivide, por exemplo em “Sala de estar”, que se subdivide em categorias como “Mesas auxiliares”, que se dividem em novas categorias como “Mesas de centro”, seguindo uma ordem decrescente de abrangência. (acesso em 12.4.2007)

A estrutura hierárquica pode apresentar diversas estruturas dominantes, com subordinações e superposições para cada uma delas e se configurar como uma estrutura polihierárquica (multi-dimensional hierarchy model).

Segundo este modelo, pode-se acessar o conteúdo através de diversos modos, dependendo do ponto de partida. Em sites como Amazon.com, por exemplo, que as buscas e percursos podem se organizar em torno de tópicos, autores, assuntos, títulos, gêneros, palavras-chave, bem como em torno de interesses personalizados.

Boneca aninhada (nested doll) – pequenos agrupamentos seguem interesses localizados, facilitando o deslocamento: listas aninhadas de sublinks vão conduzindo lateralmente ao conteúdo procurado – o usuário toca numa seta, abre nova lista de links, que se desdobra em nova lista, e assim por diante. É uma opção para mídias com longas estruturas hierárquicas, pois a menor quantidade de links na mesma camada facilita a navegação, especialmente em dispositivos móveis. (5)

Centro radial (hub and spoke) – as conexões são dispostas como uma roda de bicicleta – em que um conjunto de arames convergem para um centro. O tráfego vai de uma tela central com os principais links para as ramificações e vice-versa. Como os aplicativos na tela inicial de um smartphone, cada seção tem autonomia, não é necessário ter navegação global em todas as páginas/telas. Para ir para uma seção diferente da que se encontra, o usuário precisa voltar à tela central, ou hub. (5)

Como economiza bastante o espaço das telas, é muito usada em dispositivos móveis e aplicativos para a realização de tarefas, como os de redes sociais.

Matricial ou em grade – neste caso, a estrutura não é hierarquizada e segue um modelo horizontal, e o deslocamento entre páginas não é linear.

Estrutura matricial ou em grade

Estrutura matricial ou em grade – pode-se navegar, horizontalmente pelas imagens de cada seção, que, em si constituem a narrativa principal de cada tela. (acesso em 8.3.2012)

Os “Links relacionados” (ou “Veja também”) que unem diversas páginas de um mesmo site segundo algumas afinidades temáticas entre informações podem estabelecer uma estrutura matricial.

A estrutura horizontal é comum também em sites de notícias, em que parte do conteúdo é organizado em torno de tags, que variam de acordo com o conteúdo em destaque num determinado dia ou época.

“Crise de refugiados” é uma tag temporária, que gera subitens como “Entenda a crise”, “Quem são os refugiados”, etc. Neste caso, há a verticalização de um nível na navegação por tags.

Híbrido – tópicos genéricos se ligam a tópicos mais específicos, ou vice-versa, de acordo com conteúdo gerado dinamicamente pelo usuário.

Estrutura híbrida

Estrutura híbrida, no modelo acima categorias mais gerais, como Movies (Filmes), se subdividem, por exemplo em Movies in Theaters (Em exibição) o que configura uma organização vertical. Já o conteúdo da página apresenta comentários dos espectadores de filmes organizáveis tanto pela cotação quanto pela data da publicação, dois critérios com o mesmo grau de importância e que configuram uma organização horizontal. Já os produtos oferecidos mais embaixo, com links para outros sites, configuram uma experiência cross-channel. (acesso em 11.3.2012)

Diversos critérios de organização, entre horizontais e verticais, se combinam para criar uma experiência de uso integrada. Sites de mídias agrupam assuntos por categorias como “Economia”, “Esportes”, “Lazer”, e dentro destas categorias, os textos são mais ou menos destacados de acordo com o grau de interesse que podem despertar nos leitores. De modo geral há também navegação horizontal entre os itens “Mais visitados”, “Mais recentes” (ou “Últimas notícias”), “Mais comentadas”, bem como navegação por tags.

No exemplo acima, o texto pertence a uma subcategoria “Economia brasileira”, situada na categoria “Economia”. Vemos no alto da página que há uma estrutura ampla do jornal baseada em localização geográfica (“Espanha”, “América”, “Brasil”, “Catalunha”).

Sites em que usuários logados fazem ações muito diferentes dos usuários não logados, como os de cursos online, por exemplo, podem ter estruturas para hierarquizadas para os não logados em prospecção, e estruturas lineares, para os usuários logados em treinamento, por exemplo.

Personalizado – o usuário define as informações que quer receber ou as ferramentas do próprio site rastreiam o percurso que o usuário percorreu durante uma visita e selecionam o conteúdo de sua preferência (normalmente o mais acessado).

Estrutura personalizada

Estrutura personalizada, em uma simples página de resultado de busca, vemos uma estrutura vertical composta pelos links do web site e também uma navegação criada a partir dos termos da busca. A automação está sujeita a algoritmos criados pelos buscadores, não pelos usuários. (acesso em 11.3.2012)

Participativo – estruturada em torno das ações dos usuários e dos objetos sociais criados ou modificados durante estas ações.

Cross-media (mídias cruzadas) – segue os encadeamentos de um ambiente amplo de informações, composto por um conjunto de ambientes mais restritos, mídias e canais interligados, que se complementam e dependem um do outro para compor a experiência de uso ou completar uma ideia ou tarefa. Considera a experiência de acesso e uso fragmentada ou parcial em cada um, sendo que nenhum produto em si provê a experiência completa. (1)

O cadastro de um e-mail para receber uma mala direta é uma experiência cross-mídia quando há o envio de mensagem para a caixa postal do assinante e este precisa clicar em um link para confirmar o cadastro. O cadastro não é finalizado caso não haja confirmação.

Em canais de mídias ou canais cruzados, a manutenção de pistas visuais semelhantes em todos eles facilita o encadeamento das ações. O uso consistente de cores, fontes, posicionamentos, proporções, diferenciação de tipos links, permite que os usuários se familiarizem facilmente com um ambiente em qualquer dispositivo ou circunstância de acesso.

Cross-channel (ou transchannel, canais cruzados) – considera uma estrutura de informações composta por elementos dispersos de maneira estruturada (criação, publicação, ação, relacionamento, recriação). O conjunto de elementos individuais, cada um contribuindo à sua maneira, compõe uma experiência integrada, entre canais.

Um único canal pode ou não prover uma porta de entrada ao ambiente, e a maioria dos usuários não percorre todos os seus pontos de contato do início ao fim. Alguns canais permitem que os usuários completem sua experiência sem precisar de outros.

A HarperCollins publicou o livro Dark Eden junto com app do game, baixado do website, onde se encontram também imagens, vídeos, making of do game. A estrutura do site dá suporte ao app – que também pode ser jogado via web –, à história, e vende o livro. O conjunto integrado de livro+website+app+vídeo compõe uma experiência cross-channel. (2)

Estrutura cross-channel

Estrutura cross-channel, em que o site está diretamente relacionado ao game em app móvel e ao livro impresso. (acesso em 11.3.2012)

O filme Angry Birds foi lançado em 2014, mas o game era bem sucedido há anos. A Rovio, empresa criadora, oferece também séries de vídeos através dos apps móveis do jogo. A criação dos subprodutos da marca é influenciada pela experiência de uso do jogo, bem como pelo conhecimento do público (global, de diversas idades) e suas demandas. Embora relacionados, jogos, séries e filme compõem experiências independentes entre si. (3)

Multi-channel (multi-canais) – Oferta de serviços ou experiências da mesma natureza que podem ser acessados ou usados a partir de inúmeros canais. Os usuários acessam um ou outro e podem realizar a mesma tarefa ou acessar a mesma informação completa.

Ou seja, um correntista de um banco acessa sua conta através do website, obtém seu extrato, mas pode fazê-lo também em um caixa eletrônico, pelo celular, ou pelo caixa presencial do banco. A realização completa destas tarefas independe do acesso a outros canais complementares, como o recebimento de mala direta ou o recebimento de mensagens telefônicas.

Alfabético –Muito simplificado, acompanha índices como glossários ou listas de nomes de pessoas, ou definições de palavras, ou de produtos dentro de uma categoria.

Estas estruturas normalmente estão presentes em partes dos canais, não são orientadoras da navegação completa pelo canal.

Ad hoc, “caótico” ou em teia – não apresenta uma ordem aparente, os relacionamentos entre itens são mais editoriais que estruturais.

Estrutura caótica

Estrutura caótica, não há uma ordem aparente, os caminhos são determinados pelos usuários, como no caso deste site, composto por uma coleção de eventos, ideias, notas, algum humor, todos publicados pelos leitores. (acesso em 11.3.2012)

Os percursos são definidos pelos usuários que se deslocam de acordo com os seus interesses, seguindo hiperlinks que encontram nas páginas, ou ordenações baseadas nas características das próprias informações. Ou então por um editor, ou especialista em conteúdo, que determina os relacionamentos entre links.

É a forma de estrutura que oferece mais risco de desorientação que as outras, no entanto permite o cruzamento total e irrestrito de informações, pois não está condicionada a nenhum modelo pré-definido. Testes de usabilidade mostram que há uma relação negativa entre os links inseridos dentro de textos e os agrupados em barras de navegação. Neste caso, muitos usuários passam por links durante a leitura sem mesmo notá-los. O uso de modelos híbridos neste caso é mais efetivo. (4)

Mídias digitais normalmente combinam vários modelos de estruturas, de acordo com as características do conteúdo que publicam, com os seus objetivos (conceituais, comerciais) e com os modos como se relacionam com o público.

Sob o ponto de vista dos usuários, cada tipo de estrutura contribui para a construção de uma narrativa que reflete como os interesses e modelos mentais de cada um se relacionam com os princípios gerais que regem sua organização.

(Atualizado em 6.2.2017)

 

Referências

5) Wayfindings for the mobile webDennis Kardys (Smashing Magazine, acesso em 26.2.2017)

4) Types of navigation systems (O’Reilly’s; Information Systems for the World Wide Web, acesso em 3.4.2013)

Livro: Pervasive information architecture, de Andrea Resmini and Luca Rosati. Burlington, MA: Morgan Kaufman, 2011

3) @ pcE11: Angry Birds ‘The Movie’ Or ‘The App’? It’s just ‘The Experience’ (paidContent, acesso em 11.3.2012)

2) James Frey’s post-apocalyptic wasteland (paidContent, acesso em 11.3.2012)

1) What is cross-channel (Andrea Resmini, blog, acesso em 11.3.2012)

Cross-channel, cross-media, multi-channel: Where’s the difference, a partir do livro, citado abaixo, de Andrea Resmini and Luca Rosati (Pervasive Information Architecture, acesso em 11.3.2012)

The transmedia challenge: Co-creation, de Donald Norman (JND.org, acesso em 11.3.2012)

Optimal Sort, programa para teste de estruturas, fluxos de trabalho, menus, caminhos dos usuários em websites (acesso em 8.9.2012)

The revenge of the origami unicorn: Seven principles of transmedia storytelling (well, two actually. Five more on Friday), de Henry Jenkins (Confessions of a Aca-Fan, acesso em 11.3.2012)

Designing for bridge experiences, de Joel Grossman (UXmatters, acesso em 18.3.2012)

Game design as a narrative architecture, de Henry Jenkins (Publications, acesso em 18.3.2012)