Arquitetura da Informao

Tutorial

Arquitetura da Informao - Tutorial - ndice

Arquitetura da Informao - Tutorial - ndice

Arquitetura da Informao - Tutorial
Introduo........................................................................................................................................3
Arquitetura da Informao - Tutorial - Lio 1
1. Por que a Arquitetura da Informao to importante?..............................................................3
2. Defina os objetivos do site...........................................................................................................4
3. Faa perguntas.............................................................................................................................4
4. Filtre as respostas.........................................................................................................................5
5. Documento de Design: Objetivos do Site....................................................................................5
Arquitetura da Informao - Tutorial - Lio 2
1. Defina a Experincia do Usurio.................................................................................................6
2. Defina o Pblico-Alvo.................................................................................................................6
3. Crie Cenrios...............................................................................................................................7
4. Anlise Competitiva.....................................................................................................................7
5. Documento de Design: Pblicos-Alvo, Cenrios e Anlise Competitiva....................................8
Arquitetura da Informao - Tutorial - Lio 3
1. Contedo do Site..........................................................................................................................9
2. Identifique o Contedo e os Requisitos Funcionais.....................................................................9
3. Agrupe e Rotule o Contedo......................................................................................................10
4. Documento de Design: Contedo e Funes.............................................................................10
Arquitetura da Informao - Tutorial - Lio 4
1. Estrutura do Site.........................................................................................................................10
2. Explorando a Metfora..............................................................................................................11
3. Esculpindo..................................................................................................................................11
4. Defina a Navegao...................................................................................................................13
5. Documento de Design................................................................................................................13
Arquitetura da Informao - Tutorial - Lio 5
1. Design Visual.............................................................................................................................14
2. Grids de Layout.........................................................................................................................14
3. Esboos de Design e Modelos de Pgina...................................................................................15
4. Documento de Design................................................................................................................16

Arquitetura da Informao - Tutorial

Arquitetura da Informao - Tutorial

Introduo
Arquitetura da Informao a cincia de descobrir o que voc quer que o seu site faa e ento
construir um projeto, antes de mergulhar em sua construo. mais importante do que voc possa
imaginar, e John Shiple, conhecido como "Squishy", explica os motivos para voc.
Squishy primeiro examina como definir os objetivos do seu site, trazendo luz para a superimportante arte de coletar as opinies dos clientes ou parceiros, e organiz-las em uma ordem de
importncia balanceada e coerente. Ele tambm compartilha conosco o seu esquema de documentar
isso tudo, de modo que todas as partes envolvidas possam estar acompanhando.
O prximo passo descobrir quem ser, afinal de contas, o pblico. Uma vez que esteja claramente
definido, voc pode ento comear a organizar o seu futuro site em pginas de contedo e funes
que o site vai precisar ter.
Em seguida, Squishy entra na "terra da criatividade", onde voc comea a construir a estrutura:
forme o esqueleto, escolha suas metforas, mapeie sua navegao. Ento chegada a hora de
encarar os programas grficos, estabelecer os grids de layout, desenhar esboos, fazer simulaes, e
estar pronto para construir!

Arquitetura da Informao - Tutorial - Lio 1

1. Por que a Arquitetura da Informao to importante?
Arquitetura da Informao (A.I. ou I.A., do ingls Information Architecture) a base para um
excelente Web Design. a planta de um site, sobre a qual todos os outros aspectos so construdos forma, funo, metfora, navegao, interface, interao e design visual. Iniciar a anlise da
Arquitetura da Informao a primeira coisa que voc precisa fazer quando projetar um site. Este
tutorial descreve mtodos e processos especficos para desenvolver a Arquitetura da Informao de
um site.
Algumas vezes os clientes vem o desenvolvimento de uma A.I. como no sendo praticvel, tanto
por causa do tempo que leva quanto pelas habilidades necessrias para que seja feita eficientemente.
Mas essa mentalidade est gradualmente se transformando. Uma boa A.I. incrivelmente eficaz, e
conhecer o bsico dos procedimentos da A.I. pode economizar tempo e dinheiro no longo prazo.
Alm disso, no necessrio ser um expert para poder us-la a seu favor.
Este tutorial ir demonstrar o quo fcil e poderoso o procedimento da A.I. pode ser. Ns iremos
apresentar dois modelos de trajetria para um design, que podem ser pensados como a diferena
entre o desenvolvimento de um pequeno e de um grande site, ou como a diferena entre ter pouco
tempo ou ter muito tempo para desenvolver um site.
Cada lio apresenta uma seo de um documento de design. Aps completar este tutorial, voc
ter um modelo para um documento de design de A.I. completo; o registro das decises feitas ao se
projetar o site. Esse documento ir servir como um guia ou mapa para a construo do site.
Incluses ou revises so feitas com maior facilidade com a presena desse documento. Ah, sim - os
clientes e a gerncia adoram esse tipo de coisa.
Alm disso, quase todo mundo hoje prope a facilidade de uso (usabilidade). Bom, a usabilidade
comea aqui. Ela praticamente garantida se voc possui uma slida Arquitetura da Informao
desde o princpio.

Arquitetura da Informao - Tutorial - Lio 1

2. Defina os objetivos do site

