Arquitetura de Informação

Melqui Jr. - Setembro de 2007 Arquitetura de Informação do planejamento à publicação dos websites

Brevíssimo histórico da Arquitetura de Informação

Brevíssimo histórico da Arquitetura de Informação (AI) 1976 - Criou o termo Arquitetura da Informação Saul Wurman 1993 - Aplicaram essa arquitetura em sistemas Peter Morville Lou Rosenfeld

Brevíssimo histórico da Arquitetura de Informação (AI) Wurman Morville Rosenfeld A conceituação da arquitetura de informação de Wurman era mais focada na mídia impressa, principalmente na produção de guias, mapas e Atlas. Com o tempo foi aplicada nos mais variados campos, de radiografia a layout de museus. Pioneiros mais reconhecidos na aplicação da AI voltada para web. Morville e Rosenfeld fundaram a empresa Argus Associates e lançaram em 1998 o livro considerado a Bíblia dos Arquitetos de Informação.

Envolvimento da Arquitetura de Informação em projetos de websites

Envolvimento da AI em projetos de websites O fluxo a seguir apenas marca pontualmente as fases de um projeto. A maior parte dessas fases acontecem simultaneamente.

Envolvimento da AI em projetos de websites Prospecção Briefing Planejamento Criação Publicação Produção Tecnologia AI Conteúdo Fluxo simplificado de projeto

AI na prospecção:

Análise heurística (Heurísticas de Nielsen)

Pesquisa o cliente

AI no briefing:

Estressa o briefing

Pesquisa o público alvo além do briefing

AI no planejamento:

Pesquisa o mercado de atuação (concorrência)

Macroplanejamento do projeto

Fluxograma do site

Fase de AI:

Teste de usabilidade

Macroarquitetura

Microarquitetura

AI no conteúdo:

Redação de arquitetura

Estrutura da informação

SEO (Search Engine Optimization)

AI na criação (layout):

Valida hierarquia informativa

Possibilita visão total do projeto

Permite ao designer foco total no trabalho

AI na produção:

Possibilita o adiantamento da produção

Auxilia o processo de montagem

AI na tecnologia:

Valida em usabilidade os sistemas

Auxilia o processo de programação

AI na publicação:

Valida pré-publicação (homologação)

Monitora pós-publicação

Macro e microarquitetura

Macro e microarquitetura Macroarquitetura Etapa da AI na qual se definem as principais telas e fluxos de navegação do site. Principais telas São as telas que servem de modelo para demonstrar a solução de arquitetura de informação utilizada. Microarquitetura Etapa da AI na qual se definem todas as telas e fluxos de navegação do site. Imagem do livro Fractal Creations, The Waite Group, Inc

Exemplo de macroarquitetura

Exemplo de Macroarquitetura Agência: Mídia Digital Cliente: Tecnisa Necessidade: ajustes na página de produto Solução: reformulação total da página Após o estudo do caso a solução foi simples. Sempre com foco no usuário final os conteúdos foram reagrupados e reorganizados na intenção de se explorar ao máximo todos os recursos na apresentação do produto . Uma vez que este cliente possuía imagens de alto padrão aproveitamos a oportunidade para utilizar o conceito de tangibilidade do virtual . Desta forma os recursos visuais como fotos e ilustrações foram explorados ao máximo ganhando maior peso na hierarquia do conteúdo. Para que isso ocorresse com sucesso também foi importante reestruturar outros elementos que compunham a página de produto como menus, formulários, promoções e canais de contato .

Exemplo de Macroarquitetura

Exemplo de Macroarquitetura Grande área para imagens

Exemplo de Macroarquitetura Reestruturação do menu

Exemplo de Macroarquitetura Maior destaque para acesso aos formulários de interesse.

Exemplo de Macroarquitetura Reorganização dos canais de atendimentos

Exemplo de Macroarquitetura

Exemplo de microarquitetura

Exemplo de Microarquitetura

Resultados do redesenho

Aumento de 96% da visitação no site em 2007.

Aumento de 81% em vendas.

Aumento em 29% da taxa de conversão visita/chat.

Aumento em 50% da taxa conversão visita/cadastro.

Wireframe e layout

Critérios indispensáveis para projetos na web

Heurísticas de Nielsen

Diálogos simples e naturais

Falar a linguagem do usuário

Minimizar a sobrecarga de memória do usuário

Consistência

Feedback

Saídas claramente marcadas

Atalhos

Boas mensagens de erro

Prevenir erros

Ajuda e documentação

Jacob Nielsen

Agência: Mídia Digital Cliente: Estadão Necessidade: elevar índice de vendas pelo formulário on-line Solução: rearquitetura e novo layout Analisando as métricas do formulário on-line de assinatura verificamos um alto índice de desistência no preenchimento do mesmo conseqüentemente uma baixa conversão em vendas . Com base em análises heurísticas e de boas práticas de usabilidade percebeu-se que com um formulário mais atrativo poderíamos aumentar a conversão de assinaturas. Critérios indispensáveis para projetos de websites

Critérios indispensáveis para projetos na web Tela de acesso ao formulário

Critérios indispensáveis para projetos na web Através do CEP inserido é possível fornecer ao usuário alguns campos preenchidos.

Critérios indispensáveis para projetos na web O que o usuário faz caso queira uma das outras opções de assinatura?

Critérios indispensáveis para projetos na web Algumas informações podem aparecer apenas na tela de confirmação do pedido.

Critérios indispensáveis para projetos na web Na primeira tela o usuário já optou por um tipo de pagamento. Herdar a informação é importante.

Critérios indispensáveis para projetos na web

Critérios indispensáveis para projetos na web Onde está a opção para que o usuário mude o tipo de assinatura?

Rearquitetura e novo layout

Resultado do redesenho

Resultado do redesenho No mês de julho foram publicadas as duas versões de formulário. Ambas foram exibidas da mesma forma - 50% de acesso para cada uma. Ao final do mês, tivemos o seguinte resultado: O novo formulário vendeu 137% a mais do que o antigo.

Obrigado! [email_address]