Arquitetura de Informacao em Projetos de Design

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!