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


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)



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.



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.



• 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:




• Sobretudo, o arquiteto de informação deve saber como apresentar visualmente/estruturalmente seu material para dar vida em suas idéias.




• 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.


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.



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?


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.


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.


http://www.victoriasecrets.com/http://www.globo.comhttp://www.uol.com.brhttp://www.apple.com

http://www.coolhomepages.com


Ou seja:

Primórdios da Internet Hoje


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.







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.


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



Retirado de Rosenfield & Morville







Site Adria.Wireframe

Site Adria.Finalizado

Arquitetura da Informação

Arquitetura da 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.


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


Tour Virtual

770 px

Rolagem

>>> A loja

1 2 3 4 5

Alameda dos Nhambiquaras 349 – Moema >>> Ver MAPA

Wireframe


Tour Virtual

770 px

Rolagem

>>> A loja

1 2 3 4 5


Wireframe


Tour Virtual

770 px

Rolagem

>>> A loja

1 2 3 4 5


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


Tour Virtual

770 px

Rolagem

>>> A loja

1 2 3 4 5


Wireframe


Tour Virtual

770 px

Rolagem

>>> A loja

1 2 3 4 5


Wireframe


Tour Virtual

770 px

Rolagem

>>> A loja

1 2 3 4 5


Mapa para chegar na loja

x

Wireframe


Tour Virtual

770 px

Rolagem

>>> A loja

1 2 3 4 5


Wireframe


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





img

Wireframe


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


>>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


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



770 px

Rolagem

>>> Galeria




Wireframe



770 px

Rolagem

>>> Galeria




Foto 01

x

Wireframe



770 px

Rolagem

>>> Galeria




Wireframe


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


770 px

Rolagem

>>> Contato

Entre em contato com nossa equipe:

Nome:

E-mail:

Mensagem:

img

Enviar

Wireframe


770 px

Rolagem

>>> Contato

Entre em contato com nossa equipe:

Nome: Vince Vader

E-mail: [email protected]

Mensagem: Opa!

img

Enviar

Wireframe


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)


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


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 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. (...)


O iceberg da arquitetura de informação poderia ser resumido no esquema a seguir:



“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


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.


Education

Arquitetura de Informação - Aulas 04 e 05