Page MenuHomePhabricator

HTMLCheckMatrix checkboxes and labels are not clearly visually associated
Closed, ResolvedPublic

Description

When the number of checkbox columns is too few, they are rendered so far on the right that the space between them and their labels is too far and it is hard for a user to follow what label is for which sets of checkboxes.

BeforeAfter

Event Timeline

Tgr created this task.Dec 6 2016, 7:58 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 6 2016, 7:58 PM

This is not specific to OOUI. Personally, I think this is as intended, but HTMLCheckMatrix is just the wrong form field to use on Special:BotPasswords. This is probably a duplicate of T150079, really.

matmarex renamed this task from OOUI HTMLCheckMatrix checkboxes and labels are hard to pair to HTMLCheckMatrix checkboxes and labels are not clearly visually associated.Dec 6 2016, 8:50 PM
Huji reopened this task as Open.Dec 17 2016, 5:17 PM
Huji updated the task description. (Show Details)

Change 327849 had a related patch set uploaded (by Huji):
Improve visual association of elements in OOjs UI HTMLForm matrix

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

Huji added a subscriber: Huji.Dec 17 2016, 5:19 PM

I reopened this bug. It was initially described using Special:BotPasswords as an example; that was not the best idea (after all, BotPasswords should not use a CheckMatrix; a CheckMatrix should only be used where a *matrix* is needed, i.e. more than one checkbox per row).

I am reopening this though, as a generic bug for CheckMatrix itself; see updated description above.

https://gerrit.wikimedia.org/r/#/c/327849/ addressess some of the UI issues with CheckMatrix, so I changed it to reference this bug.

Screenshot of proposed patch:

@matmarex That screenshot above looks more like my patch set, is it @Huji's?

It's https://gerrit.wikimedia.org/r/327849, it's your patch, last modified by Huji.

matmarex removed a subscriber: matmarex.Dec 20 2016, 4:40 PM
Volker_E updated the task description. (Show Details)Dec 21 2016, 12:22 AM

Change 327849 had a related patch set uploaded (by VolkerE):
Improve visual association of elements in OOjs UI HTMLForm matrix

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

Volker_E moved this task from Backlog to Doing on the OOUI board.Jan 3 2017, 10:33 PM
Prtksxna added a subscriber: Prtksxna.EditedJan 23 2017, 6:31 AM

Naïve question: Can the checkboxes be on the left of the text label? Are there cases where that is not possible?

Jdforrester-WMF triaged this task as High priority.

@Prtksxna From my perspective, it shouldn't. It's a different use case of the labels. The labels in this specific implementation are not acting as normal checkbox labels, but are links to explanations. Therefore I would strongly argue against making them aligned similar to normal labels. Let's keep this layout different (labels that are links on the left, checkboxes on the right) to not break user expectations.

Huji added a comment.Feb 15 2017, 11:43 PM

If you want checkboxes on the left of the label, specifically, if you want one checkbox per row followed by a label, the HTMLCheckMatrix is the wrong choice. You should instead use HTMLCheckboxMultiselect. Special:BotPassword was designed based on that wrong choice, and I am working on fixing it.

Change 327849 merged by jenkins-bot:
Improve visual association of elements in OOjs UI HTMLForm matrix

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

Jdforrester-WMF closed this task as Resolved.Feb 16 2017, 1:55 AM
Jdforrester-WMF added a subscriber: Jdforrester-WMF.

Changing the design of Special:BotPasswords to use HTMLCheckboxMultiselect instead of HTMLCheckMatrix should be in a different task; this one is done (and looks lovely) in master.

@Prtksxna From my perspective, it shouldn't. It's a different use case of the labels. The labels in this specific implementation are not acting as normal checkbox labels, but are links to explanations. Therefore I would strongly argue against making them aligned similar to normal labels. Let's keep this layout different (labels that are links on the left, checkboxes on the right) to not break user expectations.

I am not sure I follow completely. Are you saying that when the label of the checkbox is a link (for an explanation in this case), it should be on the left? If yes, are you saying this on the basis of current user expectation (just what they're used to), or a UI pattern we wish to standardize?

Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.

@Prtksxna These links are not labels in the functional sense, you click them and go to a different page. I'd turn the pattern question: When a checkbox has a clickable form label, it should either be above or behind the checkbox. Here we should not apply this rule as it breaks users expectations, therefore the request in T150079 would be falsely applied UI pattern logic.

I'm not convinced though if the current pattern is worth being generalized as WikimediaUI pattern, we're advertising for. I think breaking user's label functionality expectations is not the best possible outcome. Possible alternative were to make this real labels and remove the links or put them on the question mark instead. But it's not high-priority and we should probably revisit this in the mid future.

Whatamidoing-WMF added a subscriber: Whatamidoing-WMF.

I love this design, especially for the Echo lists.