bisq-network / bisq

A decentralized bitcoin exchange network
https://bisq.network
GNU Affero General Public License v3.0
4.7k stars 1.27k forks source link

Bisq UI is confusing for use of Create-New-Offer button #4934

Open deusmax opened 3 years ago

deusmax commented 3 years ago

Description

Starting on the Buy BTC page, with for example a EUR fiat currency, everything is Green. All buttons say (have a label) "Take offer to buy BTC". When the user clicks the create new offer button, with label "Create new offer to buy BTC with EUR", the offer ends up on the Sell BTC page, which is Red.

Clicking a Green button results in a Red offer !! and vice-versa. This doesn't make sense. It is counter-intuitive and problematic UI design.

The labels for Take-offer and Create-new-offer buttons are very similar and do not clearly hint at the actual behavior. The casual or new user should be excused for feeling confused. I was.

This confusion results in many users going through a trial-and-error session, to discover the actual behavior. Also, first impressions are important.

Version

Current version v1.5.1, but not relevant as this is how the UI has been set-up.

Steps to reproduce

This is how the UI is currently set-up.

Expected behaviour

When a user clicks on a green colored Create-offer button on a green page, user expects offer to appear on the (same) green page. Same expectations with red offers.

Actual behaviour

Created Offer is displayed on another page.

Screenshots

Buy BTC page (green buttons) with EUR. buy_btc-EUR-2020-12-10

Corrective action

The UI experience can be improved by modifying, either:

  1. the Create-new-offer button label, only. Ex. on the Green page, to display "Create new offer on the Sell_BTC (Red) page" or similar message, or
  2. the button behavior. Have new offers created on the current page, with button label to display "Create new offer here".

To me item 2 would be better and the preferred modification path resulting in a clear UI improvement.

What do you think ?

Please add a GUI label.

chimp1984 commented 3 years ago

The UI is centered about your BUY or SELL intention. So if you create a BUY BTC offer the offer is interesting for takers who are willing to SELL BTC, not to users who are willing to BUY BTC. Thats why it end up in the opposite table. Youe BUY intent is the SELL intent of the peer.

deusmax commented 3 years ago

Yes, you are technically correct. But the current setup does not make for a good UI. The actions/results are counter-intuitive, while the technical intent is consistent.

For instance the Green button label could say "Add a new offer to this page" (or similar), by-passing the buyer-seller technicality.

The Bisq buyer-seller definition can be hard to grasp for a new or casual user. There is always a buyer and a seller. An offer to Buy BTC, is it for me to buy someone's BTC or someone wants to buy my BTC ? Not clear.

Experienced and advanced Bisq users know how the GUI works of course.

I believe the UI here can be improved to feel more natural.

chimp1984 commented 3 years ago

"Add a new offer to this page"

I think that would be more confusing not realy knowing if one is in the sell or buy side.

I agree its not easy and confusing, but so far I have not seen a better suggestion how to deal with it. Wording improvements might help. But the current ones are actually pretty clear IMO.

How can "Take offer to buy BTC" or "Create new offer to buy BTC with EUR" be misinterpreted?

I agree to see the newly created offer in the other table is confusing, but keeping in the same table would be either wrong or would require to swap the buttons, then you have a "Take offer to sell BTC" and a "Create new offer to buy BTC with EUR" button on the same screen which would be much more confusing.

But those problems are not Bisq only. Ask and Bid are for non-pro traders much more confusing IMO.

deusmax commented 3 years ago

How can "Take offer to buy BTC" or "Create new offer to buy BTC with EUR" be misinterpreted?

"Create new offer to buy BTC with EUR" when the user is on the buy BTC page, how can it not ? The user does not know if the reference is to the GUI page or the intent. It is not intuitive.

But those problems are not Bisq only. Ask and Bid are for non-pro traders much more confusing IMO.

Totally agree here !! :-)

The current method, obviously works. I'm just pointing out something in the UI that seems easy, but may not be. Is there a way to improve it and present the user a consistent experience ?

deusmax commented 3 years ago

Hi @pedromvpg , Since you are a UI/UX designer, can you please comment ? Thanks

pedromvpg commented 3 years ago

Thanks! I agree that there is some confusion and it requires some trial and error for users that are not experienced with trading interfaces. Until now this has been resolved with language.

I'll see if there's something that can be done visually to minimize this confusion: • Layout to connect the "Create New Offer" to the selected currency • Differentiate the 2 CTAs (color fill vs outline) • New icons for each CTA

