Arquitetura de Informação em 7 etapas
Upcoming SlideShare
Loading in...5
×
 

Arquitetura de Informação em 7 etapas

on

  • 1,272 views

Um exemplo de processo pra fazer Arquitetura de Informação.

Um exemplo de processo pra fazer Arquitetura de Informação.

Statistics

Views

Total Views
1,272
Views on SlideShare
1,272
Embed Views
0

Actions

Likes
1
Downloads
26
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

Arquitetura de Informação em 7 etapas Arquitetura de Informação em 7 etapas Document Transcript

  • ARQUITETURA DE INFORMAÇÃO PROJETANDO A EXPERIÊNCIA DO USUÁRIO Com André Silveira @energizadorArquitetura de Informação em 7 etapasNão vou falar sobre a importância de existir uma etapa específica onde seja trabalhada a Arquitetura deInformação e como isso traz qualidade pro seu produto, pois isso já fiz neste post http://energizador.blogspot.com/2011/10/preciso-mesmo-ter-arquitetura-de.html. Quero mostrar um exemploprático elaborado através de entrevistas com colegas, pesquisas e minha experiência de trabalho nasagências por onde passei.1. BRIEFINGTudo começa com a captura de informações essenciais essenciais pro projeto. Pode ser seu primeiro pontode contato com o cliente, então vou dar algumas ideias pra você começar bem essa relação:• Antes da reunião, estude o mercado do cliente, busque saber tudo sobre ele;• Questione apenas o necessário, não canse o cliente fazendo perguntas que já estão respondidas em seu site ou nas redes sociais;• Formule diferentes tipos de briefing para projetos promocionais, institucionais, sistemas, mobile, etc.;• Foque em questões estratégicas do negócio, como objetivos, diferenciais e problemas a resolver - isso é o básico;• É hora de ouvir;• Você não precisa ter as respostas agora. Pegue as informações para depois estudá-las;Recursos utilizados:• Basecamp, sistema de colaboração entre o cliente e você;• Qualquer editor de texto, como MS Word;• Mindjet MindManager, um software de mapas mentais;• Gravador de voz digital (uso o Sony ICD-PX 820, mas os da Olympus são ótimos também).2. ANÁLISEApós captar os dados, é hora de aprofundar o estudo examinando/ evoluindo os itens do documento etrazendo tipos de análise que possam contribuir. A análise pode ser uma evolução do Briefing pra um (51) 3325-2596 1 www.targettrust.com.br
  • ARQUITETURA DE INFORMAÇÃO PROJETANDO A EXPERIÊNCIA DO USUÁRIO Com André Silveira @energizadordocumento estratégico e norteador ao projeto (v2_briefing_website_Nome da Empresa). Principais técnicasutilizadas:• Se for um redesenho, gosto de fazer uma análise da usabilidade atual do site, assim vejo as falhas do projeto. Uso as Heurísticas do Nielsen e um Checklist que montei com o passar do anos;• Análise SWOT, é boa pra tudo;• Ambientes de referências ou empresas benchmark são ótimos caminhos pra você viver mais o mercado do seu cliente (veja, anote, faça observações quanto ao design, tecnologia e tudo mais que achar interessante);• Através dos meus contatos do GMail ou Facebook, monto uma espécie de grupo de interesse, pessoas tudo-a-ver com o público dos caras. Entrevisto pelo menos 10 pessoas com questões relacionadas ao projeto;• Relatórios estatísticos do consumidor (como os do IBOPE), do site (Google Analytics), etc.;• Por fim, consolido minhas descobertas, reescrevo o Briefing de uma forma fácil e objetiva e envio pro cliente.Recursos utilizados:• Editor de texto;• Grupos do Facebook;• Sites de referência como Behance, CPLUV, INfront, TAXI, Design is Kinky, Fubiz, Creattica, entre outros. Durante essa fase de pesquisa e maturação das ideias, eu crio um .txt onde coloco: Lista de sites com observações de pontos interessantes da estrutura (exemplo: "Sofitel: área pra reserva"; Nike: menu...); Ideias que vão surgindo, anoto tudo e depois filtro o que é ou não possível; Lista de assuntos possíveis ao site (como se fosse um sitemap, mas sem questionar se vale ou não - vejo isso depois).3. BRAINSTORMINGVocê pesquisou, quebrou a cabeça, pensou várias vezes que era um inútil por não achar soluções? Calma,seus problemas acabaram ;-): utilize o time de projeto, apresente a questão e discuta as possibilidades.Importante: (51) 3325-2596 2 www.targettrust.com.br
  • ARQUITETURA DE INFORMAÇÃO PROJETANDO A EXPERIÊNCIA DO USUÁRIO Com André Silveira @energizador• Não se iluda com todas as ideias possíveis, muito menos com as pessoas "do contra"; absorva o que importa pra você definir o projeto - se quiser, deixe claro isso pra seus colegas, antes de começar;• Não faça escândalos se uma de suas ideias "morrerem" ou forem vencidas por outra melhor. Aceite e siga em frente.Recursos utilizados:• Mindjet MindManager;• Browser Steck Pad pra esboçar possibilidades.4. CONCEITOFaça um balanceamento com o escopo contratado e formule o Conceito (de AI) do projeto, pois é a partirdeste validamento que você montará a estrutura e a ideia de navegação do site. Lembre que você já temdados pra isso, coletados durante o Briefing. Aquelas palavras são as fontes pra redação de um conceito.Siga o processo, não crie um protótipo sem antes definir a ideia do produto, nem que seja mentalmente, porhora. O Conceito será o seu argumento de venda, sua defesa pro GP e cliente, logo ali. Você encontraráótimas referências de conceito no livro Advertising Now. Online.5. SITEMAPPossivelmente você já tenha alguns rascunhos, agora crie um mapa que demostre claramente aorganização do site:• Formule através de nós (quadrados), conexões, esquemas de numeração e rótulos o seu sitemap;• Mostre quais são os itens da primeira tela;• Quais são as seções principais e locais - grupos de informação com rótulo adequado;• Quais seções serão gerenciáveis;• Quais itens serão comuns à Arquitetura de Informação (utilidades, ferramentas...);• Se inserir mais atributos de página, crie uma legenda.Recursos utilizados:• Mindjet MindManager ou Visio; (51) 3325-2596 3 www.targettrust.com.br
  • ARQUITETURA DE INFORMAÇÃO PROJETANDO A EXPERIÊNCIA DO USUÁRIO Com André Silveira @energizador6. WIREFRAMEO wireframe é a planta baixa do seu site, é o desenho NÃO estético, o esboço. Ele é o esqueleto do seusistema de navegação e, com exceção da hierarquia, do posicionamento dos componentes, em nada deveriase parecer com o layout final (Wireframes não precisam ser bonitos, não servem pra isso). O Wire nada maisé do que o resultado do seu processo de Arquitetura de Informação, a demonstração visual do projeto deinterface. Algumas dicas:• Primeiro, concentre-se num esboço, de preferência feito no papel; depois, refine, utilizando software de preferência, marcando e fazendo observações nas funcionalidades;• Não se preocupe com a estética, explore as possibilidades e utilize imagens e texto de marcação Lorem ipsum http://www.lipsum.com por enquanto;• Os padrões têm grande importância, pois ajudam o usuário no processo de habituação, predição, reorientação http://tinyurl.com/62u8gxt; logo, pense neles, templates http://pt.wikipedia.org/wiki/ Templates e na melhor forma de indicar para o usuário o conceito do projeto, o que é mais e menos importante em nível de informação em página inicial vs internas;• Com uma home e uma página interna, já é possível sentar-se com o cliente e aprovar o protótipo do projeto, dando possibilidade pra você progredir com o restante das páginas. É um erro do mercado achar que o DA consegue fazer ao mesmo tempo a Arquitetura de Informação e o Layout, pois uma coisa é organizar, classificar ou pensar no melhor rótulo (nomenclatura) pra um um item, outra coisa é pensar em cores, fontes e formatos. Fazer os dois juntos, literalmente, aumentará seu tempo de criação e, pior, prejudicará a usabilidade do site. Lembre-se que usuários toleram um design tosco, desde que ele funcione, desde que eles consigam REALIZAR algo. Mas usuários não toleram um site lindo, mas que é difícil de navegar, é desorganizado, é enigmático, que tem problemas com vocabulário... O importante é ter equilíbrio entre as disciplinas.Recursos utilizados:• Browser Steck Pad;• User Flow Stencil Kit;• Mockingbird ou Axure;• Adobe Fireworks (51) 3325-2596 4 www.targettrust.com.br
  • ARQUITETURA DE INFORMAÇÃO PROJETANDO A EXPERIÊNCIA DO USUÁRIO Com André Silveira @energizador7. TESTESEste item pode estar no final, mas realizo Testes constantemente, durante todo o processo, masprincipalmente antes de apresentar o protótipo ao cliente. Praticamente volto pra etapa de Análise e revisoo projeto, utilizo algumas das técnicas novamente, comprovando se estou atendendo aos objetivos denegócio da empresa. Ou seja, critico e realinho muito meu Conceito, Sitemap e Wireframe.(Fora as técnicas) Recursos utilizados:• UserTesting.com;• Concept Feedback;• Crazyegg (mapas de calor)Você viu que não tenho uma etapa pra documentação. Isso porque faço Wireframes com observações ondedescrevo o funcionamento das áreas onde é necessário explicação. É uma forma menos maçante e maisvisual de explicar o funcionamento do sistema.Por fim, aconselho que você acompanhe a produção do projeto até o final, fazendo manutenção daArquitetura de Informação proposta e, com isso, permanecer atendendo desejos iniciais, controlando riscose qualidade do produto. (51) 3325-2596 5 www.targettrust.com.br