Jan 18, 2019
Building Brand Loyalty and Reducing Anxiety with UI Animation
Turn moments of anxiety into opportunities to delight users and build emotional bonds through animation.
It’s crunch time, baby! You have a deadline. You’re running to a presentation and need to print something (are we still printing in 2019?! ). It’s really important.
Does the printer work? Hahaha — not a chance!
Is it out of ink? Of course it is, and the driver has magically uninstalled itself. Surprise! Your simple task of “print this now” has been upgraded to a 12 chapter side quest. Welcome to your glorious life, brought to you by technology.
Many seemingly simple user journeys are littered with micro-interactions that put users in emotionally vulnerable positions.
Do I remember my password? Was it my bullet-proof “123456”…? Did that web app really save my changes? Was my shared document sent? Where did that notification disappear to? How do I get it back?
That’s a lot of little moments of doubt and anxiety to deal with — especially when using an interface your users aren’t familiar with. It’s our job as designers to judo-flip these moments of anxiety into moments of delight and moral support for our users.
An opportunity for delight is present anytime our user is facing anxiety and is surprised by an especially positive outcome.
These moments of anxiety are some of your best opportunities to create an emotional bond with your users. They are vulnerable. Let them know you’re there for them. Showing empathy and helping your user reduce their anxiety through thoughtful copywriting, interface design and animation can evoke a kind of joy that takes a product to the next level.
Let’s look at some common anxiety inducing micro-interactions and some animations that help turn them into moments of delight. Then we’ll show you how to create this Save button animation using Sketch and Flow.
Submitting & Sending
The simple act of sending an email, a file or posting something can carry with it all sorts of anxiety: Did I do everything right? Am I sending this to the right people? Will it be well received? Will it be received, period?!
Depending on the kind of product you are designing, you may have no way to give your users definitive answers to these questions. In lieu of that, you can at least show empathy for their plight and then help them celebrate when the micro-interaction is complete.
These famous examples from MailChimp’s “Send Campaign” workflow have made the rounds on the old interweb many times — and with good reason, they’re terribly charming! These animations communicate empathy and camaraderie in a moment of uncertainty. Boom! An emotional connection is made.
Saving
With “ever-saving” web apps like Google Docs increasingly ruling the day, the act of saving your work is becoming more and more automated. Unfortunately, that automation often comes with some ambiguity. Do I need to manually save my work in this particular app? Did it actually save? Ok, but did it really actually save? Is my work safe?!
The example below is a Save button from a Sticker-Maker app and does a good job answering these burning questions with some simple animated cues:
- The button press is followed by crisp, immediate animation. My wish to “Save” has been acknowledged. I’m sure things are happening.
- Ok, but is it really doing something? The “Smiley Face Progress Bar” is objectively adorable, makes the process of saving feel more tangible and assures me that it’s actually being done. Remember, I’m fragile. Hold me.
- Finally, the checkmark at the end gives me the soul-soothing confirmation that my attempt to save has been successful beyond a shadow of a doubt. And checkmarks feel good — so it helps me celebrate, in a small way.
Logging In
Let’s be honest, the act of logging-in to anything is often a pain in the ass. The whole situation is ripe with opportunity for spelling mistakes, forgotten passwords and the dreaded Reset-Your-Password side quest.
Anything you can do to make this process more enjoyable is sure to delight your users, as long as it doesn’t impede the efficiency of the task.
The animation on this old login form from CodePen does a wonderful job of this:
System & User Errors
You know, the trouble with interfaces is all the humans. Namely, the humans that design them and the humans that use them. They’re all error prone. ( Don’t worry, not you, you’re perfect. ) So try as you may, errors will occur and they aren’t generally pleasant experiences.
Animation is one of the many great tools at our disposal to try and salvage these uncomfortable moments.
The example below uses animation to make a user error feel surprisingly human. The user has failed to fill out the form before clicking “Pay” and instead of presenting them with an ornery error message, this modal simply shakes its head: “Nope.” The interaction is clear, universally understandable and surprisingly human.
The only thing worse than suffering your own errors is dealing with system errors. This example below is Google Chrome attempting to improve a situation it can’t remedy: the user’s lack of an internet connection.
If a user presses the space button after being presented the “Unable to connect to the Internet” screen, they are rewarded with a mini-game featuring an adorable dinosaur. If that’s not delightful, we don’t know what is. While this is more of an easter egg than a standard interface animation, it’s still another great example of the power of surprise and humour in a moment of frustration.
Animate Your Own Save Button
Now that we’ve explored some of the most common micro-interactions that cause anxiety, you can create your own delight-inducing, anxiety-reducing “Save” button. We’ll show you how to animate the button below, designed in Sketch, in just 5 minutes:
If you are a Sketch user, then Flow is the best animation tool for you. Flow is incredibly easy to learn and integrates with Sketch to animate your interfaces and even export them to production-ready code developers can actually use.
Let’s do this:
Step 1. Download Flow
Download a 30-day free trial for Mac
Step 2. Start the Tutorial
Related Articles
Embracing Your Animated Future
A UX Designer’s guide to learning UI Animation and animating Sketch designs.
About MovingUI
MovingUI is a publication for UX Designers learning UI Animation. It is brought to you by Flow, a tool for animating Sketch files for iOS.
