O documento discute brevemente a história da organização da informação e apresenta os conceitos e práticas da arquitetura da informação. Ele explica como a arquitetura da informação estrutura sites e sistemas digitais para ajudar os usuários a encontrarem informações de forma eficiente.

1. Aula . 03 e 04 Arquitetura de Informação

2. Arquitetura da Informação Breve história da organização da informação: • Em 660 a.C. um rei assírio organizou tábuas de barro com o conhecimento da época. • Em 330 a.C. a biblioteca de Alexandria contava com uma bibliografia de 120 longos pergaminhos arquivados em estantes por assunto. • Em 1873, Melvil Dewey criou o sistema alfa-numérico de Dewey como ferramenta de busca e acesso para vários títulos de livros numa biblioteca. • Hoje, sistemas integrados de busca on-line acessam praticamente todo tipo de conteúdo.

3. Arquitetura da Informação Considerações Iniciais Na primeira onda das pontocom: • Perda de aproximadamente 50% das vendas, já que os clientes não conseguiam encontrar produtos ou informações (problema de AI) • A publicidade mal planejada “ofendia” o usuário. Como lembra Chris Anderson no livro Free “se o anúncio é relevante, se torna conteúdo” • O resultado negativo da primeira visita do site gerava a perda de 40% dos clientes, em uma segunda visita. • “ Muitas empresas constroem sites para si próprias e não para os clientes” David Siegel / Designer

4. Arquitetura da Informação ARQUITETURA DA INFORMAÇÃO (AI) Algumas definições: 1. Organização, categorização e esquemas de navegação dentro de um sistema de informação. 2. Disciplina emergente focada em trazer princípios de design e arquitetura para um cenário digital. 3. A arte e a ciência de estruturar e classificar web sites e intranets para ajudar pessoas a achar e gerenciar informação. Retirado de Rosenfield & Morville

5. Arquitetura da Informação O que faz um arquiteto de informação? • A figura do webmaster (faz-tudo) morreu, hoje temos especialistas em cada parte de um processo de criação digital. • O Arquiteto de Informação organiza enormes quantidades de informações de maneira lógica em sites e outros projetos digitais para que pessoas achem, de maneira fácil, aquilo que estão procurando. • Facilita acesso e lógica de compra em e-commerces • Lapida e categoriza o que é importante em um projeto digital.

6. Arquitetura da Informação O que faz um arquiteto de informação? • Sobretudo, o arquiteto de informação deve saber como apresentar visualmente/estruturalmente seu material para dar vida a suas idéias. Retirado de Rosenfield & Morville

7. Arquitetura da Informação Arquitetura de informação não é design gráfico, desenvolvimento de software e nem engenharia de usabilidade, mas usa de todas estas ferramentas. O trabalho de arquitetura da informação pode, muitas vezes, passar invisível. E isso é ótimo.

8. Arquitetura da Informação As 3 principais questões dos usuários dentro da navegação de um site: • Onde estou? • Onde estive? • Onde posso ir?

9. Arquitetura da Informação Praticando Arquitetura da Informação: Sistema de navegação: • Sistemas de navegação são compostos de vários elementos básicos ou subsistemas. • Temos a navegação global, a local e a contextual que são integradas nas próprias páginas.

10. Arquitetura da Informação Praticando Arquitetura da Informação: • Navegação global está presente em todas as páginas de um site. • A navegação local é um complemento à navegação global. • Uma vez que a navegação global pode nos levar à uma navegação local, resta o estudo da navegação contextual, como o nome diz, é uma navegação intrinsecamente ligada ao conteúdo. >> Site de referência visto em aula: www.victoriasecrets.com

11. Arquitetura da Informação Praticando Arquitetura da Informação: Primórdios da Internet: Hoje:

12. Arquitetura da Informação Ferramentas de projeto: Card Sorting • Método de usabilidade que objetiva levantar como usuários do público-alvo agrupam informações de forma que sejam úteis para eles, possibilitando que sejam criadas estruturas de organização de informação otimizadas e mais adequadas ao modelo mental dos usuários. • O card-sorting é uma técnica usada por arquitetos da informação para descobrir como o usuário classifica determinada informação em sua mente.

