NNS dapp - UI design upgrade and public proposals

Super, very nice job :ok_hand:

1 Like

Also, @peterparker. To add my 2 cents :
The colors of these buttons is problematic imho, but maybe it is just me :

I feel them as problematic, because the difference of color make people assume a difference of “availability”, I mean of “pushability”. For example, it looks like a lot to the “merge neurons” function when it is unavailable :

But once the user clicked on each one of them and see that they are as pushable as the purple one, they fell like there is none obvious reason for the button to be “empty” rather than full of purple. So there is a problem of readability here. Some users, to guess what will be the difference of reaction, even go to the neuron tab to compare the color of this button :
Capture d’écran 2022-11-27 à 11.58.51

And this one :
Capture d’écran 2022-11-27 à 11.59.18

As we are in a blockchain where – even if it is not the case of these buttons – some decisions imply a long commitment (8 years), I think we need unequivocal readability of the NNS buttons.

A good example is here :


People will think “why “disburse” is not purple here, can’t I disburse ? But what if I click and the disbursal is done whereas I was just curious ? etc.” The newcomers could be confused here.

According to me, 2 solutions here :
– choose the same color for all these buttons ;
– OR, if you want to keep a color gradation color, the buttons can gather together a unique continuity of purple : I mean that the left button starts deep purple and becomes clearer like you did, but the right button begins with the same clear purple and becomes clearer again (“square clear”, to say it so).
So, you have :

  1. a first button : Deep purple/Clear purple
  2. a second one : Clear purple/Clearer purple
  3. a third one in some cases : previous Clearer purple/Clearer purple than the previous clearer purple

So, to recap :
Buttons equally pushable should have the same color or at least the same form of color gradation. Another difference will make people ask what is the rationale behind such a difference and won’t be able to understand the equal pushability before pressing the equivocal button and won’t understand, once pressed it, why its color is so different whereas the pushability is equal

Look forward to hearing your feedback about this.
Have a nice weekend.

Kind regards
Roman

2 Likes

Thanks for the feedback Roman. When it comes to the footer, to be honest with you, none of us - developer, designer and ux - are fan of it. Our ultimate goal is actually to get rid of the footer and integrate the actions more gracefuly within the overall user journey. So, no footer, no colors issue :wink:.

Being said, it might be that it is well defined in Figma and that the (my :sweat_smile:) implementation is not yet on point or that even the design itself is not contrasting enough. Long story short, I forward your feedback to the designers.

1 Like

I get it ! Good to know ! Thanks David :pray:

1 Like