Move that thang

2,862
-1

Published on

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

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,862
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
49
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Move that thang

  1. 1. Move that thang! Choreography of gestural interfaces.Sunday, April 3, 2011
  2. 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. 3. Defining Interaction Design The engineer’s perspective Bill Verplank http://www.ixda.org/resources/bill-verplank-opening-keynoteSunday, April 3, 2011
  4. 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).” http://www.ixda.org/resources/richard-buchanan-keynoteSunday, April 3, 2011
  5. 5. Foundations What are foundations? What are they good for? What are they for Interaction Design?Sunday, April 3, 2011
  6. 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. 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. 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. 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. 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: http://johnnyholland.org/2009/03/09/foundations-of-interaction-design-interaction-09-reprise/ Video of my presentation on the Foundations of Interaction Design @ Interaction 09 | Vancouver http://vimeo.com/4500315Sunday, April 3, 2011
  11. 11. Time It has many sub-elements Duration Frequency Rhythm Delay Photo credit: Adam BrowdowskiSunday, April 3, 2011
  12. 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. 13. Another example iPod Click-wheelSunday, April 3, 2011
  14. 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. 15. Movement (motion) Pleasing movements Craft of motion Intuitive gesturesSunday, April 3, 2011
  16. 16. Gestures It’s about time, right!Sunday, April 3, 2011
  17. 17. What is a gesture?Sunday, April 3, 2011
  18. 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. 19. http://howtobeisraeli.blogspot.com/Sunday, April 3, 2011
  20. 20. Meanings change We have learned, often the hard way that context changes meaning, right?Sunday, April 3, 2011
  21. 21. Ashs Machiavellian Bloggery We know all about it. Body language is well understoodSunday, April 3, 2011
  22. 22. But it’s all about to get crazy!Sunday, April 3, 2011
  23. 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. 24. Let’s face it ... ... THIS is why we are here.Sunday, April 3, 2011
  25. 25. And probably more likely ... ... THIS!!Sunday, April 3, 2011
  26. 26. Windows Phone 7 Amazing GUI, not to be ignored.Sunday, April 3, 2011
  27. 27. Android’s the big boy, now. With the largest install-base, Android can’t be ignored.Sunday, April 3, 2011
  28. 28. Finger, say hello to screen! And don’t forget ...Sunday, April 3, 2011
  29. 29. Styluses suck!Sunday, April 3, 2011
  30. 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. 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. 32. Tapping let’s you dance ...Sunday, April 3, 2011
  33. 33. Taking a step back Drag & Drop: as a gesture requires high- resolution physical manipulation. Reliant on Fitts’Sunday, April 3, 2011
  34. 34. Fitts Law It is a law after allSunday, April 3, 2011
  35. 35. Precision Most mousing requires a level of precision of motion that leads to errorsSunday, April 3, 2011
  36. 36. Spinning makes the game Game of LifeSunday, April 3, 2011
  37. 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. 38. Fluidity over precision Fluid imprecise motions are generally easier to learn & more enjoyable.Sunday, April 3, 2011
  39. 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. 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. 41. What am I touching? What happens when there is nothing to touch?Sunday, April 3, 2011
  42. 42. It’s not all science fiction Oblong.com http://vimeo.com/2229299Sunday, April 3, 2011
  43. 43. Some of it is even practical Canesta - Designed by Kicker Studio http://kickerstudio.com/ http://www.youtube.com/watch?v=L9wMrRRK8WESunday, April 3, 2011
  44. 44. How do we design this stuff?Sunday, April 3, 2011
  45. 45. First ya gotta read Dan Saffer is a good startSunday, April 3, 2011
  46. 46. ... and read some more Josh Clark is darn good, tooSunday, April 3, 2011
  47. 47. Gotta own it ... ... minimum at least 1 touch-based device, hopefully 1 that you are designing for.Sunday, April 3, 2011
  48. 48. Know your medium This isn’t just a faster horse of a different colorSunday, April 3, 2011
  49. 49. Seeing is believing but ...Sunday, April 3, 2011
  50. 50. Experiencing it ... ... is a whole other ball of wax.Sunday, April 3, 2011
  51. 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. 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. 53. Pull to spring Causes a get command: (http://vimeo.com/21903253) 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. 54. Swipe to reveal It’s the new “right-click”: http://vimeo.com/21903335 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. 55. Taps & Swipes Tap causes reveals of secondary content; swipes then dismiss it. Easy to find and now includes the “reset” gesture again. http://vimeo.com/21903443Sunday, April 3, 2011
  56. 56. 2-finger pull http://vimeo.com/21903212Reveals conversation without loss of context:2 fingers is arguably not intuitive, hard to discover.
  57. 57. Reverse pinch reveal http://vimeo.com/21903290 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. 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. 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. 60. Prototype Envision, communicate, experienceSunday, April 3, 2011
  61. 61. Imagine situationsSunday, April 3, 2011
  62. 62. Do I need program software? Yes & NoSunday, April 3, 2011
  63. 63. Animate your visual interface Starting state Ending state TransitionsSunday, April 3, 2011
  64. 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.http://vimeo.com/4910002
  65. 65. Notation add notations to existing UI documentation like wireframesSunday, April 3, 2011
  66. 66. More abstract notations This is the equivalent to tap, hold, drag.Sunday, April 3, 2011
  67. 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. 68. Drag & Drop Actors Page Drag ghost Cursor Original location Tool Tip Drop target Drag object 30Sunday, April 3, 2011
  69. 69. Drag & Drop MatrixSunday, April 3, 2011
  70. 70. Need to add gesture notions to this existing concept.Sunday, April 3, 2011
  71. 71. Summarizing what we learned Screen from concept health data viz Microsoft Surface Table project by Ergonomi DesignSunday, April 3, 2011
  72. 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. 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. 74. Thank you! David Malouf Professor of Interaction & Industrial Design Savannah College of Art and Design @daveixd http://davemalouf.com/ dave.ixd@gmail.comSunday, April 3, 2011

×