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

Patterns Revisited

on

  • 5,983 views

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)

Statistics

Views

Total Views
5,983
Views on SlideShare
5,831
Embed Views
152

Actions

Likes
24
Downloads
0
Comments
0

6 Embeds 152

http://www.campusvirtual.urjc.es 103
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

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Patterns Revisited Patterns Revisited Presentation Transcript

  • Patterns Revisited Connecting 07 San Francisco, CA, USA October 19, 2007 Barbara Ballard David Malouf
  • 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
  • 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
  • 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
  • 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/
  • Examples – Squares
  • Examples – Entries
  • Evolution of Patterns
    • Software Engineers
    • 1995
    • Focus on Re-use
  • 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/
  • 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
  • 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?)
  • Let’s look at some examples
  • 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
  • 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
  • Example: Signposting
  • 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
  • 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
  • A new type of pattern
  • Context patterns
    • Environmental elements
      • Location
      • Temperature
      • Surrounding elements
      • People/relationships
    • Types of activities
    • Description of user focus
      • Stationary
      • Transient
    • Time
      • Duration
      • Period
      • Concurrency
  • Contextual Pattern - clinical
    • Shared attributes
      • Used on patient
      • Sterile
      • Mission critical
  • 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
  • A pattern case study
  • 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
  • Pattern: carousels used for media and navigation
  • 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
  • Implemented Pattern
  • 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
  • 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
  • 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)