Biological Motion and Happy Interfaces
Quick: which operating system do you think is happier, Windows or OS X? Even if you've already formed an opinion, you might still be wondering, "What kind of inane question is that?" After all, how could software possibly be happy? This is nonetheless one of the reactions I get when using products that are designed by Apple in Cupertino. It's not specifically that the product is making me happy as much as I have this vague feeling that the product itself is somehow happy. The otherwise rational engineer in me knows this is silly, but it is perhaps nonetheless irrationally true.
If visual design speaks to the user's aesthetics, and interactive design to the user's cognition, then this seems to be something else. Aside from the notable exception of Don Norman's Emotional Design, this is an aspect of design that we don't often think about: playing to the user's awareness of emotion.
As humans we have a tendency to anthropomorphize inanimate objects, particularly ones we spend a lot of time with. Perhaps any readers with a background in psychology can provide theories for why we exhibit this irrational behavior in the comments below. But regardless of why, it's something we as a species do. We name our cars, we attribute gender to things that have none, and we think electrical outlets have faces (they look sad[1]). Even objects incredibly far from the depths of the uncanny valley can be a bit anthropomorphic—things like a file manager, or even a desk lamp.
In its very early days, Pixar put a lot of effort into trying to understand what properties made something appear alive. They spent a considerable amount of time intently studying the way animals and humans moved, and they quickly picked up a few basic properties. For instance, there are a lot of accelerations and decelerations in biological movement. This is true even if we are trying as hard as we can to move only at a constant velocity (e.g., when performing a very serious dance commonly referred to as "doing the robot"). If you take these properties of biological motion and apply them when animating a simple inanimate test object—say, a basic desk lamp—it magically becomes alive once you introduce acceleration and deceleration.
When the lamp looks up at you, it is suddenly looking at you; the bulb is an eye, the shade a head. If you get the lamp to jump up and down a bit, the next thing you know it's the happiest lamp you've ever encountered:
But it isn't just lamps. Why throw up a boring dialog box in the center of the screen when you can get capture the user's attention with a jumping icon? The icon doesn't have much to say ("replace the file on the server?") and it looks like a tiny truck, but nonetheless the way it moves reminds us of the way a dog jumps up at you, drooling and completely happy.
Another aspect of biological motion is that we tend to decelerate before we collide with another object. This of course makes sense as we can't move at a constant velocity even when we try to dance like a robot, and running into stuff at high velocities hurts, so it's really best to slow down first.
This is one of the things that struck me about the design of the iPhone OS scrolling model. It accelerates and decelerates, and if you pull something too far away, it is sure to slow down as much as possible before the collision. And while the iPhone and iPad application icons don't bounce, they do have a sort of wiggle dance when you move them around.
These are all just animation primitives and simple physics models. When applied to software they are subtle, they don't go nearly as far as to create a happy and curious lamp. But they manifest in ways that make products simply easier for us as emotional irrational humans to love (or at least makes it easier to occasionally forgive them).
Animation in software can serve a lot of important purposes. Animation can draw the user's attention, help the user build a mental model of navigation events, and indicate changes in state. But beyond all of those very functional ways that UX designers can employ animation in their work, it can also impact users on an emotional level: it can make your product seem happy, and ever so slightly alive.
[1] By this I mean the North American 15 A/125 V grounded outlet looks sad. Just one tiny change in the initial design to the grounding socket and the entire continent could have been filled with happy outlets.
Pixar Lamp Photo by Matthew Cachia
ABOUT THE AUTHOR(S)
Alex Faaborg is a principal designer at Mozilla, where he focuses on the visual and interactive design of Firefox. He also contributes to Mozilla Labs, which explores the next stage in the evolution of the Web and its long term future. He has extensive experience in artificial intelligence, user interface design, and cognitive science and is a graduate of the MIT Media Laboratory.
Add new comment
Comments
If the MS paper clip was a table lamp, it wouldn't be popular either. The annoyance factor was way too high on the paper clip.
Love this, and agree. It's not about animation... it's about what animation can imply (in the right context): life. I used to work in animation years ago, and the 'bounce' in the iPhone scroll interface was the first thing in the original keynote launch that caught my breath. It had the same effect on much of the audience. I wrote about this lively bounce at the time:
http://headrush.typepad.com/creating_passionate_users/2007/01/iphone_and_the_.html
I can't agree more with this. Sadly, I have had to fight to justify the use of animation on a number of occasions. The problem is sometimes that the audience you are trying to convince chooses not to see it. There are very few engineers that want to believe that the most important part of the software from a user perspective is the UI. On several occasions, I have presented statistics from user/customer surveys that clearly indicate that a friendly easy-to-use interface is the highest priority and have seen/heard engineers simply say "That can't be true" and simply ignore the facts and continue to work cobbling together feature after feature.
Outside of software it is very easy to see the importance. If you have ever seem someone effectively use a sock puppet, you would notice that the thing that makes it alive is the natural way it moves. A puppet that looks exactly like a living thing but doesn't move like one is not nearly as effective.
"If visual design speaks to the user's aesthetics, and interactive design to the user's cognition..."
This is a false set of categories. Visual design should serve cognition just as much as it should serve aesthetics. To imply that interactive design (and thus things people have to interact with) is the place where cognition comes into play is to ignore tons of great thinking around information display, including the work of Edward Tufte and stuff like http://worrydream.com/MagicInk/ (an excellent paper; highly recommended), not to mention the entire history of books.
The reverse is true as well of course; interactive design needs to speak to aesthetics as well (see the burgeoning field of touch and direct manipulation, both with very strong aesthetic components).
Good notes about animations though; it's something that's frequently overlooked. Anyone know where one could find more information on the math used for easing and other "physics-like" animation behavior?
It's funny to see these notions knocked; but having had to establish these basic facts again and again in my career, what in theory should be blindingly obvious instead becomes a subject for discussion, and it heartening to read.
I mean, any UI designer knows that every last pixel matters: regardless of whether a user can tell if a table is broken or not, or if a form is 1px out of alignment or not - it's not up for debate as to whether these things underwrite a successful UI and make a user feel confident and an interface seem more robust.
Yet again and again UI designers have to argue to have animation - an absolute must whether we like it or not - underwrites UX and is a huge underpinning of the way an interface 'feels'
I recently proposed creating corporate style guides for animation easing, speed and cohesiveness, so that all online ads and the site itself would start to 'feel' the same. To me it was as obvious as having a coporate font - more so, to me, the people saying "but the user doesn't see that" were being as wrongminded as someone saying 'but ordinary people can't tell one font from another"
They don't have to see it - in fact, the whole idea is they don't they simply 'feel' it. For those who scoff at this notion, all I can say is I think your process is sloppy, and I think you should look at raising the bar in terms of what you feel is an 'ireelvant' pixel in your UI.
Paperclip and hopping icons aside, I think the focus here is not so much encouraging anthropomorphism in a computer or interface, as it is allowing that 'happy interface' idea to grow, and inevitably 'spread' in a sense to the user. If what you are working on seems happy to be worked on, it should logically make you feel a little happier or more appreciative of it. The major issue I have with that idea is where these 'happy interfaces' are applied. More specifically, to consumption based products like the iPad, rather than the individual applications or software that we all spend more time working in. As much as i love Adobe Photoshop, it always comes across as cold and demanding when compared to something lighter and 'happier' like Alias Sketchbook. Are we always going to have to choose between a more functional interface and a happier one? I guess you can't have your cake and eat it too.
Since the paper clip was mentioned a few times:
It seems OSX animations and the clip are very different percepted:
-Paper Clip: Seemed like an intelligent assistant first, than it turned out that it was dumb: Its far less human than we thought at first.
-The jumbing icon seems like an icon first, is still an icon afterwards, but a "happy" one: its a bit more "human" than we thought at first.
It makes a lot of sense that animation and anamorphism speaks to us. And I think that it's more effective than it ever was. Like the example given on the form in Mac OS X. It gives interfaces a more human feel, without too many words needed.
I don't think the paperclip could've done it right ever, since the rest of the interface wasn't user friendly at all. It was way too hard to interact with it, or to get it out of the way for ordinary users.
You sir get it. I have been trying to say this for years but for some reasons animation is still viewed as "unnecessary eye candy". My belief is that designers that hang around engineers all day start to soon think like engineers. Design turns into an exercise where you have to follow certain rules that wise men before have set - the opposite from what it should be.
um. jumping truck animations? a 'happy' OS? i'm all for positive emotional experiences when using/designing applications and software, but those suggestions are inane. sounds like an apple fan rationalising/evangelising their own preference under the thin guise of usability.
no thanks.
Nice article. Something often missed is how economical and universal good animations can be. When the Mac's sign-in dialog shakes to tell you you've entered the password incorrectly, there's no text, no nothing -- as fun as it is effective.
I detailed a number of the animations in Mac OS X at .
Good point.
As another example i can say:
It was all ways fun to learn something in a playful way with animated characters!
But, MS Office paper clip didn't became very popular.
Related Articles
