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

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

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

TimeIt has many sub-elements

Duration

Frequency

Rhythm

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

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

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

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

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

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

Cursor

Tool Tip

Drag object

Drag ghost

Original location

Drop target

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/

dave.ixd@gmail.com

Move that thang

Design

Transcript of Move that thang

head tyrolia catalog 2005 06...RAILFLEX Lite Wild Thang SRF II Cool Thang System Fine Thang System Lite Thang RAILFLEX Lite Monster i.M 77 Monster i.M 72 SRF II Hot Thang System Monster

canloc.edu.vncanloc.edu.vn/uploads/laws/bc-thang-3_kh-thang-4_2016.pdf · canloc.edu.vn

Oriflame - Catalogue Oriflame Thang 9-2011

Catalogue oriflame thang 4 2016

Catalogue oriflame thang 7 2016

Do an Tong Quan Thang May

Move That Mountain

Creating and Fostering e- communities of Practice (e-CoPs): Theory and Practice Thang Siew Ming, UKM thang@ukm.my.

Catalog Thang Mang Cap En

Boyz Thang

Oriflame - Catalogue Thang 3/2011

Bao Cao Dung Thang 6

Hkl thang bangaygioem.pps

Teaching Online: Do The Dang Thang!

Math 152: Topics in Data Science - Thang Huynh · Math 152: Topics in Data Science Thang Huynh, UC San Diego. Contact Information Instructor: Thang Huynh Email: tlh007@ucsd.edu Office

TT 2 Che Do Thang 07.2013

Catalogue oriflame thang 8 2016

Thang nguyen assignment_2

architecture portfolio-hoang le manh thang

Oriflame - Catalogue Oriflame Thang 5-2011