O documento apresenta um diagrama de navegação para descrever a estrutura de navegação entre telas de um site. É apresentado o vocabulário visual utilizado no diagrama, incluindo elementos como páginas, documentos, pilhas, conectores e setas. O diagrama serve para diferentes públicos como gerentes, designers e desenvolvedores, mas cada um requer diferentes níveis de detalhamento.

1. Diagrama de
navegação na AI
e IxD
LUIZ AGNERLUIZ AGNER
Senac RioSenac Rio
Arquitetura de InformaçãoArquitetura de Informação

2. Diagrama de navegaçãoDiagrama de navegação
 Um diagrama é uma representação visualUm diagrama é uma representação visual
sobre um determinado conceito.sobre um determinado conceito.
 O diagrama de navegação demonstra,O diagrama de navegação demonstra,
visualmente, como será a estrutura devisualmente, como será a estrutura de
navegação entre as telas (páginas web). Emnavegação entre as telas (páginas web). Em
específico o de navegação, é tambémespecífico o de navegação, é também
chamado de fluxograma ou diagrama dechamado de fluxograma ou diagrama de
fluxo.fluxo.
 Nele é importante apresentar a ordem dasNele é importante apresentar a ordem das
informações, as decisões e as possíveis ações.informações, as decisões e as possíveis ações.

3. Vocabulário visualVocabulário visual
 é um conjunto de símbolos usadoé um conjunto de símbolos usado
para descrever algo (geralmentepara descrever algo (geralmente
um sistema, estrutura ouum sistema, estrutura ou
processo).processo).
 usado por arquitetos deusado por arquitetos de
informação ou designers deinformação ou designers de
interação para descrever o fluxointeração para descrever o fluxo
da experiência do usuário.da experiência do usuário.

4. Vocabulário visualVocabulário visual
 5 públicos primários:5 públicos primários:
 Gerentes e PatrocinadoresGerentes e Patrocinadores
sentido geral e forma do projeto.sentido geral e forma do projeto.
 ConteudistasConteudistas
obter os requerimentos de conteúdo.obter os requerimentos de conteúdo.
 Designers Visuais e UIDesigners Visuais e UI
contar quantos layouts de página únicoscontar quantos layouts de página únicos
devem ser produzidos e ter noção inicial dadevem ser produzidos e ter noção inicial da
navegação.navegação.

5. Vocabulário visualVocabulário visual
 TecnólogosTecnólogos
obter requerimentos funcionais.obter requerimentos funcionais.
 Arquitetos de Informação eArquitetos de Informação e
Designers de InteraçãoDesigners de Interação
desenvolver navegação detalhada edesenvolver navegação detalhada e
requerimentos de interface para cada página.requerimentos de interface para cada página.

6. ProblemaProblema
 Cada um dos públicos (comCada um dos públicos (com
exceção dos patrocinadores)exceção dos patrocinadores)
precisa de grande detalhamentoprecisa de grande detalhamento
 Os detalhes que cada públicoOs detalhes que cada público
precisa diferem muito entre si.precisa diferem muito entre si.
 A maioria dos detalhes éA maioria dos detalhes é
irrelevante para os outrosirrelevante para os outros
públicos.públicos.

7. SoluçãoSolução
 Limitar o detalhamento noLimitar o detalhamento no
diagrama para ser aplicado dediagrama para ser aplicado de
maneira útil para todos osmaneira útil para todos os
públicos.públicos.
 O diagrama servirá, então, comoO diagrama servirá, então, como
um documento de referência paraum documento de referência para
o desenvolvimento de documentoso desenvolvimento de documentos
mais detalhados.mais detalhados.

8. Outros requisitosOutros requisitos
 Preto e brancoPreto e branco
para serem rascunhados rapidamente à mão.para serem rascunhados rapidamente à mão.
 Ser independente de ferramentasSer independente de ferramentas
 Ser pequeno e enxutoSer pequeno e enxuto

9. Modelo: para AI e IxDModelo: para AI e IxD
 Arquitetura de informação e design deArquitetura de informação e design de
interação sãointeração são dois ladosdois lados da mesmada mesma
moeda.moeda.
 Diagramas de sites contemporâneosDiagramas de sites contemporâneos
envolvemenvolvem ambosambos os lados.os lados.
 Mas para cada um, os objetivos doMas para cada um, os objetivos do
diagrama são levementediagrama são levemente diferentesdiferentes..

10. Modelo: para AI e IxDModelo: para AI e IxD

11. Arquitetura deArquitetura de
InformaçãoInformação
 Quando descrever arquitetura deQuando descrever arquitetura de
