Cursos / Informática para Internet / Autoria Web / Aula

arrow_back Aula 09 - Pré-produção, navegação, resolução x design e layout

Navegação

A navegação do site define a maneira como o usuário visitará a página. É ela que torna a web um meio de divulgação de informação tão poderoso. Portanto, deve ser projetada para que se evite uma série de problemas, tais como: impedir que os usuários se percam ou que fiquem confusos com o conteúdo ou, ainda, que não achem ou percam tempo para achar o que procuram.

Em geral, o usuário sente necessidade de se situar, basicamente, em três sentidos:

  • Onde ele está? Refere-se à localização em um site e na web em geral. Sendo assim, alguns elementos que podem ajudar nessa localização são: o título da página, que deve reforçar o sentido de localização; o item do menu que levou-o até ali deve estar destacado, pode-se usar uma trilha de orientação (breadcrumb) que indica a localização daquela página em relação à página principal. Tente encontrar esses elementos na Figura 8. Exemplo de trilha de orientação e outros elementos da navegação
  • Onde ele esteve? –Refere-se à localização em relação às páginas já visitadas. Uma maneira de fazer isso é deixar os links já visitados em outra cor ou permitir que o usuário utilize o botão “voltar” do navegador. Lembre-se que se os links de um site levam a outra janela (ou guia) do browser, então, o usuário não conseguirá usar o botão “voltar”.
  • Onde ele pode ir e como chegar lá? –Refere-se à localização em relação à estrutura de informações que leva o usuário ao que ele procura. Isso pode ser realizado através de links com nomes claros e sucintos, percursos pequenos e indicação de que o link leva a um site externo ou interno.

Sabendo disso, é necessário utilizar os elementos disponíveis para indicar ao usuário sua localização.

Como foi dito antes, uma navegação inteligente começa com uma boa arquitetura da informação. Através da arquitetura da informação estabelece-se a conexão semântica entre as partes do site e isso determina como o usuário se deslocará através dessas informações.

Para exemplificar a utilização da arquitetura da informação na definição da navegação, nos remeteremos ao caso do site do colecionador. Imagine que ao invés de criarmos o diagrama de AI mostrado na Figura 5 tivéssemos construído algo parecido com o que está ilustrado na Figura 9 a seguir.

Diagrama da arquitetura da informação

Note que apenas colocamos a seção “História” como uma subseção de “Minha coleção”. Agora, imagine um usuário que navega por esse site em busca de informações gerais sobre jogos de tabuleiro. Em um primeiro momento, ele não encontrará nada relativo à história e certamente clicará em jogos para ver se essa informação estará nessa seção, onde também não achará. Entretanto, ele pode continuar navegando pelo site porque o achou muito interessante até que chegará à seção “Minha coleção”. Ao ver o link história, ele não pensará que encontrará informações sobre a história do jogo de tabuleiro e sim a história da coleção de jogos do colecionador, com sorte, ele poderá clicar nesse link e encontrar, por acaso, o que estava procurando no início.

Você percebeu o quão confuso ficou essa informação? Certamente, um site estruturado em cima desse diagrama deixará o usuário no mínimo perdido. Enquanto que com base na Figura 5, o link para seção História estaria na navegação principal e o usuário interessado poderia ir diretamente para ele, certo de que encontrará a informação que procura.

Outra característica importante é que os links que compõem a navegação devem possuir nomes descritivos e curtos, tal como na AI, pois nomes longos que não remetem diretamente ao conteúdo tornam a navegação confusa e afastam o usuário.

Seguem alguns aspectos importantes a serem levados em consideração na definição dos links:

<http://www.avellareduarte.com.br/interface/paginas-de-apoio/mapa-do-site/>

Versão 5.3 - Todos os Direitos reservados