• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Patterns Revisited
 

Patterns Revisited

on

  • 5,909 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,909
Views on SlideShare
5,757
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)