Bisq Easy trade UI/UX review

[axpoems]

I have performed a UI/UX review of the Bisq Easy trade protocol. I present my findings/highlights here.

The trading path for Bisq Easy actually consists of seven steps. Nontheless, it shows only five. Steps 2 and 3 are repeated with different and unrelated states, for example step 2 of seller shows first WAIT UNTIL PAYMENT HAS STARTED and after WAIT FOR BITCOIN ADDRESS. This is confusing for the user who is following the path and suddenly can get lost by the change of name step.

     SELLER                             BUYER

1    1 SEND ACCOUNT DATA                1 WAIT FOR ACCOUNT DATA
     |                                  |
2    2 WAIT UNTIL PAYMENT HAS STARTED   2 START PAYMENT
     |                                  |
3    2 WAIT FOR BITCOIN ADDRESS         2 SEND BITCOIN ADDRESS
     |                                  |
4    3 WAIT FOR PAYMENT                 3 WAIT FOR PAYMENT CONFIRMATION
     |                                  |
5    3 SEND BITCOIN                     3 WAIT FOR BITCOIN PAYMENT
     |                                  |
6    4 AWAITING BITCOIN CONFIRMATION    4 AWAITING BITCOIN CONFIRMATION
     |                                  |
7    5 COMPLETED                        5 COMPLETED

Moreover, the trading path should be the same for both peers (seller and buyer) and the action messages, as they already are, specific for each one. This way we provide a simple framework to assimilate the Bisq Easy protocol and mental map for either role.

Thus, I propose the following:

SELLER / BUYER           SELLER                                        BUYER 

1 PAYMENT ACCOUNT      | Send your payment account data to the buyer | Wait for the seller's payment account data
|
2 PAYMENT TRANSFER     | Wait for the buyer's 'XXX' payment          | Send '100.00 XXX' to the seller's payment account
|
3 BITCOIN ADDRESS      | Wait for the buyer's Bitcoin address        | Fill in your Bitcoin address
|
4 PAYMENT CONFIRMATION | Check if you have received '100.00 XXX'     | Wait for the seller to confirm receipt of payment
|
5 BITCOIN TRANSFER     | Send '0.001 BTC' to the buyer               | Wait for the seller's Bitcoin payment
|
6 BITCOIN CONFIRMATION | Waiting for the blockchain confirmation     | The seller has started the Bitcoin payment
|
7 TRADE COMPLETED      | Trade was successfully completed            | Trade was successfully completed

Notice that this way, mapping can be easily perceived between fiat and BTC, which I believe makes it very clear and self-explanatory as to how it works.

