Pointing ForwardTim Park
@timpark
Microsoft
Some patterns stop working
Don’t
Use
It
Hover
Rethink target sizing
Rethink target positioning
Designing for touch
Interaction areas Reading areas
W3C Proposal: Pointer Events• http://www.w3.org/TR/pointerevents/• Joint Proposal with Mozilla• Goals• Unified model for multiple input types• Ability to identify different input types• Expose attributes to take advantage of input types
• Moved from First Public Working Draft to Candidate Recommendation in 5 months.
Pointer Events: An Evolutionmousedownmouseup
mousemovemouseovermouseoutmouseentermouseleave
pointerdownpointeruppointercancelpointermovepointeroverpointeroutpointerenterpointerleave
Pointer Events: Attributes
...beyond existing button, clientX, clientY in mouse events.
• width • height• pressure• tilt• pointerType• pointerId
Pointer Events expand the set of attributes available…
Attributes: width and heightPointing devices often have a real world physical contact size.
Attributes: pressure, tiltX, tiltYPressure and tilt enable rich, real world interactions.
Attributes: pointerType, pointerIdpointerType: Which type of pointing device.
pointerId: Which instance of a pointing device.
Demo: Pointer Events(Available at: http://github.com/timfpark/PointerPaint)
Pointer Events: Getting Started• IE10 has vendor prefixed support• IE11 has unprefixed support.• Chromium WebKit prototype at http://aka.ms/pointium
• Polyfills Available• Hand.js: http://handjs.codeplex.com• Points.js: http://github.com/Rich-Harris/Points
Thanks!Tim Park
@timpark
Microsoft