O primeiro passo no procedimento da A.I. definir os objetivos do site. Parece bvio, mas pense
em quantos sites sem estrutura podemos encontrar na internet hoje. Voc acha que as pessoas que os
criaram realmente pensaram sobre seus objetivos? Talvez os membros do departamento de
marketing se descuidaram e construram um site sem perguntar para ningum como faz-lo. Eles
apenas tinham que ter um site porque todo mundo tem um. Ou talvez o site tenha sido determinado
por um comit. Se voc no sabe o que voc est tentando alcanar, porque se ocupar construindo
um site?
Voc quer que todos na instituio - ou pelo menos as pessoas mais importantes - estejam
envolvidas. Mas voc no quer que todo mundo fique tomando decises sobre o que deve estar no
site. Em outras palavras, voc quer que todo mundo concorde com o contedo e o propsito do site
que voc ir construir.
Definir os objetivos de um site resolve todos esses problemas. Estabelece uma idia clara e bem
documentada do que voc ir fazer, e assegura que todos esto participando. O consenso do grupo
pode fazer o projeto acontecer ou parar.
Para iniciar e dar andamento ao trabalho, voc precisa fazer duas coisas. Primeiro, determinar quem
estar envolvido na definio de objetivos. Dependendo da natureza bsica do site, no difcil de
identificar quem as figuras-chave so: as pessoas que tm de comprar as suas idias, quer dizer, que
iro sustentar o seu trabalho. Voc deve fazer que elas se sintam contribuindo com o projeto. Escute
o que elas dizem. seu trabalho assegurar que elas estejam se comunicando umas com as outras e
que nenhuma pessoa controle o processo (veremos mais informaes sobre como lidar com esse
tipo de pessoa adiante).
Voc tambm precisa determinar se voc tem tempo para preparar uma definio formal dos
objetivos ou se uma definio informal ser suficiente. Uma definio formal envolve a convocao
de reunies com as figuras-chave. Voc deve preparar uma agenda e uma srie de questes. Toma
bem mais tempo e exige muito mais de suas habilidades de gerenciamento de projeto. Uma
definio informal envolve a conversao com as pessoas, uma a uma, e fazer as anotaes em um
bloco de notas. Voc deve escrever os pensamentos e idias do pessoal, perguntar suas opinies, e
entrar em contato novamente quanto voc precisar da aprovao delas. O tamanho do projeto e o
tempo disponvel so os principais fatores na deciso de utilizar um processo formal ou informal.

3. Faa perguntas
Depois de determinar quem sero as pessoas envolvidas em direcionar o site, voc precisa elaborar
uma lista de questes. Essas questes ajudam voc a determinar a misso e o propsito do site ao
envolver a todos no processo criativo.
Um conjunto bsico de questes deve incluir:
Qual a misso e o propsito da organizao?
Essa a questo mais importante. Ler a declarao da misso e o plano de negcios do cliente iro
lhe dar uma boa idia. Pesquise o mximo possvel de artigos escritos pelo seu cliente e sobre o seu
cliente - voc pode encontrar idias valiosas que no foram mencionadas na declarao da misso
ou no plano de negcios. importante notar tambm que o cliente pode mudar de misso quando
estiver on line.
Quais so os objetivos de curto-prazo e de longo-prazo do site?
Cada pessoa que voc conversar ter uma idia diferente sobre os objetivos e metas do site. Muitas
pessoas podero no estar pensando a longo prazo; elas podem ter uma urgncia em ver o site no ar
e funcionando. Pensar no futuro pode salv-lo de muitas dores de cabea a longo prazo, porque

Arquitetura da Informao - Tutorial - Lio 1

voc ser capaz de lidar com crescimento e mudanas mais eficientemente.

Quais so os pblicos-alvo?
Muitos clientes nem sequer pensam sobre seu pblico, o que talvez seja o erro nmero um no
desenvolvimento de sites. Esta pergunta freqentemente serve como um despertador para seus
clientes, acordando-os cedo para essa importante questo.
Por que as pessoas iro visitar o seu site?
Voc est vendendo um produto? Tem um servio nico? Por que as pessoas iro visitar o site pela
primeira vez? Elas iro voltar? Se o cliente j tem um site, tente descobrir respostas para essa
questo nele.
Tente pensar em outras questes que iro revelar o verdadeiro propsito do site. Se outras pessoas
tiverem idias para questes, considere inclu-las tambm.
Depois de compilar uma lista de questes, pergunte-as a todos, incluindo voc mesmo. Certifique-se
de escrever tudo o que todos disserem, no importa o quo trivial ou mundano seja. Voc ir refinar
as respostas na prxima etapa.

4. Filtre as respostas
Neste ponto, ou voc criou uma bonita lista de questes e as passou em uma grande reunio, ou
voc gastou algum tempo colecionando em seu bloco de notas as respostas, conversando com as
pessoas uma a uma. Seja como for, voc deve ter um monte de respostas para suas questes. Agora
voc precisa criar ordem nesse caos e filtrar as respostas. Voc precisa transformar as respostas em
objetivos/metas e descobrir quais so mais importantes.
Primeiro, separe as respostas sobre os pblicos-alvo e guarde-as para depois. Coloque as demais
respostas em uma lista. Se voc tem uma lista longa, agrupe objetivos em categorias.
Fornea essa lista de volta a todos que responderam o questionrio e pea que classifiquem cada
objetivo da lista por ordem de importncia. Se seus objetivos esto agrupados em categorias, pea
que classifiquem a importncia de cada categoria separadamente. Pea que, caso tenham sugestes
para os nomes das categorias, escrevam-nas tambm.
Agora vem a parte difcil. Depois de coletar a classificao de todos, voc precisa mix-las em uma
nica lista principal. D mais peso para a opinio de pessoas importantes dentro da organizao,
mas use seu julgamento: algumas vezes a secretria tem opinies bem melhores sobre a internet do
que um alto executivo fora de alcance.
Agora voc tem um claro conjunto de metas. O seu site tem um propsito! Mas espere. Voc ainda
precisa ter os objetivos aprovados antes de continuar. Mostre a lista para algumas pessoas apenas
para ter certeza de que ela est OK. Convoque uma reunio se for necessrio. Faa o que for
preciso, mas certifique-se de que seu cliente concorda e assina embaixo os objetivos do site.

