What should happen when my columns are editable but marked for deletion and I press delete? My concern here is should they be mutually exclusive meaning I cannot mark items for deletion while Edit mode is active?
My take on this is that since they provide two very distinct functions, with one of them being destructive, then they should be mutually exclusive because:
- If you were to mix both roles, then the selection mark might not always be in the user’s viewport at all times—for instance, if the page is scrolled all the way down with the user taking its time to edit and possibly forgetting the selected item that could be at the top, then it might create some confusion or at the very least unnecessarily increase the cognitive load.
- Since both buttons are placed so close together with little space in between them, you grow the risk of misclicked accidents and thus frustration by unwillingly deleting one or more rows from the table, or simply by not knowing which operation should be executed first to not lose the data if both states are concurrently active.
In my opinion, here’s how I would design this:
- Both buttons should be visible at all times and have their own separate state, marked visually, without leaving the user guessing how/where to find the function to remove rows from the table.
- If the edit mode is activated, have only the “Apply Changes” button filled with color and the “Delete” button with no fill, just like the “Add” button, and vice-versa for the other state.
- Only when the user activates the deletion mode by pressing on the “Delete” button, make the selection boxes appear inside the table and have the button change from “Delete” to “Delete selected”.
- Optionally, and depending on the frequency & importance, add a modal asking for confirmation before deleting, unless you provide a window of opportunity to undo the deletion after the fact (considering that it’s a permanent action).
What should happen if I mark a few items for deletion and move to page 2 or try changing the search?
Moving to page 2 or searching for something else should also reflect in the URL, which means that a new state has begun. For the deletion mode, unless loading a new page is instantaneous for the end-user, change pages without remembering the items marked for deletion. Only one page at a time should be at work here, to avoid long sessions and memory overload. Of course, it is a tradeoff by increasing the number of clicks, but deleting data is a sensitive activity that requires your full attention. Don’t combine it with other functions and don’t employ a free-hand approach to it. Stay in deletion mode after going to page 2.
What should happen if I am editing a column as shown in the image above inside a box and I click page 2 or change the search?
A modal dialogue should ask you to save or discard changes. As before, stay inside the edit mode after changing pages. However, if this is a recurrent action, then an autosave feature would be more convenient with a global “Apply Changes” at the end of several pages. This method would also require a counter that keeps track of all edits next to it that reads “123 changes to be saved”.
