Arquitetura de Informacao em Projetos de Design

3.896 visualizações

Publicada em

Palestra apresentada para os alunos do curso de design da ESDI, em 2005, tratando de Arquitetura de Informação em projetos de design, não ficando restrito ao projeto de websites.

Publicada em: Design, Educação, Negócios
0 comentários
12 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
3.896
No SlideShare
0
A partir de incorporações
0
Número de incorporações
60
Ações
Compartilhamentos
0
Downloads
181
Comentários
0
Gostaram
12
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Arquitetura de Informacao em Projetos de Design

  1. 1. Arquitetura da Informação em projetos de Design Laura Klemz Guerrero Mauro Pinheiro (form. ESDI 2000) (form. ESDI 1995) Novembro de 2005
  2. 2. O que é Arquitetura da Informação? Arquitetura da Informação & Design Quem é o Arquiteto da Informação? Aplicações: 3 estudos de caso Interdisciplinariedade
  3. 3. Desenvolvimento de projetos de Design “O design, ou desenho industrial, é a área do conhecimento que trata do planejamento, da programação e do projeto dos objetos com os quais o homem lida em seu cotidiano, assim como dos ambientes em que mantém seu espaço de vida”. (site da ESDI)
  4. 4. Desenvolvimento de projetos de Design Os objetivos podem variar, mas geralmente um produto existe para ser utilizado por alguém, para facilitar o acesso a alguma informação ou a execução de tarefas específicas.
  5. 5. O que é Arquitetura da Informação (AI)? Existem muitas definições e ao mesmo tempo nenhuma definição “oficial”. Quem faz, sabe o que faz, mas é difícil estabelecer uma definição porque há variações nas atividades, no contexto e na nomenclatura dos cargos. É provável que toda vez que surja alguma discussão sobre AI, surgirá uma polêmica sobre qual a sua definição.
  6. 6. O que é Arquitetura da Informação (AI)? “Arquitetura da informação é o processo de criar sistemas que façam a mediação entre usuários e informação.” (essa e outras em: http://www.iawiki.net/DefiningTheDamnThing)
  7. 7. O que é Arquitetura da Informação (AI)? É a biblioteconomia tradicional adaptada e renomeada para a era digital? É uma especialidade do design de interação? É alguma coisa que todo bom web designer faz, mesmo que inconscientemente? (Information Architecture is what we say it is / Adam Greenfield)
  8. 8. O que é Arquitetura da Informação (AI)? 1. A combinação de organização, rotulagem, e esquemas de navegação em um sistema de informação. 2. O projeto estruturado de um espaço de informação para facilitar a execução de tarefas e o acesso intuitivo ao conteúdo. 3. Uma nova disciplina focada em trazer princípios do design e da arquitetura para o espaço digital. (Rosenfeld e Morville)
  9. 9. O que é Arquitetura da Informação (AI)? Segundo Wurman, o arquiteto da informação é: “ 1) O indivíduo que organiza a informação, tornando o complexo simples; 2) A pessoa que cria a estrutura ou mapa da informação, permitindo que outras encontrem seus próprios caminhos para o conhecimento; 3) Profissão emergente do século XXI dedicada às necessidades de uma era focada na clareza, no entendimento humano, e na ciência da organização da informação. ” (Richard Saul WURMAN, 1996)
  10. 10. O que é Arquitetura da Informação (AI)? Tecnologia + Design + Redação / Jornalismo limites imprecisos
  11. 11. Arquitetura da Informação & Design O designer é um projetista. Hierarquizar informações e pensar nos usuários é parte de um projeto de design.
  12. 12. Arquitetura da Informação & Design A Arquitetura da Informação sempre existiu. Com a explosão informacional e posteriormente com o advento da Internet consolidou-se a figura do arquiteto da informação, profissional especializado em criar sistemas que façam a mediação entre a informação e os usuários.
  13. 13. Desenvolvimento de projetos de Design Superfície Reune todos os elementos visualmente: Qual será a aparência do produto final? Esqueleto Torna a estrutura concreta: Que componentes vão possibilitar que o produto seja utilizado por pessoas? Design de Interface Estrutura Dá forma ao escopo: Como os pedaços vão se encaixar e se comportar? Arquitetura da Informação Escopo Transforma a estratégia em requisitos: Que características o produto deve incluir? Estratégia É onde tudo começa: O que desejamos do nosso produto? O que os nossos usuários desejam? Elements of user experience – Jesse James Garret
  14. 14. O papel da Arquitetura da Informação Definir -  Estrutura -  Organização das informações -  Nomenclaturas -  Possibilidades de interação / manipulação
  15. 15. O papel da Arquitetura da Informação Objetivos - Facilitar o acesso à informação -  Otimizar a execução de tarefas -  Tornar a utilização dos sistemas agradável
  16. 16. Arquitetura da Informação & Design O Design encontra-se na interface entre: Tarefa x Objeto x Usuário tarefa DESIGN usuário objeto
  17. 17. Arquitetura da Informação & Design A Arquitetura da Informação encontra-se no equilíbrio entre: Contexto x Usuário x Conteúdo Contexto AI Usuário Conteúdo
  18. 18. Arquitetura da Informação & Design tarefa contexto DESIGN A.I. usuário objeto usuário conteúdo
  19. 19. Arquitetura da Informação (AI) Uma AI deve levar em conta 3 elementos básicos: » Conteúdo Qual é o universo de conteúdo disponível para o produto e suas particularidades. » Contexto Quais são os objetivos a serem atingidos, a situação de uso, o posicionamento da concorrência, tempo e recursos disponíveis para o projeto. » Usuários Quem são os usuários (potenciais ou reais), o que eles esperam, quais são seus interesses e necessidades.
  20. 20. Documentos representativos de AI Storyboard Boneca de revistas/livros Mapa de arquitetura da informação de site
  21. 21. Storyboard
  22. 22. Boneca
  23. 23. Mapa de arquitetura da informação de site
  24. 24. Aplicações Mídia impressa Caso 1: Catálogo Cildo Meireles Projeto de sinalização Caso 2: Sinalização e ambientação da Prograd Mídia interativa Caso 3: GloboMedia Center
  25. 25. Caso 1: Catálogo Cildo Meireles
  26. 26. Caso 2: Sinalização e Ambientação da PROGRAD-UFES (Pró-Reitoria de Graduação da Universidade Federal do Espírito Santo) Objetivo Facilitar o acesso dos alunos da UFES às informações relativas aos procedimentos acadêmicos (matrícula, transferência, trancamento de curso etc.) Levantamento de dados: Entrevista com os usuários Observação direta Reuniões com o pró-reitor Visitas externas Entrevista com os funcionários
  27. 27. Caso 2: Sinalização e Ambientação da PROGRAD-UFES Conclusões do levantamento de dados Diversos fatores causando desinformação e demora no atendimento. As informações necessárias são de naturezas distintas: -  processos realizados (o que a Prograd faz?) -  datas importantes -  localização da Prograd no campus -  requerimentos básicos para dar entrada nos processos -  regras e normas de funcionamento da instituição -  comunicações institucionais e da comunidade sem nenhuma distinção Outros problemas percebidos: -  Despreparo ou desinformação dos funcionários -  Número reduzido de atendentes
  28. 28. Caso 2: Sinalização e Ambientação da PROGRAD-UFES Conclusões do levantamento de dados indicaram necessidade de: Revitalizar o sistema de identificação externa da edificação facilitar identificação externa, retrabalhar imagem institucional Reformar e adaptar o saguão de atendimento garantir acessibilidade e ambientação mais agradável Projetar a sinalização do prédio facilitar o acesso às informações, identificação dos banheiros e seções de atendimento; distinção entre informações institucionais e da comunidade Criar alternativas de acesso às informações que promovam mais agilidade nos processos minimizar a demora causada pela ausência de atendentes
  29. 29. Caso 2: Sinalização e Ambientação da PROGRAD-UFES
  30. 30. Caso 2: Sinalização e Ambientação da PROGRAD-UFES
  31. 31. Caso 2: Sinalização e Ambientação da PROGRAD-UFES
  32. 32. Caso 2: Sinalização e Ambientação da PROGRAD-UFES
  33. 33. Caso 2: Sinalização e Ambientação da PROGRAD-UFES
  34. 34. Caso 2: Sinalização e Ambientação da PROGRAD-UFES
  35. 35. Caso 2: Sinalização e Ambientação da PROGRAD-UFES
  36. 36. Caso 2: Sinalização e Ambientação da PROGRAD-UFES
  37. 37. Caso 2: Sinalização e Ambientação da PROGRAD-UFES
  38. 38. Mídia interativa & Arquitetura da Informação É no desenvolvimento de mídia interativa que usualmente encontramos a figura do Arquiteto da Informação. Agora vamos falar da Arquitetura da Informação aplicada a sistemas interativos, por exemplo: sites, caixas eletrônicos, bases de dados, bibliotecas digitais etc.
  39. 39. Mídia interativa & Arquitetura da Informação Subsídios e resultados do desenvolvimento da AI: » Inventário de conteúdo Levantamento do conteúdo (seu formato e sua natureza). » Modelos conceituais, diagramas Esquemas usados para facilitar a compreensão do sistema. » Mapas de AI, mapas de fluxo Expressões gráficas da organização hierárquica de um sistema. » Interfaces (ou wireframes) Detalhamento de cada tela do sistema. Determina, por exemplo, a localização de menus e botões. » Especificação funcional Relatório, de preferência ilustrado, das funcionalidades de um sistema.
  40. 40. Inventário de conteúdo Levantamento do conteúdo (seu formato e sua natureza). Pode ser uma lista, uma tabela, o formato é o que menos importa. O detalhamento do inventário também depende das necessidades específicas do projeto.
  41. 41. Modelos conceituais, diagramas Esquemas gráficos usados para facilitar a compreensão do sistema. Não seguem um padrão gráfico e existem sob os formatos mais diversos.
  42. 42. Arquivo pessoal
  43. 43. Arquivo pessoal
  44. 44. Mapas de AI, mapas de fluxo São expressões gráficas da organização hierárquica de um sistema. Como os modelos conceituais, os mapas não seguem um padrão gráfico único e existem sob os formatos mais diversos.
  45. 45. ATENÇÃO Mapa do Site não é Arquitetura da Informação O mapa é APENAS uma expressão gráfica da organização hierárquica do sistema. É um dos documentos que podem ser entregues como resultado do projeto da Arquitetura da Informação, assim como os mapas de fluxo.
  46. 46. Arquivo pessoal
  47. 47. Fonte: Dynamic Diagrams
  48. 48. Arquivo pessoal
  49. 49. Arquivo pessoal
  50. 50. Dynamic Diagrams
  51. 51. Arquivo pessoal
  52. 52. Arquivo pessoal
  53. 53. Interfaces (ou wireframes) Após definir a estrutura das informações, o próximo passo é projetar o esquema de navegação, que determinará como os usuários se movimentarão através do sistema de informações. Detalhamento de cada tela do sistema. Determinam, por exemplo, a localização de menus e botões. A estrutura de navegação deve responder a 3 perguntas básicas dos usuários: » Onde estou? » Onde (já) estive? » Aonde posso ir?
  54. 54. NAVEGAÇÃO PRINCIPAL BUSCA NAVEGAÇÃO NAVEGAÇÃO SECUNDÁRIA CONTEXTUAL CONTEÚDO Arquivo pessoal
  55. 55. Razorfish
  56. 56. Iawiki.net
  57. 57. Logo Navegação por Assunto Navegação por Perfil Fale Conosco | FAQ | Mapa do Site | Ajuda Categorias encontradas ok Meu portal Petrobras Buscar: » Busca Avançada + Dolorem ladantium Login: + Totam aperiam, Resultado da busca Senha: + Eaque ipsa quae Você procurou por: ambiente + Inventore veritatis Foram encontrados 128.000 resultados. Lembrar minha senha ok + Architecto beatae vitae 9 categorias | 5901 notícias | 203 Links para web sites + Sunt explicabo » Esqueceu sua senha? Mostrar resultados por : Relevância | Data | Conteúdo » Primeira vez no site? + Ipsam voluptatem quia De 1 a 4 de 1500 resultados: + Inventore veritatis Refine sua Busca Resultado 1 + Architecto beatae vitae Descrição do Resultado Lorem ipsum dolor sit amet Em que contexto a sua busca Conteúdos Relacionados se aplica? Categoria: Categoria 1 > Categoria 2 > ... > Categoria N Data: xx/xx/xxxx Tamanho: 42 MB Versão: 1.0 •  meio ambiente Resultado 2 •  ambiente corporativo •  ambiente de trabalho Descrição do Resultado Lorem ipsum dolor sit amet Conteúdos Relacionados •  clima do ambiente Categoria: Categoria 1 > Categoria 2 > ... > Categoria N •  ambiente marinho Data: xx/xx/xxxx Tamanho: 42 MB Versão: 1.0 Resultado 3 Conteúdo relacionado Descrição do Resultado Lorem ipsum dolor sit amet Conteúdos Relacionados Categoria: Categoria 1 > Categoria 2 > ... > Categoria N Dd/mm/aa – hh:mm Data: xx/xx/xxxx Tamanho: 42 MB Versão: 1.0 Sed ut perspiciatis unde omnis iste natus error sit voluptatem. Dd/mm/aa – hh:mm  Anteriores 1 2 3 4 5 6 Próximas # Sed ut perspiciatis unde opsint omnis iste natus error sit. Dd/mm/aa – hh:mm Arquivo pessoal Salvar Resultados Enviar por email Avisar Sobre Novos Conteúdos Lorem ipsum dolor site sed ut
  58. 58. Dynamic Diagrams
  59. 59. Arquivo pessoal
  60. 60. Arquivo pessoal
  61. 61. Especificação funcional e outros docs Relatório, de preferência ilustrado, explicando as funcionalidades de um sistema.
  62. 62. Arquivo pessoal
  63. 63. Arquivo pessoal
  64. 64. Juntando as peças Arquitetura da Informação ↓ Interface ↓ Design Gráfico
  65. 65. Arquivo pessoal
  66. 66. Arquivo pessoal
  67. 67. Arquivo pessoal
  68. 68. Caso 3: Globo Media Center Primeira versão Site com vídeos da TV Globo e GloboSat Organização por programas de TV Mecanismo de busca limitado Experiência se encerrava ao assistir o vídeo
  69. 69. Caso 3: Globo Media Center Objetivos do redesenho Facilitar a localização dos vídeos no universo de conteúdo produzido diariamente Criar o hábito e a experiência de consumir conteúdo televisivo através da Internet Agregar aos vídeos dos principais programas da TV características inerentes à Internet Transferir o comando da edição da programação para cada usuário
  70. 70. Caso 3: Globo Media Center Características do redesenho Organização por centrais temáticas Organização por programas é mantida Criação de blocos temáticos sazonais Criação do Guia GMC com o melhor do dia (critério editorial) Digitalização do acervo histórico Consolidação do sistema de cadastro de vídeos
  71. 71. Caso 3: Globo Media Center vídeo meta-relações palco principal Esportes Entretenimento Jornalismo catálogo de vídeos
  72. 72. Caso 3: Globo Media Center Abrir o site
  73. 73. Interdisciplinariedade Não há formação específica para atuar como arquiteto de informação. É uma área interdisciplinar, onde conhecimentos diferentes trabalham com um mesmo objetivo. » Design » Biblioteconomia » Ergonomia » Psicologia » Ciências da computação » Jornalismo Etc etc etc
  74. 74. Modelo de Louis Rosenfeld e Jess Mcmullin gy ence cholo Phenomenology Human fa Cognitive Sci ive Psy ctors Cognit Bus Information ines s An Architecture alys n is esig Project manag Content str ial d ement Management Knowledge Indu ics Software eng ineering Interface management Ergonom Design User Experience Technical communication Human Computer interaction Information Usability Consumer nce Design enginee Artificial intellige Relationship ring Management Inte rfac odeling Brand e de Object m sign Management ing del a mo Usability Dat Mer Librari Abstracting Indexing cha ndi anship sing
  75. 75. Modelo de Nathan Shedroff
  76. 76. Muitos nomes... a mesma atividade? » IA / Information architecture (AI / Arquitetura da Informação) » Information design (Design de informação) » Interaction design (Design de interação) » Interface design (Design de interface) » User experience design (Design de experiência do usuário) » HCI / Human-computer interaction (IHC / Interação humano-computador) » Usability (Usabilidade)
  77. 77. Mais informações: Livros e similares - GARRET, Jesse James. The Elements of User Experience. - MORVILLE, Peter; ROSENFELD, Louis. Information Architecture for the World Wide Web. [Biblioteca da ESDI: 004 / R813] - NIELSEN, Jakob. Homepage: Usabilidade. [Biblioteca da ESDI: 004.738.52 / N669h] - NIELSEN, Jakob. Projetando Websites. [Biblioteca da ESDI: 004.738.52 / N669] - NIELSEN, Jakob. Usability Engineering. - TUFTE, Edward. Envisioning Information. [Biblioteca da ESDI: 659.1/T914] - _____. The Visual Display of Quantitative Information. [Biblioteca da ESDI: 659.1 / T914] - _____. Visual Explanations. [Biblioteca da ESDI: 659.1 / T914] - WURMAN, Richard Saul; BRADFORD, Peter. Information Architects. [Biblioteca da ESDI: 004 / W968]
  78. 78. Mais informações: Sites, listas de discussão... - IA-Br: <http://groups.yahoo.com/group/ia-br/> - Chi-web: <http://sigchi.org/web/> - Boxes and arrows: <http://www.boxesandarrows.com> - Useit.com - Jakob Nielsen: <http://www.useit.com/> - JJG.net – Jesse James Garret: <http://www.jjg.net> - Louis Rosenfeld: <http://www.louisrosenfeld.com/home/> - ASILOMAR Institute: <http://aifia.org/> - Elegant Hack: <http://www.eleganthack.com/> - Usable Web: <http://www.usableweb.com/> Congressos CLIHC, IASummit, CHI ... e muitos outros
  79. 79. Obrigado!

×