Page MenuHome

Make Toolbar Tabs more readable

Authored by Jonathan Williamson (carter2422) on Jan 4 2014, 9:00 PM.



This is a proposal to address T38050, improving the visual design of tabs while also increasing the readability.

Benefits to updated design:

  • More visually distinct tabs that fit the "tab" metaphor and make the design consistent within its self. The separator lines added visual noise that detracted from the tab metaphor, causing the titles to "blur" together.
  • Using the Region Text Highlight theme color for the active tab allows for good user control and makes the active tab more obvious. If the user doesn't want the highlight, they can change the theme.
  • More space around the text, so they're less cramped and much more readable, while using the same amount of space.
  • The slight highlights and shadows on the tab titles improve the visual appearance.

Comparison shown here (left is proposed, right is current):

Reviewers: @William Reynish (billrey), @Campbell Barton (campbellbarton)

CC: @Thomas Beck (plasmasolutions), @jens verwiebe (jensverwiebe), @Brecht Van Lommel (brecht), @Campbell Barton (campbellbarton)

Diff Detail

Event Timeline

This is quite a bit more readable.

Played around a bit with values, guess it would help to make active tab text brighter ( same as in outliner) and inactive tabtext perhaps light grey, aka inversed.


I added highlightning to active tab, so could rise the greyness of inactive bg a bit more to emphasize again text readability:


Alternanate i tried out a lite grey inactive text and darker inactive tab bg:


Last attempt for tonight:

Using seperators again instead discrete inactive tabs, whiter inactive text:


I'm liking the latest patch from jens; it feels more subtle while retaining legibility

Tweaks to tabs are fine, However we're discussing making larger changes here: T38050, so I would rather come to some agreement there first before making a lot of smaller changes.

@jens verwiebe (jensverwiebe) - you have lots of patches, are you proposing one to be applied to master?


Don't really like to scale the zoom like this, its error prone since the aspect and the zoom become out of sync and we can't use the aspect in some places we might want to.

The values (tab_v_pad_text, tab_curve_radius) etc should be adjusted instead.

Indeed, it is more readable and convenient in this way.

Just FYI i'am living now with this approach ( collected from several opinions ) and
it seems to work o.k. without fatigue the eye:

Cheers .... Jens

Adding to last post ( could not edit ??? )
You i rised the aspect by 1.2 so the tab text is now same size as group header


@jens verwiebe (jensverwiebe) could you upload the patch for your last version? I'd like to compare it with some local versions.


Thanks! Will play with that.

@Jonathan Williamson (carter2422)

Here's my revised patch for tabs:


Jonathan Williamson (carter2422) updated this revision to Unknown Object (????).Jan 12 2014, 12:09 AM
  • Improved size and text active tab highlighting to make tabs more readable.

The latest version I just uploaded takes inspiration from @jens verwiebe (jensverwiebe) and feedback from @Campbell Barton (campbellbarton).

@Campbell Barton (campbellbarton), I suspect there's a more optimal way than using BLF_position three times, but I couldn't get it working right. Any thoughts? Also, I can probably combine both if (!is_active) into a single statement. Agree?

Here is a screenshot of the latest version.

Jonathan Williamson (carter2422) updated this revision to Unknown Object (????).Jan 12 2014, 12:34 AM
  • Removing redunant if statements.
Jonathan Williamson (carter2422) updated this revision to Unknown Object (????).Jan 12 2014, 12:43 AM
  • Adding Y offset to tab title emboss and adjusting white intensity.

This gives: error: "UI_PANEL_CATEGORY_MARGIN_WIDTH" redefined even without the error changing here will cause overlap, need to change the one in UI_interface.h:180

Jonathan Williamson (carter2422) updated this revision to Unknown Object (????).Jan 12 2014, 5:57 PM
  • Fix for overlap of function that sets tab width
Jonathan Williamson (carter2422) updated this revision to Unknown Object (????).Jan 12 2014, 9:11 PM
  • Make text shadows use the BLF_shadow api

@Jonathan Williamson (carter2422), @jens verwiebe (jensverwiebe): Nice, both your versions are way clearer. The tabs seem to be a little easier to make out on the @jens verwiebe (jensverwiebe) version, and the subdued text on the unselected tabs makes it clear that they are, well, not selected.

I like the latest version. Well done.

Thanks @Thomas Dinges (dingto). Just awaiting @Campbell Barton (campbellbarton)'s approval on the code before committing.

@William Reynish (billrey), regarding the "subdued" text, this can be totally controlled via the theme. I'm not opposed to slightly tweaking the theme colors as well, but that's a separate task.

Jonathan Williamson (carter2422) requested a review of this revision.Jan 13 2014, 2:10 AM

@Jonathan Williamson (carter2422), Looks cool, mate, but I would perhaps still darken the out of focus tabs a little rather than making the bright white in the current tab. Perhaps a value of around #f0f0f0 would be better?

This is already way clearer.
Maybe it's pedantic, but I'd agree with @Andy Davies (metalliandy) that the disabled tabs and tab bar are a little too similar to the active tab. There's almost no difference in colour value, except for the text font. Apart from that it's looking good.

Jonathan Williamson (carter2422) updated this revision to Unknown Object (????).Jan 14 2014, 12:45 AM
  • Make active tab text outline white, consistent with inactive.
  • Fix typo in comment.
  • Remove if statements for inactive/active tabs. This makes both tabs draw with the same style. This decision was based on recent discussions on T38050

Current patch looks like this on factory settings, is this the way its supposed to be?

Jonathan Williamson (carter2422) updated this revision to Unknown Object (????).Jan 14 2014, 2:05 AM
  • Increase tab text size slightly for better readability on non-retina displays.

I kindly suggest to make this toolbar squeezable till only icons on buttons remain. More or less it means that each button must have attribute to show hint bubble. If only icons, then imediate hint describing only name of tool. Description of tool or any other function must be at prompt bar.

@Janis Grinvalds (grinvaldsjanis) icon support has other issues that're beyond this task. Icon support is something that needs to be addressed separately.

Jonathan Williamson (carter2422) updated this revision to Unknown Object (????).Jan 14 2014, 2:35 AM
  • Adjust tab and tab background colors for better contrast.
Jonathan Williamson (carter2422) updated this revision to Unknown Object (????).Jan 14 2014, 3:08 AM
  • Tweak margin scaling to work better on retina displays.

Good work. Only one comment for usability: when I scroll down in a tab, for example in Create tab, all tabs are scrolling down. If I change the tab, I only see a gray panel because all the controls are hidden due to the scrolling. I have to scroll up when the few controls of the panel will fit in the available space.
I think the tabs should scroll in a independent way.