0
Sistema de Navegação Robson Santos, D.Sc.
<ul><li>Sistemas de navegação </li></ul><ul><li>Projetar a estrutura de site requer um balanço cuidadoso de facilidade de ...
<ul><li>Sistemas de navegação </li></ul><ul><li>Teia ou Árvore? </li></ul><ul><li>Diferenças topológicas </li></ul><ul><li...
Arquitetura de Informação <ul><li>Sistemas de navegação </li></ul>
Arquitetura de Informação <ul><li>Sistemas de navegação </li></ul>
Arquitetura de Informação <ul><li>Sistemas de navegação </li></ul>
Recursos de Navegação
<ul><li>Sistemas de navegação </li></ul><ul><li>Sistemas de navegação são compostos por uma variedade de elementos. </li><...
<ul><li>Sistemas de navegação </li></ul><ul><li>À medida que esses elementos puderem ser colocados em cada página, juntos ...
<ul><li>Elementos de navegação integrados </li></ul><ul><li>Nos sistemas de navegação os elementos mais importantes são aq...
<ul><li>Elementos de navegação integrados </li></ul><ul><li>Barra de navegação </li></ul><ul><li>De maneira simplista, a b...
<ul><li>Elementos de navegação integrados </li></ul><ul><li>Barra de navegação </li></ul><ul><li>A posição da barra de nav...
<ul><li>Elementos de navegação integrados </li></ul><ul><li>Quadros </li></ul><ul><li>Os quadros   ( frames ) são uma form...
<ul><li>Elementos de navegação integrados </li></ul><ul><li>Quadros </li></ul><ul><li>Contudo, dependendo da resolução uti...
<ul><li>Elementos de navegação integrados </li></ul><ul><li>Menus  pull-down </li></ul><ul><li>O uso de menus  pull-down  ...
<ul><li>Elementos de navegação integrados </li></ul><ul><li>Menus  pull-down </li></ul><ul><li>Os menus  pop-up  são uma v...
<ul><li>Elementos de navegação remotos </li></ul><ul><li>Ainda há outros elementos de navegação que não estão agregados às...
<ul><li>Elementos de navegação remotos </li></ul><ul><li>Sumários </li></ul><ul><li>De forma similar aos livros e revistas...
<ul><li>Elementos de navegação remotos </li></ul><ul><li>Sumários </li></ul><ul><li>Algumas recomendações para o projeto d...
<ul><li>Elementos de navegação remotos </li></ul><ul><li>Índices </li></ul><ul><li>De maneira similar ao índices encontrad...
<ul><li>Elementos de navegação remotos </li></ul><ul><li>Mapa de navegação </li></ul><ul><li>Mapa de navegação pode ser de...
<ul><li>Elementos de navegação remotos </li></ul><ul><li>Mapa de navegação </li></ul><ul><li>Os mapas do mundo físico não ...
<ul><li>Elementos de navegação remotos </li></ul><ul><li>Visita guiada </li></ul><ul><li>Uma visita guiada serve com um bo...
Refer ê ncia ROSENFELD, Louis, MORVILLE, Peter.  Information architecture for the world wide web . Sebastopol, CA: O'Reill...
www.  ROBSON SANTOS  .com [email_address] Visitem meu blog: interfaceando.blogspot.com
Upcoming SlideShare
Loading in...5
×

Navegação

5,242

Published on

Um dos elementos da arquitetura de informação

Published in: Technology, Business

