Funktionel Animation - InDiMedia Day 2013

7/28/2019 Funktionel Animation - InDiMedia Day 2013

1/38


2/38

Functional AnimationThe Glue of Touch screen

Interaction Design

Morten Lund

Interaktive Digitale Medier

AnimHub, Aalborg Universitet, B&O, Nokia

PhD.-projekt 2010-2013


3/38

Being in the World - Embodiment

Embodiment is the property of our engagement

with the world that allow us to make it

meaningful.

we are not embodied minds but mindful

bodies.

Dourish 2004

Sheets-Johnstone 2011


4/38

Being in the World - Postphenomenology

Human embodiment is presupposed in and by

our technologies, particularly those related to

the production of knowledge, including scientific

instrumentation, communication technologies,

and the new forms of virtual reality, simulation

and modelling devices.

Ihde 2003, 2009


5/38

The perceptible world


6/38

Movement

Is is about learning to move ourselves. It is about

how movement is at the root of our sense of

agency and how it is the generative source of

our notion of space and time. It is about how

self-movement structures knowledge of the

worldhow moving is a way of knowing and

how thinking in movement is foundational to thelives of animate forms.


In the introduction to 'The Primacy of Movement'


7/38

Nave Physics

People have common sense knowledge about the physical world

Body Awareness & Skills

People have an awareness of their own physical bodies and possess skills forcontrolling and coordinating their bodies

Environment Awareness & Skills

People have a sense of their surroundings and possess skills for negotiating,manipulating, and navigating within their environment

Social Awareness & Skills

People are generally aware of others in their environment and have skills forinteracting with them

Jacob et al 2008


8/38

Onto-/Epistemological movement

They [the qualities of movement] are there in

our first consciousness, a tactile-kinestetic

consiousness of our own bodies in movement.

It [movement] forms the I that moves before the

I that moves forms movement.



9/38

A being in the World


10/38

The qualities of movement

Linear (spatial)

I. The linear design of a moving body

II. The linear patterns created by movement itself

Amplitudinal (spatial)

I. The areal design of a moving body

II. The areal patterns created by movement itself

Tensional (temporal)

The intensity of a movement. The effort, the force.

Projectional (temporal)

Sustained, explosive, ballistic or punctuated manner (e.g.)

Movement creates time and space

Time and space are relative

Sheets-Johnstone 2011, 2010


11/38

Interacting in the World

Embodied Interaction is the creation,

manipulation, and sharing of meaning through

interaction with artifacts

Dourish 2004


12/38

What did Walt say . . . ?

It is not necessary for an animator to take a character to one point,complete that action completely, and then turn to the following actionas if he had never given it a thought until after completing the firstaction. When a character knows what his is going to do he doesn'thave to stop before each individual action and think to do it. He has it

planned in advance in his mind. For example, the mind thinks, "I'll closethe door - lock it - then I'm going to undress and go to bed." Well, youwalk over to the door - before the walk is finished you're reaching forthe door - before the door is closed you reach for the key - before thedoor is locked you're turning away - while you're walking away youundo your tie - and before you reach the bureau you have your tie off.

In other words, before you know it you're undressed - and you've doneit in one thought, "I'm going to bed".

Walt Disney

explaining the principles of Overlapping action & Follow Through


13/38

The World

Markussen 1995


14/38

The World 2.0

Pine & Korn 2011


15/38

Interactivity

Interaction Design: is the creation of a dialogue

between a person and a product, service, or

system.

Interactivity: communicative variants of power

over content production and consumption

within the spectrum of time, space and format.

Kolko 2010

Jensen 2008


16/38

Voila!
http://www.tumblehead.dk/25/work/genanhttp://www.nfb.ca/film/pas_de_deux_en/http://www.youtube.com/watch?v=MvF8XWr17nw


17/38


18/38

The animator

The animator must understand the

connectedness between embodied intentionality,

environment, technologies and action.

Lund 2013


19/38

The interaction designer

Make the designers conceptual model less

ambiguous to the user

Norman 2002


20/38

Principles of animation

1. Squash and stretch

2. Exaggeration

3. Anticipation

4. Slow in & slow out

5. Arcs

6. Secondary action

7. Follow through &overlapping action

8. Straight ahead action &

pose to pose

9. Staging

10. Timing

11. Solid drawing

12. Appeal

Thomas & Johnston 1981


21/38

Generic Design Principles

Visibility

Feedback

Consistency

Non-destructive operations

Discoverability

Scalability

Reliability

- also called perceived affordances or signifiers

- also known as standards

- hence the importance of undo

- all operations can be discovered by systematicexploration of menus

- the operation should work on all screen sizes, smalland large

- operations should work. Period. And events should nothappen randomly

Nielsen &Norman 2010


22/38

Animation in interaction design

Review the past

Understand the present

Describe the future

Baecker & Small 1990


23/38

Animation of structure, process and function

Animation as Identification

Animation as Transition

Animation as Choice

Animation as Demonstration

Animation as Explanation

Animation as Feedback

Animation as History

Animation as Guidance

- What is this ?

- From where have I come, to where have I gone ?

- What can I do now ?

- What can I do with this ?

- How do I do this ?

- What is happening ?

- What have I done ?

- What should I do now ?

Baecker & Small 1990


