bonding + unbonding ux / ui #331

jbibla · 2018-01-05T20:41:19Z

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)

…top bar and now using actual button

jbibla · 2018-01-05T21:47:54Z

before:

after:

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 · 2018-01-05T21:57:32Z

before:

after:

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

mappum

@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 · 2018-01-08T04:59:23Z

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.

faboweb · 2018-01-08T09:35:34Z

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

faboweb · 2018-01-08T10:54:34Z

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:

faboweb · 2018-01-08T10:56:01Z

Apparently there is also a bugs:

…top bar and now using actual button

… bottom bar

… 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 · 2018-01-12T20:51:39Z

@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.

font weight 300 throughout the app - i love the elegance this adds to the UI
primary button styles - this is important for drawing more attention to primary buttons and differentiating between primary and secondary actions.
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.

mappum · 2018-01-13T05:53:50Z

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

jbibla added 9 commits January 5, 2018 12:58

cleaning up bonding ui

f50641e

fixes to page headers

930c626

using actual checkboxes for delegate list, took "bond" button out of …

5805554

…top bar and now using actual button

cleaned up bonding form

dcf8bcd

liDelegate checkboxes will persist, fix for vp bar

e15c9ef

clean up PageBond

e3e3cd6

further improvements to page bond (math still needs attn)

56b542d

update math to calculate unbonding of selected delegates only

ec9ddbf

cleaned up willUnbondAtoms

7bfa1fc

jbibla requested review from mappum and nylira as code owners January 5, 2018 20:41

jbibla changed the title ~~unbonding ux / ui~~ WIP: unbonding ux / ui Jan 5, 2018

jbibla changed the title ~~WIP: unbonding ux / ui~~ WIP: bonding + unbonding ux / ui Jan 5, 2018

jbibla added 3 commits January 5, 2018 15:55

add selected count and link instead of button

e4a40e7

update snapshots

fb51f18

fixed tests

a0d2e5f

fix linting issues, update snapshots

06710b6

jbibla changed the title ~~WIP: bonding + unbonding ux / ui~~ bonding + unbonding ux / ui Jan 5, 2018

mappum suggested changes Jan 6, 2018

View reviewed changes

Merge branch 'develop' into jordan/275-unbonding-ux

1d1c92a

nylira mentioned this pull request Jan 8, 2018

Bonding UI improvements #332

Closed

14 tasks

jbibla added 3 commits January 8, 2018 13:25

bring back blockchain.js

17fdec5

setup pageblock

a915929

cleaning up netmon page

657819e

jbibla and others added 21 commits January 12, 2018 11:55

fixes to page headers

305bdcf

using actual checkboxes for delegate list, took "bond" button out of …

e4d7930

…top bar and now using actual button

cleaned up bonding form

c71f2a7

liDelegate checkboxes will persist, fix for vp bar

8d05e08

clean up PageBond

42a019d

further improvements to page bond (math still needs attn)

4243bf1

update math to calculate unbonding of selected delegates only

06a2ff0

cleaned up willUnbondAtoms

077fdc8

add selected count and link instead of button

5595a06

update snapshots

aeb6798

fixed tests

f64999b

fix linting issues, update snapshots

5f96f5a

cleaning up styles, changed "proceed" ux, font weight to 300 OMG

662ed07

reverted back to icons instead of checkboxes, moved way to proceed to…

224ab44

… bottom bar

cleaned up classes, names of columns, column alignment

152d014

removed initial column sorting

a34b799

randomize delegates list

1422fc0

fixed tests

6e4917e

fix missing key errors

6831e26

fixed tests and removed shuffle because of conflicts with sort-by

49afe9b

jbibla added 3 commits January 12, 2018 17:13

use correct stats

298e30b

add primary button styling for primary buttons :)

81212d3

update snapshots

8acb668

mappum approved these changes Jan 13, 2018

View reviewed changes

mappum merged commit ce031b0 into develop Jan 13, 2018

faboweb deleted the jordan/275-unbonding-ux branch January 22, 2018 09:28

jbibla mentioned this pull request Feb 5, 2018

improve bonding UX #275

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bonding + unbonding ux / ui #331

bonding + unbonding ux / ui #331

jbibla commented Jan 5, 2018 •

edited

Loading

jbibla commented Jan 5, 2018 •

edited

Loading

jbibla commented Jan 5, 2018

mappum left a comment •

edited

Loading

nylira commented Jan 8, 2018

faboweb commented Jan 8, 2018

faboweb commented Jan 8, 2018

faboweb commented Jan 8, 2018

jbibla commented Jan 12, 2018 •

edited

Loading

mappum commented Jan 13, 2018

bonding + unbonding ux / ui #331

bonding + unbonding ux / ui #331

Conversation

jbibla commented Jan 5, 2018 • edited Loading

jbibla commented Jan 5, 2018 • edited Loading

jbibla commented Jan 5, 2018

mappum left a comment • edited Loading

Choose a reason for hiding this comment

nylira commented Jan 8, 2018

faboweb commented Jan 8, 2018

faboweb commented Jan 8, 2018

faboweb commented Jan 8, 2018

jbibla commented Jan 12, 2018 • edited Loading

mappum commented Jan 13, 2018

jbibla commented Jan 5, 2018 •

edited

Loading

jbibla commented Jan 5, 2018 •

edited

Loading

mappum left a comment •

edited

Loading

jbibla commented Jan 12, 2018 •

edited

Loading