SitemapA Beleza da Informação OrganizadaAlexandre Horbach - Nós Lab - Março de 2012
1. Arquitetura de Informação• O design estrutural de ambientes de informação  compartilhada;• A combinação de organização,...
O que é UX Design?User Experience DesignA criação e sincronização dos elementos que afetama experiência dos usuários com u...
Trabalho invisível        InterfaceArquitetura de Informação
Sistemas complexos                                               Metas de negócio, verba,                                 ...
Necessidades e comportamentos do usuário                    • Muitas vezes não sabem o que Usuário faz uma      procuram; ...
Necessidades e comportamentos do usuário                                                        Pergunta 5                ...
Desafios de organizar a informaçãoVolume                                     1992                                    Intern...
Desafios de organizar a informação• Ambiguidade• Heterogeneidade• Diferentes   perspectivas• Políticas   internas
Esquemas de organizaçãoExatos                    Ambíguos• Alfabético              • Assunto• Cronológico             • Ta...
Alfabético
Alfabético
CronológicoCronológico
Cronológico
Geográfico
Geográfico
Assunto
Assunto
Tarefa
Tarefa
Público
Público
Metáfora
Híbrido
Híbrido
Estruturas de organizaçãoHierarquia                              Plantas           Flores                          Árvores...
Estruturas de organizaçãoHierarquia - Estreita e profunda
Estruturas de organizaçãoHierarquia - Ampla e rasa
Estruturas de organizaçãoModelo de banco de dados                             A                                    B Nome:...
Estruturas de organizaçãoHipertexto
Estruturas de organizaçãoClassificação social
Rotulando• Estreite   o âmbito sempre que puder;• Use rótulos que são familiares a maior parte dos usuários.• Desenvolva  ...
RotulandoConsistência•   Estilo                                     •   Granularidade    Pontuação, caixa alta/baixa      ...
RotulandoFontes de rótulos•O   seu próprio site• Sites   concorrentes• Vocabulário       controlado e thesaurus• Card    s...
Os Elementos da Experiência do UsuárioConcreto                             Superfície                             Esquelet...
Os Elementos da Experiência do UsuárioConcreto                             Superfície                             Esquelet...
Os Elementos da Experiência do UsuárioConcreto                             Superfície                             Esquelet...
Os Elementos da Experiência do UsuárioConcreto                             Superfície                             Esquelet...
Os Elementos da Experiência do UsuárioConcreto                             Superfície                            Design da...
Os Elementos da Experiência do UsuárioConcreto                            Design Visual                            Design ...
Processo e Entregáveis       AI                UI            Branding•   Inventário    •   Wireframes   •   Direção de    ...
Processo e Entregáveis        Front-end            Back-endeo
Inventário de conteúdo
Modelos conceituais
Fluxogramas                                                                                                               ...
Jesse James GarrettUm vocabuláriovisual para descrevera arquitetura deinformação e designde interação.Diagramas são ferram...
Vocabulário visual•   Gerentes de projeto    os utilizam para obter um sentido geral do escopo e forma do projeto.•   Gera...
Vocabulário visual•   Ser compatível com um quadro negro/branco•   Ser independente de ferramentas•   Ser pequeno e enxuto
Vocabulário visualO diagrama foca na macroestrutura, mostrando somente o detalhenecessário para que os membros do time ten...
2. Desenhando o sitemap  Diagrama de arquitetura
Páginas, arquivos e conjuntos                          Pilha de     Pilha de     Página   Documento                       ...
Conectores                   A       B           C           D           Estrutura de árvore simples   E           F      ...
Setas        Seta indica movimento        Movimento contrário não é        permitido
Áreas condicionais
Pontos de continuidade                          continua de:          A               A                                   ...
NumeraçãoAPáginaInicialB         C          D      EQuem      Produtos   Blog   AjudaSomos
NumeraçãoAPáginaInicialB                C          D      EQuem             Produtos   Blog   AjudaSomos          B.1     ...
NumeraçãoAPáginaInicialB                C                   D              EQuem             Produtos            Blog     ...
Arquivo para dowload A Página Inicial B                C                      D              E Quem             Produtos  ...
Pilha de páginas A Página Inicial B                                               C               D           E Quem      ...
Agrupador de conteúdo A Página Inicial B                                                       C                      D   ...
Ponto de continuidade A Página Inicial                                                                                    ...
Ícones A     F     Fale     Conosco
Área Condicional A     F         G     Fale      Minha Área     Conosco                        G.1                        ...
Cross-link A     F         G     Fale      Minha Área     Conosco                        G.1                        Editar...
Link externo A     F         G                     Link externo     Fale      Minha Área            Twitter     Conosco   ...
Legenda A     F         G                     Link externo     Fale      Minha Área            Twitter     Conosco        ...
APáginaInicialB                                                       C                                   D               ...
B                                                        C                                                                ...
Sitemap: A Beleza da Informação Organizada
Sitemap: A Beleza da Informação Organizada
Sitemap: A Beleza da Informação Organizada
Sitemap: A Beleza da Informação Organizada
Sitemap: A Beleza da Informação Organizada
Sitemap: A Beleza da Informação Organizada
Sitemap: A Beleza da Informação Organizada
Sitemap: A Beleza da Informação Organizada
Sitemap: A Beleza da Informação Organizada
Sitemap: A Beleza da Informação Organizada
Upcoming SlideShare
Loading in …5
×

