Copy
Psychology behind emotive animation
The UI Animation Newsletter

Can a Triangle Really Be Angry?

As humans, it’s common for us to anthropomorphize — or assign human traits and motivations to — animated objects. Taking this 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 animations convey an emotion or mood.

A set of animated simple shapes

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.

Now onto this week’s links and resources,

- Val Head   

UI ANIMATION OF THE WEEK
>Descent Spring Collection

Descent Spring Collection

The floaty motion of each piece of clothing and the diagonal motion of the transitions makes this a fresh take on the idea of a carousel. The diagonal motion is carried through nicely in the page transitions to the details on each piece as well which makes it that much more effective.

SPONSOR: AN EVENT APART

Val Head at An Event Apart
Set yourself Apart 
Learn advanced techniques, absorb new ways of thinking, and find deep creative inspiration at An Event Apart—the leading conference for web & interaction designers & developers. To get a better idea of the kind of things you learn at AEA, check out this free hour-long video featuring the UI Animation Newsletter’s own Val Head—and save $100 on registration just for visiting!
INSPIRATION
Abstract Sticker Set

Abstract Sticker Set
A lovely bit of motion work by J-Scott bringing a set of geometric sticker designs to life with animation. 

Force Directed Graph

Force Directed Graph
A 3-dimensional representation of a force-directed data layout using ThreeJS and WebGL. The structures it creates are really lovely, and you can switch out the data sets to see different relationships and structures. This is some fancy looking data.

Stitch Fix Algorithms Tour

Stitch Fix Algorithms Tour
Stitch Fix uses animation to show the connection between the data, their consultants and their customers during the clothing selection process. It’s interesting to see how they approach animating some of the more complex concepts.

 

LEARNING

Squash and stretch in AE
A detailed tutorial on achieving squash and stretch by School of Motion. The tutorial shows how to implement the classic animation principle in After Effects but the design considerations he describes throughout apply to any technology, especially in the first 7 minutes.

 

Off canvas navigation with CSS Grid
CSS Grid is starting to arrive. And if you’ve been wondering how Grid might affect some common animation patterns, this tutorial starts exploring exactly that.

TOOLS

Tumult Hype 3.6 released
At least a few people I’ve talked to have suggested Hype for prototyping animations. It was built more for things like banner ads and standalone animations, but I can certainly see how it could be useful for prototyping too.

 

Drag and drop Morph Machine
A handy tool/visualizer for SVG morphing animations by Chris Coyier that uses Greensock’s MorphSVG behind the scenes. There’s also this handy tool for visualizing how to shape morph SVGs the “hard” way where you have to match the number of path points across shapes. Between the two of these you could spend a whole afternoon just morphing shapes around!

 

Animista
An extensive CSS-based animation library by Ana Travas that lets you visually customize animations in the editor and download a custom collection of CSS animations to use.

 

UPCOMING WORKSHOPS

Web Animation Workshops Chicago
April 13 -14, 2017
Learn everything you need to know about coding beautiful web animation with Val Head and Sarah Drasner. Only 5 tickets left!

 

Designing for Animation and Motion Workshop
Monday, May 1
Learn how to design and prototype animations with purpose and style.
Use code "valuxi" and save $300 on your ticket.


Animating the User Experience Workshop
May 10th, 2017
Pixel Up Conference in Cape Town

 

Copyright © 2017


You can update your preferences or unsubscribe from this list here.