Arquitetura de Informação

Sistemas de Navegação

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)

Arquitetura deInformação

Sistemas de navegação

Segundo Nielsen, um sistema de navegação deve, a todo momento, responder a 3 perguntas básicas

Arquitetura deInformação

Sistemas de navegação

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)

Arquitetura deInformação

Sistemas de navegação

Navegação “embedded”

LogotipoBarra de Navegação GlobalMenu LocalBread CrumbCross content (conteúdo cruzado)

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

Arquitetura deInformaçãoOutros exemplos de navegação

Navegação social(indica o comportament

o de outrosusuários)

Arquitetura deInformação

Sistemas de navegação

Navegação por tags(o usuário navega por palavras-chave)

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.

Arquitetura deInformação

Mapa do site

Arquitetura deInformação

Mapa do site

http://writemaps.com/

Ferramenta online:

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/

Arquitetura deInformação

Exemplos de wireframes

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

Arquitetura deInformação

Paper Prototyping – Protótipos de papel

Arquitetura deInformação

Vídeo