UI Animation Guidelines That Truly Matter

When you are designing a website and need to communicate a change in UI, using transitions is the way to go. They are able to explain changes in the arrangement of elements on your screen, transport visitors from one navigational context to another, and enforce element hierarchy. All in all, transitions are an essential component of interaction design. To ensure you can achieve successful animated transitions on your WordPress or Magento website, simply follow the following UI animation guidelines:

Be Clear

There are two common mistakes that web designers make. One is that they create overly complex interactions. Second, they may cramp the UIs with too many animations. You should keep in mind that every motion on the screen attracts attention. If there is too much change on the screen, you can easily disorientate your users. So, less is more and you may wish to opt for a cleaner UI. Next, make sure that you maintain a clear path to the next view when the surface and elements in the screen change size and shape.

Show Connectivity

Illustrating how elements are connected is one rule you cannot afford to break. Associative connection ensures that your users can comprehend the change that just occurred in the view’s layout and/or what triggered it. With that said, good transitions in UI animations often associate newly created surfaces to the action or element that creates them.

Be Natural

Changes in state in the real world do not just appear or disappear abruptly. That’s why hard cuts in UI animations can make the state changes difficult to follow. The key to avoiding confusion is to create something that features two or more states, and animate those transitions instead of allowing them to happen instantaneously. For example, you select an item from a drop-down list because you want to go into detailed view. Let’s say that the item will expand into a large card and will be placed on the right side of the screen. You will find that it’s easier to follow the change when it moves in an arc towards its destinations than seeing it suddenly popping up on where it should be.

Be Quick

When you are designing transitions, you cannot forget about the factor of timing. You see, most users do not have the time to wait for the entire animation to finish. Hence, you want your animations to be quick and precise, but slow enough that it can be understood. Yes, with little or no lag time between the beginning of the animation and the user’s initiating action. Next, you want your users to have a direct feeling of manipulation. A good rule of thumb is to START (not trigger) the effect within 0.1 seconds of the initial user action. In addition, try your best to keep the animation duration at or under 300ms.

Guiding the Attention

Guiding your users’ attention and clarifying the change of states will ensure they focus on the right spot at the right time. The practice helps put emphasis on the correct elements and allow users to know what the objective is.

All in all, UI animation should never be an afterthought. It should already be in your pool of thoughts the moment you start sketching your wireframes.