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

1. Martin Beeby - @thebeebs

6. Human sensors are incredible
Computer sensors are dumb
Make dumb look magic

9. Provide Keyboard Navigation
Audio Apps. Prev/Next Track
http://bit.ly/mousetrapJs

10. Canvas Conf
<input type=search>
Canvas Conf
<input type=number>

16. 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;
}

19. 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

20. 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

35. @thebeebs
http://www.ubelly.com
martin.beeby@microsoft.com