Your SlideShare is downloading. ×
Move that thang
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Move that thang


Published on

Presentation given at the Holon Institute of Technology. Videos should all be linked to appopriate Vimeo & YouTube links.

Presentation given at the Holon Institute of Technology. Videos should all be linked to appopriate Vimeo & YouTube links.

Published in: Design

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Move that thang! Choreography of gestural interfaces.Sunday, April 3, 2011
  • 2. What are you in for? What is Interaction Design? Foundations of Interaction Design A little bit of HCI Some principles from smart people My thoughts on the Aesthetics of Motion How to be a choreographer of gesturesSunday, April 3, 2011
  • 3. Defining Interaction Design The engineer’s perspective Bill Verplank, April 3, 2011
  • 4. Defining Interaction Design The philosopher’s perspective “To design the environments where interactions take place.” Richard Buchanan “[To design] how people relate to other people through the mediating influence of product(s).”, April 3, 2011
  • 5. Foundations What are foundations? What are they good for? What are they for Interaction Design?Sunday, April 3, 2011
  • 6. What are foundations Simply put the principles that allow for both a critical analysis and a platform of studio education.Sunday, April 3, 2011
  • 7. Why have foundations? Creates a solid base of core theories and crafts These can transcend all design disciplines Art History/Criticism Color 2D Design Goal is to give broad understanding of theory, and opportunity to focus on craft before diving deeper into a chosen discipline.Sunday, April 3, 2011
  • 8. Let’s look at another discipline There are 6 elements that every 3D designer needs to know: Line Plane (surface) Volume (space & form) Value (Light & Dark) Texture ColorSunday, April 3, 2011
  • 9. There is also a progression In 3D design you can’t Primitives include just jump right in Rectilinear Volumes Curvilinear Volumes “Primitives” must be Rectilinear & Curvilinear mastered, Fragments and in mastering these Planar constructions you master craft Lines in Space Advanced Studies in Form Construction Convexity Concavity Studies in SpaceSunday, April 3, 2011
  • 10. Foundations of Interaction Design Time Metaphor Abstraction Motion & Movement Negativity (related to “negative [or white] space”) Article w/ links to previous written work on Foundations of IxD: Video of my presentation on the Foundations of Interaction Design @ Interaction 09 | Vancouver, April 3, 2011
  • 11. Time It has many sub-elements Duration Frequency Rhythm Delay Photo credit: Adam BrowdowskiSunday, April 3, 2011
  • 12. Abstraction Level of directness or interaction Command Line Voice Command Mouse - Point/Click Stylus - Tap/Click Finger - Tap click Movement equals same direction responseSunday, April 3, 2011
  • 13. Another example iPod Click-wheelSunday, April 3, 2011
  • 14. Metaphors “Everything in computers is a metaphor” - Dan Saffer, IA Summit 2005 Trash can / recycle bin Disk File / folder Shopping Even ComputerSunday, April 3, 2011
  • 15. Movement (motion) Pleasing movements Craft of motion Intuitive gesturesSunday, April 3, 2011
  • 16. Gestures It’s about time, right!Sunday, April 3, 2011
  • 17. What is a gesture?Sunday, April 3, 2011
  • 18. The "I Really Really Mean It" The Lip Shrug The Instructional Finger Forefinger-Thumb Touch The "Nu, Zeh Barur, Lo?" Shrug The Two-Handed Precision Gestures The "Zeh Oh Zeh" One-Handed SwipeSunday, April 3, 2011
  • 19., April 3, 2011
  • 20. Meanings change We have learned, often the hard way that context changes meaning, right?Sunday, April 3, 2011
  • 21. Ashs Machiavellian Bloggery We know all about it. Body language is well understoodSunday, April 3, 2011
  • 22. But it’s all about to get crazy!Sunday, April 3, 2011
  • 23. And it isn’t just body language It’s voice, body, etc. and computers are doing amazing things for very littleSunday, April 3, 2011
  • 24. Let’s face it ... ... THIS is why we are here.Sunday, April 3, 2011
  • 25. And probably more likely ... ... THIS!!Sunday, April 3, 2011
  • 26. Windows Phone 7 Amazing GUI, not to be ignored.Sunday, April 3, 2011
  • 27. Android’s the big boy, now. With the largest install-base, Android can’t be ignored.Sunday, April 3, 2011
  • 28. Finger, say hello to screen! And don’t forget ...Sunday, April 3, 2011
  • 29. Styluses suck!Sunday, April 3, 2011
  • 30. Why do they suck? 1st - They don’t suck for everything They get lost They cause fatigue They get in the way Only 1 hand at a time Single touch-pointSunday, April 3, 2011
  • 31. And I’d argue ... They just don’t feel as good as the simplicity and unadulterated feel of literally touching a screen.Sunday, April 3, 2011
  • 32. Tapping let’s you dance ...Sunday, April 3, 2011
  • 33. Taking a step back Drag & Drop: as a gesture requires high- resolution physical manipulation. Reliant on Fitts’Sunday, April 3, 2011
  • 34. Fitts Law It is a law after allSunday, April 3, 2011
  • 35. Precision Most mousing requires a level of precision of motion that leads to errorsSunday, April 3, 2011
  • 36. Spinning makes the game Game of LifeSunday, April 3, 2011
  • 37. Twister Change the game Spinners have a great action of engagement and leave a period of anxiousness. Trouble The Trouble die popper allows you to use unrestrained power to do something previously delicate & controlled.Sunday, April 3, 2011
  • 38. Fluidity over precision Fluid imprecise motions are generally easier to learn & more enjoyable.Sunday, April 3, 2011
  • 39. Discreet precision has its placeDirect manipulation, even when precisely acted out,can lead to fun. I think of this every time I use my iPad
  • 40. It’s not just about the movement ... The surfaces we are moving on or against has a lot to do with the aesthetics of the gestures.Sunday, April 3, 2011
  • 41. What am I touching? What happens when there is nothing to touch?Sunday, April 3, 2011
  • 42. It’s not all science fiction, April 3, 2011
  • 43. Some of it is even practical Canesta - Designed by Kicker Studio, April 3, 2011
  • 44. How do we design this stuff?Sunday, April 3, 2011
  • 45. First ya gotta read Dan Saffer is a good startSunday, April 3, 2011
  • 46. ... and read some more Josh Clark is darn good, tooSunday, April 3, 2011
  • 47. Gotta own it ... ... minimum at least 1 touch-based device, hopefully 1 that you are designing for.Sunday, April 3, 2011
  • 48. Know your medium This isn’t just a faster horse of a different colorSunday, April 3, 2011
  • 49. Seeing is believing but ...Sunday, April 3, 2011
  • 50. Experiencing it ... ... is a whole other ball of wax.Sunday, April 3, 2011
  • 51. Really! Build it and use it, and have others use it too! Nick Remis & David Chen - SCAD on behalf of Motorola Solutions - “Mi - Card” conceptSunday, April 3, 2011
  • 52. Learning from others doesn’t hurt So let’s look at an app w/ arguably great appeal due to its interesting use of novel gestures.Sunday, April 3, 2011
  • 53. Pull to spring Causes a get command: ( Amazingly successful because of its relationship to the flick, which makes it discoverable. It’s also damn fun to do!Sunday, April 3, 2011
  • 54. Swipe to reveal It’s the new “right-click”: It’s not so easy to find, but once you do, you never go back, which makes it intuitive to learn. Is it confused w/ “delete”?Sunday, April 3, 2011
  • 55. Taps & Swipes Tap causes reveals of secondary content; swipes then dismiss it. Easy to find and now includes the “reset” gesture again., April 3, 2011
  • 56. 2-finger pull conversation without loss of context:2 fingers is arguably not intuitive, hard to discover.
  • 57. Reverse pinch reveal Common for zoom, the metaphor makes sense, but it is impossible for self discovery, difficult to actually do consistently, and the hand is in the way making the content hard to read.Sunday, April 3, 2011
  • 58. Questions to ask: Does it contradict or build off of an existing gesture in the device system you are working in? Is it easy to find if the natural visual affordances are not in place? Are the state transitions fluid and informative and connect to the gesture and the purpose of the action?Sunday, April 3, 2011
  • 59. Things to remember about gestures: Ergonomics is more important People like them because they are playful Gestures are performed They are more direct They have less cognitive load Gestures can have cross- cultural ramifications Average size of a finger is . 9cm2Sunday, April 3, 2011
  • 60. Prototype Envision, communicate, experienceSunday, April 3, 2011
  • 61. Imagine situationsSunday, April 3, 2011
  • 62. Do I need program software? Yes & NoSunday, April 3, 2011
  • 63. Animate your visual interface Starting state Ending state TransitionsSunday, April 3, 2011
  • 64. SCAD on behalf of Freescale SemiconductorSomething like this ...In this case the finger movements are abstracted todots that behave differently depending on the gesture.
  • 65. Notation add notations to existing UI documentation like wireframesSunday, April 3, 2011
  • 66. More abstract notations This is the equivalent to tap, hold, drag.Sunday, April 3, 2011
  • 67. Drag & Drop Interesting Moments Taken from Bill Scott Page load Drag over valid target area Mouse hover over draggable object Drag over invalid target area Mouse down on draggable object Drag over original location Drag initiated (mouse Drop accepted down, mouse moves >= Drop rejected 3 pixels) Drop on original locationSunday, April 3, 2011
  • 68. Drag & Drop Actors Page Drag ghost Cursor Original location Tool Tip Drop target Drag object 30Sunday, April 3, 2011
  • 69. Drag & Drop MatrixSunday, April 3, 2011
  • 70. Need to add gesture notions to this existing concept.Sunday, April 3, 2011
  • 71. Summarizing what we learned Screen from concept health data viz Microsoft Surface Table project by Ergonomi DesignSunday, April 3, 2011
  • 72. Gestures are complex They are new and evolving What works in 1 context may not in another We cannot rely on common constructs We have to play & experienceSunday, April 3, 2011
  • 73. Gestures are best when ... They are easily learned Map against natural behaviors Are well supported by visual indicators Discreet gestures are used for precise operations Fluid gestures are used for transitional operations The designer considers movement AND the surface combine to create the aestheticSunday, April 3, 2011
  • 74. Thank you! David Malouf Professor of Interaction & Industrial Design Savannah College of Art and Design @daveixd dave.ixd@gmail.comSunday, April 3, 2011