lightning-browser-extension icon indicating copy to clipboard operation
lightning-browser-extension copied to clipboard

Published 20 hours ago • verified publisher icon getAlby

Send UX: Too long input placeholder is being cut off

Open bitcoinuser opened this issue 2 years ago • 8 comments

Describe the bug

Text in Portuguese is cut on send field

Screenshots

To Reproduce

Steps to reproduce the behavior:

  1. Set Portuguese language on Alby and go to Send window

Expected behavior

See all the text or on mouseover see all the text.

@escapedcat comment:

The UX should be changed. Currently the text is an input-placeholder. This should be some sort of hint-text and not a placeholder within the input.

Hint can be added via input-prop

Alby information

  • Alby Version: 1.16.0

bitcoinuser avatar Sep 25 '22 13:09 bitcoinuser

Alternatively we can add the title attribute to the input field. On mouse over the user will see a browser native tooltip with the full text of the input-placeholder. Easy to implement.

Screenshot 2022-10-07 at 18 35 26 (1)

rottingcleaner avatar Oct 07 '22 16:10 rottingcleaner

Alternatively we can add the title attribute to the input field. On mouse over the user will see a browser native tooltip with the full text of the input-placeholder. Easy to implement.

Yeah, but I don't think this is a common or learned UX pattern we should use. If you want to "hide" hint-texts usually people use some sort of "i"-icon with a hover, but I don't think we currently need that. A clear text below an input does the job. What do you think?

The placeholder should be changed to what will be input there i.e. LNURL.../lightning-address for example. We can think about the actual text. /cc @reneaaron

escapedcat avatar Oct 09 '22 08:10 escapedcat

Can you post a screenshot of how that would look?

reneaaron avatar Oct 09 '22 09:10 reneaaron

image I guess we have the chance to improve label, placeholder and hint.

escapedcat avatar Oct 09 '22 09:10 escapedcat

Just for reference image

vaibhavgarg237 avatar Oct 10 '22 17:10 vaibhavgarg237

I feel in the case of placeholder text, we can indicate the user for action i.e. "Paste here...". Like below-attached screenshot. What do you think? Or "Your destination" ?

@escapedcat I opened a PR #1591, with this change

image

vaibhavgarg237 avatar Oct 10 '22 17:10 vaibhavgarg237

/cc @dvoroneca

escapedcat avatar Oct 11 '22 05:10 escapedcat

What do you think of this?

  • Label: Recipient
  • Placeholder: ``
  • Helptext: Invoice, Lightning Address or LNURL

reneaaron avatar Oct 12 '22 06:10 reneaaron

What do you think of this?

  • Label: Recipient
  • Placeholder: ``
  • Helptext: Invoice, Lightning Address or LNURL

TBH, the empty placeholder seems slightly odd, although this label and hint look good. Can we add "Paste here" or some similar text here?

image

vaibhavgarg237 avatar Oct 14 '22 16:10 vaibhavgarg237

I'm okay with the empty field, to me that seems fine. I don't feel like every field needs to have a placeholder. Paste here feels wrong to me as you can also type a lightning address.

reneaaron avatar Oct 15 '22 20:10 reneaaron

Okay. I have updated PR #1591 with this change & test

vaibhavgarg237 avatar Oct 16 '22 07:10 vaibhavgarg237