informação, o diagrama deve enfatizarinformação, o diagrama deve enfatizar
aa estrutura conceitual e organização deestrutura conceitual e organização de
conteúdoconteúdo..
 Estrutura conceitual não é a mesma coisa queEstrutura conceitual não é a mesma coisa que
estrutura de navegação. O objetivo doestrutura de navegação. O objetivo do
diagrama de arquitetura de informaçãodiagrama de arquitetura de informação não énão é
prover umaprover uma especificação minuciosa daespecificação minuciosa da
navegaçãonavegação; este nível de detalhe é melhor; este nível de detalhe é melhor
realizado em outros documentos, onde érealizado em outros documentos, onde é
menos passível de confundir e distrair.menos passível de confundir e distrair.

12. Design de interaçãoDesign de interação
 Quando descrever design de interação,Quando descrever design de interação,
o diagrama deve enfatizaro diagrama deve enfatizar como ocomo o
usuário flui através de tarefasusuário flui através de tarefas definidasdefinidas
e quais ose quais os passos específicospassos específicos dentrodentro
destas tarefas.destas tarefas.
 Detalhes da interface não devem aparecer noDetalhes da interface não devem aparecer no
diagrama – se você se perceber desenhandodiagrama – se você se perceber desenhando
botões e campos, você está provavelmentebotões e campos, você está provavelmente
carregando o diagrama com excesso decarregando o diagrama com excesso de
detalhes.detalhes.

13. Modelo: para AI e IxDModelo: para AI e IxD
 O vocabulário tem um modeloO vocabulário tem um modelo
conceitual simples que englobaconceitual simples que engloba
arquitetura de informação e design dearquitetura de informação e design de
interaçãointeração::
 O sistema mostraO sistema mostra caminhoscaminhos aoao
usuáriousuário
 O usuário move-se ao longo destesO usuário move-se ao longo destes
caminhos por meio decaminhos por meio de açõesações..
 Estas ações fazem, então, com que oEstas ações fazem, então, com que o
sistema geresistema gere resultadosresultados..

14. Unidade: a páginaUnidade: a página

15. Unidade: a páginaUnidade: a página
 A unidade básica da experiência doA unidade básica da experiência do
usuário na Web é, evidentemente, ausuário na Web é, evidentemente, a
página, que representamos com umpágina, que representamos com um
retângulo simples.retângulo simples.
 Note que a página é uma unidade deNote que a página é uma unidade de
apresentação, não (necessariamente) aapresentação, não (necessariamente) a
unidade de implementação – uma página nounidade de implementação – uma página no
diagrama pode corresponder a múltiplasdiagrama pode corresponder a múltiplas
páginas HTML (como por exemplo em umapáginas HTML (como por exemplo em uma
interface de molduras - frames) ou múltiplasinterface de molduras - frames) ou múltiplas
unidades de código (como em um server-sideunidades de código (como em um server-side
include ou implementações dinâmicas a partirinclude ou implementações dinâmicas a partir
de bancos de dados).de bancos de dados).

16. DocumentosDocumentos
 Em adição às páginas, temos tambémEm adição às páginas, temos também
os arquivos, parcelas de dados semos arquivos, parcelas de dados sem
propriedades de navegação.propriedades de navegação.
 DocumentosDocumentos são fornecidos ao usuáriosão fornecidos ao usuário
para uso fora do ambiente dopara uso fora do ambiente do
navegador (como arquivos de áudio enavegador (como arquivos de áudio e
vídeo, documentos stand-alone comovídeo, documentos stand-alone como
PDFs, ou executáveis).PDFs, ou executáveis).

17. PilhasPilhas
 Use a pilha de páginas para indicar umUse a pilha de páginas para indicar um
grupo de páginas funcionalmentegrupo de páginas funcionalmente
idênticas cujas propriedades deidênticas cujas propriedades de
navegação são imateriais ànavegação são imateriais à
macroestrutura do site.macroestrutura do site.
 Similarmente, a pilha de documentosSimilarmente, a pilha de documentos
representa o grupo de documentos querepresenta o grupo de documentos que
recebem tratamento de navegaçãorecebem tratamento de navegação
idêntico e podem ser classificados comoidêntico e podem ser classificados como
uma entidade única (como uma coleçãouma entidade única (como uma coleção
de jogos para baixar ou uma bibliotecade jogos para baixar ou uma biblioteca
de manuais em PDF).de manuais em PDF).

18. Criando relações:Criando relações:
conectores e setasconectores e setas

19. Criando relações:Criando relações:
conectores e setasconectores e setas
 Relações entre elementos sãoRelações entre elementos são
simbolizadas por linhas simples ousimbolizadas por linhas simples ou
conectores.conectores.
 Estas relações conceituais sãoEstas relações conceituais são