13. Arquitetura da Informação Ferramentas de projeto: Sitemap • Mostram as relações entre páginas e seus conteúdos • Sitemaps oferecem um esquema de navegação que parte de um conteúdo principal e já mostra a grandiosidade do projeto, o arquiteto de informação através de um sitemap já consegue rotular seções e conseqüentemente agrupar o conteúdo de maneira lógica e funcional. • Existem softwares como o Visio® e o OmniGraffle® que servem para desenhar fluxogramas e são ótimos para arquitetar sitemaps.

14. Arquitetura da Informação Ferramentas de projeto: Um exemplo de sitemap

15. Arquitetura da Informação Ferramentas de projeto: Um exemplo de sitemap

16. Arquitetura da Informação Ferramentas de projeto: Wireframes • Wireframes servem a um propósito diferente: eles mostram como uma página deve parecer de uma perspectiva arquitetônica. • Wireframes são a intersecção entre a arquitetura da informação do site e o design e visual do mesmo. • O wireframe força o arquiteto a considerar onde as navegações estarão na página, onde o usuário vai navegar e sobretudo o que ele vai ver naquele espaço. • O wireframe não tem como função “travar” o trabalho do designer.

17. Arquitetura da Informação Marca XYZ Buscar >Link 01 >Link02 >Link03 >Link04 >Link05 Navegação local Breadcrumbs ( Home ) Conteúdo global e contextual Conteúdo relacionado Rodapé A localização mais comum de elementos numa página básica de web: • Logomarca no canto superior esquerdo • Busca na barra superior • Navegação global na parte superior • Navegação local na coluna esquerda • Conteúdo na área central • Breadcrumbs na parte superior

18. Arquitetura da Informação Ferramentas de projeto: Exemplo de Wireframe Retirado de Rosenfield & Morville

19. Site Adria. Wireframe

20. Site Adria. Finalizado

21. Arquitetura da Informação

22. Arquitetura da Informação

23. Arquitetura da Informação • O uso de legendas claras e de fácil entendimento são essenciais para a construção do sitemap e do wireframe.

24. Arquitetura da Informação Guias de criação para Wireframes • Faça-os limpos e claros, use notações óbvias e consistentes • Guarde sempre seus wireframes • Coloque-os em uma ordem lógica de maneira que realmente seja possível visualizar a navegação e como os elementos irão se comportar • Defina padrões que irão se repetir ao longo dos demais wireframes • Use cores, formas e elementos que diferenciem os elementos

25. Arquitetura da Informação Lições de design estrutural de um site 0 1.Foco no usuário 02.Comunicação instantânea 03.Avaliação de sucesso 04.A primeira página 05.Modelos Mentais 06.Tempos de resposta 07.Senso comum 08.Estilo de redação 09.Padrões estéticos 10.Usuários avançados x Usuários iniciantes

26. Arquitetura da Informação O iceberg da arquitetura de informação poderia ser resumido no esquema a seguir: Retirado de Rosenfield & Morville

27. Arquitetura da Informação E vamos observar o fluxo arquitetônico informacional do Portal Claro para fazer uma consulta de cotação de dólar via celular: MENU CLARO Claro Atende Notícias Hits Diversão Jogos E-mail Secretária eletrônica <Voltar Selecionar> Claro Atende Notícias Hits Diversão Jogos E-mail Secretária eletrônica <Voltar Selecionar> NOTÍCIAS Últimas Notícias Dólar e bolsas Aeroportos Tempo Futebol Esportes Horóscopo Celebridades <Voltar Selecionar> NOTÍCIAS Últimas Notícias Dólar e bolsas Aeroportos Tempo Futebol Esportes Horóscopo Celebridades <Voltar Selecionar> DÓLAR E BOLSAS Dólar.: R$ 2,50 Bolsa de valores.: 34% em alta Poupança: Rend. Médio em 2% NASDAQ: 45% <Voltar