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.

• 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:

  

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

  warning

• 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, so we could either:

  • Rephrase the checkbox positively and disable the gift options until the checkbox is turned on.

    [ ] I want to receive a gift. 

  • Make the checkbox one of the gift options. It would get deselected when choosing a T-shirt for example. It could have a similar visual treatment with a green border when selected.

• 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.

  Maybe clicking on the button could activate the gift and clicking on the image could open the image in a bigger size?

• Regarding "Donate $500 instead". I understand that's a minimum amount.

  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.

  

• 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?

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

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

  

• 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.