arquitetura de informação e design de interação
Post on 05-Dec-2014
1.469 Views
Preview:
DESCRIPTION
TRANSCRIPT
ARQUITETURA
DE INFORMAÇÃO
E DESIGN DE
INTERAÇÃO
MARKETING DIGITAL, PUC MINAS 2014
RELEMBRANDO
O que considerar ao pensar uma estratégia digital:
Hardware
Software
Conteúdo
Design
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
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
COMO ORGANIZAR A
INFORMAÇÃO?
Fácil entendimento;
Acessível;
Hierarquizada.
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
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
USER EXPERIENCE
FOCA NO USUÁRIO!
#COMOFAS
JORNADA DO CONSUMIDOR
DESENHE!
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.
CARD SORTING
WIREFRAME https://www.youtube.com/watch?v=Lk_Cut3w9Fc
COMO FAZER UM
WIREFRAME
http://www.youtube.com/watch?v=eFHWx9Poums&feature=player_embedded#!
PROTÓTIPO
NAVEGÁVEL
http://www.prototiponavegavel.com.br/
DESIGN A PARTIR DE
WIREFRAME
http://www.youtube.com/watch?v=PwpQX12Km54
#FIKDIK
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.
LINHA DE LEITURA
CORES
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?
SÍMBOLOS
Os símbolos foram usados com o mesmo significado
universal que possuem?
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.
REPETIÇÃO E
LOCALIZAÇÃO
Repetir uma informação importante não é demais;
Saber onde localizar uma informação importante também é
fundamental.
COLOCOU NO AR?
NÃO ACABOU!
ANALYTICS!
MAPA DE ÁREAS
QUENTES (HEATMAP)
Movimento do mouse;
Cliques;
Eyetracking.
PARA QUÊ?
A IMPORTÂNCIA DE PLANEJAR UMA
BOA EXPERIÊNCIA DE USUÁRIO
http://www.youtube.com/watch?v=O94kYyzqvTc
DÚVIDAS?
Ana Paula Coelho @anapaulacoelho
anapaulacoelho@gmail.com
Material da aula em
slideshare.com/ana_paula_coelho
top related