DrupalCon Prague 2013

Diseñando interfaces táctiles

Josh Holmes  · 


Extracto de la transcripción automática del vídeo realizada por YouTube.

alright so good evening I think we're past the good afternoon thing and on to the good evening thing this is not Church you don't have to sit all the way in the back there are a few seats up front I promise I don't bikes much alright so here josh

holmes i am a program manager on the Internet Explorer team here talk to him out to touch and touch developments and the majority of what I'm talking about today will apply to any browser there's a handful of things that I'll talk about that our

IE specific but hopefully you've been able been keeping an eye on some of the things that Internet Explorer has been doing so touching the eye dr you predict provocative title i I dare you to start thinking about touch in your development and in your applications

so why does touch matter this is why touch matters touch matters because there are there's just been an explosion of touch devices out there on the market ranging from obviously every phone that's out there I mean who has who in the room has a phone

with a hard keyboard for okay five of you maybe I'm sorry we'll catch up eventually anyway I'm teasing you I'm teasing you um I I always loved my heart keyboards on the on phones but i prefer screen real estate i prefer the responsiveness of

that but then you know you also start talking about all the tablets who in the room has a tablet what's wrong with the rest of you so the thing is is that we have a lot of different types of tablets out there obviously there are iPads or android tablets

there are windows tablets there's funky hybrids like this this is the surface pro if you want come by the office come by the booth tomorrow and i'll let you play with it have a demo and it's you know got a keyboard and it's got a little kickstand

and you know it's kind of somewhere between a tablet and a laptop it's my work machine as well as my play machine there's some good and some bad with that just being honest but you should come please come by and play with it have a look there's

a lot of convertibles like this thing here fourthly I would just shout from over there but it's actually being recorded I think I don't know so coming back to the microphone to make sure that it's recorded it was that's a little novo tablets

interesting design it's got a hard keyboard it's got an extra battery in the keyboard and you know but the the screen just snaps off and then you've got a tablet tablet and you can carry that around sit on the couch whatever you want to do they're

great on airplanes but when you want you snap it back in and now you've got extra battery you've got there's other devices and accessories on the keyboard like an extra USB or an extra or an SD reader or things like that you know so this is cool

stuff like that and then you have the all in ones and and the the big touch monitors my wife just got a new desktop and i got our a 23 inch dell monitor it's giant and anyways it's it's got five points to touch on it that's pretty awesome actually

for 300 bucks at best buy in the States I know you can get them out off of Amazon out of the out of the UK for about 220 pounds 230 pounds so these devices are getting much cheaper and accessible for you so touch matters because the world is going that direction

I mean in fact the the first time I did this talk I was at the Amelia Island Plantation and I get off the elevator on my way over to the talk and this thing is hanging there in the wall on the wall just opposite from the elevator and it's a touch interactive

screen for finding out more about the plantation itself they've got a full app that they've built that is all touch enabled for getting around the Amelia Island Plantation and so on and so forth so touch matters you have to design for touch these days

or at least think about it so what is your strat when it comes to dealing with touch touch there there's kind of three strategies ignore it completely that's legit strategy if you know what you're doing and you decide I want to just ignore touch

and I want to treat everything like a mouse that's okay you can do that you can get away with that for certain types of applications for certain types of websites the problem is numerous and I'll go into those here in a little bit the second thing

you can do is and this is where a lot of people are today is that they are you know they start looking at their analytics on their sites and they realize that you know twenty-two percent of their web traffic is well from an iphone and another fourteen percent

is from android and another two and a half percent is blackberry and another one percent is Windows Phone and another you know you start looking at this traffic and then you look at all the all the desktops with ie 10 and ie11 and a fair percentage of those

are going to be touch devices my favorite percentage I mean it's in kind of in the 50-50 range and so what what are you going to do or you can ignore them that that I mean that's half your traffic or more it's coming from touch devices okay you're

not looking at your analytics and finding out that kind of information then well you're in the wrong career to be honest you need to be looking at your analytics and you to understand who's your customer base so people are looking at their website

and they're retrofitting touch back in okay or what I prefer is designed for it from the beginning okay there's a lot of things that you should do when you're designing from the beginning with a touch or retrofitting first is hover sucks I mean

how many of you are using you know don't answer the question I don't want to embarrass you don't use hover menus okay there's a couple of things that are wrong with hover venues the first is that well you know they don't work in touch I

mean a lot of the browser's are making up for it at this point in time where you you actually you touch it and it'll drop down okay but there's no facility in touch devices so I'm not touching you I'm not touching you but I'm right

here I'm almost touching you it just doesn't exist okay and so the second big cognitive issue is that i'm going to take my mouse here and I'm hover over the menu and then the one I want is I want to touch the itch down there at the bottom so

I've hovered over it and then I go to as soon as I cross that barrier what happens to my hover poof it goes away damn it and so instead you have to teach your users hover cross over then down is that a natural movement no it is not okay and so just just

don't use hover okay instead you know use your click events use your mouse downs and so on and so forth and that'll that's a good starting point second is touch size buttons okay one of the things that is crazy is fingers are wider than mouse pointers

just say it right so how wide is a mouse pointer one pixel had a brave soul down here who said one pixel and and he's right okay what size shirt do you wear large so saw how that works yeah you know intelligent response good crowd participation free swag

now there's a limited number of t-shirts up here so get in early on this action alright also of putting up a tweet about you know you're watching this talk etc free swag not immediately come by the booth we'll figure out at least buy you a beer

so um you know but you look at the the size of a finger and finger is not a pixel okay in fact you look at the average basketball player and their fingers because they're they're they're Giants they're not normal people 19 millimeters that

is very very wide the average human being is closer to like 11 millimeters with their index finger okay so 11 millimeters is the width of your finger when you touch you've got a range of here to here and browsers you know that we do the best we can to

say okay where's the kind of the center what's the most intelligent thing that they could be doing right now are they clicking on this link over here this link over here button slammed up against each other are they doing there they push right in the

middle do it do i do the one at the top the one the bottom one of the left on the right I add a room we do the best we can you make the job a lot easier if you design touch size buttons so make sure that your buttons are at least 11 millimeters on an average

screen DPI and so on and so forth and so you know the you know that works out to you know seven millimeters is roughly 40 pixels okay so you kind of want to be north of 40 pixels and so that way when you and somebody's touching you've got at least

40 pixels wide on an average DPI type of a screen okay that makes sense and no no t-shirts for nodding okay just saying I right so these are thinking about the ergonomics of touch and you know how are people using their tablets and for those of you who have

tablets you've done this those of you who don't have tablets you could imagine this okay so first is there either sitting or there you know with one hand touching and moving or they have two hands on it and they're using their thumbs that's

actually very very common especially for a phone right and so on a phone there are often times down here like this get it with two fingers two thumbs going away or they're one-handed with one thumb going away right sometimes people actually sit it down

in their lap and they're using the the keyboard and they're they're tapping away at that okay these three kind of common scenarios all right so so we've done a lot of measurements very complicated measurements figuring out how wide and how

long somebody's fingers are and well I seca long and complicated method we painted people's fingers and then how to reach out on a board created this wonderful little collage here people with short fingers the the green area people with long fingers

[ ... ]

Nota: se han omitido las otras 4.918 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.