Interaction design pattern is a recurrent structure that affords specific interactions.

1. Interface composition with
interaction design patterns
Frederick van Amstel @fredvanamstel
Architecture and Design School - PUCPR
www.fredvanamstel.com

2. The myth of the 100% individual,
conscious, intentional and rational design.

3. Design is an activity that give meaning to things.
Meaning emerges from networks of associations.
Steve Jobs, iMac demo, 1998

4. Designers reproduce patterns through mimicry,
conformity, articulation and reference.

5. Designers reproduce patterns through mimicry,
conformity, articulation and reference.

6. Designers reproduce patterns through mimicry,
conformity, articulation and reference.

7. Designers reproduce patterns through mimicry,
conformity, articulation and reference.

8. Novice designers reproduce patterns without knowing
what they are doing it (Van Amstel, 1999).

9. Experienced designers know when they are breaking or
reproducing patterns.

10. Formal patterns in juice squeezers.

11. Structural patterns in juice squeezers.
Protrusion
Container
Sieve
+
+

12. Functional patterns in juice squeezers.

13. Patterns are inevitable areas of the space of
possibilities.

14. Juicy Salif, Philippe Starck’s lemon squeezer broke as
much as reproduced patterns (1990).

15. Interaction design
patterns

16. What is an interface?
An amalgam between people’s behavior and system’s behavior.

17. Form that affords information.
Structure that affords interaction.
Function that affords experience.
Systems
People
It is also a virtual space of possibilities.
What is an interface?
An amalgam between people’s behavior and system’s behavior.

18. Interaction design pattern is a
recurrent structure that affords
specific interactions.
(interaction design pattern / ui pattern)

19. "Pull to refresh" pattern is typical of apps with the "News
feed” pattern. Interlinked patterns are languages.

20. There are many websites, books and cards with pattern
languages or with pattern libraries (no interlinks).

21. Documented patterns follow a common structure:
problem, solution example, usage (UI-Patterns).

22. Designers are experts in identifying patterns in the
apparent chaos of Graphic User Interfaces.

23. Interaction design patterns
may have different forms and
functions while the structure
remaining the same.

24. The relative independence from form and function
allows patterns to adapt to context.

25. Patterns helps the user to transfer his/her knowledge
from one application to another.

26. There are many patterns that try to persuade users to
behave in a certain way.

27. Persuasive patterns are different from dark patterns,
which confuse or prevent users from doing something.

28. You must have a good reason
to break a pattern.

29. Patterns lead to automated and unsustainable behaviors
(Bilhete Único/SP - Pedro Cacique).

30. Patterns make interfaces predictable, with no surprises.

31. Patterns are conservative and give the impression that
following them is enough to design a good interface.

32. Breaking patterns is the best way to establish new
patterns.

33. Organizations prefer that you
follow patterns.

34. Following patterns contributes to a recognizable
experience branding.

35. Patterns enable communication and concept formation
in multidisciplinary teams.

36. Patterns help beginner designers learn the possibilities
already tried by expert designers.

37. Design Systems are based on patterns
(UXPin Design Systems).

38. Design Systems are not new. They made signage an
essential part of the urban infrastructure.

39. Design Systems often reduce patterns to reusable
interface componentes, with fixed form and function.

40. Patterns are resources for design and should not be
treated as standards, otherwise their evolution halts.

41. Pattern languages are also evolving (Iba, 2012).

42. ProtoPattern: interface prototyping tool based on
Pattern Language 3.0 (Van Amstel, 2012)

43. ProtoPattern: wizard for assisted interface generation
(Van Amstel, 2012).

44. ProtoPattern: application and usability information in a
wiki page for each pattern (Van Amstel, 2012).

45. Pattern-based design
process

46. Urban and architectural patterns in a small Indian
village. (Alexander, 1964)
Village
Pasture and granary Crop fields
Schools, workshops
and temples
Managed waters

47. A difficult problem should be decomposed in small
problems and an integrated solution should be
composed from small solutions (Alexander, 1964).
Decomposition Composition

48. Patterns helps grasping the quality without a name, that
sense of wholeness, that connection to a place…

49. The City is not a Tree: patterns do not follow a strict
hierarchy; they overlap (Alexander, 1965).

50. Design Patterns borrowed the pattern concept without
the concept of language (Gang of Four, 1994).

51. Atomic Design: an even simpler pattern approach to
mobile and web interface design (Brad Frost, 2013).

52. Atomic Design proposes an intermediary step in the
design process: articulation (Brad Frost, 2013).

53. Pattern language design process
1. Identifying patterns (constantly)
2. Selecting patterns (for the projected situation)
3. Articulating patterns (into a coherent whole)
4. Testing patters (with users)
5. Learning from patterns (constantly)

54. Identifying patterns
• Observe many examples
• Perceive recurrent structures
• Describe the pattern (problem, context,
solution, links and so on)

55. Pattern selection
• Define needs without clear
objects (the need for action
instead of the need for a
particular button)
• Check pattern libraries and
languages
• Make a list or a board with
the selected patterns

56. Pattern articulation
• Group pattern by
functions
• Try different patterns for
each function
• Adapt pattern through
form variation
• Keep checking for the
sense of wholeness

57. Pattern testing
• A/B testing, usability
testing, eyetracking
• Do people recognize the
pattern?
• Can people reach their
goals?
• Which patterns work
better?

58. Learning from patterns
• Organize your knowledge about interfaces
• Individual learning and collective are always
ahead of pattern libraries
• Patterns are changing and requires constant
learning

59. Exercise 1
• Generate a startup
based on a random
combination of three
pattern decks:
Philographics, Values
deck and 55 Business
Models
• Your startup should
have a website that
enable the business

60. Exercise 2
• Get 3 random cards
from the Persuasive
Pattern deck
• Devise a strategy to use
these patterns in the
website
• Choose a maximum of 8
cards from the
UIPatterns deck

61. Exercise 3
• Sketch the
implementation of each
UIPattern card in a post-
it
• Compose the website
interface with the post-
its
• Move things around and
consider alternatives

62. Thank you!
Frederick van Amstel @fredvanamstel
Architecture and Design School - PUCPR
www.fredvanamstel.com