Este documento discute padrões de interação e qualidades de uso. Apresenta padrões de projeto utilizados em engenharia de software e repositórios de padrões. Também discute dark patterns que usam técnicas de padrões para objetivos questionáveis. Por fim, introduz o conceito de qualidades de uso para descrever propriedades da experiência do usuário com artefatos digitais.

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. O que é uma caixa de entrada de texto
com um botão do lado?

4. E duas caixas de entrada de texto
com um botão próximo?

6. O que tem no canto superior direito
de um site onde você fez login?

7. O que terá no próximo slide?

8. 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

9. 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…

10. 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/
!

12. 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

13. http://darkpatterns.org/
http://www.theverge.com/2013/8/29/4640308/dark-patterns-inside-the-interfaces-designed-to-trick-you

14. 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

15. http://darkpatterns.org/
Exemplo: Forced Disclosure
(Revelação forçada)
A newsletter vem
selecionada como padrão

16. 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 (!)

17. 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

19. Uma questão:
!
O quanto este tipo de padrões
falam das interações?
(ou falam mais das interfaces em si?)

20. Jonas Löwgren
Use Qualities
Qualidades da experiência

21. 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:

22. ”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”

23. 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.

24. 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.

25. 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

26. 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.

27. 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.

28. • 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

29. 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

30. Atenção!
!
Não são uma taxonomia, uma lista definitiva!
Ela está em construção.

31. 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

32. 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)

33. 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
!
!

34. 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.

35. 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.

37. 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

39. 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.

41. 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.

42. 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.