Page MenuHomePhabricator

Special:BotPasswords Visual indication between checkboxes and corresponding text should be clearer
Open, LowPublic

Description

Right now, they are floated to right, far away from the text. It is really hard to figure out which checkbox corresponds to which option.

BeforeProposed

Alternatively, T152532 suggested alternating line backgrounds:

BeforeAfter

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 5 2016, 1:33 AM
Huji triaged this task as High priority.Nov 5 2016, 1:33 AM
Huji added a project: MediaWiki-Special-pages.
Aklapper lowered the priority of this task from High to Low.Nov 5 2016, 4:03 PM

@Huji: I don't see how "poor UI design" implies that this is an urgent issue, hence lowering priority.

amritsreekumar added a comment.EditedNov 5 2016, 4:59 PM

Is it the file SpecialBotPassword.php, that the change should be made?

@amritsreekumar : Please feel free to elaborate what you have tried already and in which files, what the results were, and the potential problems you ran into. Also see our recommendations - thanks!

Well, I have tried making a couple of changes in the HTMLCheckMatrix.php, but I am not getting that correct orientation, as stated in the bug. I've also been checking out the various files linked to that particular page, but only the above file seem to be making any significant change in the orientation of the page.

Huji renamed this task from Checkboxes on Special:BotPassword should be on the left of options to Checkboxes in a CheckMatrix should be shown on the left the label.Nov 6 2016, 6:18 PM
Huji edited projects, added MediaWiki-HTMLForm; removed MediaWiki-Special-pages.
Huji updated the task description. (Show Details)

@amritsreekumar the only change needed is in HTMLCheckMatrix.php; you would need to modify some of the for loops. I actually created a patch, but then realized you are working on it, so I will let you finish the work.

Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptNov 6 2016, 6:19 PM

Thank you! I will submit the patch at the earliest.

I'm not convinced this is the right solution. The check matrix on Special:Preferences for Echo configuration looks fine, and I'm not sure if it would still be intuitive if flipped around:

On Special:BotPasswords, after removing the width: 100%; CSS rule for the table:

I feel this looks mostly okay with this change. Maybe we should just do this?

(Why does BotPasswords use a checkmatrix, anyway, if it only uses one column of checkboxes?)

Huji added a comment.Nov 8 2016, 2:54 AM

Well, I agree with you that using a CheckMatrix is the wrong choice.

That being said, we should at least give users an option whether they want the checkboxes on the left or the right side.

@amritsreekumar I think to @matmarex's point, we should replace the checkmatrix with a set of checkboxes. Let me know if it is too confusing to you.

matmarex renamed this task from Checkboxes in a CheckMatrix should be shown on the left the label to Checkboxes on Special:BotPasswords should be shown on the left the label.Nov 8 2016, 9:19 AM

Change 320369 had a related patch set uploaded (by Amritsreekumar):
Change Checkboxes from right to left of Labels

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

Change 320369 abandoned by Amritsreekumar:
Change Checkboxes from right to left of Labels

Reason:
Abandoning due to some errors, will try fixing it.

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

Anomie added a subscriber: aaron.Nov 8 2016, 3:31 PM

(Why does BotPasswords use a checkmatrix, anyway, if it only uses one column of checkboxes?)

To match the interface used by the OAuth extension for the equivalent screen. See for example Special:OAuthConsumerRegistration/propose. As for why that used checkmatrix, you'd have to ask @aaron.

@amritsreekumar I think to @matmarex's point, we should replace the checkmatrix with a set of checkboxes.

A multiselect (HTMLMultiSelectField) would likely be better than a bunch of individual checkboxes. The Gadgets tab in Special:Preferences is an example of this widget; note the entire tab is only two widgets, one 'info' with the text of MediaWiki:Gadgets-prefstext and one 'multiselect' with everything else.

Change 320411 had a related patch set uploaded (by Amritsreekumar):
Change Checkboxes from right to left of Labels

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

@matmarex Please do suggest the changes that could be made to this patch.