5. Documento de Design: Objetivos do Site

Uma vez que voc obtenha aprovao de todos os envolvidos, documente os objetivos do site e
publique-os onde todos na organizao do seu cliente e na sua prpria possam v-los. Se voc tiver
tempo, resuma a lista e escreva uns poucos pargrafos sobre os objetivos. Um simples resumo
suficiente.
A lista de objetivos a base para o seu documento de design, que foi mencionado no incio.
Depois que voc tiver publicado os objetivos, use-os para criar a primeira seo do seu documento
de design, chamada Objetivos.
Exemplo:

Arquitetura da Informao - Tutorial - Lio 1

1 - Objetivos

Voc acaba de completar a primeira lio: Definindo os Objetivos do Site. Voc est pronto para
avanar para a prxima lio.

Arquitetura da Informao - Tutorial - Lio 2

1. Defina a Experincia do Usurio
Depois de descobrir por que um site deve ser construdo, o segundo aspecto mais importante ao
projetar a arquitetura da informao determinar quem o pblico-alvo. Este um passo
inestimvel que muitas pessoas falham em captar. Muitos sites nem sequer levam em considerao
quem os estar usando. Como voc pode desenhar um site se voc no sabe quem ir v-lo?
Algumas pessoas pensam que o pblico-alvo definido pela tecnologia que usam para acessar o
site. Isso, tambm, falha em captar a essncia. O fato que um usurio visitando o site utiliza um
modem 28.8 kbps somente uma pequena parte da definio do pblico-alvo. Uma verdadeira
definio do pblico-alvo consiste em quem so os usurios e quais suas metas e objetivos.
Cenrios, ou estrias, so teis na visualizao do pblico-alvo.
De vez em quando, um nico departamento ou grupo em uma organizao conduz a tarefa de
montar um website. O resultado geralmente um site focado nas necessidades desse grupo,
ignorando as necessidades de todos os demais. Por muito tempo, a gerncia de Sistemas de
Informao era responsvel por montar o site de sua corporao. Esses sites eram utilitrios, e
negligenciavam departamentos importantes, como o marketing. seu trabalho prevenir que isso
acontea ao seu site.
Definir de antemo a experincia que voc quer que o usurio tenha estabelece uma clara e bem
documentada definio de seu pblico-alvo, e ajuda a entender como os usurios iro reagir ao site.
Para dar andamento a esta etapa do procedimento da A.I., assim como foi ao definir os objetivos,
voc precisa descobrir quem estar envolvido e quanto tempo voc ter. Em geral, as mesmas
pessoas estaro envolvidas. Todavia, voc provavelmente ir mudar o peso que voc dar opinio
de cada uma das pessoas. Por exemplo, o departamento de marketing deve ter uma boa idia de
quem seu pblico-alvo . Se esse o caso, voc ir querer ouv-los mais do que aos outros.
Definir o pblico-alvo toma menos tempo do que definir os objetivos, porque voc j estabeleceu
como voc estar trabalhando com as pessoas - seja formal ou informalmente - e voc est mais
familiarizado em fazer perguntas e obter respostas do pessoal.

2. Defina o Pblico-Alvo
Lembra-se da lista de pblicos-alvo que voc compilou? Voc precisa dela agora. Ela a base para
uma lista de todos os possveis pblicos para o site. Adicione tantas definies de pblico quanto
voc conseguir imaginar na lista, e pergunte a todos se tm quaisquer adies a fazer. Se a lista ficar
muito longa, voc pode precisar dividi-la em categorias.
Vejamos um exemplo: voc est construindo um site para vender automveis. As categorias de
pblico podem ser Compradores, Vendedores, Negociantes, e Outros. Compradores seriam as
pessoas que precisam comprar um carro imediatamente, aqueles que precisam de um carro dentro
dos prximos dois meses, e pessoas sem certeza se elas precisam de um carro e que esto apenas
pesquisando. O pblico Outro consistiria nas pessoas tentando aprender sobre quem construiu o
site, assim como possveis investidores no site, e aqueles buscando por diferentes tipos de
informao.

Arquitetura da Informao - Tutorial - Lio 2

Faa com que todos classifiquem por ordem de importncia cada pblico-alvo especificado na lista.
Rena os resultados, e crie uma lista de pblicos-alvo. Lembre-se de que voc ir querer pesar a
opinio de cada pessoa apropriadamente ao criar a lista.
Ento fornea a lista de pblicos-alvo para todos de modo que possam anotar quais eles pensam ser
as necessidades e metas mais importantes para cada um. Mais uma vez, compile os resultados, e
crie listas. Faa com que todos classifiquem por ordem de importncia cada necessidade e meta para
cada pblico-alvo. Uma vez que voc tenha processado todas as opinies, acrescente as
necessidades e objetivos lista de pblicos-alvo.
Voc pode, claro, encurtar este procedimento se voc quiser. Voc no precisa angariar uma lista
de pblicos, avali-la, e ento angariar as necessidades e metas e avali-las. Voc pode angariar
ambas numa mesma etapa. Tudo depende da urgncia e do tempo disponvel para construir o site.
Agora voc est pronto para a prxima etapa, uma das mais divertidas em todo o processo de design
da A.I.

