Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 and Human Interaction

681 views

Published on

My Talk at Canvas Conf 2013 : http://storify.com/thebeebs/canvas-conference-html5-and-human-interaction

Published in: Technology, Business
  • Be the first to comment

HTML5 and Human Interaction

  1. 1. Martin Beeby - @thebeebs
  2. 2. Human sensors are incredible Computer sensors are dumb Make dumb look magic
  3. 3. Provide Keyboard Navigation Audio Apps. Prev/Next Track http://bit.ly/mousetrapJs
  4. 4. Canvas Conf <input type=search> Canvas Conf <input type=number>
  5. 5. CSS3 animations @keyframes upKeys { from { transform:scale(0.95, 0.95) } to { transform:scale(1, 1) } } @keyframes downKeys { from { transform:scale(1, 1) } to { transform:scale(0.95, 0.95) } } .up { animation: upKeys 167ms cubic-bezier(0.1, 0.9, 0.2, 1); animation-fill-mode: forwards; } .down { animation: downKeys 167ms cubic-bezier(0.1, 0.9, 0.2, 1); animation-fill-mode: forwards; }
  6. 6. 30.00% 25.00% 20.00% One in 30 taps will miss the target 15.00% 10.00% 1 in 100 5.00% 1 in 200 7mm 9mm 0.00% 3mm 5mm 11mm 13mm
  7. 7. 7x7mm = 40 pixels 2mm padding (10 pixel) between targets 9x9mm = 50 pixels 2mm padding (10 pixels) between targets 5x5mm = 30 pixels 2mm padding (10 pixels) between targets
  8. 8. @thebeebs http://www.ubelly.com martin.beeby@microsoft.com

×