Delightful animations
We all love animations. On one hand, they help our eyes be guided, but they also bring a nice finishing touch, a bit of extra care, a bit of emotion; we also prefer a lively UI to a static one, a UI that gives us feedback, that interacts back with us. But, as with anything, too much will be harmful, so let’s explore a few finishing touches that can be added to an app without overwhelming it.
Changing a button’s frame and/or color on touchDown
We usually put a button’s action on touchUpInside and the reason for that is to give the user a chance to change his mind. But the physical action performed is the actual touch of the button, which is handled by touchDown. At this point, we can have the UI respond to the user’s interaction, to let them know something did happen, by modifying the appearance.
Don’t go overboard with this, though. I’d start with a scale of 0.97, a background alpha change to 0.85, a borderWidth increase of 1 or 2, or a combination of two them — more than two will be too aggressive. From here, you have many other options and to name a few: scale increase, y position change, adding a slight shadow, a ”wiggle” animation while the button is kept pressed (as if the button was asking I got your touch, what now?), a font weight increase or a background color change.
This kind of animation doesn’t have to stand out; its only purpose is to bring a nice finishing touch and to give the user the information that something did happen.
Adding to cart or similar
Just like Apple animates the add bookmark action in Safari, the same could be done when adding to cart. Guide the user’s eyes to where their action had an effect — the cart button. If you have a badge on it (most likely), animate its scale, for example, with a nice bounce effect. Or, just like Apple does, animate the whole icon and maybe the item ”into” it, as well.
This, again, serves as a nice finishing touch and makes the UI respond to the user’s action, but it also serves as a ”here’s where to go next”. It helps the user be guided of what happened, but also to where the change happened. You might say ”after adding to cart 15 times, the user will know where to look for it” and you’d be right; but it doesn’t hurt to confirm it.
Call to action
With a proper hierarchy, a call to action button should stand out already. But, sometimes, that isn’t possible or it’s not enough. So an approach would be to add a subtle animation to it. It could be a pulse (scale between 1.03 and 0.97 with a slow duration and with a delay between animations), a wiggle (rotate a few degrees in quick succession, but with a great delay between them), or maybe a pulse of the background, text color, text size, border width or border color. But, again, don’t pick too many at once.
Creating, deleting and submitting
The same tactic can be done when an event or error occurs.
When submitting a form, but one of the UITextFields is empty, add a subtle shake to it, or flash its border/text to red, attracting the user’s attention to where the problem is.
If the user added a new item that already exists, add a background flash to the existing item, or maybe shake it, depending on its size, location or content — if it’s a large item, prefer something really subtle, since it will have a big impact due to its size.
When the user successfully creates an item, instead of simply reloading the UI, slide the new item in, fade it in or both; or use the built-in tableView.insertRows(at:with:) animations. The same applies for deleting an item, but in reverse.
Selection
Think of a radio button, or a checkbox. In this particular case, the animation’s only purpose is to add a nice finishing touch, as there’s not much real UX value. It does add a visual confirmation that lasts until after the finger was lifted, though. A checkbox could have its checkmark drawn, just like you draw one on a sheet of paper; a radio button could have its center filled, like so:
Tips
Looking at my post about the above radio button animation, we can see that I’ve broken the animation down into really small steps. The point is to:
- Properly understand what the animation consists of.
- Have actionable steps that are easy to implement.
- Have steps small enough that are easy to change or remove, if needed.
This can’t be stressed enough: don’t go overboard, start small. Exaggerated animations are more harmful than no animations. Start with small values, small durations and a few properties, then work your way up from there. It’s better to have something subtle that a small percentage of your users notices, than to have something obtrusive that a high percentage of your users hates (or even a small one).
A gist with a few examples can be found here and the radio button animation can be found in the control itself, here.
Happy animating!
