O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Diagrama de Navegação e Vocabulário Visual de Garrett

2.168 visualizações

Publicada em

Aula sobre Diagrama de Navegação e Vocabulário Visual de J. J. Garrett
Prof. Luiz Agner
Faculdade Senac Rio

Publicada em: Design
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

Diagrama de Navegação e Vocabulário Visual de Garrett

  1. 1. Diagrama de navegação na AI e IxD LUIZ AGNERLUIZ AGNER Senac RioSenac Rio Arquitetura de InformaçãoArquitetura de Informação
  2. 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. 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. 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. 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. 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. 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. 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. 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. 10. Modelo: para AI e IxDModelo: para AI e IxD
  11. 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. 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. 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. 14. Unidade: a páginaUnidade: a página
  15. 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. 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. 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. 18. Criando relações:Criando relações: conectores e setasconectores e setas
  19. 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. 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. 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. 22. Criando relações:Criando relações: conectores e setasconectores e setas
  23. 23. Colocando rótulosColocando rótulos
  24. 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. 25. ConjuntosConjuntos concorrentesconcorrentes
  26. 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. 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. 28. Elementos comuns:Elementos comuns: áreas iterativasáreas iterativas
  29. 29. ComponentesComponentes reutilizáveis: fluxoreutilizáveis: fluxo
  30. 30. Pontos de decisãoPontos de decisão
  31. 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. 32. ExemploExemplo
  33. 33. ExemploExemplo Alunos: Fauston Luiz Tuanne
  34. 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. 35. Referência do autorReferência do autor Jesse James Garrett

×