Page MenuHomePhabricator

Design: Make the "Select All" checkbox align with the ones that come below it and fix the labelling
Closed, ResolvedPublic1 Estimated Story Points

Description

We can do this either by center-aligning "Select All" checkbox or by left-aligning the ones below. Either works.

Also remove the "Make this setting global" from where it is right now (it is very easy to miss) and change it to -

Event Timeline

Niharika triaged this task as Medium priority.Feb 27 2018, 1:39 AM
Niharika created this task.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 27 2018, 1:39 AM

The other thing to remember for the column heading there is that the select-all box is not visible to non-JS users. So for them, if there's no "Make this setting global" label at the top, they'll just get a column of checkboxes with nothing other than hover-text to tell them what they're for.

Perhaps we could keep the "Make this setting global" for non-JS users, and replace it with the checkbox with JS. Sound okay?

Samwilson set the point value for this task to 1.
Samwilson edited projects, added Community-Tech-Sprint; removed Community-Tech.

Change 414892 had a related patch set uploaded (by Samwilson; owner: Samwilson):
[mediawiki/extensions/GlobalPreferences@master] Left align checkboxes and improve select-all message(s)

https://gerrit.wikimedia.org/r/414892

  • With JS:
  • Without JS:

I'm minorly concerned that moving the column of 'make this global' checkboxes further away from the actual preferences, but am willing to go either route.

The "Make this setting global" label doesn't just apply to 'select all' but the entire column. Combining it with the 'select all' weakens the label, in my opinion. Here's a maybe-good maybe-terrible idea: Could we make the "Select all" checkbox a link instead, that performs the same check all/none action? And it could only appear for JS users?

@TBolliger Hmm, I'm not sure about the link idea. The idea for "select all checkbox checking everything below" is a commonly seen web design pattern. But for links, the intuition is that the link will open up something new/go to a new page.

The reason for combining the "Make this setting global" and "select all" is that the former was really easy to miss. But making them bold, combined and properly aligned should fix that. There are a couple of ideas in T188424: Improve the UI of Global Preferences (aka "fix two vertical rows of checkboxes") too.

Since Sam has already made the changes, I think we should proceed with your initial suggestion (as long as we make it bold!)

We can think of ways to address the columns in the other ticket.

Hmm, I pulled up the patch on commtech wiki and I see the flash of non-JS version before the page fully loads (see recording below). I think that's problematic.

Yeah, that's not great. We should fix this (or come up with a different solution) before release.

Does the non-JS label have to be on two lines? If it were just one one, and positioned similarly to the line that replaces it, the FOUC would at least not result in vertical shifting of the whole form below.

Keeping in mind other skins as well of course, who might style things quite differently.

Or could the two messages be more similar, so the change from

Make this setting global

to

[ ] Select all options below to be global

is less pronounced?

Does the non-JS label have to be on two lines? If it were just one one, and positioned similarly to the line that replaces it, the FOUC would at least not result in vertical shifting of the whole form below.

Keeping in mind other skins as well of course, who might style things quite differently.

Let's do away with "Make this setting global" and instead have "Select options below to be global" for both JS and non-JS versions. It'll appear with the checkbox for the JS version. I think it's fairly obvious that checking that checkbox will select all and it's something people can click and get the hang of in a minute.

Does the non-JS label have to be on two lines? If it were just one one, and positioned similarly to the line that replaces it, the FOUC would at least not result in vertical shifting of the whole form below.

Keeping in mind other skins as well of course, who might style things quite differently.

Let's do away with "Make this setting global" and instead have "Select options below to be global" for both JS and non-JS versions. It'll appear with the checkbox for the JS version. I think it's fairly obvious that checking that checkbox will select all and it's something people can click and get the hang of in a minute.

Agreed.

Good idea. Done. Also minimised the FOUC with margins etc. (and found T188968).

https://gerrit.wikimedia.org/r/#/c/414892/ is ready I think.

Change 414892 merged by jenkins-bot:
[mediawiki/extensions/GlobalPreferences@master] Left align checkboxes and improve select-all message(s)

https://gerrit.wikimedia.org/r/414892

Niharika closed this task as Resolved.Mar 6 2018, 7:03 PM
Niharika moved this task from Needs Review/Feedback to Q1 2018-19 on the Community-Tech-Sprint board.

Purrrrfect!