Page MenuHomePhabricator

Modernize icons used in SecurePoll ListPage and VotePage
Closed, ResolvedPublic

Assigned To
Authored By
Tchanders
Mar 12 2021, 10:21 AM
Referenced Files
F34400183: range_validation_after.png
Apr 15 2021, 1:52 PM
F34400185: after_required.png
Apr 15 2021, 1:52 PM
F34400177: list_icons_before.png
Apr 15 2021, 1:52 PM
F34400179: list_icons_after.png
Apr 15 2021, 1:52 PM
F34400181: range_validation_before.png
Apr 15 2021, 1:52 PM
F34200688: image.png
Apr 1 2021, 5:50 AM
F34200710: image.png
Apr 1 2021, 5:50 AM
F34200815: image.png
Apr 1 2021, 5:50 AM

Description

ListPage:

image.png (178×620 px, 29 KB)

VotePage (submitted with errors):

image.png (249×620 px, 18 KB)

Event Timeline

If we want to keep it as close as possible to the existing UI: F34155362 seems replaceable with a close or trash icon in the color #d33. For the first image in F34155367 we could use expand or the down (indicator) in color #36c. And for the last we have alert in color #fc3.

@Tchanders do you think any of these could be omitted completely? Are there any that aren't doing a good job of communication what they're meant to? I don't know anything about the context, so its hard to judge.

Thanks @Prtksxna

I think they're all playing a communication role within the current design:

  • The "Dup" table column either has the icon or not, so it differentiates between votes that have/don't have duplicate cookies
  • Clicking on the down arrows causes the page to scroll to the question linked to the error message
  • The warning icon appears next to erroneous answers, but not successful ones, so it's useful for distinguishing them

Does that help with close vs trash and expand vs down?

@Tchanders and I met and decided that:

  • The Dup row shouldn't have any icon and just have the text 'Duplicate' written in it.
  • The down arrow icon should be moved to the end of the sentence. It should be a ButtonWidget with the downTriangle icon and text "See this warning".
  • The warning icon should use the OOUI alert icon, in the color #fc3 .

Change 676182 had a related patch set uploaded (by STran; author: STran):

[mediawiki/extensions/SecurePoll@master] Update error icons for vote and vote list pages

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

@Prtksxna a few things came up:

  • Both the duplicate and csrf columns use the icon. Should the csrf column also just use text? 'CSRF'?

image.png (117×832 px, 17 KB)

  • Here's what the warning boxes look like. Are they ok? Can make any changes like order/styling/etc.
  • Preferential

image.png (198×163 px, 3 KB)

  • RadioRange

image.png (222×740 px, 13 KB)

(ChooseBallot and ApprovalBallot don't actually implement the error indicator)

@Prtksxna a few things came up:

  • Both the duplicate and csrf columns use the icon. Should the csrf column also just use text? 'CSRF'?

Yep, that would make sense

image.png (117×832 px, 17 KB)

  • Here's what the warning boxes look like. Are they ok? Can make any changes like order/styling/etc.

This is looking as intended. No changes required.

  • Preferential

image.png (198×163 px, 3 KB)

  • RadioRange

image.png (222×740 px, 13 KB)

(ChooseBallot and ApprovalBallot don't actually implement the error indicator)

These are looking alright too. In F34200710 I can see that the input is shown before the label. Are aware of a reason why it is this way? Is changing it trivial?

In F34200710 I can see that the input is shown before the label. Are aware of a reason why it is this way? Is changing it trivial?

I think it's just how it was originally written. I'm assuming it should ideally be after the label? Not hard at all so I can go ahead and do that.

Just noting that I think we decided in the last team meeting not to change the order of the inputs and labels for now - though correct me if I'm mistaken.

Just noting that I think we decided in the last team meeting not to change the order of the inputs and labels for now - though correct me if I'm mistaken.

You're correct. That message was from before standup and the change has already been reverted.

Change 676182 merged by jenkins-bot:

[mediawiki/extensions/SecurePoll@master] Update error icons for vote and vote list pages

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

dom_walden subscribed.

How the icons on the list page look:
Before:

list_icons_before.png (356×1 px, 85 KB)

After:
list_icons_after.png (371×1 px, 81 KB)

What the error message on the voting page looks like (for elections of type "Range plurality" and "Range histogram"):
Before:

range_validation_before.png (601×893 px, 67 KB)

After:
range_validation_after.png (649×880 px, 76 KB)

In theory, the error icons for Approval, Schulze and Plurality type ballots should have changed as well. However, it appears that in practice the validation is done by the browser. I could not find a way to make our icons appear. For example:

after_required.png (496×644 px, 25 KB)

Test Environments:

Test Browsers:

  • Firefox 78
  • IE11