Campus Party_Design do dia a dia #Cpbr7

DESIGN DO DIA A DIA
Arquitetura de Informação e User Experience
#Cpbr7 2014

!1

Melina Alves

Bianca Brancaleone

Ex-UX Líder da Insula e
NeogamaBBH, iThink,  
Razorfish.

Ex-Atrativa Games, Virgula,
MMCafé, iG, iThink, Webgoal.

Melina Alves
Bianca Brancaleone

+ 30  

Pesquisadores,  
Filósofos e
Psicólogos

coworkers

Arquitetos  
da Informação
Infografistas

Designers  
de Interação
Gerentes  
de Projetos
Sound and Video 
Designers

Redatores;  
SEM & SEO

Visual  
Designers

Arquitetos e
Urbanistas

Designers de
estratégias

As pessoas gostam isso?
De que forma elas desejam? Envolve aspectos culturais?
Qual a rotina dessas pessoas? E onde encaixar um sistema?
Qual a hierarquia das informações em cada necessidade?
O acesso é simplificado?
Quando elas acessam é confortável, emociona, compartilha?
…

2006

October 10th, 2006 by Kimmy Paluch
Print-Friendly Version

Correlação das áreas que criam o
design da interface do usuário e,
por sua vez, sua experiência

!
!

●
●
●
●

Arquitetura da Informação
Interação Humano Computador
Design de Interação
Usabilidade

http://www.montparnas.com/articles/what-is-user-experience-design/

2008

by DAN SAFFER


!
!

●
●
●
●

Usabilidade

http://www.kickerstudio.com/2008/12/the-disciplines-of-userexperience/

2008

by DAN SAFFER


!

!

●
●
●
●
●
●
●
●
●
●
●

Usabilidade
Visual Design
Arquitetura
Engenharia
Design Industrial
Criação de Conteúdo
Engenharia Elétrica
Engenharia Mecânica

!
!

http://www.kickerstudio.com/2008/12/the-disciplines-of-userexperience/

2009|2013

