© 2006 Guilhermo Reis – www.guilhermo.com
Navegar é alcançar um destino que está fora do alcance de campo de visão do ponto de partida.
Para alcançar seu destino, o navegador se orienta através de instrumentos e pontos de referência que determinam a sua posição e a direção a seguir.
E navegar na Web?
A navegação em hipertextos é análoga a navegação em espaços físico. Para se movimentar o usuário precisa de orientação, caso contrário ele se perde.
No mundo físico existe uma infinidade de pontos de referências para o usuário se orientar (árvores, rios, montanhas, estrelas, placas, etc.).
Em um website, ao contrário, esses pontos de referência não existem. Assim, ao se projetar um website ,é necessário criar um sistema de navegação para estabelecer pontos de referência e uma sinalização que oriente o usuário.
O sistema de navegação é o componente da Arquitetura de
Informação que especifica as maneiras de navegar, de se
mover pelo espaço informacional e hipertextual do website.
Sua função é indicar ao usuário a sua localização e
mostrar o caminho correto para que ele chegue ao seu
destino.
O sistema de navegação é o componente da Arquitetura de
Informação que especifica as maneiras de navegar, de se
mover pelo espaço informacional e hipertextual do website.
Sua função é indicar ao usuário a sua localização e
mostrar o caminho correto para que ele chegue ao seu
destino.
Recomendações para o projeto do Sistema de Navegação
Segundo NIELSEN (2000), um bom sistema de navegação deve, a todo momento,
responder a 3 perguntas básicas:
Onde Estou?
Aonde posso ir?
Onde estive?
FLEMING (1998) cita 10 princípios básicos para sistema de navegação de qualidade:
Fácil de aprender
O sistema de navegação deve ser fácil de aprender porque se os usuários perderem muito tempo para entender como utilizá-lo, ele irão abandonar o website.
Consistente
Os usuários, após compreenderem como o sistema de navegação funciona, passam a confiar nele. Um sistema consistente permite que o usuário tenha previsibilidade sobre como será a reposta do sistema antes de executar cada ação.
Prove feedback
O usuário espera que o sistema reaja a cada ação que executar sobre a sua interface. É através dessas reações que o usuário consegue avaliar se o sistema executou a ação com sucesso. Por isso o sistema de navegação deve lhe dar sempre feedback, mostrando-lhe sua posição espacial.
Presente de diferentes formas conforme o contexto
Para decidir seus movimentos, o usuário precisa ver as possíveis rotas. Ser contextualizado é apresentar para o usuário as rotas que lhe interessam conforme o ponto em que se encontra no sistema.
Oferece alternativas
Usuários diferentes possuem diferentes estratégias de navegação. O sistema de navegação deve ser capaz de atender a esses diferentes comportamentos.
Recomendações para o projeto do Sistema de Navegação
Economiza ações e tempo de utilização
Navegação longas causam frustração no usuário. Por isso, o sistema de navegação deve sempre manter as rotas curtas e oferecer atalhos, especialmente para usuários experientes.
Apresenta mensagens claras e no momento adequado
O sistema de navegação deve ter um visual claro e que guie o usuário em detrimento da estética.
Possui rótulos compreensíveis
O sistema de navegação deve usar rótulos claros, sem ambigüidade, na linguagem do usuário e consistentes com as informações apresentadas.
Está em sintonia com o propósito do website
A abordagem do sistema de navegação depende muito dos objetivos do website e das experiências do usuário, assim o design do sistema de navegação deve auxiliar o usuário a seguir esses objetivos.
Suporta os objetivos e comportamentos do usuário
O sistema de navegação deve auxiliar os usuários a executarem suas tarefas da forma que estão acostumados a fazê-las.
Flexibilidade
Posso ir para qualquerlugar!
Permite ao usuário ir
rapidamente de um ponto a outro no site.
Fornece muitos atalhos.
Flexibilidade
Posso ir para qualquer lugar!
Permite ao usuário ir
rapidamente de um ponto a outro no site.
Fornece muitos atalhos.
Equilibre flexibilidade e confusão
Confusão
Para onde vou? Muitas opções denavegação confundem o usuário.
Demora para escolher onde clicar.
Confusão
Para onde vou?
Muitas opções de
navegação confundem o usuário.
Demora para escolher onde clicar.
Escolha do Produto
Muitos links + Flexibilidade + Confusão
Escolha forma de pagamento
Poucos links
- Flexibilidade
- Confusão
Processo de Compras da Americanas.com
Diminua a quantidade de opções de navegação nas tarefas mais
críticas para que o usuário possa focar melhor sua atenção.
Utilize a navegação social
Navegação social consiste em apresentar a um usuário o que outros usuários com os mesmos
interesses encontraram no website. Ela permite se criar correlações entre os conteúdos baseadas nos interesses do usuário e não nas suposições do arquiteto de informação.
“Clientes que compraram esse livro também compraram” Essa famosa lista de links do site da Amazon mostra ao usuário interessado em um produto o que os outros usuários com o mesmo interesse compraram no site.
Recomendações para o projeto do Sistema de Navegação
Aproveite as funcionalidades do browser
Muita pesquisa, análise e testes já foram investidos na concepção das funcionalidades dos principais browsers.
Por isso evite, ao projetar o sistema de navegação, desabilitar ou duplicar essas funcionalidades.
Todos os principais browsers possuem um botão Voltar. Não duplique essa funcionalidade sem necessidade.
Sistema de Navegação Embutido
Formado pelos elementos de navegação que são apresentados junto com o conteúdo.
Sua função é contextualizar e oferecer flexibilidade de movimento.
Logotipo
Barra de Navegação Global
Menu Local
Bread Crumb
Cross Content
Os elementos do sistema de navegação são divididos em dois sub-sistemas:
Sistema de Navegação Remoto
Formado pelos elementos externos a hierarquia do site.
Sua função é prover caminhos complementares para se encontrar o conteúdo e completar as tarefas.
Mapa do Site
Elementos do Sistema de Navegação
Logotipo
Tem a função de identificar o website e mostrar ao usuário a sua posição em relação a web como um todo.
Como se pode entrar em um website através de qualquer página, é importante que todas contenham o logotipo para que o usuário identifique em que website está.
Normalmente possui link para a Home-Page.
Logotipo
Barra de Navegação Global
Contém os links para as áreas chaves do site, as grandes categorias do modelo de organização.
Frequentemente é o único elemento de navegação comum a todo o website, por isso tem grande impacto na usabilidade.
Barras em formato horizontal têm quantidade de links limitadas para que a página não tenha scroll horizontal. Uma alternativa é se criar mais de uma barra de navegação global, agrupando os links por funcionalidade.
Categorias dos Produtos
Acompanhamento dos Pedidos
Ajuda e Listas de Compras
Barra de Navegação Global do Submarino
Elementos do Sistema de Navegação
Menu Local
Apresenta links para páginas que estão próximas, na estrutura do website, à página que está sendo visitada (Páginas irmãs, filhas, pais, etc.)
Menu local da seção DVDs do Submarino
Menu Local - Menus Pop-up e Pull-down
Vantagem: permitem mostrar os itens do menu de navegação de uma forma bem compacta.
Desvantagem: escondem as opções do usuário.
Menu Pop-up Menu Pull-down
www.adobe.com.br www.volkswagen.com.br
Elementos do Sistema de Navegação
Bread Crumb
Informa onde o usuário se encontra na estrutura do site e fornece links para os níveis hierárquicos superiores.
São bastante compactos.
Úteis em situações onde o usuário está pesquisando, comparando e selecionando.
Bread Crumb
Segundo Instone (2002), existem 3 tipos de bread crumbs:
Location Bread Crumb
Informa a posição da página na estrutura do site mostrando links para todas as páginas hierarquicamente
superiores até a Home-Page. A página tem sempre o mesmo bread crumb independente do caminho percorrido para alcançá-la.
Path Bread Crumb
Mostra o caminho percorrido pelo usuário para alcançar a página. Se a mesma página puder ser acessada por diferentes caminhos, ela apresentará diferentes bread crumbs.
Attribute Bread Crumb
Mostra atributos (meta-dados) do conteúdo da página.
INSTONE, K. Location, Path & Attribute Breadcrumbs. User-experience.org, 2002. http://user-experience.org/uefiles/breadcrumbs/KEI-Breadcrumbs-IAS.pdf
Elementos do Sistema de Navegação
Location Bread Crumb
www.useit.com
Cada página tem um bread crumb único.
Path Bread Crumb
www.epicurious.com
A mesma página
acessada por diferentes caminhos trás diferentes bread crumbs.
Elementos do Sistema de Navegação
Attribute Bread Crumb
Essa página da Amazon possui 7 attributes bread crumbs para o mesmo brinquedo que mostram todos os seus atributos.
Cross Content
Apresenta uma série de links relacionados ao conteúdo da página que está sendo visitada.
Para serem úteis devem ser bastante contextualizados.
www.submarino.com.br www.americanas.com.br
Elementos do Sistema de Navegação
Mapa do Site
Apresenta toda a estrutura do website, normalmente na forma hierárquica.
Reforça a hierarquia do website para que o usuário se familiarize com a sua organização.
Facilita o acesso rápido e direto para o conteúdo.
Evita sobrecarregar o usuário com muita informação.
Não é recomendado para websites com pouca organização hierárquica.
Índice Remissivo
São listas de palavras chaves organizadas em ordem alfabética.
Bastante úteis quando o usuário já sabe o nome do conteúdo que procura.
