Aulas 03 e 04 - Arquitetura de Informação

Aula .03 e 04

Arquitetura de Informação

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.


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


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


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.


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.



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.


As 3 principais questões dos usuários dentro da navegação de um site:

• Onde estou?

• Onde estive?

• Onde posso ir?


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.



• 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



Primórdios da Internet: Hoje:


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.



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.



Um exemplo de sitemap



Um exemplo de sitemap



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



Exemplo de Wireframe


Site Adria.Wireframe

Site Adria.Finalizado




• O uso de legendas claras e de fácil entendimento são essenciais para a construção do sitemap e do wireframe.


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


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



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 AtendeNotíciasHitsDiversãoJogosE-mailSecretária eletrônica

<Voltar Selecionar>

Claro AtendeNotíciasHitsDiversãoJogosE-mailSecretária eletrônica

<Voltar Selecionar>

NOTÍCIAS

Últimas NotíciasDólar e bolsasAeroportosTempoFutebolEsportesHoróscopoCelebridades

<Voltar Selecionar>

NOTÍCIAS

Últimas NotíciasDólar e bolsasAeroportosTempoFutebolEsportesHoróscopoCelebridades

<Voltar Selecionar>

DÓLAR E BOLSAS

Dólar.: R$ 2,50Bolsa de valores.: 34% em altaPoupança: Rend. Médio em 2%NASDAQ: 45%

<Voltar

Education

Aulas 03 e 04 - Arquitetura de Informação