Enhancing Experiences
      With Animation



   A lecture by Alfredo Aponte, UX Director @NorthKingdom
Let’s Clarify.
We will not be talking about
these kind of Animations.
Sorry :- (
We will be talking about...
Behavior
Visual Feedback
Transitions
Affordance
Good Stuff ;- )
But First... Why?
COMPUTERS
Interaction Design started from
    two separate directions.


 We need to remember and understand that this comes
           from... two separate directions.
Screen Graphics on Displays
Input Devices
...with a good mixture of innovation!
Result, screens and input devices become one.
Which easily allows technology to begin to t into our everyday lives.
Let’s Begin!
The Nest Learning Thermostat




When we design a computer-based system or device, we’re
 designing not just what it looks like but how it behaves.
The Camper Weather App




What is unique here... Apps (Digital Products) can easily
       be added to any of these type of devices.
Animation is so much a part of
   a product’s personality.


 because when we are designing the product, we are
designing not just what it looks like but how it behaves.
Let’s use acting as an example. Actors are trained to capture the
essence of their character in order to make you believe in them.
Additionally, the behavior needs to respect its audience. We need to
   de ne what is appropriate, and who’s attention do we want.
Yet we need to remember what is natural. Everyday things can be personal and
visual feedback helps the user understand what is happening or even working.
“Interaction Design should be concerned with the issues
of beauty as our environments of experience become
rapidly shaped by digital, networked, multifunctional
artifacts that influence our lifestyle and perceptions”
– Uday Gajendar



As designers today, we are in the unique position to improve aspects
    of everyday life, including visual, emotional, and experiential.
Talk to Me!
What is the value of time? Where is the sweet spot? 1 to 2 seconds?
    The answer is that time needs to be relative to its context.
A well designed system has
   reassuring feedback.


For example, we need to know what we have done
             when we have done it.
First levels of interface began with text edit... then we began
     asking ourselves how do we point, select, drag, etc.
Here are examples of how the GUI evolved with Lisa.
Here is an example of where we are today with graphic displays.
Over time... interfaces began spreading into other products besides
                                 70
computer screens and they took on similar interface characteristics.
With gestures, we are designing the quality of how we and it interacts.
N9 Demo




In this case, the system doesn’t necessary need to tell the user
  what it is doing. The user needs to know what is going on.
Web Browsing




Example of realistic impressions of motion
     with the basic laws of physics.
Moving on to a different example of gesture
     interaction with motion sensors.
People create mental models about certain objects and task, which is
   why this is important for us to build familiarity for the future.
As technology advances... we are
 now redesigning everything.
Take me there.
Start-up screens and background animations are examples of
        establishing the tone and setting the tempo.
The Cosmopolitan




An indirect example: People’s behavior can be greatly
 affected by factors that they aren’t even aware of...
                       The Cosmopolitan
Transitions are creating
   fluid experiences.
Ro.me – Overall Flow




  Planning for all transitions, controls, chapters, and interactions is
important in order to create a continuos stream without instructions.
Ro.me




It’s very important that we grab the user’s attention and hold it.
Twitter is an example of how gesture interactions begin to in uence
little details in display graphics in order to increase the experience.
Simple is another example that uses visual animation as
   a seamless ow to strengthen the products story.
In this case, every transition is meaningful... there is a
purpose with each one because it helps structure the sections.
As you have seen, every little detail and animation is
extremely valuable in the product’s holistic experience.
Relationships
Siri Ad Spot




 As more products become personal... people are increasingly
becoming attached. Partly because it allows people to be social,
               emotional, and seek attention.
People perceive and pursue pleasure
because evolution actually programed
it in our behavior.


          Which is essential for survival.
