Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How Animation Helps Improve Mobile UX

152 views

Published on

Animation is often perceived by designers as something that makes the user's work undoubtedly more enjoyable, but overall it does not really matter. Therefore, it is added to the interfaces last, like makeup. But this is completely wrong. Animation should be built into the user interface from the very beginning, be its integral part. When the animation is built into the user interface correctly, it can turn a digital product from a sequence of static screens into carefully thought-out memorable experience.

Published in: Design
  • Be the first to comment

  • Be the first to like this

How Animation Helps Improve Mobile UX

  1. 1. Nick Babich @101babich Moscow 2017 How Animation Helps Improve Mobile User Experience
  2. 2. Animation is a clue
  3. 3. When to animate 1. Visual feedback 2. System status 3. Relationships (hierarchical and spatial) 4. Functional change 5. Orientation 6. Highlight 7. Visual hints 8. Emotional engagement
  4. 4. Visual Feedback #1
  5. 5. Is the app understanding what I’m asking it to do? Answers the question: Visual feedback
  6. 6. Visual feedback VadimGromov
  7. 7. Ramotion Visual feedback
  8. 8. Visual feedback Stripe
  9. 9. Visibility of System Status #2
  10. 10. Is this working? How long will it take? Answers the question: System status
  11. 11. System status
  12. 12. xjw System status
  13. 13. Relationship #3
  14. 14. How these two objects are interrelated with each other? Answers the question: Relationship
  15. 15. Relationship
  16. 16. AdrianZumbrunnen Relationship
  17. 17. Functional Change #4
  18. 18. What does this element do know? Answers the question: Functional change
  19. 19. TamasKojo Functional change
  20. 20. Functional change AnishChandran
  21. 21. Orientation #5
  22. 22. Where am I now? Answers the question: Orientation
  23. 23. Orientation
  24. 24. Highlight #6
  25. 25. What’s most important here? Answers the question: Highlight
  26. 26. GoogleMaterialDesign Highlight
  27. 27. Visual Hints #7
  28. 28. How should I use it? Answers the question: Visual Hints
  29. 29. BarthelemyChalvet Visual Hints
  30. 30. Emotional engagement #8
  31. 31. How do I feel when I use it? Answers the question: Emotions
  32. 32. Emotions
  33. 33. Put your hand on a hot stove for a minute, and it seems like an hour. Sit with a pretty girl for an hour, and it seems like a minute. That's relativity. — Albert Einstein Emotions “
  34. 34. Creativedash Emotions
  35. 35. Emotions GoogleMaterialDesign
  36. 36. Readme.io Emotions
  37. 37. What to Avoid
  38. 38. VladyslavTyzun What to avoid
  39. 39. When Should I Add Animation?
  40. 40. As early as possible When should I add animation?
  41. 41. Prototype, prototype, prototype
  42. 42. Dribbble.com Hoverstat.es Codrops (tympanus.net/codrops) Artofthetitle Be Inspired!
  43. 43. Apple Keynote Adobe After Effects Framer InVision Axure 8 Flinto Tools for Prototyping Animation More exploratory More tangible
  44. 44. Apple Keynote Tools
  45. 45. Adobe After Effects Tools
  46. 46. Framer Tools
  47. 47. InVision Tools

×