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
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
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
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
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
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
