DocuWare Design

Guidelines and resources to create DocuWare digital interfaces

Feedback
Updated on December 11, 2022

Docy

Animation

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.

Principles

  • 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.

Usage

Yes

  • 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.

No

  • 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:

  • Principle of Obscuration
  • Principle of Easing
  • Principle of Transformation

Types

Transition

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.

Interactions - Previous Notifications
CONTENTS
Design System Contact Us

Loading Patterns

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

Alerts

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

Banners

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

Text Area

Time Input

Date Input

Slot Input

Masked Input

Number Input

Text Input

Chat Icon Close Icon