3

I'm developing a material design based desktop app where I encountered some UX problem and can't decide how to implement "Select all" capability.

Situation: I have the right side panel with a list: right side panel

There is an action to "Select all" by checking a checkbox "Resource name/Branch".

Problem: This UI is not really user-friendly. Need to think a better solution to implement action "Select all".

Questions: Maybe I should rename header name to "Select all"? Would it solve the problem? Or is there any other good alternative ways to make this design more user-friendly?

3

A solution is to add a column to your table on the left to select row by row and allow to "Select all/none" by clicking the column header checkbox.

Here is a demonstration for the table component of the Material-UI framework : https://material-ui.com/demos/tables/#sorting-amp-selecting

In this sample, user can also click anywhere on a row to select it, and not only on the left checkbox.

Plus the table header switching to "selection mode" allow to present contextual actions on the current selection.

2

I think the items in your list are missing visual queues on the hierarchy of the items. This is an example of how you might show this:

enter image description here

Once the hierarchy is clear you don't need to rename.

1

To me it looks like the first row is selected. It wasn't until reading the other respondents that I realised the first row is a label, and not a row. I think this is due to the colour used.

This is also a problem, albeit less so, in the Material Design guidelines.

I would suggest their older pattern, such as seen in Gmail, are more effective, as the checkbox is not clouded by the label.

This suggestion depends on whether you're comfortable slightly drifting away from the Material Design guidelines.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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