Improving the readability of vertical tabs
Closed, ArchivedPublic

Description

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

Details

Type
Design
Gaia Clary (gaiaclary) updated the task description. (Show Details)
Gaia Clary (gaiaclary) raised the priority of this task from to Needs Triage.
Gaia Clary (gaiaclary) set Type to Design.

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 -

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

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.


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.

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.

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


and this one by @Campbell Barton (campbellbarton)

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

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

As the author of the current design, I think the overall form looks good : ) (@Sergei Smyslov (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.

Campbell Barton (campbellbarton) triaged this task as Normal priority.Sep 15 2014, 12:59 AM

@Paweł Łyczkowski (plyczkowski) - 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.

@Campbell Barton (campbellbarton) 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).

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

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

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.

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 @Sergei Smyslov (Luarvik) and @Campbell Barton (campbellbarton)'s designs? I have a preference for those.

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 @Sergei Smyslov (Luarvik) and @Campbell Barton (campbellbarton)'s designs? I have a preference for those.

The @Campbell Barton (campbellbarton) 's one read less like tabs (which cumulates with the tabs being vertical resulting in lower readability). The @Sergei Smyslov (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, @Sergei Smyslov (Luarvik) 's style would be the one to use for the tabs.

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

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.

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.