Change 320411 abandoned by Amritsreekumar:
Change Checkboxes from right to left of Labels

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

amritsreekumar removed amritsreekumar as the assignee of this task.Nov 10 2016, 2:58 PM
amritsreekumar added a subscriber: amritsreekumar.

Change 325778 had a related patch set uploaded (by Huji):
Checkboxes on Special:BotPasswords should be shown on the left the label

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

Huji claimed this task.Dec 7 2016, 2:29 PM
Framawiki added a subscriber: Framawiki.

Huji, I'd like to propose a different approach than turning the element sequence around.
I think, that it's important in a this matrix layout to first see the description and then the checkbox. So I'd rather argument against turning it around. I fully understand the orientation problem of users with the current layout.
My first patch set just cares about the visual cue, but there are more shortcomings semantically in the current table, that exclude assistive technology users from using the matrix.
For those it should feature clearly table headers as well. And then there is the concern of responsiveness for mobile usage.

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

Huji added a comment.Dec 16 2016, 11:24 PM

Volker_E: I think what you are attempting to do is important, but not for this task. The general layout of Matrix should be improved; you can open a task for it and attribute the patch to that.

But for BotPasswords, using a Matrix is actually not a good idea; a Matrix is intended for when you have multiple choices for each row, and that doesn't apply here. So I think for BotPasswords, it is best if we move away from Matrix altogether.

@Huji I was thinking the same in the beginning. But then there are two outcomes, the above merged T152532 should be unbundled again and my patch would be caring about it.
Second, it helps to involve UX people in attempting to improve: UX. Would you share a screenshot of your current attempt in the patch?

Huji added a comment.Dec 17 2016, 5:16 PM

To unmark T152532 as duplicate is not a big deal. In fact, perhaps that is exactly what you should do. Completely ignore BotPasswords for now. Your point is valid in general: CheckMatrix needs to be visually improved, whether or not it is used by BotPasswords.

Let's continue the discussion there.

Huji added a comment.Dec 20 2016, 1:53 PM

@Volker_E and here is a screenshot:

Tgr added a comment.Dec 20 2016, 7:01 PM

IMO this can be declined: T152532 should be fixed anyway, and once it's fixed, there is no reason to do this.

If you keep it, please rename to make sure OAuth grant lists are in scope; the two interfaces should look similar.

Huji added a comment.Dec 20 2016, 7:58 PM

@Tgr well if T152532 is fixed, we can "ignore" this. It won't be fixed, but it won't be broken either :)

That being said, since this has already led to finding new bugs, and CheckMatrix is truly not the right choice for this anyway, I will continue working on it (perhaps not as vigorously)

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

^As stated on the patch, I've continued to work on my local patch and didn't update the bug correctly. Fixed in the meantime!

@Huji what is your take here? What's still missing from your point of view?

Huji added a comment.Jul 24 2017, 3:10 AM

@Volker_E the status is that @matmarex has requested the current "tooltips" to be somehow displayed in the new layout, but HTMLMultiSelect does not support any tooltips, so we need to add that feature upstream in OOjs-UI first, and that requires quiet a bit of bandwidth which I have not had so far.

… the current "tooltips" to be somehow displayed in the new layout, but HTMLMultiSelect does not support any tooltips, so we need to add that feature upstream in OOjs-UI first…

Is there a phab task for this? Could you please create/link to it?

Huji added a comment.Jul 24 2017, 2:15 PM

… the current "tooltips" to be somehow displayed in the new layout, but HTMLMultiSelect does not support any tooltips, so we need to add that feature upstream in OOjs-UI first…

Is there a phab task for this? Could you please create/link to it?

Yes. It is already linked above: T168724

Volker_E renamed this task from Checkboxes on Special:BotPasswords should be shown on the left the label to Special:BotPasswords Visual indication between checkboxes and corresponding text should be clearer.Jul 24 2017, 2:39 PM
Volker_E updated the task description. (Show Details)

Yes. It is already linked above: T168724

Sorry I missed it. Thanks @Huji!

