Arquitetura de Informação - Aulas 04 e 05

Aula .04 + 05

Arquitetura de Informação

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/


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



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.



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


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.com
http://www.uol.com.br
http://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.


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


Retirado de Rosenfield & Morville


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 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 cliente
2.identificação do problema
3.reunião do planejamento com a criação
4.briefing
5.Sitemap

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.

Wireframe 770 px

>>> A loja


Tour Virtual

Rolagem

1 2 3 4 5

Alameda dos Nhambiquaras 349 – Moema >>> Ver MAPA

Wireframe 770 px
x
>>> A loja


Popup fullscreen. Cada um irá exibir um tour virtual
Tour Virtual uma parte da loja:
de

Rolagem >Entrada/Vitrine
>Piso térreo frente
1 2 3 4 5
>Piso térreo fundo
>Mezzanino
>Fachada

Wireframe 770 px

>>> A loja


Tour Virtual

Rolagem

1 2 3 4 5


x

Mapa para chegar na loja

Wireframe 770 px

>>> Calendários


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

Wireframe 770 px

>>> Produtos


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

Wireframe 770 px

>>> Sua viagem


>>Escolha a viagem >>Compras e Orçamentos

Rolagem

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

Wireframe 770 px

>>> Galeria


Aqui você confere alguns cliques de quem vive de aventura.

Rolagem
img
Foto 01 Foto 02 Foto 03


Foto 07 Foto 08 Foto ...

Wireframe 770 px

>>> Galeria


Aqui você confere alguns cliques de quem vive de aventura.

Rolagem
img

x
Foto 01

Foto 07 Foto 08 Foto ...

Wireframe 770 px

>>> Blog


Título do post >>> Darta 12/12/2008
Calendário
>Nome do Usuário >Comentários
Rolagem

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.

Wireframe 770 px

>>> Contato


Entre em contato com nossa equipe:

Rolagem Nome:

E-mail:

Mensagem:

img

Enviar

Wireframe 770 px

>>> Contato


Entre em contato com nossa equipe:

Rolagem Nome: Vince Vader

E-mail: vincevader@gmail.com

Mensagem: Opa!

img

Enviar

Wireframe 770 px

>>> Contato


Mensagem enviada com sucesso!
Em breve entraremos em contato.
Rolagem

img


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:



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)


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 - Aulas 04 e 05

Arquitetura de Informação - Aulas 04 e 05

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Arquitetura de Informação - Aulas 04 e 05

Semelhante a Arquitetura de Informação - Aulas 04 e 05 (20)

Mais de vincevader

Mais de vincevader (20)

Último

Último (20)

Arquitetura de Informação - Aulas 04 e 05