O documento apresenta um programa de treinamento sobre arquitetura da informação (AI) em projetos web, abordando estratégias, melhores práticas e processos relevantes. Discute a importância do foco no usuário e a relação entre AI e branding, além de ilustrar casos práticos de desenvolvimento de sites. As considerações finais enfatizam a usabilidade e a necessidade de uma estrutura lógica na navegação de sites corporativos.

1. Arquitetura de Informação em Projetos Web Training Program – 19 e 20 de setembro de 2008 Estratégias, Melhores Práticas e Processos em AI

2. Luciana Ribeiro - arquiteturadeinformacao@gmail.com Arquitetura de Informação em Projetos Web Case de Arquitetura de Informação

3. Agenda Apresentação O processo da AI Case Considerações finais © 2008 JumpEducation

4. Apresentação APRESENTAÇÃO

5. Apresentação Blog http://paperframe.blogspot.com/ Linked in http://www.linkedin.com/in/luribeiro E-mail [email_address]

6. Apresentação

7. Apresentação INTERNET Conteúdo Webwriting Arquitetura de informação

8. O processo da AI O PROCESSO DA AI

9. O processo da AI A arquitetura de informação é responsável pela definição da estrutura do site: menus, navegação, usabilidade, conteúdos prioritários, “peso” de cada elemento (a posição e o espaço ocupado pelo elemento na tela), padrões e comportamentos dos objetos.

10. O processo da AI Um site pode ser construído com diferentes intenções, dentre as quais: Marcar presença na web; Difundir informação; Vender produtos e serviços; Melhorar a imagem corporativa; Otimizar o atendimento ao cliente; Captar, conhecer e fidelizar novos clientes; Ampliar a visibilidade da marca; Realizar transações comerciais; Expandir mercados; Reduzir custos; Agilizar a operação.

11. O processo da AI Para cada intenção, uma solução diferente de AI.

12. O processo da AI O DESAFIO DA INDÚSTRIA AUTOMOBOLÍSTICA E DOS ARQUITETOS DE INFORMAÇÃO Designers da indústria automobilística Desafio: criar carros inovadores, bonitos, exclusivos dentro das limitações impostas pelo modelo consagrado das quatro rodas, da direção do lado esquerdo, da posição do câmbio, dos pedais e dos instrumentos do painel, etc. Arquitetos de informação Desafio: desenhar sites inovadores, bonitos, exclusivos dentro das limitações impostas pela resolução de tela, usabilidade, acessibilidade, tecnologias utilizadas, etc.

13. O processo da AI O DESAFIO DA INDÚSTRIA AUTOMOBOLÍSTICA E DOS ARQUITETOS DE INFORMAÇÃO A grande diferença está na visão dos clientes. Enquanto o pessoal da indústria automobilística lida muito bem com as limitações e convenções estabelecidas em seu negócio, o pessoal do marketing não encara os sites dessa maneira.

14. O processo da AI Foco no usuário x foco no cliente No dia-a-dia muitas vezes somos levados a atender as necessidades do cliente e não as do usuário. Nosso desafio: catequizar os clientes sobre a importância do foco no usuário. A responsabilidade da AI sobre o branding Todas as escolhas de AI de um projeto têm estreita relação com o branding: • hierarquia das informações; • rotulação; • escolha de uma navegação por temas, por público ou por qualquer outro critério.

15. O processo da AI METODOLOGIA Info-estrutura Fluxo de navegação Wireframes

16. O processo da AI SITUAÇÕES POSSÍVEIS Site sem qualquer tipo de teste Site testado informalmente Site testado ao final do projeto Teste no site atual antes do projeto do novo site Teste no protótipo do projeto

17. Case CASE

18. Case NOVO SITE VISA VALE Desafio: Criar um site que atenda os 3 públicos do cliente: usuários, empresas e estabelecimentos.

19. Case PROCESSO Benchmark e análise da concorrência Elaboração da info-estrutura Definição dos conteúdos para cada público Conteúdos comuns Hierarquia das informações Menus Criação dos wireframes Protótipo

20. Case PROCESSO Teste de usabilidade Site

21. Case INFO-ESTRUTURA

