Sistema de Navegação 2006 Guilhermo Reis www.guilhermo.com
2 O que é navegar? 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.
3 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. @
4 Objetivo do 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.
5 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 estive? Onde Estou? Aonde posso ir? NIELSEN, J. Projetando Websites. Rio de Janeiro: Campus, 2000.
6 Recomendações para o projeto do Sistema de Navegação 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. FLEMING, J. Web Navigation: Designing the User Experience. O'Reilly, 1998.
7 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. FLEMING, J. Web Navigation: Designing the User Experience. O'Reilly, 1998.
8 Recomendações para o projeto do Sistema de Navegação Equilibre flexibilidade e confusão Flexibilidade Posso ir para qualquer lugar! Permite ao usuário ir rapidamente de um ponto a outro no site. Fornece muitos atalhos. Confusão Para onde vou? Muitas opções de navegação confundem o usuário. Demora para escolher onde clicar.
Processo de Compras da Americanas.com 9 Escolha do Produto Muitos links + Flexibilidade + Confusão Escolha forma de pagamento Poucos links - Flexibilidade - Confusão 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. www.americanas.com.br
10 Recomendações para o projeto do Sistema de Navegaçã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. www.amazon.com
11 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.
12 Os elementos do sistema de navegação são divididos em dois sub-sistemas: Sistema de Navegação Embutido Sistema de Navegação Remoto Formado pelos elementos de navegação que são apresentados junto com o conteúdo. Formado pelos elementos externos a hierarquia do site. Sua função é contextualizar e oferecer flexibilidade de movimento. Logotipo Barra de Navegação Global Menu Local Bread Crumb Cross Content Sua função é prover caminhos complementares para se encontrar o conteúdo e completar as tarefas. Mapa do Site Índice Remissivo
13 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 www.submarino.com.br
14 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. Barra de Navegação Global do Submarino Ajuda e Listas de Compras Acompanhamento dos Pedidos Categorias dos Produtos www.submarino.com.br
15 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 www.submarino.com.br
16 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.volkswagen.com.br www.adobe.com.br
17 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. www.yahoo.com.br
18 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
19 Location Bread Crumb Cada página tem um bread crumb único. www.useit.com
20 Path Bread Crumb A mesma página acessada por diferentes caminhos trás diferentes bread crumbs. www.epicurious.com
21 Attribute Bread Crumb Essa página da Amazon possui 7 attributes bread crumbs para o mesmo brinquedo que mostram todos os seus atributos. www.amazon.com
22 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.americanas.com.br www.submarino.com.br
23 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. www.microsoft.com.br
24 Í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. www.itau.com.br