The animation of user interfaces is growing more commonplace as of late. These days, the quality of the animation is often the focus. Of course, the overall goal is to enhance the end-user’s experience via animation which is low-key and serves a practical purpose.
Today, we’d like to talk about this popular marketing trend and how to use it to best effect.
What Does Invisible Animation Mean?
The invisible animation is an animation that you don’t notice. It’s there to make it easier for end-users and to ensure that end-users are able to offer feedback if they want to. Web animation is a challenging field (versus apps which are native), so the best invisible animation is a superb blend of easing, poses, timing, and spacing.
As you may already know, the animation doesn’t display in the same way on different types of hardware. This means that compromises to animation quality are sometimes necessary to ensure that every user (on every type of hardware) has a good experience.
For example, animation which looks gorgeous on a big and tricked-out iMac may not look good on a “lesser” device. It may seem slow and disjointed. It may not display in a fast, smooth and seamless manner.
Testing out different animations on a variety of devices is important. To make the best invisible animation, you will need to make invisible animations which perform well on most types of hardware. Narrow the field with testing and then decide what to add to your final product.
Creating impressive invisible animation is all about trial and error, with a mind to offering the end-user a superlative experience. Here are some forms of invisible animation which have made the cut at our company. We use these invisible animation strategies in order to build an email that hits the targets with consumers.
Layout Drop-downs Are Sensible
When a visitor hits the “add layout” icon, a drop-down for the layout will fade in. This drop-down for the layout will come right from the button. This will highlight the fact that what just displayed is linked with the button.
We Love Sidebar Accordions
When you are able to slide other headings in a downward direction, it’s simpler to make a connection between a heading and content. As well, fading logo types within a content section (after a brief delay) will make it clear that the end-user is in a setting of the Image type.
When a visitor is waiting for a process, time may seem to drag. For example, if an end-user to waiting to get digital files via e-mail, the sidebar accordion will show that person which process is currently happening. The invisible animation will make the end-user feel that things are moving faster, although there is no actual change is how long it takes to get the file(s) in question!
Create or Copy a Layout
If a user adds or copies a layout, a new space is made quickly, and the brand-new layout will fade in via the center. This makes it obvious that a new element is now present.
Delete a layout
If an email has a lot of layouts which are very similar, the “delete a layout’ type of animation becomes a practical option. It will show which layout has been taken away, by moving email content upwards.
A Layout Controller Adds Value
When an end-user is hovering an email, you may use a layout controller to show him or her an array of controllers. These controllers will come from the layouts that they control. When an end-user sees them, he or she will know that a prospective action will alter the layout.
Please Your Clients with Invisible Animation
It’s always possible to improve on invisible animation. We’ve provided examples of invisible animation options which work for our clients and us. However, feel free to get creative or to refine the examples that we’ve discussed here. Again, if you want everything to look great on every piece of hardware, you may need to compromise. Sometimes, the most polished details will not display correctly on less-powerful devices.