3. Crie Cenrios
Cenrios so estrias. Elas contam os casos de usurios vivenciando o site, e elas ajudam voc e
seus colaboradores a visualizarem o site e seus usurios. Cenrios tambm so teis para validar o
design do site quando estiver terminado: se os cenrios combinam com o design do site, voc fez a
coisa certa.
Usando a definio prvia de seus pblicos-alvo, tente selecionar um conjunto de usurios que
represente a maioria dos visitantes. O tamanho do site e do pblico determinaro para quantos
usurios voc ir descrever cenrios. Em geral, trs a seis cenrios so o suficiente. No entanto,
voc talvez precise descrever at cerca de vinte - acredite!
Para cada usurio, escreva um cenrio. Para comear um cenrio, voc precisa dar vida ao usurio.
Crie um personagem para aquele usurio, e d um nome a ele, um histrico, e uma tarefa a ser
realizada no site. Use uma tarefa da sua lista de necessidades e metas, contida na lista de pblicosalvo. Ento escreva uma histria sobre como o personagem utiliza o site para completar a tarefa
escolhida. Cenrios sero importantes mais tarde, quando voc estiver definindo o contedo e os
requisitos funcionais para o site. Pode parecer como o problema do ovo e da galinha - se voc no
sabe o que o site contm, como voc pode escrever uma estria sobre ele? Bom... voc j tem uma
idia do que os usurios estaro fazendo no site, ento use a sua imaginao! O cu o limite. Ser
criativo aqui ir elevar o seu design para alturas que voc no imaginava alcanar. Criar cenrios
no to difcil, e pode ser bastante divertido (mas esteja atento, pode consumir muito tempo).

4. Anlise Competitiva
Conhecer seus competidores uma boa maneira de aprender sobre seu prprio site. Esteja voc
casualmente navegando pelo site de seu rival ou seriamente avaliando todos os competidores um a
um, voc precisa estar a par do que os outros sites esto fazendo.
Para comear, faa uma lista dos seus competidores. Pergunte, pois voc provavelmente no
conhece todos os sites. Faa algumas pesquisas na internet tambm; voc poder encontrar alguns
sites que o seu cliente desconhece.
Em seguida, voc precisa elaborar um conjunto de caractersticas e critrios para avaliar cada site.
Comece com os seus objetivos, usando-os como uma base para o conjunto de caractersticas na sua
anlise competitiva. Enquanto voc avalia os sites, certifique-se de adicionar todas as caractersticas
e funcionalidades que voc achar interessantes. Os critrios incluem coisas como tempo de
download, tamanho da pgina, layout, e estilo. Ajuda muito desenhar uma tabela com o nome de um
site para cada coluna, e as caractersticas e critrios nas linhas. Essa tabela proporciona uma medida

Arquitetura da Informao - Tutorial - Lio 2

crua e objetiva de como outros sites se comparam. Aqui est um exemplo:

Agora voc est pronto para avaliar cada site. Isto bastante fcil de fazer, mas voc deve ser
minucioso. Cada caracterstica ou critrio pode ser avaliado de duas maneiras: uma simples
marcao de checagem ou um nmero de 1 a 10. Por exemplo: se voc est comparando quais sites
oferecem contas gratuitas de e-mail, isto pode ser feito com uma simples marcao de checagem.
No entanto, avaliar o estilo de um site mais subjetivo. Da maior importncia tomar notas e
capturar imagens de telas de cada site. Elas serviro para refrescar sua memria no futuro, quando
as pessoas perguntarem por que alguns sites se saram melhor do que outros. No se esquea de
avaliar seu site existente, se houver um.
Finalmente, documente os resultados. Para cada site, escreva os prs e contras, e inclua suas
anotaes e capturas de tela. Pontos extras para aqueles que puderem criar uma apresentao no
PowerPoint para a gerncia. Faa um agendamento para revisar a anlise competitiva, pois o seu
site, assim como os de seus competidores, iro evoluir. Escolha um bom perodo de tempo para a
reviso da anlise, que pode ser alguma coisa entre seis semanas at trs meses.
A anlise competitiva pode ser um projeto por si mesma. Providencie alguma ajuda, se for possvel.
No negligencie a importncia de revisar os seus competidores. Se voc no tem tempo suficiente
para fazer uma anlise apropriadamente, uma rpida e superficial servir.

5. Documento de Design: Pblicos-Alvo, Cenrios e Anlise

Competitiva
hora de documentar o que voc fez. Crie uma nova seo no seu documento de design chamada
Experincia do Usurio. Inclua a definio do pblico-alvo, e incorpore os cenrios. Voc pode
tentar integrar os cenrios com a definio do pblico, mas provavelmente ser melhor coloc-los
em suas prprias sub-sees. Em seguida, escreva um resumo da anlise competitiva e a inclua no
documento de design. A anlise competitiva completa pode ser includa como um apndice.
Lembre-se de publicar esses resultados de maneira que todos possam v-los.
Exemplo:

2 - Experincia do Usurio
2.1 - Definio do Pblico-Alvo
2.2 - Cenrios
2.3 - Resumo da Anlise Competitiva
Apndice A: Anlise Competitiva

Agora voc est pronto para prosseguir para a terceira lio.

Arquitetura da Informao - Tutorial - Lio 3

Arquitetura da Informao - Tutorial - Lio 3

1. Contedo do Site
Agora que voc j sabe sobre o que ser o seu site e para quem ele , voc est pronto para
determinar o que ele ir conter. Todos ao seu redor esto comeando a ter idias, e alguns podem at
ter uma imagem mental do como o site deveria se parecer. Voc deve tomar as rdeas dessa energia
criativa e canaliz-la em um processo produtivo. Voc j tem um acordo quanto aos objetivos e ao
pblico, voc estar usando os procedimentos com os quais todos j esto familiares agora.
O ponto desta parte do procedimento da arquitetura da informao colecionar as peas para criar a
estrutura e organizao do site. Voc ter que responder duas questes: Quais componentes de
contedo o site precisa? Quais tipos de funcionalidade sero requeridas? Pense nisso da seguinte
forma: Se voc quiser construir uma espaonave a partir de peas do brinquedo Lego, voc precisa
selecionar e pegar todas as peas que voc ir usar. Essas peas representam o contedo. Se voc
quer que seu brinquedo Lego faa coisas, voc precisa escolher quais motores e processadores ir
precisar (sim, Lego computadorizado neste exerccio). Essas peas representam a funcionalidade.
Para tomar as rdeas sobre todas as idias a respeito de como o site ir funcionar, crie uma lista do
contedo e dos requisitos funcionais. Ento chegue a um consenso sobre como esse contedo ser
agrupado e rotulado. Um efeito colateral desse procedimento a criao de uma lista de contedo
ou inventrio, que ser a base para a estrutura do site.

2. Identifique o Contedo e os Requisitos Funcionais

Use a lista de objetivos, as necessidades do pblico, e sua anlise competitiva - os quais voc j
reuniu - para comear duas novas listas: uma de componentes de contedo e outra de requisitos
funcionais para o site. Inclua qualquer pgina Web em potencial ou tipos de contedo que voc
puder imaginar em cada lista. Tipos de contedo incluem esttico, dinmico, funcional e
transacional. Notas de copyright, poltica de privacidade, e regras de participao so exemplos de
contedo esttico. Pginas de login de membros, pginas de assinatura em boletins por e-mail, e
outras pginas envolvendo formulrios ou transaes devem ser includas na sua lista de requisitos
funcionais. Navegue pelos sites de seus competidores, e inclua quaisquer pginas que no estejam
nessas duas listas.
Enquanto voc estiver gerando essas duas listas, faa com que todos criem suas prprias listas de
contedo desejado e incorpore-as em sua lista de contedo. Fao com que todos revisem essa lista
com a finalidade de estabelecer um senso de quo importante cada componente de contedo.
Revise sua lista se for necessrio. Agora voc tem o que chamado de um "inventrio de
contedo". Algumas pessoas afirmam que reunir contedo sua dificuldade nmero um. O
inventrio de contedo pode ser usado para iniciar esta tarefa mais cedo.
Usando o inventrio de contedo, revise sua lista de requisitos funcionais. Se o inventrio de
contedo contm pginas para cancelamento de compras, bom que o sistema seja capaz de
cancelar compras. Trabalhe junto ao pessoal de tecnologia e produo para determinar a
possibilidade de se realizar cada requisito. Vocs possuem a tecnologia e as habilidades para
suportar cada requisito? Vocs tm o tempo e o dinheiro para comprar ou construir a
funcionalidade? Classifique cada requisito por ordem de importncia. Voc talvez tenha que
eliminar alguns para que possa cumprir os prazos estabelecidos. Outros requisitos podero vir a ser
obscurecidos por requisitos mais importantes e sarem da sua lista.

Arquitetura da Informao - Tutorial - Lio 3

10

3. Agrupe e Rotule o Contedo

Ordem a partir do caos - sobre isso que se trata nesta etapa. Agora voc organiza o contedo e
define a base para a estrutura do site. Comece escrevendo cada componente do inventrio de
contedo em um carto de ndice. Pegue os cartes e organize-os em grupos. (Voc ir querer uma
grande mesa para fazer isso.) Tente organiz-los de modos diferentes. Quando voc estiver satisfeito
em como as coisas se agruparam, d um nome para cada grupo; tente ser o mais descritivo possvel,
e evite ser prolixo. Registre o nome de cada grupo e os elementos que contm.
Repita este procedimento com todos os envolvidos. importante registrar como cada pessoa
organiza a informao e nomeia cada grupo. Certifique-se de dizer a todos que no existe resposta
certa ou errada. Todas as opinies so vlidas. Idias excelentes muitas vezes surgem das fontes
mais inesperadas.
Depois que todos tiverem passado pelo exerccio, compare e contraste como cada pessoa organizou
a informao. Dependendo de como voc quiser faz-lo, voc pode chamar a todos para discutir os
prs e contras de cada layout, ou trabalhar um a um com as pessoas mais intrigantes e suas idias,
ou simplesmente organizar todos os pensamentos por conta prpria.
Quando voc decidir os agrupamentos e nomes finais, use-os como a base para definir as maiores
sees do site e os nomes de cada seo. Essa a base para a estrutura do seu site. Esteja atento,
porm: considere as sees principais como passageiras - os seus nomes e contedo podem mudar
na prxima etapa do procedimento da A.I. Tome o cuidado de fazer circular as sees e seus nomes
entre algumas figuras-chave para ter certeza de que esto de acordo com eles. Finalmente, revise o
inventrio de contedo, se necessrio, para refletir a nova organizao da informao.