Transcript of "Navegação"

  1. 1. Sistema de Navegação Robson Santos, D.Sc.
  2. 2. <ul><li>Sistemas de navegação </li></ul><ul><li>Projetar a estrutura de site requer um balanço cuidadoso de facilidade de acesso com a necessidade de estabelecer categorias e subcategorias de informação para benefício dos usuários. </li></ul><ul><li>As categorias devem antecipar os tipos de acesso que o público-alvo do site espera. Elas quebrarão repetidamente em níveis hierárquicos até que uma forma de árvore se estabeleça. </li></ul>Arquitetura de Informação
  3. 3. <ul><li>Sistemas de navegação </li></ul><ul><li>Teia ou Árvore? </li></ul><ul><li>Diferenças topológicas </li></ul><ul><li>Linear </li></ul><ul><li>Não linear </li></ul><ul><li>Mista </li></ul>Arquitetura de Informação
  4. 4. Arquitetura de Informação <ul><li>Sistemas de navegação </li></ul>
  5. 5. Arquitetura de Informação <ul><li>Sistemas de navegação </li></ul>
  6. 6. Arquitetura de Informação <ul><li>Sistemas de navegação </li></ul>
  7. 7. Recursos de Navegação
  8. 8. <ul><li>Sistemas de navegação </li></ul><ul><li>Sistemas de navegação são compostos por uma variedade de elementos. </li></ul><ul><li>Alguns, como barras navegação gráficas e menus pop-up , são implementadas juntamente com o conteúdo. </li></ul><ul><li>Outros, como sumários e mapas de navegação, provêem acesso remoto ao conteúdo dentro da estrutura de organização. </li></ul>Recursos de Navegação
  9. 9. <ul><li>Sistemas de navegação </li></ul><ul><li>À medida que esses elementos puderem ser colocados em cada página, juntos dão forma a um sistema de navegação que tem importantes implicações ao longo da interface do sistema. </li></ul><ul><li>Um sistema de navegação bem projetado é um fator crítico na determinação do sucesso de uma interface. </li></ul>Recursos de Navegação
  10. 10. <ul><li>Elementos de navegação integrados </li></ul><ul><li>Nos sistemas de navegação os elementos mais importantes são aqueles que estão integrados às telas de conteúdo. </li></ul><ul><li>À medida que os usuário se movem pelas telas do sistema, esses são os elementos que são vistos usados repetidas vezes. A maior parte desses elementos se agrupam em duas categorias: barras de navegação e menus pull-down . </li></ul>Recursos de Navegação
  11. 11. <ul><li>Elementos de navegação integrados </li></ul><ul><li>Barra de navegação </li></ul><ul><li>De maneira simplista, a barra de navegação é uma coleção de links de hipertexto agrupados em uma tela. Esses links podem ter o aspecto de texto puro ou serem gráficos, com o uso de imagens, entretanto, ao se optar por barras de navegação gráfica, há que se considerar o tempo de carga das imagens que a compõem e o grau de dificuldade para adicionar ou excluir itens nos menus. </li></ul><ul><li>A opção por usar um tipo ou outro está mais ligada ao aspecto da página do que a questões técnicas. </li></ul>Recursos de Navegação
  12. 12. <ul><li>Elementos de navegação integrados </li></ul><ul><li>Barra de navegação </li></ul><ul><li>A posição da barra de navegação também pode obedecer alguns critérios: posicionar a barra na parte superior da tela possibilita acesso ao sistema de navegação e um senso imediato do contexto do sistema. </li></ul><ul><li>O posicionamento na parte inferior da página assume que a página deve ser toda lida para que se prossiga com a navegação. O posicionamento no topo e no final geralmente é determinado pelo comprimento da tela. </li></ul>Recursos de Navegação
  13. 13. <ul><li>Elementos de navegação integrados </li></ul><ul><li>Quadros </li></ul><ul><li>Os quadros ( frames ) são uma forma de dividir uma mesma janela em várias outras, permitindo que hiperlinks situados em um quadro alterem o conteúdo apresentado em outro. </li></ul><ul><li>Ao permitir a separação do sistema de navegação do conteúdo, os quadros podem prover contextualização e consistência para os usuários. </li></ul>Recursos de Navegação
  14. 14. <ul><li>Elementos de navegação integrados </li></ul><ul><li>Quadros </li></ul><ul><li>Contudo, dependendo da resolução utilizada no monitor do usuário, o uso de quadros pode ocasionar a presença de indesejáveis barras de rolagens que ocultam parte do conteúdo da página. </li></ul><ul><li>Também uma página composta por quadros não é adicionada corretamente em uma lista de favoritos ( bookmark ) pelo fato de ser formada por diversas outras páginas, cada uma acomodada em um quadro com um endereço próprio (URL). </li></ul>Recursos de Navegação
  15. 15. <ul><li>Elementos de navegação integrados </li></ul><ul><li>Menus pull-down </li></ul><ul><li>O uso de menus pull-down permite que o usuário expanda a informação que aparece em uma linha para apresentar várias outras opções. De forma geral, usuários escolhem uma opção no menu e então pressionam um botão “Ir para” ou “Enviar” para se mover para o local de destino. </li></ul><ul><li>Os menus, por outro lado, ocultam as opções e forçam o usuário agir antes que possa ver as opções. </li></ul>Recursos de Navegação
  16. 16. <ul><li>Elementos de navegação integrados </li></ul><ul><li>Menus pull-down </li></ul><ul><li>Os menus pop-up são uma versão mais sofisticada dos pull-down , pois à medida que o usuário move o cursor sobre um palavra ou áreas na tela um menu é disparado. O usuário pode selecionar diretamente uma opção deste menu. </li></ul>Recursos de Navegação
  17. 17. <ul><li>Elementos de navegação remotos </li></ul><ul><li>Ainda há outros elementos de navegação que não estão agregados às telas de conteúdo, podendo ser chamados de elementos remotos de navegação. </li></ul><ul><li>Exemplos são: sumários, índices e mapas de sites, pois são externos à hierarquia e permitem uma visão geral do conteúdo do site. Também é possível produzir elementos de navegação remotos apresentados fora da janela principal. </li></ul>Recursos de Navegação
  18. 18. <ul><li>Elementos de navegação remotos </li></ul><ul><li>Sumários </li></ul><ul><li>De forma similar aos livros e revistas, os sumários para um sistema apresentam os níveis mais elevados da hierarquia. Os sumário provê uma visão ampla do conteúdo e facilita o acesso aleatório a porções segmentadas do conteúdo. </li></ul><ul><li>Um sumário na web pode empregar links de hipertexto para permitir ao usuário o acesso direto às páginas do site. </li></ul><ul><li>No projeto de um uma ferramenta de navegação como um sumário, a forma é menos importante que a função. </li></ul>Recursos de Navegação
  19. 19. <ul><li>Elementos de navegação remotos </li></ul><ul><li>Sumários </li></ul><ul><li>Algumas recomendações para o projeto de sumários incluem: </li></ul><ul><li>Reforçar a hierarquia da informação para que o usuário se torne progressivamente familiar com a organização do conteúdo. </li></ul><ul><li>Facilitar o acesso rápido e direto ao conteúdo para os usuário que sabem o que desejam. </li></ul><ul><li>Evitar oprimir o usuário com informação demais, pois o objetivo é auxiliá-lo, não assustá-lo. </li></ul>Recursos de Navegação
  20. 20. <ul><li>Elementos de navegação remotos </li></ul><ul><li>Índices </li></ul><ul><li>De maneira similar ao índices encontrados em material impresso, um índice digital apresenta palavras-chave ou frases em ordem alfabetica, sem apresentar a hierarquia. Índices funcionam bem para usuários que já sabem o nome do item que estão buscando. </li></ul><ul><li>Ao selecionar itens para compor um índice, deve-se ter em mente que um índice deve apontar somente para telas destino, e não para telas de navegação. </li></ul>Recursos de Navegação
  21. 21. <ul><li>Elementos de navegação remotos </li></ul><ul><li>Mapa de navegação </li></ul><ul><li>Mapa de navegação pode ser definido estreitamente como uma representação gráfica da arquitetura do sistema, excluindo os sumários e os índices que utilizam elementos gráficos para melhorar o apelo estético de ferramentas que são primariamente textuais. </li></ul><ul><li>Um mapa de navegação real apresenta a arquitetura de informação de uma maneira que vai além da representação textual. </li></ul>Recursos de Navegação
  22. 22. <ul><li>Elementos de navegação remotos </li></ul><ul><li>Mapa de navegação </li></ul><ul><li>Os mapas do mundo físico não apresentam a geografia exata da área. </li></ul><ul><li>Precisão e escala são sacrificadas por sinais contextuais representativos que nos auxiliam a encontrar o caminho em meio a um sem número de auto estradas e cruzamentos. </li></ul><ul><li>Além disso, quanto maior o nível de abstração, mais intuitivo é o mapa. </li></ul>Recursos de Navegação
  23. 23. <ul><li>Elementos de navegação remotos </li></ul><ul><li>Visita guiada </li></ul><ul><li>Uma visita guiada serve com um boa ferramenta para introduzir novos usuários às áreas de maior conteúdo de um sistema. </li></ul><ul><li>Uma visita guiada deve apresentar navegação linear, mas a barra de navegação hipertextual pode ser usada para prover flexibilidade adicional. </li></ul><ul><li>A visita deve combinar imagens das telas mais importantes com texto narrativo que explica o que pode ser encontrado em cada área do sistema. </li></ul>Recursos de Navegação
  24. 24. Refer ê ncia ROSENFELD, Louis, MORVILLE, Peter. Information architecture for the world wide web . Sebastopol, CA: O'Reilly, 1998.
  25. 25. www. ROBSON SANTOS .com [email_address] Visitem meu blog: interfaceando.blogspot.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×