SISTEMA DE NAGEGAÇÃO

Prévia do material em texto

Sistema de NavegaSistema de Navegaççãoão
Especifica as maneiras de navegar, de se 
mover pelo espaço informacional e hipertextual.
Guilhermo Reis (2004) – www.guilhermo.com
Qual a funQual a funçção de um instrumento de orientaão de um instrumento de orientaçção?ão?
Através deles temos a possibilidade de mapearmos nossos cursos, determinarmos 
nossa posição, e acharmos nosso caminho de volta.
Eles ajudam a evitar que as pessoas se sintam perdidas ou se percam efetivamente
(à sensação de estar perdida vem associados os sentimentos de confusão, frustação, 
raiva, etc...).
Eles provêm um senso de contexto e conforto ao explorarmos novos lugares.
Exemplos de instrumentos de orientação:
• Migalha de pão
• Bússola
• GPS
• Mapas de astrologia
• Sinalização de ruas
Guilhermo Reis (2004) – www.guilhermo.com
Na Na WebWeb??
A necessidade de orientação não muda.
Estar perdido em um grande site da web causa a mesma sensação de confusão e 
frustração.
O que contribui para que os usuários não se sintam perdidos?
• Um esquema de organização das informações bem desenhado
• Um sistema de navegação do site bem elaborado. 
Permitindo que usuários:
• Façam associações entre os recursos de navegação oferecidos com o conteúdo que está
sendo exibido;
• Aprendam, aos poucos, como encontrar e identificar os produtos, serviços ou tópicos 
associados ao conteúdo que ele quer encontrar
Guilhermo Reis (2004) – www.guilhermo.com
Desafio do sistema de navegaDesafio do sistema de navegaççãoão
Flexibilidade de movimento
(Ir rapidamente de um ponto a outro do site)
X
Confundir o usuário com muitas opções de navegação
(para onde vou ?)
Guilhermo Reis (2004) – www.guilhermo.com
Escolha do Produto
+ Flexibilidade, + Confusão
Escolha forma de pagamento
- Flexibilidade, - Confusão
Processo de Compras – www.americanas.com.br
Guilhermo Reis (2004) – www.guilhermo.com
AproveiteAproveite--se do se do browserbrowser no sistema de navegano sistema de navegaççãoão
•Muita pesquisa, análise e testes já foram investidos na concepção das funcionalidades 
dos principais browsers que utilizamos
•É necessário estudar e avaliar todos os elementos dos navegadores para evitar que, 
ao elaborarmos um sistema de navegação, desabilitemos ou dupliquemos algumas 
dessas funcionalidades
Exemplos de corrompimento das funcionalidades:
- Modificação das cores (azul e roxa) padronizadas para links não visitados e visitados
Testes de usabilidade indicam que, de todos os elementos gráficos de design, o único fortemente 
relacionado ao sucesso do usuário em encontrar informações, é o uso da cor padrão do link.
Na verdade, pode-se alterar a cor, desde que se mantenha um entendimento apropriado do ponto de vista da 
usabilidade.
-Anular ou duplicar o botão de back do browser
O botão de back do browser é muito utilizado durante a navegação em um site, principalmente nos momentos em 
que o usuário está perdido. Duplicá-lo normalmente é uma redundância desnecessária. Eliminá-lo faz com que 
um usuário perdido perca seu “porto seguro”
Guilhermo Reis (2004) – www.guilhermo.com
Construindo ContextoConstruindo Contexto
Em qualquer sistema de navegação, antes de podermos planejar nosso 
percurso, temos que primeiro nos localizar, descobrir a nossa posição.
Problemas:
- muitos indícios “contextualizadores” do mundo físico não existem na web: não existem pontos de referência 
naturais, norte, sul
- a navegação hipertextual permite que usuários sejam transportados diretamente para o “meio” de um site 
grande desconhecido, diferentemente de uma viagem normal 
- usuários não precisam necessariamente passar pela página principal do site (“pela porta da frente”); ele pode 
chegar numa página através de um link resultado de um mecanismo de busca.
Algumas soluções:
- incluir o nome da organização em todas as páginas
- carregar uma identidade gráfica ao longo do site
- apresentar a estrutura da hierarquia da informação de uma maneira clara e consistente, e indicar a localização 
dentro da hierarquia. 
Guilhermo Reis (2004) – www.guilhermo.com
NavegaNavegaçção Hierão Hieráárquicarquica
• A hierarquia das informações define o sistema de navegação principal
• As opções de navegação constituem os itens da hierarquia
•Problema:
- Ela é limitada
- Requer sistemas de navegação adicionais
Navegação Hierárquica
Guilhermo Reis (2004) – www.guilhermo.com
NavegaNavegaçção Globalão Global
• Complementa a hierarquia das informações possibilitando um grande movimento 
lateral e vertical no site
• O sistema de navegação global mais simples consiste numa barra de navegação no 
cabeçalho ou rodapé da página 
Navegação Global
Guilhermo Reis (2004) – www.guilhermo.com
NavegaNavegaçção para um fim especão para um fim especííficofico
• Relacionamentos entre conteúdos nem sempre se encaixam adequadamente nas categorias da 
navegação hierárquica, global ou local
• Na prática, fornecer este tipo de navegação resume-se em embutir links em palavras ou frases 
dentro de sentenças ou parágrafos.
Problema:
• Usuários tendem a escanear a página tão rapidamente que muitas vezes ele perde esse links menos 
evidentes
Solução:
• Colocar o link em frases e não em palavras isoladas
• Agrupar os links, através de bullets por exemplo, no topo ou rodapé da página
Navegação para 
um fim específico
Guilhermo Reis (2004) – www.guilhermo.com
Elementos de NavegaElementos de Navegaçção Integrados ão Integrados 
Barra de Navegação
Pode ser:
- Uma coleção de links hipertexto agrupados
- Uma coleção de imagens ou ícones implementadas em tabelas
Vantagem da solução gráfica:
- Do ponto de vista de design, ela é muito mais agradável
Desvantagem:
- A velocidade de carregamento da página pode ficar lenta
- É mais cara pois requer mais trabalho 
Do ponto de vista de arquitetura de informação:
• É muito mais fácil acrescentar opções em menus de texto do que em menu gráfico; a criação de ícones pode começar a se tornar 
complicada para sites grandes
• Rótulos em texto indicam mais claramente o conteúdo de cada opção; uma imagem pode ter significados muito diferentes de uma 
cultura para outra
• Ícones podem ser utilizados com sucesso para complementar as labels em texto, uma vez que os usuários começam a se 
familiarizar com os ícones e não perdem mais tempo lendo os rótulos em texto
Guilhermo Reis (2004) – www.guilhermo.com
Elementos de NavegaElementos de Navegaçção Integrados ão Integrados 
Frames
Os frames possibilitam que se separe a barra da navegação do conteúdo da página. A barra de 
navegação fica visível ao usuário no mesmo local da janela do browser independentemente do 
scrow do documento. 
Problemas:
• As barras de navegação estáticas ocupam muito espaço da tela, principalmente na resolução de 480x640. Os 
banners agravam ainda mais este problema.
• Frames acabam “escondendo” as URL’s de cada página, desabilitam features importantes do browser como: 
bookmarking, discriminação de links visitados e não visitados, lista de histórico.
• Podem frustar usuários em tarefas como: recarregar uma página, utilizar o botão de retorno, imprimir uma 
página.
• O usuário pode ter a sensação de demora no carregamento da página. Ele gasta mais tempo observando as 
mensagens de carregamento de cada frame.
• Tornam o site mais complexo do ponto de vista da programação. Tem-se que prever as múltiplas maneiras que 
o usuário pode acessar os documentos, e assim tomar o cuidado de não exibir frames dentro de frames.
Guilhermo Reis (2004) – www.guilhermo.com
Elementos de NavegaElementos de Navegaçção Integrados ão Integrados 
Pop-up Menu Pull-down Menu
Guilhermo Reis (2004) – www.guilhermo.com
Elementos de NavegaElementos de Navegaçção Integrados ão Integrados 
Menus Pop-up ePull-down
Vantagens:
• Podem fornecem opções de navegação de uma maneira bem compacta
• Funcionam bem para esquemas de organização de informações bem exatas e fáceis de 
compreender
Desvantagens:
• Pode-se oferecer opções de navegação demais dentro de uma página
• Esses tipos de menu escondem suas opções e portanto, usuários precisam primeiro agir para 
que ele possa ter as opções disponíveis
Menu Pop-up
Menu Pull-down
Guilhermo Reis (2004) – www.guilhermo.com
Elementos de NavegaElementos de Navegaçção Remotosão Remotos
• São elementos externos à hierarquia principal do web site
• Fornecem alternativas de visão do conteúdo ao usuário
• Fornecem formas complementares de acesso aos conteúdos
Observações:
• Eles não devem ser usados como uma solução para falhas de organização das informações do site e 
de concepção do sistema de navegação
• Eles jamais “salvarão” um site ruim
• Você deve procurar sempre fornecê-los, porém não “contar” com eles
Tipos de elementos remotos:
• Mapa do site
• Índice Remissivo
• Tour Guide
Guilhermo Reis (2004) – www.guilhermo.com
Elementos de NavegaElementos de Navegaçção Remotosão Remotos
Mapa do Site
Similarmente a livros e revistas, o mapa de um site apresenta os itens do topo da hierarquia 
definida para as informações.
• Facilita acesso randômico a partes segmentadas do conteúdo
• Deve-se considerar o uso dele para sites que possuem forte organização hierárquica
• Podem ser desnecessários para sites de dois ou três níveis hierárquicos
• Ajudam os usuários a tornarem-se familiarizados com a organização do conteúdo
• Ajudam a evitar que os usuários fiquem sobrecarregados com muita informação
Guilhermo Reis (2004) – www.guilhermo.com
Elementos de NavegaElementos de Navegaçção Remotosão Remotos
Índice Remissivo
Para sites que não possuem uma forte organização hierárquica, o índice remissivo pode ser uma 
boa alternativa
• Similarmente à mídia impressa, o índice na web apresenta palavras-chaves ou frases ordenadas 
em ordem alfabética, sem representar nenhuma hierarquia.
• Geralmente apresentam apenas dois ou três níveis de profundidade
• Funcionam bem para usuários que sabem exatamente o nome do item que estão procurando
• A proposta do índice é fornecer acesso direto ao conteúdo, sem passar pela navegação
Desafio:
- Nível de detalhamento do índice: indexação de parágrafos, páginas ou conjunto de páginas?
- Que termos os usuários irão procurar?
Guilhermo Reis (2004) – www.guilhermo.com
Elementos de NavegaElementos de Navegaçção Remotosão Remotos
Guided Tour
Finalidade:
• Instruir o novo usuário sobre o que ele pode encontrar em cada área do site
• Fazer propaganda do site
Balancear entre:
ter idéias de criar um guided tour dinâmico, interativo e criativo
x
reconhecer que na verdade o tour guide não desempenha o papel principal no dia-a-dia 
do uso do site
Guilhermo Reis (2004) – www.guilhermo.com
Navegação GlobalBread Crumb
Cross Content
Close links
Menu hierárquico local
Guided Tour
Índice Remissivo Mapa do Site