Animations should follow a function so that the user can reach their destination quickly and easily, as they may interfere with the user's operation. Non-relevant content should therefore not be animated.

• Provide feedback: Animations can give the user visual feedback, e.g. by highlighting a button after a successful action.
• Display status: Loading animations or progress indicators show the user that the system is working and reduce uncertainty.
• Directing focus: Micro-animations draw the user's attention to certain elements, e.g. when adding an item, a movement and color can be used to show the user where this element was added.
• Support navigation: You can help the user to find their way around the site more easily, for example by animating drop-down menus or expanding information (e.g. flyouts, accordions)
• Limit animation styles: No more than three different design styles should be integrated within one interface to avoid visually overwhelming the user.

The brand approach is characterized by the archetype of the sage, who radiates seriousness and wisdom. Micro-animations should make reference to the sage. In detail, this means that animations should be gentle, minimalist, restrained and straightforward.

• Brand coherence: Gentle, minimalist, restrained and straightforward animations support the brand from a design perspective.

Different needs and forms of interaction require individually adapted values for speed and duration in order to ensure an optimal user experience. Depending on the context and target group, the speed of an animation or interaction can play a decisive role and must therefore be decided based on the context.

• Smooth transitions: In order not to disrupt the flow of interaction, animations should run smoothly and without abrupt stops or starts.
• Device and platform dependency: On mobile devices or tablets, where users often work with touch, animations could be shorter to emphasize the immediate connection between the touch and the visual feedback. On desktop interfaces or larger displays where mouse and keyboard are primarily used, transitions can be slightly longer to support spatial orientation.

In terms of accessibility, micro-animations need to be carefully designed to ensure that all users - regardless of physical, sensory or cognitive limitations - can benefit from a positive experience.

• Visual feedback: Animations can make it clear when an action has been successfully completed (e.g. submitting a form), or indicate errors (e.g. a red light on an incorrect input field). This is particularly helpful for people with cognitive impairments, who benefit from clear and visual feedback.
• Orientation and navigation: Animations can help users to better orient themselves within an application by showing how content moves when new information is loaded or screens are changed. For users with perceptual difficulties, this can better clarify the flow of a process.

• Motion Blur
• Natural Movements

• No use of Motion Blur

• Unnatural Movements

• Comic Movements
• Unrealistic Movements