HTML5 and Human Interaction

581 views
493 views

Published on

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

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
581
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×