Framawiki moved this task from Backlog to Doing on the good first bug board.Dec 2 2017, 1:31 PM

Change 421469 had a related patch set uploaded (by Huji; owner: Huji):
[oojs/ui@master] Support tooltips for each CheckBox in a CheckboxMultiSelect

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

Huji added a comment.Apr 4 2018, 1:47 AM

@Volker_E we have a fundamental problem here.

On the PHP side, a CheckboxMultiSelectInputWidget consists of *multiple* FieldLayout elements each containing a single check box (and that is why I can create a separate help tooltip for each check box):

<div class="oo-ui-fieldLayout-field">
  <div aria-disabled="false" id="ooui-php-229" class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-checkboxMultiselectInputWidget" data-ooui="...">
    <div class="oo-ui-layout oo-ui-labelElement oo-ui-fieldLayout oo-ui-fieldLayout-align-inline">
      <div class="oo-ui-fieldLayout-body">
        <span class="oo-ui-fieldLayout-field">
          <span aria-disabled="false" class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-checkboxInputWidget">
            <input tabindex="0" aria-disabled="false" value="cat" id="ooui-php-50" checked="checked" class="oo-ui-inputWidget-input" type="checkbox">
            <span></span>
          </span>
        </span>
        <span class="oo-ui-fieldLayout-header">
          <label for="ooui-php-50" class="oo-ui-labelElement-label">Cat</label>
        </span>
      </div>
    </div>
    <div class="oo-ui-layout oo-ui-labelElement oo-ui-fieldLayout oo-ui-fieldLayout-align-inline">
      <div class="oo-ui-fieldLayout-body">
        <span class="oo-ui-fieldLayout-field">
          <span aria-disabled="false" class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-checkboxInputWidget">
            <input tabindex="0" aria-disabled="false" value="goldfish" id="ooui-php-51" class="oo-ui-inputWidget-input" type="checkbox">
            <span></span>
          </span>
        </span>
        <span class="oo-ui-fieldLayout-header">
          <span aria-disabled="false" class="oo-ui-fieldLayout-help oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-frameless oo-ui-iconElement oo-ui-buttonWidget">
            <a role="button" title="A type of fish" tabindex="0" aria-disabled="false" rel="nofollow" class="oo-ui-buttonElement-button">
              <span class="oo-ui-iconElement-icon oo-ui-icon-info"></span>
              <span class="oo-ui-labelElement-label"></span>
              <span class="oo-ui-indicatorElement-indicator"></span>
            </a>
          </span>
          <label for="ooui-php-51" class="oo-ui-labelElement-label">Goldfish</label>
        </span>
      </div>
    </div>
  </div>
</div>

But on the JS side, there is only *one* FieldLayout element for the whole CheckboxMultiSelectInputWidget

<div class="oo-ui-fieldLayout-field">
  <div class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-checkboxMultiselectInputWidget" aria-disabled="false">
    <div class="oo-ui-widget oo-ui-widget-enabled oo-ui-multiselectWidget oo-ui-checkboxMultiselectWidget" aria-disabled="false">
      <div class="oo-ui-multiselectWidget-group">
        <label class="oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement oo-ui-multioptionWidget oo-ui-checkboxMultioptionWidget oo-ui-multioptionWidget-selected" aria-disabled="false">
          <span class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-checkboxInputWidget" aria-disabled="false">
            <input tabindex="0" aria-disabled="false" class="oo-ui-inputWidget-input" value="cat" checked="" type="checkbox">
            <span></span>
          </span>
          <span class="oo-ui-labelElement-label">Cat</span>
        </label>
        <label class="oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement oo-ui-multioptionWidget oo-ui-checkboxMultioptionWidget" aria-disabled="false">
          <span class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-checkboxInputWidget" aria-disabled="false">
            <input tabindex="0" aria-disabled="false" class="oo-ui-inputWidget-input" value="goldfish" type="checkbox">
            <span></span>
          </span>
          <span class="oo-ui-labelElement-label">Goldfish.</span>
        </label>
      </div>
    </div>
  </div>
</div>