SlideShare une entreprise Scribd logo
1  sur  9
Télécharger pour lire hors ligne
Arquitetura da Informação
        - Sitegrama e Fluxo




            ©2012 Cláudio Diniz Alves e Janicy Rocha
O sitegrama (também chamado de mapa do site) e o fluxo das
transações são os documentos com maior nível de abstração
entre os tipos de documentos de especificação da Arquitetura
de Informação.
Juntos eles têm a função de apresentar uma visão geral do
website mostrando o relacionamento entre as páginas.
O sitegrama é o mais clássico dos documentos da
Arquitetura de Informação. Trata-se de um diagrama que
representa a organização hierárquica do website e que
contém todas as páginas de conteúdo e a entrada de todas
as transações. Normalmente são elaborados através de
diagramas em árvore, especialmente para se representar
hierarquias.
O fluxo das transações é um diagrama
que representa o modelo de interação do usuário ao executar
as transações do website. Contém todas as páginas das
transações incluindo mensagens de erro e sucesso. Para essa
representação são utilizados fluxogramas que indicam como
ocorrem as transações entre as páginas.
quem usa sitegramas e fluxo de
transações?
• Arquitetos de Informação: usam para organizar as informações e
apresentar a hierarquia e a navegação entre as páginas do website.

• Diretores de Arte e Designers Gráficos: usam para definir o
número de tipos de telas e para desenhar graficamente os menus
do website.

• Redatores e Produtores de Conteúdo: usam para compreender os
requisitos de conteúdo do website.

• Programadores e Analistas: usam para definir os requisitos
técnicos e a modelagem do software e do banco de dados do
website.
REFERÊNCIAS

REIS, G. A. Centrando a Arquitetura de Informação no usuário. São Paulo: Universidade
de São Paulo – USP. Escola de Comunicação e Artes. SP, 2007. Disseração (Mestrado em
Ciência da Informação). 250p.

ROSENFELD, L.; MORVILLE, P. Information architecture for the World Wide Web.
Sebastopol. CA: O’Reilly, 2007. 508p.

Contenu connexe

Similaire à Arquitetura da Informação - Sitegramas e Fluxos

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
pospipoca
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo Santiago
Rodrigo Correia
 
Introducao a arquitetura de informacao
Introducao a arquitetura de informacaoIntroducao a arquitetura de informacao
Introducao a arquitetura de informacao
eramos7senac
 
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
SENAC SC
 
Introducao à Arquitetura de Informacao
Introducao à Arquitetura de InformacaoIntroducao à Arquitetura de Informacao
Introducao à Arquitetura de Informacao
duradez
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informação
renatamruiz
 

Similaire à Arquitetura da Informação - Sitegramas e Fluxos (20)

Wireframes
WireframesWireframes
Wireframes
 
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
 
Aulas 03 e 04 - Arquitetura de Informação
Aulas 03 e 04 - Arquitetura de InformaçãoAulas 03 e 04 - Arquitetura de Informação
Aulas 03 e 04 - Arquitetura de Informação
 
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
 
Diagrama de Navegação e Vocabulário Visual de Garrett
Diagrama de Navegação e Vocabulário Visual de GarrettDiagrama de Navegação e Vocabulário Visual de Garrett
Diagrama de Navegação e Vocabulário Visual de Garrett
 
Web Design > Aula 00
Web Design > Aula 00Web Design > Aula 00
Web Design > Aula 00
 
Vocabulário visual senac 2015
Vocabulário visual   senac 2015Vocabulário visual   senac 2015
Vocabulário visual senac 2015
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo Santiago
 
Introducao a arquitetura de informacao
Introducao a arquitetura de informacaoIntroducao a arquitetura de informacao
Introducao a arquitetura de informacao
 
Wireframes
WireframesWireframes
Wireframes
 
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
 
Arquitetura da Informacao e Webdesign
Arquitetura da Informacao e WebdesignArquitetura da Informacao e Webdesign
Arquitetura da Informacao e Webdesign
 
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 de Informação
Arquitetura de InformaçãoArquitetura de Informação
Arquitetura de Informação
 
Introducao à Arquitetura de Informacao
Introducao à Arquitetura de InformacaoIntroducao à Arquitetura de Informacao
Introducao à Arquitetura de Informacao
 
