Animation Principle Eight: Secondary Action

Imagine a
squirrel, running across your lawn. The movement of the squirrel’s spry legs
(considered the primary action) would be animated to express the light, nimble
nature of his gate. The agile, undulating movement of the squirrel’s tail –
considered the secondary action – would have a separate and slightly different
type of movement than his legs. The squirrel’s tail is an example of secondary
action – an animation principle that governs movement that supports a primary
action of an animation sequence without distracting from it. Secondary action is applied to
reinforce the mood or enrich the main action of an animated scene. The key to secondary actions is that it should
emphasize, rather than take attention away from the main action being animated.

(Caption: The primary action of thie animation is the squirrel’s body and
legs moving. The shape and character of the squirrel’s tail as it moves is the
secondary action.The secondary action serves to reinforce the mood and
character of the primary action and is uesed to make the animation feel more
realistic.)

Mobile UX Secondary Action Example

(Caption: The transition that occurs when a user clicks on a URL in an
email, activating the phones browser on an iphone is an example of secondary
action. The primary action is the browser window emerging forward into user’s
view. The secondary action is the email view receding into the background. Both
actions occur simulataneously, but the secondary action of the email application
supports the primary action – opening a browser window.)

Secondary Action and Mobile UX

When used prudently, the subtle incorporation of secondary action can make the animation and transitions within your mobile experiences really sing. Subtlety is the key, though. It’s a natural novice tendency to go a little “nutso” when learning to integrate motion into your work. The principle of secondary action can help you edit your use of motion and prevent your experiences from feeling like a trip to a carnival’s fun house for users. 

Just remember: 

– Support, not upstage. Secondary action should reinforce the primary action, not detract from it. 

– Subtlety is key. If the secondary action/movement is competing with the primary animation, the motion phrase will feel superfluous or confusing for the user. Think squirrel tail 🙂

What examples of secondary action in mobile UX have you seen?