https://habitify.co/

The power of animations in UX design

How to improve user experience

Sébastien Seghers
4 min readApr 7, 2017

--

Hey you ! Are you a designer ? That’s perfect ! you’re on the right article. Take a coffee and start read this short story to improve your futur projects !

The biggest problem for an Ux Designer today is to solve user problems. Putting yourself in the place of users will help you understand people’s behavior and feels.

There are two big ways to improve user experience on your creative project :

1) — Building an user friendly interface. (no bullshit) (searching issues to problems)

2) — Animations & transitions (help people understanding their movements)

The main role of animations & transitions

Animation

The goal of animations, instead of being nice to see, isn’t entertaining the user, but they are helping the user understand what’s going on or how to use your app/website most effectively.

It can influence behavior, communicate status, guide the users attention and help the user see the results of their actions.

Animations also need to be intuitive. People have to feel comfortable when they surf on your app/website. By building a nice animation path, you make people starting to trust in you.

But don’t make too many animations. Remember that animations are fixing problems. It’s not only for the visual.

Transition

Transitions help users understand the pace and flow of an interface. It also helps guide the user to the next step of an interaction.

Smoothing movement of objects, content & others are the key to build a great user experience design.

Users are always taking care of details. They do it unconsciously. So be sure to check your project thousand times and to ask feedback !

Always remember this : “show, don’t tell”

Some examples below

⇨ Animated filter menu

http://blog.rillusion.com/

⇨ Animated Alarm menu

http://blog.rillusion.com/

⇨ Animated select buttons

http://blog.rillusion.com/

⇨ Animated motion design

http://blog.rillusion.com/

⇨ Animated login & homescreen

http://blog.rillusion.com/

⇨ Animated app workout

http://webstoryboy.tistory.com/

⇨ Animated navigation aside

http://webstoryboy.tistory.com/

⇨ Animated football app

http://webstoryboy.tistory.com/

⇨ Animated menu

http://webstoryboy.tistory.com/

⇨ Animated dashboard app

http://webstoryboy.tistory.com/

When material design and animations meets

After all those examples you should understand what I’m talking about. Animations are very important in good UX.

What is material design ?

Material design means objects who looks like familiar to us. Those objects are usually those ones we find everywhere in our lives.

Let me take an example : If you want to write a publication on an app, most of time you will find a pen icon for describing “writing action”. This is material design.

People must understand immediately your icon or the action you want them to make on your website/app. To enhance it, we use material design as a landmark.

Conclusion

Animation are powerful when used in a specific way. It’s really important to consider when an animation is and isn’t appropriate. We need to embrace the motion from the very beginning and think of it as natural constituent of our design, because design is more than just about visual presentation.

Do not try to be original, just be good.

Thanks for reading girls & boys ❤ (share & like)

If you want to follow me & stay tuned, keep this way :

--

--

Sébastien Seghers

UX/UI Designer. Based in Brussels, Bel. I like crafting digital stuff & beautiful user experiences. Also Science thinker in my free time. Twitter : @S_Seghers