Clicky



5 Unbreakable Rules for UI Animation on the Web

  • By Nick Babich
  • 19 Jul, 2017
Transitions are a powerful way to communicate a change in a user interface. They can be used in apps to help offload a lot of the cognitive work into the visual cortex: they help transport users between navigational contexts, explain changes in the arrangement of elements on a screen, and reinforce element hierarchy. Consequently they […]
Successful animated transition possesses the following five characteristics:

1. Good UI Animation is Natural

State changes in UI often involve hard cuts by default, which can make them difficult to follow. In the real world, most things don’t just appear or disappear immediately. When something has two or more states, then changes between states will be much easier for users to understand if the transitions are animated instead of being instantaneous. Let’s look at an example below where the user selects an item in a list to zoom into its detailed view. During expansion, the small card moves in an arc towards its destination as it expands into a larger card. This movement is inspired by the real world forces.

2. Effective UI Animation is Staged

A well-staged animated transition guides your user’s attention and clarifies the change of states. This characteristic is directly related to the user focus and continuity. A good transition helps direct user’s focus to the right spot at the right time, it puts emphasis on the right elements depending on what the objective is. In the example below, the floating action button (FAB) transforms into header navigation elements comprised of three buttons. The first-time user cannot really predict an interaction that is about to happen, but a properly animated transition helps the user stay oriented and not feel that content has suddenly changed. This transition helps guide the user to the next step of an interaction.

3. The Best UI Animations Are Associative

Transitions should illustrate how elements are connected. Good transitions associate newly created surfaces to the element or action that creates them. The logic behind associative connection is to help the user comprehend the change that has just happened in the view’s layout and what has triggered the change.
Below you can see two examples of a layer transition. In the first example, the new layer appears far away from the touch point that triggered it, which breaks its relationship with the input method.
In the second example, the new layer appears right from the touch point. Thus tying the element to the point of touch.
Another example can be found in Mac OS which uses an animated transition when minimising a window. This animation connects the first state with the second state.

4. Popular UI Animation is Quick

If there’s only one principle of animation you care about it should definitely be timing. Timing is arguably one of the most important considerations when designing transitions. The animation should be quick and precise, with little or no lag time between the user’s initiating action and the beginning of the animation. Also, a user doesn’t have to wait for the animation to finish. In example below, slow animation creates unnecessary lag and lengthens the duration.
When elements move between states, the movement should be fast enough that it doesn’t cause any waiting, but slow enough that the transition can be understood. For an animation to effectively convey a cause-and-effect relationship between UI elements, the effect must begin within 0.1 seconds of the initial user action to maintain the feeling of direct manipulation. Try to keep animation duration at or under 300ms as fast transitions waste less of the users’ time. Test it with your users to see what is tolerable.

5. The Best UI Animation is Clear

It’s a common mistake to overload UIs with animations or to create too complex interactions. Too much change in a user interface can leave a user disoriented and it takes time to recover from. Remember that every motion on the screen attracts attention, so too much animation at the same time creates chaos.
Transitions should avoid doing too much at once because they can get confusing when multiple items need to move in different directions. Remember, less is more with regard to animation and transitions in particular. Anything that if removed would make a cleaner UI is almost certainly a good idea. When a surface changes shape and size, you have to maintain a clear path to the next view. Complex transitions should keep a single element visible. This helps keep the user oriented.

Transitions and Accessibility

Since transitions are about visual communication, they by default are not accessible by users with visual impairments. You should provide alternate content for this group of users. webacessibility.com ’s best practices for animation offers suggestions on when to provide alternate content for assistive technology.

Conclusion

When designing transitions, focus only on the practical things they do for the user. Whether your app or site is fun and playful or serious and straightforward, using meaningful transitions can help you provide a clear and quick cohesive experience.

Latest News

By Inessa Brown 21 Jul, 2017
Have you ever encountered a website with confusing navigation? Been sent down the wrong path by misleading labels? Or needed your best detective skills to find a particular piece of content? It’s frustrating, isn’t it? What can companies do to ensure that users can find what they are looking for on a website? Usability testing […]
By Ben Moss 20 Jul, 2017
Google’s minimal search page has consistently been heralded as a minimalist masterpiece since it first appeared in 1996. It’s been argued by numerous designers—myself included—that it was the perception of Google as a ‘pure’ unadulterated search was more central to Google’s rise and eventual dominance, than the merits of its (in)famous algorithm. So it’s something […]
By Ezequiel Bruni 20 Jul, 2017
When I go to any website, I’m looking for something. I may want to buy a product, or find information, or browse random memes, but whatever it is, I have a goal in mind. That goal could even be subconscious, but it’s there. Human beings never do anything without a reason. Whether or not they […]
By _dm_templates 20 Jul, 2017
Red Rocket are pleased to announce the launch of the new website for Gillian Allard the winner of Sky Arts Master Of Photography award for 2017. The website is built on our platform and allows Gillian to update all parts of the website herself.
By Nick Babich 19 Jul, 2017
Transitions are a powerful way to communicate a change in a user interface. They can be used in apps to help offload a lot of the cognitive work into the visual cortex: they help transport users between navigational contexts, explain changes in the arrangement of elements on a screen, and reinforce element hierarchy. Consequently they […]
By Mickey Aharony 18 Jul, 2017
Designing fun, visually appealing party banners can be a complicated task if you don’t have enough graphic design experience or know how to use image editing software, such as Photoshop or Sketch. Buying and installing an image editing software, installing custom fonts, designing the graphics and figuring out how to apply a text overlay can […]
By _dm_templates 18 Jul, 2017

Joan is applying for a small loan on all-online-loanzzz.com. She’s becoming frustrated with the number of financial-disclosure forms she has to fill out. She’s thinking about visiting her local bank to ask for a loan instead.

While waiting for a page to load, the application presents a cartoon image of a person wearing a business suit sitting in a jail cell. The image caption says, “Hey, everyone hates disclosures. We know you do, too. We’re doing our best to keep everyone out of jail. Please bear with us for a few more clicks. You won’t regret it, and our loan officers will stay out of jail.” Joan smirks at the image. She might not appreciate the number of forms she has to complete, but she understands the serious nature of applying for a loan.

Humor is an important aspect of life. Researchers find  humor has many positive benefits . It can reduce stress, increase psychological well being and increase tolerance for pain. Most of us have had experiences in which we’ve used humor to lighten a mood or cheer someone up. Humor is integral and inherent to human relationships.

You can use humor in your design (both in the process and the product) to create a positive user experience. We want to develop positive relationships with our users — humor can help make that happen.

But how do I do this?, you might ask. Do I need to be a comedian? Should I format all of my FAQs as knock-knock jokes? The answer is no to both of those questions. You can incorporate humor in your design, maintain your brand identity and not look like you are trying too hard in the process.


By Cassandra Naji 17 Jul, 2017
2017 looks set to be the year that augmented reality (AR) moves firmly into the mainstream. As the next big technology trend, it looks set to have a massive impact on user experience and, by extension, user experience design. The good news is that augmented reality has the potential to solve user problems that have […]
By Cameron Chapman 16 Jul, 2017
Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.  The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, […]
By Jerry King 15 Jul, 2017
Every week we feature a set of comics created exclusively for WDD. The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers. These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world […]
More Posts
Share by: