How we set up Fiverr’s UX Motion guidelines in 5 steps
What is Motion in UX? Find out below in our step-by-step guide on how to start setting up your motion guideline, and how we did it on Fiverr.
Before we talk about the process of setting up our motion guidelines on Fiverr, let’s talk about Motion in general. What is Motion? And why do we need it in our product? Motion is animation. It’s true that, first and foremost, animation is fun. It makes the experience more pleasant, light-hearted, and engaging.
But, most of us already know that animation goes far beyond being just the trend of the moment. It’s an important tool for UI, and it should be an integral part of any design system.
Well-defined animation can help achieve better results and create an accurate and valuable user experience. Here are some reasons I think it’s important to define the motion guidelines in our product:
1 Entertains (Delights).
2 Attracts user attention.
3 Maintains continuity and context.
4 Reduces change blindness.
5 Helps define the product’s tone of voice.
Just as there is a style-guide that helps designers understand a set of rules and definitions (such as font and color), it is possible, and even preferable to define the rules of our interface animation, with simplicity in mind and as part of the style-guide.
In this article I will briefly summarize the process I have been working on (so far) as a side-project at Fiverr — that being, creating a system of animation rules for our internal use. This helps give you a flavor of the process. It is not necessarily the most exclusive one or even the right one for you, however, I hope this might just give some pointers to anyone who is interested in learning more about how to create Motion Guidelines.
Here are some helpful links I used throughout the process:
https://www.smashingmagazine.com/2019/02/animation-design-system/#implementation
Step 1- Market Research
As with any design process, a great starting point is researching the Motion Guidelines of other products.
Obviously I wanted to pinpoint Fiverr’s unique personality through our use of animation and not copy data from other products, but it can be a great way to ignite your inspiration. I learned that for the most part, Motion Guidelines are divided into two main sections:
The first part is principles, which explains what UX Motion is, while the second part reviews the practical aspects and deals in detail, with the depth of the values that one wants to define — the How and When.
A valuable guide can contain anything you want and there really is no end to the amount of data that can be included.
Still, there are a few basic things worth starting with that will work wonders in your product. These are the three main areas I started with:
- Duration
- Ease
- Effects
Below, are further details on the process and some examples.
Step 2- Tone of voice
Very often, we — the designers — go about solving a particular animation or a specific component. But have we invested any thought into the bigger picture? Have we looked at whether this specific animation matches our product values? Or whether it delivers the results it set out to achieve?
We must also consistently look forward, and think about whether it will be consistent with future components that might be added throughout the product’s lifespan.
Way before the technical part, we had to ask ourselves — what are the product values?
When we rebranded in 2020 by redefining our brand, we revised our list of values and understood where Fiverr was located on the scale of each attribute. For example, is Fiverr more calm or energetic? Is the product seeking to be perceived as distant or approachable?
These questions helped us build an accurate understanding of Fiverr’s personality, and subsequently resulted in better conclusions:
To illustrate the ‘tone of voice’ issue, I examined animations we had designed for different use cases. For example, one use case was part of a buyer’s form for completion. The buyer encounters a group button. Next, we needed to evaluate how these buttons are supposed to load- Should it be fast, Slow, with fade, with a certain bounce perhaps?
Let’s view some examples:
Example 1- the Playful one
Here I chose to exaggerate the duration and to add bounce so that they give a bouncy, cheerful, light-hearted, and even childish feeling:
Example 2- the Dramatic one
In this example, I chose to exaggerate the ease and duration so that they give a very dramatic feeling, and even a little more luxurious and distant from the user:
Neither example is really usable, they are at different ends of the spectrum and neither was chosen. Although the project is still a work in progress, a more suitable option for Fiverr will probably look something like this:
Step 3- Tests, Tests and more Tests
The next step was to start experimenting with different durations and eases, each time on a different component to check what the exact numbers were that represented our product values.
We compared many components:
Small size components such as: Buttons, Toggles, Checkboxes, and Kebab Menu etc. And medium and large components such as: Modal, Survey, Toast, Push-pin Notification, and more.
The purpose of this step is to have a broad picture of as many components as possible and to check which values convey the desired tone of voice in the best way, and also which fulfil the need for consistency throughout the product. For example, the same thing that works for the entry of a Toast should also work on the entry of a Survey.
This step can be completed in two ways-
1- Through prototyping or animation software, such as After Effects and export with Lottie plugin.
2- Get a budget for a developer who will make real-coded tests for you.
In practice, I made the first attempts on After Effects, but as the project grew I needed to have a more accurate sensibility. As such, I continued the direct tests with the Development. I believe it’s more beneficial to see things ‘live in production’ than to make final decisions based only on After Effects or any other prototyping software. Once I had completed enough tests and collected the data, I was able to set the metrics.
Step 4- Defining Duration, Ease, and Effects
Duration
As a general rule of thumb, UX animations should be between 0ms and 500ms.
This is the range that the human eye perceives as “one moment”.
That’s pretty fast.
This doesn’t mean that we will exclude slower durations such as 600ms or even 700ms. They could become pretty handy in some edge-cases, like when animating large components (like Drawers and coast-to-coast Carrousel). But we must understand that when we do so, our user will pay more attention to the animation, and it is important that in such situations we evaluate if that will serve us best. You want the interface to feel snappy and responsive. The animation must not distract from the primary goal of the screen or purpose of the feature, it should serve to make it more intuitive for the user.
I divided the durations into 3 main groups and listed in the table when to use each of them (mainly depending on the size of the component).
It makes sense that Pin-flash, which is significantly smaller than a drawer that enters the screen for example, would move at a different speed. Another thing that may affect the duration, is how much attention we want to draw to the direction of the object. Sometimes you need to try and make a judgment with feelings, and not necessarily choose quickly based on size and distance.
Easing
Easing adjusts an animation’s rate of change, allowing transitioning elements to speed up and slow down, rather than move at a constant rate. It basically reacts as the ‘glue’ to the entire motion experience.
In the physical world, objects don’t start and stop instantaneously. Instead, they take time to speed up and slow down.
Easing is a technique that makes elements move as though natural forces like friction, gravity, and mass are at work.
While we are talking about durations it is more important to set it ‘right’, and less ‘pretty’, But when using Ease we have more flexibility. It is one of the strongest tools that can be used to emphasise the product’s tone-of-voice and values.
Ease is usually divided into to 3 types:
A. ‘Ease out’ or ‘Entrance’ (decelerate)
This type of Ease simulates a scenario where an object starts to move at a certain speed but slows down when it reaches the motion endpoint.
This type of Ease is usually used for objects that enter the screen. For example, a survey, pin-flash, toast, or card.
At relatively high speeds (less than 200ms) it is a bit harder to notice the nuances, but the eye will experience the whole shift in a more natural way that mimics reality, compared to not using Ease out.
B. ‘Ease in’ or ‘Exit’ (acceleration)
We will use this Ease when we would want to animate an object that leaves the screen permanently. Observing the graph, we can see that the initial motion is slow, and the farther the object goes, the faster it becomes.
An example of such Ease is the pull out of Toast or Pin-flash.
C. ‘Ease in- Ease out’ or ‘Standard’
We use this type when we want to animate an object that has to move from one point on the screen to another (neither entry nor exit), this is the one with the most common use.
The object begins slowly, accelerates, and towards the end slows down again. For Fiverr we use a long slowdown from acceleration as it serves our values better in terms of tone of voice.
Now that we have defined the exact values of each type of Ease, we can always use one of these three in any Fiverr UX motion.
Effects
The last topic that is currently in the process of being implemented in our guidelines, is Effects.
It is always worthwhile to try to make life easy for your developers.
Rather than a designer having to work out the correct connection of a particular type of animation to a component they have designed every time, and then the developer will have to assemble different durations and ease — you can set ‘Effects’!
‘Fade (in/out)’ Effect
The first and most basic Effects are ‘Fade-in’ and ‘Fade-out’. We use it when we want to close certain things that are not so suitable for them to come out of the screen “drifting”.
This code component already contains opacity between 0% and 100% (which will be defined according to the duration we set) and whenever we want to insert something into the screen, which according to the guide is suitable for a ‘fade’ effect, all the developer has to do is connect their code to that component called Fade-in’.
‘Slide fade’ in Effect
This effect is built from the ‘fade-in’ effect, combined with movement and ‘Entrance’ ease.
All that is left to select, is the path, which is the distance in which we want this component to move. For example an object of a certain size that moves to a distance of 40px will get a higher speed than if it had a distance of 12px.
We choose this distance by examining the size of the component.
Summary
I hope this article has helped to show you that including motion guidelines in your design system can be very useful.
If you are considering creating your own motion guidelines as part of the design system of your product, you can follow these steps:
1. Conduct in-depth market research to see how others have done it.
2. Find out what your brand values are and take this into consideration.
3. Conduct extensive animation tests for a large number of components of different sizes and behaviors to choose values that can work in several different places.
4. Start by setting Durations, Ease, and some Effects. It will do wonders for your product straight away.
5. Once you have written the first draft of the guide, present it to the designers and developers in your organisation, and improve the guidelines according to their pain points.
