[Feedback] Staking section

[gamarin2]

UI Version: 0.6.2

Some feedback on the current UI of the Staking section, as displayed when connected to the mock network.

• When you enter the staking section, and whenever you navigate on its different sub-pages, there should always be an obvious display of the number of Atoms you have (and, possibly, the number of Atoms that are currently bonded). Maybe at the top or the bottom. It should be the first thing that catches the eye. (Note: Maybe this balance should always be visible wherever you are in the wallet).
• Validators should be displayed in horizontal sub-sections. First, at the top, the validators you're currently bonded to (in my mock-network, it's good greg). Then, the validators in the validator set that you can delegate to (but you currently don't have any bond to). And finally, the validator candidates. So there would be 3 horizontal sub-sections: 1. Validators you're currently bonded to, 2. Validators in the val set you can bond to 3. Validator candidates not in the validator set you can bond to
• After clicking on 'Next', you're presented with a page when you can manager your bonds. If Atom balance is displayed in an obvious manner (as per my first comment), then we don't need "Start bonding your X fermion". Also I don't think the "Unbonded Fermion" bar is useful, I'd remove it.
• It seems that I have 5 fermions bonded to "greg" but the cursor is still at 0. That's confusing. The cursor should be sufficiently pushed on the right to show that I already have bonded fermions to "greg" (even if the scale is not perfectly linear). Sliding the cursor to the left would unbond, sliding it to the right would bond more Atom.
• At the top, above the sliders, I would add a graphical visual tip like "unbond <------ | --------> bond" so that it's understandable that slide to the left = unbond and slight to the right = bond.
• I'm a bit confused about the Unbonding slider at the bottom, what is it for?
• We should add a hint when mouseover the Reset button

Edit:

• I understood what the yellow "Unbonding" scale is for. What confused me was the cursor. A simple bar would be more intuitive. In fact this could go along the "Atom balance" I talked about in my first point. I'm joining a picture to illustrate

• The green part would represent the bonded Atoms. Yellow part Atoms in unbonding mode. The bar would be clickable so that you have the details in a popup(how many Atoms bonded, how many Atoms in unbonding, how much days are left before you regain liquidity on the Atoms being unbonded (there can be multiple days)). I would show this everywhere in the staking section, and possibly everywhere in the wallet (once you start staking). This would remove the need for the yellow slider in the "Next" section as well as "Start bonding your X fermions"

[jbibla]

thank you so much for your feedback @gamarin2 !!

i have reviewed your suggestions and largely agree with your points and perspective. we will be discussing your suggestions on tuesday and i would expect to see many of your points implemented very shortly.

[okwme]

leaving this here for relevance to staking improvements: #877 (comment)

Thus I would say:

Please confirm you understand that after delegating to a validator, undelegating takes 3 weeks.
Note however that you may redelegate to other validators instantaneously. See XXX for a more
detailed explanation

I'd include a link to further descriptions

[nylira]

When you enter the staking section, and whenever you navigate on its different sub-pages, there should always be an obvious display of the number of Atoms you have (and, possibly, the number of Atoms that are currently bonded). Maybe at the top or the bottom. It should be the first thing that catches the eye. (Note: Maybe this balance should always be visible wherever you are in the wallet).

This is a great idea--an app-wide atom balance. Due to its outsize importance, we could have a prominent bar that sits in the bottom of the page, stretching from one side to the other, like an XP bar in MMOs.

Validators should be displayed in horizontal sub-sections. First, at the top, the validators you're currently bonded to (in my mock-network, it's good greg). Then, the validators in the validator set that you can delegate to (but you currently don't have any bond to). And finally, the validator candidates. So there would be 3 horizontal sub-sections: 1. Validators you're currently bonded to, 2. Validators in the val set you can bond to 3. Validator candidates not in the validator set you can bond to

This is a good idea, but it should be an optional view. The one table view is still useful because it is easy to sort the entire table by a variety of different attributes (like uptime, slashes, stake %, etc).

After clicking on 'Next', you're presented with a page when you can manager your bonds. If Atom balance is displayed in an obvious manner (as per my first comment), then we don't need "Start bonding your X fermion". Also I don't think the "Unbonded Fermion" bar is useful, I'd remove it.

The "Unbonded Fermion" bar lets the user visualize how much of their balance is available for delegating. It is useful, but it can be replaced by the app-wide atom balance suggestion.

It seems that I have 5 fermions bonded to "greg" but the cursor is still at 0. That's confusing. The cursor should be sufficiently pushed on the right to show that I already have bonded fermions to "greg" (even if the scale is not perfectly linear). Sliding the cursor to the left would unbond, sliding it to the right would bond more Atom.

Good point, we'll have to think of a fix for this.

I understood what the yellow "Unbonding" scale is for. What confused me was the cursor. A simple bar would be more intuitive. In fact this could go along the "Atom balance" I talked about in my first point. I'm joining a picture to illustrate

If there's an interactive slider on the bar, that's a visual bug. This bar can be removed for the app-wide atom balance component.

[gamarin2]

This is a great idea--an app-wide atom balance. Due to its outsize importance, we could have a prominent bar that sits in the bottom of the page, stretching from one side to the other, like an XP bar in MMOs.

To me it sounds more intuitive to have it at the top, but maybe I'm wrong! As long as there is an easy way to see how many Atoms I have and how much are bonded/unbonding/unbonded I'm happy

This is a good idea, but it should be an optional view. The one table view is still useful because it is easy to sort the entire table by a variety of different attributes (like uptime, slashes, stake %, etc).

You could still sort the sub-tables. I don't think it's that important to be able to sort the entire table. It seems natural for the validators I'm already delegating to always be at the top. I also want to see which validators I can delegate to in priority. If I sort by uptime and delegate to the the top 5 and 3 or them are only candidates and not actual validators, that's confusing. The 3 categories I outlines are clearly different and it would be natural to reflect that in the UI imo.

[okwme]

• My 2¢

  • I find the checkboxes very easy to miss. Maybe moving them to the left would create the awareness that they need to be checked before moving to the next screen is possible? Or maybe my screen is just too wide 🙃

• 

  • I could imagine the bonded tokens being blue ❄️ like they are frozen and the unbonded tokens being a warm color 🔥 like they are hot and ready to be bonded. It's not a perfect match to the metaphors used in hot and cold wallets but i think the speed/accessibility attributes match well.

  • Q: what is the empty space to the right on the bar? All the tokens you don't own?

Actionables

Make Issues for:

• design/create app-wide atom bar
• remove unbonded bar in place of site-wide bar
• design/create key for sliders
• replace checkbox text w @rigelrozanski's copy here

Discuss More then make Issues:

• move checkboxes to left
• increase sensitivity of bonding bar for first segment of tokens
  • or could be fixed as described in issue Delegated Bonding Slider Grey Circle #924
• coloring of the app-wide atom bar
• top or bottom of screen for app-wide atom bar
• split up validator list into three horizontals
  • I tend to agree w @gamarin2 on this, seems like sorting between these categories would be more useful than sorting between them as a whole. However we could also introduce filtering + sorting to be able to show one of the three groups and then sort within them.

[gamarin2]

I find the checkboxes very easy to miss. Maybe moving them to the left would create the awareness that they need to be checked before moving to the next screen is possible? Or maybe my screen is just too wide 🙃

++

I could imagine the bonded tokens being blue ❄️ like they are frozen and the unbonded tokens being a warm color 🔥

++

Q: what is the empty space to the right on the bar? All the tokens you don't own?

Liquid Atoms. This would mean:

Blue = Bonded
Yellow = Unbonding
White/Empty = Unbonded/Liquid

[okwme]

Blue = Bonded
Yellow = Unbonding
White/Empty = Unbonded/Liquid

So White/Empty are really the most standard form of tokens, you can do whatever you want with them.
Yellow are semi-frozen basically.
Blue are locked

🚦With that in mind maybe Red, Yellow, Green would be the most recognizable signals? 🚦

[jbibla]

some UI for your perusal:

https://sketch.cloud/s/xKnxA/all/voyager-staking-mockups/staking-my-stake-ui
https://sketch.cloud/s/xKnxA/all/voyager-staking-mockups/staking-validators-ui

[gamarin2]

Looking AWESOME @jolesbi. I left some feedback.

[NodeGuy]

What is needed to get this moved from Needs review to Done?

[jbibla]

i think we can close this issue in favour of #1053 #1054 and #892