Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this question
    
After user choose "select all" why they have to delete one by one why cant u use the same to dell multiple at once? –  sree Jul 18 '12 at 11:40
    
The issue there is that it wouldn't be clear to the user that "Select all" also means "all entries", including those that are not shown on the page. That wouldn't work in this instance. –  Liam Spencer Jul 18 '12 at 12:25

4 Answers 4

up vote 5 down vote accepted
  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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
Great, detailed answer. Thanks for this. You have confirmed what I thought would be the best option. –  Liam Spencer Jul 24 '12 at 11:41

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.

Github repository delete example

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

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.

share|improve this answer
    
Requires a bit more thought but I like the different way of looking at things +1 –  Rob Quincey Jul 18 '12 at 15:27

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:

enter image description here

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.