1. Saya Behnam Design 4 Future @saya4 www.design-future.com info@design-future.com www.design-future.com

2. Animation, Interaction and User Experiencewww.design-future.com 3. Guess what these images have in common?www.design-future.com 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 www.design-future.com 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 awaythats squash and stretch. Animators have been using it for decades to give their drawn figures depth and weight. Its entertaining, too.www.design-future.com 6. www.design-future.com 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. www.design-future.com 8. Static Sign up Formwww.design-future.com 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. https://vine.co/v/htTzMrMIEJawww.design-future.com 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!www.design-future.com 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 userswww.design-future.com 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 www.design-future.com 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:www.design-future.com 14. http://useyourinterface.com/post/67699235470www.design-future.com 15. Bouncingwww.design-future.com 16. www.design-future.com 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 http://www.newyorker.com/sandbox/business/citi-bike.htmlwww.design-future.com 18. www.design-future.com 19. This can be a simple way of showing information on a page Clicking each takes you to the next pagewww.design-future.com 20. Lets compare with this: http://useyourinterface.com/post/68099723320www.design-future.com 21. Animation , Menu Bars and List Itemswww.design-future.com 22. Wacom sliding menu http://www.wacom.com/en/us/businesswww.design-future.com 23. In Screen: and Off Screen http://h5bp.github.io/Effeckt.css/dist/#0www.design-future.com 24. http://h5bp.github.io/Effeckt.css/dist/#0www.design-future.com 25. Another excellent way of using the interface space with animationwww.design-future.com 26. http://capptivate.co/2013/11/19/445/www.design-future.com 27. Please review the act of Opening up and Revealing in this menu list itemwww.design-future.com 28. www.design-future.com 29. The process and interaction makes users go to the page to finish their discovery http://ui-animations.tumblr.com/page/4www.design-future.com 30. See the ease of using the list item and how other areas disappear to create more focus on menu http://www.olakvernberg.com/eventswww.design-future.com 31. Moving numbers gives life to a calendar: http://www.olakvernberg.com/eventswww.design-future.com 32. Transitionswww.design-future.com 33. The style, movement and format of the transition can set visual and emotional elements http://designtransitionsbook.com/www.design-future.com 34. http://capptivate.co/2013/11/23/potluck/ Check the timing and ease of the transitionwww.design-future.com 35. https://www.namesforchange.org/www.design-future.com 36. http://www.quechua.com/campaigns/lookbook-spring-summer/#/travel With every mouse action, one part of information is added to the sitewww.design-future.com 37. Guidingwww.design-future.com 38. Guiding role https://vine.co/v/htbYvziYi0pwww.design-future.com 39. Captionswww.design-future.com 40. http://h5bp.github.io/Effeckt.css/dist/#0www.design-future.com 41. http://codepen.io/rexkirby/pen/yjxso Or https://www.namesforchange.org/www.design-future.com 42. Storytellingwww.design-future.com 43. http://www.design-future.com/no-3-page-not-found-animation/ http://www.design-future.com/n0-6-four-doors/ http://www.design-future.com/no-2-tech-support-button/www.design-future.com 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.www.design-future.com 45. List of Handy Resources http://sixux.com/ http://hoverstat.es/ http://ui-animations.tumblr.com/ http://capptivate.co/ http://useyourinterface.com/ https://daneden.me/animate/#cta http://www.minimamente.com/magic-css3-animations/ http://dan-silver.github.io/ElementTransitions.js/ http://h5bp.github.io/Effeckt.css/dist/#0 http://www.justinaguilar.com/animations/ http://www.design-future.com/blogwww.design-future.com 46. Credits http://www.truthnhealth.com/2011/11/top-germiest-and-dirtiest-places-in-the-home/http://www.knobbery.com/Categories/Door-Accessories/Light-Antique-Brass-Door-KnockerCH10097707?utm_source=Google&utm_medium=CSE&utm_campaign=Classic%20Hardware&gdftrk=gdfV 23764_a_7c2202_a_7c9187_a_7c20407&gclid=COfSqqKzlLsCFTEV7Aod6j4ALghttp://dl.acm.org/citation.cfm?id=974941&coll=DL&dl=GUIDEhttp://ui-animations.tumblr.com/page/3http://johnkstuff.blogspot.com/2010/07/what-disney-did-best.htmlhttp://www.dreamstime.com/royalty-free-stock-photo-close-up-man-face-image10827325http://www.smashingmagazine.com/2008/08/24/45-beautiful-motion-blur-photos/http://designshack.net/articles/inspiration/20-great-sign-up-form-examples-to-learn-from/http://www.youtube.com/watch?v=qfYOeWAlhlshttp://www.design-future.com/blogwww.design-future.com 47. www.design-future.com