html5 and human interaction

Martin Beeby - @thebeebs

Human sensors are incredible

Computer sensors are dumb

Make dumb look magic

Provide Keyboard Navigation

Audio Apps. Prev/Next Track

http://bit.ly/mousetrapJs

Canvas Conf

Canvas Conf

<input type=number>

<input type=search>

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;

}

One in 30 taps will miss the

target

1 in 100 1 in 200

0.00%

5.00%

10.00%

15.00%

20.00%

25.00%

30.00%

3mm 5mm 7mm 9mm 11mm 13mm

2mm padding (10 pixel) between targets

7x7mm = 40 pixels

5x5mm = 30 pixels

9x9mm = 50 pixels

2mm padding (10 pixels) between targets

2mm padding (10 pixels) between targets

@thebeebs

http://www.ubelly.com

martin.beeby@microsoft.com