fix: Unavailable perks act helpfully when clicked by reprompting you for a donation amount
Issue #125 (closed) was filed against user feedback regarding UX implementation; when perks are unavailable due to requiring a greater donation than the user has currently selected, they currently are inert, even though they have similar interaction states to buttons. It was suggested that these buttons could either bring the user back to the donation selection interface, or outright select the perk while simultaneously and directly setting the donation amount to the desired value.
Implementing the latter would seem to me to require a great deal of additional user testing to prove helpful - given that the expensive perks live far enough down the page that seeing them in full requires no longer being able to see what your donation amount is, it would be very simple to select a new, and much more expensive, perk, without fully realizing the monetary implications. (This goes double for users on mobile.) Since the design of the donate page does not reiterate the user's donation amount anywhere, this feels like a progressive enhancement that demands more discussion at best, and a dark UX pattern at worst, and is almost certainly not a wise idea to implement with so little time to discuss, iterate, etc, before YEC begins and users start flooding onto the site.
This leaves the other suggestion: having those "disabled" perk buttons scroll the user back up the page to where the donation entry fields are, so that they can intentionally modify their donation accordingly and then select the perk in question. This leaves much less room for confusion or accident, while allowing the inert perks to have an intuitive contextual use. Ergo, this MR seeks to implement this fix in this manner, by converting the inert perk labels from span
to a
tags, and giving them href
values which link to a page anchor at the top of the "Donation" card. (This is a bit like how FAQ entries interlink between each other.)
Fixes #125 (closed).