Animation, Interaction and User
• Guess what these images have in common?
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
• 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
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.”
Animation and Human Experience
Animation engages the elements of time and
movement that deeply rooted in human behavior and
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.
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
This is similar to human action when something is
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!
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
The most effective animations should be:
As short as possible
Improve functionality or recognition
Not designed JUST for play
Web animation normally used in:
• Nav menus, list items
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
• 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
• 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.