Explore design improvements

[woodser]

This issue lists possible design improvements based on previous brainstorming. Most effort until now has been to establish overall UX and UI design with less time to focus on details within each screen. This list is meant to serve as inspiration for possible improvements to eventually incorporate into the official design.

General

• Typography: cleaner, nicer font throughout application. Bigger. Bolder. Base text should be 18. Never smaller than 15 (some are 14) (set font styling throughout Figma for living document).
• Create more detailed flows to better assess Haveno UI experience.
• Improve wording of descriptions (fewer, simpler words).
• Immediately show if you have sufficient funds when your offer or peer's offer is open.
• Make clearer that software must remain running in order for offer to be online, show a graphic? e.g. people doing trades surrounded by circle dots
• "Optimize wallet" button in settings to pro-actively break down outputs
• Pro-tips: don't transfer all of your money back to your external wallet in order to cover your next security deposit
• If someone does same offer every day, then it should be 2 or 3 clicks to post that offer. The more we automate the better.
• Limited decimal places, don't show monero to the 12th decimal place. don't show 0s after a few
• Info tooltip on Offers and Trades to explain each?
• Include icons for trade assets
• Include icons for payment methods
• Explain that even if you want to buy XMR, you will need XMR in your account, so deposit in order to be able to buy.
  • explain it as an effect of security, to keep trades secured with a security deposit
  • fully on-chain system. because of on-chain security that we wait 20 minutes
  • step 1: get your money into Haveno, step2: get your money back out; emphasize security and privacy; graphic to show safe for Haveno wallet

Onboarding

• Use time during initial loading screen to describe/show what Haveno is (e.g. "Decentralized, peer-to-peer, non-custodial exchange built on Monero and Tor, using 2/3 multisig. Learn more").
• Remove Haveno logo at top during initial onboarding, distracting. (upper left? more standard)
• When selecting local versus remote node, highlight difference in performance and security. Recommend local for best performance and security.
• Improve design of node selection during onboarding?
• Add a new node "Test node" ambiguous text and purpose. Can add the node after testing it or otherwise tweak this flow?
• Optionally set up payment account during initial onboarding?

Wallet / balances

• Need to be able to generate new subaddresses
• Info tooltip that explains reserved funds and locked funds
• Where to show amount reserved in offers? Currently shown within wallet view, but might not be appropriate there.
• Balances should be displayed more prominently; include total, available, locked, and/or reserved?
• Sent txs use negative Monero, confusing for human readability. Sent 1.36 or use color? Refer to how other wallets do it

Market View

• When onboarding is complete, "Haveno is ready to use. You'll need to deposit funds and set up a payment account", then the next thing is not either of those. After initial onboarding, provide notice that "Your wallet is empty. Deposit funds" which takes to wallet QR (e.g. warning strip across top?)
• Get rid of XMR/EUR "pair" pulldown on market view since XMR is only base pair? just show EUR?
• Price EUR cannot be changed. everything at top should be things that can be changed, or subtly grouped perhaps move current price, number of offers, etc, just below? Make it read like a sentence: "Buy", 14 XMR, EUR/BTC/... (shows price per XMR), and shows total price
• Annotate what market depth is showing: total amount obtainable by increasing price.
• By default, filter offers based on your sufficient balance?
• Filter best offers, illustrate why they're the best. Make results as helpful as possible. Ranked somehow. This helps them select an offer.
• Show more bold / color on offer hover, to highlight current selection?
• For offers view, (i) info tooltip next to columns or on hover, show brief description?
• Rather than -1% under "Price for 1 XMR", column with "Percent in your favor"? or better way? use green for good, red for bad, maybe green slanted meter, or other better way?
• Suggest to deposit when they search for amount? or during guide flow?

Make Offer

• Set your amount and price, this whole page might be cleaned up, when creating an offer
• 250 ... way too much space ... EUR, show digit, EUR sign? make it closer
• "set a stop price" cleanup? lots of ways people do that. "set a stop price" redundant text
• Instead of "premium offer", "Fixed" and "Floating" offers with fixed percent +/-? cleanup verbage
• "You can set a price range within you'd like to buy" typo
• Deactivate offer outside range? we know where stop limit is set for below price, but what about above price?
• "After splitting your trade offer will be broadcasted" wording, make it clear that it'll be broadcasted automatically but you have to leave the software running for the offer to be live
• "Deposit funds for trade" (screens 4.5), this page could be cleaned up, maybe make address lighter, underneath bigger QR code, copyable, middle characters not necessarily seen

Take Offer

• This whole design could use improved. a lot of information in all directions. Really want to encourage them to take offer. They're not sure because info overload.
• Clarify language, e.g. "You are buying 15 XMR, you are paying $3641.12", "Buying 15 XMR for $2000.00"
• Offer details needs to be more like balance sheet or receipt totaling up amount being deposited. Revisit old UI concept for some inspiration on breaking down "receipt" of expenses and maybe simplifying form
• Indicate that taking offer is final, cannot be cancelled?

My Trades

• Show status of the trades, e.g. pending/confirming, waiting on payment, send payment, confirm payment, complete, failed
• Way to access subset based on state, e.g. in progress, complete, failed. supported in bisq ui
• Compare to how ebay handles past orders
• Within a trade, make prettier? Get rid of blocks? One solid timeline: offer created through offer taken?
• While waiting for funds to unlock, describe e.g. "Waiting for trade to commit"
• In trader chat window, make it clearer that first few chat messages are system messages?
• In trader chat window, boast about chat security; "This chat is secure between you two." but also emphasize to be aware of scams, only use the method agreed to in the offer because that's what the arbitrator will validate
• Button "Confirm payment" -> "Confirm you made the payment"
• "Have you made the payment?" screen 03.05 redundant. the user already confirmed they made the payment
• Viewing old completed trade, fields could use redesign.
• Role in trade: "Taker of trade / buyer" -- confusing
• How can people search, or sort past trades? do they just scroll? should it be more traditional table? then you click it and it shows up more like markets table?
• Display trades similarly to offers screen 0.5.01? better view imo. or perhaps traditional table view
• "Trade is active, waiting for block confirmations" -> "Trade is locked, waiting for block confirmations"?
• "This will open a support ticket and an arbitrator... make sure to keep device running for 2 days" -> device doesn't need to be running for this

Account

• "Update account password" -> "New password" and "Repeat new password"
• Make it more clear saving mnemonic is not sufficient to backup
• Reveal seed phrase is directly under Wallet tab within settings, which is confusing. move seed phrase reveal to backup?
• Be able to copy seed phrase.

TODO: provide these as sticky comments in Figma, once finalized