Arquitetura de Informacao em Projetos de Design
Upcoming SlideShare
Loading in...5
×
 

Arquitetura de Informacao em Projetos de Design

on

  • 3,905 views

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.

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.

Statistics

Views

Total Views
3,905
Views on SlideShare
3,856
Embed Views
49

Actions

Likes
10
Downloads
149
Comments
0

3 Embeds 49

http://www.feiramoderna.net 24
http://www.slideshare.net 24
http://www.lmodules.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Arquitetura de Informacao em Projetos de Design Arquitetura de Informacao em Projetos de Design Presentation Transcript

    • Arquitetura da Informação em projetos de Design Laura Klemz Guerrero Mauro Pinheiro (form. ESDI 2000) (form. ESDI 1995) Novembro de 2005
    • O que é Arquitetura da Informação? Arquitetura da Informação & Design Quem é o Arquiteto da Informação? Aplicações: 3 estudos de caso Interdisciplinariedade
    • 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)
    • 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.
    • 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.
    • 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)
    • 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)
    • 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)
    • 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)
    • O que é Arquitetura da Informação (AI)? Tecnologia + Design + Redação / Jornalismo limites imprecisos
    • Arquitetura da Informação & Design O designer é um projetista. Hierarquizar informações e pensar nos usuários é parte de um projeto de design.
    • 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.
    • 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
    • O papel da Arquitetura da Informação Definir -  Estrutura -  Organização das informações -  Nomenclaturas -  Possibilidades de interação / manipulação
    • 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
    • Arquitetura da Informação & Design O Design encontra-se na interface entre: Tarefa x Objeto x Usuário tarefa DESIGN usuário objeto
    • 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
    • Arquitetura da Informação & Design tarefa contexto DESIGN A.I. usuário objeto usuário conteúdo
    • 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.
    • Documentos representativos de AI Storyboard Boneca de revistas/livros Mapa de arquitetura da informação de site
    • Storyboard
    • Boneca
    • Mapa de arquitetura da informação de site
    • 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
    • Caso 1: Catálogo Cildo Meireles
    • 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
    • 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
    • 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
    • Caso 2: Sinalização e Ambientação da PROGRAD-UFES
    • Caso 2: Sinalização e Ambientação da PROGRAD-UFES
    • Caso 2: Sinalização e Ambientação da PROGRAD-UFES
    • Caso 2: Sinalização e Ambientação da PROGRAD-UFES
    • Caso 2: Sinalização e Ambientação da PROGRAD-UFES
    • Caso 2: Sinalização e Ambientação da PROGRAD-UFES
    • Caso 2: Sinalização e Ambientação da PROGRAD-UFES
    • Caso 2: Sinalização e Ambientação da PROGRAD-UFES
    • Caso 2: Sinalização e Ambientação da PROGRAD-UFES
    • 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.
    • 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.
    • 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.
    • 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.
    • Arquivo pessoal
    • Arquivo pessoal
    • 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.
    • 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.
    • Arquivo pessoal
    • Fonte: Dynamic Diagrams
    • Arquivo pessoal
    • Arquivo pessoal
    • Dynamic Diagrams
    • Arquivo pessoal
    • Arquivo pessoal
    • 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?
    • NAVEGAÇÃO PRINCIPAL BUSCA NAVEGAÇÃO NAVEGAÇÃO SECUNDÁRIA CONTEXTUAL CONTEÚDO Arquivo pessoal
    • Razorfish
    • Iawiki.net
    • 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
    • Dynamic Diagrams
    • Arquivo pessoal
    • Arquivo pessoal
    • Especificação funcional e outros docs Relatório, de preferência ilustrado, explicando as funcionalidades de um sistema.
    • Arquivo pessoal
    • Arquivo pessoal
    • Juntando as peças Arquitetura da Informação ↓ Interface ↓ Design Gráfico
    • Arquivo pessoal
    • Arquivo pessoal
    • Arquivo pessoal
    • 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
    • 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
    • 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
    • Caso 3: Globo Media Center vídeo meta-relações palco principal Esportes Entretenimento Jornalismo catálogo de vídeos
    • Caso 3: Globo Media Center Abrir o site
    • 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
    • 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
    • Modelo de Nathan Shedroff
    • 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)
    • 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]
    • 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
    • Obrigado!