Move that thang

Move that thang!Choreography of gestural interfaces.

Sunday, April 3, 2011

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


Defining Interaction Design

BillVerplank

http://www.ixda.org/resources/bill-verplank-opening-keynote

The engineer’s perspective




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).”




Foundations

What are foundations?

What are they good for?

What are they for Interaction Design?


What are foundations

Simply put the principles that allow for both a critical analysis and a platform of studio education.


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.


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


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


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


http://johnnyholland.org/2009/03/09/foundations-of-interaction-design-interaction-09-reprise/

http://johnnyholland.org/2009/03/09/foundations-of-interaction-design-interaction-09-reprise/

http://vimeo.com/4500315


TimeIt has many sub-elements

Duration

Frequency

Rhythm

Delay

Photo credit: Adam Browdowski


Abstraction

Level of directness or interaction

Command LineVoice CommandMouse - Point/ClickStylus - Tap/ClickFinger - Tap click

Movement equals same direction response


Another exampleiPod Click-wheel


Metaphors

“Everything in computers is a metaphor” - Dan Saffer, IA Summit 2005

Trash can / recycle bin

Disk

File / folder

Shopping

Even Computer


Movement (motion)

Pleasing movements

Craft of motion

Intuitive gestures


GesturesIt’s about time, right!


What is a gesture?


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


http://howtobeisraeli.blogspot.com/




Meanings changeWe have learned, often the hard way that context changes meaning, right?


We know all about it.Body language is well understood

Ash's Machiavellian Bloggery


http://ashghebranious.wordpress.com/

http://ashghebranious.wordpress.com/

But it’s all about to get crazy!


And it isn’t just body languageIt’s voice, body, etc. and computers are doing amazing things for very little


Let’s face it ...... THIS is why we are here.


And probably more likely ...... THIS!!


Windows Phone 7Amazing GUI, not to be ignored.


Android’s the big boy, now.With the largest install-base, Android can’t be ignored.


Finger, say hello to screen!And don’t forget ...


Styluses suck!


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


And I’d argue ...They just don’t feel as good as the simplicity and unadulterated feel of literally touching a screen.


Tapping let’s you dance ...http://www.youtube.com/watch?v=lC3Iwiwy88g


http://www.youtube.com/watch?v=lC3Iwiwy88g

Taking a step backDrag & Drop: as a gesture requires high-resolution physical manipulation. Reliant on Fitts’


Fitts LawIt is a law after all


PrecisionMost mousing requires a level of precision of motion that leads to errors


Spinning makes the gameGame of Life


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.


Fluidity over precisionFluid imprecise motions are generally easier to learn & more enjoyable.


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


http://www.youtube.com/watch?v=dWBmaKk32fE

http://www.youtube.com/watch?v=dWBmaKk32fE

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.


What am I touching?What happens when there is nothing to touch?


It’s not all science fictionOblong.comhttp://vimeo.com/2229299




Some of it is even practicalCanesta - Designed by Kicker Studiohttp://kickerstudio.com/ http://www.youtube.com/watch?v=L9wMrRRK8WE


http://kickerstudio.com

http://kickerstudio.com

http://www.youtube.com/watch?v=L9wMrRRK8WE

http://www.youtube.com/watch?v=L9wMrRRK8WE

How do we design this stuff?


First ya gotta readDan Saffer is a good start


... and read some moreJosh Clark is darn good, too


Gotta own it ...... minimum at least 1 touch-based device, hopefully 1 that you are designing for.


Know your mediumThis isn’t just a faster horse of a different color


Seeing is believingbut ...


Experiencing it ... ... is a whole other ball of wax.


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


Learning from others doesn’t hurtSo let’s look at an app w/ arguably great appeal due to its interesting use of novel gestures.


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!




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”?




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




2-finger pull http://vimeo.com/21903212

Reveals conversation without loss of context:2 fingers is arguably not intuitive, hard to discover.




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.




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?


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


PrototypeEnvision, communicate, experience


Imagine situations


Do I need program software?Yes & No


Animate your visual interface

Starting state

Ending state

Transitions


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




Notationadd notations to existing UI documentation like wireframes


More abstract notationsThis is the equivalent to tap, hold, drag.


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


Drag & Drop Actors

Page

Cursor

Tool Tip

Drag object

Drag ghost

Original location

Drop target

30


Drag & Drop Matrix


Need to add gesture notions to this existing concept.Sunday, April 3, 2011

Summarizing what we learnedScreen from concept health data viz Microsoft Surface Table project by Ergonomi Design


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


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


Thank you!David Malouf

Professor of Interaction & Industrial DesignSavannah College of Art and Design@daveixdhttp://davemalouf.com/

[email protected]


http://davemalouf.com

http://davemalouf.com

mailto:[email protected]

mailto:[email protected]

Move that thang

Design

Transcript of Move that thang