Creating Usability with Motion

Tips on how to leverage your animated interactions

Static components are starting to be a thing of the past, although in some cases not all components or designs could or should be animated, there must be a balance as usual. Needless to say that movement brings life and value to designs. Animation is a useful tool to improve visual experience and to complement user experience. I’ve found easier to tap into this subject because of my background as motion designer, but there is a lot to learn when it comes to animation interactions oriented to web and mobile Applications.

This article is not intended to be the ultimate guide of animated interactions, but rather a collection of basic principles and rules, so that other designers who want to start animating interfaces don’t have to search for additional information. I hope that these tips on how to design animated interactions will be useful to you in your everyday work.

Set Your Rules

First things first, it's important to set the rules for your animations, considering equal values on the animation properties like position, opacity, scale, rotation, and so on. This also includes the UX element, mostly important the hierarchy of animations. The frames per second (fps) should also be set as a rule, that will help you start with the other ones.

Considering the technical limitations that may be implied, involving coding and implementation, we always try to bring something new regarding  animated interactions.

We start by  testing the animations and interactions based on the Design and User Experience, in order to found our rules within the aspects of animation. If we have, for example, some hover buttons with opacity and scale, we want them to be consistent throughout  all the interactions.

‍

The old adage goes, "Rules are made to be broken”, so in some cases we break our own too, nevertheless they still need to be created first, so that they can adjust and adapt to specific animations through the design, maintaining the principles we set before;

‍

‍

Set all your rules first, so they will be your guide in the need to tweak them in specific cases over the animation design. This way we make sure everything flows visually and everything is correlated and technically solid. And, of course, we have something enjoyable and functional in terms of UX and Design.

Technical Tips: Depending on the cases, we usually copy the animated properties of a button for instance and copy them in all the other buttons alike;

If we have different elements but want them with the same animated properties and values we create null objects and use them on nulls parented to the elements we want in the design;

