O documento discute padrões de interação em interfaces, definindo padrões como estruturas recorrentes que possibilitam diversas interações. Explica que designers reproduzem padrões por diferentes razões e que tanto seguir padrões quanto quebrá-los têm vantagens e desvantagens. Também apresenta um processo de design baseado em padrões que inclui identificação, seleção, articulação e teste de padrões.

1. Design de interfaces com
padrões de interação
Frederick van Amstel @usabilidoido
Escola de Arquitetura e Design - PUCPR
www.usabilidoido.com.br

2. O mito do design 100% individual,
consciente, intencional e racional.

3. Design é uma atividade que dá sentido às coisas.
O sentido emerge em redes de associações.
Steve Jobs, iMac demo, 1998

4. Designers reproduzem padrões por mimetismo,
conformidade, articulação e referência.

5. Designers reproduzem padrões por mimetismo,
conformidade, articulação e referência.

6. Designers reproduzem padrões por mimetismo,
conformidade, articulação e referência.

7. Designers reproduzem padrões por mimetismo,
conformidade, articulação e referência.

8. Designers iniciantes reproduzem padrões sem saber que
estão fazendo isso (Van Amstel, 1999).

9. Designer experientes sabem quando estão quebrando
ou reproduzindo padrões.

10. Padrões formais em espremedores.

11. Padrões estruturais em espremedores.
Saliência
Recipiente
Peneira
+
+

12. Padrões funcionais em espremedores.

13. Padrões são áreas inevitáveis do
espaço de possibilidades de cada projeto.

14. Juicy Salif, o espremedor de limões de Philippe Starck
que quebrou tanto quanto manteve padrões (1990)

15. Padrões de design em
interfaces

16. O que é interface?
Amálgama entre comportamentos das pessoas e dos sistemas.

17. O que é interface?
Forma que possibilita Informação
Estrutura que possibilita Interação
Função que possibilita Experiência
Sistemas
Pessoas
Interface é uma área cinza com diversas
possibilidades de comportamento.

18. Padrão de interação é uma
estrutura recorrente em interfaces
que possibilita diversas interações.
(interaction design pattern / ui pattern)

19. Padrão "Puxe para atualizar” típico de aplicativos
baseados no padrão "Feeds de notícias”.

20. Existem diversas bibliotecas e linguagens de padrões de
interação documentadas websites, livros e cards.

21. Padrões são documentados com estruturas
padronizadas: problema, exemplo, etc (UI-Patterns).

22. Designers são especialistas em identificar padrões no
caos aparente das interfaces.

23. O padrão de interação
pode variar na forma e na
função, porém a estrutura
permanece a mesma.

24. A relativa independência da forma/função permite que
os padrões se adaptem de acordo com o contexto.

25. O usuário transfere o conhecimento de interação de um
aplicativo para o outro através dos padrões.

26. Existem padrões de interação persuasivos que induzem
o usuário a ter determinados comportamentos.

27. Padrões de interação do mau (dark patterns) confundem
ou inibem o comportamento do usuário.

28. “Você deve ter uma boa
razão para quebrar um
padrão.”

29. Padrões levam a comportamentos automatizados e
insustentáveis (Bilhete Único/SP - Pedro Cacique)

30. Padrões tornam as interfaces previsíveis e, por outro
lado, sem surpresas.

31. Padrões são conservadores e dão a impressão de que
seguí-los é suficiente para uma boa interface.

32. Quebrar padrões é a melhor maneira para estabelecer
novos padrões.

33. “Organizações preferem que
você siga padrões.”

34. Padrões facilitam a comunicação e construção de
conceitos numa equipe multidisciplinar.

35. Padrões contribuem para o branding da experiência.
Empresas criam bibliotecas de padrões para isso.

36. Padrões de interação são parte essencial de sistemas
projetuais (UXPin Design Systems).

37. Sistemas de design baseados em padrões tornaram a
sinalização parte da própria infraestrutura urbana.

38. Sistemas projetuais com frequência reduzem padrões de
interação a componentes padronizados.

39. Padrões devem servir como referência de projeto e não
como norma para não estancar sua evolução.

40. ProtoPattern: ferramenta de prototipação de interfaces
baseada em padrões de interação (Van Amstel, 2012)

41. ProtoPattern: assistente para geração de
interfaces baseadas em padrões (Van Amstel, 2012)

42. ProtoPattern: wiki sobre aplicabilidade e usabilidade do
padrão de interação (Van Amstel, 2012)

43. Processo de design
baseado em padrões

44. Diagrama dos padrões urbanísticos e arquitetônicos em
um vilarejo indiano. (Alexander, 1964)
Vilarejo
Pasto e celeiro Plantações
Escolas, oficinas e
templos
Rios manejados

45. Decomposição de problemas em partes e composição
de soluções em todos organizados (Alexander, 1964)
Decomposição Composição

46. Design Atômico (Brad Frost, 2013)

47. O fluxo de Design Atômico estabelece uma etapa
intermediária de sistematização (Brad Frost, 2013)

48. Processo de design
baseado em padrões
1. Identificação de padrões (constante)
2. Seleção de padrões (para o projeto)
3. Articulação de padrões (para a interface)
4. Teste de padrões (com usuários)
5. Aprendizado por padrões (constante)

49. Identificação de padrões
• Avidez por observar exemplos
• Perceber estruturas recorrentes nos trabalhos
de outros designers
• Documentar o padrão (problema, quando usar,
descrição da solução, justificativa)

50. Seleção de padrões
• Definir as necessidades do
projeto de maneira abstrata
(a necessidade de ação ao
invés da necessidade do
botão)
• Consultar bibliotecas de
padrões
• Elaborar uma lista ou painel
com padrões selecionados

51. Articulação de padrões
• Agrupar padrões por
função
• Encaixar ou adaptar
padrões
• Verificar consistência
com o todo
• Experimentar
alternativas

52. Teste de padrões
• Teste A/B, teste de
usabilidade, eyetracking
• As pessoas reconhecem
o padrão?
• As pessoas conseguem
realizar seus objetivos?
• Quais padrões
funcionam melhor?

53. Aprendizado por padrões
• Organizar o conhecimento sobre interfaces em
padrões
• O aprendizado individual e coletivo sempre
estarão muito à frente daquilo que é
documentado em bibliotecas de padrões
• Padrões mudam ao longo do tempo e exigem
constante aprendizado

54. Exercício
• Identificar um padrão de interação em
aplicativos iOS
• Documentar o padrão na Plataforma Corais
como um conhecimento filho deste:
corais.org/node/97082
• Utilizar a estrutura: Descrição, Contextos em
que aparece, Como é projetado, Como é
usado, Exemplos de interfaces

55. Obrigado!
Frederick van Amstel @usabilidoido
Escola de Arquitetura e Design - PUCPR
www.usabilidoido.com.br