Understanding Animation in UI/UX Design

As we continue working on our animations for project 2, I became curious of how animation is used in the applications on our devices we use today. I have come across this insightful article on Medium (it seems that anything tech related ends up on a Medium blog post).

The most interesting thing I read in this article is using an animation to manipulate the user’s perceived time performance. The article explained that the Slack application on an iPhone takes about “2 seconds before you get to see content,” and Slack works around this performance constraint by creating a loading animation screen.

Slack’s ingenious loading animation

Instead of having the screen just be a blank white page for the entire loading period, the Slack app transitions to a screen where the slack logo appears at the header and the content of the screen is substituted with a blank translucent blocks that look like content. Then when the actual content loads, it replaces the fill-in animation, creating an effect that push the users believe the content just loaded instantly.

The article also presented an example where animations may be distracting instead of helpful. In this example below, though the animation is beautifully done, the animation may distract the user to look at the top of the screen instead of the content they are interacting with below.

Animations that are added without much thought may become distracting instead of helpful

This article helped me to realize that animations are like seasoning. People should use them sparingly because too much can make distract from the intended experience. Learning this, I reflected on what I am specifically animating in my project 2. I aim to make my animations economical, so that each animation adds to the viewing experience, instead of just being an animation that is present just for the looks.

Reading this article has made me appreciate animation more because the explanation of what effect animation can have in UI/UX design reveals how much thought goes into making an app “look good.” I hope to be able to pick up on some of the techniques detailed in this article in the apps I use everyday.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s