View
223
Download
0
Category
Preview:
Citation preview
7/28/2019 Funktionel Animation - InDiMedia Day 2013
1/38
7/28/2019 Funktionel Animation - InDiMedia Day 2013
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
7/28/2019 Funktionel Animation - InDiMedia Day 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
7/28/2019 Funktionel Animation - InDiMedia Day 2013
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
7/28/2019 Funktionel Animation - InDiMedia Day 2013
5/38
The perceptible world
7/28/2019 Funktionel Animation - InDiMedia Day 2013
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.
Sheets-Johnstone 2011
In the introduction to 'The Primacy of Movement'
7/28/2019 Funktionel Animation - InDiMedia Day 2013
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
7/28/2019 Funktionel Animation - InDiMedia Day 2013
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.
Sheets-Johnstone 2011
7/28/2019 Funktionel Animation - InDiMedia Day 2013
9/38
A being in the World
7/28/2019 Funktionel Animation - InDiMedia Day 2013
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
7/28/2019 Funktionel Animation - InDiMedia Day 2013
11/38
Interacting in the World
Embodied Interaction is the creation,
manipulation, and sharing of meaning through
interaction with artifacts
Dourish 2004
7/28/2019 Funktionel Animation - InDiMedia Day 2013
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
7/28/2019 Funktionel Animation - InDiMedia Day 2013
13/38
The World
Markussen 1995
7/28/2019 Funktionel Animation - InDiMedia Day 2013
14/38
The World 2.0
Pine & Korn 2011
7/28/2019 Funktionel Animation - InDiMedia Day 2013
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
7/28/2019 Funktionel Animation - InDiMedia Day 2013
16/38
Voila!
http://www.tumblehead.dk/25/work/genanhttp://www.nfb.ca/film/pas_de_deux_en/http://www.youtube.com/watch?v=MvF8XWr17nw7/28/2019 Funktionel Animation - InDiMedia Day 2013
17/38
7/28/2019 Funktionel Animation - InDiMedia Day 2013
18/38
The animator
The animator must understand the
connectedness between embodied intentionality,
environment, technologies and action.
Lund 2013
7/28/2019 Funktionel Animation - InDiMedia Day 2013
19/38
The interaction designer
Make the designers conceptual model less
ambiguous to the user
Norman 2002
7/28/2019 Funktionel Animation - InDiMedia Day 2013
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
7/28/2019 Funktionel Animation - InDiMedia Day 2013
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
7/28/2019 Funktionel Animation - InDiMedia Day 2013
22/38
Animation in interaction design
Review the past
Understand the present
Describe the future
Baecker & Small 1990
7/28/2019 Funktionel Animation - InDiMedia Day 2013
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
7/28/2019 Funktionel Animation - InDiMedia Day 2013
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
7/28/2019 Funktionel Animation - InDiMedia Day 2013
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
7/28/2019 Funktionel Animation - InDiMedia Day 2013
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
7/28/2019 Funktionel Animation - InDiMedia Day 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
7/28/2019 Funktionel Animation - InDiMedia Day 2013
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]
7/28/2019 Funktionel Animation - InDiMedia Day 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
7/28/2019 Funktionel Animation - InDiMedia Day 2013
30/38
Voila!
7/28/2019 Funktionel Animation - InDiMedia Day 2013
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
7/28/2019 Funktionel Animation - InDiMedia Day 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
7/28/2019 Funktionel Animation - InDiMedia Day 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
7/28/2019 Funktionel Animation - InDiMedia Day 2013
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
7/28/2019 Funktionel Animation - InDiMedia Day 2013
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%
7/28/2019 Funktionel Animation - InDiMedia Day 2013
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%
7/28/2019 Funktionel Animation - InDiMedia Day 2013
37/38
Thank you
7/28/2019 Funktionel Animation - InDiMedia Day 2013
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
Recommended