Style Guide

Creating animations requires time, patience, and the willingness to make corrections after the fact. Here you will find a collection of design decisions that have proven beneficial in many contexts.

Use existing GUI elements

Interaction options should be recognizable and intuitive. Use existing and familiar GUI elements.

Use signal colors deliberately

Primary colors have a signaling effect. They attract attention. This also applies to a great extent to the color black. Direct attention deliberately and use pleasant colors.

Consider color brightness levels

The ability to distinguish colors varies not only biologically but also depending on the situation. Reduce the risk of confusion. This can be achieved by using different brightness levels.

Reduce speeds

The optimal speed of an animation can be set too high when you are already familiar with the content. Choose a speed that feels very slow to you personally.

Rationale: Research findings from cognitive psychology (Sweller 1999, Mayer 2001)

Make content toggleable

The content in an animation can be confusing because movements and colors attract attention. The important content goes unnoticed. To reduce this risk, content should be toggleable — allowing users to show and hide elements.

Integrate representations

Elements of an animation that are semantically related should be integrated. For example, a label should be placed directly next to the corresponding element, not in a separate legend.

Enable temporal control

Sometimes you want to see something again. Integrate play/stop buttons and sliders into the animation. Break long sequences into smaller segments.

References

SWELLER, John (1999): Instructional Design. Camberwell, Victoria: ACER Press (Australian Education Review 43).

MAYER, Richard E. (2001): Multimedia Learning. Cambridge [u. a.]: Cambridge Univ. Press