views:

122

answers:

2

What is the best way to communicate visually that an element has been added to or removed from a list of items? (I'm going for usability, not gratuitous eye candy)

  1. Slide the other items up or down to show the new item or hide the deleted item
  2. Fade items in or out, but do not animate the other items
  3. A combination of #1 and #2
  4. No animation at all
  5. Some other form of animation
+2  A: 

I think a direct insertion with a progressive (and slow) change of background color would do the trick... I find it especially effective on SO itself.

Julian Aubourg
I like that one ... what should removals look like?
Jen
I think the best way would be to make the list item invisible then shrink the blank space it left in height. I tried to think of something less animation-heavy but nothing came to mind.
Julian Aubourg
A: 

Removing:

If you remove an item from a list, you can assume that this item is visible (because the user just selected it for removing), so just fade it out (maybe with a flashing effect).

Adding:

If an item is added to a list then scrolling isn't a good alternative because it isn't something that the user initiated directly. He maybe has to scroll back then. That would be a penetrating behaviour. As an alternative just show a flashing information message next to the list, that the new item had been added.

Markus Lux