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


Deﬁning Interaction Design
The engineer’s perspective

Bill
Verplank

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


Deﬁning 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 inﬂuence of
product(s).”

http://www.ixda.org/resources/richard-buchanan-keynote


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:
Line
Plane (surface)
Volume (space & form)
Value (Light & Dark)
Texture
Color


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 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 | Vancouver
http://vimeo.com/4500315


Time
It has many sub-elements

Duration
Frequency
Rhythm
Delay

Photo credit: Adam Browdowski


Abstraction
Level of directness or
interaction
Command Line
Voice Command
Mouse - Point/Click
Stylus - Tap/Click
Finger - Tap click

Movement equals
same direction
response


Another
example
iPod 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


Gestures
It’s about time, right!


What is a gesture?


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 Swipe


http://howtobeisraeli.blogspot.com/


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


Ash's Machiavellian Bloggery

We know all about it.
Body language is well understood


But it’s all about to get crazy!


And it isn’t just body language
It’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 7
Amazing 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 ...


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

Fitts Law
It is a law after all


Precision
Most mousing
requires a level of
precision of motion
that leads to errors


Spinning makes the game
Game of Life


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.


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


Discreet precision has its place
Direct manipulation, even when precisely acted out,
can lead to fun. I think of this every time I use my iPad

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 ﬁction
Oblong.com


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

How do we
design this
stuff?


First ya
gotta read
Dan Saffer is a good
start


... and read
some more
Josh Clark is darn
good, too


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

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


Seeing is
believing
but ...


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 hurt
So let’s look at an app w/ arguably great appeal
due to its interesting use of novel gestures.


Pull to spring
Causes a get command: (http://vimeo.com/21903253)
Amazingly successful because of its relationship to the ﬂick,
which makes it discoverable. It’s also damn fun to do!

Swipe to reveal
It’s the new “right-click”: http://vimeo.com/21903335
It’s not so easy to ﬁnd, but once you do, you never go back,
which makes it intuitive to learn. Is it confused w/ “delete”?

Taps & Swipes
Tap causes reveals of secondary content; swipes then dismiss
it. Easy to ﬁnd and now includes the “reset” gesture again.

2-ﬁnger pull http://vimeo.com/21903212

Reveals conversation without loss of context:
2 ﬁngers 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, difﬁcult 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 ﬁnd if the
natural visual affordances
are not in place?
Are the state transitions
ﬂuid 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 ramiﬁcations
Average size of a ﬁnger is .
9cm2


Prototype
Envision,
communicate,
experience


Imagine situations


Do I need
program
software?
Yes & No


Animate your visual interface

Starting state
Ending state
Transitions


SCAD on behalf of Freescale Semiconductor

Something like this ...
In this case the ﬁnger movements are abstracted to
dots that behave differently depending on the gesture.

Notation
add notations to
existing UI
documentation like
wireframes


More
abstract
notations
This is the equivalent
to tap, hold, drag.


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 location


Drag & Drop Actors

Page Drag ghost
Cursor Original location
Tool Tip Drop target
Drag object 30


Drag & Drop Matrix


Need to add gesture notions to this existing concept.

Summarizing what we learned
Screen 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 Design
Savannah College of Art and Design
@daveixd
http://davemalouf.com/
dave.ixd@gmail.com


Move that thang

Move that thang

Recommended

More Related Content

Similar to Move that thang

Similar to Move that thang(20)

More from Dave Malouf

More from Dave Malouf(20)

Recently uploaded

Recently uploaded(20)

Move that thang