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
Make E also go left beyond the edge, and then "magically" wrap around and reappear from the right side.
Do not move E at all -- leave rows rugged.
Do not move anything -- leave holes in places where cards were deleted.
Instead of moving B, C, D -- move column E, I, M, Q upward.
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.