Page MenuHomePhabricator

CheckboxMatrix: distinguish alternating items in table more clearly
Closed, ResolvedPublic

Description

The colour combination doesn't seem to be so distinguishing *for a diverse range of screens*. For example, on a LED back-lit screen when the table is viewed from an angle ~= 75° or 115° all items seem to have the same light color. Example

Screenshot from 2018-05-11 23-16-18.png (246×408 px, 16 KB)

Event Timeline

@Kaartic We've had a long discussion at T152532 with this solution coming into place. The problem with a darker background is, that it is resulting in a too strong visual emphasis of the zebra lines.
We could think about increasing the vertical border-spacing a bit in order to clarify grouping a tad more:

image.png (1×742 px, 112 KB)

There's also already a :hover effect on the rows as another guiding helper.

Volker_E renamed this task from OOUI: distinguish alternating items in table more clearly to CheckboxMatrix: distinguish alternating items in table more clearly.May 29 2018, 11:38 AM

Change 435989 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] OOUIHTMLForm: Improve HTMLCheckMatrix for further clarity

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

On Special:BotPasswords this results in (one row hovered)

image.png (548×1 px, 96 KB)

On Special:Preferences

image.png (524×740 px, 50 KB)

There's also already a :hover effect on the rows as another guiding helper.

Hovering doesn't help people who use the keyboard a lot ;-) Of course, the check box gets highlighted when :focus which might help a little but I'm not sure it helps as much as the :hover effect.

@Kaartic Yeah, I'm aware of this. It's a problematic & complex UI and we go with the best compromise here. The checkbox :focus isn't helping with the visual grouping towards the label. My patch, which just got merged is improving this with whitespace a little more.

Change 435989 merged by jenkins-bot:
[mediawiki/core@master] OOUIHTMLForm: Improve HTMLCheckMatrix for further clarity

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

Volker_E claimed this task.
Volker_E triaged this task as Medium priority.Jun 1 2018, 2:07 PM
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.
Vvjjkkii renamed this task from CheckboxMatrix: distinguish alternating items in table more clearly to j3caaaaaaa.Jul 1 2018, 1:10 AM
Vvjjkkii reopened this task as Open.
Vvjjkkii removed Volker_E as the assignee of this task.
Vvjjkkii raised the priority of this task from Medium to High.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed a subscriber: Aklapper.
Kaartic renamed this task from j3caaaaaaa to CheckboxMatrix: distinguish alternating items in table more clearly.Jul 1 2018, 1:06 PM
Kaartic closed this task as Resolved.
Kaartic assigned this task to Volker_E.
Kaartic lowered the priority of this task from High to Medium.
Kaartic updated the task description. (Show Details)
Kaartic added a subscriber: Aklapper.
Volker_E raised the priority of this task from Medium to Needs Triage.Nov 27 2018, 4:39 AM
Volker_E moved this task from Backlog to Done on the UI-Standardization-Kanban board.