What Gives UI Animations Emotion?

Can simple shapes really have a personality?

You’ve probably caught yourself anthropomorphizing — or assigning human traits and motivations to — animated objects before. I know I sure have! Turns out, it’s a pretty common thing for us humans to do. We have a funny habit of projecting human characteristics and motivations onto objects, especially ones that move. Taking this tendency into account can help you design more effective UI animations.

I sometimes show this short clip in talks to demonstrate how easily even the simplest of animation convey an emotion or mood. It’s hard not to project personalities onto the shapes in it while watching. (Of course, we feel like the shapes *have* those personalities, not that we’re projecting on to them.)

The Study

The video is from a 1944 study by Heider and Simmel in which they showed this film featuring simple geometric shapes to a group of students, then asked them to describe what they saw. Almost all of the students saw emotional motivations or personalities in the shapes.

They described the big triangle as being angry or the circle as being afraid when they watched the film. They saw intentional causality for the animations they were watching. Tony Belpaeme’s commentary of the video in this TEDx talk illustrates the result well. We know a triangle can’t have feelings, but that doesn’t stop us from interpreting its movement as if it does.

This study underscores how easily animations can be emotive. If a simple triangle can appear to have feelings by the way it’s animated, so can a button or search box or any other interface element. The shapes we animate as part of an interface have potential to project emotion and mood too. To put it another way, the choices you make around timing and easing impact the message your animations convey.

This study, and others like it, show that your audience will be interpreting the meaning or motivation of your animations on some level. The trick is being aware of this tendency and intentionally crafting your animations to convey a message that fits your design.

Digging Into the Details

If you’re interested in digging into all the geeky details of the study, you can the read full text for free on the web on JSTOR. This article on Animating Anthropomorphism: Giving Minds To Geometric Shapes is also a good read on how we tend to explain animation by either emotional aspects or the rules of the physical world.

This article originally appeared in the UI Animation Newsletter. Subscribe to get weekly web animation tips and resources straight to your inbox!