Your SlideShare is downloading. ×
  • Like
Web animation, interaction and user experience
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Web animation, interaction and user experience


How web animation and interaction can effect the human experience in user experience? …

How web animation and interaction can effect the human experience in user experience?
When and how to use it.

Published in Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Saya Behnam Design 4 Future @saya4
  • 2. Animation, Interaction and User Experience
  • 3. • Guess what these images have in common?
  • 4. What is Similar Between Cartoon Animation and Web Animation? They may look a lot different but when you examine the fundamental concepts portrayed, there are some commonalities: • Both use human behavior pattern to engage users • Both try to make the interface easier to understand and more pleasant to use • Both use motion in order to convey a message or emotion in a short amount of time For example • Blurring and bouncing keep the object on the stage and at the same time gives a moving effect • Easing in and out in transition helps users to comprehend the movement essence better • Squash and stretch technique
  • 5. Squash and Stretch “Apple UI designers have learned how to grab your attention using a classic physical animation technique called squash and stretch. Think of a cartoon nose squishing exaggeratedly as it bumps into a wall, then going pop! as it pulls away—that’s squash and stretch. Animators have been using it for decades to give their drawn figures depth and weight. It’s entertaining, too.”
  • 6.
  • 7. Animation and Human Experience Animation engages the elements of time and movement that deeply rooted in human behavior and memory patterns. Many actions on the web mimic real interaction, creating trust, recognition, and lower risk for users to interact or get involved in the site. Pleasure and fun is important factor to keep users mind fresh and ready to continue their interaction and search with the platform.
  • 8. • Static Sign up Form
  • 9. In this form, when you make a mistake on the form, it just give you an error in red. However, this website shakes when a mistake is made: This is similar to human action when something is wrong.
  • 10. Have you noticed what people say when they encounter recognizable and familiar icons, images, or interfaces? Terms like “Oh Sweet,” “Cute,” or “Cool”… What a great way to humanize technology!
  • 11. What Can Animation Do? • Web animation and interaction can change or set a context for your interface: • It can be triggered by user or not • Time and movement create a new engagement for users
  • 12. The most effective animations should be:  As short as possible  Improve functionality or recognition  Not designed JUST for play Web animation normally used in: • Transitions • Rollover • Nav menus, list items • Captions • Buttons
  • 13. Form and Function • In many cases, our brain combines the form and function. These become so integrated that it is very hard to use one with out the other like rotation and knob:
  • 14. •
  • 15. Bouncing
  • 16.
  • 17. Information Architecture • Animation cuts the clutter and gives bits of information a little bit at a time • Animation can compile a high volume of information in a small and limited interface area
  • 18.
  • 19. This can be a simple way of showing information on a page – Clicking each takes you to the next page
  • 20. • Lets compare with this: •
  • 21. Animation , Menu Bars and List Items
  • 22. • Wacom sliding menu •
  • 23. • In Screen: and Off Screen
  • 24.
  • 25. Another excellent way of using the interface space with animation
  • 26. •
  • 27. • Please review the act of “Opening up” and “Revealing” in this menu list item
  • 28.
  • 29. • The process and interaction makes users go to the page to finish their discovery
  • 30. • See the ease of using the list item and how other areas disappear to create more focus on menu •
  • 31. Moving numbers gives life to a calendar: •
  • 32. Transitions
  • 33. • The style, movement and format of the transition can set visual and emotional elements •
  • 34. • • Check the timing and ease of the transition
  • 35. •
  • 36. • • With every mouse action, one part of information is added to the site
  • 37. Guiding
  • 38. Guiding role •
  • 39. Captions
  • 40. •
  • 41. • • Or
  • 42. Storytelling
  • 43.
  • 44. Conclusion • With CSS3 and JQuery it is possible to use interesting animations on different pages. • Keep animations short, with clear meaning • Include animations in content-heavy pages to sort the information better for users.
  • 45. List of Handy Resources • • • • • • • • • • •
  • 46. Credits • • 23764_a_7c2202_a_7c9187_a_7c20407&gclid=COfSqqKzlLsCFTEV7Aod6j4ALg • • • • • • • •
  • 47.