Another issue is the different language when trading fiat or altcoins: • for fiat the CTA reads "Take offer to buy BTC" • for alts the CTA reads " Take offer to sell ALT"

Screen Shot 2020-12-20 at 1 40 18 AM

It's possible that reducing it to "Take Offer" would minimize confusion.

I'll work on some mockups to test some of these ideas so we can run it by the bigger team.

deusmax commented 3 years ago

I agree that there is some confusion and it requires some trial and error for users that are not experienced with trading interfaces. Until now this has been resolved with language.

@pedromvpg , Great to hear you agree there is some confusion.

I'll see if there's something that can be done visually to minimize this confusion: • Layout to connect the "Create New Offer" to the selected currency • Differentiate the 2 CTAs (color fill vs outline) • New icons for each CTA

Another issue is the different language when trading fiat or altcoins: • for fiat the CTA reads "Take offer to buy BTC" • for alts the CTA reads " Take offer to sell ALT"

It's possible that reducing it to "Take Offer" would minimize confusion.

I'll work on some mockups to test some of these ideas so we can run it by the bigger team.

The create (or make), take offer language is much clearer !
Hope you resolve this source of confusion and persuade the bigger team to apply some UI consistency.

Btw, discovered this interesting old Bisq setup: oldUI-buy_btc-EUR-2020-12-16

chimp1984 commented 3 years ago

It's possible that reducing it to "Take Offer" would minimize confusion.

Thanks @pedromvpg for looking into that!

I think one difficulty BUY/SELL for fiat and altcoins have a different meaning. Technically it is always about BTC: I buy or sell BTC. This matches the intuitive meaning when you use fiat. I "Buy 1 BTC with 20 000 EUR", not I "Sell 20 000 EUR for 1 BTC". For altcoins thought its the opposite. It is intuitive to say I buy or sell XMR: I "Buy 152 XMR with 1 BTC", not I "Sell 1 BTC doe 152 XMR".

I think intuitively we consider one side as commodity and one side as money. For BTC/Fiat the fiat is considered as money and BTC as commodity. For altcoins the altcoin is considered the commodity and BTC the money.

Regarding confusion with offer being the mirror direction: The avatar is the seller in the Buy screen. Maybe we can connect the avatar more with the CTA button: Action Avatar icon
Take offer to BUY BTC from Seller

Also the "remove" button could be more clear that its my Sell offer at the buy screen...

bitcoinworl commented 3 years ago

Description

Starting on the Buy BTC page, with for example a EUR fiat currency, everything is Green. All buttons say (have a label) "Take offer to buy BTC". When the user clicks the create new offer button, with label "Create new offer to buy BTC with EUR", the offer ends up on the Sell BTC page, which is Red.

Clicking a Green button results in a Red offer !! and vice-versa. This doesn't make sense. It is counter-intuitive and problematic UI design.

The labels for Take-offer and Create-new-offer buttons are very similar and do not clearly hint at the actual behavior. The casual or new user should be excused for feeling confused. I was.

This confusion results in many users going through a trial-and-error session, to discover the actual behavior. Also, first impressions are important.

Version

Current version v1.5.1, but not relevant as this is how the UI has been set-up.

Steps to reproduce

This is how the UI is currently set-up.

Expected behaviour

When a user clicks on a green colored Create-offer button on a green page, user expects offer to appear on the (same) green page. Same expectations with red offers.

Actual behaviour

Created Offer is displayed on another page.

Screenshots

Buy BTC page (green buttons) with EUR. buy_btc-EUR-2020-12-10

Corrective action

The UI experience can be improved by modifying, either:

  1. the Create-new-offer button label, only. Ex. on the Green page, to display "Create new offer on the Sell_BTC (Red) page" or similar message, or
  2. the button behavior. Have new offers created on the current page, with button label to display "Create new offer here".

To me item 2 would be better and the preferred modification path resulting in a clear UI improvement.

What do you think ?

Please add a GUI label.

totallu agree!! I failed several times until I notice that I was doing the opposite to what I intended!! bisq team you need to fix this!!

deusmax commented 3 years ago

Hi @bitcoinworl I believe everyone suffers the confusion of your experience, definitely needs a fix ! Need more people to push for this.

deusmax commented 3 years ago

new UI design in progress, see project New UI design#47

stale[bot] commented 3 years ago

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.

printathing commented 3 years ago

Let's not let this auto-close. It's very confusing as it is.