Patterns Revisited
26 likes5,844 views
The document summarizes a talk given by Barbara Ballard and David Malouf on patterns in interaction design. They define patterns as implicit solutions to recurring problems that can be combined into a pattern language. The talk discusses the evolution of patterns from Christopher Alexander's work in architecture to current uses in software engineering and user experience design. Examples of software, hardware, and context patterns are provided to illustrate different types of patterns.
![Thank you Questions & Answers Barbara Ballard – [email_address] http://littlespringsdesign.com/ David Malouf – [email_address] http://synapticburn.com/ Interaction08 Join the international interaction design Community of IxDA at our inaugural conference. Savannah College of Art & Design (SCAD) Alan Cooper, Bill Buxton, Sigi Moeslinger, and Malcolm McCullough (and many more)](https://image.slidesharecdn.com/patterns-revisited-1193086890770582-3/85/Patterns-Revisited-29-320.jpg)
Patterns Revisited
- 1. Patterns Revisited Connecting 07 San Francisco, CA, USA October 19, 2007 Barbara Ballard David Malouf
- 2. Who are we? Barbara Ballard Little Springs Design Designing the Mobile User Experience (Wiley 2007) Mobile User Experience Consultant David Malouf Motorola Enterprise Mobility VP/Founder Interaction Design Association (IxDA) Interaction Designer
- 3. The talk Defining patterns Where they come from What they are What they aren’t Examples of patterns Software patterns Hardware patterns Context patterns Case Study
- 4. Patterns through time Christopher Alexander Canonical Solutions If-then proposition String patterns together to create a pattern language Software Engineers use it for “re-use” UX Designers use it for “best practices” Standards, guidelines, styles, patterns Not the same thing
- 5. The beginning Christopher Alexander Patterns organize implicit knowledge about how people solve recurring problems when they go about building things. Language When you build something you can put patterns together to form a language. Changing the world http://patternlanguage.com/
- 8. Evolution of Patterns Software Engineers 1995 Focus on Re-use
- 9. Evolution of Patterns User Interface Design Collection of best practices Other sources: Mobile Pattern Library http://patterns.littlespringsdesign.com/ Yahoo Pattern Library http://developer.yahoo.com/ypatterns/ Interaction Design Patterns http://www.welie.com/patterns/
- 10. What aren’t patterns … Standards Design constraints for interfacing between separately built components Kitchens Electrical Requirements What you have to do. Sometimes these are standards; often not. They are also sometimes called “design constraints” Logo police Guidelines Suggestions to maintain relationships between separately built components Style Guide Heuristics Individual judgment used to justify decisions
- 11. How we want to use it Suggestions Reflections Points of reference Collaborative communication Used to maintain “the box” or move out from it. To be useful patterns have to explain “why?” (and why not?)
- 12. Let’s look at some examples
- 13. Software Examples Sports Scores score on left for easy scanning home team second victorious team bold (if available) ranking after team name to avoid confusion with score
- 14. Software Examples Game Flow splash screen, main menu easy pause design focus on play of the game, not details Link different color (esp. blue) underlined http://www.alink.com
- 16. Hardware patterns – Input types Keypads QWERTY/AZERTY Double-type 5-way/D-pad Shifting Phone number vs. calculator number Pointing devices Mouse Pen/Tablet Finger/Touch screen Click Wheel Touch pad Scroll wheel Buttons, knobs, switches, slider Soft keys
- 17. Hardware patterns - Layouts Display over input Laptop handhelds Control left of display Car audio Steering wheel layout Wheel with horn Left side Turn signal Headlights Right side Wipers Watch layouts Analog Pin to the right of face, in line with data Digital Face surrounded by 4 buttons Sometimes 2 buttons under face
- 18. A new type of pattern
- 19. Context patterns Environmental elements Location Temperature Surrounding elements People/relationships Types of activities Description of user focus Stationary Transient Time Duration Period Concurrency
- 20. Contextual Pattern - clinical Shared attributes Used on patient Sterile Mission critical
- 21. Context Pattern – Fixed > portable Device has 2 modal states of use Primarily fixed into a single location for stationary focused use Secondary portable use for short term, usually with transient focus Fixed state can also be mobile Mounted on a vehicle
- 22. A pattern case study
- 23. Story of a Pattern Client had great content but uninspiring application Informational No engagement Not scalable Entertainment and commerce application Fun Purchase opportunities “ Take it to the next level” Standard list-based design not great Explored alternate concepts
- 24. Pattern: carousels used for media and navigation
- 25. Constraints: Need to Modify Pattern Low processor & memory no image transformations only two image sizes Pre-loaded on handset any screen size (down to 128 x 128) naïve users doesn't violate device conventions Transitory content purchase or delete Primary use of application
- 27. Benefits of Using Pattern Intuitive use of pattern Pattern not from “library” Had to fully explore pattern implications Facilitated competitive search Coverflow wouldn't work Discovered problems with small carousels Accelerated design process Examples of what worked elsewhere Provided structure within which to explore Enabled comparison against alternate solutions at a meta level
- 28. More Benefits Documentation & Collection Make sure that those who come after you understand the sources, inspirations, and reasons for your design Give future designers working on related projects the ability to create a stronger relationship with your work Build consistency within your products Create a language that can be tied to brand communication
- 29. Thank you Questions & Answers Barbara Ballard – [email_address] http://littlespringsdesign.com/ David Malouf – [email_address] http://synapticburn.com/ Interaction08 Join the international interaction design Community of IxDA at our inaugural conference. Savannah College of Art & Design (SCAD) Alan Cooper, Bill Buxton, Sigi Moeslinger, and Malcolm McCullough (and many more)