by DAN SAFFER
(redesigned by envis precisely GmbH 2009 | 2013


!
•
•
•
•
•
•
•
•
•
•
•
•
•

!

Ergonomia
Usabilidade
Visual Design
Arquitetura
Engenharia
Design Industrial
Criação de Conteúdo
Engenharia Elétrica
Engenharia Mecânica
Ciência da Computação

http://www.envis-precisely.com

BENEFÍCIOS DE USER EXPERIENCE DESIGN
• UXD é um componente essencial para produção e iniciativas em softwares, porque gera
cases de negócio mais efetivos

!

• Promove engajamento e experiências interativas entre consumidores e negócio, ou entre
os negócios das pessoas e seus sistemas de informação

!

• Cuida da maneira como as pessoas trabalham, pensam, e consomem informações

!

• Estabelece significados mais ricos e comunicação mais colaborativas

!

• Reduz frustrações e cria processos mais intuitivos

!

• Distingue produtos, serviços e marcas para que possam ganhar mais competitividade

!

• Desenvolve sistemas que possam crescer em escala e se adaptar as mudanças que os
usuários precisam e com foco em comportamento
ANDERSON, MCREE, John; WILSON; ROBB Wilson; Effective UI: The Art of Building Great User Experience in Software - O’REILLY - 2010

UX + COMPORTAMENTO
APRENDIZADO/
COMPORTAMENTO

“Comportamentalismo: 
Psicologia.”
“Froid:

!

RELAÇÃO SÓCIOCULTURAL

“...linguagens são
reveladoras de nossas
marcas e das mudanças
que somos capazes 
de empreender…”

!
MELO, Eliana; PRADOS, Rosália;
GRARCIA, Wilton: Linguagens,
tecnologias, culturas: discursos
contemporâneos. Ed.Fatash
Editora- 2008 - pg. 11 e 135

@melinalves #ﬁcaadica

!
!
!
!

!

BANCO 
DE REFERÊNCIAS

“Todos os sites,
exposições, filmes,
informações para montar
sua rede de pesquisa,
benchmarking 
e banco de ideias”

!
!
!
!
!

EXPERIÊNCIA DIGITAL
OU INTERATIVA

Melina Alves
PUC-RS - 2012
#Cpbr - 2014
"27

Melina Alves
PUC-RS - 2012
#Cpbr - 2014
"28

Melina Alves
PUC-RS - 2012
#Cpbr - 2014
"29

Melina Alves
PUC-RS - 2012
#Cpbr - 2014
"30

Melina Alves
PUC-RS - 2012
#Cpbr - 2014
"31

Melina Alves
PUC-RS - 2012
#Cpbr - 2014
"32

Melina Alves
PUC-RS - 2012
#Cpbr - 2014
"33

Melina Alves
PUC-RS - 2012
#Cpbr - 2014
"34

Melina Alves
PUC-RS - 2012
#Cpbr - 2014
"35

Melina Alves
PUC-RS - 2012
#Cpbr - 2014
"36

Melina Alves
PUC-RS - 2012
#Cpbr - 2014
"37

Melina Alves
PUC-RS - 2012
#Cpbr - 2014
"38

Melina Alves
PUC-RS - 2012
#Cpbr - 2014
"39

Melina Alves
PUC-RS - 2012
#Cpbr - 2014
"40

Melina Alves
PUC-RS - 2012
#Cpbr - 2014
"41

Melina Alves
PUC-RS - 2012
#Cpbr - 2014
"42

Melina Alves
PUC-RS - 2012
#Cpbr - 2014
"43

“experiência do  
usuário está  
cada vez  
mais próxima
da imersão
entre soluções  
digitais e reais”
Melina Alves
PUC-RS - 2012
#Cpbr - 2014
"44

Melina Alves
PUC-RS - 2012
#Cpbr - 2014
"45

HISTÓRIAS
(informações que as pessoas contam que
vem carregadas de ideias) -

!

VALOR PRÁTICO  
(notícias que podem ser usadas)

!

PÚBLICO 
(“built to show, built to grow”)

!

EMOCIONAIS  
(“when we care we share”)

!

TRIGGERS  
(top of mind, tip of tongue)

!

CAPITAL SOCIAL  
(o que faz as pessoas parecerem melhores)
http://www.maximsherstobitov.com/6-secrets-that-make-people-share/#sthash.q80xypc3.dpuf

"46

USER EXPERIENCE DESIGN 
ponto de vista da Arquitetura da Informação

Os três círculos da Arquitetura
de Informação
!

!

● Conteúdo (o que vai usado?)
● Contexto (como vai ser usado?)
● Usuário (por quem vai ser usado?)

http://semanticstudios.com/publications/semantics/000029.php

The User Experience
Honeycomb

!

!

●
●
●
●
●
●
●

Útil
Desejável
Acessível
Confiável
Encontrável
Utilizável
Valioso

http://semanticstudios.com/publications/semantics/000029.php

Diagrama da Experiência do
usuário
- Do mais ao menos consciente

!

●
●
●
●
●
●
●
●

Linguagem escrita
Design gráfico
Som
Movimento
Design da Informação
Design da Interface
Programação

10 Heurítiscas de Nielsen
by JAKOB NIELSEN 1995
http://www.nngroup.com/articles/ten-usability-heuristics

1 - Visibilidade do status do sistema
Feedback

O sistema deve sempre manter os usuários
informados sobre o que está acontecendo,
através de feedback apropriado e dentro de
um tempo razoável.

2 - Combinação entre o sistema e o mudo real
Linguagem adequada

O sistema deve falar a linguagem do usuário, com palavras, frases e
conceitos familiares ao usuário no lugar de termos orientados ao sistema.
Siga convenções do mundo real, fazendo as informações aparecerem em
uma ordem natural e lógica.

3 - Controle do usuário e liberdade
Usuários sempre escolhem funções erradas e vão precisar de uma “saída de
emergência” claramente marcada para sair do estado indesejado sem
maiores problemas. Permita desfazer e refazer.

4 - Consistência e padrões
Usuários não devem ter que se preocupar se palavras diferentes,
situações ou ações significam a mesma coisa. Siga as convenções.

5 - Prevenção de erro
Melhor que ter boas mensagens de
erro é ter um design cuidadoso que
previne um problema antes de
acontecer.
 

Elimine condições de erro ou os
conheça e apresente aos usuários uma
opção de confirmação antes dele
prosseguir com a ação.
!
“NESSE MUNDO MOBILE, SOMOS TODOS
DALTÔNICOS E SOFREMOS MAL DE
PARKINSON” 
Luli Radfahrer Digital Talks RJ - 2013

6 - Reconhecimento é melhor que lembrança
Reduza a carga de memória do usuário

Objetos, ações e opções devem
estar visíveis.
!
O usuário não deve ter que
lembrar informação de uma
parte do diálogo em outra parte.
!
Instruções para o uso do
sistema devem estar visíveis ou
facilmente recuperáveis sempre
que necessário.

7 - Flexibilidade e eficiência no uso
Atalhos
Atalhos que não são vistos pelos
usuários leigos - podem aumentar a
velocidade na interação para
usuários experientes. Assim, o
sistema pode atender tantos os
usuários inexperientes como os
experientes. 
Permita que os usuários
configurem ações frequentes.

8 - Estética e design minimalista
Diálogos não
devem ter
informações
irrelevantes ou
raramente usados.
 

Cada unidade de
informação extra
em um diálogo
compete com
unidades
relevantes de
informação e
diminui a sua
visibilidade.

9 - Ajude o usuário a reconhecer, diagnosticar
e recuperar erros
Mensagens de erro devem ser
expressadas em linguagem (sem
código) indicando precisamente
o problema, e sugerir uma
solução construtiva.

10 - Ajuda e documentação
É melhor que o sistema
possa ser usado sem
documentação, mas pode
ser necessário ter um para
oferecer ajuda.
Qualquer informação deve
ser fácil de procurar, focando
na tarefa do usuário, listando
passos concretos e sem ser
muito extenso.

usabilitygeek.com

USER EXPERIENCE DESIGN 
ponto de vista Humano _ IHC

Donald Norman

“Um método importante de tornar os sistemas
mais fáceis de aprender e usar é torná-los
exploráveis, encorajar o usuário a fazer
experiências e aprender as possibilidades
através de exploração ativa.

É assim que muitas pessoas aprendem a
usar utensílios domésticos ou um novo
sistema de som, aparelho de televisão ou
videogame: apertando os botões
enquanto escutam e observam, para ver
o que acontece.”

Out of the box from Vitamins

play

Convidando a
experimentação

“Em cada estado do sistema,
o usuário tem de ver
prontamente e ser capaz de
fazer todas as ações
permissíveis.  
 
A visibilidade atua como uma
sugestão, recordando ao
usuário as possibilidades e
convidando à exploração de
novas idéias e métodos.”

Affordance
“Propiciação real é
fornecida pelo
teclado (apertar de
teclas), pelo mouse
(clique), pelo monitor
touchscreen
(apontar) e etc.”

Affordance para Design de Interação
“Propiciação percebida são as
dicas visuais exibidas na tela do
monitor para que essas ações
sejam executadas.
!
Para Norman, o designer deve
se concentrar mais na
propiciação percebida do que na
real, pois esta está além do seu
alcance.”

Convidando a experimentação
• visível
• fácil de interpretar.

“A imagem de sistema desempenha um
papel crítico para possibilitar esse
aprendizado.”

• usuários aprendem os efeitos 
de cada ação (aprender causa/
consequência).
• deve reversível (imediatamente para
sistemas)
• deve deixar muito claro o efeito que a
ação pretendida
• haver tempo suficiente para cancelar o
plano.
• ações difíceis de executar, não
exploráveis.
• explorável e passível de descoberta

!

NFC Cards - http://vitaminsdesign.com/projects/nfc-cards-

for-samsung

Resumão
1 - Dar sempre feedback pro usuário do que
está acontecendo no sistema

6 - Reduza a carga de memória do usuário,
não crie menus com vários níveis nem
esconda funcionalidades

2 - Usar sempre linguagem apropriada pro seu
público

7 - Flexibilidade e eficiência, atalhos (botões
configuráveis, atalhos no teclado são ótimos)

3 - Liberdade e controle do usuário para ir
onde quiser e precisar no sistema

8 - Mostrar o que precisa ser mostrado na
hora que precisa ser mostrado

4 - Sistema precisa ter consistência e seguir
padrões é sempre recomendado

9 - Ajude o usuário a resolver caso haja
problemas

5 - Previna os erros de acontecerem - veja
pontos críticos e trabalhe neles

10 - Crie um sistema tão bom que não precise
de documentação (mas como sempre tem
que ter, que seja fácil de encontrar o que
precisa e que mostre de maneira fácil o que
se quer).

REFERÊNCIAS E INSPIRAÇÕES
!
Propiciação e clicabilidade
http://www.usabilidoido.com.br/
propiciacao_e_clicabilidade.html

!

Corais
http://corais.org/knowledge

!

Affordances: Clarifying and Evolving a Concept
http://www.cs.ubc.ca/~joanna/papers/
GI2000_McGrenere_Affordances.pdf
Service Design Tools
http://www.servicedesigntools.org/

!

Affordances and Design
http://www.interaction-design.org/encyclopedia/
affordances_and_design.html

 

Design como linguagem: não basta projetar, tem que
parecer projetado?
http://www.gonzatto.com/linguagem-design-projetado/
Apresentação: Quanto custa arquitetura da
informação?
http://www.slideshare.net/bibia1010/quantocusta-a-arquitetura-da-informao

!

Livro: The design of everyday things
http://www.amazon.com/Design-EverydayThings-Donald-Norman/dp/0465067107

!

Livro: Information Architecture for the World
Wide Web
http://shop.oreilly.com/product/
9781565922822.do

Melina Alves

melina@duxcoworking.com
@melinalves
melinaalves.com
duxcoworking.com

Bianca Brancaleone

contato.bianca@gmail.com
fb.com/bianca.brancaleone 
slideshare.com/bibia1010

Campus Party_Design do dia a dia #Cpbr7

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Campus Party_Design do dia a dia #Cpbr7

Similaire à Campus Party_Design do dia a dia #Cpbr7 (20)

Plus de Melina Alves

Plus de Melina Alves (8)

Campus Party_Design do dia a dia #Cpbr7