>> luke wroblewski: i'm going to be talkingabout this idea of designing for touch. to do that i want to step back a second and lookat the different devices that people are using to interact with the internet. that is primarilyweb stuff but also increasingly lots and lots of different types of applications.this is generally with the spectrum of computers, what our personal computer looks like today,right? you have the smartphone things, you have these tablet-ish things, you have laptops,you got desktops. we all probably started out in this sort of area and increasinglymore and more of our time and our work is being spent on this side. when people tryto make sense of all these different devices one of the distinctions that they draw betweenthem is ... well, things over here, the smartphones
and tablets, these are touch-based devices,right? they have different ways of being designed and thought about and then everything overhere is sort of the traditional cursor in keyboard world. this mindset makes a goodamount of sense because if you look at what smartphones and tablets look like you've gotoperating systems like windows phone, touch-based. you've got things like android, here runningon the google nexus 7 tablet. also a touch based interface. you have ios from apple;also quite popular. here running on the ipad. so, these range of devices is all touch oriented.let's look a little further down the spectrum and actually see what else is going on. ifwe look at our friends, the laptop, this is the lenovo ideatab lynx. is this a tabletor a laptop? who votes tablet? who votes laptop?
who wouldn't buy one anyway? okay? how aboutthis one? the 12.5 inch thinkpad twist. is that a tablet or is it a laptop? who wouldn'tbuy one anyways? i'm teasing. okay, how about this one? the ideapad yoga. why do they callit the yoga? because it has this yoga moves. it's like ta-ta-ta-ta-ta. actually, i don'tknow if that's the noise you make when you do yoga. my brain goes there, right. you'redoing yoga. here's another one. this is the dell xps 12.this one is more like a transformer. that actually i do know is the noise that transformersmakes because i've seen the show like hundreds of times. it's unclear if this is actuallyan autobot or decepticon because it doesn't have little sticker on it so i don't know.sometimes you have the stickers that you rub.
have you guys ever had those transformers?you got to rub it to see if it's a decepticon or ... no? okay. yeah, going way back here.anyway, you have this emerging thing and intel recently made an announcement that all thenew chips that they are releasing, especially in the laptop area, you have to run touchon those machines. whether or not we think these machines are actually a great idea ornot basically ... probably in the next year, year and a half it's going to be very, very,very hard to buy a windows box that doesn't have a touch screen on it, in the laptop space.all of a sudden touch is making its way to laptops. you can say, okay, well ... by theway, google also announced their new chromebook series is now also touch based.you may say, okay, well ... that's fine. now
we really have to think about touch extendinginto ... you know, maybe this 15, 16-inch realm, right? at least the desktop is safe.at least we can still make mouse and cursor things for the biggest screens, right? whowould put touch on a 20-inch desktop machine? anybody do that? this is the sony tap 20.it looks like a desktop machine, right? acts like a tablet that you can draw on.you think, okay, 20-inch, this is sort of ... can you really make a tablet bigger than20 inches? would anybody do this? yeah. people at lenovo have made one for those who do.this is the lenovo ideacentre horizon. it is a 27-inch tablet. now, if you have oneof these things, i'll just let you know that it's got a pretty cool interface but rabbitsare very attracted to these things. what happens
is if you leave one unattended ... it's highlylikely that the little hopping creature will take it from you and then you may find theminteracting with it later. it's kind of cool. you can play some games, interact with itbut it doesn't stop there because this 27-inch tablet is also a telephone. so, mom's goingto pick it up. phone's ringing, let's grab that 27-inch tablet, chalk up some bills tothe chiropractor, set it down and hey, what's going on? hi guys.you'd think the fun ends there but no. after the phone call, you hit a button and it'sthe neighbors show up at the door button. then we're going to take the telephone, we'regoing to put it on the table and we're going to create our own little version of las vegas.we'll play the photo swap game and then instant
vegas. i think they're also going to playice hockey. there you go. if that doesn't seal the deal for you i don't know what.it's kind of fun to laugh at these things but kind of doesn't matter, right? becausethey're out there. computer manufacturers are making it. people are using it and it'ssomething we have to think about. i've been showing a lot of devices that arerunning the windows 8 interface and you may say, well, steve jobs would never put touchon the desktop, right? apple would never do this. well, again, it kind of doesn't matterbecause this is the leap motion device. this is the little ... it's roughly this big. youput it next to a laptop or a tablet ... laptop or desktop or anything with a screen reallyand what it does is it gives you gestural
control over your computer. you move yourhands in front of it, it sort of senses where the hands are or where your fingers are oryou can do things like draw or browse the web. using your fingers.i don't think it's a coincidence that they've taken this new york times page and blowingit up 3x for the purpose of this demo because your finger whether it's touching the screenor whether it's in the air it's just not as precise as a mouse cursor. right? the kindsof interfaces you would make for more of these gesture based in-air modes are actually morealigned with the kinds of interfaces you'd make for touch than you would make for a mouseand keyboard. why am i going through this sort of devicelandscape for a second? to illustrate touch
is pretty much running the whole gamut ofthings that people are using to interact with the internet on, right? whether it's a websiteor whether it's a piece of software, chances are tablets, desktops, smartphones, phablets,phamblets, whatever kind of thing you want to call these things, have touch enabled.by the way, cursor and keyboard is something you need to consider for all of them too.for our purposes the point of walking through this spectrum is to illustrate that touchreally matters today, right? it's not something that's just on the iphone. it's not somethingthat's just on the ipad. it's coming to every single shape, form, factor of device you canthink of. when you consider things like websites and web pages are running on all those devicesand they've all been designed for cursors,
mice, keyboards, all of a sudden we kind ofhave a problem, right? we need to think about how we design for touch.what i want to do today is just walk through three things around thinking about touch inan interface and i show some examples and hopefully leave you with some ideas on howto deal with this new reality. the fact that every screen is slowly but surely becominga touchscreen. this is kind of what a touch interface thati think works well looks like and i'll explain to you why i think this works well. if shewants to move this list of photos she just sort of lifts it up. wants to see what's insidethere? she just going to expand that list. again, push it up, see what's inside. noticethere's no button or scroll bar or anything
like that. all the interactions are with content.if you want to see one, you touch it. if you want to move it out of the way, you move itout of the way. that's a very different kind of interactionthan what we generally have on a desktop which is if you look at a high level around what'sgoing on with touch interfaces it's the content that's the interface. all her activities,if she wanted to move the list she actually touch the list itself. if she wanted to seewhat was in that "folder" or pile of objects, she expanded that pile of objects itself.if you wanted to see what one is you touch it. if you want to move it out of the way,you move it out of the way. it's really about direct manipulation of the actual contentas oppose to a lot of playing around with
chrome.if you look at some of the principles underlying, designing for touch, they really emphasizethis. you want to get out of the way between people in the content they want to interactwith and that includes things like excessive visuals and in order to make these thingssort of work a reliance on physicality and sort of predictability through what we knowin the physical world tends to help you out a lot which is why things use natural scrolling,right? the way you would actually move something in real space versus the type of scrollingwe're used to in computers. it's sort of reversed. a lot of this is a big change because if yougo and look at what's been happening with sort of the graphical user interface paradigmwe've had for ... what has it been now? thirty
something years, 35 years, something likethat. the graphical user interface paradigm is windows, icons, menus, pointers. in otherwords, it's very heavy on sort of user interface chrome. the way you get things done is youclick on buttons, you use pointers to point to things. things sit inside of windows. howmuch time do you spend futzing with this stuff and this stuff on a daily basis? when we movethis window ... you're just sitting around, interacting with all this ui chrome insteadof actually interacting with the stuff you care about, the content.if that's been the pervasive paradigm of graphical user interfaces for all these years, whenyou get in the touch world it's a different set of concepts. windows, icons, menus, pointersis sort of abbreviated as wimp. i don't think
that's a very good abbreviation for this.cdgf. it's pretty terrible, right? if anybody's got something better, i'm all ears. what cdgfis it's all about the content. it's not about the chrome, it's not about windows and thingslike this and it's about directly manipulating that content. touching that content, interactingwith it through a set of gestures. because you're directly interacting with the content,the idea of feedback becomes really, really important. how do i know if what i'm doingis actually taking any kind of effect? when you touch something in the real world, yousort of push it, you get immediate feedback. it starts to move or it doesn't move. youget pressure on your finger, you get all kinds of feedback from those interactions. we don'treally get that on the flat screens. we have
to account for that in a lot of our interfaces.these are kinds of the things that you think about at a very high-level in the same waywhen you think about graphical user interface as you think about windows, icons, menus,pointers. now because touch is a human driven sort ofinput model. we actually have to look a lot at human ergonomics to consider how to designfor it. these things are the high-level principles behind stuff but to get a bit more pragmaticwhat we actually have to do is figure out how can our fingers interact with this stuff.our fingers are sized a particular way and as a result we need to make things work.now i'm going to point to the windows' touch target guidelines because i think they'rein a very interesting predicament relative
to some of the other operating systems outthere. if you look at what ios is doing and if you look at what android is doing, allthese guys, they basically are touch from the start. right? they're touch based operatingsystems. the mode that windows is going in through all these hybrid devices and throughother kinds of devices that are out there that they put windows on now they live insort of a dual world. it's interesting to see how they think about touch targets.looking at the guidelines that they put out they have this sort of minimal control sizeto make with something what they call touchable. that is ... you can actually hit it with yourfinger without lots of errors and problems. what does that look like? well, if you lookat a standard windows dialogue this is sort
of what it looks like. this is the processof making it touchable. yay! who's unimpressed? this is what i say, this is the bare minimumkind of thing you have to do so that when you try and touch this you can actually somewhathit it. if anybody has used a touch interface ... this doesn't really sing to you, doesit? that's why they have this other idea aroundtouch enabled. touch enabled, you can see, is actually much bigger. by the way, we'lltalk in a second about why i'm using physical measures here versus pixel measures. touchenabled as you can tell is actually a much bigger deal. in both of these they recommendusing minimum spacing of about 2 millimeters between targets because having a gap betweenstuff means you don't accidentally hit the
wrong thing when you're trying to touch it.now, why do we care about touch target sizes? why is this one of the key things? i mentionedour fingers are bigger than our mice and i've sort of teased this but here's some actualdata that illustrates what's going on. if you look at the size of a touch target, youlook at how much ... how many errors happen, you'll notice that right around 5 mm it justgoes crazy. spikes up. right? twenty percent mis-taps. can you imagine 20% of the timeyou're making mistake? think about how frustrated you would get. i think it's even frustratingif five to ten percent of the time you're making a mistake. consider how many actionsyou do on a computer on a daily basis, right? imagine if a tenth of the time you're makinga mistake. you would go mad. what you really
want to do is keep it like here. you wantto keep it sub 1%, right? hence, why 10 mm is actually a good range.where does this 10 mm come from? well, there's a bunch of studies done around human fingertipsand human finger pads and the average human finger pad is ten to 14 mm and the averagehuman fingertip is nine to ten millimeters hence why this 10 mm range kind of comes out.there's a number of situations where it actually you want to make things bigger. physicallybigger. like if something is frequently used you may want to make that larger than nineor ten millimeters. if the result of touching something could be a big error, you mightwant to make it bigger. if it's located towards the side of the screen, if it's part of asequential task. there's a number of reasons
why you might want to account for that.ten millimeters, 9 mm, this sort of range right here is actually quite big on a screen.when you lay it out on like a desktop computer it feels really kind of chunky, almost fisher-price-esque.but then when you put it on the touch screen and actually start interacting with it feelsvery good. the reason for that ... this is the data thati think actually sort of seals the deal for me. this is the average index finger width.that's a baby's index finger. right around 7 mm or so. most of the websites we have outthere right now are not even good enough for a baby's little finger to tap appropriately.much less a basketball player. someone with much larger fingers.we care about touch target sizes because,
again, we care about human ergonomics. that'sone of things that really comes out of designing for touch. we are really having to bring peoplemore into the equation than we had to previously, right? previously people's sort of metricsor proxy through a mouse and cursor and sort of rationalize down to ... okay, i don't careif you're a baby or a basketball player, you are a mouse cursor to me. have we been objectifiedlike that for many years and now we get to be ourselves and it turns out ourselves arepretty different ... to account for that. now back to the microsoft example again becausei want to sort of illustrate this idea of just not going far enough with this and ... there'sno better place to sort of show this transition from a keyboard and mouse world to a touchworld than in a place where they both live
which is what's happening with windows 8.in a keyboard and mouse world microsoft is basically saying five minimum controlled size,7 mm recommended size, 10 mm things that get hit very frequently. in a touch first applicationthey're saying 7 mm is the minimum size, 10 mm is the recommended size and then plus ... ifyou're doing things that are commonly used on the edge whatever, in all cases it's 2mm. let's visually look at the difference of this.if you take this keyboard and mouse first sort of interaction, this is what microsoftdid with their windows office suite. have you guys seen the ribbon? this is the ribbonfor a traditional keyboard/mouse cursor interaction. this is what happens to it when you put itinto touch mode. again, i mean it's like okay.
right? they made it a little bit bigger.if you have a keyboard and mouse ... let's look at in our example. here is like theirlittle contextual panel for editing text. here it is on touch mode. granted it makesthings better, right? but, it's not really designing things for touch first. what itis doing is sort of like stopping the bleeding. if this keyboard mouse first designs and thepadding of these elements, i think what you're literally doing is stopping the bleeding.like "okay, we'll cut down errors a little bit by just making things a bit bigger." thatshould help with touch. contrast that to the way they're designing applications for touchfirst then you'll see that these things look really, really different. the control panelscome down from the bottom, whatever. this
is what would be considered in their guidelinesmore of a touch-optimized interface. i did this little project for intel that i'llshow you guys and what we did is we took an existing desktop application, in this caseit was called tweester. it's the ultimate social networking tool for the storm chasingcommunity. because everybody needs a social networking tool, right? especially if you'rechasing storms. what better way to do that than with friends.what we're going to do is assume that tweester is an existing standard desktop app, right?something you see all the time and perhaps cringe around. what we're going to do is adaptit not to be touch enabled, not to just do this minimum threshold of let's make the controlsa little bit bigger. but, let's actually turn
it into something a bit more touch optimized.when i talk about this process, again, i talk about like desktops and laptops moving totouch, a lot of people say "why would i use touch on my laptop? it doesn't make any sense.i would never do this." that was actually my first reaction too to a lot of the stuff.i thought ... why would i move my fingers to the screen? i've got the mouse and keyboard.i'm totally comfortable with doing this. then i actually got one of these early prototypeultrabooks from intel and i've realized that the vast majority things i was doing was withtouch. and then they shared some data with me that actually back this up. the data thatthey had when they did some testing around these early touch enabled laptops was thatmore than three-fourths of all the interactions
were coming from the touchscreen. then themouse, little bit of the keyboard and then last but not the least the trackpad. whenyou actually start to think about this it begins to make sense. what happens is thetouchscreen is for the majority stuff you do like scrolling and tapping things. supereasy. the mouse is when you need to get a little bit more precise. keyboard is whenyou need to type something and then trackpad is ... i don't know. sort of no man's landto a certain extent. those things are never really great. anybody use a trackpad all dayand by the end of the day you just feel like you need a new hand. right? it's pretty painful.people were actually really excited about this, having touch on laptops. while my initialreaction was this doesn't make much sense
and while i think a lot of people's initialreactions are like that, there's something there. there's something when you put thiscapability on a device. that gets it going. as a result, i think it makes sense to lookat what this transition could look like. so, tweester, social networking for the stormchasing community. here's what the desktop version looks like. here's your feed. whatyour storm chasing buddies are doing. here's sort of a blown up view of one of those updates.you'll see some common things to a desktop application which is you've got these smalltargets really designed for the precision of a mouse cursor. this is a pretty simpleapp but remember our microsoft office example where there's like a hundred things just inone instantiation of the ribbon. a lot of
small targets.another characteristic is there's lots of ui chrome. if you want to interact of likea photo gallery there's a whole bunch of controls for interacting with that photo gallery. right?they're made very visible, there's like ten buttons, so on and so forth.if we go and shift this over to a touch optimize sort of interface and since we're in the windowsworld, still, what we'll do is kind of put it into the windows 8 style framework. thisapplication could look a lot more like that. we've taken a little small conventions offthe desktop that were up at the top and we've turn them into really large touch targetson the right side. you can see you can't miss hitting these sorts of things with your fingers.you'll also note that in a lot of places we've
sort of dropped some of the ui chrome andmade the content, the interface. let's look at one more example on this applicationto sort of drive this point home. typical form, right? you guys have probably seen agazillion of these things. some of them are maybe the bane of your life because you gotto fill them in all the darn time. again, same deal. look at this capturing locationdialogue. there's this tiny little tickers to move this thing up and down. everythingis sort of driven by text if you will. right? a lot of text entry focused interactions.if we rethink this thing which what we're doing here is we're trying to capture locationand some information about a storm so we can share it with our buddies.if we switch, shift this over again to a touch
optimize world we're going to apply a coupleof principles here. one is around these touch target things, making sure that everythingis sized appropriately to interact with. you see that over here and over here. the otherthing we're going to do is really try and cut down on the amount of text input.one of the principles that helps a lot with designing for touch especially on smallerscreens is to sort of think of the keyboard as the last resort. we got the keyboard upfor some text here, what i want to show you this little widget for capturing a bunch ofstuff. on these new devices we can get locations so we'll just automatically feed in locationand drop the previous seven inputs we had to deal there. but then for entering all theseother stuff we have grab a photo, grab a video,
add some storm data. if we tap the touch targetsize storm data icon we get some controls. this is a little slider which again is a touchtarget size thing so what we can do is actually slide that over and set the type of tornadowe're seeing. here we're seeing a gale tornado. just minor damage. it turns out that whilewe're typing away it's actually a bigger storm. the significant tornado. again, just a touchgesture not typing anything. then what we'll do is we'll actually surface a bunch of controlsthere and yes we're actually seeing roofs being torn off and trees uprooted which iswhy we're on our laptop typing all the stuff in.but you get the idea. i'm not saying this is the ultimate interface for capturing thissort of information, but we're getting as
creative as possible about not having everythingbe text based. all right? trying to think about how can we simplify the process downso that we can interact with touch. when people see this sort of transition, solet me actually show this transition again. when we go from this kind of interface withlots of stuff on it to this kind of interface. a very common thing that people bring up is"but i have so much stuff." right? from trying to take my existing website or applicationand make it touch and make it all big, i can't fit everything that i have on here anymore.yeah, that's awesome. because you probably got way too much stuff.one of the things that i really like about designing for touch is it forces you to simplifybecause you can't fit everything on it anymore.
you have to kind of consider what's most important,what's secondarily important. maybe you do things that are a bit more progressive disclosureor what have you like we showed of that little storm form.the main reason why leading with touch is a good idea because the big targets that we'vebeen talking about will work for mouse, but small targets won't necessarily work for touch.this methodology i think is not just good for making sure that everybody can use itwith whatever input format they happen to have but i think it also sort of pushes youtowards better designs a little bit. because by virtue of trying to make everything touchableyou can fit less stuff which means the interface kind of gets a little simpler which meansyou got to think about what's really important
and what isn't as important. that is whatcan either go away or can be behind the tap or what have you.the touch target's story ... we have fingers. there are certain sizes. we have to make surethe things we have in our interfaces can be used with those fingers. that doesn't necessarilyjust mean the actual targets themselves but the spacing between them as well.embrace touch optimize control. suddenly i don't have enough time to go walk througha whole bevy of touch optimize controls but there's a bunch of general principles liketrying to stay away from the keyboard and i showed you slider and sort of ... tap interactionsfor capturing the same kind of data we are traditionally capturing with the text inputform from before.
touch target is one piece to designing fortouch, the other one is touch gestures which is what are the moves we can make with ourfingers. i'll go through this quickly because if anybody's ever used a touchscreen you knowthis. you can tap on things with one or more fingers,you can double tap. believe it or not you can double tap with more than one finger butthen it starts to look like a jimi hendrix poster so i wouldn't necessarily recommendthis. you can move your fingertip over the surface or move multiple fingertips over thesurface. sort of swiping against stuff. you can do that really quickly, a flick. you cantheoretically do a flick with multiple fingers but it's sort of difficult ... to capture.you can pinch and spread things. again, there's
multiple finger versions of these things soyou have fingers coming together or fingers coming apart. you have a suite of press gestureswhich means you're holding the surface for a little bit and then you're tapping somewhereor you're dragging around somewhere. a lot of these things are used for sort of systemcontrols these days. if you have an iphone and you hold down your finger for a whileit moves into jiggly icon mode, right? or if you're in a web browser and you hold yourfinger down up pops little menu like save this image, save this url.some folks claim that we should really avoid these things because they can accidentallybe triggered and they're difficult to time. where the general solution here is you justset the timer a little longer so you have
to actually hold for a little bit before itgoes into jiggly icon mode. i think the problems come in if you make it too quick.and then there's a suite of rotate actions. the rotate actions by the way differ per platform.this is the one that probably has the most variants about how you do a rotation. it'sthe generally the same sort of spinning pattern. that's cool, we can make all these gestures.what we really want to know is how to use them for things. if you're interested in this,if you go and search for a touch gesture guide, me and a few friends awhile back made thisthing where we looked at all the gestures that were supported by a bunch of differentplatforms and map them to the most common things they do. we talked about press. presswas all about changing modes, right? when
you hold down you change modes. if you lookat object-related actions, swiping across an object generally is a delete function.then you have sort of navigation features around how to move things and move throughthings. i won't dwell on this stuff, you guys can take a look at it. what i want to do insteadis give you a couple little tips and continue with our exercise of redesigning tweester.in tweester we have this scrolling feed list and the way you move this stuff is throughusually a scroll bar which maybe you have a scroll wheel on your mouse or a button butyou got to position your curser right over here and start interacting with it like that.in our redesign version all you got to do is touch the list to move it up. by the way,that should work with two fingers as well
and then the really cool thing about browsingcontent like this is you can flick it and it moves really fast, up and down. you cansort of make your way through that list in a more natural, physical way.this is where one of our little insights comes out. the microsoft guys have been talkingabout this one probably the most but there's this philosophy of if you have an interactiontriggered by one finger, putting two fingers down or three fingers down should probablydo the same interaction. chances are you may have two fingers. a one finger swipe up anddown on a list is a scroll. a two finger swipe up and down on a list shouldn't be move-me-to-delete-modeof everything. all right? or some drastically different action. right? a two finger moveto that same list shouldn't be launch rocket
ship or whatever. right? try to be a littlebit more toleranct around those interactions. you saw me show that here. let's try a few... do it with one finger is the same thing, two fingers then you do a quick flick and... shoots back up the list. that's kind of one thing. here's another one.so we have this list and what we can do is any item in this list we can swipe acrossit which is a different kind of gesture and it's the same as up, down, to the side. wereveal these little shortcuts for favoriting, sending that, talking to the person. notethat if you tap on one of these updates you're going to get the same exact controls in thisview. this little shortcut swipe isn't just the only way of doing that but it's a wayto kind of get to that quicker and interact
with stuff.this is this idea that josh clark has been doing a nice job of talking about is if youthink about gestures as keyboard shortcuts ... that's what's that kind of illustrating,right? it's a way to get to things quicker. it's a hidden thing but it really doesn'tmatter if you learn it or not. if you learn it you're in good shape. if not you can stillget things done. you still maintain non-gestureship of support. but you can use these little gesturetricks here and there to get people to quick tasks common actions or information.now that we've tapped on one of these updates we see this nice photo but where is our uichrome? how do i make this picture bigger? well, you can just make it bigger. to illustratethis again i want to show what's going on.
as soon as you do that you see that the thingreacts. this is another key ... i would say guideline to dealing with touch gestures isprovide immediate feedback for the stuff. that can be a color change, a size changeor it could be a movement of elements. one of my favorite example of this is on thehotel tonight screen. they've got this page about hotels and you could see there's a littletease of a photo there. if you just touch it, it starts to react immediately and youcan jump right in to full photo mode. the thing reacts instantaneously. i'll show thisexample again. as soon as you put your finger in there and you move it a little bit it startsto react and now you can flick through it. imagine my fingers on there, let you movein there. but like this idea, immediate feedback
that shows you something is touchable andshows you the physics of it ... is really useful.we stretched out our image, now we're in gallery mode ... and we can swipe across to move tothe next one. right? now before i address how do we know that let me highlight anothersort of guideline or principle here. watch how that thing just starts to follow my finger.the idea here is if anything can be moved or dragged that actually starts to followyour finger. again, this reaction of immediate feedback. this really enables this idea foryou to browse content. the whole concept of having a large screen that you can interactwith your fingers really makes it great for panning and zooming around stuff.you can also ... this is one of my favorite
little emerging techniques. you can also sortof see what people are trying to do and use their gestures as they browse through stuffto bring in relevant controls. this is something that we did recently. it's pretty common thatwhen you're scrolling through a long list of stuff, like so, people raise the question"oh gosh, now i have to scroll all the way back up to the top. how will i do that? it'ssort of a pain." well, those of us that are savvy and use the iphone you know you canjust tap here and that will scroll you to the top or you could tap here, scroll to thetop. most people don't know that. what we did is as you start to scroll up webring back the controls that you're trying to get to. you're scrolling down, scrollingdown and then as we detect that you're scrolling
up we bring in those controls. the reasonwhy i talk about this is you can sort of use people's gestures as a signal of intent andthen bring in controls as appropriate without having those controls constantly beyond thescreen, especially on small screens where they're eating up space.well, that still doesn't solve this challenge of how do people know these gesture-basedthings are possible? this is the number one thing that people complain about touch interfacesabout, right? okay, so you're using gestures to do this stuff but now there isn't fivebuttons that tell me what i can do. how do i know what to do? anybody heard this? oneguy. okay, cool. we'll have drinks later. we can kavetch.here's a couple ideas around how to discover
gestures and i'll walk through a few of these.one of the things you can do and this may seem tedious but don't show anything else.just get rid of everything. if you were faced of this picture, what would you do? you'dprobably try and remove it. oh, it works. okay, i just learned something. all right?sort of boxing people into the corner may seem aggressive but it's one way of doingit. another thing that we can do is tease content.here we have our gallery, tada! now we have two images ... i can't see this very well,teased on the sides. which illustrates that there's more to come and you can sort of makeyour way through it. another thing we can do is actually show a control and then getrid of it. so, when you come here we'll pull
off a little control here that shows you agallery and then we'll just get rid of it. if you tap on the screen it will come backup and you can scrub through it and make your way ... into this. we can sort of show somecontent, get rid of it. another thing we can do is give you just in time education. whenyou come to this gallery, right when you come to it we can say "hey, if you want to leaveit just pinch to get out of here." if you hit ok and then you pinch, you're out of hereand you learned it. now, this idea of just in time interactionor education is very different from what most touch interfaces do. which is they give youthis sort of how to ... tour. quick, how do you remove a tape? you hold the tape to removeit.
here's another one. intro tours, right? icall these things intro tests. because like "okay, here's what you're going to need toknow to do the application. now go do it. oh, you forgot. oh, you were not paying attention."right? bad person. i'm actually not a fan of giving people all these tutorial thingsupfront because as i tried to illustrate with my little example. look at it, you kind ofsee it and you move on but you don't know until you get there. instead what you cando is provide just in time interaction. again, here, you're scrolling through here,you have this vote here, vote here and then we have a gesture control so after you'vedone a few things we bring up a little tip that says "if you're not interested in somethingswipe across it." now you just learn that
you can swipe across something. we don't showthat until you're actually in the process of doing things then we bring it up and showit to you when it's relevant. just in time education i think is a lot more compellingthan intro tests. on our little gallery mode, when you came in there, we said to just pinchanymore to leave the gallery. this illustrates one more thing. you can dothe two-finger pinch but because we're going to support multiple fingers in the same gestureyou could theoretically pinch it with three fingers and while we're at it why don't youjust pinch at it with five fingers? this idea just kind of grabbing at the screen and makingit do things is really cool. my friend joshua is talking about a second earlier phrasesthat says "big screens invite big gestures."
let people use the whole screen as a controlso you can just put your hand on and go close. feels sort of physical. close the thing up.again, going back to our original principles of trying to make the content be the interactionof trying to bring some physicality into it. hopefully that illustrates that there's acouple of ways to discover gestures, right? we can remove options to sort of box peopleinto a corner. sometimes that works well. we can tease things, we can give little cuesthrough animation or we can use this principle of just in time education as opposed to bludgeoningpeople with these intro tours. the second piece of touch here is these gesturesand i think we're in a point where we shouldn't really be very afraid to experiment. the stuffis still relatively new, it's definitely new
on laptops and desktops and things. i don'tthink everybody's figured it out yet so it's a great time to keep playing with it. butwhen you play with it be aware, a gesture is invisible. some of these discoverabilitytips that i used might help. okay, to wrap this all up. in the 40 minuteshere and actually open it up for some questions i'm going to do a tad bit of a summary.touch, pretty much everywhere these days which means we've got to deal with it. that meansif you're making a website, if you're making application and it's running on somethinglike windows, it's running on something like ios or it's running on something like androidyou got to be able to design for touch. that brings up the question, "well okay, how doyou do that?"
well, the one thing is because we're usingour fingers we got to deal with human ergonomics so we have to manage touch target sizes, spacingand those sorts of things appropriately. that really does force us to simplify stuff whichagain i think is a good thing. at first it feels sort of hard but this sort of resetfor a lot of our software interface is actually a good thing.the second piece is gestures. whether we're using gestures to browse content, whetherwe're using gestures as a shortcut, whether we're using gestures sort of on a full screenbasis, all those things i think can help with the overall interaction design of an applicationbut we do have to be mindful of these discoverability issues. hopefully i showed you some ways tosort of manage that and some ways to not necessarily
deal with that.that's designing for touch. that's mysterious music and i can field a couple of questions.
0 comments:
Post a Comment