We are using a 3-level nav tree (Sport-Country-Competition) with nodes being selected only on the third level.

Upon running usability tests, we identified that the absence of a "select all" option is a pain point for our users. Should the users want to select all the competitions from a Sport-Country, they have to select each node one-by-one, which results in an unnecessary interaction cost.

We are considering replacing the country flag icon with a checkbox, should the user mouse over the country node; this way the user will check the country checkbox for all competitions to be selected.

My questions below:

  1. Revealing/Hiding the Select All checkbox will promote recall over recognition; will the impact be considerably bigger from the benefit?
  2. Should we expand the country node upon selecting it to show all children being selected instantly?
  3. Any other alternatives/suggestions we can think of?

Current State without Select All

2 Answers 2


Revealing/Hiding the Select All checkbox will not work for tablet/phones as mouseover do not exist. Additionally, the first time user will have a tremendous disadvantage of NOT knowing to look for the SELECT ALL.

Another alternatives/suggestions: add a SELECT ALL as the first choice in each list.enter image description here

  • Thank you for your contribution. Forgot to mention that this for Desktop only, therefore, there are no mouse over issues for tablet/mobile. Re your suggestion, do you believe the "Select all" node should be less grayed out so that it's visually less prominent?
    – Dimi
    Oct 30, 2019 at 18:24
  • Good observation, @Dimitris. My design proposed a grayed out 'select all' for the sake of faster reading. IMO, users want to scan the list quickly therefore I make 'select all' gray so it does not act as a visual obstacle. But the #1 rule should be: use whatever colors you are currently using elsewhere for 'select all' and do not encourage color-schizophrenia. If you like my answer, how about rewarding me an Answer checkmark?
    – jhurley
    Oct 31, 2019 at 12:43

In this case, the mouse over is not good. since we got phone/tabs. Since this is having a very large amount of data we need to group it proper manner.

I'd suggest this.

enter image description here

  • Thank you for your contribution. The nav tree width is fixed, therefore we won't be able to expand it in order to replicate the solution you suggested.
    – Dimi
    Oct 30, 2019 at 18:26

Your Answer

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

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