Your SlideShare is downloading. ×
0
Move that thang!          Choreography of gestural interfaces.Sunday, April 3, 2011
What are you in for?                What is Interaction Design?                Foundations of Interaction Design          ...
Defining Interaction Design           The engineer’s perspective             Bill             Verplank                     ...
Defining Interaction Design           The philosopher’s perspective                        “To design the environments     ...
Foundations                What are foundations?                What are they good for?                What are they for I...
What are foundations                Simply put the principles that allow for both a critical                analysis and a...
Why have foundations?                  Creates a solid base of core theories and crafts                        These can t...
Let’s look at another          discipline                There are 6 elements that every 3D designer                needs ...
There is also a progression                  In 3D design you can’t         Primitives include                  just jump ...
Foundations of          Interaction Design                Time                Metaphor                Abstraction         ...
Time          It has many sub-elements                Duration                Frequency                Rhythm             ...
Abstraction                Level of directness or                interaction                        Command Line          ...
Another          example          iPod Click-wheelSunday, April 3, 2011
Metaphors          “Everything in computers          is a metaphor”          - Dan Saffer, IA Summit 2005                T...
Movement (motion)                Pleasing movements                Craft of motion                Intuitive gesturesSunday...
Gestures          It’s about time, right!Sunday, April 3, 2011
What is a gesture?Sunday, April 3, 2011
The "I Really Really Mean It"                          The Lip Shrug                 The Instructional Finger             ...
http://howtobeisraeli.blogspot.com/Sunday, April 3, 2011
Meanings          change          We have learned,          often the hard way          that context changes          mean...
Ashs Machiavellian Bloggery          We know all about it.          Body language is well understoodSunday, April 3, 2011
But it’s all about to get crazy!Sunday, April 3, 2011
And it isn’t just body language          It’s voice, body, etc. and computers are doing          amazing things for very l...
Let’s face it ...          ... THIS is why we are here.Sunday, April 3, 2011
And probably more likely ...          ... THIS!!Sunday, April 3, 2011
Windows          Phone 7          Amazing GUI, not to          be ignored.Sunday, April 3, 2011
Android’s          the big boy,          now.          With the largest          install-base, Android          can’t be i...
Finger, say hello to screen!          And don’t forget ...Sunday, April 3, 2011
Styluses suck!Sunday, April 3, 2011
Why do they suck?                1st - They don’t suck                for everything                They get lost         ...
And I’d argue ...          They just don’t feel as good as the simplicity and          unadulterated feel of literally tou...
Tapping let’s you dance ...Sunday, April 3, 2011
Taking a step back          Drag & Drop: as a gesture requires high-          resolution physical manipulation. Reliant on...
Fitts Law          It is a law after allSunday, April 3, 2011
Precision          Most mousing          requires a level of          precision of motion          that leads to errorsSun...
Spinning makes the game          Game of LifeSunday, April 3, 2011
Twister          Change the game                Spinners have a great                action of engagement                a...
Fluidity over precision          Fluid imprecise motions are generally easier to          learn & more enjoyable.Sunday, A...
Discreet precision has its placeDirect manipulation, even when precisely acted out,can lead to fun. I think of this every ...
It’s not just about the          movement ...          The surfaces we are moving on or against has a          lot to do w...
What am I touching?          What happens when there is nothing to touch?Sunday, April 3, 2011
It’s not all science fiction          Oblong.com          http://vimeo.com/2229299Sunday, April 3, 2011
Some of it is even practical          Canesta - Designed by Kicker Studio          http://kickerstudio.com/ http://www.you...
How do we          design this          stuff?Sunday, April 3, 2011
First ya          gotta read          Dan Saffer is a good          startSunday, April 3, 2011
... and read          some more          Josh Clark is darn          good, tooSunday, April 3, 2011
Gotta own it ...          ... minimum at least 1 touch-based device,          hopefully 1 that you are designing for.Sunda...
Know your medium          This isn’t just a faster horse of a different colorSunday, April 3, 2011
Seeing is          believing          but ...Sunday, April 3, 2011
Experiencing it ...          ... is a whole other ball of wax.Sunday, April 3, 2011
Really!          Build it and use it,          and have others use          it too!                                 Nick R...
Learning from others          doesn’t hurt          So let’s look at an app w/ arguably great appeal          due to its i...
Pull to spring          Causes a get command: (http://vimeo.com/21903253)          Amazingly successful because of its rel...
Swipe to reveal          It’s the new “right-click”: http://vimeo.com/21903335          It’s not so easy to find, but once ...
Taps & Swipes          Tap causes reveals of secondary content; swipes then dismiss          it. Easy to find and now inclu...
2-finger pull            http://vimeo.com/21903212Reveals conversation without loss of context:2 fingers is arguably not int...
Reverse pinch reveal                                http://vimeo.com/21903290          Common for zoom, the metaphor makes...
Questions to ask:                Does it contradict or build                off of an existing gesture in                t...
Things to remember          about gestures:                Ergonomics is more important                People like them be...
Prototype          Envision,          communicate,          experienceSunday, April 3, 2011
Imagine situationsSunday, April 3, 2011
Do I need          program          software?          Yes & NoSunday, April 3, 2011
Animate your visual interface                Starting state                Ending state                TransitionsSunday, ...
SCAD on behalf of Freescale SemiconductorSomething like this ...In this case the finger movements are abstracted todots tha...
Notation          add notations to          existing UI          documentation like          wireframesSunday, April 3, 2011
More          abstract          notations          This is the equivalent          to tap, hold, drag.Sunday, April 3, 2011
Drag & Drop Interesting Moments             Taken from Bill Scott             Page load               Drag over valid targ...
Drag & Drop Actors                Page          Drag ghost                Cursor        Original location                T...
Drag & Drop MatrixSunday, April 3, 2011
Need to add gesture notions to this existing concept.Sunday, April 3, 2011
Summarizing what we learned          Screen from concept health data viz Microsoft          Surface Table project by Ergon...
Gestures are complex                They are new and                evolving                What works in 1 context       ...
Gestures are best when ...                They are easily learned                Map against natural behaviors            ...
Thank you!          David Malouf          Professor of Interaction & Industrial Design          Savannah College of Art an...
Upcoming SlideShare
Loading in...5
×

Move that thang

2,770

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,770
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

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×