Escolar Documentos
Profissional Documentos
Cultura Documentos
Arquitetura Da Informacao Tutorial
Arquitetura Da Informacao Tutorial
Tutorial
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
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.
1 - Objetivos
Voc acaba de completar a primeira lio: Definindo os Objetivos do Site. Voc est pronto para avanar para a prxima lio.
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.
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
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.
2 - Experincia do Usurio 2.1 - Definio do Pblico-Alvo 2.2 - Cenrios 2.3 - Resumo da Anlise Competitiva Apndice A: Anlise Competitiva
10
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.
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".
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:
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)
14
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:
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.
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