Use consistent (i) icon for funds needed and re-position it

[ripcurlx]

As the popup that is opened by clicking on the (?) shows the concrete details of the funds needed, it should be placed within the input box after the BTC value. Also we should use the (i) like everywhere else.

[tr37ion]

Formating the BTC value as hyperlink might be more intuitive-

[ripcurlx]

I didn't implement the hyperlink style for the fund amount in the end, as there is no action triggered when clicked, only the roll over behavior. Especially having a hyperlink just below that field which triggers an action when clicked, makes it quite confusing. I've re-positioned the (?) to the right and replaced it with an (i) that is used everywhere else in the app.

[tr37ion]

That's fine. My concern is more that people overlook it, because it is so far right now. Or might it be possible to just list the details below?

Another idea might be adding a percentage value for fee vs. trade value could help people making too small transactions. Just a thought.

[ripcurlx]

Actually, I'm not very happy with the current solution either. I'll have a look how hard it is to position it within the text field or think about a maybe different solution at all. Percentage value is a good idea. I'll give it a shot as well.

[ripcurlx]

Unfortunately it is not ver trivial to do this for TextFields as this is not a use-case that is quite common for TextFields. I tried to do a minor improvement by putting the icon within the text field on the right, so it's standing out a little more than before. Still I would also prefer have everything (also fees) visible all the time.

As we have quite a lot of space we could either show the fees like

Or even split the fees up like

Than the info popup is really just for having a little bit more information on these numbers if I'm interested. What do you think @tr37ion and @ManfredKarrer

[ManfredKarrer]

@ripcurlx I also think that on the right side it is overlooked too easily. That was the reason why I used it next to the label, but also that did not motivate people to recognize it. In usability test nobody made the roll over....
To add the text might help but not sure if the numbers are adding confusion/complexity or help. Maybe some text based hyperlink next to the value might help: 0.010629 BTC (click here for fee details) ?

[ripcurlx]

To add the text might help but not sure if the numbers are adding confusion/complexity or help.

I think when you see the information immediately it will communicate what everyone is thinking about anyways. How is this number calculated? Of course we could make the funds as a hyperlink and show the popover on rollover, but I'm not sure if it's not better in this case to show the most important info immediately. And if the user gets more interested, she might find the info icon to the right.

[tr37ion]

I like the third solution. Personally the i feels too far away. Is it possible to put it directly into the input behind the text?

Maybe use another i icon?

Or remove the copy symbol?

[ripcurlx]

Unfortunately having it right after the text is quite tricky. At least I haven't found a good solution yet. But we could easily change the color as you suggested to make it more visible.

[ripcurlx]

Regarding the copy icon I'm not sure, if it is used a lot atm. Privacy aware client analytics would be great for that 😀

[tr37ion]

Thinking of all possible suggestions, I come back to the hyperlink solution + %-values. It might be not 100% UX hyperlink behaviour, but that is not that important to the user. It is more important that the user is aware of information hidden behind the link.

[ripcurlx]

I'll give it a try to see how it feels having it in the app like that and how I have to position the rollover in this case.

[ManfredKarrer]

If a hyperlink is used the rollover should become a popup. But I am not sure if that is good. To have a more lightweight rollover info is better IMO but then a hyperlink is the wrong solution to trigger it.
I think a green "i" at the end and some text after the value (either btc values or text - "rollover info icon for more details"). % has the problem that the context that it is based on trade amount is not there and might confuse users (would expect all % values add up to 100).

[ripcurlx]

I tried out the hyperlink version, but it doesn't feel right and it's also strange behavior having this different roll over on the hyperlink text and the icon. My favorite atm would be having the icon in a different color that doesn't look like an error, but still pops out. And regarding the text, for me as an end-user the most valuable info is: How much fees do I have to pay (in percent) and how much is the deposit I'll get back afterwards (in currency format). I don't think it is a big problem if we have the fee percentage without the amount information as you normally automatically think that it's of the amount you are selling/buying IMO.

[ManfredKarrer]

@ripcurlx Agree. Seems to be the best version so far.

[tr37ion]

Ok, my last idea on this 😆

[ManfredKarrer]

Not sure if the icon over the textfield is problematic. I would not care to put it after the textfield like the icon below. Would be more in line with the other style as well.

[ripcurlx]

I followed your idea @tr37ion as it helps the icons to stick out more, but choose a less flashy green we are using already in Bisq.

[tr37ion]

Great, looks and feels like we got it now 😁