@HenrikJannsen - Any reasons why these 2 steps were mapped together? If having too many steps is a concern, I think TRADE COMPLETED is a candidate for being omitted in the path. Then, when finished, we could show the "Trade completed" screen only with the summary (I am working on this in #1186).

If you agree with this, I can quickly jump into working on it.
I know this comes close to the deadline, but I think it would be important to get this changed before the launch.

[HenrikJannsen]

The reasons for the 2 steps merged into 1 UI step was to not expand the protocol to 7 steps. It was earlier combined in one trade protocol step, but then I thought its more clear on the protocol side to separate it. Most other steps are followed by the action of the peer. Those 2 steps though are at the same peer thats why it was previously combined into 1 step.

The visible screen is already very limited as it is. Adding 2 steps will require scrolling and the chat area gets even further out of sight (another open UX problem).

I agree that the consolidation of the names makes it more clear. But I am not sure about the 2 new steps to get added. It also makes it feel that the protocol is more complex.

At e-commerce pages there are also multiple sections to do combined in one stage. Maybe we should just remove the change of the title of the stage, but find one which express both combined actions?

I am also not so sure to remove the completed step as thats the goal and it should become more a summary screen as it is now. Might also include more new features like giving feedback, etc.

As it sounds like a difficult task and to me it does not feel its a huge problem as it is I would not have a problem to delay that discussion for later.

You need to consider also that for most users they will act as only one role (buyer), and then I think the combined steps are less a problem. We could though change that the left step title does not change and that the info on the screen of the 2nd part of the step will appended to the 1st step. Then I think its less confusing if the user follow the screen and sees later a change. Maybe we can even add a vertical secondary step UI at the right box, showing that this stage has 2 sub-steps. Maybe that would be the best solution? What do you think?

[axpoems]

Resuming the discussion, there are three interconnected issues here that I wanted to highlight:

• The first issue is that the path should be identical for both the buyer and the seller. They follow the same 'journey', making the same 'stops'. For example, if a user switches roles, they should see a consistent interface. Misunderstanding could arise if users would need to communicate their steps with each other. This also simplifies the schema for addressing the subsequent issues.

• The second issue concerns the naming of the steps. The purpose of representing this path is to map the user's position in the entire trade process, not to provide instructions, as is currently the case in some instances. Besides being redundant and unnecessary to have the path named with the same action/instruction phrases, the action instructions should be located, as they currently are, in the main area of the trade window, which is larger and more visible.

• The third issue involves the grouping of some steps to have only five of them. The resolution of this issue is better achieved depending on how the previous ones are addressed. Essentially, there are two domains in the path: one for payment/fiat and the other for bitcoin/crypto. IMO, they should be grouped accordingly, as it makes more sense for the user. The following representation shows more clearly my point.

Currently:

#	Domain step	seller	buyer
1	Fiat	action	wait
2	Fiat + Crypto	wait + wait	action + action
3	Fiat + Crypto	action + action	wait + wait
4	Crypto	wait	wait
5	End	-	-

My proposal:

#	Domain step	seller	buyer
1	Fiat	action + wait	wait + action
2	Crypto	wait	action
3	Fiat	action	wait
4	Crypto	action + wait	wait + wait
5	End	-	-

Now replying specifically to your questions:

The reasons for the 2 steps merged into 1 UI step was to not expand the protocol to 7 steps. It was earlier combined in one trade protocol step, but then I thought its more clear on the protocol side to separate it. Most other steps are followed by the action of the peer. Those 2 steps though are at the same peer thats why it was previously combined into 1 step.

I understand the reasons behind the decision but I disagree on the result. It is not ok for the map to undergo changes. Among many reasons metioned already the user start with one path and ends with another. If we restrict ourselves to only five steps, as per the reasons you outlined, then the structure should be designed to ensure that the path/map remains consistent in its development. Grouping should be done based on criteria that simplify and clarify.
One solution is the new proposal presented in this comment.

The visible screen is already very limited as it is. Adding 2 steps will require scrolling and the chat area gets even further out of sight (another open UX problem).

I'm not a fan of the 7-step approach myself. I proposed it previously because it offers a comprehensive and straightforward presentation of the trade process. However, I don't entirely agree with your point about limited space. If you rearrange the 'Open wallet guide' and the 'Open trade guide,' you would create sufficient space for the seven steps. Nevertheless, as mentioned, I recognize the advantages of simplifying it to five steps and support that idea, but not in its current form. My updated suggestion is to combine steps 1-2 and 5-6. Please review the proposal below.

I agree that the consolidation of the names makes it more clear. But I am not sure about the 2 new steps to get added. It also makes it feel that the protocol is more complex.

I agree, we can make it into five steps.

At e-commerce pages there are also multiple sections to do combined in one stage. Maybe we should just remove the change of the title of the stage, but find one which express both combined actions?

Yes, that's my intention, and I am now putting forth the proposal.

I am also not so sure to remove the completed step as thats the goal and it should become more a summary screen as it is now. Might also include more new features like giving feedback, etc.

I also agree with this, I just mentioned as an exploring possibility.

As it sounds like a difficult task and to me it does not feel its a huge problem as it is I would not have a problem to delay that discussion for later.

I believe it's important to address this matter prior to the launch of Bisq2, considering it's a key feature and is expected to have a high level of coherence. I'm suggesting a straightforward solution.

You need to consider also that for most users they will act as only one role (buyer), and then I think the combined steps are less a problem.

I agree that the majority will be buyers, but some may transition to sellers in the future. Nevertheless, simplification will benefit everyone.

We could though change that the left step title does not change and that the info on the screen of the 2nd part of the step will appended to the 1st step. Then I think its less confusing if the user follow the screen and sees later a change.

I don't quite understand what you mean here. Sounds like another option but no the simpler pherhaps.

Maybe we can even add a vertical secondary step UI at the right box, showing that this stage has 2 sub-steps. Maybe that would be the best solution? What do you think?

This was one of my initial thoughts, and while I like it, after making the whole analysis, I realized we could make it easier.

Here's the complete trade proposal, addressing the three points mentioned in the begining:

[HenrikJannsen]

Interesting idea.

We could even go further and change the order of the protocol.

1: Exchange of payment data: Seller send Fiat account data; Buyer send BTC address
2: Fiat payment: Buyer send fiat, Seller confirm receipt
3: BTC payment: Seller send BTC, Buyer wait
4: BTC confirmation: Both wait
5: Complete

3 and 4 could be even combined.

What do you think?

In your suggestion the BTC address transfer feels like a distraction in the process.

I need to think about potential risk in the above suggestion. Also we should consider that as soon the wallet in implemented the BTC address transfer will a button click.

[axpoems]

I really like the idea of syncing the exchange accounts in the same step . Building on this, I would take it a step further by combining it into a '3-step protocol.' By merging steps 3 and 4, as you previously suggested and as outlined in my last proposal, we would be achiving this, with the 'completed trade' being more of a conclusion than an additional step requiring action.

Examining this through the lens of 'actions,' it also aligns coherently. The seller is engaged in three actions, and similarly, the buyer is involved in approximately three actions (2 + wait the bitcoin confirmation).

Implementing this would also contribute to marketing Bisq-Easy as a straightforward easy three-step transaction.

I've created another mock-up for this latest discussion idea and it looks visually consistent and clear.
In naming the steps, I adhered to a criterion of using two words and avoided repeating the term 'payment.' This had the purpose of make each step name unique and more identifiable.

Concerning the future wallet implementation, I believe this flow remains valid. Perhaps the initial screen for the buyer would disappear, but the subsequent steps would remain correct.

What is your take on this new proposal?

[HenrikJannsen]

Looks good!

Maybe we can show the previous step in those 2-step (action/wait) stages with a text line with a expand icon for the previous action, so that it is not hidden.
E.g. 1. step: Send account data
2. step: First text line: "You sent the account data to the buyer" and a expand icon to see the UI elements used before with all the data. Below that the waiting icon as main catcher

Alternatively we could add some info text below the wait text.

At stage 1 there should be also shown the state of the peers action:
E.g. If I as buyer has not sent yet the btc address, I should see some info when the seller has sent the payment data (though not 100% sure about that - in regards to information overload).

Do you want to work on the protocol changes as well? I think it would be good to get other devs familiar with the protocol code base. But if you don't want to take that part we can delegate it to other devs.

[axpoems]

Maybe we can show the previous step in those 2-step (action/wait) stages with a text line with a expand icon for the previous action, so that it is not hidden.
E.g. 1. step: Send account data
2. step: First text line: "You sent the account data to the buyer" and a expand icon to see the UI elements used before with all the data. Below that the waiting icon as main catcher

Are you referring to the main area of the trade window?

Do you want to work on the protocol changes as well?

Yes, I can do that.

[axpoems]

You can assign this issue to me and we can follow-up with this.

[HenrikJannsen]

Are you referring to the main area of the trade window?

The right side where the wait and instructions are.
A bit similar as in screen 3 with the checkbox and the "I confirmed...". But dont have a too strong opinion on that.

[HenrikJannsen]

@axpoems What is your estimated availability over the next weeks and estimation of that work?
The open issues for milestone 2.0.0 are getting slowely resolved and I hope we get to release soon.
That trade protocol change adds a non trivial work package. Just want to get a guesstimate about the effort and launch schedule (not questioning the importance and need to change before launch).

[axpoems]

@HenrikJannsen - I have responded to this in the Matrix.