Design for spatial input

Design for spatial input

This video provides several key tips on great interactions for eyes and hands.

Eyes 2:22

• Every element in UI reacts to your eyes.
  • Comfortable
    • Most eye comfort to look in the center.
      • Minimize neck and body movement
      • Sides for controls that don’t use often
    • Eyes focus on one depth at a time, swapping depth cause eye strain
      • Keep interactive content at the same depth
        • Eyes don’t have to adapt to new distance
  • Easy to use
    • Shape guide out attention to the middle of shapes
      • Use rounded shapes not sharp, because we look to the edge of sharp object
      • Center the gylphs of the rounded shapes
    • Size of elements
      • 60pts by 60pts spacing between elements
        • combining size and spacing
    • Scale your elements
      • Use dynamic scale: smaller closer and larger further, so your eyes can control
      • fixed scale: same size closer and further
    • Keep UI oriented to the viewer
      • Principles of spatial design
  • Responsive
    • Hover Effect highlights controls
      • Use hover effects to provide feedback
  • Intentional
    • Looking at something for a long time
      • Tooltips reveal
      • Toolbars reveal
      • Microphone reveal speak to search

12:21 Hands

• Connect UI feedback to gestures
  • Use familiar patterns
    • 
  • Custom Gestures
    • Easy to explain and perform
    • Avoid gesture conficts
    • Comfortable and reliable
    • Accessible to everyone
    • Unambigious
• Eyes and Intent
  • Eye direction for large movements
  • Hands for smaller movements
• Direct Touch - watch out for fatigue
  • Inspection and manipulation
    • 3D models
  • Familiar mechanics
    • Scroll page on safari
    • Type on keyboard
    • DJ Disc
  • Physical Activity
    • Fruit Ninja
  • Provide extensive feedback for direct touch to missing tactile feelings
    • Buttons depth and highlighted
    • Sound effect