“Delete all” entries across several pages of results

Question

I have a web-page I am working on which simply returns a list of entries from a database. Over time, say, if ignored for a month, this list can grow to roughly 100 pages long. The user has the option to "select all" entries on that page and delete them all upon selection.

The issue I have is that the user can add a filter which only shows the entries which are now "expired" and are, therefore, redundant. This means if these results panned out over 50 or so pages, they would have to go through all these pages, hit "select all" and delete each page of results one by one.

The logical solution here would be to have a "delete all" button but I would like some external opinions on how best to implement this/where would be the best place to put it. Below is a rough wireframe of what I have.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 1

1. Have only one "Delete" button. Avoid creating a second button called "Delete All" that ignores the checkbox selection, but instead goes by the Status filter.

2. In addition to "Select All", provide "Select Everything" option. It could just be a discrete link to the right of the Select All checkbox. Windows Live mail offers something similar.

3. Tell users how many items are selected. So if you pick "Select All", display somewhere on the page, "25 items selected" If you pick "Select Everything", display "432 items selected"

4. In fact, it might even be better to display the row number up front. So instead of "Select Everything", the link would say "Select Everything (432 items)"

5. In the pagination info, include the total number of items. e.g. "Page 1 of 16 (Total Items: 432)". This way, when user clicks "Select Everything (432 items)", the user can be confident that number of row she selects will match the number of row displayed in the pagination info section.

6. I repeat. Have just one "Delete" button. :-)

7. When user picks "Select Everything" followed by Delete, display an extra warning message confirming the user's action.

Here's a mockup.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

The majority of these solutions work, but I think the control used to select everything (all pages) could be improved. Since this is a powerful [advanced] action, it may be best to hide it within a menu. Additionally, if you have a control to Select Everything then you also need a control to de-select everything.

Example:

Answer 3

I would like to suggest a diametrically different solution than JeffH. How about you indeed make it easy to do the delete all, but don't start scaring the user with a dialog that threathens them will hell and doom if they dare click the screaming DELETE button. Instead, just immediately do the delete all, and offer a simple and relyable "undo" function.

If you tell the user what he just did in a friendly, passive popup (perhaps a bar that you animate on top of the data grid; the animation will draw attention from the user) and explain the way to undo that, offering potentially dangerous features such as a delete all suddenly isn't all that dangerous anymore.

Answer 4

Delete is a destructive action that you really want to be careful when giving it to end users. I would suggest not using a "Delete All" and only providing the users with a regular delete button. If users want to delete more that one item allowing them to check records individually or even provide them with a "Select All" button that only selects the items on the current page. I would hesitate to give user access to a delete function that they can blindly delete items even when using filters. Google uses this "select all" approach in Gmail. This prevents users from blindly taking action on items that can not currently see.

Your delete button then should contain a forcing function on click/touch.

A forcing function is an aspect of a design that prevents the user from taking an action without consciously considering information relevant to that action. It forces conscious attention upon something ("bringing to conciousness") and thus deliberately disrupts the efficient or automatised performance of a task.

Github has a great example when attempting to delete a repository. While I currently don't have access to a simpler example, I have created another modal example below the image.

^{download bmml source – Wireframes created with Balsamiq Mockups}