Improve visual distinction between Editors #38038

New Issue

William Reynish · 2014-01-02T22:56:47+01:00

William Reynish commented

2014-01-02 22:56:47 +01:00

The Issue:
It's hard to see which windows each header belongs to. There's not enough visual separation between editors.

As you can see below, it's very hard to see which editor the the headers belong to:

Goal:
Improve visual separation between editors, without making the borders larger

Proposed Solution:
Add small rounded corners to each editor to make the distinction clearer

Editor differentiation before:

Editor differentiation after:

**The Issue:** It's hard to see which windows each header belongs to. There's not enough visual separation between editors. As you can see below, it's very hard to see which editor the the headers belong to: ![Screen_Shot_2014-01-02_at_22.53.58.png](https://archive.blender.org/developer/F60681/Screen_Shot_2014-01-02_at_22.53.58.png) **Goal:** Improve visual separation between editors, without making the borders larger **Proposed Solution:** Add small rounded corners to each editor to make the distinction clearer Editor differentiation before: ![Screen_Shot_2014-01-02_at_19.48.27.png](https://archive.blender.org/developer/F60650/Screen_Shot_2014-01-02_at_19.48.27.png) Editor differentiation after: ![Screen_Shot_2014-01-02_at_19.48.38.png](https://archive.blender.org/developer/F60651/Screen_Shot_2014-01-02_at_19.48.38.png)

William Reynish commented

2014-01-02 22:56:47 +01:00

Changed status to: 'Open'

William Reynish commented

2014-01-02 22:56:47 +01:00

Added subscriber: @billrey

DataDay commented

2014-01-03 00:47:19 +01:00

Added subscriber: @DataDay

DataDay commented

2014-01-03 00:47:19 +01:00

Part of what makes it harder to differentiate the windows has to do with the placement of the menu strips themselves. Some windows they are on top, some on the bottom. By habit, the user would normally look on top, but for some being on the bottom requires them to remember rather than just go off of instinctual/muscle memory.

Looking at it as a whole, the menu placement in that screen grab looks to be all over the place.

One way to solve this is making sure all menu strips are on top.

It feels more consistent, normal, easier to know that the window belongs to whatever menu strip is right above it. However the problem could then be that its a bit weird having the info menu above the 3d viewport menu strip.

Thus, what if the menu strips had the same ability as the T and N panel, which is to be partially transparent or have their own color scheme.

That gives us something like this. (all I did was lower opacity, so text was effected rather than just background, alternative is to have it become fully opaque with mouse over).

Now the info menu strip clearly feels different from them 3d viewport strip.

Another variation is to have it be transparent altogether, which looks something like this (rough mock ups, not polished to look as good as it could):

Something to consider in further creating separation between windows.

