Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bonding + unbonding ux / ui #331

Merged
merged 99 commits into from
Jan 13, 2018
Merged

bonding + unbonding ux / ui #331

merged 99 commits into from
Jan 13, 2018

Conversation

jbibla
Copy link
Collaborator

@jbibla jbibla commented Jan 5, 2018 •
edited
Loading

hey ya'll! i tried to improve the look and feel of the whole bonding / unbonding experience. i'm not entirely satisfied yet, but i think this is an improvement. bonding / unbonding can be very complex — we haven't accounted for all the use cases yet...

delegates page

  • checkbox in own column
  • obvious button to next step
  • no column sorted by default
  • candidate list order should be randomized
  • clean up column alignment

bonding page

  • add total, bonded, and unbonded atoms
  • show previously bonded (when possible)

@jbibla jbibla changed the title unbonding ux / ui WIP: unbonding ux / ui Jan 5, 2018
@jbibla jbibla changed the title WIP: unbonding ux / ui WIP: bonding + unbonding ux / ui Jan 5, 2018
@jbibla
Copy link
Collaborator Author

jbibla commented Jan 5, 2018 •
edited
Loading

before:
screen shot 2018-01-05 at 4 41 10 pm

after:
screen shot 2018-01-05 at 4 44 32 pm

main points

  • real checkboxes instead of switching icons (have to fix v-model + vuex bug)
  • checkbox in its own column (column widths could still use some work)
  • obvious link to next step (consider using pluralize delegate(s))
  • not sure why voting power is sorted by default
  • we need to implement randomization logic for candidate list

@jbibla
Copy link
Collaborator Author

jbibla commented Jan 5, 2018

before:
screen shot 2018-01-05 at 4 42 31 pm

after:
screen shot 2018-01-05 at 4 45 09 pm

main points

  • user's Atom information at top to help inform decision making
  • fixed width form for improved readability
  • including committed bonds for context and clarity
  • cleaned up messaging and adjusted language
  • using moniker, removed address / ID
  • add link to candidate profile
  • add alert after submit including a summary of transaction and warning about unbonding again
  • would like to discuss using component other than inputs for allocation

@jbibla jbibla changed the title WIP: bonding + unbonding ux / ui bonding + unbonding ux / ui Jan 5, 2018
mappum
mappum suggested changes Jan 6, 2018
View reviewed changes
Copy link
Contributor

@mappum mappum left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jolesbi Nice PR, all positive changes. Only have a few minor styling issues to fix (on small screens only):

  • Not enough spacing above "you've selected X delegates"
  • Labels overlapping inputs on Bond Atoms page:

@nylira
Copy link
Contributor

nylira commented Jan 8, 2018

Good work. I think the "Split Allocation Equally" and "Reset Allocation" buttons can be removed. Most likely our users will not want to split their allocations equally -- they'll favor specific validators or they may want to reserve some atoms. And reset buttons on forms are bad for usability - most likely the user will press it by accident.

@nylira nylira mentioned this pull request Jan 8, 2018
Closed
14 tasks
@faboweb
Copy link
Collaborator

faboweb commented Jan 8, 2018

I like the structuring of your current atoms instead of the text. Could there maybe be sth. similar for the last 3 lines?

@faboweb
Copy link
Collaborator

faboweb commented Jan 8, 2018

Are you sure about native check-boxes? I am not a fan as it usually looks bad cross-platform.

It looks like this on windows:
image

@faboweb
Copy link
Collaborator

faboweb commented Jan 8, 2018

Apparently there is also a bugs:
image

jbibla and others added 21 commits January 12, 2018 11:55
@jbibla
fixes to page headers
305bdcf
@jbibla
using actual checkboxes for delegate list, took "bond" button out of …
e4d7930 
…top bar and now using actual button
@jbibla
cleaned up bonding form
c71f2a7
@jbibla
liDelegate checkboxes will persist, fix for vp bar
8d05e08
@jbibla
clean up PageBond
42a019d
@jbibla
further improvements to page bond (math still needs attn)
4243bf1
@jbibla
update math to calculate unbonding of selected delegates only
06a2ff0
@jbibla
cleaned up willUnbondAtoms
077fdc8
@jbibla
add selected count and link instead of button
5595a06
@jbibla
update snapshots
aeb6798
@jbibla
fixed tests
f64999b
@jbibla
fix linting issues, update snapshots
5f96f5a
@jbibla
cleaning up styles, changed "proceed" ux, font weight to 300 OMG
662ed07
@jbibla
reverted back to icons instead of checkboxes, moved way to proceed to…
224ab44 
… bottom bar
@jbibla
cleaned up classes, names of columns, column alignment
152d014
@jbibla
removed initial column sorting
a34b799
@jbibla
randomize delegates list
1422fc0
@jbibla
fixed tests
6e4917e
@nylira @jbibla
fix missing key errors
6831e26
@jbibla
fixed tests and removed shuffle because of conflicts with sort-by
49afe9b
@jbibla
Merge branch 'jordan/275-unbonding-ux' of github.com:cosmos/cosmos-ui…
0c89221 
… into jordan/275-unbonding-ux

* 'jordan/275-unbonding-ux' of github.com:cosmos/cosmos-ui:
  fix missing key errors
  fixed tests
  randomize delegates list
  removed initial column sorting
  cleaned up classes, names of columns, column alignment
  reverted back to icons instead of checkboxes, moved way to proceed to bottom bar
  cleaning up styles, changed "proceed" ux, font weight to 300 OMG
  fix linting issues, update snapshots
  fixed tests
  update snapshots
  add selected count and link instead of button
  cleaned up willUnbondAtoms
  update math to calculate unbonding of selected delegates only
  further improvements to page bond (math still needs attn)
  clean up PageBond
  liDelegate checkboxes will persist, fix for vp bar
  cleaned up bonding form
  using actual checkboxes for delegate list, took "bond" button out of top bar and now using actual button
  fixes to page headers
  cleaning up bonding ui

# Conflicts:
#	app/src/renderer/components/staking/PageBond.vue
#	app/src/renderer/components/staking/PageDelegates.vue
#	app/src/renderer/styles/app.styl
#	test/unit/specs/PageDelegates.spec.js
#	test/unit/specs/__snapshots__/PageBond.spec.js.snap
#	test/unit/specs/__snapshots__/PageDelegates.spec.js.snap
@jbibla
Copy link
Collaborator Author

jbibla commented Jan 12, 2018 •
edited
Loading

@nylira that's strange. i can successfully bond. i also want to point out that there are two important styling and ux changes in here.

  1. font weight 300 throughout the app - i love the elegance this adds to the UI
  2. primary button styles - this is important for drawing more attention to primary buttons and differentiating between primary and secondary actions.
  3. moved the "next" button to a bottom bar. when i did a quick ux test with judd it was clear to me that this was better. i'm going to start doing some usability ux tests with folks around the office here.

screen shot 2018-01-12 at 5 21 57 pm

@mappum
Copy link
Contributor

mappum commented Jan 13, 2018

I went through the delegation/unbonding flow and everything worked well, I have a few comments but they can be addressed as separate issues.

@mappum mappum merged commit ce031b0 into develop Jan 13, 2018
@faboweb faboweb deleted the jordan/275-unbonding-ux branch January 22, 2018 09:28
@jbibla jbibla mentioned this pull request Feb 5, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mappum mappum mappum approved these changes

@nylira nylira Awaiting requested review from nylira

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@jbibla @nylira @faboweb @mappum