The Future of Self Service Banking
The Kinect Effect
“All aspects of a design must support the intended
personality structure”
– Donald Norman
Thank you.
Credits (slide #)
3. Toy Story (Pixar)                       35. Safari (iOS)
12. NASA Mission Control                   37. Kinect
14. Ro.me                                  38. Kinectimals
15. Cyborg R.A.T.7                         41. Sony PS3 Start-Up
19. Nest                                   42. Cosmopolitan Hotel
20. Camper Weather App                     45. Ro.me
22. The Shining .gif                       46. Twitter
23. Social Network .gif                    47. Simple
24. Blade Runner .gif                      48. iPod Nano
27. Nooka                                  49. Nizo
30. Apple Lisa                             51. Siri
32. Sony Google TV                         53. BBVO + IDEO
33. Astronaut App (iOS)                    54. Kinect Effect
34. Nokia N9


References
Bill Buxton, “Sketching User Experience”
Bill Moggridge, “Designing Interactions”
Donald Norman, “Emotional Design”
Tom Kelley, “The Art of Innovation”

UX: Enhancing Experiences with Animation

  • 1.
    Enhancing Experiences With Animation A lecture by Alfredo Aponte, UX Director @NorthKingdom
  • 2.
  • 3.
    We will notbe talking about these kind of Animations.
  • 4.
  • 5.
    We will betalking about...
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
    Interaction Design startedfrom two separate directions. We need to remember and understand that this comes from... two separate directions.
  • 14.
  • 15.
  • 16.
    ...with a goodmixture of innovation!
  • 17.
    Result, screens andinput devices become one. Which easily allows technology to begin to t into our everyday lives.
  • 18.
  • 19.
    The Nest LearningThermostat When we design a computer-based system or device, we’re designing not just what it looks like but how it behaves.
  • 20.
    The Camper WeatherApp What is unique here... Apps (Digital Products) can easily be added to any of these type of devices.
  • 21.
    Animation is somuch a part of a product’s personality. because when we are designing the product, we are designing not just what it looks like but how it behaves.
  • 22.
    Let’s use actingas an example. Actors are trained to capture the essence of their character in order to make you believe in them.
  • 23.
    Additionally, the behaviorneeds to respect its audience. We need to de ne what is appropriate, and who’s attention do we want.
  • 24.
    Yet we needto remember what is natural. Everyday things can be personal and visual feedback helps the user understand what is happening or even working.
  • 25.
    “Interaction Design shouldbe concerned with the issues of beauty as our environments of experience become rapidly shaped by digital, networked, multifunctional artifacts that influence our lifestyle and perceptions” – Uday Gajendar As designers today, we are in the unique position to improve aspects of everyday life, including visual, emotional, and experiential.
  • 26.
  • 27.
    What is thevalue of time? Where is the sweet spot? 1 to 2 seconds? The answer is that time needs to be relative to its context.
  • 28.
    A well designedsystem has reassuring feedback. For example, we need to know what we have done when we have done it.
  • 29.
    First levels ofinterface began with text edit... then we began asking ourselves how do we point, select, drag, etc.
  • 30.
    Here are examplesof how the GUI evolved with Lisa.
  • 31.
    Here is anexample of where we are today with graphic displays.
  • 32.
    Over time... interfacesbegan spreading into other products besides 70 computer screens and they took on similar interface characteristics.
  • 33.
    With gestures, weare designing the quality of how we and it interacts.
  • 34.
    N9 Demo In thiscase, the system doesn’t necessary need to tell the user what it is doing. The user needs to know what is going on.
  • 35.
    Web Browsing Example ofrealistic impressions of motion with the basic laws of physics.
  • 36.
    Moving on toa different example of gesture interaction with motion sensors.
  • 37.
    People create mentalmodels about certain objects and task, which is why this is important for us to build familiarity for the future.
  • 38.
    As technology advances...we are now redesigning everything.
  • 39.
  • 40.
    Start-up screens andbackground animations are examples of establishing the tone and setting the tempo.
  • 41.
    The Cosmopolitan An indirectexample: People’s behavior can be greatly affected by factors that they aren’t even aware of... The Cosmopolitan
  • 42.
    Transitions are creating fluid experiences.
  • 43.
    Ro.me – OverallFlow Planning for all transitions, controls, chapters, and interactions is important in order to create a continuos stream without instructions.
  • 44.
    Ro.me It’s very importantthat we grab the user’s attention and hold it.
  • 45.
    Twitter is anexample of how gesture interactions begin to in uence little details in display graphics in order to increase the experience.
  • 46.
    Simple is anotherexample that uses visual animation as a seamless ow to strengthen the products story.
  • 47.
    In this case,every transition is meaningful... there is a purpose with each one because it helps structure the sections.
  • 48.
    As you haveseen, every little detail and animation is extremely valuable in the product’s holistic experience.
  • 49.
  • 50.
    Siri Ad Spot As more products become personal... people are increasingly becoming attached. Partly because it allows people to be social, emotional, and seek attention.
  • 51.
    People perceive andpursue pleasure because evolution actually programed it in our behavior. Which is essential for survival.
  • 52.
    The Future ofSelf Service Banking
  • 53.
  • 54.
    “All aspects ofa design must support the intended personality structure” – Donald Norman
  • 55.
  • 56.
    Credits (slide #) 3.Toy Story (Pixar) 35. Safari (iOS) 12. NASA Mission Control 37. Kinect 14. Ro.me 38. Kinectimals 15. Cyborg R.A.T.7 41. Sony PS3 Start-Up 19. Nest 42. Cosmopolitan Hotel 20. Camper Weather App 45. Ro.me 22. The Shining .gif 46. Twitter 23. Social Network .gif 47. Simple 24. Blade Runner .gif 48. iPod Nano 27. Nooka 49. Nizo 30. Apple Lisa 51. Siri 32. Sony Google TV 53. BBVO + IDEO 33. Astronaut App (iOS) 54. Kinect Effect 34. Nokia N9 References Bill Buxton, “Sketching User Experience” Bill Moggridge, “Designing Interactions” Donald Norman, “Emotional Design” Tom Kelley, “The Art of Innovation”