ui: Dialog panel coloring

[peterzen]

This proposes a set of UI changes to add depth to the UI elements by using panels instead of borders, and improve contrast.

[jzbz]

Nice, the additional contrast between elements is a welcome addition.

[norwnd]

@peterzen asked me to take a look,

• overall, I like the extra detail this design provides (I'd give it a shot - it's probably the only way to really find out whether it's better/nicer or not), plus it seems to resolve the concern I've raised in ui: tab highlighting counter-intuitive (or barely noticeable) #2075
• I'll list some things that need to be improved imo below (each in a separate comment)

[norwnd]

We can probably bring boxes little bit closer together to save more space inside (perhaps each view needs experimenting with, to get the best values for it):

[norwnd]

Coloring needs to be a bit more consistent/monotonic, currently there are certain forms that are "too bright" (or maybe too dark) compared to other forms present on the screen:

[norwnd]

Probably a separate issue from this PR, but it brings up the suboptimal scale of "settings" menu (and perhaps others) compared to the whole screen size:

This menu ^ should be larger (wider, at the very least), and probably should have some padding/margin for the box (so that box borders don't sit too close to text/contents inside).

[norwnd]

Something about forms like this one doesn't look right to me:

It's almost as if the box is not needed for such forms, or maybe it's shape needs changing to something much bigger - so it doesn't draw user attention to itself. It's more of a nit though.

Contrast it with this one (which looks almost OK to me, box could be a bit larger/wider still, or rather more proportional to screen dimensions - would probably make it perfect):

[peterzen]

Coloring needs to be a bit more consistent/monotonic, currently there are certain forms that are "too bright" (or maybe too dark) compared to other forms present on the screen:

The idea here is to use an different color to accentuate the panel requiring the user's attention.

[peterzen]

Something about forms like this one doesn't look right to me:

It's almost as if the box is not needed for such forms, or maybe it's shape needs changing to something much bigger - so it doesn't draw user attention to itself. It's more of a nit though.

The purpose of dialog boxes is to draw attention when the user's input is required - it's a standard design pattern for requesting input.

[peterzen]

This menu ^ should be larger (wider, at the very least), and probably should have some padding/margin for the box (so that box borders don't sit too close to text/contents inside).

Agreed - this is out of scope for this PR though; #2483 contains the redesign of the settings panel as a UI dev subtask.

[norwnd]

The purpose of dialog boxes is to draw attention when the user's input is required - it's a standard design pattern for requesting input.

I don't disagree with that. Note, however, there are different ways to draw attention - some are better than others (meaning, could be more subtle). Anyway, all of those observations I've listed are mostly just minor details (perhaps even subjective).

[buck54321]

A lot of this is a big NO from me. The only reason we should be adding the background color is if it provides a obvious benefit and a needed visual indication of separation of sections, and even then, it should be used sparingly.

Starting with the initialization dialog sequence...

There's nothing to differentiate there. There is only one major element showing at a time.

For the wallets page...

If you apply it to all elements, than you might as well apply it to none. It also just doesn't look good or conform to modern standards. Maybe try just the asset selection column on the left.

Similar for the markets view...

Applying to all elements might as well not apply to any. Maybe try just the market selection column on the left.

For the settings view...

Here again, there's only one column. There are really no elements that need differentiation, and it doesn't look good.

Even for the modal dialogs, I'm not sure anymore. I'm leaning against this whole effort, TBH. Maybe if you scale it back about 90% and apply these colors extremely sparingly and only where there is an obvious benefit, there could be something here.

If you go back far enough in our repo history, you'll see that we used to have a similar scheme with a class called, I think, .card. We got rid of it because it simply did not look good, and did not match modern styling standards. I don't plan to bring that back, but if we can apply it in a very targeted manner where there is an obvious benefit, I might be convinced.

[buck54321]

The purpose of dialog boxes is to draw attention when the user's input is required - it's a standard design pattern for requesting input.

The dialog boxes are modal, have a semi-transparent background color that covers the rest of the page, and have an animation associated with their display. There are enough indicators that the user needs to pay attention to that dialog already.

[buck54321]

In #2578, you applied some box-shadow effects to the dialogs that I thought might work. What happened to that?

[peterzen]

The purpose of dialog boxes is to draw attention when the user's input is required - it's a standard design pattern for requesting input.

The dialog boxes are modal, have a semi-transparent background color that covers the rest of the page, and have an animation associated with their display. There are enough indicators that the user needs to pay attention to that dialog already.

Maybe it's my screen but that transparency is not visible at all, don't see it in the CSS either. The semi transparent layer under the dialogs would go a long way in communicating that I'm still in the same context and differentiate the dialog. A slightly different dialog background would still help differentiating the modal from the rest of the page. TBH the fly-in animation is more disorienting than helpful. A short fade-in or such would work better.

[peterzen]

The only reason we should be adding the background color is if it provides a obvious benefit and a needed visual indication of separation of sections, and even then, it should be used sparingly.

The background also separates the top menu from the main area in the page. It's a UI pattern that's used pretty much everywhere (not saying we should copy other interfaces).

[peterzen]

In #2578, you applied some box-shadow effects to the dialogs that I thought might work. What happened to that?

It's there just not very visible against the dark background - look at the light scheme.

[buck54321]

Maybe it's my screen but that transparency is not visible at all, don't see it in the CSS either.

Oh. I guess it's not semi-transparent. The point is that the user can't not notice the new focus.

The semi transparent layer under the dialogs would go a long way in communicating that I'm still in the same context and differentiate the dialog.

If you think the the #forms background would be better with some opacity < 1, try it out. Let's see what it like.

TBH the fly-in animation is more disorienting than helpful. A short fade-in or such would work better.

I don't completely disagree. I've often found the form change animations to be a little blunt. On the other hand, that has nothing to do with the intentions of this PR, and they're not that bad.

[peterzen]

There's nothing to differentiate there. There is only one major element showing at a time.

I agree actually, there's no context here to begin with.

For the wallets page...

If you apply it to all elements, than you might as well apply it to none. It also just doesn't look good or conform to modern standards. Maybe try just the asset selection column on the left.

Similar for the markets view...

Applying to all elements might as well not apply to any. Maybe try just the market selection column on the left.

Against the darker background it does help visually separate the elements.

For the settings view...

Here again, there's only one column. There are really no elements that need differentiation, and it doesn't look good.

Even for the modal dialogs, I'm not sure anymore. I'm leaning against this whole effort, TBH. Maybe if you scale it back about 90% and apply these colors extremely sparingly and only where there is an obvious benefit, there could be something here.

Maybe these aren't the right colors (I'm quite positive the dialog background isn't, actually) but if we experiment a little and eventually find the right hues this could go a long way in making the UI less flat, easier to navigate visually and maybe a bit more familiar to users of other trading GUIs.

[buck54321]

The background also separates the top menu from the main area in the page. It's a UI pattern that's used pretty much everywhere

Maybe. But if that's the case, we should apply the background color to the banner rather than all of the page elements, and I don't think that would be an improvement. Be subtle.

[peterzen]

Oh. I guess it's not semi-transparent. The point is that the user can't not notice the new focus.

Well, let's say you click Send on the Wallet page. Suddenly the screen goes blank and a bunch of elements fly in from the left - once they're in place you realize it's the form you're after. After a few times we get used to it and stop noticing, but most new users experience a WTF moment simply because this behavior is unusual, almost resembling a UI misbehaving. :)

If you think the the #forms background would be better with some opacity < 1, try it out. Let's see what it like.

It makes a difference.

I don't completely disagree. I've often found the form change animations to be a little blunt. On the other hand, that has nothing to do with the intentions of this PR, and they're not that bad.

The purpose of the animation is the same as those of the colors - help communicate visual hierarchy - in UI design they're usually developed together but it's indeed out of scope here.

[buck54321]

The background also separates the top menu from the main area in the page. It's a UI pattern that's used pretty much everywhere (not saying we should copy other interfaces).

I'm all about copying! At least in a general sense of styling standards. Here are the two highest volume exchanges.

Coinbase uses no background colors to separate elements, just faint lines, like we have.

Binance has a different background color for the header. Main page elements are all the same.

[buck54321]

In #2578, you applied some box-shadow effects to the dialogs that I thought might work. What happened to that?

It's there just not very visible against the dark background - look at the light scheme.

I think the key to dark scheme is to layer it with a highly-blurred light glow. Something like https://jsfiddle.net/jfu8hrve/1/.

[peterzen]

Coinbase uses no background colors to separate elements, just faint lines, like we have.

Binance has a different background color for the header. Main page elements are all the same.

How do their dialogs look like?

[buck54321]

Something about forms like this one doesn't look right to me:

It's almost as if the box is not needed for such forms, or maybe it's shape needs changing to something much bigger - so it doesn't draw user attention to itself. It's more of a nit though.

Contrast it with this one (which looks almost OK to me, box could be a bit larger/wider still, or rather more proportional to screen dimensions - would probably make it perfect):

I think a large part of what makes these unaesthetic is the inconsistent or simply nonsensical margins. For the "Create Account" form, the margins are just too big. For the bond asset selection form, the margins/padding were being set by an animation, and were asymmetric at the end. Also, dark mode looks better with a light border. I tried to resolve such issues in #2601.

[buck54321]

I really appreciate this effort, @peterzen. I will almost certainly merge #2601 before reconsideration of background colors. I will close this PR in favor of smaller, more-focused proposals.

Some potential followup.

1. Tab coloring and or general tab design
2. Font size and/or color changes on (especially the the tables in) the wallets view.
3. Maybe changes to main layout backgrounds on markets and wallets views. Any future proposals need to be very limited. We are not going to change large proportions of the background color. Highly targeted changes may be considered.

There are surely an infinite amount of other design changes that would improve the user experience, but either keep such PRs very limited in scope, or discuss your intentions in Element chat and get a go-ahead before moving forward.