Cover image for Designing Gestural Interfaces

Book description

If you want to get ahead in this new era of interaction design, this is the reference you need. Nintendo's Wii and Apple's iPhone and iPod Touch have made gestural interfaces popular, but until now there's been no complete source of information about the technology. Designing Gestural Interfaces provides you with essential information about kinesiology, sensors, ergonomics, physical computing, touchscreen technology, and new interface patterns -- all you need to know to augment your existing skills in "traditional" web design, software, or product development. Packed with informative illustrations and photos, this book helps you:

  • Get an overview of technologies surrounding touchscreens and interactive environments

  • Learn the process of designing gestural interfaces, from documentation to prototyping to

  • communicating to the audience what the product does

  • Examine current patterns and trends in touchscreen and gestural design

  • Learn about the techniques used by practicing designers and developers today

  • See how other designers have solved interface challenges in the past

  • Look at future trends in this rapidly evolving field

Only six years ago, the gestural interfaces introduced in the film Minority Report were science fiction. Now, because of technological, social, and market forces, we see similar interfaces deployed everywhere. Designing Gestural Interfaces will help you enter this new world of possibilities.

Table of Contents

  1. Designing Gestural Interfaces
  2. Dedication
  3. Preface
    1. WHO SHOULD READ THIS BOOK
    2. HOW TO USE THIS BOOK
    3. HOW TO CONTACT US
    4. SAFARI® BOOKS ONLINE
    5. ACKNOWLEDGMENTS
  4. 1. Introducing Interactive Gestures
    1. TAP IS THE NEW CLICK
    2. DIRECT VERSUS INDIRECT MANIPULATION
    3. A BRIEF HISTORY OF GESTURAL INTERFACES
    4. THE MECHANICS OF TOUCHSCREENS AND GESTURAL CONTROLLERS
    5. DESIGNING INTERACTIVE GESTURES: THE BASICS
      1. THE CHARACTERISTICS OF GOOD GESTURAL INTERFACES
      2. THE ATTRIBUTES OF GESTURES
      3. INTERFACE CONVENTIONS
        1. STATES AND MODES
    6. DETERMINING THE APPROPRIATE GESTURE
      1. USING PEOPLE TO DETERMINE THE APPROPRIATE GESTURE
      2. MATCHING THE GESTURE TO THE BEHAVIOR
    7. FOR FURTHER READING
  5. 2. Designing for the Human Body
    1. BASIC KINESIOLOGY
      1. MUSCLES
      2. JOINTS
      3. MOTIONS
    2. THE ERGONOMICS OF INTERACTIVE GESTURES
      1. HUMAN FACTORS
    3. THE ERGONOMICS OF MOTION
      1. FINGERS AND HANDS
      2. SCREEN COVERAGE
    4. DESIGNING TOUCH TARGETS
      1. ACCESSIBILITY
    5. FOR FURTHER READING
  6. 3. Patterns for Touchscreens and Interactive Surfaces
    1. HOW TO USE PATTERNS
    2. TAP TO OPEN/ACTIVATE
      1. WHAT
      2. USE WHEN
      3. WHY
      4. HOW
      5. EXAMPLES
    3. TAP TO SELECT
      1. WHAT
      2. USE WHEN
      3. WHY
      4. HOW
      5. EXAMPLES
    4. DRAG TO MOVE OBJECT
      1. WHAT
      2. USE WHEN
      3. WHY
      4. HOW
      5. EXAMPLES
    5. SLIDE TO SCROLL
      1. WHAT
      2. USE WHEN
      3. WHY
      4. HOW
      5. EXAMPLES
    6. SPIN TO SCROLL
      1. WHAT
      2. USE WHEN
      3. WHY
      4. HOW
      5. EXAMPLES
    7. SLIDE AND HOLD FOR CONTINUOUS SCROLL
      1. WHAT
      2. USE WHEN
      3. WHY
      4. HOW
      5. EXAMPLES
    8. FLICK TO NUDGE
      1. WHAT
      2. USE WHEN
      3. WHY
      4. HOW
      5. EXAMPLES
    9. FLING TO SCROLL
      1. WHAT
      2. USE WHEN
      3. WHY
      4. HOW
      5. EXAMPLES
    10. TAP TO STOP
      1. WHAT
      2. USE WHEN
      3. WHY
      4. HOW
      5. EXAMPLES
    11. PINCH TO SHRINK AND SPREAD TO ENLARGE
      1. WHAT
      2. USE WHEN
      3. WHY
      4. HOW
      5. EXAMPLES
    12. TWO FINGERS TO SCROLL
      1. WHAT
      2. USE WHEN
      3. WHY
      4. HOW
      5. EXAMPLES
    13. GHOST FINGERS
      1. WHAT
      2. USE WHEN
      3. WHY
      4. HOW
      5. EXAMPLES
  7. 4. Patterns for Free-Form Interactive Gestures
    1. PROXIMITY ACTIVATES/DEACTIVATES
      1. WHAT
      2. USE WHEN
      3. WHY
      4. HOW
      5. EXAMPLES
    2. MOVE BODY TO ACTIVATE
      1. WHAT
      2. USE WHEN
      3. WHY
      4. HOW
      5. EXAMPLES
    3. POINT TO SELECT/ACTIVATE
      1. WHAT
      2. USE WHEN
      3. WHY
      4. HOW
      5. EXAMPLES
    4. WAVE TO ACTIVATE
      1. WHAT
      2. USE WHEN
      3. WHY
      4. HOW
      5. EXAMPLES
    5. PLACE HANDS INSIDE TO ACTIVATE
      1. WHAT
      2. USE WHEN
      3. WHY
      4. HOW
      5. EXAMPLES
    6. ROTATE TO CHANGE STATE
      1. WHAT
      2. USE WHEN
      3. WHY
      4. HOW
      5. EXAMPLES
    7. STEP TO ACTIVATE
      1. WHAT
      2. USE WHEN
      3. WHY
      4. HOW
      5. EXAMPLES
    8. SHAKE TO CHANGE
      1. WHAT
      2. USE WHEN
      3. WHY
      4. HOW
      5. EXAMPLES
    9. TILT TO MOVE
      1. WHAT
      2. USE WHEN
      3. WHY
      4. HOW
      5. EXAMPLES
  8. 5. Documenting Interactive Gestures
    1. WHY DOCUMENT ANYTHING?
    2. EXISTING MOVEMENT NOTATION SYSTEMS
      1. LABANOTATION
      2. BENESH MOVEMENT NOTATION
      3. ESHKOL WACHMAN MOVEMENT NOTATION
        1. HUMAN-COMPUTER INTERACTION
    3. DOCUMENTING GESTURES IN INTERACTIVE SYSTEMS
      1. SCENARIOS
      2. USE CASES
      3. TASK ANALYSIS AND FLOWS
      4. WIREFRAMES
        1. ANNOTATIONS
        2. KEYFRAMES
        3. ARCHITECTURAL ELEMENTS
      5. GESTURAL MODULES DOCUMENT
      6. STORYBOARDING
        1. SWIM LANES
      7. ANIMATIONS
      8. MOVIES
        1. INTEGRATING NONTRADITIONAL DOCUMENTATION
    4. FOR FURTHER READING
  9. 6. Prototyping Interactive Gestures
    1. FAKING IT: LOW-FIDELITY PROTOTYPES
      1. PAPER PROTOTYPES
      2. ROUGH MODELS: OBJECTS AND ENVIRONMENTS
      3. "THE MAN BEHIND THE CURTAIN"
    2. HIGH-FIDELITY PROTOTYPES
      1. THE THREE TYPES OF HIGH-FIDELITY PROTOTYPES
        1. EXACT PROTOTYPES
        2. OTS PROTOTYPES
        3. DIY PROTOTYPES
      2. MATCHING SENSORS TO ACTIONS
    3. TESTING PROTOTYPES
    4. PROTOTYPING RESOURCES
      1. TOUCHSCREEN RESOURCES
      2. PHYSICAL COMPUTING RESOURCES
    5. FOR FURTHER READING
  10. 7. Communicating Interactive Gestures
    1. THREE ZONES OF ENGAGEMENT
      1. ATTRACTION AFFORDANCE, OR HOW I LEARNED TO STOP WORRYING AND LOVE THE GESTURE
    2. METHODS OF COMMUNICATING INTERACTIVE GESTURES
      1. WRITTEN INSTRUCTIONS
      2. ILLUSTRATION
      3. DEMONSTRATION
      4. USE OF SYMBOLS
        1. SIMILE AND METAPHOR
    3. FOR FURTHER READING
  11. 8. THE FUTURE OF INTERACTIVE GESTURES
    1. FUTURE TRENDS
      1. WIDESPREAD ADOPTION IN THE HOME AND OFFICE
        1. SUPPLANTING THE DESKTOP METAPHOR?
      2. SPECIALIZED APPLICATIONS AND PRODUCTS
        1. NEW INPUT DEVICES
      3. CONVERGENCE WITH OTHER TECHNOLOGIES
        1. VOICE RECOGNITION
        2. VIRTUAL REALITY
        3. UBIQUITOUS COMPUTING
        4. RADIO FREQUENCY IDENTIFICATION AND NEAR FIELD COMMUNICATION
      4. GESTURING WITH SMART OBJECTS
      5. OPTIMIZED FOR TOUCH
      6. BETTER TOOLS FOR CREATION
      7. ROBOTS AND COBOTS
      8. GESTURES AS A DESIGN TOOL
    2. TOWARD STANDARDS
      1. PATENTS
    3. THE ETHICS OF GESTURES
    4. FOR FURTHER READING
  12. A. A Palette of Human Gestures and Movements
    1. GESTURES FOR TOUCHSCREENS
      1. TAP
        1. TAP
        2. DRAG/Slide
        3. FLICK ("FLING")
        4. NUDGE
        5. PINCH
        6. SPREAD
        7. HOLD
    2. GESTURES FOR FREE-FORM SYSTEMS
      1. HEAD
        1. HEAD COCKED
          1. Possible uses.
        2. TILT UP/DOWN
          1. Possible uses.
        3. TURN LEFT/RIGHT
          1. Possible uses.
        4. NOD YES
          1. Possible uses.
        5. SHAKE NO
          1. Possible uses.
      2. TORSO
        1. STANDING
          1. Possible uses.
        2. SITTING
          1. Possible uses.
        3. LAYING DOWN
          1. Possible uses.
        4. RECLINING
          1. Possible use.
        5. TWIST LEFT/RIGHT
          1. Possible uses.
        6. LEAN LEFT/RIGHT
          1. Possible uses.
        7. BOW
          1. Possible uses.
        8. HANDS ON HIPS
          1. Possible uses.
        9. ON ALL FOURS
          1. Possible uses.
        10. LEGS
        11. LIFT STRAIGHT
          1. Possible uses.
        12. KNEE COCKED
          1. Possible use.
        13. KNEELING
          1. Possible use.
        14. ON ONE KNEE
          1. Possible use.
        15. ON ONE LEG
          1. Possible uses.
        16. JUMP/HOP
          1. Possible uses.
        17. CROUCH
          1. Possible use.
        18. LUNGE
          1. Possible uses.
        19. LIFT TO SIDE
          1. Possible uses.
        20. LEG ANGLED OUT
          1. Possible uses.
        21. LEGS/ANKLES CROSSED
          1. Possible use.
        22. FEET
        23. FLAT FOOT/STOMP
          1. Possible uses.
        24. ANGLED UP
          1. Possible use.
        25. TIPTOE/TOE TAP
          1. Possible uses.
        26. HEEL TO TOE OR BALL/TOE OR BALL TO HEEL
          1. Possible uses.
        27. TURNED IN/OUT
          1. Possible uses.
      3. ARMS
        1. ARM(S) DOWN
          1. Possible uses.
        2. ARM(S) UP
          1. Possible uses.
        3. ARMS FOLDED
          1. Possible use.
        4. ARM(S) IN FRONT
          1. Possible uses.
        5. SHRUG
          1. Possible uses.
        6. ARM(S) OUT TO THE SIDE
          1. Possible uses.
        7. UPPER ARM DOWN, FOREARM OUT/UP
          1. Possible uses.
        8. FOREARM SIDE
          1. Possible uses.
        9. "THE WAVE"
          1. Possible use.
      4. FACE
        1. SMILE
          1. Possible use.
        2. FROWN
          1. Possible uses.
        3. STARE
          1. Possible uses.
        4. STICKING OUT TONGUE
          1. Possible uses.
        5. WINK
          1. Possible use.
        6. RAISED EYEBROW(S)
          1. Possible uses.
        7. EYES LEFT/RIGHT AND UP/DOWN
          1. Possible uses.
        8. SQUINT
          1. Possible uses.
        9. SPIT
          1. Possible use.
        10. YAWN
          1. Possible uses.
        11. ROLLING EYES
          1. Possible uses.
        12. NOSE WRINKLE
          1. Possible use.
      5. HANDS
        1. POINT
          1. Possible uses.
        2. WAVE
          1. Possible uses.
        3. CLAP/APPLAUSE
          1. Possible uses.
        4. OKAY
          1. Possible uses.
        5. THUMBS UP/DOWN
          1. Possible uses.
        6. SNAP
          1. Possible uses.
        7. FIST
          1. Possible uses.
        8. SHH
          1. Possible uses.
        9. COME HERE
          1. Possible use.
        10. SHOO
          1. Possible uses.
        11. PUSH
          1. Possible uses.
        12. PULL
          1. Possible use.
        13. FINGERS CROSSED
          1. Possible uses.
        14. STOP
          1. Possible uses.
        15. SLAP
          1. Possible uses.
        16. PALM UP/DOWN
          1. Possible uses.
        17. PINCH
          1. Possible uses.
        18. CUP PALM
          1. Possible uses.
        19. BLOWN KISS
          1. Possible uses.
        20. TIP OF THE HAT
          1. Possible use.
        21. SALUTE
          1. Possible use.
        22. FINGER WAG
          1. Possible uses.
        23. THUMBING NOSE
          1. Possible use.
        24. BEARD STROKE
          1. Possible uses.
        25. FINGER DRUM
          1. Possible uses.
        26. KARATE CHOP
          1. Possible uses.
        27. PUNCH
          1. Possible uses.
        28. PRAY
          1. Possible uses.
        29. "THIS TALL"
          1. Possible uses.
        30. HAND RUB
          1. Possible use.
        31. MONEY RUB
          1. Possible use.
        32. NOSE TAP
          1. Possible uses.
        33. #1
          1. Possible uses.
        34. HEAD SCRATCH
          1. Possible use.
        35. SHOCKING
          1. Possible use.
        36. SPYGLASSES
          1. Possible uses.
        37. BLAH, BLAH, BLAH
          1. Possible use.
        38. CALL ME
          1. Possible uses.
        39. CHECK, PLEASE
          1. Possible uses.
        40. HEAR/SEE/SPEAK NO EVIL
          1. Possible uses.
        41. HOT
          1. Possible uses.
        42. SAY WHAT?
          1. Possible uses.
        43. STIR
          1. Possible uses.
        44. SQUEEZE
          1. Possible use.
        45. FLICK
          1. Possible use.
        46. FINGERS SPLAYED
          1. Possible uses.
        47. CROOK FINGER
          1. Possible uses.
        48. FINGERTIPS TOUCHING
          1. Possible uses.
        49. HANDS FOLDED
          1. Possible uses.
        50. DOORKNOB TURN
          1. Possible uses.
        51. HOLE IN HAND
          1. Possible uses.
        52. HANDGUN
          1. Possible uses.
    3. FOR FURTHER READING
  13. Index
  14. About the Author
  15. Colophon
  16. Copyright