24/38

Three cartoon principles apply to interface animation

Solidity

Exaggeration

Reinforcement

Characters and objects should seem solid.

Objects obtain an individual identity asseperate, interchangeable things

Exaggerating the behaviour of userinterface objects makes the objects andobjects behaviour more understandable,more realistic and thus the UI moreengaging

The interface should reinforce the illusionof reality and thus keep the user engaged

Chang & Ungar 1995


25/38

4 principles for animation in direct manipulation systems

Attachment

Reluctance

Smoothness

Anticipation

Manipulated object must stay attached to pointer.This maintains the impression that the user isalways in control

Objects should seem reluctant to change. This

reinforces the feeling of substance as the objectwill require effort to manipulate

Objects mus change in a continuous fashion. Thisremoves cognitive load as no large and unexpectedchanges will occur

The results of the users actions must at all times beobvious. This also reduces cognitive load

Thomas & Calder 2001


26/38

Types of movement in the UI

Controlled (movement of)

The movement that happens when an external power or proces moves an object from one position toanother. The quality of "being moveable".

Un-controlled (movement of)

The movement that happens as a result of the energy transferrred to the object following a directionalgesture (flick, throw) or energy transferred upon impact by another object or barriere.

Innate (movement in)

The movement that the object displays as part of it's materiality or character. It is the qualities ofmovement designed into the object.

Animation

These are interface-objects that are in themselves animations. It is animations in the classic sense ofstorytelling and ilustration of a process taking place.

Transitions

The effects that illustrates time and space and uses time and space to communicate this space andthereby the location of interface objects. It is literally UI-component that serves to fill the digital voidthat would otherwise exist when the user interface "jumps" form one state to another.

Lund 2013


27/38

Designing for touch

We need a new paradigm to focus the design of

touch interfaces. Instead of Windows, Icons,

Menus and Pointers for interaction think instead

of CONTENT that can be DIRECT MANIPULATEDwith GESTURES that are reinforced by clear and

meaningful FEEDBACK.

Wroblewski 2012


28/38

Touch Design principles

Content

as interface

Direct Manipulation

- use fingers to move, change, edit, etc.

- reduce the distance between user & content- optimise target sizes

- reduce visuals that are not content

Gestures

[Keep them simple]

Feedback

Coherency to gesture [or other initiating action]

Wroblewski 2012

[Lund 2013]


29/38

What was it they said . .

Sheets-Johnstone

Movement is a - if not - the constituting

component of embodiment and knowledge of

the world

Ihde

Shaping technology for embodiment


30/38

Voila!


31/38

Functional Animation design principles

Design for Manipulation

The object must be tangible (or material) and providemeaningful feedback and feedforward

Design for ExplorationThe manipulation must allow hidden affordances to bediscovered

Design for Discoverability and FindabilityThe affordances of the object must support differentmodes of exploration

Lund 2013


32/38

Computing anno 2013

Ubiquous computingPervasive presence of information collection, information access andinformation processing

A new - extended - reality

A new material in this reality: Not digital, but the digital nature turnsinformation/ data into a material.

Body as interaction device

Novel technologies allow less mediated connection to the content in thisreality.

Interaction Design

Re-Understanding Information in terms of Presentation, Representation,Navigation, Search & Findability

Lund 2013


33/38

Movement experiment on iPad

197 respondents, 4-70+ years old,

146 have tried an iPhone

136 have tried other Smartphone

182 have tried an iPad

67 have tried other Tablet

151 views digital technologies as an integrated part of their lives

180 have a preference for the Tablet platform

128 have a preference for the Smartphone platform

131 have a preference for the Portable PC platform

170 use units with a touch-screen on a daily basis

150 are comfortable using their fingers for interaction

16 are afraid they might make a mistake when using a touch-screen


34/38

179 found there to be different versions of the

circle

160 found the quality of the controlled

movement to signify difference

160 found the innate qualities of reaction to

signify difference

0 Identified colour or sound to siginify difference


35/38

2 | 13 - Hvor mange forskellige versioner af cirklen oplevede du?

Svaret skal ikke vre prcist, men blot afspejle dit umiddelbare indtryk.

Ingen 27 14%

To forskellige 29 15%

Tre forskellige 63 32%

Fire forskellige 47 24%

Fem forskellige 31 16%

Angiv graden af forskellighed p tvrs af de versioner du oplevede.

0 19 10%

1 5 3%

2 19 10%

3 32 17%

4 35 19%

5 34 18%

6 23 12%

7 22 12%


36/38

Angiv om du er enig eller uenig. Svar 'Ved ikke' hvis du er i tvivl. [ kan kastes"]

Ja 19 10%

Nej 111 56%

Ved ikke 67 34%

Svar 'Ja' hvis du er enig og 'Nej' hvis du er uenig. [Det fltes naturligt at bruge mine fingre til velsen]

Ja 186 96%

Neutral 5 3%

Nej 2 1%

Ved ikke 1 1%


37/38

Thank you


38/38

Materialitet

Animation giver informationer en manifest form

og hndgribelige egenskaber

Exploration: Animation gr det muligt at se og

dermed forst informationers relationer og

egenskaber

Transformation og karikatur - supernatural

Documents

Funktionel Animation - InDiMedia Day 2013