Enhance UX with Animations

by KikkertTorben 2015.02.13

I would like to talk about how Animations in Apps can help enhance the user experience.

 

Animations can bring life (personality / character), emotion (fun, serious etc.) and attention (Visual attention) to the App. Animations in Apps has been around for years, and smartphones had standard animations for screen transitions, button clicks etc. for a long time. But in recent years custom animations have been used more and more to enhance the user experience and give the different Apps an edge over its competitors.

 

250px-Book_the_illusion_of_lifeLong before the smartphone, animations were used to bring life to cartoon characters. In 1981 Disney published the book The Illusion of Life, it contained Disneys 12 basic principles of animation. The same principles help App creators create custom animations with purpose to enhance the user experience.

 

1. Squash and stretch
2. Anticipation
3. Staging
4. Straight Ahead Action and Pose to Pose
5. Follow Through and Overlapping Action
6. Slow In and Slow Out
7. Arcs
8. Secondary Action
9. Timing
10. Exaggeration
11. Solid Drawing
12. Appeal

 

To demonstrate some examples I would like to use Facebook Paper, created by Facebook Creative Labs.

 

Staging example

like

Secondary Action example

post

 

 

 

 

popThe tools or libraries for implementing these animations in Apps has also evolved. Libraries like facebook pop (used to drive the animations in Facebook Paper) and spring has made it more simple to implement animations.

Here is a simple example of a spring animation using facebook pop in an iOS swift project.

 

popexample

 

spring

 

Links to some of the resources used in this blog post :

 

http://en.wikipedia.org/wiki/12_basic_principles_of_animation

https://www.facebook.com/paper

https://github.com/facebook/pop

 

Other links :

 

https://github.com/MengTo/Spring

お問い合わせ

掲載記事に関するあらゆること、お気軽にお問い合わせください。ご相談は無料です。