Aulas 03 e 04 - Arquitetura de Informação

3,166 views
3,025 views

Published on

Introdução aos conceitos iniciais de arquitetura de informação (sitemaps, blue prints, wireframes, card sorting, etc.)

Published in: Education
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,166
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
178
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Aulas 03 e 04 - Arquitetura de Informação

  1. 1. Aula . 03 e 04 Arquitetura de Informação
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11. Arquitetura da Informação Praticando Arquitetura da Informação: Primórdios da Internet: Hoje:
  12. 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. 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. 14. Arquitetura da Informação Ferramentas de projeto: Um exemplo de sitemap
  15. 15. Arquitetura da Informação Ferramentas de projeto: Um exemplo de sitemap
  16. 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. 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. 18. Arquitetura da Informação Ferramentas de projeto: Exemplo de Wireframe Retirado de Rosenfield & Morville
  19. 19. Site Adria. Wireframe
  20. 20. Site Adria. Finalizado
  21. 21. Arquitetura da Informação
  22. 22. Arquitetura da Informação
  23. 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. 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. 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. 26. Arquitetura da Informação O iceberg da arquitetura de informação poderia ser resumido no esquema a seguir: Retirado de Rosenfield & Morville
  27. 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

×