Make it more recognizable that sites are offering tipping support

[reneaaron]

I just noticed that there is a different Alby icon showing up in the browser whenever a website supports tipping. (metatag, but also on GitHub, Youtube, etc)

Inactive

Active

I think it would be great if the active icon would indicate tipping support a bit more obvious. (by having a different color maybe?)

Are you working on this? If you agree I'll prepare some suggestions and make a PR.

[bitcoinuser]

Agree

[bumi]

maybe @johnsBeharry or @GBKS have some ideas? There is also the possibility to add a colored badge to the icon (like those unread messages badges)

[GBKS]

I think the problem really is the dark background. On a light background, the difference between the two icons is more obvious. Can we show different icons for dark backgrounds?

For reference, here is the source for the different Alby head states.

[bumi]

@secondl1ght can you check if we can customize the browser action icon based on the theme? I think there is something like theme_icons

[bumi]

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action

[reneaaron]

Here is the difference on light themes:

✅ Active

❌ Inactive

To me the the 2 icons are too similar for users to recognize their function, also considering the size they are displayed. I used Alby for multiple weeks when I found out about different icons while browsing the source code 😅

[blastshielddown]

Another way to approach this might be to use a standard icon/indicator on the service/site itself to show that Alby (or another WebLN wallet) is supported. Even something as simple as a chip that says "WebLN" with a checkmark or green dot. Would be curious to hear what better UX experts think of this.

Rough example:

[GBKS]

I think we had some discussion early on whether to make the icon grey when the current website does not support webLN. Problem was that this gave the impression that the extension was disabled altogether. And since 99.99% of websites don't support webLN, the icon would be grey all the time.

An alternative would be to add a small circle to the icon - a status indicator:

• No circle - site does not support webLN
• Grey circle - site does support webLN, but is not connected
• Green circle - connected
• Blue circle - new activity, or activity ongoing

This relieves the small icon from having to represent the character as well as the connection state.

Chrome extension icons can have badges, but I don't think those would work well since they are text-based.

As for that @blastshielddown noted, I'd distinguish between sites that natively implement webLN, and sites that Alby "enhances with webLN". The former should have a "Connect wallet" button (or "Log in with bitcoin" or something along those lines). For the latter, users are dependent on Alby to inform them when a site is supported. In that case, the extension icon is a good indicator.

[reneaaron]

Technically there is no way to know if a site supports WebLN natively before the user initiates a WebLN action and grants permission. This is only possible for sites that Alby provides tipping support (Youtube, GitHub, websites with lightning metatag, etc).

• No circle - site does not support webLN Cannot be known beforehand
• Grey circle - site does support webLN, but is not connected ➡️ Only possible for website enhancements
• Green circle - connected ➡️ User granted permission for this website
• Blue circle - new activity, or activity ongoing

It would make sense to me to structure them like that:

• Default icon, no circle (user did not grant WebLN permissions before and site does not offer tipping)
• Green circle (user granted WebLN permission before or site does offer tipping)
• Blue circle - new activity, or activity ongoing

