Treat abstention votes differently from nay votes

[taoeffect]

Problem

An 80% threshold might not be the clearest way to represent voting to users.

Solution

We might want to think in terms of nay votes (objections) instead of in terms of thresholds. Design this voting system and user test it against threshold-based voting. In both kinds of voting abstention votes should be treated differently from nay votes, and this needs to be clearly expressed in the UI/UX.

Note that this issue is both about the code (implementation) and the UI.

References:

• https://groupincome.org/2016/06/what-makes-a-good-voting-system/
• https://groupincome.org/2016/09/misconceptions-about-majority-rule/

[taoeffect]

Removing myself from the assignees because the implementation (code) part of this has been done in #611.

[taoeffect]

Copying text of #878 (duplicate):

Problem

Currently you can only vote "yes" or "no" on a proposal, but cannot indicate that you don't care. A non-vote is not the same as a vote of not caring. Our RULE_THRESHOLD supports the math for handling VOTE_INDIFFERENT, but our UI does not.

Solution

Implement in UI a way to indicate indifference about the outcome of a proposal.

[mmbotelho]

Note: This comment is outdated. Go to the updated comment

---

Added an option to vote blank. You will notice that there's a new link style, in gray. I plan on adding this link to our design system and turn some of the links we already have into this more subdued version. This will help improve our visual hierarchy, the app is becoming spotted with blue links and that can be very "loud" visually:

The mobile version will now open a select with the options to vote yes, vote no or vote blank since 3 actions are too much to display at once in a smaller screen:

[sandrina-p]

@mmbotelho do you mean opening an HTML <select> with 3 options when we click "Vote"? If yes, then you're suggesting to automatically "dispatch" the vote action once the user closes the select element? Hmm... It's too bad we can't actually test that behavior in an actual phone because of #751. I'm afraid that behavior would not work properly. When I implement this I'll try to replicate it on codepen to make sure it works as you expect.

[mmbotelho]

then you're suggesting to automatically "dispatch" the vote action once the user closes the select element?

I'm not sure if I understand what you're saying here. A vote is only recorded if the user explicitly selected one of the options. If they close the select without choosing an option, no vote is recorded. Is that what you were saying?

[sandrina-p]

I'll need to verify how the event "change" is dispatched inside a select on mobile (close vs select vs select + done). I'll get back to you later this week about this.

[mmbotelho]

Ok, thank you @sandrina-p! We can find a different solution if this one doesn't work

[sandrina-p]

Hi @mmbotelho. Here's the Codepen example: https://codepen.io/sandrina-p/full/KKdXmxd. I hope you better understand what's the problem with your approach.

[mmbotelho]

Thank you for sharing that, I will design a custom drawer with a save button then. I'll post it here when I have it!

[taoeffect]

@mmbotelho I like the design!

Only critique is "vote blank" doesn't mean much to much, so as a user I would find that language confusing. I would prefer the clarity of something like "Vote indifferent".

[mmbotelho]

Ok @taoeffect , I can change the copy! Blank vote is a very popular concept here, that's why I used it, but maybe it doesn't translate very well!

@sandrina-p Idesigned this component for this:

[sandrina-p]

Is that a new component, right? Could you add the figma link with the detailed specs?

[mmbotelho]

Yes, sorry I forgot to link it! Mobile dropdown on Figma

[sandrina-p]

The component looks okay. Could you also share the Figma example showing the voting options in this component? I didn't find it on Figma - Design System page :/

[mmbotelho]

My previous comment has the behavior explained. Is that enough or do you need an actual mockup of it?

[mmbotelho]

I'll make one @sandrina-p

[mmbotelho]

Updated version with the feedback on this thread:

Added an option to vote indifferent. You will notice that there's a new link style, in gray (Figma specs here). I plan on turning some of the links we already have into this more subdued version. This will help improve our visual hierarchy, the app is becoming spotted with blue links and that can be very "loud" visually:

The mobile version will now open a bottom action sheet with the options to vote yes, vote no or vote blank since 3 actions are too much to display at once in a smaller screen:

Figma links:

• Bottom action sheet on the design system;
• Flow to vote, mobile;

[sandrina-p]

The flow to vote (mobile) is great because it shows the order of voting (which is different from desktop) Thanks, @mmbotelho!