Add Support/help links on the UI

[UX-P]

As mentioned in this proposal here and according to Bisq user research here and here, there appears to be a lot of confusion on where to find support during particular points of the user journey.

Issues

• Keybase is great for discussing and resolving issues however, users have no access to the support channel from the Bisq UI.

• There does not appear to be enough guidance given directly from the Bisq app itself, which is where the user would initially look for support.

Solution

• Link to Keybase support displayed in chat panel

• Link to the trade process documentation

• Update link in trade process section

• Add help link or icon linking to appropriate documentation for each tab

Expected user outcomes

• Less enquiries regarding trade process on Bisq Keybase support

• Increase in trading activity due to decrease in drop off rate

• Possible increase in traffic on other Bisq Keybase community channels

1.Edit support section in Trade process

Location: portfolio tab

Current state

Expected state

Text Breakdown

Take a look at the trade process here
use this link: [https://docs.bisq.network/getting-started.html#4-send-payment]
Documentation should primarily be suggested as a form of help to reduce unnecessary traffic to the support channel.

If you have any problems you can try to contact the trade peer in the trade chat.

[OPEN TRADE CHAT]

The chat button should follow directly after the suggestion of contacting the trade peer for the user to take immediate action.

If your issue still is not resolved ask the Bisq community or request support
from a mediator using the link below: https://keybase.io/team/bisq
This text is smaller because this should be an alternative help solution once all other options have been tried by the user as to not clog up the Keybase support channel however, it is important to display this link as it is a direct journey to the primary support channel.

2. Add help link or icon in Bisq tabs

Location: BUY BTC tab, SELL BTC tab, FUNDS tab

Current state :

Expected state:

Icon

or

Text

Help link/icon should open in the browser and link to the following pages:

BUY BTC > help/? https://docs.bisq.network/getting-started.html#take-an-offer
SELL BTC > help/? https://docs.bisq.network/intro.html#in-a-nutshell
FUNDS > help/? https://docs.bisq.network/getting-started.html#fund-your-bisq-wallet

Design considerations

For point number 2 please ensure either text or icon is used, but not both as this causes a level of inconsistency.

Text
Text is instantly recognised by the user and mostly a good option unless there is little to no room to accommodate for wording.

• Position: right side of heading - if users are having trouble understanding the overall purpose of a web application screen, they tend to look for help in the top right corner of the screen.

• Blue Hyperlinks: Using coloured links will enhance overall usability. According to a ‘link readability’ study, the average web users identified blue underlined text as a link. As this is what has become officially familiar to users, it is a good standard to follow. This format removes the burden for users and prevents delays in speed when trying to gain access to support.

• Web standard blue link colour: hex #0645AD: rgb (51,102,187)

• ‘help’ text size: up to 2px smaller than main text

Icon
Icons are best used when it is instantly recognisable by the user or easily interpreted.

• Help Icon: must contain a question mark

• Position: directly beside and inline with heading

• Icon must be distinctive to the question mark icon currently available on the UI so the user can differentiate between tooltip and the help icon that leads to documentation.

@jmacxx @ripcurlx @xyzmaker123 are you able to pick this up at all?

Let me know if you would like to discuss these changes further, thanks!

[boring-cyborg]

Thanks for opening your first issue here!

Be sure to follow the issue template. Your issue will be reviewed by a maintainer and labeled for further action.

[ghost]

This might be a nice one for @xyzmaker123 if they want to do it, but first I'd like to hear from @m52go about the move to Matrix for support, which may impact this.

[m52go]

I recommend that any support links added to the software route to Matrix. As jmacxx noted, the project is already in the process of moving to Matrix, so routing people to Keybase is already not a great idea.

Furthermore, and perhaps more important since this proposal is about UX, many Matrix entities have web links, which means links to the the exact support chatroom and exact support staff profiles can be put in the wiki, software, etc. This makes it way more convenient for a user to get help -- they simply have to click a link and BOOM they're exactly where they need to be to get help. No need to download more software.

With Keybase there's no way to do this.

Therefore I strongly suggest that @bisq-network/support folks do what's needed to establish Matrix as the go-to channel for support as soon as possible, so that any links from the software that come from this proposal link to Matrix instead of Keybase.

[MwithM]

I'm going to recommend bisq.chat instead of keybase through all channels I know then (Telegram, reddit, Twitter and Keybase itself).

[UX-P]

Great! It's nice to hear that the Matrix transition is official. I’ll evaluate the user impact of these changes and report on them soon after these have been implemented, thanks!