arquitetura de informação - sistemas de navegação
TRANSCRIPT
![Page 1: Arquitetura de Informação - Sistemas de Navegação](https://reader035.vdocuments.mx/reader035/viewer/2022062300/555b3205d8b42ae82e8b4f52/html5/thumbnails/1.jpg)
Arquitetura de Informação
Sistemas de Navegação
![Page 2: Arquitetura de Informação - Sistemas de Navegação](https://reader035.vdocuments.mx/reader035/viewer/2022062300/555b3205d8b42ae82e8b4f52/html5/thumbnails/2.jpg)
Arquitetura deInformação
Descobrindo o conteúdo - Sistemas de navegação
Estrutura e organização tem a ver com a construção de ambientes.
Sistema de navegação é sobre adicionar portas e janelas.
(Peter Morville & Louis Rosenfeld, in Information Architecture for the World Wide Web)
![Page 3: Arquitetura de Informação - Sistemas de Navegação](https://reader035.vdocuments.mx/reader035/viewer/2022062300/555b3205d8b42ae82e8b4f52/html5/thumbnails/3.jpg)
Arquitetura deInformação
Sistemas de navegação
Segundo Nielsen, um sistema de navegação deve, a todo momento, responder a 3 perguntas básicas
![Page 4: Arquitetura de Informação - Sistemas de Navegação](https://reader035.vdocuments.mx/reader035/viewer/2022062300/555b3205d8b42ae82e8b4f52/html5/thumbnails/4.jpg)
Arquitetura deInformação
Sistemas de navegação
![Page 5: Arquitetura de Informação - Sistemas de Navegação](https://reader035.vdocuments.mx/reader035/viewer/2022062300/555b3205d8b42ae82e8b4f52/html5/thumbnails/5.jpg)
Arquitetura deInformação
Sistemas de navegação
Navegação “embedded” (formada pelos elementos de navegação que são apresentados integrados ao site.O objetivo é oferecer contexto e flexibilidade)
![Page 6: Arquitetura de Informação - Sistemas de Navegação](https://reader035.vdocuments.mx/reader035/viewer/2022062300/555b3205d8b42ae82e8b4f52/html5/thumbnails/6.jpg)
Arquitetura deInformação
Sistemas de navegação
Navegação “embedded”
LogotipoBarra de Navegação GlobalMenu LocalBread CrumbCross content (conteúdo cruzado)
![Page 7: Arquitetura de Informação - Sistemas de Navegação](https://reader035.vdocuments.mx/reader035/viewer/2022062300/555b3205d8b42ae82e8b4f52/html5/thumbnails/7.jpg)
Arquitetura deInformação
Sistemas de navegação
Navegação suplementar(sua função é oferecer caminhos complementares para se encontrar o conteúdo e realizar tarefas)
Mapa do Site
Índices (A-Z)
Rodapés
Guias e Tutoriais
![Page 8: Arquitetura de Informação - Sistemas de Navegação](https://reader035.vdocuments.mx/reader035/viewer/2022062300/555b3205d8b42ae82e8b4f52/html5/thumbnails/8.jpg)
Arquitetura deInformaçãoOutros exemplos de navegação
Navegação social(indica o comportament
o de outrosusuários)
![Page 9: Arquitetura de Informação - Sistemas de Navegação](https://reader035.vdocuments.mx/reader035/viewer/2022062300/555b3205d8b42ae82e8b4f52/html5/thumbnails/9.jpg)
Arquitetura deInformação
Sistemas de navegação
Navegação por tags(o usuário navega por palavras-chave)
![Page 10: Arquitetura de Informação - Sistemas de Navegação](https://reader035.vdocuments.mx/reader035/viewer/2022062300/555b3205d8b42ae82e8b4f52/html5/thumbnails/10.jpg)
Arquitetura deInformação
Mapa do site
O mapa do site é o mapa da arquitetura e inclui todas as páginase seções de conteúdo.
Este documento será o guia para o desenvolvimento do projeto,desde a criação de wireframes até o desenvolvimento.
![Page 11: Arquitetura de Informação - Sistemas de Navegação](https://reader035.vdocuments.mx/reader035/viewer/2022062300/555b3205d8b42ae82e8b4f52/html5/thumbnails/11.jpg)
Arquitetura deInformação
Mapa do site
![Page 12: Arquitetura de Informação - Sistemas de Navegação](https://reader035.vdocuments.mx/reader035/viewer/2022062300/555b3205d8b42ae82e8b4f52/html5/thumbnails/12.jpg)
Arquitetura deInformação
Mapa do site
http://writemaps.com/
Ferramenta online:
![Page 13: Arquitetura de Informação - Sistemas de Navegação](https://reader035.vdocuments.mx/reader035/viewer/2022062300/555b3205d8b42ae82e8b4f52/html5/thumbnails/13.jpg)
Arquitetura deInformação
Wireframes
É o rascunho das páginas do site.
Deve mostrar quais os elementos de navegação,quais os elementos de maior destaque do conteúdo e
a ordenação e o agrupamento de componentes do conteúdo, além de como priorizá-los.
Pode indicar mas não define o posicionamento dos elementos na tela ou os estilos
Exemplo:
http://www.ivogomes.com/blog/wireframes/
![Page 14: Arquitetura de Informação - Sistemas de Navegação](https://reader035.vdocuments.mx/reader035/viewer/2022062300/555b3205d8b42ae82e8b4f52/html5/thumbnails/14.jpg)
Arquitetura deInformação
Exemplos de wireframes
![Page 15: Arquitetura de Informação - Sistemas de Navegação](https://reader035.vdocuments.mx/reader035/viewer/2022062300/555b3205d8b42ae82e8b4f52/html5/thumbnails/15.jpg)
![Page 16: Arquitetura de Informação - Sistemas de Navegação](https://reader035.vdocuments.mx/reader035/viewer/2022062300/555b3205d8b42ae82e8b4f52/html5/thumbnails/16.jpg)
![Page 17: Arquitetura de Informação - Sistemas de Navegação](https://reader035.vdocuments.mx/reader035/viewer/2022062300/555b3205d8b42ae82e8b4f52/html5/thumbnails/17.jpg)
Gliffy
www.gliffy.com
Omni Graffle
http://www.omnigroup.com/applications/omnigraffle/
Arquitetura deInformação
Softwares para criação de wireframes
Axure
http://www.axure.com/
Microsoft Visio
http://office.microsoft.com/en-us/FX010857981033.aspx
![Page 18: Arquitetura de Informação - Sistemas de Navegação](https://reader035.vdocuments.mx/reader035/viewer/2022062300/555b3205d8b42ae82e8b4f52/html5/thumbnails/18.jpg)
Arquitetura deInformação
Paper Prototyping – Protótipos de papel
![Page 19: Arquitetura de Informação - Sistemas de Navegação](https://reader035.vdocuments.mx/reader035/viewer/2022062300/555b3205d8b42ae82e8b4f52/html5/thumbnails/19.jpg)
Arquitetura deInformação
Vídeo