move that thang
DESCRIPTION
Presentation given at the Holon Institute of Technology. Videos should all be linked to appopriate Vimeo & YouTube links.TRANSCRIPT
![Page 1: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/1.jpg)
Move that thang!Choreography of gestural interfaces.
Sunday, April 3, 2011
![Page 2: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/2.jpg)
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 gestures
Sunday, April 3, 2011
![Page 3: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/3.jpg)
Defining Interaction Design
BillVerplank
http://www.ixda.org/resources/bill-verplank-opening-keynote
The engineer’s perspective
Sunday, April 3, 2011
![Page 4: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/4.jpg)
Defining Interaction Design
RichardBuchanan
http://www.ixda.org/resources/richard-buchanan-keynote
The philosopher’s perspective
“To design the environments where interactions take place.”
“[To design] how people relate to other people through the mediating influence of product(s).”
Sunday, April 3, 2011
![Page 5: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/5.jpg)
Foundations
What are foundations?
What are they good for?
What are they for Interaction Design?
Sunday, April 3, 2011
![Page 6: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/6.jpg)
What are foundations
Simply put the principles that allow for both a critical analysis and a platform of studio education.
Sunday, April 3, 2011
![Page 7: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/7.jpg)
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
![Page 8: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/8.jpg)
Let’s look at another discipline
There are 6 elements that every 3D designer needs to know:
LinePlane (surface)Volume (space & form)Value (Light & Dark)TextureColor
Sunday, April 3, 2011
![Page 9: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/9.jpg)
There is also a progressionIn 3D design you can’t just jump right in
“Primitives” must be mastered,
and in mastering these you master craft
Primitives includeRectilinear VolumesCurvilinear VolumesRectilinear & CurvilinearFragmentsPlanar constructionsLines in SpaceAdvanced Studies in Form
ConstructionConvexityConcavity
Studies in Space
Sunday, April 3, 2011
![Page 10: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/10.jpg)
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 | Vancouverhttp://vimeo.com/4500315
Sunday, April 3, 2011
![Page 11: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/11.jpg)
TimeIt has many sub-elements
Duration
Frequency
Rhythm
Delay
Photo credit: Adam Browdowski
Sunday, April 3, 2011
![Page 12: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/12.jpg)
Abstraction
Level of directness or interaction
Command LineVoice CommandMouse - Point/ClickStylus - Tap/ClickFinger - Tap click
Movement equals same direction response
Sunday, April 3, 2011
![Page 13: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/13.jpg)
Another exampleiPod Click-wheel
Sunday, April 3, 2011
![Page 14: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/14.jpg)
Metaphors
“Everything in computers is a metaphor” - Dan Saffer, IA Summit 2005
Trash can / recycle bin
Disk
File / folder
Shopping
Even Computer
Sunday, April 3, 2011
![Page 15: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/15.jpg)
Movement (motion)
Pleasing movements
Craft of motion
Intuitive gestures
Sunday, April 3, 2011
![Page 16: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/16.jpg)
GesturesIt’s about time, right!
Sunday, April 3, 2011
![Page 17: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/17.jpg)
What is a gesture?
Sunday, April 3, 2011
![Page 18: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/18.jpg)
The Lip Shrug The Instructional FingerThe "I Really Really Mean It"
Forefinger-Thumb Touch
The "Nu, Zeh Barur, Lo?" Shrug The Two-Handed Precision Gestures The "Zeh Oh Zeh" One-Handed Swipe
Sunday, April 3, 2011
![Page 19: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/19.jpg)
http://howtobeisraeli.blogspot.com/
Sunday, April 3, 2011
![Page 20: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/20.jpg)
Meanings changeWe have learned, often the hard way that context changes meaning, right?
Sunday, April 3, 2011
![Page 21: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/21.jpg)
We know all about it.Body language is well understood
Ash's Machiavellian Bloggery
Sunday, April 3, 2011
![Page 22: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/22.jpg)
But it’s all about to get crazy!
Sunday, April 3, 2011
![Page 23: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/23.jpg)
And it isn’t just body languageIt’s voice, body, etc. and computers are doing amazing things for very little
Sunday, April 3, 2011
![Page 24: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/24.jpg)
Let’s face it ...... THIS is why we are here.
Sunday, April 3, 2011
![Page 25: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/25.jpg)
And probably more likely ...... THIS!!
Sunday, April 3, 2011
![Page 26: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/26.jpg)
Windows Phone 7Amazing GUI, not to be ignored.
Sunday, April 3, 2011
![Page 27: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/27.jpg)
Android’s the big boy, now.With the largest install-base, Android can’t be ignored.
Sunday, April 3, 2011
![Page 28: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/28.jpg)
Finger, say hello to screen!And don’t forget ...
Sunday, April 3, 2011
![Page 29: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/29.jpg)
Styluses suck!
Sunday, April 3, 2011
![Page 30: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/30.jpg)
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-point
Sunday, April 3, 2011
![Page 31: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/31.jpg)
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
![Page 32: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/32.jpg)
Tapping let’s you dance ...http://www.youtube.com/watch?v=lC3Iwiwy88g
Sunday, April 3, 2011
![Page 33: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/33.jpg)
Taking a step backDrag & Drop: as a gesture requires high-resolution physical manipulation. Reliant on Fitts’
Sunday, April 3, 2011
![Page 34: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/34.jpg)
Fitts LawIt is a law after all
Sunday, April 3, 2011
![Page 35: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/35.jpg)
PrecisionMost mousing requires a level of precision of motion that leads to errors
Sunday, April 3, 2011
![Page 36: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/36.jpg)
Spinning makes the gameGame of Life
Sunday, April 3, 2011
![Page 37: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/37.jpg)
Twister
Trouble
Change the game
Spinners have a great action of engagement and leave a period of anxiousness.
The Trouble die popper allows you to use unrestrained power to do something previously delicate & controlled.
Sunday, April 3, 2011
![Page 38: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/38.jpg)
Fluidity over precisionFluid imprecise motions are generally easier to learn & more enjoyable.
Sunday, April 3, 2011
![Page 39: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/39.jpg)
Discreet precision has its placeDirect manipulation, even when precisely acted out, can lead to fun. I think of this every time I use my iPadhttp://www.youtube.com/watch?v=dWBmaKk32fE
Sunday, April 3, 2011
![Page 40: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/40.jpg)
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
![Page 41: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/41.jpg)
What am I touching?What happens when there is nothing to touch?
Sunday, April 3, 2011
![Page 42: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/42.jpg)
It’s not all science fictionOblong.comhttp://vimeo.com/2229299
Sunday, April 3, 2011
![Page 43: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/43.jpg)
Some of it is even practicalCanesta - Designed by Kicker Studiohttp://kickerstudio.com/ http://www.youtube.com/watch?v=L9wMrRRK8WE
Sunday, April 3, 2011
![Page 44: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/44.jpg)
How do we design this stuff?
Sunday, April 3, 2011
![Page 45: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/45.jpg)
First ya gotta readDan Saffer is a good start
Sunday, April 3, 2011
![Page 46: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/46.jpg)
... and read some moreJosh Clark is darn good, too
Sunday, April 3, 2011
![Page 47: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/47.jpg)
Gotta own it ...... minimum at least 1 touch-based device, hopefully 1 that you are designing for.
Sunday, April 3, 2011
![Page 48: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/48.jpg)
Know your mediumThis isn’t just a faster horse of a different color
Sunday, April 3, 2011
![Page 49: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/49.jpg)
Seeing is believingbut ...
Sunday, April 3, 2011
![Page 50: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/50.jpg)
Experiencing it ... ... is a whole other ball of wax.
Sunday, April 3, 2011
![Page 51: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/51.jpg)
Really!Build it and use it, and have others use it too!
Nick Remis & David Chen - SCAD on behalf of Motorola Solutions - “Mi - Card” concept
Sunday, April 3, 2011
![Page 52: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/52.jpg)
Learning from others doesn’t hurtSo let’s look at an app w/ arguably great appeal due to its interesting use of novel gestures.
Sunday, April 3, 2011
![Page 53: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/53.jpg)
Pull to springCauses 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
![Page 54: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/54.jpg)
Swipe to revealIt’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
![Page 55: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/55.jpg)
Taps & SwipesTap causes reveals of secondary content; swipes then dismiss it. Easy to find and now includes the “reset” gesture again. http://vimeo.com/21903443
Sunday, April 3, 2011
![Page 56: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/56.jpg)
2-finger pull http://vimeo.com/21903212
Reveals conversation without loss of context:2 fingers is arguably not intuitive, hard to discover.
Sunday, April 3, 2011
![Page 57: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/57.jpg)
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
![Page 58: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/58.jpg)
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
![Page 59: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/59.jpg)
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 .9cm2
Sunday, April 3, 2011
![Page 60: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/60.jpg)
PrototypeEnvision, communicate, experience
Sunday, April 3, 2011
![Page 61: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/61.jpg)
Imagine situations
Sunday, April 3, 2011
![Page 62: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/62.jpg)
Do I need program software?Yes & No
Sunday, April 3, 2011
![Page 63: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/63.jpg)
Animate your visual interface
Starting state
Ending state
Transitions
Sunday, April 3, 2011
![Page 64: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/64.jpg)
Something like this ...In this case the finger movements are abstracted to dots that behave differently depending on the gesture.http://vimeo.com/4910002
SCAD on behalf of Freescale Semiconductor
Sunday, April 3, 2011
![Page 65: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/65.jpg)
Notationadd notations to existing UI documentation like wireframes
Sunday, April 3, 2011
![Page 66: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/66.jpg)
More abstract notationsThis is the equivalent to tap, hold, drag.
Sunday, April 3, 2011
![Page 67: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/67.jpg)
Drag & Drop Interesting Moments
Page load
Mouse hover over draggable object
Mouse down on draggable object
Drag initiated (mouse down, mouse moves >= 3 pixels)
Drag over valid target area
Drag over invalid target area
Drag over original location
Drop accepted
Drop rejected
Drop on original location
Taken from Bill Scott
Sunday, April 3, 2011
![Page 68: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/68.jpg)
Drag & Drop Actors
Page
Cursor
Tool Tip
Drag object
Drag ghost
Original location
Drop target
30
Sunday, April 3, 2011
![Page 69: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/69.jpg)
Drag & Drop Matrix
Sunday, April 3, 2011
![Page 70: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/70.jpg)
Need to add gesture notions to this existing concept.Sunday, April 3, 2011
![Page 71: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/71.jpg)
Summarizing what we learnedScreen from concept health data viz Microsoft Surface Table project by Ergonomi Design
Sunday, April 3, 2011
![Page 72: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/72.jpg)
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 & experience
Sunday, April 3, 2011
![Page 73: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/73.jpg)
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 aesthetic
Sunday, April 3, 2011
![Page 74: Move that thang](https://reader031.vdocument.in/reader031/viewer/2022020101/54c784ab4a795979518b4599/html5/thumbnails/74.jpg)
Thank you!David Malouf
Professor of Interaction & Industrial DesignSavannah College of Art and Design@daveixdhttp://davemalouf.com/
Sunday, April 3, 2011