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

  • 533 views
Published

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

Views

Total Views
533
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
20
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Saya Behnam Design 4 Future @saya4 www.design-future.com info@design-future.com www.design-future.com
  • 2. Animation, Interaction and User Experience www.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 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. 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 Form www.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/htTzMrMIEJa www.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 users www.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/67699235470 www.design-future.com
  • 15. Bouncing www.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.html www.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 page www.design-future.com
  • 20. • Lets compare with this: • http://useyourinterface.com/post/68099723320 www.design-future.com
  • 21. Animation , Menu Bars and List Items www.design-future.com
  • 22. • Wacom sliding menu • http://www.wacom.com/en/us/business www.design-future.com
  • 23. • In Screen: and Off Screen http://h5bp.github.io/Effeckt.css/dist/#0 www.design-future.com
  • 24. http://h5bp.github.io/Effeckt.css/dist/#0 www.design-future.com
  • 25. Another excellent way of using the interface space with animation www.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 item www.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/4 www.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/events www.design-future.com
  • 31. Moving numbers gives life to a calendar: • http://www.olakvernberg.com/events www.design-future.com
  • 32. Transitions www.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 transition www.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 site www.design-future.com
  • 37. Guiding www.design-future.com
  • 38. Guiding role • https://vine.co/v/htbYvziYi0p www.design-future.com
  • 39. Captions www.design-future.com
  • 40. • http://h5bp.github.io/Effeckt.css/dist/#0 www.design-future.com
  • 41. • http://codepen.io/rexkirby/pen/yjxso • Or https://www.namesforchange.org/ www.design-future.com
  • 42. Storytelling www.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/blog www.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=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. www.design-future.com