Desing de navegação web parte III

4.729 visualizações

Publicada em

0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
4.729
No SlideShare
0
A partir de incorporações
0
Número de incorporações
8
Ações
Compartilhamentos
0
Downloads
62
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Estarei falando dos ultimo capítulos sobre tipo de navegação irei falar de tipo de navegação, tipo de paginas e rotulação a navegação e as próximas apresentação sera sobre a parte dois do livro que entra em framework de design
  • Navegação Principal Navegação Local
  • L-invertido É uma lista de links vertical à esquerda, formando um L invertido Horizontal Navegação Global horizontal ou através de menus dinâmicos Vertical embutido Apresentada como um menu vertical à esquerda ou à direita, e comum embuti r a navegação local entre as opções.
  • Navegação Adaptativa É mais usada para recomendar algo exemplo em site de comercio eletrônico Navegação Links rápidos twitter Navegação de rodapé Esta localizado no final da página normalmente representadas por links textuais.
  • Conecta páginas e funcionalidades que ajudam as pessoas a usarem o site
  • Navegação utilitária em vitaminshoppe.com
  • Páginas navegacionais Direcionam os visitantes para o seu objetivo final Páginas de conteúdo Ler artigos e páginas de produtos Páginas funcionais Realizarem tarefas, conduzir buscas ou verificar email
  • Fornece um visão geral das principais categorias
  • Visão geral de um grupo específico neste caso shirts (camisetas)
  • Criar perfil, se registrar em site cadastrar curriculum
  • “ Se todos sempre concordassem sem como chamar as coisas, a palavra do usuário seria a palavra do designer que seria a palavra do sistema,e o que o usuário digitasse ou apontasse seria mutuamente entendido. Infelizmente, as pessoas frequentemente discordam quanto às palavras que usam nas coisas. ”
  • Fale a língua do usuário O site deve falar em termos que o visitante possa entender naturamente Evite jargões de companhia Evite terminologia técnica Evite rótulos espertos Evite abreviações FAQ, PDF, RSS Use o tom de voz apropriado Site de investimento é mais formal e direcionando aos negocios um site de música e jovem e moderno
  • Granularidade Exemplo rosa branca, rosa vermelha, flores e busques Sintaxe Iniciar com verbo, isso dar um belo ritmo Apresentação Fontes tamanhos e estilos Uso Use o mesmo em diferentes lugares quando se refere a mesma coisa
  • Desing de navegação web parte III

    1. 1. <ul><li>Design de Navegação Web Parte III </li></ul>Wellington Marion Blog http://wellmarion.wordpress.com
    2. 2. <ul><li>Tipos de Navegação </li></ul>“ Tudo deve ser tão simples quanto possível, mas não mais simples” Atribuída a Albert Einstein
    3. 3. Tipos de Navegação
    4. 4. Tipos de Navegação <ul><li>Navegação estrutural
    5. 5. Navegação associativa
    6. 6. Navegação utilitária </li></ul>
    7. 7. Tipos de Navegação <ul><li>Navegação Estrutural </li><ul><li>Conecta uma página a outra baseada na hierarquia do site, e ela pode ser divida em dois tipos; </li></ul></ul>
    8. 8. Tipos de Navegação <ul><li>Navegação Principal </li><ul><li>Pode se chamada de navegação global ou primária .
    9. 9. Fornecer uma visão geral.
    10. 10. Ajuda na orientação
    11. 11. Permite às pessoas trocarem de tópicos </li></ul></ul>
    12. 12. Navegação Principal <ul><li>Navegação principal esta a esquerda, abaixo do logo.
    13. 13. Links utilitários incluídos na direita,tais como mapa do site
    14. 14. Link para busca do site. </li></ul>
    15. 15. Tipos de Navegação <ul><li>Navegação Local </li><ul><li>Também chamada de subnavegação
    16. 16. Usada para acessar níveis mais baixos em uma estrutura, abaixo das páginas da navegação principal </li></ul></ul>
    17. 17. Navegação Local
    18. 18. Tipos de Navegação
    19. 19. Tipos de Navegação
    20. 20. Tipos de Navegação <ul><li>Navegação Associativa </li><ul><li>Conecta páginas com tópicos e conteúdos similares. </li></ul></ul>
    21. 21. Navegação associativas
    22. 22. Outros tipos de navegação <ul><li>Navegação Adaptativa
    23. 23. Navegação Links rápidos
    24. 24. Navegação de rodapé </li></ul>
    25. 25. Tipos de Navegação <ul><li>Navegação Utilitária </li></ul>
    26. 26. Tipos de Navegação
    27. 27. Seletores de países ou regiões
    28. 28. Seletores de países ou regiões
    29. 29. Tipos de Páginas <ul><li>Páginas navegacionais
    30. 30. Páginas de conteúdo
    31. 31. Páginas funcionais </li></ul>
    32. 32. Página Principal (home page)
    33. 33. Páginas de aterrissagem
    34. 34. Página de Galerias
    35. 35. Página de conteúdo
    36. 36. Página de conteúdo
    37. 37. Formulários de submissão
    38. 38. Formulários de busca
    39. 39. Aplicação web
    40. 40. Rotulando a Navegação
    41. 41. “ Se todos sempre concordassem sem como chamar as coisas, a palavra do usuário seria a palavra do designer que seria a palavra do sistema,e o que o usuário digitasse ou apontasse seria mutuamente entendido. Infelizmente, as pessoas frequentemente discordam quanto às palavras que usam nas coisas. ” - George Furnas et al. “ The Vocabulary Problem in Humam-System Communication”
    42. 42. O Problema do Vocabulário
    43. 43. Aspectos de Bons Rótulos <ul><li>Fale a língua do usuário
    44. 44. Evite jargões de companhia
    45. 45. Evite terminologia técnica
    46. 46. Evite rótulos espertos
    47. 47. Evite abreviações
    48. 48. Use o tom de voz apropriado </li></ul>
    49. 49. Rótulos consistentes <ul><li>Granularidade
    50. 50. Sintaxe
    51. 51. Apresentação
    52. 52. Uso </li></ul>
    53. 53. Sistemas de Rotulagem <ul><li>Favoritos
    54. 54. Navegação em aba
    55. 55. Impressão </li></ul>
    56. 56. Traduzindo Rótulos
    57. 57. Obrigado!!!
    58. 58. Referências <ul><li>http://landesend.co.uk
    59. 59. http://cocacola.com
    60. 60. http://dell.com.br
    61. 61. http://bluesoft.com.br
    62. 62. http://www.wwf.org.br
    63. 63. http://www.nytimes.com </li></ul>

    ×