[cms] ui/ux improvements: navigation

[ta-lind]

@MariaPleshkova and myself have been working on getting the cms UI into Figma and addressing ui/ux matters around general usability, as well cleaning up and creating a bit more consistency in the layouts and components. Navigation being a bigger change, i'll leaving some comments on pro's / con's:

Current navigation has a few cons on using a single dropdown:

• on desktop it's not critical/needed, header has enough space to work with
• blocks some of the UI when opened (ie. action button)
• not too informative, lack of grouping
• inconsistent use of tabs, filtering vs navigating
• <800px width behaves odd, dropdown within hamburger
• not as much an issue for proposals.decred due to less nav items, though same logic could be applied there

Suggested approach:

• navigation is grouped to 2 larger groups: "manage" and "account"
• top level groups are always present in header for easy access
• tabs are used for navigating only, filtering is timeframes and statuses is done via filtering components
• recommend moving "My Proposals" from "account" to "manage" group as it seems like a more logical fit, though either works
• this approach stays retains similarity to the current ui in regards to positioning, so should make readjusting easy enough

Worth to discuss if there’s any better ideas for naming “Manage” as an umbrella item. I took reference from CMS product name, to position it logically to cover this group of actions, to what’s done on each subpage (Ie. "Manage -> My Invoices; "Manage -> DCCs" etc). Alternative option "Invoicing".

Figma: https://www.figma.com/file/RuzhkKo9fUjKQLqGbUPjHl/decred-piui-cms?node-id=276%3A346

[xaur]

Wow these tabs do exactly what I needed in #2281!

From talks with many contractors it became clear that important CMS features have terrible discoverability. People were not aware that they can (and should!) review billing against their proposals and not aware that they can (and should!) review domain invoices.

CMS needs more processes implemented for those to become required and inevitable, e.g. if your invoice is not reviewed by proposal owner you don't get paid -> it naturally stimulates all participants to act on time to get paid. But even with current feature set I think we can get much better engagement by simply exposing what already works.

I'd like to emphasize that getting all contractors engaged in reviews is key to: blocking malicious billing, correcting legit but malformed billing, and soon (tm) to getting a treasury spend transaction published on time for stakeholder approval.

Even if the mockup above is implemented as is, it will be huge leap in navigational awareness.

[xaur]

@linnutee I like the overall logical structure (and to have some structure at all before implementing things ;) ), but I have two issues with "Manage":

1. Semantically it doesn't immediately click in my mind because it is too abstract. I would call it Billing.

In the future, DCCs may affect aspects other than billing and become less fitting under Billing. But at the moment, the main practical purpose of DCCs is to grant (easier) access to billing and to review others' billing, so I would use this term until it stops working for us.

2. Vertical space waste. Please pardon me for I'm not a designer and don't understand some design trends. In the mockup above, the (top row + page title row + tabs row + tab title and filters row) collectively take 420px away from content. This is 1/3 or even 1/2 of the vertical space available on some devices that are old but still work pretty good.

How about removing the whole "Manage" row and moving the Create New Invoice button inside My Invoices tab (where it better fits logically, too)?

[ta-lind]

Thanks for the feedback. All good notices!

On discoverability point – nav changes along side with getting the cards elements to communicate more summarized bits and references should help quite a bit with the visibility. Odd activities and values show earlier rather than having to dig into things. Another area to think on this is the notifications. If we get practical notifications about activity in ones domain (ie. around prop context or some summarized values), it should make it more engaging to participate.

For example as one practice we've picked up with the design domain prop has been using notion.so to track the proposal participants billing summaries. It's quite easy with it to create equations that summarize billing per subdomain, so as a prop owner I could see without having to calculate how much has been billed, how much budget is remaining, as well after the prop have an easier time to generate a summary. So for example similar equation summaries based on the done billing could be shown as part of each props header.

1. Naming: Billing sounds alright. The main case for Manage was being kind of umbrella enough to match all 3 -> invoices, proposals & dcc's. And there some match with the subpages names, ie. Manage my invoices, Manage Domain Invoices etc. It would be a nice touch to have the category names sort of formulate the action, but not really necessary. Best to go with whatever is the clearest option for most users.

2. Listed down but will pass on this one right now, as I see going more compact would create quite some issues than. It's 220px actually from top of the page until the cards.

   • The nav change needs to be functional and consistent globally on Pi and CMS, so it does affect quite a few instances
   • Some pages will get wonky without the top level headers
   • The second header area adds some useful spacing as well. Having too many items clustered on one side can get visually overloading. Ie. harder to focus on the item groups. I think it makes sense to look at when there's more pages structure needed. Otherwise the area can potentially be used to cover some notification details without getting too busy.