22. Case INFO-ESTRUTURA Quem somos Área institucional do site. Pretende apresentar a empresa ao público. Por meio dos atributos principais da Visa Vale deve ajudar as empresas a vencer os medos de uma mudança. Ressaltar que a Visa Vale está entre as líderes do setor e que não importa o tamanho da empresa, ela oferece soluções para 1 ou 1 milhão de funcionários. Incluir relação de clientes. Incluir testemunhais – “Quem prova recomenda”: o cliente Visa Vale tem orgulho de trabalhar com esse produto de vanguarda. Incluir área de “Responsabilidade Social”. O item “trabalhe conosco” sai desta área e vai para o menu principal. Os itens “Visão geral do negócio” e “Visão, missão e valores” saem. Incluir área de “Parceiros”. Apresentar o macro-fluxo com cadeia de valor que no site atual está em “Produtos”.

23. Case INFO-ESTRUTURA

24. Case INFO-ESTRUTURA PAT Área de informações sobre a legislação do setor. Tem como público-alvo o empresário. Incluir simulação. Incluir área de Novidades. Incluir FAQ (Referência: site do Ministério do Trabalho). Diferenciar as informações por públicos: pequenas e micro empresas, empresas médias e grandes empresas. Incluir um “alt” ou outro recurso no item “PAT” do menu para dar o significado da sigla. Deixar o link para o Ministério do Trabalho mais explícito.

25. Case INFO-ESTRUTURA

26. Case INFO-ESTRUTURA Produtos Área de exposição dos produtos Visa Vale no site. Apresentar as mesmas informações de uma maneira mais dinâmica, mais vendedora. Incluir usuário no foco, que atualmente é exclusivo para empresa. Municiar o usuário de informações para falar com o RH. Incluir funcionalidade “indique para o seu RH”. Incluir situação de uso em imagens ilustrativas. O fluxo operacional sai desta área e vai para “Quem somos”.

27. Case INFO-ESTRUTURA

28. Case INFO-ESTRUTURA Seja nosso cliente Área de persuasão e atração de prospects. Incluir informações e cadastro sobre licitações, voltadas para administração pública. Incluir uma apresentação com argumentos de vendas A Visa Vale ficou de definir como vai gerir com os bancos o encaminhamento do cadastro do prospect, se continua como está, se direciona o prospect diretamente para o site do banco, se devolve a ele uma relação com banco/agência/gerente mais próximos para entrar em contato. Se acertada negociação com os bancos, incluir “Experimente Visa Vale” (“teste-drive” dos produtos).

29. Case INFO-ESTRUTURA

30. Case INFO-ESTRUTURA Estabelecimentos Canal de relacionamento com os estabelecimentos, clientes e prospects. Criar uma resposta automática para o envio de cadastro. Criar um canal de recebimento de críticas e sugestões. Incluir o número da maquineta no formulário do cadastro caso o estabelecimento já seja cliente Visanet. Criar área “vendedora” e destacar “reembolso imediato” e número de usuários. Incluir notícias e promoções.

31. Case INFO-ESTRUTURA

32. Case INFO-ESTRUTURA Usuários Canal de relacionamento com os usuários dos cartões Visa Vale. Criar um guia do usuário em Flash (referência: livreto produzido pela Visa Vale) Incluir um cadastro para envio de e-mail marketing com opt-in/opt-out (dados do formulário: número do cartão refeição, número do cartão alimentação, nome, e-mail, empresa, telefone, cidade, estado)

33. Case INFO-ESTRUTURA

34. Case INFO-ESTRUTURA Empresas Canal de relacionamento com as empresas-clientes, onde são feitas as transações do site. Criar uma página única de entrada na área logada, uma home da empresa, com todas as suas informações e acesso para todas as funcionalidades da área logada. Criar em um ambiente específico para a área logada um ambiente transacional, sem os menus do site institucional. Incluir botão “sair”, para sair do ambiente transacional e voltar para o site institucional. Incluir Demo e Ajuda para as transações. Se a empresa tiver um só contrato, eliminar o dropdown de escolha de contrato. Separar os cadastros do interlocutor e do funcionário. Rever tipo de interlocutor. Visa Vale precisa rever os campos do cadastro de interlocutores. Considerar a possibilidade de incluir um botão “excluir funcionário” nos dados do funcionário dentro da área de novo pedido e acabar com a área de usuário. No pedido, incluir um calendário com negrito nas datas possíveis de disponibilização e cinza rebaixado nas datas anteriores.

