Interface composition with interaction design patterns
1 like619 views
The document discusses interaction design patterns, which are recurrent structures that afford specific interactions. Patterns help users transfer knowledge between applications, make interfaces predictable, and enable communication in design teams. The author advocates a pattern-based design process that involves identifying patterns, selecting patterns, articulating patterns into a coherent whole, testing patterns with users, and continually learning from patterns. Exercises are provided to generate a startup concept using pattern cards and design a website interface composed of interaction design patterns.
Interface composition with interaction design patterns
- 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).
- 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).
- 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