The green circle has a duplicate meaning (it's not clear if the user granted permission or the site is offering tipping). If we want to distinguish that too, we need a second dimension to communicate the current state:

• Main Icon (Indicates current state of extension, Default: yellow, green if the user granted permissions before, blue if activity is ongoing, etc)
• Indicator (Indicates tipping, Default: hidden, i.e. green / red notification bubble if site offers tipping)

What do you think?

[GBKS]

I think it's fine if the green circle would have two meanings. Could be grey for tipping support, which gets overridden with green when the user has granted permissions.

[reneaaron]

Alright. So that would leave us with something like that where we have 2 states:

• Alby icon with grey dot (default)
• Alby icon with green dot (permission granted before or site offers tipping support)

@GBKS I've created this draft in a copy of the Figma file as I had no editing rights. Are you okay with the sizing / placement / coloring of the notification icon? Do you want to add them to the original file's header states?

If everybody is okay with this proposal I'd prepare a MR for the new icons. 🙌

/cc @bumi

[bumi]

👍 I think that is great! (we also currently have these two states, so it should be reasonably easy to add)

(an alternative could be the browser badges - but this is typically for showing a number (e.g. x unread emails)

[GBKS]

Coming back to this today, I am still not sold on adding a circle. It just feels like a hack and we really should try to make the character work. The circle also gets really small in order not to obfuscate the face, so it's not even that obvious as a visual indicator. I tried to give it another shot here working with the head color and facial expressions, and also made adjustments for the dark mode, which was the thing that started this discussion in the first place.

So here

• gray means Alby is not available on the site
• Yellow means it's available
• Green is connected
• Blue is processing
• red means there's some type of error

What do you make of those?

[reneaaron]

Thanks for your proposal, I really like the states having a bigger visual difference to each other.

The only thing that bugs me a bit is that the Alby icon will be grey on like 99.99% of all websites and will only be shown in it's "original color" when a site offers tipping (but you never tipped before, then it will turn green). But maybe we should just focus on getting more websites to support ⚡Lightning. 😅

[escapedcat]

The only thing that bugs me a bit is that the Alby icon will be grey on like 99.99% of all websites and will only be shown in it's "original color" when a site offers tipping

Good point. In that case the grey/green dot would be nice.
A grey Alby logo looks just kinda disabled. But that's not true because I can still open the extension through that, no?

[GBKS]

A grey Alby logo looks just kinda disabled.

Correct. And that's why the Alby logo this far was not grey by default, to prevent the disabled look. Downside was just that the unavailable and available states then had less contrast.

An alternative would be to keep the default Alby yellow (as it is now) and make it blue to indicate Lightning availability, and green for the connected state. Very simple to understand, just means Alby changes color frequently (which is fine, it's a magic internet bee after all).

[kiwiidb]

I would suggest a browser notification in addition to the different icon. We can make it opt-out.

[reneaaron]

@GBKS I like the colorful magic internet bees, the states are clear and have distinct icons which makes it easy for users to recognize. 👍

@kiwiidb Sending out browser notifications for tipping support seems a little bit intruding to me, no? 🤔 I think tipping support should be more obvious but I'd argue it should still be some kind of a passive indicator. It feels kind of strange to me to instantly get a notification when I open a website.

[kiwiidb]

I agree that it can be perceived as intruding. But I think that we should not be afraid to experiment with this. Maybe people like it, who knows? You could always opt-out of the notifications.

[GBKS]

Notifications seem like a different issue from this one. I don't remember off the top of my head, does the onboarding flow show a list of supported sites for tipping? If so, that screen could include a toggle for notifications? That way it's opt-in. Personally, I loathe it when websites and services show notifications by default.

[kiwiidb]

Opt-in means almost nobody will use it. I can certainly understand that you loathe it. However, we have already received this feature request from real users, so it seems not everyone thinks about it that way. But it might warrant it's own issue, yes.

[MoritzKa]

Users today want more obvious notifications about if this website is Lightning enabled. Hence, we should make it much, much more obvious.

re icon: I would keep the default icon yellow. That is the Alby brand and we should make it recognizable as good as possible even though there are not yet many Lightning websites out there. A green and a blue icon seem to be more visible than before. That's already a great improvement.

re notifications: That's a different issue, yes, but supports the purpose of this discussion. I agree we should experiment with that (e.g. show it only for the meta tag use case and YouTube, where people might not expect Lightning. There it might not be so annoying and users can opt-out).

[bumi]

how do we get this in? we are so far with this? The new icons are already a great improvement, aren't they?

we then optionally can still optionally inject HTML to show a bigger notification arrow pointing to Alby or something similar.

[GBKS]

If you can point me to the files to replace, I can set up a PR.

[bitcoinuser]

This is fixed on version 1.12.0. Please close.

[bumi]

interesting feedback for the green icon: https://github.com/getAlby/lightning-browser-extension/issues/1142#issuecomment-1185955128

[bitcoinuser]

interesting feedback for the green icon: #1142 (comment)

Maybe one idea that can help is: the sites that support lightning login, show on the page that the user is logged using a specific wallet and node info, something like what ethereum dapps does.