# Componentes de um sistema de navegação

> Conheça os 6 componentes essenciais de um sistema de navegação web eficiente: áreas clicáveis, indicadores visuais, ferramentas e feedback. Navegue bem!

URL: https://dpw.dev/ui-ux/componentes-de-um-sistema-de-navegacao/  
Publicado em: 2008-10-11  
Categoria: ui-ux  
Tags: analise, interface, usabilidade  
Autor: Tárcio Zemel

Acabei de receber o livro [Navegação em Hipermídia: uma abordagem centrada no usuário](http://www.submarino.com.br/books_productdetails.asp?Query=ProductPage&ProdTypeId=1&ProdId=21386801&franq=267834 "Comprar o livro Navegação em Hipermídia.") (tão bom que se não fizer reserva no [Submarino](http://www.submarino.com.br/ "Visitar o Submarino.") não se consegue comprar) e, como o estava aguardando ansiosamente, não pude resistir e já comecei a ler. Logo no início do livro, chamou minha atenção a definição clara e objetiva dos **componentes de um sistema de navegação**, quer dizer, a definição e descrição das "características elementares" que um sistema de navegação (no contexto deste blog, leia-se: **_web sites_** e **sistemas _web_**, em geral) deve possuir para ser eficiente.

Estes componentes de um sistema de navegação, segundo as autoras do livro, trabalham de forma integrada e interdependente e, portanto, seu conjunto pode ser considerado um sistema. Quer dizer, este componentes que compõem um sistema de navegação interagem mutuamente entre si para formar um "todo" maior, e proporcionam as características e peculiaridades necessárias para uma pessoa conseguir interagir com esse sistema de forma eficiente.

## Os 6 componentes de um sistema de navegação genérico

Os componentes de sistemas de navegação são:

- **Áreas clicáveis.** Estes componentes de sistemas de navegação permitem às pessoas pressionar ou selecionar elementos através de um dispositivo de apontamento (no caso, o _mouse_). Por exemplo: tradicionalmente e por uma questão de usabilidade, os _links_ aparecem (pelo menos, deveriam) sublinhados.
- **Mecanismos para identificar áreas clicáveis.** Permitem que as pessoas que usam sistemas de navegação identifiquem com mais facilidade os elementos clicáveis. Por exemplo, quando se passa o cursor do _mouse_ sobre um botão, ele muda de cor ou fica com bordinhas serrilhadas.
- **Indicadores de localização.** Responsáveis por indicar a quem usa o sistema de navegação sua exata localização dentro deste sistema; de informar em qual posição do "todo" ele se encontra no momento. Deve mostrar em que "nó" do sistema a pessoa está e quais as possibilidades de navegação ela tem a partir daquele ponto.
- **Ferramentas para auxiliar a navegação.** Proveem a quem utiliza o sistema de navegação hipermidiático o acesso às informações de maneira diferenciado ao "nó-a-nó". Caso a pessoa esteja "perdida" ou confusa quanto à sua localização atual dentro do sistema, essas são as ferramentas que a auxiliarão e a ajudarão a se reorientar e retornar à uma "rota conhecida" (ex.: menus, pesquisa, favoritos).
- **Ferramentas de retronavegação.** Como indica o próprio nome, estas ditas ferramentas auxiliar a pessoa que usa um sistema de navegação a retornar a um ou mais nós de navegação recentes (ou não tão recentes) sem precisar acessar exatamente os _links_ que usou para chegar à sua posição atual. Como exemplo: botão "Voltar" dos navegadores e _breadcumbs_ ("Migalhas de pão").
- **Feedback.** É a característica dos sistemas de navegação de manter aqueles que os utilizam informados sobre ações, operações e andamentos que acontecem/aconteceram/acontecerão; ou, nas palavras precisas das autoras do [Navegação em Hipermídia](http://www.submarino.com.br/books_productdetails.asp?Query=ProductPage&ProdTypeId=1&ProdId=21386801&franq=267834 "Comprar o livro Navegação em Hipermídia."), informar sobre uma mudança de estado do sistema. Como exemplos, elas citam a mudança de cores em _links_ visitados (embora haja exceções), barras de _loading_ e mensagens que informam que ações foram realizadas com sucesso ou que aconteceu algum erro.

## Seu projeto possui todos elementos necessários?

Na verdade, eu já conhecia esses elementos característicos a sistemas de navegação hipermidiáticos de meus estudos sobre **Interação Homem-Máquina**. O que me chamou a atenção foi a maneira simples e objetiva com que foram colocados no livro de [Stephania Padovani](http://buscatextual.cnpq.br/buscatextual/visualizacv.jsp?id=K4799880J5 "Currículo Lattes de Stephania Padovani.") e [Dinara Moura](http://buscatextual.cnpq.br/buscatextual/visualizacv.jsp?id=K4759211U8 "Currículo Lattes de Dinara Moura.").

Você, desenvolvedor, fique ligado e analise os _web sites_ e sistemas _online_ que você faz e/ou participa e confira se **todos estes elementos** estão presentes. A falta de somente um deles faz com que o "todo" fique desfalcado e a experiência da pessoa que navega seja incompleta. Analise todos seus projetos, inclusive os já concluídos, e analise se estas características de um bom sistema de navegação estão lá.

É importante para você desenvolver um sistema de qualidade e, mais importante ainda, quando se tem em mente que, na verdade, quem sai prejudicado com a falta de um destes componentes é a **pessoa** que está "do outro lado do sistema", quer dizer, **quem o utiliza**!

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml
