SlideShare uma empresa Scribd logo
1 de 35
Diagrama de
navegação na AI
e IxD
LUIZ AGNERLUIZ AGNER
Senac RioSenac Rio
Arquitetura de InformaçãoArquitetura de Informação
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.
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.
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.
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.
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.
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.
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
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..
Modelo: para AI e IxDModelo: para AI e IxD
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.
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.
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..
Unidade: a páginaUnidade: a página
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).
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).
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).
Criando relações:Criando relações:
conectores e setasconectores e setas
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.
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.
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.
Criando relações:Criando relações:
conectores e setasconectores e setas
Colocando rótulosColocando rótulos
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).
ConjuntosConjuntos
concorrentesconcorrentes
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.
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.
Elementos comuns:Elementos comuns:
áreas iterativasáreas iterativas
ComponentesComponentes
reutilizáveis: fluxoreutilizáveis: fluxo
Pontos de decisãoPontos de decisão
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.
ExemploExemplo
ExemploExemplo
Alunos:
Fauston
Luiz
Tuanne
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
Referência do autorReferência do autor
Jesse James Garrett

Mais conteúdo relacionado

Mais procurados

Engenharia De Software
Engenharia De SoftwareEngenharia De Software
Engenharia De SoftwareFelipe Goulart
 
TCC Edson Espíndola Júnior - UX DESIGN – UM ESTUDO SOBRE A CRIAÇÃO DE INTERFA...
TCC Edson Espíndola Júnior - UX DESIGN – UM ESTUDO SOBRE A CRIAÇÃO DE INTERFA...TCC Edson Espíndola Júnior - UX DESIGN – UM ESTUDO SOBRE A CRIAÇÃO DE INTERFA...
TCC Edson Espíndola Júnior - UX DESIGN – UM ESTUDO SOBRE A CRIAÇÃO DE INTERFA...Diego Moreau
 
Design Centrado Usuario
Design Centrado UsuarioDesign Centrado Usuario
Design Centrado UsuarioErico Fileno
 
Aula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de UsuárioAula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de UsuárioAndré Constantino da Silva
 
History of Interaction Design
History of Interaction DesignHistory of Interaction Design
History of Interaction DesignDave Malouf
 
Banco de Dados I - Aula 03 - Conceitos de Sistemas de Banco de Dados
Banco de Dados I - Aula 03 - Conceitos de Sistemas de Banco de DadosBanco de Dados I - Aula 03 - Conceitos de Sistemas de Banco de Dados
Banco de Dados I - Aula 03 - Conceitos de Sistemas de Banco de DadosLeinylson Fontinele
 
Prototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta FidelidadePrototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta FidelidadeErico Fileno
 
Modelagem 3D e Blender
Modelagem 3D e Blender Modelagem 3D e Blender
Modelagem 3D e Blender Carlos Campani
 
Aula 1 - Minicurso sobre Design Centrado no Usuário
Aula 1 - Minicurso sobre Design Centrado no UsuárioAula 1 - Minicurso sobre Design Centrado no Usuário
Aula 1 - Minicurso sobre Design Centrado no UsuárioErico Fileno
 
Ihc2016.2 aula 3 introdução ao design de interação
Ihc2016.2 aula 3   introdução ao design de interaçãoIhc2016.2 aula 3   introdução ao design de interação
Ihc2016.2 aula 3 introdução ao design de interaçãoTicianne Darin
 
Prototipação de software
Prototipação de softwarePrototipação de software
Prototipação de softwareMarcio Costa
 
Fundamentos da Inteligencia Artificial :: Prof Dr. Carlos Estombelo
Fundamentos da Inteligencia Artificial :: Prof Dr. Carlos EstombeloFundamentos da Inteligencia Artificial :: Prof Dr. Carlos Estombelo
Fundamentos da Inteligencia Artificial :: Prof Dr. Carlos EstombeloRogerio P C do Nascimento
 
Aula 1. Introdução: Interface Homem-Máquina
Aula 1. Introdução: Interface Homem-MáquinaAula 1. Introdução: Interface Homem-Máquina
Aula 1. Introdução: Interface Homem-MáquinaSilvia Dotta
 

Mais procurados (20)

Engenharia De Software
Engenharia De SoftwareEngenharia De Software
Engenharia De Software
 
TCC Edson Espíndola Júnior - UX DESIGN – UM ESTUDO SOBRE A CRIAÇÃO DE INTERFA...
TCC Edson Espíndola Júnior - UX DESIGN – UM ESTUDO SOBRE A CRIAÇÃO DE INTERFA...TCC Edson Espíndola Júnior - UX DESIGN – UM ESTUDO SOBRE A CRIAÇÃO DE INTERFA...
TCC Edson Espíndola Júnior - UX DESIGN – UM ESTUDO SOBRE A CRIAÇÃO DE INTERFA...
 
UX Research
UX ResearchUX Research
UX Research
 
Design Centrado Usuario
Design Centrado UsuarioDesign Centrado Usuario
Design Centrado Usuario
 
Aula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de UsuárioAula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de Usuário
 
History of Interaction Design
History of Interaction DesignHistory of Interaction Design
History of Interaction Design
 
Introducao swebok
Introducao swebokIntroducao swebok
Introducao swebok
 
Banco de Dados I - Aula 03 - Conceitos de Sistemas de Banco de Dados
Banco de Dados I - Aula 03 - Conceitos de Sistemas de Banco de DadosBanco de Dados I - Aula 03 - Conceitos de Sistemas de Banco de Dados
Banco de Dados I - Aula 03 - Conceitos de Sistemas de Banco de Dados
 
História do windows
História do windowsHistória do windows
História do windows
 
Fase apresentação
Fase apresentaçãoFase apresentação
Fase apresentação
 
Prototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta FidelidadePrototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta Fidelidade
 
Modelagem 3D e Blender
Modelagem 3D e Blender Modelagem 3D e Blender
Modelagem 3D e Blender
 
Fundamentos design grafico | Insper
Fundamentos design grafico | InsperFundamentos design grafico | Insper
Fundamentos design grafico | Insper
 
Aula 1 - Minicurso sobre Design Centrado no Usuário
Aula 1 - Minicurso sobre Design Centrado no UsuárioAula 1 - Minicurso sobre Design Centrado no Usuário
Aula 1 - Minicurso sobre Design Centrado no Usuário
 
Ihc2016.2 aula 3 introdução ao design de interação
Ihc2016.2 aula 3   introdução ao design de interaçãoIhc2016.2 aula 3   introdução ao design de interação
Ihc2016.2 aula 3 introdução ao design de interação
 
Prototipação de software
Prototipação de softwarePrototipação de software
Prototipação de software
 
Fundamentos da Inteligencia Artificial :: Prof Dr. Carlos Estombelo
Fundamentos da Inteligencia Artificial :: Prof Dr. Carlos EstombeloFundamentos da Inteligencia Artificial :: Prof Dr. Carlos Estombelo
Fundamentos da Inteligencia Artificial :: Prof Dr. Carlos Estombelo
 
Conceitos e princípios de design
Conceitos e princípios de designConceitos e princípios de design
Conceitos e princípios de design
 
IHC - Slide 2 - Usabilidade e Princípios de Design
IHC - Slide 2 - Usabilidade e Princípios de DesignIHC - Slide 2 - Usabilidade e Princípios de Design
IHC - Slide 2 - Usabilidade e Princípios de Design
 
Aula 1. Introdução: Interface Homem-Máquina
Aula 1. Introdução: Interface Homem-MáquinaAula 1. Introdução: Interface Homem-Máquina
Aula 1. Introdução: Interface Homem-Máquina
 

Semelhante a Diagrama de Navegação na AI e IxD

Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptxBack-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptxGelvazioCamargo
 
Documentação de Arquitetura de Software Aplicando o C4 Model
Documentação de Arquitetura  de Software Aplicando o C4 ModelDocumentação de Arquitetura  de Software Aplicando o C4 Model
Documentação de Arquitetura de Software Aplicando o C4 ModelDouglas Alonso
 
Arquitetura Da InformaçãO E Webdesign Danilo Rosisca Pereira
Arquitetura Da InformaçãO E Webdesign   Danilo Rosisca PereiraArquitetura Da InformaçãO E Webdesign   Danilo Rosisca Pereira
Arquitetura Da InformaçãO E Webdesign Danilo Rosisca PereiraDanilo Rosisca Pereira
 
Arquitetura da Informação e Webdesign
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Arquitetura da Informação e WebdesignDanilo Rosisca Pereira
 
Engenharia de Software I - Aula 9
Engenharia de Software I - Aula 9Engenharia de Software I - Aula 9
Engenharia de Software I - Aula 9Alessandro Almeida
 
A nova geração da web karen lowhany
A nova geração da web   karen lowhanyA nova geração da web   karen lowhany
A nova geração da web karen lowhanyKaren Costa
 
Mapas de site, Fluxos de Tarefa, Wireframe e Prototipagem
Mapas de site,  Fluxos de Tarefa,  Wireframe e PrototipagemMapas de site,  Fluxos de Tarefa,  Wireframe e Prototipagem
Mapas de site, Fluxos de Tarefa, Wireframe e PrototipagemRos Galabo, PhD
 
La arquitectura de información del Portal BVS
La arquitectura de información del Portal BVSLa arquitectura de información del Portal BVS
La arquitectura de información del Portal BVSComunidadRedDes
 
Arquitetura da Informação - Sitegramas e Fluxos
Arquitetura da Informação - Sitegramas e FluxosArquitetura da Informação - Sitegramas e Fluxos
Arquitetura da Informação - Sitegramas e Fluxosaiadufmg
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoRodrigo Correia
 
Design para Analise de Dados - Thiago Pessato
Design para Analise de Dados - Thiago PessatoDesign para Analise de Dados - Thiago Pessato
Design para Analise de Dados - Thiago PessatoRoberto Oliveira
 
Arquitetura da Informação sem Wireframe
Arquitetura da Informação sem WireframeArquitetura da Informação sem Wireframe
Arquitetura da Informação sem WireframeRodrigo Freese Gonzatto
 
Slider da aula 01 - Design, Banco de dados e PHP
Slider da aula 01 - Design, Banco de dados e PHPSlider da aula 01 - Design, Banco de dados e PHP
Slider da aula 01 - Design, Banco de dados e PHPFranciosney Souza
 
Arquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de NavegaçãoArquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de Navegaçãopospipoca
 

Semelhante a Diagrama de Navegação na AI e IxD (20)

Vocabulário visual senac 2015
Vocabulário visual   senac 2015Vocabulário visual   senac 2015
Vocabulário visual senac 2015
 
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptxBack-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
 
Documentação de Arquitetura de Software Aplicando o C4 Model
Documentação de Arquitetura  de Software Aplicando o C4 ModelDocumentação de Arquitetura  de Software Aplicando o C4 Model
Documentação de Arquitetura de Software Aplicando o C4 Model
 
Arquitetura Da InformaçãO E Webdesign Danilo Rosisca Pereira
Arquitetura Da InformaçãO E Webdesign   Danilo Rosisca PereiraArquitetura Da InformaçãO E Webdesign   Danilo Rosisca Pereira
Arquitetura Da InformaçãO E Webdesign Danilo Rosisca Pereira
 
Arquitetura da Informação e Webdesign
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Arquitetura da Informação e Webdesign
 
Engenharia de Software I - Aula 9
Engenharia de Software I - Aula 9Engenharia de Software I - Aula 9
Engenharia de Software I - Aula 9
 
Wireframes
WireframesWireframes
Wireframes
 
Ap iii
Ap iiiAp iii
Ap iii
 
A nova geração da web karen lowhany
A nova geração da web   karen lowhanyA nova geração da web   karen lowhany
A nova geração da web karen lowhany
 
Mapas de site, Fluxos de Tarefa, Wireframe e Prototipagem
Mapas de site,  Fluxos de Tarefa,  Wireframe e PrototipagemMapas de site,  Fluxos de Tarefa,  Wireframe e Prototipagem
Mapas de site, Fluxos de Tarefa, Wireframe e Prototipagem
 
Arquitetura da Informacao e Webdesign
Arquitetura da Informacao e WebdesignArquitetura da Informacao e Webdesign
Arquitetura da Informacao e Webdesign
 
La arquitectura de información del Portal BVS
La arquitectura de información del Portal BVSLa arquitectura de información del Portal BVS
La arquitectura de información del Portal BVS
 
Sitegrama e fluxo
Sitegrama e fluxoSitegrama e fluxo
Sitegrama e fluxo
 
Arquitetura da Informação - Sitegramas e Fluxos
Arquitetura da Informação - Sitegramas e FluxosArquitetura da Informação - Sitegramas e Fluxos
Arquitetura da Informação - Sitegramas e Fluxos
 
Esboços na arquitetura de software
Esboços na arquitetura de softwareEsboços na arquitetura de software
Esboços na arquitetura de software
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo Santiago
 
Design para Analise de Dados - Thiago Pessato
Design para Analise de Dados - Thiago PessatoDesign para Analise de Dados - Thiago Pessato
Design para Analise de Dados - Thiago Pessato
 
Arquitetura da Informação sem Wireframe
Arquitetura da Informação sem WireframeArquitetura da Informação sem Wireframe
Arquitetura da Informação sem Wireframe
 
Slider da aula 01 - Design, Banco de dados e PHP
Slider da aula 01 - Design, Banco de dados e PHPSlider da aula 01 - Design, Banco de dados e PHP
Slider da aula 01 - Design, Banco de dados e PHP
 
Arquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de NavegaçãoArquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de Navegação
 

Mais de Luiz Agner

Recommendation Systems and Machine Learning: Mapping the User Experience
Recommendation Systems and Machine Learning: Mapping the User ExperienceRecommendation Systems and Machine Learning: Mapping the User Experience
Recommendation Systems and Machine Learning: Mapping the User ExperienceLuiz Agner
 
Pós Branded Content (1c)
Pós Branded Content (1c)Pós Branded Content (1c)
Pós Branded Content (1c)Luiz Agner
 
WIAD - World Information Architecture Day 2019 - MeetUp PUC-Rio
WIAD - World Information Architecture Day 2019 - MeetUp PUC-RioWIAD - World Information Architecture Day 2019 - MeetUp PUC-Rio
WIAD - World Information Architecture Day 2019 - MeetUp PUC-RioLuiz Agner
 
WIAD - World Information Architecture Day 2019 - Belo Horizonte, MG
WIAD - World Information Architecture Day 2019 - Belo Horizonte, MGWIAD - World Information Architecture Day 2019 - Belo Horizonte, MG
WIAD - World Information Architecture Day 2019 - Belo Horizonte, MGLuiz Agner
 
Marketing digital como instrumento de controle
Marketing digital como instrumento de controleMarketing digital como instrumento de controle
Marketing digital como instrumento de controleLuiz Agner
 
Arquitetura de Informação na era dos espaços mistos e ecossistemas
Arquitetura de Informação na era dos espaços mistos e ecossistemasArquitetura de Informação na era dos espaços mistos e ecossistemas
Arquitetura de Informação na era dos espaços mistos e ecossistemasLuiz Agner
 
Lei de Proteção aos Dados (LGPD)
Lei de Proteção aos Dados (LGPD)Lei de Proteção aos Dados (LGPD)
Lei de Proteção aos Dados (LGPD)Luiz Agner
 
Marco Civil da Internet no Brasil
Marco Civil da Internet no BrasilMarco Civil da Internet no Brasil
Marco Civil da Internet no BrasilLuiz Agner
 
Vigilância Ampliada: Poder e Controle na Cultura Digital
Vigilância Ampliada: Poder e Controle na Cultura DigitalVigilância Ampliada: Poder e Controle na Cultura Digital
Vigilância Ampliada: Poder e Controle na Cultura DigitalLuiz Agner
 
Bridge e Análise da Tarefa em equipe
Bridge e Análise da Tarefa em equipeBridge e Análise da Tarefa em equipe
Bridge e Análise da Tarefa em equipeLuiz Agner
 
Marketing - Revisão de Conceitos
Marketing - Revisão de ConceitosMarketing - Revisão de Conceitos
Marketing - Revisão de ConceitosLuiz Agner
 
Cultura da Internet - segundo M. Castells
Cultura da Internet - segundo M. CastellsCultura da Internet - segundo M. Castells
Cultura da Internet - segundo M. CastellsLuiz Agner
 
Bridge e Group Task Analysis - Arquitetura de Informação
Bridge e Group Task Analysis - Arquitetura de InformaçãoBridge e Group Task Analysis - Arquitetura de Informação
Bridge e Group Task Analysis - Arquitetura de InformaçãoLuiz Agner
 
Avaliação dos apps Coral Visualizer e Polenghi Selection
Avaliação dos apps Coral Visualizer e Polenghi SelectionAvaliação dos apps Coral Visualizer e Polenghi Selection
Avaliação dos apps Coral Visualizer e Polenghi SelectionLuiz Agner
 
Arquitetura de Informação: Projeto TIM
Arquitetura de Informação: Projeto TIMArquitetura de Informação: Projeto TIM
Arquitetura de Informação: Projeto TIMLuiz Agner
 
Arquitetura de Informação: Projeto Imaginarium
Arquitetura de Informação: Projeto ImaginariumArquitetura de Informação: Projeto Imaginarium
Arquitetura de Informação: Projeto ImaginariumLuiz Agner
 
Arquitetura da Informação Pervasiva - Semana Acadêmica FACHA
Arquitetura da Informação Pervasiva  - Semana Acadêmica FACHAArquitetura da Informação Pervasiva  - Semana Acadêmica FACHA
Arquitetura da Informação Pervasiva - Semana Acadêmica FACHALuiz Agner
 
Arquitetura de Informação - DETRAN RJ
Arquitetura de Informação - DETRAN RJArquitetura de Informação - DETRAN RJ
Arquitetura de Informação - DETRAN RJLuiz Agner
 
Arquitetura de Informação - DETRAN RJ
Arquitetura de Informação - DETRAN RJArquitetura de Informação - DETRAN RJ
Arquitetura de Informação - DETRAN RJLuiz Agner
 
Arquitetura de Informação - Boa Diversão
Arquitetura de Informação - Boa DiversãoArquitetura de Informação - Boa Diversão
Arquitetura de Informação - Boa DiversãoLuiz Agner
 

Mais de Luiz Agner (20)

Recommendation Systems and Machine Learning: Mapping the User Experience
Recommendation Systems and Machine Learning: Mapping the User ExperienceRecommendation Systems and Machine Learning: Mapping the User Experience
Recommendation Systems and Machine Learning: Mapping the User Experience
 
Pós Branded Content (1c)
Pós Branded Content (1c)Pós Branded Content (1c)
Pós Branded Content (1c)
 
WIAD - World Information Architecture Day 2019 - MeetUp PUC-Rio
WIAD - World Information Architecture Day 2019 - MeetUp PUC-RioWIAD - World Information Architecture Day 2019 - MeetUp PUC-Rio
WIAD - World Information Architecture Day 2019 - MeetUp PUC-Rio
 