Sitemap: A Beleza da Informação Organizada

2,086 views
1,981 views

Published on

Published in: Design
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,086
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Sitemap: A Beleza da Informação Organizada

  1. 1. SitemapA Beleza da Informação OrganizadaAlexandre Horbach - Nós Lab - Março de 2012
  2. 2. 1. Arquitetura de Informação• O design estrutural de ambientes de informação compartilhada;• A combinação de organização, rotulação, busca e sistemas de navegação dentro de websites e intranets;• A arte e ciência de moldar produtos de informação e experiências a fim de apoiar a usabilidade e a encontrabilidade;• Uma emergente disciplina e comunidade focada em trazer princípios de design e arquitetura para o ambiente digital.
  3. 3. O que é UX Design?User Experience DesignA criação e sincronização dos elementos que afetama experiência dos usuários com uma empresa emparticular, com a intenção de influenciar suaspercepções e comportamentos.Tocar Ouvir Cheirar Interagir Pessoas Interfaces digitais
  4. 4. Trabalho invisível InterfaceArquitetura de Informação
  5. 5. Sistemas complexos Metas de negócio, verba, política, cultura, tecnologia, Contexto recursos, restrições Conteúdo Usuários Documentos, tipos de Público, tarefas, necessidades,informação, volume, estrutura comportamento de busca por existente informação, experiência
  6. 6. Necessidades e comportamentos do usuário • Muitas vezes não sabem o que Usuário faz uma procuram; pergunta • Mudam de ideia em relação ao que estão procurando; Mágica • Não encontram o que estavam procurando, mas se satisfazem com uma parte da informação. Usuário recebe a resposta
  7. 7. Necessidades e comportamentos do usuário Pergunta 5 Pergunta 3 Pensamento Pensamento Pensamento Pensamento Pergunta 2 Pergunta 4Pergunta 1 Saída
  8. 8. Desafios de organizar a informaçãoVolume 1992 Internet Tempo3.000 BC
  9. 9. Desafios de organizar a informação• Ambiguidade• Heterogeneidade• Diferentes perspectivas• Políticas internas
  10. 10. Esquemas de organizaçãoExatos Ambíguos• Alfabético • Assunto• Cronológico • Tarefa• Geográfico • Público • Metafórico • Híbrido
  11. 11. Alfabético
  12. 12. Alfabético
  13. 13. CronológicoCronológico
  14. 14. Cronológico
  15. 15. Geográfico
  16. 16. Geográfico
  17. 17. Assunto
  18. 18. Assunto
  19. 19. Tarefa
  20. 20. Tarefa
  21. 21. Público
  22. 22. Público
  23. 23. Metáfora
  24. 24. Híbrido
  25. 25. Híbrido
  26. 26. Estruturas de organizaçãoHierarquia Plantas Flores Árvores Anuais Perenes Coníferas Caducifólias
  27. 27. Estruturas de organizaçãoHierarquia - Estreita e profunda
  28. 28. Estruturas de organizaçãoHierarquia - Ampla e rasa
  29. 29. Estruturas de organizaçãoModelo de banco de dados A B Nome: João da Silva Nome: Maria Cunha Rua: Independência, 334 Rua: Alberto Bins, 766 Cidade: Porto Alegre Cidade: Porto Alegre Estado: Rio Grande do Sul Estado: Rio Grande do Sul CEP: 90078-000 CEP: 90045-001 Telefone: (51) 3331.3142 Telefone: (51) 3331.3142
  30. 30. Estruturas de organizaçãoHipertexto
  31. 31. Estruturas de organizaçãoClassificação social
  32. 32. Rotulando• Estreite o âmbito sempre que puder;• Use rótulos que são familiares a maior parte dos usuários.• Desenvolva sistemas consistentes de rótulos, não rótulos;
  33. 33. RotulandoConsistência• Estilo • Granularidade Pontuação, caixa alta/baixa Utilizar rótulos que são aproximadamente iguais em sua especificidade• Apresentação Aplicação coerente de fontes, tamanhos de fonte, cores, espaços, • Abrangência agrupamentos Deixar claro o âmbito, evitar lacunas no sistema de rotulação• Sintaxe Utilizar uma única abordagem • Público sintática. Ex.: "Ver mais", "Veja mais", Utilizar termos que o seu público "Quer saber mais?" entende.
  34. 34. RotulandoFontes de rótulos•O seu próprio site• Sites concorrentes• Vocabulário controlado e thesaurus• Card sorting
  35. 35. Os Elementos da Experiência do UsuárioConcreto Superfície Esqueleto Estrutura Escopo EstratégiaAbstrato
  36. 36. Os Elementos da Experiência do UsuárioConcreto Superfície Esqueleto Estrutura Escopo Necessidades do usuário Objetivos do siteAbstrato
  37. 37. Os Elementos da Experiência do UsuárioConcreto Superfície Esqueleto Estrutura Especificações Funcionais Requisitos de Conteúdo Necessidades do usuário Objetivos do siteAbstrato
  38. 38. Os Elementos da Experiência do UsuárioConcreto Superfície Esqueleto Arquitetura de Informação Especificações Funcionais Requisitos de Conteúdo Necessidades do usuário Objetivos do siteAbstrato
  39. 39. Os Elementos da Experiência do UsuárioConcreto Superfície Design da Informação Arquitetura de Informação Especificações Funcionais Requisitos de Conteúdo Necessidades do usuário Objetivos do siteAbstrato
  40. 40. Os Elementos da Experiência do UsuárioConcreto Design Visual Design da Informação Arquitetura de Informação Especificações Funcionais Requisitos de Conteúdo Necessidades do usuário Objetivos do siteAbstrato
  41. 41. Processo e Entregáveis AI UI Branding• Inventário • Wireframes • Direção de de conteúdo arte • Protótipo• Modelos Navegável • Replicação conceituais de telas • Guideline• Fluxogramas• Sitemap
  42. 42. Processo e Entregáveis Front-end Back-endeo
  43. 43. Inventário de conteúdo
  44. 44. Modelos conceituais
  45. 45. Fluxogramas Meritest - Fluxograma Principais Funcionalidades Esqueci a Login senha Usuário preencheu corretamente? Não Sim Página Inicial Opções são apresentadas de acordo com o perfil do usuário Meus Solicitar Saldo de MeusUsuários Financeiro Taxonomias Classes Questões Testes Candidatos Gerentes Royalties Créditos Questões Dados Criar Demanda Incluir Demandas Criar Teste Testes Demanda Pendente Questão Demanda fica disponível para o autor selecionado Autor cria a questão que fica pendente de aprovação Adicionar Teste Questões Questões Pendente Executar Questão Teste Questão Pendente Pendente Questão fica de Revisão disponível para o revisor selecionado Gerente Legenda encaminha questão para Teste Candidato Disponível Página Ponto de Decisão Pilha de Páginas Ramo Condicional Resultado fica disponível para Seções disponíveis para o perfil Operador visualização do Responder Gerente Seções disponíveis para o perfil Autor / Revisor Aprovar Reprovar Teste Enviar Seções disponíveis para o perfil Empresa Questão Questão Aprovar Devolver Questão Questão Questão para Seções disponíveis para o perfil Gerente Revisão Seções disponíveis para o perfil Candidato Questão fica com Vocabulário Visual: (Jesse James Garrett, 2002) status aprovada http://iainstitute.org/pt/translations/000332.html
  46. 46. Jesse James GarrettUm vocabuláriovisual para descrevera arquitetura deinformação e designde interação.Diagramas são ferramentasessenciais para comunicar aarquitetura de informaçãoem times dedesenvolvimento web.
  47. 47. Vocabulário visual• Gerentes de projeto os utilizam para obter um sentido geral do escopo e forma do projeto.• Geradores de conteúdo os utilizam para direcionar os requerimentos de conteúdo.• Designers visuais e de Interface os utilizam para contar quantos designs de página únicos devem ser produzidos e ter uma noção inicial da navegação e requerimentos para interface destes designs.• Tecnólogos os utilizam para derivar requerimentos funcionais• Arquitetos de Informação e Designers de Interação os utilizam para desenvolver navegação detalhada e requerimentos de interface para cada página.
  48. 48. Vocabulário visual• Ser compatível com um quadro negro/branco• Ser independente de ferramentas• Ser pequeno e enxuto
  49. 49. Vocabulário visualO diagrama foca na macroestrutura, mostrando somente o detalhenecessário para que os membros do time tenham a "visão geral".A tarefa do arquiteto é determinar o nível apropriado dedetalhamento para atingir este objetivo.O detalhe específico no nível de páginas, ou microetrutura, édetalhado em outros documentos que o arquiteto não énecessariamente o responsável por desenvolver.Quando descrever arquitetura de informação, o diagrama deveenfatizar a estrutura conceitual e organização de conteúdo.O objetivo do diagrama não é prover uma especificação minuciosada navegação. Detalhes de interface não devem aparecer nodiagrama.
  50. 50. 2. Desenhando o sitemap Diagrama de arquitetura
  51. 51. Páginas, arquivos e conjuntos Pilha de Pilha de Página Documento páginas documentos
  52. 52. Conectores A B C D Estrutura de árvore simples E F G H D A F A mesma estrutura, H B diagramada de maneira diferente G C E
  53. 53. Setas Seta indica movimento Movimento contrário não é permitido
  54. 54. Áreas condicionais
  55. 55. Pontos de continuidade continua de: A A D continua B C para: E F D
  56. 56. NumeraçãoAPáginaInicialB C D EQuem Produtos Blog AjudaSomos
  57. 57. NumeraçãoAPáginaInicialB C D EQuem Produtos Blog AjudaSomos B.1 Missão, Visão e Valores B.2 Estrutura
  58. 58. NumeraçãoAPáginaInicialB C D EQuem Produtos Blog AjudaSomos B.1 Missão, Visão e Valores B.1.1 B.1.2 B.1.3 MIssão Visão Valores B.2 Estrutura
  59. 59. Arquivo para dowload A Página Inicial B C D E Quem Produtos Blog Ajuda Somos B.1 Missão, Visão e Valores B.1.1 B.1.2 B.1.3 MIssão Visão Valores B.2 Estrutura campan ha.pdf
  60. 60. Pilha de páginas A Página Inicial B C D E Quem Produtos Blog Ajuda Somos B.1 D.1.X Missão, Categoria Visão e Valores B.1.1 B.1.2 B.1.3 D.1.X MIssão Visão Valores Post B.2 Estrutura campan ha.pdf
  61. 61. Agrupador de conteúdo A Página Inicial B C D E Quem Produtos Blog Ajuda Somos B.1 D.1.X Missão, Categoria Visão e Valores C.1 Canecas B.1.1 B.1.2 B.1.3 D.1.X MIssão Visão Valores Post B.2 Estrutura C.1.X Detalhe de Produto campanha C.2 .pdf Camisetas C.2.X Detalhe de Produto C.3 Cadernos C.3.X Detalhe de Produto
  62. 62. Ponto de continuidade A Página Inicial A B C D E Quem Produtos Blog Ajuda Somos B.1 D.1.X Missão, Categoria Visão e Valores C.1 Canecas B.1.1 B.1.2 B.1.3 D.1.X MIssão Visão Valores Post B.2 Estrutura C.1.X Detalhe de Produto campanha C.2 .pdf Camisetas C.2.X Detalhe de Produto C.3 Cadernos C.3.X Detalhe de Produto
  63. 63. Ícones A F Fale Conosco
  64. 64. Área Condicional A F G Fale Minha Área Conosco G.1 Editar meu dados B.2 Minhas compras USUÁRIO LOGADO
  65. 65. Cross-link A F G Fale Minha Área Conosco G.1 Editar meu dados B.2 Minhas compras USUÁRIO LOGADO
  66. 66. Link externo A F G Link externo Fale Minha Área Twitter Conosco G.1 Editar meu dados B.2 Minhas compras USUÁRIO LOGADO
  67. 67. Legenda A F G Link externo Fale Minha Área Twitter Conosco G.1 Editar meu dados B.2 Minhas compras USUÁRIO LOGADO Legenda Seção Link estrutural Pilha de seções Cross-link Agrupador de seções Seção possui formulário Link Externo Arquivo para download Seções disponíveis apenas para o usuário logado
  68. 68. APáginaInicialB C D E F G Link externoQuem Produtos Blog Ajuda Fale Minha Área TwitterSomos Conosco B.1 D.1.X G.1 Missão, C.1 Categoria Editar meu Visão e Canecas dados Valores B.1.1 B.1.2 B.1.3 D.1.X MIssão Visão Valores C.1.X Post B.2 Detalhe de B.2 Estrutura Produto Minhas compras C.2 USUÁRIO LOGADO campanha Camisetas .pdf C.2.X Detalhe de Produto Legenda Seção Link estrutural C.3 Cadernos Pilha de seções Cross-link Agrupador de seções Seção possui formulário C.3.X Detalhe de Produto Link Externo Arquivo para download Seções disponíveis apenas para o usuário logado
  69. 69. B C D E F.1Usuários Financeiro Taxonomias Permissões Questõ B.X C.1 D.X E.1 Usuário Royalties Taxonomia Classes B.X.1 B.X.2 C.1.X C.1.1 C.1.4 D.X.1 D.X.2 E.1.X E.1.1 Alterar Usuário Excluir Royalty Inserir Royalty Extrato de Alterar Excluir Classe Inserir Classe Usuário Royalties Taxonomia Taxonomia B.1 D.1 Incluir Usuário Adicionar Taxonomia C.1.X.1 E.1.X.1 Alterar Royalty Alterar Classe C.1.X.2 E.1.X.2 Excluir Royalty Excluir Classe C.2 Contas a Pagar E.2 Tipos de Usuário C.2.X Conta a Pagar E.2.X E.2.1 Tipos de Incluir Tipo de Usuário Usuário C.2.X.1 C.2.X.2 C.2.X.3 Alterar Conta a Excluir Conta a Efetuar Pagar Pagar Pagamento C.2.1 Inserir Conta a E.2.X.1 Pagar Alterar Tipo de Usuário C.2.2 Gerar Ordens E.2.X.2 de Pagamento Excluir Tipo de de Royalties Usuário C.3 Créditos C.3.X C.3.1 C.3.2 C.3.3 Crédito Inserir Crédito Saldo de Preços dos Créditos Créditos C.3.3.X C.3.X.1 Preço dos Alterar Crédito Créditos C.3.3.X.1 C.3.3.X.2 Alterar Preço Excluir Preço de Crédito de Crédito C.3.X.2 C.3.3.1 Excluir Crédito Incluir Preço de Crédito OPERADOR

×