Tip: Don’t forget to write down the values in a notepad, digital or real paper (:

Timing and Style

Timing in animation is very important, as much  in terms of interaction as in terms of animation itself. Easing is the most well known principle of animations. Easing its the designated term for the velocity of an object from A to B. For the animation not to look artificial, the object should move with some acceleration or deceleration  -  just like all live objects in the physical world..

This applies to all the animation properties, such as position, scale, etc. Similar to code the After Effects also has  its easing based on value properties, that come handy for us motion designers, when helping the developers with the code properties and values.

Generally based on the design we define the animation style. The animation styley can be bouncy, stretchy or it could be smoother and simpler.  The style is achieved by some animation principles, traditionally in classic animation there are 12 principles, but in digital animation oriented to web and mobile Applications only recently this subject comes to matter. There are no specific Principles on this field but Here you can find a really good article regarding animated interactions.

The design also plays an important role to help understand the flow the project should have. Not to mention  that the Design and the User Experience teams go hand in hand to find a balance between what looks good and what is functional at the same time, never forgetting the user.

‍

In therms of technically principles and erformance we tend to go above the 15 frames per second on the animations spite we set the project in the After Effects to 24 fps, one of the core rules. We will explore further this topic further in the next chapter, but just to keep in mind that this defines the style, too.

Bottom line:  it's important to find the rules regarding Timing and Style to maintain consistency across all interactions.

Exporting and implementing

Frames per second

Before getting into the exportation methods we will finally hint the frames per second (FPS).

Since a sprite is a larger image made of image steps, to assure a good performance and loading of the components we must have the smallest possible image in pixel size and in file size. An image corresponds to 1 fps, so if we have an animation with 2 seconds at 15 fps (frames that translates into an image per second) it corresponds to a total of 30 images for 2 seconds of that animation.

Getting to the tricky part, if we initially set our project file to 24fps, but make the animation just with 15 frames in between the 24fps, we get to reduce the image steps.But why set the project to a higher frame rate if we just use fewer frames to animate, you may ask. Simply because of the calculation and interpolation of After Effects you can achieve smoother animations, with reduced images per animation.Experience has shown me that fps must be defined from the very beginning, as we can easily adjust the best number of images for the final animation and further exportation maintaining the desired flow.

‍

‍

Curiosity

On average the human eye sees 45 to 50+ fps, but we are usually trained to see around 24 to 30 fps on screens. Movies, ads and games usually run at this frame rate, because the movement to our eyes tends to be smoother.

Export methods

Now that we have all animated interactions, with all the magic in it, we need to export them and deliver them to the next phase, the developer team.

There are a couple of ways to do it.

Video Animation

One of them is to deliver a video animation sheet with all the animation behaviour with or without the values next to each animation:

- Without values, the animation sheet is a more independent way to go for both teams, since the developer team codes and implements the animation, using the video as a guide. This method is good for a Dev team that has experience and doesn't need specific and exact values for coding and implementation. The video will be a reference for standard values that could be found in some articles and CSS websites.

- With values, it's always the way to go to make sure that the Dev team has the  precise values of the animation,and that everything is exactly aligned in terms of animation design and style.

‍

Sprites

Sprites are a method to get an animation through code. It behaves just like the sprites we used to saw in early days of 8 and 16 bit games. It’s a sequence of step by step images alongside, made into a larger image that contains the animation.

So if we move this larger image through a container very fast, we have the moving image, and that's how the magic is done!

‍

Sprites can be done in a couple of ways: horizontal, vertical, grid, diagonal and binary tree,

Horizontal and Vertical

Usually we make sprites run vertically, because it's simpler to implement, and it performs better, running and loading in browsers. We can do it horizontally also, but we found some issues regarding the size limit implied by computer graphic hardware, apparently it just can render a maximum width of 25 000 pixels. According to our own experience and after  researching in some forums, any sprite image that goes behind this size, can't be generated into to an image file, aside from its Base64 code, but even if you turn this around in terms of performance and optimization it's a wreck.

To make sprites I use a online generator, there a few but I stick to this one. All you have to do isto upload all the sequence images and the generator will automatically make the larger image.

Grid

The Grid sprite is advantageous, because not only we can limit both width and height of the image but also make it smaller in terms of file size. Although the code is a bit tricky to do the calculations, we simplify and automate using a SASS tool to calculate the coordinates and values all by itself, making it easier to further implement on the code. Check out this example by my friend and colleague Diogo Gomes.

This one is tricky to generate as we didn’t found any flawless generator for the Grids. In order to achieve the final image, we use this generator again, to create a Horizontal Sprite, then we use photoshop to break into a Grid. It’s actually pretty simple and it only takes a few minutes.

‍

We won't get into the diagonal and binary tree sprites, because we never had to use it, and apparently in terms of performance they don’t bring any advantage, although they might be needed in some specific cases.

GIF

We all know this file type. It can be useful in some cases, because  it’s very simple to implement, once it works like an animated image. However GIFs can be a bad idea when you  have complex animations with a lot of pixel information. In the end, either you’ll get a big file or you'll end up with smaller files without quality. So GIF files are suited for very simple and subtle animations with little size and graphics with low pixel-to-pixel variation.

SVG Animation

At last,the most powerful one: SVG Animation. We have a state-of-the-art  tool that translates SVG animation into code directly from Adobe After Effects. It's far more advantageous because of its render performance by browsers and its responsiveness. Bodymovin is perhaps the most known tool .You can run this extension along with Adobe After Effects that will generate and export your animations into a json file that developers can use, through code with Lootie javascript, that has also a hosting platform that stores and loads your json animations.

‍

Now that you know how Hi Interactive  brings the magic to the digital world through animated interactions that both users and our clients love, experiment and test yourself. Some of these tips and tools may be what you need to tackle the challenges of UX in motion.

References:
Understanding Motion
Creating usability with motion: the UX in motion manifest
The ultimate guide to proper use of animation in UX