patterns,
padrões e
use qualities

rodrigo@gonzatto.com
rodrigo gonzatto
uma língua comum
e commons em interfaces
e intera...
O que é uma caixa de entrada de texto	

com um botão do lado?
E duas caixas de entrada de texto	

com um botão próximo?
O que tem no canto superior direito	

de um site onde você fez login?
O que terá no próximo slide?
Patterns
• Padrões (mas não padronização!)
de soluções de problemas
recorrentes	

• "O design opera por linguagens
de padr...
Design Patterns	

(Padrões de Projeto/Desenho)
• Utilizados em Engenharia de Software como
padrões de projeto/desenho: sol...
Repositórios de padrões
Alguns de repositórios de design patterns:	

• Welie: 

http://www.welie.com/patterns/index.php 	
...
Dark Patterns
• Também conhecidos como Anti-patterns	

• Utiliza-se de técnicas parecidas com as Pattersn (no
caso, de Des...
http://darkpatterns.org/
http://www.theverge.com/2013/8/29/4640308/dark-patterns-inside-the-interfaces-designed-to-trick-y...
http://darkpatterns.org/	

Exemplo: Bait and Switch	

(Isca e Mudança)	

O telefone embaixo do nome do hotel não é do hote...
http://darkpatterns.org/	

Exemplo: Forced Disclosure	

(Revelação forçada)	

A newsletter vem 	

selecionada como padrão
http://www.theverge.com/
2013/8/29/4640308/dark-patterns-inside-
the-interfaces-designed-to-trick-you 	

Exemplo: Questões...
Atenção!
• Cuidar com funcionalismo ou formalismo nos
padrões, pois Patterns não se reduzem a ideia de
“reutilizar código”...
Uma questão:	

!
O quanto este tipo de padrões	

falam das interações?	

(ou falam mais das interfaces em si?)
Jonas Löwgren
Use Qualities	

Qualidades da experiência
Do que é feito	

um site?	

um aplicativo?	

um programa/software?	

um game?	

um produto digital?
Para entender de onde ...
”Eu [Löwgren] proponho pensar em design
de interação em termos de qualidades de
uso. Por exemplo, certas propriedades de
p...
Do que é feita a interação?	

!
Interação como material sem qualidades.	

!
Interação não é um material, pois só aparece e...
Todo produto é projetado com a	

intenção de mudar (ou facilitar a mudança) do
modo como as pessoas agem (comportamento)	
...
Como falar, então, de interações?	

!
use qualities (qualidades de uso)

certas propriedades de um design do digital 

que...
As “Use qualities of digital designs” dizem respeito	

às escolhas de design e o uso resultante delas	

!
Boa parte da hab...
Use Qualities	

Qualidades da experiência
• É uma terminologia/língua em comum para
designers de interação	

• Busca ajuda...
• Tem como foco a estética da interação.	

• Não é uma lista definitiva ou fixa.	

• Não fala de como a interface/produto é,...
Grandes grupos de“use-oriented
qualities of digital artifacts”
Motivação	

Interação	

Aspectos sociais	

Estruturas

Sign...
Atenção!	

!
Não são uma taxonomia, uma lista definitiva!	

Ela está em construção.
Motivação
• Playability: a qualidade adictiva que,
como em um jogo, cria uma vontade de
repetir a interação “mais uma vez"...
Motivação
• Anticipation (continuidade/coerência): qualidade
de uso que propõe uma consistência visual e de
interação (exe...
Interação
• Pliability: trata da plasticidade ou maleabilidade
de uma matéria digital. Ex.: sentir a interface como
uma ma...
Interação
• Control ou Autonomy, Limite
entre o controle total e a automação.
O quanto você "manda" no artefato ou
este te...
Interação
!
• Immertion: ligação profunda entre
interagente e a interação que realiza.
Geralmente é típico em actividades
...
Social
• Social area: possui potencialidade para
uma ação social. Ex. Chat
• Personal connectedness: estar
conectado, semp...
Estruturas
• Transparency: usuário adapta e estende a
interface às suas necessidades. Foco na
tarefa, não na ferramenta. (...
Significado
3 tipos de ambiguidade: informação, contexto
e relação.
• Ambiguidade: impossibilita uma
interpretação fácil, ...
Exemplos de propostas de novas

use qualities (criadas por alunos)
• Comprometimento:
Envolvimento social em
um ambiente v...
Patterns, Padrões e Use Qualities
Patterns, Padrões e Use Qualities
Patterns, Padrões e Use Qualities
Patterns, Padrões e Use Qualities
Patterns, Padrões e Use Qualities
Patterns, Padrões e Use Qualities
Patterns, Padrões e Use Qualities
Próximos SlideShares
Carregando em…5
×

Patterns, Padrões e Use Qualities

861 visualizações

Publicada em

Sobre patterns, design patterns, padrões de interação e use qualities.

Publicada em: Design
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
861
No SlideShare
0
A partir de incorporações
0
Número de incorporações
8
Ações
Compartilhamentos
0
Downloads
29
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Patterns, Padrões e Use Qualities

  1. 1. patterns, padrões e use qualities
 rodrigo@gonzatto.com rodrigo gonzatto uma língua comum e commons em interfaces e interações gonzatto.com
  2. 2. O que é uma caixa de entrada de texto com um botão do lado?
  3. 3. E duas caixas de entrada de texto com um botão próximo?
  4. 4. O que tem no canto superior direito de um site onde você fez login?
  5. 5. O que terá no próximo slide?
  6. 6. Patterns • Padrões (mas não padronização!) de soluções de problemas recorrentes • "O design opera por linguagens de padrões” [Hugo Cristo apud Cristopher Alexander] • "Um pattern descreve um problema que se repete várias vezes em um determinado meio, e em seguida descreve o núcleo da sua solução, de modo que esta solução possa ser usada milhares e milhares de vezes.” Referência: Hugo Cristo
  7. 7. Design Patterns (Padrões de Projeto/Desenho) • Utilizados em Engenharia de Software como padrões de projeto/desenho: soluções gerais e reutilizáveis de problemas frequentes em determinados contextos • Geralmente são apresentados em modelos, templates confiáveis para questões gerais (não- específicos) • Mas existem diferenças entre padrões para interface, código e interação…
  8. 8. Repositórios de padrões Alguns de repositórios de design patterns: • Welie: 
 http://www.welie.com/patterns/index.php • Yahoo Design Patterns: 
 https://developer.yahoo.com/ypatterns/ • Muitos sites de patterns: 
 http://profs.info.uaic.ro/~evalica/patterns/ !
  9. 9. Dark Patterns • Também conhecidos como Anti-patterns • Utiliza-se de técnicas parecidas com as Pattersn (no caso, de Design de Interação) para atingir objetivos eticamente (e legalmente) questionáveis • Geralmente disfarça-se de “facilidade de uso” ou truques propícios para tal
  10. 10. http://darkpatterns.org/ http://www.theverge.com/2013/8/29/4640308/dark-patterns-inside-the-interfaces-designed-to-trick-you
  11. 11. http://darkpatterns.org/ Exemplo: Bait and Switch (Isca e Mudança) O telefone embaixo do nome do hotel não é do hotel mas do site
  12. 12. http://darkpatterns.org/ Exemplo: Forced Disclosure (Revelação forçada) A newsletter vem selecionada como padrão
  13. 13. http://www.theverge.com/ 2013/8/29/4640308/dark-patterns-inside- the-interfaces-designed-to-trick-you Exemplo: Questões complicadas ! Selecione se não quiser (!)
  14. 14. Atenção! • Cuidar com funcionalismo ou formalismo nos padrões, pois Patterns não se reduzem a ideia de “reutilizar código”, “reutilizar templates (de Photoshop,Axure, etc.) • Padrões devem valorizar o conhecimento socialmente compartilhado, mapeamentos conhecidos, interfaces consolidados, e não buscar inovação em si mesma Referência: Hugo Cristo
  15. 15. Uma questão: ! O quanto este tipo de padrões falam das interações? (ou falam mais das interfaces em si?)
  16. 16. Jonas Löwgren Use Qualities Qualidades da experiência
  17. 17. Do que é feito um site? um aplicativo? um programa/software? um game? um produto digital? Para entender de onde vem a ideia de 
 use qualities é preciso se perguntar:
  18. 18. ”Eu [Löwgren] proponho pensar em design de interação em termos de qualidades de uso. Por exemplo, certas propriedades de produtos digitais que são experienciadas em seu uso. Estas qualidades transcendem o projeto em específico e oferecem uma linguagem para falar sobre o design desejado a ser produzido”
  19. 19. Do que é feita a interação? ! Interação como material sem qualidades. ! Interação não é um material, pois só aparece em uso. Já o uso pode ser definido/propiciado 
 por uma forma ou material.
  20. 20. Todo produto é projetado com a intenção de mudar (ou facilitar a mudança) do modo como as pessoas agem (comportamento) ! É por isso que os artefatos tem um papel importante em moldar as atividades em uma organização, por exemplo.
  21. 21. Como falar, então, de interações? ! use qualities (qualidades de uso)
 certas propriedades de um design do digital 
 que podem ser experimentadas em seu uso
  22. 22. As “Use qualities of digital designs” dizem respeito às escolhas de design e o uso resultante delas ! Boa parte da habilidade prática em projetar 
 se dá em ter um repertório de formatos,
 que permitem ao designer ficar mais confiante 
 em novas situações de projeto.
  23. 23. Use Qualities Qualidades da experiência • É uma terminologia/língua em comum para designers de interação • Busca ajudar o/a designer a antecipar a proposta de experimentação esperada.
  24. 24. • Tem como foco a estética da interação. • Não é uma lista definitiva ou fixa. • Não fala de como a interface/produto é, mas da experiência que a pessoa pode esperar dela. Use Qualities Qualidades da experiência
  25. 25. Grandes grupos de“use-oriented qualities of digital artifacts” Motivação Interação Aspectos sociais Estruturas
 Significado • motivação dos usuário para o engajamento com um artefato digital • sensação de interação com o artefato • efeitos/consequências sociais da interação • qualidades que pertencem aos aspectos estruturais do artefato, da maneira como ele se manifesta em uso • conjunto que se relaciona com a indução do usuário à reflexão sobre a sua situação
  26. 26. Atenção! ! Não são uma taxonomia, uma lista definitiva! Ela está em construção.
  27. 27. Motivação • Playability: a qualidade adictiva que, como em um jogo, cria uma vontade de repetir a interação “mais uma vez" ! ! • Seductibity: proposta de envolvimento emocional entre o artefato e a pessoa
  28. 28. Motivação • Anticipation (continuidade/coerência): qualidade de uso que propõe uma consistência visual e de interação (exemplo: utilização de estruturas dramáticas) ! • Relevancy: resolve diretamente um problema ou uma necessidade relevante à pessoa ! • Usefulness: interação que até é útil, mas não necessariamente usável (propositalmente)
  29. 29. Interação • Pliability: trata da plasticidade ou maleabilidade de uma matéria digital. Ex.: sentir a interface como uma matéria que pode ser manipulada pelos “dedos”. • de superfície: relacionado com o
 movimento do utilizador, o seu 
 resultado e o entendimento. Ex.: Botões • de profundidade, tem a ver com as possibilidades de agir livremente e
 dar forma à matéria. Ex.: Reactables ! !
  30. 30. Interação • Control ou Autonomy, Limite entre o controle total e a automação. O quanto você "manda" no artefato ou este tem autonomia de atuação. 
 
 De um lado: a ferramenta, extensão do corpo e controlável. 
 
 De outro lado: o autônomo como agente trabalha por conta e resta ao usuário utiliza-lo como participação.
  31. 31. Interação ! • Immertion: ligação profunda entre interagente e a interação que realiza. Geralmente é típico em actividades criativas e exploratórias. 
 Ex.“RealidadeVirtual" ! ! • Fluency: “onipresença" do digital na vida, que permite ir de uma interface a outra com interações sutis.
  32. 32. Social • Social area: possui potencialidade para uma ação social. Ex. Chat • Personal connectedness: estar conectado, sempre mantendo contato; • Identity: propicia construção e manutenção da identidade pessoal ou de grupo. Ex.: skins, badges, personalização
  33. 33. Estruturas • Transparency: usuário adapta e estende a interface às suas necessidades. Foco na tarefa, não na ferramenta. (Ex.: escrever texto, não abrir o Word!) • Eficiency: interação rápida e sem erro (ou o erro é rapidamente contornado) • Elegance: combinação do poder da eficiência e da simplicidade. Oferece melhor performance com a estrutura mais simples possível.
  34. 34. Significado 3 tipos de ambiguidade: informação, contexto e relação. • Ambiguidade: impossibilita uma interpretação fácil, encorajando o interagente a participar (para entender algo) • Parafuncionality: encoraja a refletir sobre a relação com a tecnologia e sobre os valores culturais em que está inserido (ex.: Critical Design) • Surprise: na confusão, a pessoa busca voltar atrás e refazer. Com a surpresa, o usuário se interessa naquilo que fez.
  35. 35. Exemplos de propostas de novas
 use qualities (criadas por alunos) • Comprometimento: Envolvimento social em um ambiente virtual (jogos) que gera uma sensação de compromisso entre seus.

×