Arquitetura de Informação e Usabilidade
Arquitetura de Informação e UsabilidadeArquitetura de Informação e Usabilidade
Arquitetura de Informação e Usabilidade
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informação
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
 

Plus de aiadufmg (20)

Linked in parte 2
Linked in   parte 2Linked in   parte 2
Linked in parte 2
 
Last fm parte 2
Last fm   parte 2Last fm   parte 2
Last fm parte 2
 
Delicious parte 2
Delicious   parte 2Delicious   parte 2
Delicious parte 2
 
Skoob parte 2
Skoob   parte 2Skoob   parte 2
Skoob parte 2
 
Livemocha parte 2
Livemocha   parte 2Livemocha   parte 2
Livemocha parte 2
 
LinkedIn - parte 2
LinkedIn - parte 2LinkedIn - parte 2
LinkedIn - parte 2
 
Last Fm - parte 2
Last Fm - parte 2Last Fm - parte 2
Last Fm - parte 2
 
Delicious - parte 2
Delicious - parte 2Delicious - parte 2
Delicious - parte 2
 
Livemocha - parte 2
Livemocha - parte 2Livemocha - parte 2
Livemocha - parte 2
 
Skoob - parte 2
Skoob - parte 2Skoob - parte 2
Skoob - parte 2
 
Avaliacao de Interfaces
Avaliacao de InterfacesAvaliacao de Interfaces
Avaliacao de Interfaces
 
Acessibilidade em bibliotecas digitais
Acessibilidade em bibliotecas digitaisAcessibilidade em bibliotecas digitais
Acessibilidade em bibliotecas digitais
 
Sites acessíveis
Sites acessíveisSites acessíveis
Sites acessíveis
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
Design Universal
Design UniversalDesign Universal
Design Universal
 
Deficiências e Tecnologias Assistivas
Deficiências e Tecnologias AssistivasDeficiências e Tecnologias Assistivas
Deficiências e Tecnologias Assistivas
 
Flickr
FlickrFlickr
Flickr
 
Ai ad aula 6_atividadecardsorting
Ai ad aula 6_atividadecardsortingAi ad aula 6_atividadecardsorting
Ai ad aula 6_atividadecardsorting
 
Skoob
SkoobSkoob
Skoob
 
Livemocha
LivemochaLivemocha
Livemocha
 

Arquitetura da Informação - Sitegramas e Fluxos

  • 1. Arquitetura da Informação - Sitegrama e Fluxo ©2012 Cláudio Diniz Alves e Janicy Rocha
  • 2. O sitegrama (também chamado de mapa do site) e o fluxo das transações são os documentos com maior nível de abstração entre os tipos de documentos de especificação da Arquitetura de Informação. Juntos eles têm a função de apresentar uma visão geral do website mostrando o relacionamento entre as páginas.
  • 3. O sitegrama é o mais clássico dos documentos da Arquitetura de Informação. Trata-se de um diagrama que representa a organização hierárquica do website e que contém todas as páginas de conteúdo e a entrada de todas as transações. Normalmente são elaborados através de diagramas em árvore, especialmente para se representar hierarquias.
  • 4.
  • 5.
  • 6. O fluxo das transações é um diagrama que representa o modelo de interação do usuário ao executar as transações do website. Contém todas as páginas das transações incluindo mensagens de erro e sucesso. Para essa representação são utilizados fluxogramas que indicam como ocorrem as transações entre as páginas.
  • 7.
  • 8. quem usa sitegramas e fluxo de transações? • Arquitetos de Informação: usam para organizar as informações e apresentar a hierarquia e a navegação entre as páginas do website. • Diretores de Arte e Designers Gráficos: usam para definir o número de tipos de telas e para desenhar graficamente os menus do website. • Redatores e Produtores de Conteúdo: usam para compreender os requisitos de conteúdo do website. • Programadores e Analistas: usam para definir os requisitos técnicos e a modelagem do software e do banco de dados do website.
  • 9. REFERÊNCIAS REIS, G. A. Centrando a Arquitetura de Informação no usuário. São Paulo: Universidade de São Paulo – USP. Escola de Comunicação e Artes. SP, 2007. Disseração (Mestrado em Ciência da Informação). 250p. ROSENFELD, L.; MORVILLE, P. Information architecture for the World Wide Web. Sebastopol. CA: O’Reilly, 2007. 508p.