Web animation, interaction and user experience


Published on

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

Published in: Design
  • Be the first to comment

Web animation, interaction and user experience

  1. 1. Saya Behnam Design 4 Future @saya4 www.design-future.com info@design-future.com www.design-future.com
  2. 2. Animation, Interaction and User Experience www.design-future.com
  3. 3. • Guess what these images have in common? www.design-future.com
  4. 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. 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.” www.design-future.com
  6. 6. www.design-future.com
  7. 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. 8. • Static Sign up Form www.design-future.com
  9. 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/htTzMrMIEJa www.design-future.com
  10. 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. 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 www.design-future.com
  12. 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. 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. 14. • http://useyourinterface.com/post/67699235470 www.design-future.com
  15. 15. Bouncing www.design-future.com
  16. 16. www.design-future.com
  17. 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.html www.design-future.com
  18. 18. www.design-future.com
  19. 19. This can be a simple way of showing information on a page – Clicking each takes you to the next page www.design-future.com
  20. 20. • Lets compare with this: • http://useyourinterface.com/post/68099723320 www.design-future.com
  21. 21. Animation , Menu Bars and List Items www.design-future.com
  22. 22. • Wacom sliding menu • http://www.wacom.com/en/us/business www.design-future.com
  23. 23. • In Screen: and Off Screen http://h5bp.github.io/Effeckt.css/dist/#0 www.design-future.com
  24. 24. http://h5bp.github.io/Effeckt.css/dist/#0 www.design-future.com
  25. 25. Another excellent way of using the interface space with animation www.design-future.com
  26. 26. • http://capptivate.co/2013/11/19/445/ www.design-future.com
  27. 27. • Please review the act of “Opening up” and “Revealing” in this menu list item www.design-future.com
  28. 28. www.design-future.com
  29. 29. • The process and interaction makes users go to the page to finish their discovery http://ui-animations.tumblr.com/page/4 www.design-future.com
  30. 30. • See the ease of using the list item and how other areas disappear to create more focus on menu • http://www.olakvernberg.com/events www.design-future.com
  31. 31. Moving numbers gives life to a calendar: • http://www.olakvernberg.com/events www.design-future.com
  32. 32. Transitions www.design-future.com
  33. 33. • The style, movement and format of the transition can set visual and emotional elements • http://designtransitionsbook.com/ www.design-future.com
  34. 34. • http://capptivate.co/2013/11/23/potluck/ • Check the timing and ease of the transition www.design-future.com
  35. 35. • https://www.namesforchange.org/ www.design-future.com
  36. 36. • http://www.quechua.com/campaigns/lookbook-spring-summer/#/travel • With every mouse action, one part of information is added to the site www.design-future.com
  37. 37. Guiding www.design-future.com
  38. 38. Guiding role • https://vine.co/v/htbYvziYi0p www.design-future.com
  39. 39. Captions www.design-future.com
  40. 40. • http://h5bp.github.io/Effeckt.css/dist/#0 www.design-future.com
  41. 41. • http://codepen.io/rexkirby/pen/yjxso • Or https://www.namesforchange.org/ www.design-future.com
  42. 42. Storytelling www.design-future.com
  43. 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. 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. 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/blog www.design-future.com
  46. 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=COfSqqKzlLsCFTEV7Aod6j4ALg • http://dl.acm.org/citation.cfm?id=974941&coll=DL&dl=GUIDE • http://ui-animations.tumblr.com/page/3 • http://johnkstuff.blogspot.com/2010/07/what-disney-did-best.html • http://www.dreamstime.com/royalty-free-stock-photo-close-up-man-face-image10827325 • http://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=qfYOeWAlhls • http://www.design-future.com/blog www.design-future.com
  47. 47. www.design-future.com