Enhancing Experiences      With Animation   A lecture by Alfredo Aponte, UX Director @NorthKingdom
Let’s Clarify.
We will not be talking aboutthese 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           f...
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 ThermostatWhen we design a computer-based system or device, we’re designing not just what it looks like ...
The Camper Weather AppWhat is unique here... Apps (Digital Products) can easily       be added to any of these type of dev...
Animation is so much a part of   a product’s personality. because when we are designing the product, we aredesigning not j...
Let’s use acting as an example. Actors are trained to capture theessence of their character in order to make you believe i...
Additionally, the behavior needs to respect its audience. We need to   de ne what is appropriate, and who’s attention do w...
Yet we need to remember what is natural. Everyday things can be personal andvisual feedback helps the user understand what...
“Interaction Design should be concerned with the issuesof beauty as our environments of experience becomerapidly shaped by...
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...
A well designed system has   reassuring feedback.For example, we need to know what we have done             when we have d...
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                                 70computer screens and...
With gestures, we are designing the quality of how we and it interacts.
N9 DemoIn this case, the system doesn’t necessary need to tell the user  what it is doing. The user needs to know what is ...
Web BrowsingExample 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 f...
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 CosmopolitanAn indirect example: People’s behavior can be greatly affected by factors that they aren’t even aware of.....
Transitions are creating   fluid experiences.
Ro.me – Overall Flow  Planning for all transitions, controls, chapters, and interactions isimportant in order to create a ...
Ro.meIt’s very important that we grab the user’s attention and hold it.
Twitter is an example of how gesture interactions begin to in uencelittle details in display graphics in order to increase...
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 apurpose with each one because it helps structure the sections.
As you have seen, every little detail and animation isextremely valuable in the product’s holistic experience.
Relationships
Siri Ad Spot As more products become personal... people are increasinglybecoming attached. Partly because it allows people...
People perceive and pursue pleasurebecause evolution actually programedit in our behavior.          Which is essential for...
The Future of Self Service Banking
The Kinect Effect
“All aspects of a design must support the intendedpersonality structure”– Donald Norman
Thank you.
Credits (slide #)3. Toy Story (Pixar)                       35. Safari (iOS)12. NASA Mission Control                   37....
Upcoming SlideShare
Loading in …5
×

UX: Enhancing Experiences with Animation

20,014
-1

Published on

I was a recently asked to give a talk about how animations are able to enhance the user experience. In return, I broke it down into four main talking points: Behavior, Visual Feedback, Transitions, and Affordance.

Additionally, this presentation contains a few slides with what you can say are closed captions because I felt they were needed in order to help explain a few items.

Published in: Design, Technology, Art & Photos
3 Comments
48 Likes
Statistics
Notes
No Downloads
Views
Total Views
20,014
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
528
Comments
3
Likes
48
Embeds 0
No embeds

No notes for slide

UX: Enhancing Experiences with Animation

  1. 1. Enhancing Experiences With Animation A lecture by Alfredo Aponte, UX Director @NorthKingdom
  2. 2. Let’s Clarify.
  3. 3. We will not be talking aboutthese kind of Animations.
  4. 4. Sorry :- (
  5. 5. We will be talking about...
  6. 6. Behavior
  7. 7. Visual Feedback
  8. 8. Transitions
  9. 9. Affordance
  10. 10. Good Stuff ;- )
  11. 11. But First... Why?
  12. 12. COMPUTERS
  13. 13. Interaction Design started from two separate directions. We need to remember and understand that this comes from... two separate directions.
  14. 14. Screen Graphics on Displays
  15. 15. Input Devices
  16. 16. ...with a good mixture of innovation!
  17. 17. Result, screens and input devices become one.Which easily allows technology to begin to t into our everyday lives.
  18. 18. Let’s Begin!
  19. 19. The Nest Learning ThermostatWhen we design a computer-based system or device, we’re designing not just what it looks like but how it behaves.
  20. 20. The Camper Weather AppWhat is unique here... Apps (Digital Products) can easily be added to any of these type of devices.
  21. 21. Animation is so much a part of a product’s personality. because when we are designing the product, we aredesigning not just what it looks like but how it behaves.
  22. 22. Let’s use acting as an example. Actors are trained to capture theessence of their character in order to make you believe in them.
  23. 23. Additionally, the behavior needs to respect its audience. We need to de ne what is appropriate, and who’s attention do we want.
  24. 24. Yet we need to remember what is natural. Everyday things can be personal andvisual feedback helps the user understand what is happening or even working.
  25. 25. “Interaction Design should be concerned with the issuesof beauty as our environments of experience becomerapidly shaped by digital, networked, multifunctionalartifacts that influence our lifestyle and perceptions”– Uday GajendarAs designers today, we are in the unique position to improve aspects of everyday life, including visual, emotional, and experiential.
  26. 26. Talk to Me!
  27. 27. 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.
  28. 28. A well designed system has reassuring feedback.For example, we need to know what we have done when we have done it.
  29. 29. First levels of interface began with text edit... then we began asking ourselves how do we point, select, drag, etc.
  30. 30. Here are examples of how the GUI evolved with Lisa.
  31. 31. Here is an example of where we are today with graphic displays.
  32. 32. Over time... interfaces began spreading into other products besides 70computer screens and they took on similar interface characteristics.
  33. 33. With gestures, we are designing the quality of how we and it interacts.
  34. 34. N9 DemoIn 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.
  35. 35. Web BrowsingExample of realistic impressions of motion with the basic laws of physics.
  36. 36. Moving on to a different example of gesture interaction with motion sensors.
  37. 37. People create mental models about certain objects and task, which is why this is important for us to build familiarity for the future.
  38. 38. As technology advances... we are now redesigning everything.
  39. 39. Take me there.
  40. 40. Start-up screens and background animations are examples of establishing the tone and setting the tempo.
  41. 41. The CosmopolitanAn indirect example: People’s behavior can be greatly affected by factors that they aren’t even aware of... The Cosmopolitan
  42. 42. Transitions are creating fluid experiences.
  43. 43. Ro.me – Overall Flow Planning for all transitions, controls, chapters, and interactions isimportant in order to create a continuos stream without instructions.
  44. 44. Ro.meIt’s very important that we grab the user’s attention and hold it.
  45. 45. Twitter is an example of how gesture interactions begin to in uencelittle details in display graphics in order to increase the experience.
  46. 46. Simple is another example that uses visual animation as a seamless ow to strengthen the products story.
  47. 47. In this case, every transition is meaningful... there is apurpose with each one because it helps structure the sections.
  48. 48. As you have seen, every little detail and animation isextremely valuable in the product’s holistic experience.
  49. 49. Relationships
  50. 50. Siri Ad Spot As more products become personal... people are increasinglybecoming attached. Partly because it allows people to be social, emotional, and seek attention.
  51. 51. People perceive and pursue pleasurebecause evolution actually programedit in our behavior. Which is essential for survival.
  52. 52. The Future of Self Service Banking
  53. 53. The Kinect Effect
  54. 54. “All aspects of a design must support the intendedpersonality structure”– Donald Norman
  55. 55. Thank you.
  56. 56. Credits (slide #)3. Toy Story (Pixar) 35. Safari (iOS)12. NASA Mission Control 37. Kinect14. Ro.me 38. Kinectimals15. Cyborg R.A.T.7 41. Sony PS3 Start-Up19. Nest 42. Cosmopolitan Hotel20. Camper Weather App 45. Ro.me22. The Shining .gif 46. Twitter23. Social Network .gif 47. Simple24. Blade Runner .gif 48. iPod Nano27. Nooka 49. Nizo30. Apple Lisa 51. Siri32. Sony Google TV 53. BBVO + IDEO33. Astronaut App (iOS) 54. Kinect Effect34. Nokia N9ReferencesBill Buxton, “Sketching User Experience”Bill Moggridge, “Designing Interactions”Donald Norman, “Emotional Design”Tom Kelley, “The Art of Innovation”
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×