• Save
Patterns Revisited
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Patterns Revisited

  • 6,091 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
6,091
On Slideshare
5,917
From Embeds
174
Number of Embeds
6

Actions

Shares
Downloads
0
Comments
0
Likes
24

Embeds 174

http://www.campusvirtual.urjc.es 125
http://synapticburn.com 43
http://www.synapticburn.com 3
http://192.168.10.100 1
http://blendedschools.blackboard.com 1
http://www.linkedin.com 1

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)