Bisq: Improve "Fund your offer" popup

[ripcurlx]

As this is a very important screen especially for a first time user, we should structure it in a way that it is easier to digest. E.g. having it more in the form of a receipt like on other exchanges.

[tr37ion]

I'm thinking of shortening the text while keeping details following @ripcurlx idea of listing it like a receipt :

You will deposit 1.00532300 BTC in an escrow wallet. Which includes ...

 * Your trade amount                                  1.00000000 BTC
 * The later refunded security deposit is             0.00500000 BTC
 * Bisq takes a trading fee of 0.2% which is          0.00020000 BTC
 * The obligatory Bitcoin network fee is              0.00012300 BTC
 --- TOTAL ---                                        1.00532300 BTC

Please choose teh way you will transfer the TOTAL deposit to the Bisq escrow wallet:

                   [USE BISQ]             [EXTERNAL WALLET]

[ripcurlx]

I've tried to put all ideas into a mockup to continue the discussion 😄. I'm not happy with the funding option box yet, but just as a first iteration.

[ManfredKarrer]

Looks great!!!! The new icons might be used at more places!

[ripcurlx]

Thanks - still I'll start to put this kind of more designable screens out into the #ux channel so real UI designers may pick it up and no one will check "Don't show again" any more 😉

[ripcurlx]

I also need to check the current state of the http://www.jensd.de/wordpress/?p=2686 lib as I've also used icons from the Fontawesome Pro pack (just purchased it yesterday). Maybe in worst case I need to fork it and include the pro version of the font myself.

[mrosseel]

Very nice!
Some suggestions:

• The later refunded security deposit => Security deposit (you get this back)
• current USD/EUR price equivalents?

[ripcurlx]

Good point @mrosseel on the price equivalents. This might make it easier for people to valuate the fees and deposit especially if they are new to the crypto world.

[mrosseel]

The only issue I see is in non-fiat trades, e.g. BTC <-> LTC, is choosing which fiat currency to use.

There is no 'global' fiat currency as far as I know, only currencies inside of payment accounts. These could either not be setup or have a mix of USD/EUR/... .

Maybe the easiest would be to define a fallback currency 'USD'. Even better would be to have a 'preferred' fiat currency in the account settings.

[ripcurlx]

I've created an updated version with and without Dollar values. Of course in the case of crypto-crypto trading we could think about leaving the conversion out atm until we have a proper solution for that. We also should think about how we could phrase "Multisiq deposit address" in a more user friendly way. If you are not into cryptocurrencies more deeply this might just sound confusing to you. Maybe someone of you has a good idea how to communicate this kind of escrow transaction in another way.

[tr37ion]

I like the visual look of the Receipt UI Givie it a bit more white space. Eg.

[mrosseel]

looking good!

• Is there a reason there is no USD value for the total?
• In the spirit of brutal honesty, would it be helpful to add a line 'non-refundable fees' which ads network fee + trading fee?

[ManfredKarrer]

Agree that more whitespace would be better. Also darkgreen icon is good.

Yes USD value might be good.
I think fee are be default non-refundable.

[tr37ion]

@mrosseel I was thinking a similar thing. Listing the gross/net values and final cost of the transaction converted to to currently chosen currency.

@maybe we can colour the fee icons dark red and the others green. While I would say, it depend if the gross/net values are added, too.

[ripcurlx]

Thanks for the feedback! We definitely could add more whitespace. Just was to lazy in the mock-up to move it more upwards 😉. Having just one icon colorized is not very good, as I personally wasn't sure what it should mean. Having all others grey gives you the feeling, that only the green one is somehow selected. Maybe we could add an additional indicator showing which entry gets refunded and which are part of the total fees to be paid for doing this transaction. I'll add the total value in USD also in the next mockup.

[tr37ion]

@ripcurlx The icon coloured was just a test getting an idea how this might look if refunds are coloured differently. You can split the total into fees and net total eg.

[ripcurlx]

I like the idea of making it easier to see to total fees paid per trade. Also I've added the USD value now for all BTC values. I've added the colorized indicator which item is refunded or not at the end of each line, as it will also be next to the help icon which would explain the reason behind it as well.

[ripcurlx]

Or layouted a little bit different again to use the available space and not to have this big blue box at the bottom.

