Patterns Revisited

5,236 views
4,775 views

Published on

This is a presentation I gave w/ Barbara Ballard at Connecting 07 in SF (Oct 08)

0 Comments
24 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,236
On SlideShare
0
From Embeds
0
Number of Embeds
392
Actions
Shares
0
Downloads
0
Comments
0
Likes
24
Embeds 0
No embeds

No notes for slide

Patterns Revisited

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

×