Flag

We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Get exclusive access to thought-provoking articles, bonus podcast content, and cutting-edge whitepapers. Become a member of the UX Magazine community today!

Home ›› Design ›› Biological Motion and Happy Interfaces

Biological Motion and Happy Interfaces

by Alex Faaborg
4 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

Using biological motion animation to create expressive, happy products and experiences.

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.

Mac OSX Finder IconAs 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.

Pixar LampIn 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:

Mac OSX icon bounceBut 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.

iPhone scrollingThis 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

post authorAlex Faaborg

Alex Faaborg
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.

Tweet
Share
Post
Share
Email
Print

Related Articles

Discover how digital twins are transforming industries by enabling innovation and reducing waste. This article delves into the power of digital twins to create virtual replicas, allowing companies to improve products, processes, and sustainability efforts before physical resources are used. Read on to see how this cutting-edge technology helps streamline operations and drive smarter, eco-friendly decisions

Article by Alla Slesarenko
How Digital Twins Drive Innovation and Minimize Waste
  • The article explores how digital twins—virtual models of physical objects—enable organizations to drive innovation by allowing testing and improvements before physical implementation.
  • It discusses how digital twins can minimize waste and increase efficiency by identifying potential issues early, ultimately optimizing resource use.
  • The piece emphasizes the role of digital twins in various sectors, showcasing their capacity to improve processes, product development, and sustainability initiatives.
Share:How Digital Twins Drive Innovation and Minimize Waste
5 min read

Discover how venture capital firms are shaping the future of product design — and why experienced design leaders need to be consulted to ensure creativity and strategy aren’t left behind. This article delves into the power VCs hold in talent acquisition and team dynamics, highlighting the need for a collaborative approach to foster true innovation.

Article by Darren Smith
How Venture Capital Firms Are Shaping the Future of Product Design, & Why Design Leaders Need to Be Part of the Solution
  • The article explores how venture capital (VC) firms shape product design by providing startups with critical resources like funding, strategic advice, and network access, but often lack an understanding of design’s strategic value.
  • It discusses the impact of VC-led hiring practices in design, which can lead to misaligned job roles, undervalued design leadership, and teams focused more on output than innovation.
  • The piece calls for a collaborative approach where design leaders work alongside VCs in talent acquisition and strategic planning, establishing design as a key partner to drive product innovation and long-term brand success.
Share:How Venture Capital Firms Are Shaping the Future of Product Design, & Why Design Leaders Need to Be Part of the Solution
8 min read

Discover the journey of design systems — from the modularity of early industrial and printing innovations to today’s digital frameworks that shape user experiences. This article reveals how design systems evolved into powerful tools for cohesive branding, efficient scaling, and unified collaboration across design and development teams. Dive into the history and future of design systems!

Article by Jim Gulsen
A Brief History of Design Systems. Part 1
  • The article offers a historical perspective on design systems, tracing their origins from early modularity concepts in industrial design to the digital era, where they have become essential for consistent user experiences.
  • It highlights the evolution of design systems as organizations sought ways to streamline UI and UX elements, allowing teams to maintain cohesive branding while speeding up development.
  • The piece draws parallels between the development of design systems and pivotal moments in history, especially in print technology, where breakthroughs transformed access and consistency. These precedents show how modern design systems evolved into essential tools for business value.
  • It emphasizes how modern design systems empower teams to scale efficiently, fostering a shared language among designers and developers, and promoting a user-centered approach that benefits both businesses and end-users.
Share:A Brief History of Design Systems. Part 1
16 min read

Join the UX Magazine community!

Stay informed with exclusive content on the intersection of UX, AI agents, and agentic automation—essential reading for future-focused professionals.

Hello!

You're officially a member of the UX Magazine Community.
We're excited to have you with us!

Thank you!

To begin viewing member content, please verify your email.

Tell us about you. Enroll in the course.

    This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and