Sistema de navegação

Navegar é alcançar um destino que está fora do alcance de campo de visão do ponto de partida. 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, caso contrário ele se perde. O que significa navegar na web? Sistema de navegação

Hipertexto é o termo que remete a um texto em formato digital, ao qual agrega-se outros conjuntos de informação na forma de blocos de textos, palavras, imagens ou sons, cujo acesso se dá através de referências específicas denominadas hiperlinks, ou simplesmente links. Os links devem ser sinalizados claramente e sua funcionalidade ficar aparente na página. O que é um hipertexto? Sistema de navegação

Sistema de navegação 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. Objetivo do sistema de navegação

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 (sumário) - Índice Remissivo - Visita guiada 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 - Passo a Passo - Cross Content Os elementos do sistema de navegação são divididos em: 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. Por convenção, normalmente possui link para a home-page. Importante estar associado a um slogan claro e informativo, para transmitir aos usuários o objetivo do site. Logotipo Slogan http://delicious.com Elementos do sistema de navegação

Barra de navegação global Contém os links para as áreas chaves do site, as grandes categorias do modelo de organização. Freqüentemente é o único elemento de navegação comum a todo o website, por isso tem grande impacto na usabilidade. Categorias de produtos Serviços http://www.casasbahia.com.br Carrinho de compras Busca 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.). Três exemplos: Fixo http://www.casasbahia.com.br Pull-down e pop-up Pie menu (radial menu) http://www.faculdadespequenoprincipe.edu.br http://songza.com Elementos do sistema de navegação

Bread crumb (migalhas de pão) Informa onde o usuário se encontra na estrutura do site e fornece links para os níveis hierárquicos superiores. Fixo http://food.yahoo.com Bread crumb tradicional Bread crumb em forma de menu (tabbed) http://www.blogblogs.com.br Elementos do sistema de navegação

Bread crumb (migalhas de pão) O bread crumb pode representar diferentes modelos de navegação. Segundo *Instone (2002), existem 3 tipos principais: 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 Esta representação possui a peculiaridade de não oferecer zonas de salto em cada item da estrutura, mas sim um link simples para a página procurada. Este tipo de recurso é muito encontrado em sites de e-commerce. *INSTONE, K. Location, Path & Attribute Breadcrumbs. User-experience.org, 2002. Elementos do sistema de navegação

Passo a passo Informa em qual passo de uma transação o usuário se encontra. Indicado para transações longas ou delicadas. A estrutura é amigável na identificação de problemas, pois o funil do processo permite uma análise de métricas mais aprofundada. http://www.fnac.com.br Elementos do sistema de navegação

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. http://perfumes.sacks.com.br Elementos do sistema de navegação

Mapa do site (sumário) http://www.hsbc.com.br 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. Elementos do sistema de navegação

Índice remissivo http://www.gm.com.br São listas de palavras chaves organizadas em ordem alfabética ou por importância. Bastante úteis quando o usuário já sabe o nome do conteúdo que procura. Elementos do sistema de navegação

Elementos do sistema de navegação Visita guiada http://www.americanas.com.br A visita guiada serve como uma boa ferramenta para introduzir novos usuários as áreas de maior conteúdo ou importância de um sistema.

*Extraído do livro de FLEMING, J. Web Navigation: Designing the User Experience. O'Reilly, 1998. - Fácil de aprender - Ser consistente - Prover feedback - Presente de diferentes formas conforme o contexto - Oferecer alternativas - Economizar ações e tempo de utilização - Apresentar mensagens visuais claras e no momento adequado - Possuir rótulos compreensíveis - Estar em sintonia com o propósito do website - Suportar os objetivos e comportamentos do usuário *10 princípios básicos para sistema de navegação de qualidade: Recomendações - Sistema de navegação

*Extraído do livro de NIELSEN, J. Projetando Websites. Rio de Janeiro: Campus, 2000. *Um bom sistema de navegação deve responder 3 perguntas básicas: Onde estou? Onde estive? Aonde posso ir? Recomendações - Sistema de navegação

Recomendações - Sistema de navegação http://www.amazon.com Focalize sua navegação Navegações flexíveis fornecem muitos atalhos mas podem gerar confusão para o usuário. É recomendável diminuir a quantidade de opções de navegação nas tarefas mais críticas para que o usuário possa focar melhor sua atenção. Página inicial (muitos links) Página de login (poucos links)

http://www.hsbc.cl Não esqueça da acessibilidade Todas as páginas que possuem menus padronizados em um site, para serem além de acessíveis, terem uma boa usabilidade, têm de possuir teclas de atalho que permitam o salto para o conteúdo principal da página. Essas teclas de atalho podem ser colocadas pelo desenvolvedor sem prejuízo de qualquer outro conteúdo. Recomendações - Sistema de navegação