DocuWare Design

Guidelines and resources to create DocuWare digital interfaces



Estimated reading: 3 minutes 115 views
Animations in the user interface allow Designers to direct the user's attention to content, controls, and predefined flows. Micro-interactions can convey intuitive messages that users can easily understand without the need for explanation. Fluid motions help obtain status, provide feedback and instruction, and enrich the visual experience.


  • The primary principle of the User Interface animation - it should be fluid.
  • User Interface motions should be focused on the possibility of giving the user a more immersive and engaging experience.
  • The animation should be used only as a supportive tool. Users might not see animations onscreen for different reasons, including the system or browser configurations. It's essential to avoid using animations and motions as the only way to communicate important information.
  • Motions should be informative and highlight relationships between elements.
  • Accurate and realistic animation can help users understand how the User Interface works. Motions without logical sense and well-known physical laws can disorient users.



  • The animation should be used only with interactive components. Designers should avoid or minimize motions of not interactive UI elements.
  • Designers should strive for a short and precise animation.
  • Animation with frequently occurring interactions should be avoided or minimized.
  • The animation should reflect the hierarchy between parental and child elements.


  • The animation should not overshadow the User Experience. Nothing should distract users from their primary goals. Gratuitous or excessive animation can distract users or make them feel disconnected.
  • Animation in the product should not be used for a fun purpose and have functional goals. Designers should use animation and motion to communicate messages to enhance feedback and understanding by showing how things change, what will happen when people perform an action, and what they can do next.

While creating animations, Designers and Developers should follow the next principles of animation design in the User Experience:



Transition animation should mimic the natural world and be logical. This type of animation should depend on user flow and content. As it is easy to confuse users with transition animation, Designers should pay attention to the mental models and expectations about the content and new pages' appearance.

This type of animation should be used to emphasize key points in a user journey and reinforce or add to the icon's meaning.

The animation should indicate the status of user or system actions.

The animation should be used to provide feedback to show if the action was successful.

The animation should help users understand how to perform actions and invite or encourage the necessary actions.


Loading Patterns

Engaging users while waiting with Loading Patterns This section will expose the ...


Keep users on their toes using Alerts Alert is a messaging tool used to notify u...


How inform and alert users with Banners ? A banner is a powerful tool for commun...

Bias-Free Language

General guidelines for writing about people without biases


Text Area

Time Input

Date Input

Slot Input

Masked Input

Number Input

Text Input

Chat Icon Close Icon