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

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

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

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. 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. Envolvimento da Arquitetura de Informação em projetos de websites

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

17. Macro e microarquitetura

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. Exemplo de macroarquitetura

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. Exemplo de Macroarquitetura

22. Exemplo de Macroarquitetura

23. Exemplo de Macroarquitetura

24. Exemplo de Macroarquitetura Grande área para imagens

25. Exemplo de Macroarquitetura Reestruturação do menu

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

27. Exemplo de Macroarquitetura Reorganização dos canais de atendimentos

28. Exemplo de Macroarquitetura

29. Exemplo de microarquitetura

30. Exemplo de Microarquitetura

31. Exemplo de Microarquitetura

32. Exemplo de Microarquitetura

33. Exemplo de Microarquitetura

34. Exemplo de Microarquitetura

35. Exemplo de Microarquitetura

36. Exemplo de Microarquitetura

37. Exemplo de Microarquitetura

38. Exemplo de Microarquitetura

39. Exemplo de Microarquitetura

40. Exemplo de Microarquitetura

41. Resultados do redesenho

43. Wireframe e layout

44. Wireframe e layout

45. Critérios indispensáveis para projetos na web

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. Critérios indispensáveis para projetos na web Tela de acesso ao formulário

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

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. Critérios indispensáveis para projetos na web Algumas informações podem aparecer apenas na tela de confirmação do pedido.

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. Critérios indispensáveis para projetos na web

54. Critérios indispensáveis para projetos na web

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. Rearquitetura e novo layout

57. Rearquitetura e novo layout

58. Rearquitetura e novo layout

59. Rearquitetura e novo layout

60. Resultado do redesenho

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. Obrigado! [email_address]