How to design animations for a tiled layout?

Question

I'm working on a b2b application that uses tiles to show a collection of items. The tiles have fixed dimensions, and fill up all available horizontal space before going to the next row. There may be vertical scroll on the page, if there are too many tiles. In short, something like this (http://jsfiddle.net/16jfjdb3/):

Now we want to let the user destroy some of the cards / add new cards / reorder cards using drag & drop. And we want these interactions to be animated (otherwise it gets very confusing: without animation deleting a card will just look like all cards suddenly changed their contents. Or even worse, when you're deleteing a duplicate card, like hardly anything happend at all). What I am unsure about is to how those animations should look like.

Consider for example deletion of tile A in the picture. Then presumably B, C, D should slide to the left, but what about E? If you make it go to where D was, then the overall diagonall motion of all E, I, M, Q tiles across the entire screen may look overwhelming.

I've considered several possible alternatives, such as

1. Make E also go left beyond the edge, and then "magically" wrap around and reappear from the right side.

2. Do not move E at all -- leave rows rugged.

3. Do not move anything -- leave holes in places where cards were deleted.

4. Instead of moving B, C, D -- move column E, I, M, Q upward.

5. Do not animate (for some of the interactions).

We can use different animations for different kinds of operations. For example, 2 & 3 obviously wouldn't work for adding a new card. As mentioned above, the following operations need to be designed:

• Destruction of a card
• Addition of a new card
• User drags a card around trying to reorder them
• User types something in a search box, and cards that do not satisfy her search criteria get hidden (conversely, if she deletes part of a search string, then previously hidden cards need to reappear).
• User requests to sort the cards according to some ordering.

Answer 1

Animation is good

You are correct in thinking animation will give you the clarity the user expects. It connects to what people can intuitively understand (transitional states) rather than operating like a computer thinks (change data > refresh view).

Do it right

But, as you suggest, animation can get confusing if handled incorrectly. The first thing that comes to mind when faced with a tough animation challenge is Disney's timeless animation principles. That doesn't prescribe the how but it breaks down the 12 possibilities for transitioning from one state to another.

Pragmatically speaking, you want it to connect to how people would expect things to move. Would they expect E to leave the stage and reappear, slide under the row diagonally, or fly above it's neighbors? Vanishing and reappearing usually adds to cognitive load. You also don't want to loose expected sort order, like moving E, I, M, Q up -- don't do that.

At the very least, some easing ("slow in slow out" in Disney speak) goes a long way to helping users follow along.

You can further set that up with some "anticipation".

Find your style

Ultimately, the particular way you handle the animation is a matter of style. Whether or not it does so in a very crisp and business-like manner or incorporates a little personality through anticipation is up to you and the brand in question.