TX Dev Fest U Can Touch This notes

ucantouchthis.txt

U Can Touch This
  @atxryan, Web/UX developer
  Why does touch matter?
    Proliferation of touch devices
  What's your strategy for touch?
    Ignore it
      Legitimate strategy as long as it's deliberate
    Retrofit it
      Not recommended
      So many things come into play that you want to design for touch first, get free affordances for mouse
    Design for touch first
  Touch is touching
    Hover sucks, don't use it
    Often not that good with mouse
      Fitz's (sp?) law
  We all have fat fingers
    Average index finger is 11 mm wide, basketball players are ~20 mm
    With 5mm buttons, 1 in 30 taps will miss the target
      7mm 1 in 100
      9mm 1 in 200
  Don't forget about ergonomics
    Heat maps for devices, orientations
    Can't make assumptions about device interfaces and contexts anymore
  Reading areas at top, interaction areas at bottom
    Windows 8 recommends command area at bottom
  Consider the fact that most people are right-handed
    Don't want users reaching across screen
    May start seeing more and more controls/buttons on right
  Design for touch first
    Provide instant visual feedback on touch down, commit on touch up
    Direct manipulation: let things always directly follow your fingers
      Frustrating to use old conventions when good touch ones exist
    Actions should be reversible
      Safe exploring
    Don't mentally map tap to click
      Swipe, drag
        Multi-select swipe?  Drag to reorder
    Only pan on one axis
  Provide breathing room in layouts
    Touch-enabled mode in gmail
    Microsoft apps have mouse mode and touch mode
  Most of us have 10 fingers
    May have multiple input points
    May have multiple people interacting with the application
  We do still have a mouse, though
  And a stylus
  How do I handle all these inputs?
    Event model
      pointerdown
      pointerup
      pointermove
      pointerover
      pointerout
      pointercancel
      Currently going though W3C process
      Additional properties
        Width
        Height
        Pressure (pen)
        Tilt (pen)
          Inking/drawing
        rotation
        pointerType
        pointerId
          Uniquely identifies pointer involved in event
        Event type
  Touch first, but not exclusively
    Don't shut down click events if touch events available
  //Events available
  if(('ontouchstart' in window) || (navigator.pointerenabled) || (navigator.msPointerEnabled))
  //Touch device?
  if(('ontouchstart' in window) || (navigator.msPointerMax) || something else moved
  Pointer event model enabled in IE 10, IE 11, newer builds of Chromium
    Polyfills are available
      http://handjs.codeplex.com
        Demo: http://www.catuhe.com/msdn/handjs/index.html
      https://github.com/Polymer/PointerEvents
      https://gitub.com/borismus/pointer.js
      https://github.com/Rich-Harris/Points
      Don't have CSS touch-action
  Will need to use bucket to track multiple simultaneous pointers
  Joystick demo: http://david.blob.core.windows.net/html5/touchjoystick/TouchControl.html