[design – unisinos]

<i&nt>

<Aula 6><Aula 6>

<design de interfaces/>

2ª parte

As diferentes TELAS que se

acumulam ao longo do tempo +

a representação de um meio

em outro + 3 facetas da em outro + 3 facetas da

internet + cultura do

software = INTERFACES

(SOFTWARE, WEB, APPs)

DESENCAVANDO INTERFACES: FERRAMENTAS PARA RECUPERAR,

ACOMPANHAR E REGISTRAR A EVOLUÇÃO DA WEB

preservar para prever

� Internet: biblioteca dinâmica

� Interfaces da web são efêmeras

� As mídias de massa são gatekeepers de seus conteúdos, as iniciativas são bottom-up.conteúdos, as iniciativas são bottom-up.

� Oportunidade única de testemunhar as mudanças, preservar a memória e entender as lógicas operativas dos sites, prevendo tendências.

Arqueologia do passado: Arqueologia do passado:

resgatando interfaces

Internet Archive [WaybackInternet Archive [Wayback

Machine]

(vantagens e limites)

Fotografar os achados:

acompanhando interfaces

� O velho e bom printscreen e o problema da dobra

� Webshot (software)� Webshot (software)

� Outros

webshot

Molduras como instrumento de

análise

� Zonear territórios da interface pelo significado que propõem

� Organizar a experiência “total”

� Molduras que se repetem, somem, se � Molduras que se repetem, somem, se transformam vão indicando a trajetória (comportamento) das lógicas operativas de um site.

conjunto de procedimentos

identificáveis nas

interfaces que fazem com que

um website oferte suas

características específicas características específicas

para o usuário.

-Lógicas de inserção de vídeos

-Lógicas de visualização e -compartilhamento de vídeos(homepage e watchpage)

MO

MFT[MC]

MO

MAA

MPP

MGP

Molduras: abrigo de territórios de significaçãoUso instrumental para dissecar as interfaces

MAC

MI

MGP

Organizações Globo: uma trajetória que chega na web

A fase Globo Media Center e suas lógicas

MOg

MP M

VMPR

MOe

Center e suas lógicas operativas MPL

CMIM MIP

MB

A passagem de Globo Media Center para Globo Vídeos – 2006

MI

MOe

MOg

MP

MAC

MFT(1) MFT(2)

MP

MO

gMO

e

MM

C

MD

1

MD

2

MR

MP

A

Lógicas de visualização e compartilhamento de vídeos (home e watchpage)

MOg

MOe

MPAMP

MMC

MI

N

MO

g

MMC

MAC

MFT

MIR

TEMPO CRONOLÓGICO = COMPORTAMENTO DO SITE

Lógicas operativas capturadas em

Data X

Lógicas operativas capturadas em

Data y

Lógicas operativas capturadas em

Data z

website

� um website – também entendido com site -trata-se de um conjunto de webpages

(Jackson, 1997) que tenham um conceito que as articule (uma marca comercial, uma as articule (uma marca comercial, uma universidade, um evento, uma agremiação esportiva, uma banda de rock, uma associação, etc), que as reúna em uma mesma arquitetura, na qual as diferentes páginas web estão inseridas com alguma hierarquia diante do usuário.

Tipos de site

� Dificuldade de criar as fronteiras entre

forma-conteúdoforma-conteúdo

� (ver webby awards)

� (ver Wikipédia)

Mais relevantes

Blog, portal, e-commerce,

site de rede social, media-site de rede social, media-

sharing, hotsite,

buscadores, wiki.

No início, havia 2 escolas de AI:

- Desenho de wireframes e mapas do site.

- Design estrutural da informação (vocabulários controlados e taxonomias).

´

Fonte: Luciana Cattony – plantabaixa.wordpress.com

1. O design estrutural de ambientes de informaçãocompartilhados

2. A arte e a ciência da organização e categorização de

Segundo o Instituto de Arquitetura de Informação:

2. A arte e a ciência da organização e categorização de sites, intranets, comunidades online e softwares para proporcionar usabilidade e “encontrabilidade”

3. Uma comunidade de prática emergente focada em levar princípios de design e arquitetura ao ambiente digital

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Luciana Cattony. Arquiteta de Informação da Gerdau.

Para mim arquitetura de informação é fazer o complexo se tornar algo simples. É entender as necessidades do cliente, do seu negócio e traduzí-las em ambientes amigáveis e intuitivos para o usuário. Costumo dizer que o arquiteto de informação é como se fosse um intérprete entre o cliente e o usuário, já que ele contribui significativamente para que a comunicação e o intercâmbio / compartilhamento de informações e experiências entre esses dois lados sejam feitos de maneira eficaz.

Luciana Cattony. Arquiteta de Informação da Gerdau.

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Visão da disciplina

Mercado, concorrentes, necessidades do negócio, restrições tecnológicas, financeiras etc.

Quem são, suasnecessidades, hábitos, maneirasde navegar, expectativasetc.

O que o site tem a oferecer, como será criado o conteúdo etc.

Fonte: Luciana Cattony – plantabaixa.wordpress.com

• Encurtar o tempo de construção

• Tornar a manutenção mais simples

Arquitetura de Informação –Objetivos

• Tornar a busca por informações mais rápida

• Simplificar tarefas e processos

• Diminuir a necessidade de treinamentos

• Agregar valor às marcas

• Criar experiências de uso memoráveis

Fonte: Luciana Cattony – plantabaixa.wordpress.com

EntregáveisAtividades e entregáveis

O que é arquitetura de informação?Fonte: Luciana Cattony – plantabaixa.wordpress.com

Resgate e levantamento de informações

Recebimento da demanda

Benchmarking

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Inventário / análise de conteúdo

Avaliação de maturidade

Avaliação Heurística

EstatísticasFonte: Luciana Cattony – plantabaixa.wordpress.com

Pesquisas quantitativas / qualitativas

Focus Group

Entrevistas com usuários

Personas

Imagem personas: Adaptivepath

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Card Sorting

Estudo etnográfico

Mapa do site

Testes de usabilidade

Imagens: TRY – Consultoria e pesquisa

Estudo etnográfico

Fonte: Luciana Cattony – plantabaixa.wordpress.com

horizontal gluedotis attached to the end of this arrow

vertical gluedotis attached to the end of this arrow

Protótipos em papel

http://www.nngroup.com/reports/prototyping/video_stills.html

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Wireframes x Layouts

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Wireframes x Layouts

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Acompanhamento do desenvolvimento

Fonte: Luciana Cattony – plantabaixa.wordpress.com

Apresentação de ferramentas,

info e tutoriais para card

sorting, sitemap,

wireframes, layouts, etc.wireframes, layouts, etc.