Animation in Design Systems

Have you ever wondered why users dislike static objects? Motion, we believe, always draws the user’s attention. We can detect movement outside the center of our view range when reading a book. However, this means that we are sensitive to motion and are easily distracted by it. Nowadays, animation in design systems has been a hot topic for debate.

Animation has become the building block for usability among UX and UI designers due to its potential to impress people. Although there are many developers and designers who believe that animation is an unwanted feature that overburdens and complicates the user interface, others believe that it is a vital part of user interaction.

Let’s look at what motion does in design, what it brings to the table, when and when not to use, and the various aspects of documenting animation.

What Motion Does in Design

In an era with low user attention levels, visuals in the form of animations can successfully seize a user’s interest. Animation offers a convincing experience that no other form of content can match. Animation is a game-changer in delivering a clear picture of a brand’s value, raising user retention, providing feedback, building relationships with the product, and reaching a passive audience.

We’ve always thought of animations as a filler that doesn’t play a big part, but we’ve never considered its strength. Using motion in UI design goes beyond just adding visual interest.

🦄 Brand Expression

Colors, logos, and catchy taglines are the first things that come to mind when considering the aspects that define a brand. On the other hand, Motion has the same ability to become a distinguishing feature of a brand and its connected experiences. It is the most powerful medium to build the user’s trust. A well-thought-out explainer animation will assist you in emphasizing why a customer should choose your product or service. Animations must have the depth to drive your audience’s behaviour.

💡 Providing Feedback

When used effectively, motion provides essential input at crucial times in a user’s journey. This could include indicating their next steps and conveying whether or not an action was successful. With this feedback, users can work more efficiently, accomplish tasks, and find the information they need. The animation of a navigation menu moving across the page when a hamburger icon is tapped is a typical example. Because our visual systems are sensitive to movement, a brief animation helps ensure that users perceive the feedback.

🎖 User’s Retention

We are continuously bombarded with new information on the web, which is a fast-paced environment. As attention spans get shorter, the number of distractions grows. At that moment, motion stands out to be a fantastic technique for capturing user attention within interactive experiences.

✌ Build Relationships

Users can better develop mental maps to understand spatial links between content by using intelligent and consistent motion patterns, allowing them to navigate with ease. Animation can be handy when we have a complex UI as it can help the user to navigate to the content for which they are looking.

In UI design, motion serves more than just practical purposes. It can also be used to generate those tiny magical moments that thrill consumers and boost their affection for the apps, goods, and services they use most frequently. Animation makes the system more engaging and builds a strong emotional bond with the user.

📝 Documenting Animation

Documentation is undoubtedly one of the pillars of any design system, but there is no proper way to standardize the animations in terms of how they should be developed, delivered, and maintained further. But adopting some of the best practices will definitely help the design, engineering, and product team. Having animations documented is not separate but crucial for the internal team members to get them on board and follow best practices.

The initial step towards documentation involves:

• Defining Token: Design Tokens are the brand’s foundation, offering consistency and scalability to the whole system. Velocity, Trigger, Easing, Attributes are the key features that need to be documented while defining tokens.
• Building Fundamental Animation: There should be proper guidelines around building basic animations and patterns such as mouse-hover, zoom, parallax, … benefiting both the dev and design teams.
• Designing Brand Definition: well-written documentation is helpful for designers and developers to find out the vision of the brand.

You can take references from the Material Design by Google 🔖

When multiple people collaborate on a working project with different users in mind, it is easy to slip into the trap of outdated information. The aim of defining the fundamentals is to maintain consistency and easier system-wide reach. By defining some basic animation, other team members can get into the mentality that has been established as the project progresses. Everyone agrees on what to use when to use it, and how to use it.

Animation: When and When Not to Use

🤔 Is It Required?

The animation must serve a purpose. The good use of animation is always appreciated as it not only helps the user to navigate well but also to connect and indulge. Adding motion to your UI solely for the sake of aesthetics can be harmful. It creates confusion and effect on what a developer or designer aims to achieve for their app/website. However, instead of focusing solely on adding animation, we should consider the bigger picture, as it may impact our whole user experience.

⚖️ Right Balance

The animation must adhere to the key requirements to serve its purpose right. The four fundamental characteristics that can utilize the token hosting involves Duration, Delay, Timing function and Direction. The MDN docs are a good resource to learn that. Depending upon the importance of the process, and what the animation is for, the sub-properties should be decided.

For example: As per studies, a great UI animation should last between 200 to 500 ms. The duration of animation for the whole screen should be a bit longer as compared to click and hover animation.

👩🏻‍💻 Adhere to User Expectations

The majority of consumers have a preconceived notion of how things should work based on their previous experiences. They anticipate things to function in a specific way. As already described before, the animation should be simple, and it should become more simpler as users see it more often. It must also serve its purpose, and grab the user’s attention.

Did you know ? Backlight, is an all-in-one design system tool on the code side, offering features such as real-time preview environment, built-in documentation support, visual feedback, and much more. It comes with a number of starter-kits to help you jump into your design journey at no cost 💸 Isn’t it amazing? 😉

Originally published at https://backlight.dev by @soniasinglas on May 5th, 2022. Backlight is a collaborative platform to ship design systems on the dev side.