Patterns Revisited

Slide 1: Patterns Revisited Connecting 07 San Francisco, CA, USA October 19, 2007 Barbara Ballard David Malouf

Slide 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 2

Slide 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 3

Slide 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 4

Slide 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/ 5

Slide 6: Examples – Squares 6

Slide 7: Examples – Entries 7

Slide 8: Evolution of Patterns Software Engineers • 1995 • Focus on Re-use 8

Slide 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/ 9

Slide 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 10

Slide 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?) 11

Slide 12: Let’s look at some examples

Slide 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 13

Slide 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 14

Slide 15: Example: Signposting 15

Slide 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 • 16

Slide 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 • 17

Slide 18: A new type of pattern

Slide 19: Context patterns Environmental elements • • Location • Temperature • Surrounding elements • People/relationships • Types of activities • Description of user focus • Stationary • Transient • Time • Duration • Period • Concurrency 19

Slide 20: Contextual Pattern - clinical • Shared attributes • Used on patient • Sterile • Mission critical 20

Slide 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 21

Slide 22: A pattern case study

Slide 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 23

Slide 24: Pattern: carousels used for media and navigation 24

Slide 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 25

Slide 26: Implemented Pattern 26

Slide 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 27

Slide 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 28

Slide 29: Thank you Questions & Answers Barbara Ballard – barbara@littlespringsdesign.com http://littlespringsdesign.com/ David Malouf – dave@synapticburn.com http://synapticburn.com/ 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 Interaction08 McCullough (and many more) 29