LN UX improvements concepts – discussion / validation

[ta-lind]

We’ve worked out concept design drafts to validate. These are based on a small study done on a few more established BTC LN wallets, available articles on LN UX and brief task-based testing w/ 3-4 with beginner-level DCR users. See drafts here: https://www.figma.com/file/EanUbqJmPs8EMqY26j9zwo/decred-piui-master?node-id=556%3A0

The main areas we’ve touched point on are:

1. Providing a better understanding and feedback of how balances and capacities function
2. Simplified understanding and connecting to nodes / creating channels
3. Building consistency w/ patterns to normal on-chain transacting in Decrediton.

Navigation:

• Overview
• Channels
• Send
• Receive
• Advanced/Misc

 

Ideally

Ideally, Overview and Channels views could eventually be combined if the channel management gets mostly automated. However in the current state, without leaving much out, combining the views led to a too crowded view in comparison to rest of Decrediton individual views. 


Overview: has two sections, a statistics component and an activity log.

• The statistics card should provide a quick overview of both the user's wallet/account and the network in general.
• Activity log should list all transactions (including on-chain ones that affect the LN account), changes regarding invoices, all changes regarding channels. Each of the status log row can be distinguished with relevant icons, and only contain key information and a way to follow-up if needed. 


Channels: some of the bigger problems for users is understanding how nodes and channels work, and what they need to do with them if not running on autopilot. Few takeaways on the UI to improve this through manual interactions:

• Communicating and visualizing the mechanics, ie. nodes being on the top level and doing most of the processing.
• Providing better accessibility to discover nodes, as well decide why to choose one. (Search feature and rooting use of custom node names in opposed to only ID's) (Recent / Suggested Nodes?) (Ranking statistics based on capacity, age, availability, location etc? – If this would have security issues, could perhaps be opt-in/out as for Pi for example)
• Simplifing connecting to nodes and creating channels.
• Channels capacity visualization.
• Keeping users in control of what's going on, whether channels management is automated or what degree of manual management is wanted.
• Regarding the search and browsing would need the most dev input, what's possible and feasible to do.

Send and Receive: overall aiming to have as much similarity to onchain transacting as possible. Key takeaways:

• Providing as much feedback as possible, ie. identifing the LN invoice code, input fields detecting if it's invalid (or if it's a DCR onchain address), if the capacity is passed. Some of these feedback items could be worked into the tutorials, and linked back to when triggered.
• The available capacity for Sending / Receiving, as well view specific pro-tips are present in header.

We've also worked out a set of new tutorial components, which can be used through-out Decrediton. The LN starting view will be using those as well once we've got some simple graphics worked out for each point.

Posting this issue mainly to gather more feedback in all areas. Once the drafts provide a good enough state to follow-up, we'll create the missing assets as well refined visual design examples of the UI.

[matheusd]

Looks really nice, and I specially like the wording in the channel creation panel ("commit to channel").

Seems like a solid way forward.

[guilhermemntt]

Hey @linnutee, are those drafts ready to go? I'd like to start implementing them as soon as possible.

[ta-lind]

Hey @guilhermemntt , I recon you could kick off with the fundamental stuff if there's no issues with this noticed. I'd follow up with the missing items and a bit more refined visual design specs & examples – though these drafts are in pretty decent state. Do recommend sticking with the existing rules on components rather than the values in draft though.

[MariaPleshkova]

Hey @guilhermemntt . We've finalized the views and moved all layouts to the main Decrediton - Latest page https://www.figma.com/file/EanUbqJmPs8EMqY26j9zwo/decred-piui-master?node-id=12%3A0
Basically main concept changes were described by @linnutee above, but let me show you some key visual updates:

- All screens - changed field views to updated ones:
before:

after:

Updated the lightning icon:
before:

after:

- Before you continue - added the Tutorials view component with the "educational" cards:
before:

after:

- Create new/use existing wallet - changed "Enable automatic channel creation" area with a checkbox to the separate section with a toggle button, because we already used the same concept for turning on/off automatic features on the updated Decrediton screens;
Moved the tabs "Use existing.../Create new..." out of the section;
Made the blue button right-aligned:
before:

after:

- Overview tab - differs a bit from the one @linnutee described above. We decided to split the statistics component into 2 sections: LN Account Overview and Network Stats (some of new icons were used there, attaching them here
icons_LN_overview.zip
and you also can find them on the Assets – Icons, Symbols page in Figma).

So, now there are 3 sections: 2 ones mentioned before + Recent Activity.

- Channels tab -
See the full description by Tanel above.
Basically we made the page more clear for users using our updated style guide:

Search for Nodes feature can be accessed by clicking on the magnifier icon. It opens a modal with a search field, suggested nodes and the recent nodes:

As soon as a user starts typing in the search field, Suggested Nodes changes to Search results (no. of found nodes):

To select needed node, users have to click on a "plus" icon within a node card.
When the node added or if a user typed a counterparty node manually, the field gets green if the value is valid:

After the channel creation a modal with channel properties appears:

If a user opens an existing channel (clicks on a channel card within Manage Channels section), a separate page with channel properties will be opened:

- Send and Receive tabs - are similar to onchain transactions as Tanel mentioned above:

[bgptr]

Hey @guilhermemntt, do you still plan to work on this? If not, I'd like to pick it up.