Novembro de 2005
Laura Klemz Guerrero (form. ESDI 2000)
Mauro Pinheiro (form. ESDI 1995)
Arquitetura da Informação em projetos de Design
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.
Elements of user experience – Jesse James Garret
Estratégia É onde tudo começa: O que desejamos do nosso produto? O que os nossos usuários desejam?
Escopo Transforma a estratégia em requisitos: Que características o produto deve incluir?
Estrutura Dá forma ao escopo: Como os pedaços vão se encaixar e se comportar?
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?
Arquitetura da Informação
Design de Interface
Desenvolvimento de projetos de Design
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
tarefa
usuário objeto
DESIGN
Arquitetura da Informação & Design
O Design encontra-se na interface entre: Tarefa x Objeto x Usuário
Contexto
Usuário Conteúdo
AI
Arquitetura da Informação & Design
A Arquitetura da Informação encontra-se no equilíbrio entre: Contexto x Usuário x Conteúdo
tarefa
usuário objeto
DESIGN
contexto
usuário conteúdo
A.I.
Arquitetura da Informação & Design
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?
Arquivo pessoal
NAVEGAÇÃO PRINCIPAL
NAVEGAÇÃO SECUNDÁRIA
CONTEÚDO
BUSCA
NAVEGAÇÃO CONTEXTUAL
NAVEGAÇÃO PRINCIPAL
NAVEGAÇÃO SECUNDÁRIA
NAVEGAÇÃO CONTEXTUAL
Razorfish
Iawiki.net
Arquivo pessoal
Login:
Senha:
Lembrar minha senha
» Esqueceu sua senha?
» Primeira vez no site?
ok
Meu portal Petrobras Categorias encontradas
Dolorem ladantium
Totam aperiam,
Eaque ipsa quae
Inventore veritatis
Architecto beatae vitae
Sunt explicabo
Ipsam voluptatem quia
Inventore veritatis
Architecto beatae vitae
Logo
Buscar:
Fale Conosco | FAQ | Mapa do Site | Ajuda Navegação por Perfil Navegação por Assunto
ok » Busca Avançada
Resultado da busca
Dd/mm/aa – hh:mm Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
Conteúdo relacionado
Dd/mm/aa – hh:mm Sed ut perspiciatis unde opsint omnis iste natus error sit.
Dd/mm/aa – hh:mm Lorem ipsum dolor site sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.
Você procurou por: ambiente
Foram encontrados 128.000 resultados. 9 categorias | 5901 notícias | 203 Links para web sites
Anteriores 1 2 3 4 5 6 Próximas #
Salvar Resultados Avisar Sobre Novos Conteúdos
Resultado 2
Descrição do Resultado Lorem ipsum dolor sit amet Conteúdos Relacionados Categoria: Categoria 1 > Categoria 2 > ... > Categoria N Data: xx/xx/xxxx Tamanho: 42 MB Versão: 1.0
Resultado 3
Descrição do Resultado Lorem ipsum dolor sit amet Conteúdos Relacionados Categoria: Categoria 1 > Categoria 2 > ... > Categoria N Data: xx/xx/xxxx Tamanho: 42 MB Versão: 1.0
Resultado 1
Descrição do Resultado Lorem ipsum dolor sit amet Conteúdos Relacionados Categoria: Categoria 1 > Categoria 2 > ... > Categoria N Data: xx/xx/xxxx Tamanho: 42 MB Versão: 1.0
Mostrar resultados por : Relevância | Data | Conteúdo
De 1 a 4 de 1500 resultados:
Enviar por email
Refine sua Busca
Em que contexto a sua busca se aplica?
• meio ambiente • ambiente corporativo • ambiente de trabalho • clima do ambiente • ambiente marinho
+
+
+
+
+
+
+
+
+
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 palco principal
meta-relações
catálogo de vídeos
Esportes Entretenimento Jornalismo
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
User Experience
Information Architecture
Knowledge management
Information Design
Brand Management
Usability
Consumer Relationship Management
Interface Design
Content Management
Ph
en
om
en
olo
gy
Co
gn
itiv
e S
cien
ce
Cog
nit
ive
Psy
cholo
gy
Industrial design
Ergonomics
Technical communication
Usability engineering Interface design
Merch
andisin
g
Libra
rian
ship
Ind
exin
g
Ab
stra
ctin
g
Data modeling Object modeling
Artificial intelligence
Human Computer interaction
Software engineering
Project management
Business Analysis
Hu
man
facto
rs
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!
Top Related