Transcripción
Extracto de la transcripción automática del vídeo realizada por YouTube.
thanks Divya so I'm Jacob Rossi I'm program manager for internet explorer and I want to talk to you today about developing sites that work well for touch pen or mouse users using this new feature you've heard a few times today called pointer events
it's an emerging spec being developed by the w3c and it's available in 9010 and i also want to spend a little bit of time talking about some guidelines that you can incorporate into your site to make sure that it's compatible across these various
new devices so first i want to show you how pointer events lets you connect the richness of html5 with the new capabilities of devices so here's a very basic demo that we built that uses html5 canvas and pointer events to let you do things like manipulate
these thoughts using box2d I can do multi touch and I can also bring in a pen stylus and it works just the same and it works with my mouse as well so this is a very basic example but I wanted to show you also a really cool demo that was bill called contre
jour so this is a game that you might be familiar with from other platforms it was designed with touch in mind and we approached them to port it over to html5 and it was very successful and it's a really cool creative experience through html5 canvas and
pointer events so so you can terraform here with the ground to move the game piece towards the end here the level i'm not very good low one but then there's some really cool places where you can incorporate rich gestures like dragging this and the
physics of this are really fun it's engaging it's a lot more immersive and the cool thing is is that i can switch over and start using any other device that I might find myself wanting to play this really addicting game which is great because then
I can play with my tablet on the bus I can use my desktop when my boss isn't lookin or I can use my phone if I want to as well so before we get into pointer events I want to walk through these guidelines about making sure your site is compatible with these
different devices and particularly touch has some unique constraints and things that you want to consider in order to make sure that your site works well for touch users so a very basic one is simply providing ample room for your finger so as I started working
on touch on the internet I used a lot of different devices that are touch-enabled I browsed a lot of the web and you know you have a few taps that don't work and you start to get sort of self-conscious do I have abnormally fat fingers and and so because
I started to get really worried we went and collected a bunch of data and it turns out no you don't even a baby's finger can have a height on the screen that's taller than the average line height of a link in a web page so not surprisingly as the
size of UI element increases the number of Miss taps decreases and what's interesting is that it's a sort of asymptotic so as you approach a certain level you you have a pretty high level of confidence and what we find is that if you have a target
size around the an average index finger which is about 11 millimeters or 40 pixels at a scale of one that confidence is pretty high taps work really successfully you might look at this graph and you say yeah but down around five or seven millimeters you've
got one and 100 taps or are missed that's not too bad the other interesting data point is that as target size decreases the amount of time that a user spends trying to tap it increases so they're not as as comfortable they're not as confident in
being able to activate the UI so they're going to spend more time which means they're going to be less engaged and potentially they're just going to move on it's a little bit subconscious but there's a lot of data to back this so using
an appropriately sized target can go a long ways and 40 pixels is not too large that it takes up a lot of extra screen real estate for mouse users so a minimum width and height dimension of 40 pixels will go a long way for touch users so another key one that
you've heard a few times is avoiding hiding content behind hover so most touch devices today can't recognize your finger hovering above the screen so when you have a UI element like this drop-down menu it's it's typically pretty hard to get
into into a menu and as it turns out we've seen this pattern all over the web but as it turns out it's not that great for Mouse either if you take a look at this menu here and you if you're pointing out a top level menu item and you identify in
the submenu the item you want to get to the most natural and efficient way for you to go is to go directly straight there but as we all know in this you expired I'm that doesn't work you have to go through this awkward path going to the right and then
[ ... ]
Nota: se han omitido las otras 2.330 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.