35. Case INFO-ESTRUTURA

36. Case WIREFRAMES – CONSIDERAÇÕES GERAIS Humanização da comunicação Todas as versões apresentam um grande destaque conceitual para mostrar os benefícios Visa Vale. Segmentação Todas as versões apresentam destaques por públicos. Dinamismo Em todas as propostas foi prevista uma área de destaque principal com chamadas atualizadas de notícias ou conteúdos diversos do site.

37. Case WIREFRAME – VERSÃO 1 Concentra os menus e login no cabeçalho do site, mantendo-os perenes. Essa estrutura não é apresenta por nenhum site concorrente. Na área logada transacional esse cabeçalho muda de comportamento para abrigar os menus pertinentes a ela. Área de logos dos bancos com bastante respiro para suportar a entrada de novos parceiros.

38. Case WIREFRAME – VERSÃO 1

39. Case WIREFRAME – VERSÃO 2 Distribui de maneira mais espaçada os menus. Mantém os elementos de interação à direita e conteúdo à esquerda. A área logada do site não seguirá essa estrutura. Área de logos dos bancos com bastante respiro para suportar a entrada de novos parceiros.

40. Case WIREFRAME – VERSÃO 2

41. Case WIREFRAME – VERSÃO 3 Distribui os menus e os elementos de interação em duas áreas: topo e esquerda da página. Inclui elementos gráficos para trazer mais leveza à página. A área logada do site não seguirá essa estrutura.

42. Case WIREFRAME – VERSÃO 3

43. Case WIREFRAME – VERSÃO 4

44. Case WIREFRAME – CENTRAL DE PEDIDOS

45. Case TESTE DE USABILIDADE Maior destaque para menu de públicos Maior destaque para área de login

46. Case

47. Considerações finais Considerações finais

48. Considerações finais LIMITAÇÕES DO DIA-A-DIA Regras de negócio Restrições tecnológicas Idiossincrasias do cliente

49. Considerações finais USABILIDADE Foco no sistema – sem usabilidade

50. Considerações finais USABILIDADE Preocupação com o usuário – ótima usabilidade

51. Considerações finais USABILIDADE Boa arquitetura x péssima usabilidade

52. Considerações finais USABILIDADE Boa arquitetura x péssima usabilidade

53. Considerações finais USABILIDADE É sempre bom lembrar de: Consistências e padrões Comportamento de menus/Complexidade da navegação Carga de memorização/Facilidade de aprendizado Resposta a ações Uso criterioso do Flash e de outras tecnologias

54. Considerações finais USABILIDADE Pessoas diferentes navegam e usam sistemas de maneiras diferentes. Por isso... É importante oferecer vários caminhos e recursos. Menus Busca Alt Tecla TAB em forms Atalhos ...

55. Considerações finais ALGUMAS BOAS PRÁTICAS Um site corporativo e uma intranet não devem seguir a estrutura da empresa, mas uma estrutura lógica e hierarquizada da oferta da informação. A navegação da home page pode ser diferente da navegação do restante do site. Mas não totalmente diferente. Labels os mais óbvios possível. Caminho de rato (brand crumb) em todas as páginas de sites com mais de 3 níveis. Caixa de busca em todas as páginas.

56. Considerações finais REFERÊNCIAS Navegação larga e profunda Yahoo! Foods - http://food.yahoo.com/

57. Considerações finais REFERÊNCIAS Navegação orgânica liveplasma - http://www.liveplasma.com/

58. Considerações finais REFERÊNCIAS Linha do tempo Classic Motown - http://classic.motown.com/timeline/

59. Dúvidas? Luciana Ribeiro - arquiteturadeinformacao@gmail.com

60. Obrigada! Luciana Ribeiro - arquiteturadeinformacao@gmail.com