Improving the readability of vertical tabs #41697

New Issue

Gaia Clary · 2014-09-03T14:42:51+02:00

Gaia Clary commented

2014-09-03 14:42:51 +02:00

I have difficulties to read the vertical tabs text. Here is an example:

I want to propose this alternative for the default settings:

Tab Active: 7683A0
Tab Inactive: 727272

I have chosen to colorize the active tab in a very light blue to better spot it on the screen. Also it appears to me that "active" elements are normaly colorized with a Blue background. If the blue background is disliked, then i propose to use instead:

tab Active: 9A9A9A

I have difficulties to read the vertical tabs text. Here is an example: ![Image14.png](https://archive.blender.org/developer/F108387/Image14.png) I want to propose this alternative for the default settings: ![Image16.png](https://archive.blender.org/developer/F108389/Image16.png) Tab Active: 7683A0 Tab Inactive: 727272 I have chosen to colorize the active tab in a very light blue to better spot it on the screen. Also it appears to me that "active" elements are normaly colorized with a Blue background. If the blue background is disliked, then i propose to use instead: tab Active: 9A9A9A

Gaia Clary commented

2014-09-03 14:42:51 +02:00

Changed status to: 'Open'

Gaia Clary commented

2014-09-03 14:42:51 +02:00

Added subscriber: @GaiaClary

Campbell Barton commented

2014-09-04 06:58:55 +02:00

Added subscriber: @ideasman42

Campbell Barton commented

2014-09-04 06:58:55 +02:00

Not especially liking to make one tab colored as proposed.

Note that this was an issue when adding tabs and seems to depend a lot on each users monitor brightness.

There are a few things we could do to tweak current tabs.

current text has 25% alpha white glow, (3x blur). This could be expanded and increased to make text stand out.
the inactive tabs could just be a bit lighter (with lower contrast, but enough to differentiate still).

Rather not but for completeness...

Text could be larger
Tab shape could make active tab more obvious and all tabs be almost same color, example - firefox-32's tabs -

Not especially liking to make one tab colored as proposed. Note that this was an issue when adding tabs and seems to depend a lot on each users monitor brightness. There are a few things we could do to tweak current tabs. - current text has 25% alpha white glow, (3x blur). This could be expanded and increased to make text stand out. - the inactive tabs could just be a bit lighter (with lower contrast, but enough to differentiate still). Rather not but for completeness... - Text could be larger - Tab shape could make active tab more obvious and all tabs be almost same color, example - firefox-32's tabs - ![tabs_firefox.png](https://archive.blender.org/developer/F108634/tabs_firefox.png)

Campbell Barton commented

2014-09-04 07:11:09 +02:00

Based on previous points, heres an example

https://developer.blender.org/P134

(Also set the theme color for tab background to be RGB=[0.386, 0.386, 0.386])

Based on previous points, heres an example ![tabs_tweak.png](https://archive.blender.org/developer/F108639/tabs_tweak.png) https://developer.blender.org/P134 (Also set the theme color for tab background to be `RGB=[0.386, 0.386, 0.386]`)

Sergei Smyslov commented

2014-09-12 13:47:40 +02:00

Added subscriber: @Luarvik

Sergei Smyslov commented

2014-09-12 13:47:40 +02:00

In #41697#8, @ideasman42 wrote:
Based on previous points, heres an example

https://developer.blender.org/P134

(Also set the theme color for tab background to be RGB=[0.386, 0.386, 0.386])

Very minimalistic divider. Looks cool, but visually merge all inactive tabs to one line of text. Harder to read and locate required tab.

Considering the usage of colour for active tab - I also support this idea.

> In #41697#8, @ideasman42 wrote: > Based on previous points, heres an example > > ![tabs_tweak.png](https://archive.blender.org/developer/F108639/tabs_tweak.png) > > https://developer.blender.org/P134 > > (Also set the theme color for tab background to be `RGB=[0.386, 0.386, 0.386]`) Very minimalistic divider. Looks cool, but visually merge all inactive tabs to one line of text. Harder to read and locate required tab. Considering the usage of colour for active tab - I also support this idea. ![tabs_colour.png](https://archive.blender.org/developer/F110000/tabs_colour.png)

Sergei Smyslov commented

2014-09-12 15:46:04 +02:00

Campbell, I slightly modified your version. It still looks minimalistic but little easier to read, I hope. This is just quick draft so can be improved further.

![tabs_tweak_2.png](https://archive.blender.org/developer/F110016/tabs_tweak_2.png) Campbell, I slightly modified your version. It still looks minimalistic but little easier to read, I hope. This is just quick draft so can be improved further.

Vlad Mafteiu Scai commented

2014-09-13 13:35:26 +02:00

Added subscriber: @00Ghz

Vlad Mafteiu Scai commented

2014-09-13 13:35:26 +02:00

I like the dark blue colored version. You can't miss the active tab in that case. But the bright yellow one is way to distracting.

michael knubben commented

2014-09-13 14:05:37 +02:00

Added subscriber: @michaelknubben

michael knubben commented

2014-09-13 14:05:37 +02:00

I'm in favour of the colour-less versions, like this one made by @Luarvik

and this one by @ideasman42

The coloured highlight should be used more sparingly, in my opinion.

I'm in favour of the colour-less versions, like this one made by @Luarvik ![tabs_tweak_2.png](https://archive.blender.org/developer/F110016/tabs_tweak_2.png) and this one by @ideasman42 ![tabs_tweak.png](https://archive.blender.org/developer/F108639/tabs_tweak.png) The coloured highlight should be used more sparingly, in my opinion.

Vlad Mafteiu Scai commented

2014-09-13 14:11:20 +02:00

I would go for spaceless tab design if you choose no color, it's easier to find the tabs for me.

Paweł Łyczkowski commented

2014-09-14 23:28:12 +02:00

Added subscriber: @PawelLyczkowski-1

Paweł Łyczkowski commented

2014-09-14 23:28:12 +02:00

As the author of the current design, I think the overall form looks good : ) (@Luarvik 's one is also nice, but less consistent with the current GUI style)
But the implementation differs from my design:

The implemented ones have obviously darker inactive tabs, as well as slight embossing (the embossing reduces the readability as well, making the text appear a bit blurry).

Also the gaps are slightly too large, but it's a minor thing.

As the author of the current design, I think the overall form looks good : ) (@Luarvik 's one is also nice, but less consistent with the current GUI style) But the implementation differs from my design: ![esdfd.png](https://archive.blender.org/developer/F110408/esdfd.png) The implemented ones have obviously darker inactive tabs, as well as slight embossing (the embossing reduces the readability as well, making the text appear a bit blurry). Also the gaps are slightly too large, but it's a minor thing.

Campbell Barton commented

2014-09-15 01:07:22 +02:00

@PawelLyczkowski-1 - can you please be a bit more explicit here since it does get a bit confusing talking about 3 designs - original/current-code/proposed

If you show an image that looks different, Im not sure which changes are incidental, and which are important (since I may not get pixel perfect match using OpenGL).

Please list significant changes in dot-point, and give some rationale for each. Then others can comment on each change, and if its agreed on, I can make up a patch.

@PawelLyczkowski-1 - can you please be a bit more explicit here since it does get a bit confusing talking about 3 designs - **original/current-code/proposed** If you show an image that looks different, Im not sure which changes are incidental, and which are important (since I may not get pixel perfect match using OpenGL). Please list significant changes in dot-point, and give some rationale for each. Then others can comment on each change, and if its agreed on, I can make up a patch.

Paweł Łyczkowski commented

2014-09-15 02:33:32 +02:00

@ideasman42 Ok, ignore my previous post - here you have a color scheme that has higher readability, and won't require big recoding I suppose:

I changed the colors of the default theme to make the tabs more readable, and still match the style of the theme. You can sample the image to get the colors I used.

Two problems here:

The slight white downward glow of the text (embossing) seem hardcoded. Can we remove it, or make it themable?
The color of the tab text is set with the same setting as the color of labels inside the header (Mesh, Curve, Lamp in the example). Can these be separated?

Not much rationale here - white text will be much more readable on both gray and dark gray, especially without the white emboss that is still in the screenshot. And it looks more consistent with the rest of theme (where "tabs" in the Properties editor are dark gray for instance).

@ideasman42 Ok, ignore my previous post - here you have a color scheme that has higher readability, and won't require big recoding I suppose: ![tabs.png](https://archive.blender.org/developer/F110432/tabs.png) I changed the colors of the default theme to make the tabs more readable, and still match the style of the theme. You can sample the image to get the colors I used. Two problems here: - The slight white downward glow of the text (embossing) seem hardcoded. Can we remove it, or make it themable? - The color of the tab text is set with the same setting as the color of labels inside the header (Mesh, Curve, Lamp in the example). Can these be separated? Not much rationale here - white text will be much more readable on both gray and dark gray, especially without the white emboss that is still in the screenshot. And it looks more consistent with the rest of theme (where "tabs" in the Properties editor are dark gray for instance).

Sergei Smyslov commented

2014-09-15 04:23:16 +02:00

I think it would be very helpful if text colours for active and inactive tabs could be adjusted independently in theme settings. Currently they both use "Region Text" colour.

P.S. Sorry didn't notice that Plyczkowski already had mentioned this...

I think it would be very helpful if text colours for active and inactive tabs could be adjusted independently in theme settings. Currently they both use "Region Text" colour. P.S. Sorry didn't notice that Plyczkowski already had mentioned this...

michael knubben commented

2014-09-15 10:53:08 +02:00

The last proposed design is really visually noisy though. I don't feel this is an improvement over the currently implemented design at all.

Paweł Łyczkowski commented

2014-09-15 14:03:05 +02:00

In #41697#23, @michaelknubben wrote:
The last proposed design is really visually noisy though. I don't feel this is an improvement over the currently implemented design at all.

I don't see how it's noisy, except the embossing. It's an improvement in readability, which should take precedence.

> In #41697#23, @michaelknubben wrote: > The last proposed design is really visually noisy though. I don't feel this is an improvement over the currently implemented design at all. I don't see how it's noisy, except the embossing. It's an improvement in readability, which should take precedence.

michael knubben commented

2014-09-15 14:07:28 +02:00

Noise is perhaps the wrong word, and I see no reason to drag this out over a matter of preference, but I feel the white on dark grey is too contrasting.

If you're still up for discussing it though, what do you dislike about @Luarvik and @ideasman42's designs? I have a preference for those.

Noise is perhaps the wrong word, and I see no reason to drag this out over a matter of preference, but I feel the white on dark grey is too contrasting. If you're still up for discussing it though, what do you dislike about @Luarvik and @ideasman42's designs? I have a preference for those.

Paweł Łyczkowski commented

2014-09-15 14:18:04 +02:00

In #41697#25, @michaelknubben wrote:
I feel the white on dark grey is too contrasting.

We already have white on dark gray all over this theme.

If you're still up for discussing it though, what do you dislike about @Luarvik and @ideasman42's designs? I have a preference for those.

The @ideasman42 's one read less like tabs (which cumulates with the tabs being vertical resulting in lower readability). The @Luarvik 's one looks nice, but doesn't follow the style of the rest of the GUI. I already did some designs that used square elements, like the editor type dropdowns here - https://dl.dropboxusercontent.com/u/6959287/Art/Blender%20UI%20Mockups/mockup02_03.png
If we were to refresh the GUI style in this direction, @Luarvik 's style would be the one to use for the tabs.

> In #41697#25, @michaelknubben wrote: > I feel the white on dark grey is too contrasting. We already have white on dark gray all over this theme. > If you're still up for discussing it though, what do you dislike about @Luarvik and @ideasman42's designs? I have a preference for those. The @ideasman42 's one read less like tabs (which cumulates with the tabs being vertical resulting in lower readability). The @Luarvik 's one looks nice, but doesn't follow the style of the rest of the GUI. I already did some designs that used square elements, like the editor type dropdowns here - https://dl.dropboxusercontent.com/u/6959287/Art/Blender%20UI%20Mockups/mockup02_03.png If we were to refresh the GUI style in this direction, @Luarvik 's style would be the one to use for the tabs.

michael knubben commented

2014-09-15 15:27:06 +02:00

Ah yes, agreed. That would be outside of the scope of this task.

Sergei Smyslov commented

2014-09-15 15:38:54 +02:00

I don't mind at all the rounded style for tabs. The rectangular shape on my proposal was just a try to keep it as minimalistic as possible. What I mind though is a divider between inactive tabs to look like "l" letter.

Jannis Adamek commented

2014-10-04 09:45:57 +02:00

Added subscriber: @JannisAdamek

Jannis Adamek commented

2014-10-04 09:45:57 +02:00

Hi,
I am new to the development page and very interested in the tap topic. Yesterday I read all the UI-topics and now I am very exicted about all the work.

Plyczkowski made a very good job designing the tabs but the picture on the left looks sill way better (how to add pictures :P). It saves space and has more contrast. When having muliple editors on the screen I sometimes have to scroll through the taps when I'm working on a laptop for example. The look is just smoother as well.

Hi, I am new to the development page and very interested in the tap topic. Yesterday I read all the UI-topics and now I am very exicted about all the work. Plyczkowski made a very good job designing the tabs but the picture on the left looks sill way better (how to add pictures :P). It saves space and has more contrast. When having muliple editors on the screen I sometimes have to scroll through the taps when I'm working on a laptop for example. The look is just smoother as well.

Jonathan Williamson commented

2016-03-15 18:32:32 +01:00

Added subscriber: @JonathanWilliamson