interledger / web-monetization-extension

An open-source browser extension that enables Web Monetization.
Apache License 2.0
49 stars 3 forks source link

[FEATURE REQUEST] UX - enhance WM ext visual cues on non-monetized websites #318

Closed RabebOthmani closed 3 months ago

RabebOthmani commented 3 months ago

Describe the feature you would like to request

As a user, when I'm on a non-monetized website I want to have a clear visual indication that the website is not monetized So I'm not wasting time and energy on the payment flow that will eventually fail

Describe the solution you would like

Currently if I go to rabebothmani.com which is not monetized, I'm able to see the extension and process a payment

WM extension enabled on bibi website

It's not until I click on pay now that I get an error message telling me the website is not monetized

not monetized

This can create frustration with users. Instead, we can: option 1: completely disable the extension on non-monetized websites. The risk with this approach is it can create confusion for users wondering why their extension is not working option2: A different UI for non-monetized websites with a simple message along the lines " We appreciate you wanting to support , unfortunately web monetization was not enabled here"

Additional context

No response

tselit commented 3 months ago

Thanks for this @RabebOthmani! Let us chat about this a little bit tomorrow. This could definitely better support UX.

Just to add that the teeny-tiny red X on the extension is meant to indicate that this is a non-monetized website (also, I'm aware that accessibility may be an issue as red assumes colour interpretation, which actually may not be accessible for everyone).

RabebOthmani commented 3 months ago

@tselit we might have a little bug on our hands as I can see a green dot on my website not the red one extension green

tselit commented 3 months ago

Today we discussed that the message displayed on the pop-up should perhaps be softer (or more informational) rather than appearing as an error message. @tselit & @sidvishnoi will chat later today.

tselit commented 3 months ago

@RabebOthmani what do think about this? image

RabebOthmani commented 3 months ago

@tselit @sidvishnoi I'm aware we may not have much control over the size of the pop up. There's a lot of empty space there, do we want to try make the text bold in the centre of the pop up to ensure it catches the attention of the user? Please note we can go with the screen as it is if we have other items higher on priority :)

tselit commented 3 months ago

Thanks @RabebOthmani. Cool, and here's the updated UI 👇🏾 . @sidvishnoi I think this is ready for you: image

Link to Figma design for v1.0