Arquitetura de Informação

7,691
-1

Published on

Arquitetura de Informação do Planejamento à publicação dos websites

Palestra do Arquiteto de Informação Melqui Jr. ministrada no 12° Encontro de Web Design - Curitiba / Setembro de 2007

Published in: Technology

Arquitetura de Informação

  1. 1. Melqui Jr. - Setembro de 2007 Arquitetura de Informação do planejamento à publicação dos websites
  2. 2. Brevíssimo histórico da Arquitetura de Informação
  3. 3. 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
  4. 4. 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.
  5. 5. Envolvimento da Arquitetura de Informação em projetos de websites
  6. 6. 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.
  7. 7. 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
  8. 8. 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 <ul><li>AI na prospecção: </li></ul><ul><ul><li>Análise heurística (Heurísticas de Nielsen) </li></ul></ul><ul><ul><li>Pesquisa o cliente </li></ul></ul>
  9. 9. 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 <ul><li>AI no briefing: </li></ul><ul><ul><li>Estressa o briefing </li></ul></ul><ul><ul><li>Pesquisa o público alvo além do briefing </li></ul></ul>
  10. 10. 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 <ul><li>AI no planejamento: </li></ul><ul><ul><li>Pesquisa o mercado de atuação (concorrência) </li></ul></ul><ul><ul><li>Macroplanejamento do projeto </li></ul></ul><ul><ul><li>Fluxograma do site </li></ul></ul>
  11. 11. 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 <ul><li>Fase de AI: </li></ul><ul><ul><li>Teste de usabilidade </li></ul></ul><ul><ul><li>Macroarquitetura </li></ul></ul><ul><ul><li>Microarquitetura </li></ul></ul>
  12. 12. 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 <ul><li>AI no conteúdo: </li></ul><ul><ul><li>Redação de arquitetura </li></ul></ul><ul><ul><li>Estrutura da informação </li></ul></ul><ul><ul><li>SEO (Search Engine Optimization) </li></ul></ul>
  13. 13. 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 <ul><li>AI na criação (layout): </li></ul><ul><ul><li>Valida hierarquia informativa </li></ul></ul><ul><ul><li>Possibilita visão total do projeto </li></ul></ul><ul><ul><li>Permite ao designer foco total no trabalho </li></ul></ul>
  14. 14. 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 <ul><li>AI na produção: </li></ul><ul><ul><li>Possibilita o adiantamento da produção </li></ul></ul><ul><ul><li>Auxilia o processo de montagem </li></ul></ul>
  15. 15. 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 <ul><li>AI na tecnologia: </li></ul><ul><ul><li>Valida em usabilidade os sistemas </li></ul></ul><ul><ul><li>Auxilia o processo de programação </li></ul></ul>
  16. 16. 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 <ul><li>AI na publicação: </li></ul><ul><ul><li>Valida pré-publicação (homologação) </li></ul></ul><ul><ul><li>Monitora pós-publicação </li></ul></ul>
  17. 17. Macro e microarquitetura
  18. 18. 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
  19. 19. Exemplo de macroarquitetura
  20. 20. 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 .
  21. 21. Exemplo de Macroarquitetura
  22. 22. Exemplo de Macroarquitetura
  23. 23. Exemplo de Macroarquitetura
  24. 24. Exemplo de Macroarquitetura Grande área para imagens
  25. 25. Exemplo de Macroarquitetura Reestruturação do menu
  26. 26. Exemplo de Macroarquitetura Maior destaque para acesso aos formulários de interesse.
  27. 27. Exemplo de Macroarquitetura Reorganização dos canais de atendimentos
  28. 28. Exemplo de Macroarquitetura
  29. 29. Exemplo de microarquitetura
  30. 30. Exemplo de Microarquitetura
  31. 31. Exemplo de Microarquitetura
  32. 32. Exemplo de Microarquitetura
  33. 33. Exemplo de Microarquitetura
  34. 34. Exemplo de Microarquitetura
  35. 35. Exemplo de Microarquitetura
  36. 36. Exemplo de Microarquitetura
  37. 37. Exemplo de Microarquitetura
  38. 38. Exemplo de Microarquitetura
  39. 39. Exemplo de Microarquitetura
  40. 40. Exemplo de Microarquitetura
  41. 41. Resultados do redesenho
  42. 42. Resultados do redesenho <ul><li>Aumento de 96% da visitação no site em 2007. </li></ul><ul><li>Aumento de 81% em vendas. </li></ul><ul><li>Aumento em 29% da taxa de conversão visita/chat. </li></ul><ul><li>Aumento em 50% da taxa conversão visita/cadastro. </li></ul>
  43. 43. Wireframe e layout
  44. 44. Wireframe e layout
  45. 45. Critérios indispensáveis para projetos na web
  46. 46. Critérios indispensáveis para projetos na web <ul><li>Heurísticas de Nielsen </li></ul><ul><ul><li>Diálogos simples e naturais </li></ul></ul><ul><ul><li>Falar a linguagem do usuário </li></ul></ul><ul><ul><li>Minimizar a sobrecarga de memória do usuário </li></ul></ul><ul><ul><li>Consistência </li></ul></ul><ul><ul><li>Feedback </li></ul></ul><ul><ul><li>Saídas claramente marcadas </li></ul></ul><ul><ul><li>Atalhos </li></ul></ul><ul><ul><li>Boas mensagens de erro </li></ul></ul><ul><ul><li>Prevenir erros </li></ul></ul><ul><ul><li>Ajuda e documentação </li></ul></ul>Jacob Nielsen
  47. 47. 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
  48. 48. Critérios indispensáveis para projetos na web Tela de acesso ao formulário
  49. 49. Critérios indispensáveis para projetos na web Através do CEP inserido é possível fornecer ao usuário alguns campos preenchidos.
  50. 50. Critérios indispensáveis para projetos na web O que o usuário faz caso queira uma das outras opções de assinatura?
  51. 51. Critérios indispensáveis para projetos na web Algumas informações podem aparecer apenas na tela de confirmação do pedido.
  52. 52. 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.
  53. 53. Critérios indispensáveis para projetos na web
  54. 54. Critérios indispensáveis para projetos na web
  55. 55. Critérios indispensáveis para projetos na web Onde está a opção para que o usuário mude o tipo de assinatura?
  56. 56. Rearquitetura e novo layout
  57. 57. Rearquitetura e novo layout
  58. 58. Rearquitetura e novo layout
  59. 59. Rearquitetura e novo layout
  60. 60. Resultado do redesenho
  61. 61. 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.
  62. 62. Obrigado! [email_address]

×