Arquitetura de informação e design de interação

37
ARQUITETURA DE INFORMAÇÃO E DESIGN DE INTERAÇÃO MARKETING DIGITAL, PUC MINAS 2014

description

Aula sobre design de projetos digitais para alunos de publicidade e propaganda da PUC Minas, no minicurso de marketing digital.

Transcript of Arquitetura de informação e design de interação

Page 1: Arquitetura de informação e design de interação

ARQUITETURA

DE INFORMAÇÃO

E DESIGN DE

INTERAÇÃO

MARKETING DIGITAL, PUC MINAS 2014

Page 2: Arquitetura de informação e design de interação

RELEMBRANDO

O que considerar ao pensar uma estratégia digital:

Hardware

Software

Conteúdo

Design

Page 3: Arquitetura de informação e design de interação

INFORMAÇÃO

“A Tecnologia da Informação (TI) pode ser definida como o

conjunto de todas as atividades e soluções providas por

recursos de computação que visam permitir o

armazenamento, o acesso e o uso das informações.”

Emerson Alecrim

Page 4: Arquitetura de informação e design de interação

TECNOLOGIA DA

INFORMAÇÃO

Desde a criação dos computadores, o objetivo era lidar com

a informação de uma maneira mais ágil, assertiva e

inteligente. A cada novo dispositivo e tecnologia, damos um

passo maior em relação a esse objetivo.

Conseguimos criar e compartilhar mais informação nos

últimos 30 anos do que em todo resto da história da

humanidade.¹

1 - Information Anxiety, Richard Wurman

Page 5: Arquitetura de informação e design de interação

COMO ORGANIZAR A

INFORMAÇÃO?

Fácil entendimento;

Acessível;

Hierarquizada.

Page 6: Arquitetura de informação e design de interação

ARQUITETURA DE

INFORMAÇÃO

“A arquitetura da informação é a categorização da

informação em uma estrutura coerente, preferencialmente

aquela que a maioria das pessoas possa compreender

rapidamente. Geralmente é hierárquica, mas pode ter outras

estruturas, como concêntrica ou até mesmo caótica.”

Wikipedia

Page 7: Arquitetura de informação e design de interação

DESIGN DE

INTERAÇÃO

Design de Interação (DxI) é o ramo do Design da Experiência

do Usuário (UX, em inglês) que esclarece o relacionamento

entre as pessoas e os artefatos interativos que elas usam.

(...) Seu foco está na definição de complexos diálogos que

ocorrem entre as pessoas e seus artefatos interativos dos

mais variados tipos - de computadores e dispositivos móveis

até utensílios comuns.

Robert Reimann

Page 8: Arquitetura de informação e design de interação

USER EXPERIENCE

Page 9: Arquitetura de informação e design de interação

FOCA NO USUÁRIO!

Page 10: Arquitetura de informação e design de interação

#COMOFAS

Page 11: Arquitetura de informação e design de interação

LEMBRA DAS

PERSONAS?

Fonte: www.uxforthemasses.com

Page 12: Arquitetura de informação e design de interação

JORNADA DO CONSUMIDOR

Page 13: Arquitetura de informação e design de interação

DESENHE!

Page 14: Arquitetura de informação e design de interação

COMO COMEÇAR?

1. Desenhando o que está na sua cabeça, como você imagina

o produto final do projeto, que seja adequado para o usuário;

2. Leve em consideração o que aprender nas aulas de

direção de arte ou design;

3. Consulte bibliografia de design de interação, arquitetura

de informação e experiência de usuário.

4. Não se esqueça do mais importante: meu usuário

consegue entender isso? Valide com as personas.

Page 15: Arquitetura de informação e design de interação
Page 16: Arquitetura de informação e design de interação

CARD SORTING

Page 17: Arquitetura de informação e design de interação
Page 18: Arquitetura de informação e design de interação

WIREFRAME https://www.youtube.com/watch?v=Lk_Cut3w9Fc

Page 19: Arquitetura de informação e design de interação
Page 21: Arquitetura de informação e design de interação

PROTÓTIPO

NAVEGÁVEL

http://www.prototiponavegavel.com.br/

Page 22: Arquitetura de informação e design de interação

DESIGN A PARTIR DE

WIREFRAME

http://www.youtube.com/watch?v=PwpQX12Km54

Page 23: Arquitetura de informação e design de interação

#FIKDIK

Page 24: Arquitetura de informação e design de interação

TEXTOS NAS TELAS

Ler na tela é diferente de ler no papel;

Blocos de texto mais curtos e áreas de respiro maiores;

Hierarquia de informação: localização, tamanho e destaque

do texto ajuda na leitura e define relevância;

Títulos, subtítulos e tópicos ajudam na experiência de leitura.

Page 25: Arquitetura de informação e design de interação

LINHA DE LEITURA

Page 26: Arquitetura de informação e design de interação

CORES

Page 27: Arquitetura de informação e design de interação

FORMAS

As formas demonstram a hierarquia da informação? Os

elementos mais fortes se referem às informações mais

importantes? Há contraste da informação mais relevante

com os outros elementos da tela?

Page 28: Arquitetura de informação e design de interação

SÍMBOLOS

Os símbolos foram usados com o mesmo significado

universal que possuem?

Page 29: Arquitetura de informação e design de interação

IMAGENS

Criam identificação com o público-alvo? Pessoas? Prints de

tela? Imagens do produto?

Pense quando fica mais fácil explicar desenhando do que

escrevendo.

Page 30: Arquitetura de informação e design de interação

REPETIÇÃO E

LOCALIZAÇÃO

Repetir uma informação importante não é demais;

Saber onde localizar uma informação importante também é

fundamental.

Page 31: Arquitetura de informação e design de interação

COLOCOU NO AR?

NÃO ACABOU!

Page 32: Arquitetura de informação e design de interação

ANALYTICS!

Page 33: Arquitetura de informação e design de interação

MAPA DE ÁREAS

QUENTES (HEATMAP)

Movimento do mouse;

Cliques;

Eyetracking.

Page 34: Arquitetura de informação e design de interação

TESTES A/B

http://www.youtube.com/watch?v=SKulPmg1Ilo

Page 35: Arquitetura de informação e design de interação

PARA QUÊ?

Page 36: Arquitetura de informação e design de interação

A IMPORTÂNCIA DE PLANEJAR UMA

BOA EXPERIÊNCIA DE USUÁRIO

http://www.youtube.com/watch?v=O94kYyzqvTc