[bisq-network/bisq] Add Support/help links on the UI (Issue #5972)

[UX-P]

As mentioned in this proposal [here](https://github.com/bisq-network/bisq/issues/4904) and according to Bisq user research [here](https://github.com/bisq-network/proposals/issues/344) and [here](https://github.com/bisq-network/proposals/issues/349), 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**

<img width="375" alt="Screenshot 2021-11-24 at 13 20 09" src="https://user-images.githubusercontent.com/92308399/149793786-22eb862a-a525-429c-a797-e355f696ff9e.png">

**Expected state**

<img width="397" alt="Screenshot 2022-01-17 at 12 01 58" src="https://user-images.githubusercontent.com/92308399/149794278-178ac86e-75f5-4b80-bb01-9c06154f9ed7.png">

**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 :** 

<img width="310" alt="Screenshot 2022-01-17 at 12 29 02" src="https://user-images.githubusercontent.com/92308399/149797009-59e97bf0-5750-4c47-960b-727bc0207477.png">

<img width="775" alt="Screenshot 2022-01-17 at 12 08 42" src="https://user-images.githubusercontent.com/92308399/149797093-bf1039c2-5810-4013-abbd-42c7fdadf0c5.png">

**Expected state:**

Icon
<img width="235" alt="Screenshot 2022-01-17 at 12 36 50" src="https://user-images.githubusercontent.com/92308399/149797268-f8d9c654-5a41-4c74-aeb1-30784f2ac29c.png">

or

Text
<img width="1253" alt="Screenshot 2022-01-17 at 13 51 50" src="https://user-images.githubusercontent.com/92308399/149797356-a87adedb-0f6a-4001-8bd8-02fc3fef023b.png">

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!






-- 
Reply to this email directly or view it on GitHub:
https://github.com/bisq-network/bisq/issues/5972
You are receiving this because you are subscribed to this thread.

Message ID: <bisq-network/bisq/issues/5972 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.bisq.network/pipermail/bisq-github/attachments/20220117/e4972f60/attachment-0001.htm>