Let's say we have a table with 10-50 rows, and 3 column each.

Below the table we have a button like empty table, which removes all the rows from it.

After the click happens, what do you think should happen?

  • remove the table itself
  • remove each row one by one(probably using a timing function)
  • disable the table

If we choose the first or second option, then we should probably use some kind of animation, not just removing the table/rows all of a sudden I guess

In that case, what kind of animation do you suggest? A simple fade one, or slide, or something else?

Thanks for the help!

  • Is empty table the same as delete table? – SteveD Dec 18 '19 at 12:44
  • 1
    Do you have an empty state for the page? If so then it might not be necessary to have an explicit interaction to indicate the absence of the table. – Michael Lai Dec 18 '19 at 23:10

Although I can agree on the fact that animations might give your users more context and feedback on what is happening, I don't think the type of animation matters.
All options that you name are animation with which you can mimic the disappearance of the rows.

I think 'timing' might be of more importance.
Because you also name "remove each row one by one" as an option. This can lengthen the duration of the removal of the rows and might make your application feel slow to the user.

So my answer would be to make the rows disappear nearly instant to increase the illusion of performance with whatever animation you'd think best fit within your application.

| improve this answer | |

After the click happens, what do you think should happen?

Immediately confirm the user does in fact want to remove 10-50 records.

Depending on the type of information in your grid the impact of such an action could be significant and permanent, or a least be frustrating to have to rebuild the list after a unintended error.

After the user has confirmed, I would remove the records immediately. Animating the removal of each row with 50 rows at 300ms each could take up to 15 seconds to complete and feel highly unresponsive. If the user is expecting a delete don't disable. Consider providing feedback to the user that the records have in-fact been removed once the procedure is complete. I would provide a toast confirmation that's animated in and briefly pauses before being dismissed. Consider using more specific language like "delete all tasks" instead of "empty table" so as to help prevent user error.

See my recent answer on types of delete confirmations to use and when: When to use each type of delete confirmation?

| improve this answer | |

to maintain the consistency, whatever the animation you provide to remove single, multiple row you should keep that animation for removing the entire row, to prevent error you can show undo option on the left or right side of the screen if user want to undo the action just after removing the table. or you can ask users before removing the whole rows as well.

| improve this answer | |

Your Answer