[ripcurlx]

Or because of consistency reasons atm we might use our Titled Group style.

[ripcurlx]

If we want to stick with the "Multisig deposit address" wording then I think we should add some information or FAQ link where it is explained.

[tr37ion]

@ripcurlx Good work. Some small additions:

• the Multisig explanation should be a hyperlink or info sign, if at all.
• the Don't show again feels a bit to large
• How about putting the Total fees/Total Deposit below each other?
• I kind of think the The total deposit ... explanations is better positioned below the blue box?!

[ripcurlx]

Thanks for your remarks @tr37ion!
Multisig: I'll have a look if I can make a nice inline info sign with a TextFlow component
Don't show again: As I'll use for now the default style that is used on all other popups it might need to be that way for now. But as soon as we change the design in greater steps I'll continue to fix this issues step by step.
Total fees/Total Deposit: I didn't put them below each other, because it wasn't immediately clear anymore if the total fees are already part of the total deposit. So I decided in the end to put it rather next to each other.
The total deposit...: I placed it at the moment right after the total deposit, so it is closer to the total deposit value. Also I want to increase the chance that people are actually reading it and not closing the popup immediately when they have scanned through the funding options.

[cbeams]

This new popup looks so much better. I just walked a friend through setting up Bisq last night and was desperately wishing that this information in particular was more clear. A Big +1.

I suggest the following changes:

1. "Is refunded later" => "To be refunded after trade completion"
2. "Bitcoin network fee" => "Bitcoin mining fee"
3. "0.20% to support Bisq" => "To support Bisq development"
4. "To secure your transactions" => "To process your transactions"

The reason I suggest dropping the 0.20% above is because (a) it's not always 0.20%, it's based on a minimum fee + a formula based on distance from market price, and (b) because it's inconsistent with the other items in the list—none of them talk about a percentage at all.

One reason to change the word "secure" to "process" in number (4) above is that it avoids confusion with our "security deposit" term. Yes, mining fees are all about security, but it's simpler for the uninitiated to just think about paying to have their transactions "processed" by the Bitcoin network I think.

Also, having a link like "I don't have any bitcoins" is a great idea. I'd change the text to read "Don't have any bitcoin to fund your wallet? Read [this]." (I don't really like the "read this" part, but the point is to make the text even more explicit for people.

[ripcurlx]

Thanks for your input @cbeams! I've updated the mockup.

"0.20% to support Bisq" => "To support Bisq development"

I've removed the trading fee percentage from the receipt as well. You're right that it might be mistaken being a fixed trading fee as it is written more like a description text. Still I want to make it as easy and transparent to the user how much she is paying for doing the trade. Because of this, I've added the total fee percentage as an additional information to the total fees section.

"Don't have any bitcoin to fund your wallet? Read [this]."

I don't think we need the additional "Read [this]" to make it obvious to the user that she can click on this link to get more information.

[ManfredKarrer]

The in and out icons are a bit confusing imo. the red ones mean to me to receive money but then should be green. Security deposit is just locked, so might need some other icon. For trade amount maybe 2 arrows with opposite directions might work? Of maybe no icons are needed at that part at all?

[ManfredKarrer]

Actually after a second look. I think the question mark gets too much in the background with the icons and also the left icons which are perfect looses weight due the colors of the right icons. So maybe we really could just drop them? Beside that it looks great!

[ghost]

Mocked up something quickly to try a cleaner way of showing the information.

I just joined slack today but would like to contribute to the project in regards to the UX/UI side of things. A good first approach would be for us to put together some standard components e.g: modals/popups, panels, etc.. that can then be re-used and to define some guidelines for them, this would create a more consistent and aligned look and feel for the app.

I'll catch up tomorrow with @ripcurlx and see what we can do and what are the plans.

[tr37ion]

Is there any progress in @diogorsergio 's direction? The mockup is well done.

[ripcurlx]

Actually @pedromvpg and @diogorsergio are working on a complete redesign of the client and are about to finish the proposal (https://docs.google.com/document/d/1KFRAsPruYNXnK0HQU3HBZln3V8G8ymm3zc2VzNJL2kI/edit). As soon as it is published and finds consensus I'll can start implementing it. This would affect all popups as well.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed because of inactivity. Feel free to reopen it if you think it is still relevant.