traduzidas como relações de navegaçãotraduzidas como relações de navegação
– mas nem todas as relações de– mas nem todas as relações de
navegação vão aparecer no diagrama.navegação vão aparecer no diagrama.
 No caso da arquitetura de informação, estasNo caso da arquitetura de informação, estas
relações são comumente refletidas narelações são comumente refletidas na
organização hierárquica de páginas emorganização hierárquica de páginas em
árvores. No entanto, isto não é obrigatório.árvores. No entanto, isto não é obrigatório.

20. Criando relações:Criando relações:
conectores e setasconectores e setas
 Quando diagramamos um design deQuando diagramamos um design de
interação, nossos conectores tambéminteração, nossos conectores também
precisam demonstrar direção para indicarprecisam demonstrar direção para indicar
como o usuário se moverá em meio aocomo o usuário se moverá em meio ao
sistema para completar uma tarefa particular.sistema para completar uma tarefa particular.
Transformar os conectores em setas resolveTransformar os conectores em setas resolve
bem a questão.bem a questão.
 Usamos os termos downstream e upstreamUsamos os termos downstream e upstream
para nos referirmos à posição dos elementospara nos referirmos à posição dos elementos
relativos a este movimento para frente.relativos a este movimento para frente.

21. Criando relações:Criando relações:
conectores e setasconectores e setas
 Note que estas setas não são como setasNote que estas setas não são como setas
indicando uma rua de uma mão, mas como asindicando uma rua de uma mão, mas como as
setas que indicam o caminho na praça desetas que indicam o caminho na praça de
alimentação de um shopping center.alimentação de um shopping center.
 O usuário não está proibido de se mover naO usuário não está proibido de se mover na
direção contrária; a seta apenas indica adireção contrária; a seta apenas indica a
direção em que o usuário está propenso adireção em que o usuário está propenso a
seguir.seguir.

22. Criando relações:Criando relações:
conectores e setasconectores e setas

23. Colocando rótulosColocando rótulos

24. ConjuntosConjuntos
concorrentesconcorrentes
 Um conjunto concorrente (representadoUm conjunto concorrente (representado
por um semicírculo) é usado em casospor um semicírculo) é usado em casos
onde a ação do usuário gera resultadosonde a ação do usuário gera resultados
múltiplos simultâneos (como a apariçãomúltiplos simultâneos (como a aparição
de janelas pop-up ao mesmo tempo emde janelas pop-up ao mesmo tempo em
que uma página é carregada na janelaque uma página é carregada na janela
principal, ou o aparecimento de umaprincipal, ou o aparecimento de uma
página enquanto um arquivo estápágina enquanto um arquivo está
sendo baixado).sendo baixado).

25. ConjuntosConjuntos
concorrentesconcorrentes

26. Separando: pontosSeparando: pontos
de continuidadede continuidade
Para possibilitar que nossos diagramas sejam separados em partes fáceis de
digerir, usamos pontos de continuação (colchetes) para ligar os intervalos entre as
páginas.

27. Elementos comuns:Elementos comuns:
áreasáreas
O elemento área (um retângulo de bordas arredondadas) é usado para identificar
um grupo de páginas que possui um ou mais atributos comuns (como aparecer
num pop-up ou ter um tratamento gráfico semelhante).
Devemos usar labels para identificar esses atributos ou (como os conectores), fazer referências a notas anexadas ao
documento se há muito a dizer.

28. Elementos comuns:Elementos comuns:
áreas iterativasáreas iterativas

29. ComponentesComponentes
reutilizáveis: fluxoreutilizáveis: fluxo

30. Pontos de decisãoPontos de decisão

31. Seletor condicionalSeletor condicional
O seletor condicional
(representado por um trapézio)
funciona assim: os vários
caminhos abaixo não são
mutuamente exclusivos,
qualquer número de caminhos
que satisfaçam as condições
pode ser apresentado ao
usuário. A aplicação mais
comum do seletor condicional é
em resultados de busca.
Neste caso, a página de resultados
de busca aparece acima do seletor.
A condição é o critério de busca
utilizado pelo usuário; os caminhos
abaixo levam às páginas de
conteúdo indexadas pela
ferramenta.

32. ExemploExemplo

33. ExemploExemplo
Alunos:
Fauston
Luiz
Tuanne

34. BibliografiaBibliografia
 A visual vocabulary for describingA visual vocabulary for describing
info architecture and interactioninfo architecture and interaction
designdesign
 By Jesse James GarrettBy Jesse James Garrett
 Tradução e adaptação: Livia Labate e LauraTradução e adaptação: Livia Labate e Laura
Cretton LessaCretton Lessa
 Fonte -Fonte -
http://iainstitute.org/pt/translations/000332.htmlhttp://iainstitute.org/pt/translations/000332.html

35. Referência do autorReferência do autor
Jesse James Garrett