30

I have a list which is paginated in a webpage. It also has a function to select the number of entries per page. A bulk update on all is required.

What would be the best approach to this? My concern is that a user would doubt if we refer to the current page or to the whole list. Would a confirmation window with details or an info message to detail it would suffice?

This is how it looks for now:

enter image description here

Improve this question
2
  • 3
    Question: how did gmail solve this?
    – Mooing Duck
    Mar 12, 2019 at 23:10
  • Does 'Update' here mean 'select all for update'? Or does it mean that items are updated (modified) by the server and refreshed (updated!) by the client/UA?
    – Pablo H
    Mar 13, 2019 at 12:31

3 Answers 3

Reset to default
42

Allow the user to see how many are selected, and give them the option to select the whole data set beyond the pagination.

Gmail has this pattern. Once you select 'All' via the checkbox, a message appears stating:

  • How many are currently selected
  • A link with the number of the whole data set, and the ability to select the entire set

enter image description here

enter image description here

Improve this answer
3
  • That is dangerous I think selecting 8k records. Just be careful with applications that mass update even of you click the other option to perform an update or a delete on ALL items i would force open a modal popup giving them the consequences and a red proceed button noting there is no way to go back!
    – JonH
    Mar 14, 2019 at 2:19
  • 3
    @JonH If it's dangerous to take an action on 8000 records, it's dangerous to take that action on 1 record.
    – Sneftel
    Mar 14, 2019 at 9:52
  • 1
    You can always provide the ability to update the 8k records. Then provide the option to undo the update. I feel as though that is the optimal user flow for any action taken and is used by GMail and Outlook.
    – Dean Meehan
    Mar 25, 2019 at 13:32
13

Add a button to the bottom where the other page controls are.

enter image description here

Also, if users are doing mass changes often, consider making a separate tool for it.

Improve this answer
2
  • 2
    "Update items in all pages" would be a bit clearer for me
    – mgarciaisaia
    Mar 12, 2019 at 19:01
  • 1
    Yeah you guys are right. I made the button text more descriptive.
    – moot
    Mar 12, 2019 at 22:21
3

The Gmail suggestion is great, but I'd also like to point out how Laravel Nova (and I'm sure lots of other UIs) do this.

Nova shows the "standard" multi-select checkbox at the top of the page, but clicking it drops down two checkboxes. One selects all on the page, the other selects all that match your query. It also shows how many items it'll select when you do so.

The wording could be better (e.g. "Select All on Page / Select All") and it's a bit confusing clicking a checkbox and not having something checked immediately, but it forces you to make a conscious choice about what you want to select.

Laravel Nova Select All UI

Gmail's way of doing it is great, but the notification that you haven't selected everything comes after you've made a selection, and personally I prefer to know what I'm selecting as I'm selecting it.

As a side note if you wanted to go with Gmail's way of doing it, I'd suggest making the notification appear in a suitable colour (e.g. yellow) then quickly fade that yellow out to give a visual clue to the user that a new piece of info they should pay attention to has shown up. Here's how Google Chrome's dev tools does it to show that an element in the DOM has changed:

Chrome's devtools flash

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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