Patterns Revisited

  • 4,104 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,104
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
0
Comments
0
Likes
24

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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/
  • 6. Examples – Squares
  • 7. Examples – Entries
  • 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
  • 15. Example: Signposting
  • 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
  • 26. Implemented Pattern
  • 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)