Part of what makes it harder to differentiate the windows has to do with the placement of the menu strips themselves. Some windows they are on top, some on the bottom. By habit, the user would normally look on top, but for some being on the bottom requires them to remember rather than just go off of instinctual/muscle memory. Looking at it as a whole, the menu placement in that screen grab looks to be all over the place. One way to solve this is making sure all menu strips are on top. ![Menu_top.jpg](https://archive.blender.org/developer/F60770/Menu_top.jpg) It feels more consistent, normal, easier to know that the window belongs to whatever menu strip is right above it. However the problem could then be that its a bit weird having the info menu above the 3d viewport menu strip. Thus, what if the menu strips had the same ability as the T and N panel, which is to be partially transparent or have their own color scheme. That gives us something like this. (all I did was lower opacity, so text was effected rather than just background, alternative is to have it become fully opaque with mouse over). ![transparent_top.jpg](https://archive.blender.org/developer/F60772/transparent_top.jpg) Now the info menu strip clearly feels different from them 3d viewport strip. Another variation is to have it be transparent altogether, which looks something like this (rough mock ups, not polished to look as good as it could): ![menu_floating.jpg](https://archive.blender.org/developer/F60775/menu_floating.jpg) Something to consider in further creating separation between windows.

Bartosz Moniewski commented

2014-01-03 18:57:14 +01:00

Added subscriber: @BartekMoniewski

Bartosz Moniewski commented

2014-01-03 19:02:45 +01:00

Rounded windows corners and headers on top by default can solve this. I'm not fan of transparent headers. They need to be clear and simple, having 3d objects under them will create visual mess. Situation with overlapping texts can occur with Object Names displayed in 3d.

DataDay commented

2014-01-03 19:10:21 +01:00

@BartekMoniewski,

Having a slight transparency in the same way as the T and N panels can be considered "clear and simple", though I think more importantly they need to be smart and visually informative above all else. The point was not to say they need to be transparent though, you might have missed that. The point was to show how having menu strips/headers create more distinction when they are in the same place at the TOP of every window. Different variations of the header show how contrast is made between the the larger all encompassing Info header and the rest of the windows below it. Speaking headers, its only a header if its on top. By default thats not the case..

@BartekMoniewski, Having a slight transparency in the same way as the T and N panels can be considered "clear and simple", though I think more importantly they need to be smart and visually informative above all else. The point was not to say they need to be transparent though, you might have missed that. The point was to show how having menu strips/headers create more distinction when they are in the same place at the TOP of every window. Different variations of the header show how contrast is made between the the larger all encompassing Info header and the rest of the windows below it. Speaking headers, its only a header if its on top. By default thats not the case..

Bartosz Moniewski commented

2014-01-04 00:49:35 +01:00

Logically headers should be on top but in blender this interface item is called that way even if it is on top or bottom. Mostly they are on bottom.
I and many users prefer to have them on top in every editor. Headers are essentially menu-bars and in almost every application these are on top of window or windows if program have multiple of them.

Logically headers should be on top but in blender this interface item is called that way even if it is on top or bottom. Mostly they are on bottom. I and many users prefer to have them on top in every editor. Headers are essentially menu-bars and in almost every application these are on top of window or windows if program have multiple of them.

Brecht Van Lommel commented

2014-01-04 04:07:26 +01:00

Added subscribers: @JonathanWilliamson, @brecht

Campbell Barton commented

2014-01-04 05:18:42 +01:00

Added subscriber: @ideasman42

Campbell Barton commented

2014-01-04 05:18:42 +01:00

@DataDay -1 for adding header transparency, increases visual noise around the header. realize this is subjective - I just don't think its really an improvement and IMHO there are better ways to tell spaces apart (including the original proposal).

@BartekMoniewski I think header top/bottom is out of the scope of the proposal (off topic).

@DataDay -1 for adding header transparency, increases visual noise around the header. realize this is subjective - I just don't think its really an improvement and IMHO there are better ways to tell spaces apart (including the original proposal). @BartekMoniewski I think header top/bottom is out of the scope of the proposal (off topic).

Scott Petrovic commented

2014-01-04 08:10:26 +01:00

Added subscriber: @scottyp

Scott Petrovic commented

2014-01-04 08:10:26 +01:00

+1 Rounded corners are a good idea to separate the spaces.

Another simple thing that would help distinguish headers is to increase the contrast with the header colors. Currently, having everything the same color is making the different spaces fuse together. All of the Adobe applications implement it pretty effectively (as does Modo).

+1 Rounded corners are a good idea to separate the spaces. Another simple thing that would help distinguish headers is to increase the contrast with the header colors. Currently, having everything the same color is making the different spaces fuse together. All of the Adobe applications implement it pretty effectively (as does Modo). ![header-color.jpg](https://archive.blender.org/developer/F61541/header-color.jpg)

Jonathan Williamson commented

2014-01-04 17:58:36 +01:00

I do think the rounded corners would work well to better distinguish between editors. I also agree with @ideasman42 that transparency is not really an improvement. It can be an aesthetic improvement to some users preferences, but should not be relied upon to improve basic readability of the editors. The same goes for colors. Yes more contrast between the main areas and their headers would help distinguish them, but this still relies on the theme and is not a universal improvement.

Ideally I think we should opt for improvements that are more universal, regardless of the users theme. The rounded corners would be one of these more universal things. Even if we don't go with the rounded corners, these are the type of solutions that can add real value.

I do think the rounded corners would work well to better distinguish between editors. I also agree with @ideasman42 that transparency is not really an improvement. It can be an aesthetic improvement to some users preferences, but should not be relied upon to improve basic readability of the editors. The same goes for colors. Yes more contrast between the main areas and their headers would help distinguish them, but this still relies on the theme and is not a universal improvement. Ideally I think we should opt for improvements that are more universal, regardless of the users theme. The rounded corners would be one of these more universal things. Even if we don't go with the rounded corners, these are the type of solutions that can add real value.

William Reynish commented

2014-01-04 18:31:03 +01:00

@scottyp: While I see some value in increasing the header contrast, it doesn't really solve the main issue, which is what editor does the header belong to?

Even though it's clearer in your mockup that the properties header is a header, it's not clear if it belongs to the Properties or the Outliner above. The line is subtly darker between the areas and sub-areas, but it's so subtle that it's hard to see at a glance.

@scottyp: While I see some value in increasing the header contrast, it doesn't really solve the main issue, which is *what editor does the header belong to?* Even though it's clearer in your mockup that the properties header is a header, it's not clear if it belongs to the Properties or the Outliner above. The line is subtly darker between the areas and sub-areas, but it's so subtle that it's hard to see at a glance.

Scott Petrovic commented

2014-01-04 20:44:53 +01:00

@billrey good point. The contrast shows that it is a header, but doesn't really associate which editor it belongs to.

I am starting another discussion on the info space. I think that is the hurdle to overcome before we can move all of the headers to the top https://developer.blender.org/T38069

@billrey good point. The contrast shows that it is a header, but doesn't really associate which editor it belongs to. I am starting another discussion on the info space. I think that is the hurdle to overcome before we can move all of the headers to the top https://developer.blender.org/T38069

Paweł Łyczkowski commented

2014-01-23 22:49:54 +01:00

Added subscriber: @PawelLyczkowski-1

Paweł Łyczkowski commented

2014-01-23 22:49:54 +01:00

The rounded corners would do the job, as they did before:

But I think this would be a regression aesthetically. At least I haven't seen a mockup of rounded corners yet that managed to retain the modern look of the GUI, and there were quite a few posted on BA.

I would rather go in the direction of removing embossing on the edge of the header that touches the window's content, while retaining or strengthening the one on the window's border. Or in a similar direction No mockup though, sorry.

Also, removing the ability to switch the header would cause an uproar from the community I think, and with a good cause - it's more logical to have the header always in the same place, but for different windows the header just feels better being on top or on the bottom, and I think it can differ from person to person.

The rounded corners would do the job, as they did before: ![blender-yafaray.png](https://archive.blender.org/developer/F74531/blender-yafaray.png) But I think this would be a regression aesthetically. At least I haven't seen a mockup of rounded corners yet that managed to retain the modern look of the GUI, and there were quite a few posted on BA. I would rather go in the direction of removing embossing on the edge of the header that touches the window's content, while retaining or strengthening the one on the window's border. Or in a similar direction No mockup though, sorry. Also, removing the ability to switch the header would cause an uproar from the community I think, and with a good cause - it's more logical to have the header always in the same place, but for different windows the header just feels better being on top or on the bottom, and I think it can differ from person to person.

Campbell Barton commented

2016-03-10 06:41:07 +01:00

Changed status from 'Open' to: 'Archived'

Campbell Barton closed this issue

2016-03-10 06:41:07 +01:00

Campbell Barton self-assigned this 2016-03-10 06:41:07 +01:00

Campbell Barton commented

2016-03-10 06:41:07 +01:00

No resolution or activity in over 3 months,
archiving, listed in the wiki .
Can re-open when we have time to handle this one.

No resolution or activity in over 3 months, archiving, listed in [the wiki ](http://wiki.blender.org/index.php?title=Dev:Source/Development/Todo/UserInterface#Archived_Design_Tasks). Can re-open when we have time to handle this one.

Julian Eisel commented

2019-11-26 15:18:24 +01:00

Added subscriber: @JulianEisel

Julian Eisel commented

2019-11-26 15:18:24 +01:00

Going through old UI ToDo tasks - this seems fixed with the 2.8 changes. Marking the ToDo item as done.

Sign in to join this conversation.

No Label

Download

What's New

Blender Studio

Manual

Developers Blog

Documentation

Benchmark

Blender Conference

Development Fund

One-time Donations

Improve visual distinction between Editors #38038