Arquitetura de Informação em 7 etapas

5

Click here to load reader

description

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

Transcript of Arquitetura de Informação em 7 etapas

Page 1: Arquitetura de Informação em 7 etapas

Arquitetura de Informação em 7 etapasNão vou falar sobre a importância de existir uma etapa específica onde seja trabalhada a Arquitetura de

Informaçã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 exemplo

prático elaborado através de entrevistas com colegas, pesquisas e minha experiência de trabalho nas

agências por onde passei.

1. BRIEFING

Tudo começa com a captura de informações essenciais essenciais pro projeto. Pode ser seu primeiro ponto

de 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ÁLISE

Após captar os dados, é hora de aprofundar o estudo examinando/ evoluindo os itens do documento e

trazendo tipos de análise que possam contribuir. A análise pode ser uma evolução do Briefing pra um

ARQUITETURA DE INFORMAÇÃO

PROJETANDO

A EXPERIÊNCIA

DO USUÁRIO Com André Silveira @energizador

(51) 3325-2596

www.targettrust.com.br1

Page 2: Arquitetura de Informação em 7 etapas

documento estratégico e norteador ao projeto (v2_briefing_website_Nome da Empresa). Principais técnicas

utilizadas:

• 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. BRAINSTORMING

Você 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:

ARQUITETURA DE INFORMAÇÃO

PROJETANDO

A EXPERIÊNCIA

DO USUÁRIO Com André Silveira @energizador

(51) 3325-2596

www.targettrust.com.br2

Page 3: Arquitetura de Informação em 7 etapas

• 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. CONCEITO

Faça um balanceamento com o escopo contratado e formule o Conceito (de AI) do projeto, pois é a partir

deste validamento que você montará a estrutura e a ideia de navegação do site. Lembre que você já tem

dados 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, por

hora. 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. SITEMAP

Possivelmente você já tenha alguns rascunhos, agora crie um mapa que demostre claramente a

organizaçã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;

ARQUITETURA DE INFORMAÇÃO

PROJETANDO

A EXPERIÊNCIA

DO USUÁRIO Com André Silveira @energizador

(51) 3325-2596

www.targettrust.com.br3

Page 4: Arquitetura de Informação em 7 etapas

6. WIREFRAME

O wireframe é a planta baixa do seu site, é o desenho NÃO estético, o esboço. Ele é o esqueleto do seu

sistema de navegação e, com exceção da hierarquia, do posicionamento dos componentes, em nada deveria

se 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 de

interface. 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

ARQUITETURA DE INFORMAÇÃO

PROJETANDO

A EXPERIÊNCIA

DO USUÁRIO Com André Silveira @energizador

(51) 3325-2596

www.targettrust.com.br4

Page 5: Arquitetura de Informação em 7 etapas

7. TESTES

Este item pode estar no final, mas realizo Testes constantemente, durante todo o processo, mas

principalmente antes de apresentar o protótipo ao cliente. Praticamente volto pra etapa de Análise e reviso

o projeto, utilizo algumas das técnicas novamente, comprovando se estou atendendo aos objetivos de

negó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 onde

descrevo o funcionamento das áreas onde é necessário explicação. É uma forma menos maçante e mais

visual de explicar o funcionamento do sistema.

Por fim, aconselho que você acompanhe a produção do projeto até o final, fazendo manutenção da

Arquitetura de Informação proposta e, com isso, permanecer atendendo desejos iniciais, controlando riscos

e qualidade do produto.

ARQUITETURA DE INFORMAÇÃO

PROJETANDO

A EXPERIÊNCIA

DO USUÁRIO Com André Silveira @energizador

(51) 3325-2596

www.targettrust.com.br5