Web animation, interaction and user experience

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

Animation, Interaction and User
Experience


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

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

• Static Sign up Form


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


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
users


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

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:


•

http://useyourinterface.com/post/67699235470


Bouncing


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


This can be a simple way of showing information on a
page – Clicking each takes you to the next page


• Lets compare with this:
•

http://useyourinterface.com/post/68099723320


Animation , Menu Bars and
List Items


• Wacom sliding menu
•

http://www.wacom.com/en/us/business


•

In Screen: and Off Screen http://h5bp.github.io/Effeckt.css/dist/#0


http://h5bp.github.io/Effeckt.css/dist/#0


Another excellent
way of using the
interface space with
animation


•

http://capptivate.co/2013/11/19/445/


• Please review the act of “Opening up” and
“Revealing” in this menu list item


• The process and interaction makes users go to the
page to finish their discovery
http://ui-animations.tumblr.com/page/4


• See the ease of using the list item and how other
areas disappear to create more focus on menu
•

http://www.olakvernberg.com/events


Moving numbers gives life to a calendar:
•

http://www.olakvernberg.com/events


Transitions


• The style, movement and format of the transition
can set visual and emotional elements
• http://designtransitionsbook.com/


•

http://capptivate.co/2013/11/23/potluck/

• Check the timing
and ease of the
transition


•

https://www.namesforchange.org/


•

http://www.quechua.com/campaigns/lookbook-spring-summer/#/travel

• With every mouse action, one part of information is added to
the site


Guiding


Guiding role
•

https://vine.co/v/htbYvziYi0p


Captions


•



•

http://codepen.io/rexkirby/pen/yjxso

• Or https://www.namesforchange.org/


Storytelling


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/


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.


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://www.justinaguilar.com/animations/
http://www.design-future.com/blog


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


Web animation, interaction and user experience

Recommended

Recommended

More Related Content

What's hot

What's hot (10)

Viewers also liked

Viewers also liked (12)

Similar to Web animation, interaction and user experience

Similar to Web animation, interaction and user experience (20)

Recently uploaded

Recently uploaded (20)

Web animation, interaction and user experience