4. Documento de Design: Contedo e Funes

Crie uma nova seo no seu documento de design chamado Contedo e Requisitos Funcionais.
Inclua um resumo do inventrio de contedo. Inclua uma sub-seo sobre como o contedo est
agrupado e nomeado. Inclua a lista de requisitos funcionais com um resumo, se voc quiser. O
inventrio de contedo deve ser includo como um apndice ao documento de design. Lembre-se de
publicar estes resultados de modo que todos possam v-los.
Exemplo:

3 - Contedo do Site
3.1 - Agrupamento e Rotulao do Contedo
3.2 - Requisitos Funcionais
Apndice B: Inventrio de Contedo

Voc acaba de completar a terceira lio e est pronto para a quarta lio: A Estrutura do Site.

Arquitetura da Informao - Tutorial - Lio 4

1. Estrutura do Site
Se voc seguiu as trs primeiras lies, at agora voc j tratou bem os objetivos do site, quem ser
o pblico-alvo, e que tipos de contedo e funcionalidade voc ir precisar. Agora hora de definir a
estrutura do site, que a fundao sobre a qual voc construir tudo o mais.
Pense na estrutura do site como um esqueleto que mantm o corpo unido. Sem estrutura, o seu site
se torna uma baguna confusa e desordenada - algo como uma ameba. Voc quer um site
desorganizado, desagradvel, difcil de usar? No! Voc quer um site evoludo, altamente
estruturado e fcil de usar, que pode at andar com suas prprias pernas.

Arquitetura da Informao - Tutorial - Lio 4

11

Depois de criar uma boa estrutura para o site, tudo o mais ir se encaixar no lugar. No pode deixar
de faz-lo! Uma estrutura bem projetada torna fcil elaborar um sistema de navegao, e os dois
juntos possibilitam desenhar os temas e layouts de pgina num piscar de olhos. Esta a ltima etapa
antes que voc possa de fato comear a construir alguma coisa.

2. Explorando a Metfora
Este prximo passo, que pode ser chamado de "explorao da metfora", pode ajudar a refinar a sua
viso da estrutura do site, mas importante lembrar que este passo apenas um exerccio. Pode lhe
trazer muitas boas idias, mas elas podem ser impraticveis, na melhor das hipteses. Mas no
deixe isso desanim-lo - pode ser bastante divertido.
til explorar diversas metforas na tentativa de determinar a estrutura de um site. Uma boa
metfora pode ser muito til em ajudar os usurios a entender como usar e navegar pelo site.
Todavia, nenhuma metfora perfeita, ento no sinta que voc deve aderir rigidamente a apenas
uma. Voc poder pegar as melhores partes de vrias metforas e junt-las em uma (ou talvez voc
no encontre absolutamente nenhuma metfora til).
Trs tipo de metforas so teis para o design de um site:
Metforas Organizacionais
Metforas organizacionais dependem da estrutura existente de um grupo, sistema ou organizao.
Por exemplo, se voc est criando um site para vender alimentos, sua metfora poderia ser um
supermercado, onde produtos so agrupados logicamente por tipo (vegetais enlatados, laticnios,
cereais, biscoitos, etc). Esteja ciente de que copiar a hierarquia organizacional do seu cliente em
geral no uma boa idia - consumidores de mercearias no poderiam se importar menos com a
estrutura corporativa de um supermercado.
Metforas Funcionais
Metforas funcionais relacionam tarefas que voc pode fazer no site com tarefas que voc pode
fazer em outro ambiente. O programa grfico Photoshop utiliza muitas metforas funcionais: voc
pode figuradamente "cortar", "copiar" e "colar" grficos em um computador - como se voc
estivesse utilizando tesoura e cola no mundo real.
Metforas Visuais
Metforas visuais so baseadas em elementos grficos comuns, familiares para a maioria das
pessoas em nossa cultura. Se voc est elaborando um site de msica que permite aos usurios
tocarem msicas, voc pode querer usar os cones tradicionais para "tocar", "parar" e "pausar",
encontrado em todos os aparelhos que tocam CD.
Para comear a explorao de metforas, junte seu pessoal e faa um brainstorm de idias. Revise e
avalie cada metfora. Tente no desencorajar quaisquer sugestes que voc no goste, pelo menos
no imediatamente. A fora de uma metfora pode no ser bvia primeira vista. Tente mapear as
sees principais do site conectando elementos do inventrio de contedo para cada metfora.
Depois do que pode ter sido uma experincia vivaz e entretida, voc deve escolher uma metfora ou
uma composio delas para a estrutura do site. Lembre-se, nenhuma metfora perfeita. O site
como um todo pode no ser explicvel atravs de uma metfora, mas talvez o sistema de navegao
(ou partes menores do site) possam.

3. Esculpindo
Agora que voc j tem uma idia para a estrutura do site, voc vai querer grav-la em pedra. Voc
pode comear criando em texto um mapa hierrquico do site, chamado "listagem da estrutura do site".

Arquitetura da Informao - Tutorial - Lio 4

12

