Download - Arquitetura de Informação - Aulas 04 e 05
Arquitetura de Informação
Aula .04 + 05
Arquitetura de Informação:
http://www.victoriasecrets.com/http://www.vincevader.nethttp://vincevader.net/index03.htmhttp://www.globo.comhttp://www.uol.com.brhttp://www.terra.com.brwww.apple.comhttp://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 Designhttp://www.youtube.com/watch?v=vQn5J7fQYzY&feature=related
The Right Way to Wireframehttp://www.youtube.com/watch?v=RjIDHTyY1zMhttp://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/
Links para a aula
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.
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 ChrisAnderson 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.
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 intranetspara ajudar pessoas a achar e gerenciar informação.
Arquitetura de Informação
Fonte: ROSENFIELD e MORVILLE. Information Architeture for World Wide Web. EUA: O´Reilly 2006.
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.
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:
Arquitetura de Informação
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.
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.
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.
Arquitetura de Informação
Arquitetura de Informação
Experiência positiva x Experiência negativa (Ex.: compra online)
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;
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.
As 3 principais questões dos usuários dentro da navegação de um site:
• Onde estou?
• Onde estive?
• Onde posso ir?
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.
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.
Arquitetura de Informação
http://www.victoriasecrets.com/http://www.globo.comhttp://www.uol.com.brhttp://www.apple.com
http://www.coolhomepages.com
Arquitetura de Informação
Ou seja:
Primórdios da Internet Hoje
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.
Arquitetura de Informação
Arquitetura de Informação
Arquitetura de Informação
Arquitetura de Informação
Arquitetura de Informação
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.
Arquitetura de Informação
Marca XYZBuscar
>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
Arquitetura de Informação
Arquitetura de Informação
Retirado de Rosenfield & Morville
Arquitetura de Informação
Arquitetura de Informação
Retirado de Rosenfield & Morville
Arquitetura de Informação
Retirado de Rosenfield & Morville
Arquitetura de Informação
Site Adria.Wireframe
Site Adria.Finalizado
Arquitetura da Informação
Arquitetura da Informação
Arquitetura de Informação
Time Lapse Web Designhttp://www.youtube.com/watch?v=vQn5J7fQYzY&feature=related
The Right Way to Wireframehttp://www.youtube.com/watch?v=RjIDHTyY1zMhttp://www.youtube.com/watch?v=QSxF-pISj1w&feature=related
E alguns excelentes exemplos de práticas de Wireframe:http://www.designontherocks.xpg.com.br/e-quem-disse-que-webdesigner-nao-faz-sketch/
• 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.
Arquitetura de Informação
1.reunião com cliente2.identificação do problema3.reunião do planejamento com a criação4.briefing5.Sitemap
Wireframe
.Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato
Á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
420 px
A área externa ao layout do site deve possuir imagens de background em marca d´água.
Wireframe
.Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato
Tour Virtual
770 px
Rolagem
>>> A loja
1 2 3 4 5
Alameda dos Nhambiquaras 349 – Moema >>> Ver MAPA
Wireframe
.Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato
Tour Virtual
770 px
Rolagem
>>> A loja
1 2 3 4 5
Alameda dos Nhambiquaras 349 – Moema >>> Ver MAPA
Wireframe
.Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato
Tour Virtual
770 px
Rolagem
>>> A loja
1 2 3 4 5
Alameda dos Nhambiquaras 349 – Moema >>> Ver MAPA
x
Popup fullscreen. Cada um irá exibir um tour virtualde uma parte da loja:
>Entrada/Vitrine>Piso térreo frente>Piso térreo fundo>Mezzanino>Fachada
Wireframe
.Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato
Tour Virtual
770 px
Rolagem
>>> A loja
1 2 3 4 5
Alameda dos Nhambiquaras 349 – Moema >>> Ver MAPA
Wireframe
.Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato
Tour Virtual
770 px
Rolagem
>>> A loja
1 2 3 4 5
Alameda dos Nhambiquaras 349 – Moema >>> Ver MAPA
Wireframe
.Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato
Tour Virtual
770 px
Rolagem
>>> A loja
1 2 3 4 5
Alameda dos Nhambiquaras 349 – Moema >>> Ver MAPA
Mapa para chegar na loja
x
Wireframe
.Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato
Tour Virtual
770 px
Rolagem
>>> A loja
1 2 3 4 5
Alameda dos Nhambiquaras 349 – Moema >>> Ver MAPA
Wireframe
.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.
770 px
Rolagem
>>> Calendários
NOME DO EVENTO 1DATA: 12/12/2000
Pequeno descritivo e link para site
NOME DO EVENTO 2DATA: 12/12/2000
Pequeno descritivo e link para site
NOME DO EVENTO 3DATA: 12/12/2000
Pequeno descritivo e link para site
img
Wireframe
.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.
770 px
Rolagem
>>> Produtos
Mochilas Cadeirinhas Roupas Hidratação Acessórios
Flash com efeito as imagens dos produtos. Máx – 100kb
Wireframe
.Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato
>>Escolha a viagem >>Compras e Orçamentos
Escolha a viagem
Aqui você encontra dicas na medida certa para sua viagem de aventuraSelecione um dos checklists abaixo para conhecer equipamentos que irão deixar sua aventura perfeita.
770 px
Rolagem
>>> Sua viagem
Treeking curto
img
Wireframe
.Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato
Aqui você confere alguns cliques de quem vive de aventura.
770 px
Rolagem
>>> Galeria
imgFoto 01 Foto 02 Foto 03
Foto 04 Foto 05 Foto 06
Foto 07 Foto 08 Foto ...
Wireframe
.Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato
Aqui você confere alguns cliques de quem vive de aventura.
770 px
Rolagem
>>> Galeria
imgFoto 01 Foto 02 Foto 03
Foto 04 Foto 05 Foto 06
Foto 07 Foto 08 Foto ...
Wireframe
.Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato
Aqui você confere alguns cliques de quem vive de aventura.
770 px
Rolagem
>>> Galeria
imgFoto 01 Foto 02 Foto 03
Foto 04 Foto 05 Foto 06
Foto 07 Foto 08 Foto ...
Foto 01
x
Wireframe
.Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato
Aqui você confere alguns cliques de quem vive de aventura.
770 px
Rolagem
>>> Galeria
imgFoto 01 Foto 02 Foto 03
Foto 04 Foto 05 Foto 06
Foto 07 Foto 08 Foto ...
Wireframe
.Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato
Título do post >>> Darta 12/12/2008
>Nome do Usuário >Comentários
Texto do Post.
Texto do Post.
770 px
Rolagem
>>> Blog
Calendário
Posts Anteriores
> Post com data> Post com data> Post com data> Post com data> Post com data> Post com data
img
Wireframe
.Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato
770 px
Rolagem
>>> Contato
Entre em contato com nossa equipe:
Nome:
E-mail:
Mensagem:
img
Enviar
Wireframe
.Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato
770 px
Rolagem
>>> Contato
Entre em contato com nossa equipe:
Nome: Vince Vader
E-mail: [email protected]
Mensagem: Opa!
img
Enviar
Wireframe
.Home .A loja .Calendários .Produtos .Sua viagem .Galeria .Blog .Contato
770 px
Rolagem
>>> Contato
Mensagem enviada com sucesso!Em breve entraremos em contato.
img
Lay-out
Lay-out
Mais um exemplo:
Danoninho Crush
• Arquitetura para hotsite + mecânica de game
• Tks Wunderman (2012)
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
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
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. (...)
Arquitetura de Informação
O iceberg da arquitetura de informação poderia ser resumido no esquema a seguir:
Arquitetura de Informação
Fonte: ROSENFIELD e MORVILLE. Information Architeture for World Wide Web. EUA: O´Reilly 2006.
“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)
Interface
Arquitetura de Informação
BIBLIOGRAFIA 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.
Arquitetura de Informação