Page MenuHomePhabricator

Buttons in table cells are cluttered and cause a jump on hover
Closed, ResolvedPublic2 Estimated Story PointsMay 5 2020

Description

Requirements
  • There should be no jump (height change) when the user hovers over a row
  • Reduce clutter on table cells
  • Tools and actions should be easily accessible
  • Following our UI standards
Explorations by @dom_walden and @Tchanders

Notes

  • Transparent icons don't take up any space and so there is no jump
  • Putting items behind the ellipsis menu reduces clutter but increases the number of clicks
Proposal

Notes

  • Always leave space on the right for icons, even when they aren't visible. Lines should wrap leaving that space empty
  • The pin button is always visible, followed by the ellipsis icon (like Flow)
  • All other tools and options go inside the menu
  • In the case of UAs the only option in the menu would be filter. This is not ideal.
Related tasks

Event Timeline

Prtksxna created this task.Apr 13 2020, 5:02 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 13 2020, 5:02 AM
Niharika triaged this task as Medium priority.Apr 13 2020, 4:41 PM
Niharika added a project: Anti-Harassment.
ARamirez_WMF set the point value for this task to 2.Apr 15 2020, 4:10 PM
ARamirez_WMF added a subscriber: ARamirez_WMF.
This comment was removed by ARamirez_WMF.
ARamirez_WMF set Due Date to Apr 27 2020, 4:00 AM.Apr 16 2020, 2:40 AM
Tchanders moved this task from Ready to In Progress on the Anti-Harassment (The Letter Song) board.

Change 591517 had a related patch set uploaded (by Tchanders; owner: Tchanders):
[mediawiki/extensions/CheckUser@master] SpecialInvestigate: De-clutter buttons from results table cells

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

Just to clarify, this won't be able to look exactly like the screenshot until after the frameless toggle button is available (T249841). That should be added in a follow-up once it's ready.

ARamirez_WMF changed Due Date from Apr 27 2020, 4:00 AM to May 5 2020, 4:00 AM.May 5 2020, 3:46 PM
ARamirez_WMF changed the subtype of this task from "Task" to "Deadline".

Change 591517 merged by jenkins-bot:
[mediawiki/extensions/CheckUser@master] SpecialInvestigate: De-clutter buttons from results table cells

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

dom_walden added a subscriber: Niharika.

Testing mainly the Compare table on Firefox 68, IE11 and Safari 13, on testwiki (CheckUser 2.5 (284c6a2) 06:20, 12 May 2020).

  • There should be no jump (height change) when the user hovers over a row

I haven't seen any jumping or changes in height, so far.

  • Reduce clutter on table cells
  • Tools and actions should be easily accessible

@Niharika The pin and the ellipsis menu do not appear on the mobile version of the site. I don't know if this will be a problem for T&S if they are trying to use it away from their desk. They can always use the desktop version of the site (slightly less conveniently).

I don't know to what extent we need to consider the accessibility of this feature. For example, you cannot tab to a pin or ellipsis unless it is currently visible.

  • Following our UI standards

I did read https://design.wikimedia.org/style-guide/index.html and tried to relate it to this work. I don't think there are any great problems.

  • Always leave space on the right for icons, even when they aren't visible. Lines should wrap leaving that space empty

This appears to be the case, even on a small viewport.

  • The pin button is always visible, followed by the ellipsis icon (like Flow)

Should it always be visible? I don't think this is how we wanted it in T249252.

I note that if another row/column is pinned, hovering over the cell shows an empty space above the ellipsis (where the pin would normally be). I wonder if it would be more consistent with the UI standards to make it disabled rather than hidden. But I am sure we have already had this debate :)

For example:

  • All other tools and options go inside the menu
  • In the case of UAs the only option in the menu would be filter. This is not ideal.

At the moment, we don't have ellipsis for UAs, just the pin icon.

dbarratt closed this task as Resolved.May 13 2020, 5:46 PM
Niharika reopened this task as Open.May 13 2020, 7:30 PM
Niharika added a subscriber: SPoore.

Thanks for the thorough review, Dom.

Testing mainly the Compare table on Firefox 68, IE11 and Safari 13, on testwiki (CheckUser 2.5 (284c6a2) 06:20, 12 May 2020).

  • There should be no jump (height change) when the user hovers over a row

I haven't seen any jumping or changes in height, so far.

  • Reduce clutter on table cells
  • Tools and actions should be easily accessible

@Niharika The pin and the ellipsis menu do not appear on the mobile version of the site. I don't know if this will be a problem for T&S if they are trying to use it away from their desk. They can always use the desktop version of the site (slightly less conveniently).

Flagging this for @SPoore.

I don't know to what extent we need to consider the accessibility of this feature. For example, you cannot tab to a pin or ellipsis unless it is currently visible.

Flagging this for @Prtksxna.

  • Following our UI standards

I did read https://design.wikimedia.org/style-guide/index.html and tried to relate it to this work. I don't think there are any great problems.

  • Always leave space on the right for icons, even when they aren't visible. Lines should wrap leaving that space empty

This appears to be the case, even on a small viewport.

  • The pin button is always visible, followed by the ellipsis icon (like Flow)

Should it always be visible? I don't think this is how we wanted it in T249252.

Flagging this for @Prtksxna.

I note that if another row/column is pinned, hovering over the cell shows an empty space above the ellipsis (where the pin would normally be). I wonder if it would be more consistent with the UI standards to make it disabled rather than hidden. But I am sure we have already had this debate :)

For example:

Have we had this debate? 🤔 Flagging this for @Prtksxna.

  • All other tools and options go inside the menu
  • In the case of UAs the only option in the menu would be filter. This is not ideal.

At the moment, we don't have ellipsis for UAs, just the pin icon.

I don't know to what extent we need to consider the accessibility of this feature. For example, you cannot tab to a pin or ellipsis unless it is currently visible.

We should probably do a separate ticket to do a a11y and mobile review and then track all the findings.

  • The pin button is always visible, followed by the ellipsis icon (like Flow)

Should it always be visible? I don't think this is how we wanted it in T249252.

No, it should only be visible when the cell is hovered on. And that is what I am seeing on test wiki at the moment and it seems right to me.

I note that if another row/column is pinned, hovering over the cell shows an empty space above the ellipsis (where the pin would normally be). I wonder if it would be more consistent with the UI standards to make it disabled rather than hidden. But I am sure we have already had this debate :)

For example:

We discussed this on Slack and decided to switch the order of the ellipsis and the pin icon. When the ellipsis icon is on top its position won't change because of the hidden pin icon. Should we raise a separate task for this?

Niharika closed this task as Resolved.Jun 3 2020, 5:57 PM