Self Healing Transition

Best Practice · Last modified July 15, 2009

When an object is being removed from a list or grid, make a hole for the removed object and then animate a transition as the object below or next to the hole moves to close up the open space.

This transition communicates (and reinforces visually) where the object was removed from and that the list or grid no longer contains the object that was removed.

Delicious Bookmark this on Delicious

What Problem Does This Solve?

The designer wants to show that an object has been removed from a list of objects.

When to Use This Pattern

  • The object being removed is in a list or grid.
  • It is important to know that the removal happened and where the object was removed from the list or grid.
  • At the completion of a drop operation where the dropped object was moved from one place to another.
  • In conjunction with the object appearing somewhere else (usually with a fade-in).

What's the Solution?

  • Make a hole for the removed object.
  • When the interaction completes the object below slides up to close up the hole.
  • See the Slide Pattern.

Why Use This Pattern?

The self healing transition communicates:

  • Where the object was removed from.
  • That the list no longer contains the object that was removed.

For more information, see the rationale for Transition patterns.


See the general discussion about accessibility for Transition patterns.