WIAD - World Information Architecture Day 2019 - Belo Horizonte, MG
WIAD - World Information Architecture Day 2019 - Belo Horizonte, MGWIAD - World Information Architecture Day 2019 - Belo Horizonte, MG
WIAD - World Information Architecture Day 2019 - Belo Horizonte, MG
 
Marketing digital como instrumento de controle
Marketing digital como instrumento de controleMarketing digital como instrumento de controle
Marketing digital como instrumento de controle
 
Arquitetura de Informação na era dos espaços mistos e ecossistemas
Arquitetura de Informação na era dos espaços mistos e ecossistemasArquitetura de Informação na era dos espaços mistos e ecossistemas
Arquitetura de Informação na era dos espaços mistos e ecossistemas
 
Lei de Proteção aos Dados (LGPD)
Lei de Proteção aos Dados (LGPD)Lei de Proteção aos Dados (LGPD)
Lei de Proteção aos Dados (LGPD)
 
Marco Civil da Internet no Brasil
Marco Civil da Internet no BrasilMarco Civil da Internet no Brasil
Marco Civil da Internet no Brasil
 
Vigilância Ampliada: Poder e Controle na Cultura Digital
Vigilância Ampliada: Poder e Controle na Cultura DigitalVigilância Ampliada: Poder e Controle na Cultura Digital
Vigilância Ampliada: Poder e Controle na Cultura Digital
 
Bridge e Análise da Tarefa em equipe
Bridge e Análise da Tarefa em equipeBridge e Análise da Tarefa em equipe
Bridge e Análise da Tarefa em equipe
 
Marketing - Revisão de Conceitos
Marketing - Revisão de ConceitosMarketing - Revisão de Conceitos
Marketing - Revisão de Conceitos
 
Cultura da Internet - segundo M. Castells
Cultura da Internet - segundo M. CastellsCultura da Internet - segundo M. Castells
Cultura da Internet - segundo M. Castells
 
Bridge e Group Task Analysis - Arquitetura de Informação
Bridge e Group Task Analysis - Arquitetura de InformaçãoBridge e Group Task Analysis - Arquitetura de Informação
Bridge e Group Task Analysis - Arquitetura de Informação
 
Avaliação dos apps Coral Visualizer e Polenghi Selection
Avaliação dos apps Coral Visualizer e Polenghi SelectionAvaliação dos apps Coral Visualizer e Polenghi Selection
Avaliação dos apps Coral Visualizer e Polenghi Selection
 
Arquitetura de Informação: Projeto TIM
Arquitetura de Informação: Projeto TIMArquitetura de Informação: Projeto TIM
Arquitetura de Informação: Projeto TIM
 
Arquitetura de Informação: Projeto Imaginarium
Arquitetura de Informação: Projeto ImaginariumArquitetura de Informação: Projeto Imaginarium
Arquitetura de Informação: Projeto Imaginarium
 
Arquitetura da Informação Pervasiva - Semana Acadêmica FACHA
Arquitetura da Informação Pervasiva  - Semana Acadêmica FACHAArquitetura da Informação Pervasiva  - Semana Acadêmica FACHA
Arquitetura da Informação Pervasiva - Semana Acadêmica FACHA
 
Arquitetura de Informação - DETRAN RJ
Arquitetura de Informação - DETRAN RJArquitetura de Informação - DETRAN RJ
Arquitetura de Informação - DETRAN RJ
 
Arquitetura de Informação - DETRAN RJ
Arquitetura de Informação - DETRAN RJArquitetura de Informação - DETRAN RJ
Arquitetura de Informação - DETRAN RJ
 
Arquitetura de Informação - Boa Diversão
Arquitetura de Informação - Boa DiversãoArquitetura de Informação - Boa Diversão
Arquitetura de Informação - Boa Diversão
 

Diagrama de Navegação na AI e IxD

  • 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..
  • 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).
  • 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.
  • 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).
  • 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
  • 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.
  • 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