Several small usability issues

After discussing this with @donuts, I'm storing here some issues on the new Donate page that I reported in August already but that are still on the website and that I couldn't find documented on GitLab.

I don't mind creating separate GitLab issues if that's more useful.

Agreed upon

• Choosing a predefined amount does not remove the minimum amount warning.

  warning

  Timeline: any time

• The "Options for T-shirt" would be clearer by calling it "Size" and putting it right below the corresponding gift option.

  Timeline: any time

• Also, it looks like a text input field and not like a dropdown menu. It should have a down caret like the "State" field.

  

  Timeline: any time

Pending discussion or design

• The T-shirt image is not big enough to show the design on the T-shirt.

  People who want a T-shirt as incentive might want to see what's on the design.

  We'll try to make the thumbnail clickable to open a full size image in a popup.

  We should also design and add alt text to each for people using screen readers.

  The button would still activate the gift.

  Timeline: after YEC

• About this checkbox:

  

  It's recommended to phrase checkboxes positively. Otherwise, it can work as a confusing double negative.

  In this case, the check box relates to the different gift options.

  We'll try to make the checkbox one of the gift options.

  • Create visual asset
  • Check whether it plays well with CiviCRM->JSON->donate-neo swag info import system

  An alternative, would be to keep the same design and rephrase the checkbox positively (and disable the gift options until the checkbox is turned on).

    [ ] I want to receive a gift. 

  Timeline: after YEC

• "Donate $500 instead" might not be clear enough.

  What Tor has right now:

  

  The EFF uses the same label but makes it clearer by:

  • Explaining this better with a full sentence: "You must donate at least $500 to get this gift."
  • Making the "Donate instead" button actually change the donated amount. The button we have right now brings people back to the amount buttons and thus away from the little explanation we provided them.

  

  Matt doesn't want anything changing the number in the "amount" box other than the user typing numbers into the "amount" box.

  The importance of rephrasing this button could be settle in usability tests: tpo/ux/research#147.

  Timeline: after YEC

Done

• The commas ".00" on predefined amounts are unnecessary and look weird.

  As different countries use different convention for thousand separators (or whether to separate thousands of hundreds), this might even confuse international donors.

  

• The currency indicator disappear when editing the custom donation amount.

  There is no need to hide this info and international donors might wonder whether $ means USD or another local currency that uses the dollar sign.

  currency-indicator

• The frequency selection changes the default amount. That's not necessarily a problem, but the frequency is below the amount. So, for example, if I choose $500 and then "Repeat monthly", the amount disappears. It's still in the custom amount field, though.

  frequency

  It might feel less surprising to either ask about the frequency first or have the same default amounts.

  The EFF puts the frequency first, for example:

  

• In the address form, clarify which fields are mandatory with a colored asterisk (*). For example, I don't have an "Apartment number". Maybe a bigger "Street address" field is enough?

• Crypto donors love QR codes because they can often scan then in the wallet on their phone.

  Why not display the QR code right below the address? The donor already clicked on their favorite currency to unfold the accordion, so we could save them another click.