How we use motion to delight

Make the product experience memorable. Use motion to go beyond expectations, surprising and delighting the user.

Part of:Motion Design Principles

Contributors

  • Jenna Maudlin
  • Natalia Zmyslowska
  • Al Jones
  • +10

1. Inspire to interact

Inspiring motion design increases the desire to interact whilst never sacrificing a sense of speed.

Choreography of appearance.

Animate in elements to draw attention and make the experience feel dynamic. Careful choreography helps the experience feel cohesive and natural whilst also benefitting load times. Keep animations short and snappy.

Consider personality and tone.

In many experiences motion should be subtle enough to not be consciously perceived whilst in other examples motion should be at the forefront of your experience. Consider the personality and tone of the experience when designing your motion choreography.

Consider brand expression.

Play within the boundaries, by using variables such as scale duration and speed to add that little extra touch of brand expression.

iPlayer has a bouncy, youthful motion attached to its play button. This adds to its aesthetics as a vibrant, entertaining service.

2. Encourage exploration

Add hidden interactions and shortcuts.

Discovering a new and quicker way to interact with your product instils a sense of delight.

Embrace hidden gestures.

Especially on mobile, you cannot sign-post every single possible interaction. For example double-tapping an image to 'love' it as opposed to just clicking on the icon.

Users can double tap to ‘love’ a picture as well as clicking on the relevant icon

3. Reward effort

Acknowledge when the user has completed something.

Motion can be used to reward a user's effort when completing a task. By using motion to celebrate an accomplishment, the user is encouraged to interact further with the product.

Success/ Failure states.

Use animation to explain success and failure states

A clear cue is given to the user when they input an email address incorrectly. The same is true for when this task is completed correctly.

4. Augmented feedback

Consider sound and haptics to augment the motion.

Haptics and sound are powerful ways to emphasise important interactions. They should be used carefully and in key situations.

Offer haptic feedback.

On native devices use haptics to provide feedback on touch.

Checklist

Question to assess whether we have succeeded:

  • Do I like it?

  • Does it draw me in?

  • Does the product in still positive feelings?

  • Does the product inspire me to use it more?