As sees principais que voc definiu anteriormente so as "razes" da listagem da estrutura do site.
Encaixe-as de acordo com sua idia ou metfora. Em seguida, mapeie a organizao de cada seo
com itens do inventrio de contedo. Na medida em que voc se aprofunda no site, faa a
indentao dos nveis inferiores. Voc ir repetir este procedimento vrias vezes. Ao longo do
tempo, focalize as partes mais especficas do site. Voc deve terminar com uma listagem com visual
mais ou menos assim:
Seo 1
Seo 1.1
Seo 1.2
Seo 2
Seo 2.1
Seo 2.2
Seo 2.2.1
Seo 2.2.2
Seo 2.2.3
Seo 2.3
Seo 2.4
Seo 3

Em seguida voc ir querer visualizar essa listagem. Muitas pessoas tm dificuldade em ver alguma
coisa parecida com a listagem da estrutura do site e traduzi-la em entendimento de como o site ir
funcionar. Plantas arquiteturais podem ajudar. Aqui est um exemplo:

Arquitetura da Informao - Tutorial - Lio 4

13

Plantas arquiteturais so representaes visuais da estrutura do site. So diagramas mostrando como

os elementos do site esto agrupados e como eles se ligam ou se relacionam uns com os outros.
Voc vai precisar fazer uma legenda que defina como os links internos e externos, componentes de
pgina, pginas e grupos de pginas esto representados nas plantas. Voc pode querer distinguir
entre partes do site que executem uma funo ou transao, partes do site que so geradas
dinamicamente, e pginas constitudas meramente de texto. Se o seu site grande, voc pode ter
que fazer vrias plantas arquiteturais, comeando com uma viso geral do site e ir trabalhando
gradualmente com diagramas cada vez com um nvel de detalhe maior.

4. Defina a Navegao
Como os usurios iro usar o site? Como eles iro ir de um lugar para outro? Como prevenir que se
percam? Definir o sistema de navegao para o site soluciona esses problemas.
D uma olhada na listagem da estrutura do site. Quais so as sees principais? Essas so
excelentes candidatas para o sistema de navegao global, que aparece um todas as pginas do site e
possibilita aos usurios a rapidamente se deslocar entre as sees. Se for possvel, tente limitar o
nmero de elementos da navegao global entre cinco e sete. Outra boa idia incorporar a marca
do seu site - o logotipo da organizao - na navegao global como parte do link de retorno pgina
principal do site.
A navegao local pode tomar diversas formas. Pode ser uma lista de tpicos, como pode ser visto
no Yahoo e no GeoCities. Pode tomar a forma de um menu de opes como na rea de membros do
GeoCities. Ou ainda, pode ser uma lista de uns poucos itens relacionados.
essencial que voc documente o sistema de navegao global e o mximo de sistemas de
navegao locais que voc puder. Isso pode ser to simples quanto compilar uma lista dos
elementos que compem cada sistema.
Por exemplo, o site Webmonkey tem um sistema de navegao global que pode ser documentado
como uma lista: "O dispositivo de navegao global contm links para todas as sees principais em
Webmonkey: design, HTML, HTML dinmico, etc." Uma definio para uma navegao local
poderia ser: "Para um artigo com diversas partes, uma lista com os links para cada parte aparece no
final de cada pgina. Use o ttulo da parte como link para aquela parte."

5. Documento de Design
Hora de documentar! Crie uma nova seo no seu documento de design chamada "Estrutura do
Site". Escreva um resumo ou explicao metafrica sobre a idia principal por trs da estrutura do
site. Inclua a listagem da estrutura do site. Se a listagem da estrutura do site for muito longa, inclua
uma verso reduzida, e inclua o restante como um apndice. Junte as plantas arquiteturais e as
inclua no documento de design. Documente os esquemas de navegao global e local. Como
sempre, publique os resultados onde todos possam v-lo.
Exemplo:

4 - Estrutura do Site
4.1 - Listagem da Estrutura do Site (or Resumo)
4.2 - Plantas Arquiteturais
4.3 - Sistemas de Navegao Global e Local
Apndice C: Listagem da Estrutura do Site (opcional)

Voc est indo bem - falta apenas uma lio!

Arquitetura da Informao - Tutorial - Lio 5

14

Arquitetura da Informao - Tutorial - Lio 5

1. Design Visual
Agora voc j sabe algumas coisas sobre o seu site: por que voc o est construindo, quem o
pblico, o que vai estar no site (isto , o contedo), e como tudo est estruturado. Voc agora est
pronto para trabalhar no design visual, que costuma ser o aspecto mais agradvel do design de um
site.
Um de seus principais motivos proporcionar aos usurios uma sensao de localizao. Eles
precisam saber onde eles esto no site, por onde eles j passaram, e como chegar onde eles querem.
Uma boa estrutura combinada com um design visual eficiente possibilita que os usurios construam
uma imagem mental do mapa do site.
A meta desta lio partir da estrutura do site e mape-la num design visual. Algumas ferramentas
so teis na criao do design. O primeiro passo criar os grids de layout que definem a estrutura e
organizao do site em relao a como uma pgina ir aparecer. Ento, esboos de design iro
estabelecer um estilo visual geral. Os grids de layout combinados com os esboos de design iro
trazer modelos de pgina, os quais por sua vez levaro construo de prottipos funcionais na
Web.
Neste ponto, voc vai precisar da ajuda de designers grficos, diretores de arte, e diretores de
criao, bem como seu pessoal de produo.

