Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"1" and "l" look similar in mono space font when rendering bitcoin addresses #1134

Open
kirillzh opened this issue Jan 10, 2025 · 8 comments
Labels
Design Task is about designing something. Good first issue Good for newcomers

Comments

@kirillzh
Copy link

kirillzh commented Jan 10, 2025

The Bitkey app uses mono space font for addresses as recommended by bitcoin.design.

We got some customer feedback that 1 and l look very similar and are hard to distinguish.

Suggestions:

  • explore other fonts to reduce the risk of mixing up 1 and ls.

Here's a screenshot from the bitcoin.design demonstrating the issue, it looks practically identical to how we render address in the Bitkey app as well:

@GBKS
Copy link
Contributor

GBKS commented Jan 13, 2025

Oh, this is interesting feedback. Here are a few alternatives for comparison.

image

The bottom three have more unique base shapes for 1 and l, with that curved base on the l. Which font do go with probably depends what fits best with your primary choice of font.

As for the user feedback, were they trying to manually type/copy the address, or compare it to what they saw in another UI to verify accuracy? Or was it another situation?

@GBKS GBKS added Design Task is about designing something. Good first issue Good for newcomers labels Jan 13, 2025
@yashrajd
Copy link
Contributor

Great feedback...in the Guide screenshot itself the first block on the second line of the address reads '3l06' but most people would probably read it as '3106' (due to the monospace l (L) looks like a 1 in whatever font we used there), especially since it is preceded and followed by a number.

@kirillzh
Copy link
Author

kirillzh commented Jan 13, 2025

As for the user feedback, were they trying to manually type/copy the address, or compare it to what they saw in another UI to verify accuracy? Or was it another situation?

Response from the customer "In that specific case I was trying to manually copy to send from my Lightning Node on Umbrel to Bitkey and there was no ability to scan a QR code.". They mentioned noticing that "1" and "l" very similar while copy-pasting the address.

@GBKS
Copy link
Contributor

GBKS commented Jan 17, 2025

Here's what the default Lightning Node UI on Umbrel looks like. For background, Umbrel has both Bitcoin and Lightning nodes as separate applications. The bitcoin one has no send/receive functionality, that is all in the lightning application. This may or may not have been what the customer used, as you can also install other bitcoin/lightning applications on Umbrel.

Image

As @yashrajd mentioned in Discord, the good thing is that lowercase L is not a valid character in bitcoin addresses. That simplifies error detection, you could even limit the input field to not accept those characters at all. Plus, bech32m addresses are designed so that 4 or fewer mistakes can always be detected. So even if the user is not 100% confident about the 1/l situation, the UI can do validation and show a small check to indicate that the address is valid. Particularly for higher amounts, where there's more anxiety, that extra confirmation can help put users at ease.

@kirillzh
Copy link
Author

@GBKS makes sense 👍🏻

One of our engineers brought up a pattern that 1Password follows for displaying passwords - they use different colors for numbers and letters, which can help with distinguishing 1s and ls through pattern matching.

Image

@yashrajd
Copy link
Contributor

yashrajd commented Jan 17, 2025

Also as I mentioned in discord, IIUC the trouble is that the manual check occurs on the sender-side (which may or may not even be our Bitkey user) likely using a different app than Bitkey, we may not have a lot of control in how that app/platform does address formatting or error detection, handling or error messages. Example below 💀:

Image

@GBKS how does the send page and address formatting look in umbrel?

So while I do prima-facie like the idea of different colors for numbers and letters, I wonder how practically useful it is... the real (but perhaps longer-term) solution is moving away from interacting with addresses at all! Silent payments and contacts will be super-useful for that: https://bitcoin.design/guide/how-it-works/silent-payments/#labels--contacts

@GBKS
Copy link
Contributor

GBKS commented Jan 22, 2025

Now that we have gathered some different perspectives on this, I'd like to ask the question whether everyone thinks that there is something we should update in the guide. We could, for example:

  1. Do nothing
  2. Do nothing for now and revisit if other customers also bring this up and/or actual errors occur. This one customer only mentioned noticing the similarity. That does not mean it's necessarily a problem to address, and errors can be caught via validation. See if anecdote turns into data.
  3. Add a note in the guide about the character similarities when choosing mono space fonts, and to try to avoid the problem by choosing an appropriate font
  4. Suggest the use of color to distinguish letters and numbers
  5. ... what else?

Assigning a severity to this issue is probs a good starting point. Personally, I don't see it as severe and think 3 could be a good option, to draw attention to the choice of font, and focusing on this specific character distinction.

What do you think?

@yashrajd
Copy link
Contributor

3 + updated mockup with appropriate monospace font would work for me...

as I said above I suspect there isn't much bitkey or the receiving wallet/app can do in this specific case since manual validation would be done on the send-side. The send/send-review screen should handle this appropriately (as bitkey already does)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Design Task is about designing something. Good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

3 participants