Your SlideShare is downloading. ×
Arquitetura de Informação - Aulas 04 e 05
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Arquitetura de Informação - Aulas 04 e 05

1,500

Published on

Conceitos básicos de arquitetura de informação e ferramentas como sitemap e wireframe.

Conceitos básicos de arquitetura de informação e ferramentas como sitemap e wireframe.

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,500
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
113
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Aula .04 + 05 Arquitetura de Informação
  • 2. Links para a aula Arquitetura de Informação: http://www.victoriasecrets.com/ http://www.vincevader.net http://vincevader.net/index03.htm http://www.globo.com http://www.uol.com.br http://www.terra.com.br www.apple.com http://www.monkeyshot.be/ http://www.coolhomepages.com Alguns vídeos de referência: http://vincevader.blogspot.com/2012/03/arquitetura-de-informacao-201201.html Time Lapse Web Design http://www.youtube.com/watch?v=vQn5J7fQYzY&feature=related The Right Way to Wireframe http://www.youtube.com/watch?v=RjIDHTyY1zM http://www.youtube.com/watch?v=QSxF-pISj1w&feature=related E alguns excelentes exemplos de práticas de AI: http://www.designontherocks.xpg.com.br/e-quem-disse-que-webdesigner-nao-faz-sketch/
  • 3. Arquitetura de 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 todo o conhecimento da época. • Em 330 a.C. a biblioteca de Alexandria contava com uma bibliografia de 120 longos pergaminhos. • Em 1873, Melvil Dewey criou o sistema alfa-numérico de Dewey como ferramenta de busca e acesso para títulos de livros numa biblioteca. • Hoje, sistemas integrados de busca on-line acessam praticamente todo tipo de conteúdo. Fonte: ROSENFIELD e MORVILLE. Information Architeture for World Wide Web. EUA: O´Reilly 2006.
  • 4. Arquitetura de Informação E o que isso tudo tem a ver com mídia digital? 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) Fonte: ROSENFIELD e MORVILLE. Information Architeture for World Wide Web. EUA: O´Reilly 2006.
  • 5. Arquitetura de 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. Fonte: ROSENFIELD e MORVILLE. Information Architeture for World Wide Web. EUA: O´Reilly 2006.
  • 6. Arquitetura de 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. • Para entendermos bem esse ponto, vamos analisar uma estrutura básica de agência/estúdio voltado para a área digital. Temos todas as figuras que fazem parte do time de uma agência tradicional, porém com Arquitetos de Informação e Programadores para materializar os projetos.
  • 7. Arquitetura de Informação O que faz um arquiteto de informação? • 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 em projetos digitais (independente da plataforma) • Lapida e categoriza o que é importante em um projeto digital. Até mesmo a escolha de nomes em uma URL do projeto. Pois a URL é fundamental para o sucesso de qualquer projeto na web. Nome ruins podem ocasionar situações pouco adequadas:
  • 8. Arquitetura de Informação
  • 9. Arquitetura de 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 em suas idéias. Fonte: ROSENFIELD e MORVILLE. Information Architeture for World Wide Web. EUA: O´Reilly 2006.
  • 10. Arquitetura de Informação O que faz um arquiteto de informação? • A metáfora com “arquitetura” não é por acaso. O arquiteto de informação usa mapas e plantas baixas para organizar o processo de criação de um projeto digital. As guias para o trabalho advém da linguagem arquitetônica.
  • 11. Arquitetura de Informação Em outras palavras: 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.
  • 12. Arquitetura de Informação Experiência positiva x Experiência negativa (Ex.: compra online) Cadastro longo com informações que se apagam ao sinal de erro; Produtos sem aparente ordem lógica de acesso; Compra sem confirmação imediata.Cadastro realizado com sucesso (formulário intuitivo e bem sinalizado);Acesso lógico até a área de compra escolhida: música > DVD > rock > Motorhead;Seleção de produto fácil e carrinho de compras com bom layout;Finalização de compra com tela e e-mail de confirmação;Entrega do produto no prazo combinado;
  • 13. Arquitetura de Informação As 3 principais questões dos usuários dentro da navegação de um site: • Onde estou? • Onde estive? • Onde posso ir?
  • 14. Arquitetura de Informação Sistemas 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.
  • 15. Arquitetura de Informação Sistemas de navegaçã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. >> Vamos analisar alguns sites com esses atributos.
  • 16. Arquitetura de Informação http://www.victoriasecrets.com/ http://www.globo.com http://www.uol.com.br http://www.apple.com http://www.coolhomepages.com
  • 17. Arquitetura de Informação Ou seja: Primórdios da Internet Hoje
  • 18. Arquitetura de Informação Materializando AI: 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.
  • 19. Arquitetura de Informação
  • 20. Arquitetura de Informação
  • 21. Arquitetura de Informação
  • 22. Arquitetura de Informação
  • 23. Arquitetura de Informação
  • 24. Arquitetura de Informação Materializando AI: 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.
  • 25. Arquitetura de InformaçãoA localização mais comum de elementos numa página básica de web:• Logomarca no canto superior esquerdo Marca XYZ Buscar• Busca na barra superior• Navegação global na parte superior• Navegação local na coluna esquerda >Link 01 >Link02 >Link03 >Link04 >Link05• Conteúdo na área central• Breadcrumbs na parte superior Navegação Breadcrumbs ( Home ) local Conteúdo global e contextual Conteúdo relacionado Rodapé
  • 26. Arquitetura de Informação
  • 27. Arquitetura de Informação Retirado de Rosenfield & Morville
  • 28. Arquitetura de Informação
  • 29. Arquitetura de Informação Retirado de Rosenfield & Morville
  • 30. Arquitetura de Informação Retirado de Rosenfield & Morville
  • 31. Site Adria.Wireframe
  • 32. Site Adria.Finalizado
  • 33. Arquitetura da Informação
  • 34. Arquitetura da Informação
  • 35. Arquitetura de InformaçãoTime Lapse Web Designhttp://www.youtube.com/watch?v=vQn5J7fQYzY&feature=relatedThe Right Way to Wireframehttp://www.youtube.com/watch?v=RjIDHTyY1zMhttp://www.youtube.com/watch?v=QSxF-pISj1w&feature=relatedE alguns excelentes exemplos de práticas de Wireframe:http://www.designontherocks.xpg.com.br/e-quem-disse-que-webdesigner-nao-faz-sketch/
  • 36. Arquitetura de Informação • O uso de legendas claras e de fácil entendimento são essenciais para a construção do sitemap e do wireframe. • Vamos ver um exemplo de construção de sitemap + wireframe + site, para um projeto real.
  • 37. 1.reunião com cliente2.identificação do problema3.reunião do planejamento com a criação4.briefing5.Sitemap
  • 38. Wireframe .Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato 420 px Área para destaque da home (em flash). Aqui entrarão as ofertas da loja ou fotos decorativas da galeria Kailash. Peso Limite = 200 kb 770 px A área externa ao layout do site deve possuir imagens de background em marca d´água.
  • 39. Wireframe 770 px >>> A loja .Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato Tour VirtualRolagem 1 2 3 4 5 Alameda dos Nhambiquaras 349 – Moema >>> Ver MAPA
  • 40. Wireframe 770 px >>> A loja .Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato Tour VirtualRolagem 1 2 3 4 5 Alameda dos Nhambiquaras 349 – Moema >>> Ver MAPA
  • 41. Wireframe 770 px x >>> A loja .Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato Popup fullscreen. Cada um irá exibir um tour virtual Tour Virtual uma parte da loja: deRolagem >Entrada/Vitrine >Piso térreo frente 1 2 3 4 5 >Piso térreo fundo >Mezzanino >Fachada Alameda dos Nhambiquaras 349 – Moema >>> Ver MAPA
  • 42. Wireframe 770 px >>> A loja .Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato Tour VirtualRolagem 1 2 3 4 5 Alameda dos Nhambiquaras 349 – Moema >>> Ver MAPA
  • 43. Wireframe 770 px >>> A loja .Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato Tour VirtualRolagem 1 2 3 4 5 Alameda dos Nhambiquaras 349 – Moema >>> Ver MAPA
  • 44. Wireframe 770 px >>> A loja .Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato Tour VirtualRolagem 1 2 3 4 5 Alameda dos Nhambiquaras 349 – Moema >>> Ver MAPA x Mapa para chegar na loja
  • 45. Wireframe 770 px >>> A loja .Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato Tour VirtualRolagem 1 2 3 4 5 Alameda dos Nhambiquaras 349 – Moema >>> Ver MAPA
  • 46. Wireframe 770 px >>> Calendários .Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato Fique por dentro dos eventos que rolam no mundo dos esportes de aventura e programe já a sua agenda.Rolagem NOME DO EVENTO 1 DATA: 12/12/2000 img Pequeno descritivo e link para site NOME DO EVENTO 2 DATA: 12/12/2000 Pequeno descritivo e link para site NOME DO EVENTO 3 DATA: 12/12/2000 Pequeno descritivo e link para site
  • 47. Wireframe 770 px >>> Produtos .Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato Conheça nossa linha de produtos completa no site oficial da Kailash. Clique nos produtos abaixo, uma nova janela se abrirá e você não irá perder o conteúdo desta.Rolagem Flash com efeito as imagens dos produtos. Máx – 100kb Mochilas Cadeirinhas Roupas Hidratação Acessórios
  • 48. Wireframe 770 px >>> Sua viagem .Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato >>Escolha a viagem >>Compras e OrçamentosRolagem Escolha a viagem Aqui você encontra dicas na medida certa para sua viagem de aventura Selecione um dos checklists abaixo para conhecer equipamentos que irão deixar sua aventura perfeita. Treeking curto img
  • 49. Wireframe 770 px >>> Galeria .Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato Aqui você confere alguns cliques de quem vive de aventura.Rolagem img Foto 01 Foto 02 Foto 03 Foto 04 Foto 05 Foto 06 Foto 07 Foto 08 Foto ...
  • 50. Wireframe 770 px >>> Galeria .Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato Aqui você confere alguns cliques de quem vive de aventura.Rolagem img Foto 01 Foto 02 Foto 03 Foto 04 Foto 05 Foto 06 Foto 07 Foto 08 Foto ...
  • 51. Wireframe 770 px >>> Galeria .Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato Aqui você confere alguns cliques de quem vive de aventura.Rolagem img Foto 01 Foto 02 Foto 03 x Foto 04 Foto 05 Foto 06 Foto 01 Foto 07 Foto 08 Foto ...
  • 52. Wireframe 770 px >>> Galeria .Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato Aqui você confere alguns cliques de quem vive de aventura.Rolagem img Foto 01 Foto 02 Foto 03 Foto 04 Foto 05 Foto 06 Foto 07 Foto 08 Foto ...
  • 53. Wireframe 770 px >>> Blog .Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato Título do post >>> Darta 12/12/2008 Calendário >Nome do Usuário >ComentáriosRolagem Texto do Post. Posts Anteriores > Post com data > Post com data img > Post com data > Post com data > Post com data > Post com data Texto do Post.
  • 54. Wireframe 770 px >>> Contato .Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato Entre em contato com nossa equipe:Rolagem Nome: E-mail: Mensagem: img Enviar
  • 55. Wireframe 770 px >>> Contato .Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato Entre em contato com nossa equipe:Rolagem Nome: Vince Vader E-mail: vincevader@gmail.com Mensagem: Opa! img Enviar
  • 56. Wireframe 770 px >>> Contato .Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato Mensagem enviada com sucesso! Em breve entraremos em contato.Rolagem img
  • 57. Lay-out
  • 58. Lay-out
  • 59. Arquitetura de Informação Mais um exemplo: Danoninho Crush • Arquitetura para hotsite + mecânica de game • Tks Wunderman (2012)
  • 60. Arquitetura de 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
  • 61. Arquitetura de Informação Lições de design estrutural de um site 01.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
  • 62. Arquitetura de Informação Arquitetura de informação está presente 01.Nos games (digitais e analógicos) 02.Nos sites, intranets, e-commerces, etc. 03.Nos caixas eletrônicos 04.Nos atendimentos eletrônicos 05.Em mobile media 06.Na TV digital 07. (...)
  • 63. Arquitetura de InformaçãoO iceberg da arquitetura de informação poderia ser resumido no esquema a seguir: Fonte: ROSENFIELD e MORVILLE. Information Architeture for World Wide Web. EUA: O´Reilly 2006.
  • 64. Arquitetura de Informação Interface “Em seu sentido mais simples, a palavra se refere a softwares que dão forma à interação entre usuário e computador. A interface atua como uma espécie de tradutor, mediando entre duas partes, tornando uma sensível para a outra. Em outras palavras, a relação governada pela interface é uma relação semântica, caracterizada por significado e expressão, não por força física”. JOHSON, Steven. A cultura da Interface. Rio de Janeiro: Ed. Jorge Zahar, 2001. (pg. 17)
  • 65. Arquitetura de InformaçãoBIBLIOGRAFIA RECOMENDADA:MEMÓRIA, Felipe. Design para a internet. São Paulo: Elsevier Editora Ltda, 2006.MUMAW, Stefan. Simple Web Sites. EUA: Rockport, 2005.ROSENFIELD e MORVILLE. Information Architeture for World Wide Web. EUA: O´Reilly 2006.

×