Those who create animations need time, patience, and the courage to make later corrections. Here you will find a collection of design decisions that have proven advantageous in many contexts.
Use existing GUI elements
A self-developed and creative GUI is unfamiliar to users. Interaction options should be recognizable and comprehensible. Use existing and familiar GUI elements.
Reason: Ergonomic standards (e.g., ISO 9241-110)
Use signal colors consciously
Primary colors have a signaling effect. They attract attention. This also applies, to a high degree, to the color black. Direct attention consciously and use pleasant colors.
Reason: Fundamentals of media design
Pay attention to color brightness
The ability to distinguish colors varies biologically from person to person. Differences can also arise depending on the situation. Reduce the risk of confusion. This can be achieved through varying color brightness levels.
Reason: Accessibility requirements
Reduce animation speed
The optimal speed of an animation may be set too high when one is already familiar with the content. Choose a speed that feels slow to you personally.
Reason: Cognitive psychology research findings (Sweller 1999, Mayer 2001)
Make content show/hide capable
Content in an animation can be confusing because movement and color attract attention. Important content may then be overlooked. To reduce this risk, content should be able to be shown and hidden as needed.
Reason: Cognitive psychology research findings (Sweller 1999, Mayer 2001)
Place GUI elements on the right
The meaningful content of an animation should be perceived first. This usually does not include GUI elements. Due to reading direction, an optimal placement of GUI elements is generally on the right-hand side of the animation.
Reason: Design standards (ISO 9241-112) and perceptual psychology
Differentiate controls for processes and parameters
There are control types that represent processes (e.g., in videos) or variable parameters (e.g., mixing consoles). Ideally, these types of controls should be visually distinct. Recommendation: for processes, use a control with a triangular knob; for parameters, use a round or square knob.
Reason: Ensure consistency with user expectations
Integrate related elements
Elements of an animation that are semantically related should be integrated. For example, a label should be placed directly next to its associated element, not in a legend.
Reason: Cognitive psychology research findings (Sweller 1999, Mayer 2001)
Enable temporal control
Sometimes you may want to see something again. Integrate play/stop buttons and sliders into the animation. Divide long sequences into smaller segments.
Reason: Cognitive psychology research findings (Segmentation principle in Mayer 2001)
References
SWELLER, John (1999): Instructional Design. Camberwell, Victoria: ACER Press (Australian Education Review 43).
MAYER, Richard E. (2001): Multimedia Learning. Cambridge [et al.]: Cambridge University Press