“A designer who doesn’t understand human psychologies is going to be no more successful than an architect who doesn’t understand physics.” -Joe Leech
It’s probably been a while since your Psych 101 class, but we’re dusting off those cobwebs and connecting basic psychological concepts to UX animation in this lesson. Animation is engaging and helpful - but why? How does movement appeal to basic human psyche in design and development?
Pavlovian Conditioning
Many of the animations we’ve discussed are so prevalent in our web and mobile experiences that the user would be confused if they weren’t present.
For example, when there’s no log-in check mark and the page just starts loading… don’t you sit there in anticipation, waiting to see if you used the right version of your password (that you definitely don’t use for everything)?
Pavlovian or classical conditioning was theorized by Pavlov in 1897 through experiments with his famous dogs. Jim also popularized the theory in this brilliant scene from The Office.
The Office Classical Conditioning from SF Online on Vimeo.
So, what animation do we take for granted in our web and mobile experiences?
Loading animation, landing page motion, parallax scrolls, and pull to refresh all make the list. As you move through your common web and mobile experiences, think about the animation that you would miss if it wasn’t there. What assurance do you gain from simple movement in apps and on websites that if suddenly vanished, you would think you had done something wrong? To help you get started, here is a basic list of the most Popular Web Animation Techniques from UX Planet.
Placebo Effect
Now that we’ve covered some basic human needs, let’s cover basic human expectations.
The Placebo Effect is the idea that fake treatments (known as “placebos”) can actually lessen symptoms when the user believes the treatment is real. In web and mobile design, the user wants to feel like they know what’s happening next.
According to Prototypr, UX designers and developers often use “pull to refresh” animation as a placebo. In reality, the developer has no idea how long your email inbox or Instagram feed will take to load. These pull to refresh animations mimic the typical loading mechanisms that provide some kind of measurement. Usually a spinning object, this animation puts the user at ease in the same way the classic loading bar does.