What Problem Does This Solve?

The designer needs to communicate that an object is changing its spatial relationship within the page.

When to Use This Pattern

• A direct remove and appear in another place on the page would be a jarring or confusing way to show what just happened.
• To show how an object has changed places or containment on a page.

What's the Solution?

Move an object across the page animating the in-between positions (tweening). Moving an object can communicate:

• Its relative importance has changed (depends on where it is moved to).
• The object is now related to something else (as in dropping in a list, scheduling on a calendar day, etc.)
  • Animate the object itself moving into place; or
  • Animate zoom rectangles showing where the object is moving.
• The function of the object has changed (based on what it is now associated with spatially).
• Be careful not to overuse animated moves -- especially when the move is not initiated by a user action.

Examples

• Drop an object and it moves into the correct location (animates the move).
• A live feed dynamically tracks the most important stories. As new items come in, older stories move down in priority.
• Closing/Opening a window animates a moving zoom box to indicate where the object is going or coming from.

Why Use This Pattern?

In our everyday world, objects occupy real space and don't normally instantly appear and disappear. We throw a piece of trash into the trashcan and see it leave our hand and go through the air into the trashcan. In our interfaces, we do not need to mimic every movement from the real world. Interfaces would be dreadfully slow. But by using animation to show where an object came from or is going we can make it easier for the user to find the object again or feel confident in putting the object away in the future. Using animation to position an object in a grid confirms that it went into the slot. This type of feedback clarifies the user interaction.

For more information, see the rationale for Transition patterns.

Accessibility

See the general discussion about accessibility for Transition patterns.