2. Grids de Layout
Grids de layout so padres (moldes) que descrevem pginas Web. Contedo - o foco de cada
pgina - requer posicionamento proeminente. Voc ir necessitar blocos de espao para a navegao
global e local e integrar os demais aspectos do site que podem no fazer parte da estrutura do site. A
marca da organizao precisa estar presente em cada pgina. Publicidade e chamadas de patrocnio
devem ser incorporadas ao design. Aqui est um exemplo de grid de layout:

Arquitetura da Informao - Tutorial - Lio 5

15

Para se preparar, pegue a listagem da estrutura do site e faa uma lista de todos os tipos de pgina
possveis. Pginas individuais dentro do site devem ser muito similares na forma atravs de todas as
sees principais. Pesquise no inventrio de contedo, e ento tente ficar com dois ou trs tipos
genricos de pgina. Voc deve comear fazendo o design para esses tipos e ento us-los como
base para todos os demais tipos de pgina.
Para comear, use um bloco de esboos ou um programa grfico de sua predileo. Crie um
retngulo representando a pgina, e delineie blocos para os elementos do seu design. Uma vez que o
contedo o elemento mais importante, comece com ele - ainda que seja um pouco complicado, na
medida em que voc ainda no sabe o que mais estar na pgina. Muitos outros elementos precisam
ser considerados: branding (marca, logotipo, slogan), publicidade e patrocnio, navegao, ttulos
da pgina, grficos do cabealho, e rodaps, incluindo copyrights.
Branding (que inclui marca, logotipo, slogan) representa um papel muito proeminente em todas as
pginas poque informa o usurio que eles ainda esto no site. Um lugar comum para o branding o
canto superior esquerdo da pgina.
Publicidade e patrocnio podem ser integrados de diversas maneiras. Talvez voc tenha um banner
comercial de tamanho completo (tipicamente 468 por 60 pixels) em todas as pginas. Voc o coloca
no topo? Ou o coloca debaixo do ttulo de cada pgina? Como voc integra o patrocnio? Nos
grficos do cabealho de cada pgina? Ou h um pequeno logotipo de patrocnio ao final de cada
pgina? Todas essas so questes que voc precisa responder.
Por fim , a navegao tambm tem um papel muito proeminente. A navegao global precisa ser
consistente atravs de todas as pginas do site. Sistemas de navegao local podem mudar,
dependendo do contedo, mas tente ser o mais consistente possvel.
Este um procedimento iterativo. Voc ir precisar revisar os grids de layout diversas vezes. Voc
provavelmente ir querer fazer dois ou trs layouts com estilos diferentes, se voc tiver tempo.

3. Esboos de Design e Modelos de Pgina

Esboos de design so usados para estabelecer o visual e o estilo do site. Eles podem ser integrados
metfora ou idia da estrutura do site, mas isso nem sempre necessrio. Freqentemente, eles
so feitos simultaneamente aos demais procedimentos da arquitetura da informao, de modo que
voc talvez j possa ter os esboos de design prontos e aprovados pelo cliente.
Os esboos no tm que necessariamente representar a estrutura ou organizao. No entanto, os
designers grficos tm que saber o tamanho dos arquivos grficos, bem como quaisquer outras
restries tcnicas.
O prximo passo criar modelos de pgina, que representam o site de fato, integrando os esboos
de design com os grids de layout. Os modelos precisam ser o mais parecidos possvel com as
pginas reais do site. Use seu programa grfico favorito para manipular os esboos. Experimente
cortar e colar as peas sobre seus respectivos lugares nos grids de layout. Outra opo construir os
modelos de pgina em HTML, usando as peas dos esboos de design como grficos.
Os modelos de pgina so a base para um prottipo baseado na Web ou, se o seu site for pequeno o
suficiente, a base para a construo do site final. Modelos de pgina precisam ser aprovados pelo
cliente, apesar de poder ser suficiente ter a aprovao da estrutura do site e dos esboos de design
para avanar com os prottipos.
Agora voc completou os passos para modelar a arquitetura da informao para o seu site! Voc tem
todos os materiais necessrios para construir um prottipo, e tudo o mais deve se encaixar a partir
da. Antes de voc mergulhar na prototipao, adicione uma ltima seo no seu documento de
design.

Arquitetura da Informao - Tutorial - Lio 5

16

4. Documento de Design
Voc est quase terminando. Voc precisa apenas documentar o design visual do site. Crie uma nova
seo no seu documento de design chamada Design Visual. Documente os grids de layout, e
certifique-se de incluir os diagramas que voc fez. Rena os esboos de design, e os inclua no
documento, bem como as imagens dos modelos de pgina. Inclua capturas de tela do prottipo
baseado na Web, se for possvel. O documento de design est completo agora, provendo uma
minuciosa descrio do design do site. Ser til para construir o site, para adicionar contedo, e
para atualizar o site quando esse momento inevitvel chegar.
Exemplo:

5 - Design Visual
5.1 - Grids de Layout
5.2 - Esboos de Design
5.3 - Modelos de Pgina
5.4 - Prottipo baseado na Web

Voc acaba de completar a ltima lio. Agora tudo o que necessrio para ser um verdadeiro
arquiteto da informao praticar bastante.

Texto original de John Shiple

Traduo de Joo Henrique de Andrade Bruni
1 verso, reviso 1 Uberlndia, 22 de abril de 2008