design da informação

Navegação

O conceito de navegação em ambiente de hipermídia é um processo de movimento entre os nós de um espaço informacional. O conceito envolve tanto o aprendizado sintático – mais ligado ao nível operacional, focado no deslocamento, independente do conteúdo, quanto o aprendizado semântico – relacionado ao nível funcional, que auxilia na integração entre diferentes informações.

Os componentes de navegação como menus, setas, nós de navegação, hipertextos, imagens etc. podem ser considerados um sistema que possui como objetivos fundamentais 1 promover a orientação local e global dentro do próprio sistema; permitir o deslocamento entre os nós de navegação; e fornecer ferramentas de acesso à informação alternativa, à navegação nó a nó.

Bem como, preencher as necessidades humanas de autonomia, competência, estimulação (auto-orientadas), de conexão com outras pessoas e popularidade (orientada aos outros) 2 e de harmonização dos elementos que afetam os níveis visceral, comportamental e reflexivo, antes, durante e após a interação 3.

elementos de design

Em sistemas de hipermídia, os elementos de design para a orientação da navegação devem ter uma linguagem visual criada para atender os objetivos do projeto e as necessidades do usuário dando força à mensagem de modo que seu reconhecimento seja imediato.

Navegar em ambientes que possuem diferentes linguagens para designar a mesma informação pode confundir o usuário durante a navegação fazendo com que ele perca o interesse no ambiente hipermidiático.

A utilização de hierarquias e repetições de elementos de design traz consistência e credibilidade para o usuário ao navegar em ambientes de hipermídia. Um bom sistema irá utilizar uma família tipográfica, o mesmo estilo em todos os ícones e uma hierarquia consistente de informações por meio de cores ou de outros elementos de design.

Os sistemas mais adequados de navegação são aqueles que vão diretamente ao ponto, sem excesso de informação. Os dispositivos só devem disponibilizar o necessário para a realização de tarefas 4.

Dentre as qualidades de uma navegação bem elaborada evidenciam-se, neste livro, três qualidades:

  • Rótulos claros consiste na nomeação dos nós de navegação que devem ser claros e significativos para o usuário;
  • Consistência/inconsistência das ferramentas de navegação está relacionada com a manutenção das características das ferramentas de navegação em todas as telas, em termos de aparência, localização e rotulagem, e a diferenciação entre ferramentas de navegação com funções diferentes.
  • Clareza visual refere-se ao uso adequado de elementos de design como cor, tipografia, imagem, layout etc. visando facilitar a navegação 5.
ferramentas de navegação

Ferramentas de navegação são mecanismos que auxiliam o usuário a evitar a desorientação. As mais utilizadas são 6:

Anotações: janelas com informações secundárias que se sobrepõem à principal sem modificá-la;

Bookmarks: possibilita ao usuário marcar determinadas páginas, documentos ou nós para uma busca posterior;

Overview: detalha os vários níveis da informação em temas muito extensos para serem mostrados em mapas de navegação;

Backtrack: permite voltar ao nó anterior, ao inicial, ou outros nós;

Histórico: mostra os nós percorridos recentemente, e permite voltar a qualquer um deles;

Link: palavras, expressões ou imagens que servem de ligação direta para outra página ou parte da própria página;

Busca: facilita a procura de nós que contenham a palavra desejada.

Um fluxograma (flow maps) demonstra a navegação do sistema em níveis mais profundos. O objetivo é reunir todos os wireframes, mostrar os caminhos entre eles e indicar pontos desencadeadores para os processos de navegação. Dicas para mapas de fluxo eficazes 7:

Organizar wireframes em grupos relacionados com a tarefa que suportam, utilizar código de cores e rótulos claros, evitar linhas de fluxo excessivamente longas;

Empregar uma linguagem visual consistente para seus mapas de fluxo com legendas explicativas;

Mostrar a navegação para os elementos da página-chave. Em componentes de navegação recorrentes, como menus principais, barras laterais etc. usar textos explicativos para não repeti-los em todos os wireframes;

Disponibilizar o mapa de fluxo em uma área comum e incentivar membros da equipe a fazer anotações sobre os mapas de fluxo. Ter uma estratégia de manutenção.

1 PADOVANI, Stephania; MOURA, Dinara. Navegação em Hipermídia: uma abordagem centrada no usuário. Rio de Janeiro: Ciência Moderna, 2008.
2 HASSENZAHL, Marc. User Experience (UX): Towards an experiential perspective on product quality. 2008.
3 COOPER, Alan; REIMANN, Robert; CRONIN, David. About Face 3: The Essentials of Interaction Design. Indianapolis: Wiley Publishing, 2007.
4 LASCANO, R. What makes a good wayfinding system? Arrows and Icons Magazine, 2009.
5 KALBACH, James. Design de navegação web: otimizando a experiência do usuário. Porto Alegre: Bookman, 2009.
6 VANZIN, Tarcísio e ULBRICHT, Vania Ribas. Inteligências Múltiplas e Identificação de Perfil. Florianópolis: Pandion, 2009.
7 FULCHER, Richard; GLASS, Bryce; LEACOCK, Matt. Deliverables that Clarify, Focus and Improve Design. In: 2002 Annual Conference of tehe Usability Professionals´ Association (UPA 2002 – Humanizing Design). Orlando, Florida. jul. 2002