Page MenuHome

Tabs Visual Design
Closed, ResolvedPublic


Current Tab Design

The current design makes use of outlines and 3D highlighting effects to give the tabs more depth. However, this has the disadvantage of making theming more difficult (as the highlight is difficult to control well, both in the code and theme). It can also make the design feel more dated to same.


The effect is subtle with the default theme, but in darker themes the highlight is very strong. For example, in my personal theme the highlight looks like this:

If you enable transparency on the tabs (D285) then the highlight becomes particularly strong (and thus far I have been unable to improve it much on the code side):

Proposed Tab Design

I propose we remove the tab 3D highlight to give it simpler and more modern appearance.


  • Simpler, more modern aesthetic
  • Fewer potential problems with custom themes
  • Fits nicely with proposed widget style updates: T38037



Event Timeline

I'd rather keep the highlight as-is for the default theme, on retina display or zoomed in this looks OK,
but with the default theme and no retina support the highlights help define the tabs against the backdrop.

  • blender can account for darker themes and tone down the highlight.
  • the issue with alpha tabs is an issue with the patch and can be resolved.
  • having totally transparent tabs I think isn't a good target - having any text match the backdrop makes them unreadable.

further, if there is some conflict with dark themes, it can be handled without removing highlights everywhere - its not too much trouble.

I'd rather resolve any issues with non alpha tabs first, and deal with T38037 later if its approved and make the changes to tabs as part of a larger change to the UI.

The highlight seems to be a solid color at the moment. Would it be possible if it was white with low opacity? That way it would look good in any scenario.

@Campbell Barton (campbellbarton), that sounds like a reasonable plan. I think the main issue that applies regardless of the theme, is how the highlight becomes stronger with transparency. The more transparent the brighter the highlight.

@Paweł Łyczkowski (plyczkowski), you can adjust the highlight color and intensity via the Region Text Highlight color.

@Paweł Łyczkowski (plyczkowski) - its a solid color but blending with existing colors, so should be possible to ensure its not contrasting too much.

@Jonathan Williamson (carter2422) - if you can give a theme and an image of how you would like the tabs to look (without alpha) - I'll try adjust the code to accommodate.

Brecht Van Lommel (brecht) lowered the priority of this task from Needs Triage by Developer to Normal.Feb 6 2014, 3:49 PM

how about being able to move add ons to different tabs, I have quick tools and layer management on all tabs and think if i could change which tabs they were on would tidy the veiw up a bit...

@Glen Sumner (Cookingglen) - we're aware there are many options for changing how tabs work. but this is off topic.

Here are the current tabs:

I will post few ideas in the next posts.

BTW, how do you upload few images at once in this new bug tracker?

@Chris Slazinski (mallow) drag one image at a time into the post editor.

Thanks Jonathan. Just drag&drop to upload images? Cool. Easier than before :-)

So, here are few mockups how we could handle new tabs. The problem with the current ones is that they don't look very well. Modern design is rather flat, but most of the time minimalistic. And now we have 3d highlights, bevels and rounded tabs all the way. Also, currently it is not very clear which tab is open.

Here are my ideas:

tabs-1_new-1 - no rounded tabs at all, slightly changed colors for better visibility, all caps

tabs-1_new-2 - same as above, but I even dropped the bevel effect on the text

tabs-1_new-3 - minimalistic approach - not selected tabs are just plain text

tabs-1_new-4 - even more minimalism - just plain text; what I like here is readabilty, but I'm not sure with the "all caps" option here

tabs-1_new-5 - simple tabs (no roundness) and uppercase first

tabs-1_new-6 - if you really want rounded tabs, I'd go only with the top and bottom ones; compare with other places, where buttons are rounded in Blender - not every corner is rounded where there are grouped buttons (like the Transform buttons next to the tabs, for example)

tabs-1_new-7 - by favourite solution - simple, looks good (and modern), is readable, easy to adjust with different themes; similar to tabs-1_new-4, but instead of all caps I've used "uppercase first", like in the current version, for better readability

BTW, all this "Tabs" idea is really good. Less scrolling, finally! :) Now all we have to do is to give it better looks, because the current tabs look like from Blender 2.49

Hi, i forgot i made some mockup with new look of tabs. Little more contrast, i think it shoud be more readable and consistent with rest of UI.

My top 4:

@Sebastian Pasich (Seba): What's in the History tab?

One thought - what do you all think about moving this:

into the separate tab?

I would put this "last tool options" to the separate tab. Maybe set it as first one or last one. Maybe Seba thought of the same by his History tab? What we have right now is somewhat problematic. There are very important options after each use of some tool and you have to scroll it. If we use tabs here, why not to make this panel one of those tabs?

Note that tabs wont change their design for 2.70 release, so any changes here are likely months off.

But with the current version you can't see clearly which one is active.
Isn't a small change worth it? Like these maybe:

Or even the color adjustment of the inactive tabs?

Sure, any theme colors can be tweaked for readability at any time.

Here I've changed "Tab Background" to #404040 and "Tab Inactive" to #535353:

Compare with the current version:
I think it's much more readable already.

@Campbell Barton (campbellbarton) yep I'm good with that. Can we ensure the Region Background alpha is set to 1 at the same time? I have not been able to get back to that patch.

committed rB16987f1c3919b509ac0913471afdb68d3b9136e8

Existing theme colors wont change, but new factory settings - or loading from old user-prefs will.

leaving alpha alone for now - it doesn't impact default setup and IIRC we didnt have the change in place to avoid redrawing regions when alpha is set to 1.0 (not essential but nice to have if the default changes)

I think it would be better if tabs were on the right side of toolbar instead of the left. If you want to choose some tool you should firstly set the proper tab then the tool. Now you have to move mouse cursor over the hole width of toolbar, select the tab, and back again to toolbar. I think there is too long path to get the wanted tool.

@daniel (midan) - this ticket is about the visual design, your comment is off topic.

@daniel (midan)
I agree to some extent. But having tabs on the left side has its own good advantage. Because they are at the edge of screen most of the time, there is no need to precisely move mouse cursor in horizontal axis (which is especially important with vertical tabs). You just quickly throw it all way to the left and it will naturally stop at tab. And such behavior works well with recently added feature of mouse scroll and ctrl+ mouse scroll on tabs. Also I think that the left to the right direction in tab hierarchy is easier to follow for most people.

P.S. Sorry for off-topic, Campbell.

I have to say that I strongly disagree with the proposed tab design.
It has only disadvantages, hard to read, consumes unnecessary space, leaves unpleasant/unnatural/unused space below tabs etc.

Why couldn't we have icons instead just like we have them on properties panel?
I can see only advantages:
a) UNIFORM interface
b) NO space taken
c) Easy to recognize icons
etc, etc

I'm sorry to say that, but after playing for a while with 2.7 test version I see the side tab design as a step backward on many levels.
a) Doesn't keep with current UI
b) consumes unnecessarily space
c) hard to read
d) does not improve workflow
e) looks really old fashioned and to me it belongs more to MAX 3d family and other dinosaurs, but not for Blender.

Guys, whoever thought that side tabs are working (anywhere not just here in Blender) is wrong.
Workflow didn't improved a bit. Example:
In my work I very often need ruler, as well as other tools. Till now all I need to do is to position my mouse cursor on that panel and scroll with mouse wheel. Easy. Now, with this upcoming version this is no longer the case. I need to actually click first on the tab. Hundreds of clicks extra per day, thousands per week etc etc, in other words, very nice workflow had been broken!

Guys, I didn't have much time to spend on testing that version, as I'm a very, very (really) busy with my own business, but genuinely this is first version of Blender which I think is worse then the predecessor.

Am afraid though that this is natural way of things in this world. Everything gets dumbified, to make it appeal to wider (and by virtue of probability) dumber audience. Nobody (seems like) nowadays wants to make any effort and put their personal time to learn something more difficult, and more effective. Nope, instead of this everyone wants to learn everything very quickly, without any effort put into it. And become another mediocrity. And use another mediocre tool. And believe that they are actually great because they "learned" some mediocre 3d package and produce mediocre work.

Don't get me wrong. I love Blender and I don't want to insult anyone. It is just the more I observe the world the more I see that mediocrity is the new excellence.
Everyone has a degree (doesn't matter that this degree had been virtually given, no real/useful work was involved in achieving it).
Everyone is an artist.
Everyone is great.

Am afraid real world doesn't work that way, yet this nowadays, as I said just couple of seconds ago, seems to be the trend and tendency.
It is really saddening to see.

@Sebastian Pasich (Seba) "Hi, i forgot i made some mockup with new look of tabs. Little more contrast, i think it shoud be more readable and consistent with rest of UI."

How so? Where else in Blender do we have side tabs? How this can be called consistent when all it is doing is actually being inconsistent?

@smallB smallC (smallb): There were too much scrolling in the Tool Box. Tabs are good way to organize this. I don't understand the problem you have. You can keep the tab you use most open for the most of the time. For example, you can use keyboard shortcuts to edit mesh and keep the tab with the ruler open. Just give it a try. I think this is really good change.

I can agree with only one of your statements. The tabs don't look too good yet. Sega's mockup is an example how it could be improved. I think that what he meant was is that his project depicts tabs more consistent in the graphical way, the looks.

We can go step further and use more icons in the tabs, so we could get rid of vertical scrolling almost completely.

Exactly, my mockup shows how tabs could see consistent in every place in Blender - in a graphical way. Cause now tabs looks way diferent from anything in Blender. Besides, that's how mockups works, it's only a proposal, not an official way of Blender UI.

@smallB smallC (smallb) this is the wrong place to post issues on tabs since the proposal is only about how the tabs look,

The initial proposal was here: T37601

@Campbell Barton (campbellbarton)
Fair enough, thanks for that info.
Anyway, side tabs has only problems, and look bad/unattractive/old fashioned:
a) take unnecessary horizontal space
b) leaves unused horizontal/vertical space
c) hard to read
d) potentially each tab is of different size (length)

Buttons on the other hands (as seen in properties bar) are perfect for this task:
a) do not take any extra horizontal space
b) easy to recognize
c) it is proven for years and tens of thousands of users to work very well. Why not use it and instead choose such unattractive alternative? It simply mind boggling.

@Sebastian Pasich (Seba)
It doesn't matter. Side tabs are nowhere to be found in blender and they do not create uniform UI. If one panel (properties) have buttons to switch between categories, and other has side tabs, no matter how well will they look, nor how similar to other tabs, it will never create consistent interface.

@smallB smallC (smallb): At first, I disagree that having tabs AND buttons makes UI inconsistent. For selecting things, sometimes one way is just better than another. You could also said that we have to change "Add Modifier" combo-box to buttons, because having both types is not consistent. But…

I'm not saying you're wrong, but your words are not enough. Please preapare some mockups that would prove you're right. I'm sure you will find few problems at start. For example, if you will use icons instead of text, those icons have to clearly depict their function. How will you depict Tools, Relations or Physics? If you will for example use wrench icon for Tools and √ icon that is currently used for Physics that would be misleading. User could assume that Physics and Tools tabs in the toolbox are exactly the same as Modifier and Physics tabs in the Properties panel.

Maybe you will figure how to deal with it and make UI that is far better than the current one. Who knows. We would all benefit from it. But for now, tabs are the best sollution. Even though it's not perfect.
UI/UX design is not an easy task. Using icons, for example. You have to balance it right way. If icon-text relation is 1% to 99%, you end up with lots of text and you can't easily find what you're looking for. If there's 99% to 1% relation you have a bunch of icons that take less place, but it is getting really hard to remember what each icon means.

Please, provide some mockups. All good ideas are welcome.

This discussion is happening in the wrong place and too late, 2.70 will include vertical tabs in the toolbar, we're aware not everyone agrees this is best but the decision was made quite a while back (see T37601) and we're preparing to release.

@Campbell Barton (campbellbarton): I get it, 2.70 will look like current testing builds. Couldn't we use this topic to talk about future changes? If not, please give me link to the task that better fits this discussion.

@smallB smallC (smallb) and others: Also, what is misleading is rather the current Properties' buttons, not Toolbox' tabs. We are all accustomed to these buttons, but in fact they give false information. They look like buttons, but work like tabs. Seba's mockup fixes this. Both Properties and Toolbox panels have tabs there. One panel has vertical tabs with text, one has horizontal tabs with icons, but in both cases - tabs.

In my opinion, GUI in Seba's mockup doesn't look perfect. It is somewhat heavy. I find current Blender's style more appealing (excluding tabs' look). But in the terms of UX, this mockup is really good. Tabs are consistent enough there, if you ask me.

@Chris Slazinski (mallow)
About Seba's mockup - this is perfect example of inconsistency (but hold on).
a) I definitely like the way he did "real tabs" instead of buttons on properties panel - couldn't agree more, bravo!
b) side tabs with text on tools panel ARE inconsistent with regards to UI/UX design/heuristics:

  • you have two objects of this same kind - here panels
  • you have two different ways of moving around them:
    1. one, properties panel, there are horizontal tabs with icons
    2. two, tools panel, there are vertical tabs with text

It IS inconsistent. Not because you have side tabs with text and horizontal tabs with icons, but because you have them on the same kind of widget, and they have exactly the same purpose, yet they use two very different method/approaches - horizontal icons vs vertical text. That's why this design IS inconsistent. Not only that:

Side tabs have only problems, and look bad/unattractive/old fashioned:
a) take unnecessary horizontal space
b) leave unused horizontal/vertical space
c) hard to read
d) potentially each tab is of different size (length)

I personally love what Seba did with properties panel, and I wish that tools panel would take the same CONSISTENT approach.

As for my mockups, unfortunately, I simply have totally zero time to do them as I'm in the process of starting my own business, and that consumes me and my time. I even missed that thread, as I was used to new releases of Blender to be improvements on the predecessor and I felt like I don't have anything to worry about. Until now unfortunately.

P.S. I'm having a lunch while I'm writing this ;)

@Chris Slazinski (mallow)
Icons, that you've asked for:
Tools: - traditionally, hammer and wrench
Relations: - circle and square connected with a line
Physics: - already in Blender - bouncing ball

Couldn't be simpler really. And more uniform that is ;)

I've said already:
"If you will for example use wrench icon for Tools and √ icon that is currently used for Physics that would be misleading. User could assume that Physics and Tools tabs in the toolbox are exactly the same as Modifier and Physics tabs in the Properties panel."

@Chris Slazinski (mallow)

  1. Not wrench - hammer and wrench
  2. Physics? Hundreds possibilities - atom surrounded by electrons is just one of the top of my head.

The point is that it is not only very easy to come up with meaningful, nice to eye and clear icons, but they have virtually every advantage over text (if you not sure at first what this icon does, just hover mouse and tooltip will tell you, couple of times and you learn all that and you will recognize them, without the need for reading vertical text). Jeez, are you seriously telling me that you finding easier to read from bottom to top than to recognize icon? Just think about it, because this is one of the steps notoriously used in the process of designing UI/UX. What is more natural, easier, more comfortable to the user?

  1. Horizontal tabs with icons have virtually every advantage (in Blender's case) over side tabs with text. And this is indisputable. That's why it works so well in Blender. Because it has been tested by hundreds of thousands of users for years and it simply works! As simple as that.

Just like I thought.
After all is said and done, the real and only valid reason (unfortunately) is ego of the person who actually will be working on it, not heuristics, not rationale, not unbeatable arguments. No, ego is the only valid reason.

And after you prove them that they wrong they simply stop replying.

Mediocrity is the new excellence.

Sad but true.

@smallB smallC (smallb), icons and such have been discussed extensively through this full design process. There are mixed feelings on them from every side, but the general consensus (as it seems to me) is that we will work to support them in the near future. Both for text + icons and icons only. They simply didn't make it into the first version. We can only do so much. And although it may seem like it, no single solution is ideal for everyone. You may find icons perfect for your tasks (as your comments seem to suggest) but others have difficulty recognizing icons. Icons also provide problems that we must overcome for addons that define new tabs.

It's not as simple as just using icons.

Please see my original design doc for some of the future scope and thoughts to address consistency, readability, etc:

@smallB smallC (smallb): Wait a minute. As it comes to me, I've stoped responding, because I've been busy for the last few days. You run your own company and didn't have time to make mockups. I run my own company and didn't have time to answer you. Same case, but you're busy and I am egocentric? :) Come on.

Also, I am not the person who actually will be working on it. I don't know who is. Probably, someone from the design team will. Consider that they may be also busy. Just that. They have their own jobs and give their free time to improve blender. New release is coming soon and probablby most people here are busy with this.

And one more thing - I've said earlier that even if I don't take your side with this, I'm not against you. But… IMPORTANT! your teoretical statements need to be followed by graphical mockups. I've said already about few issues you may have with your ideas, but I really encourage you to solve them.

Now just take a deep breath and try to sell your ideas.

@Jonathan Williamson (carter2422) Good reading, good example. It shows that you're aware of the problems. I'd like to help more with the UI. Are there any Fireworks or Illustrator files with current Blender's layout? Such resources would be very helpful for designers. There wouldn't be a need to start from scratch when working on UI improvements.

@Jonathan Williamson (carter2422)
Hi, thanks for the link, will read that tomorrow.
@Chris Slazinski (mallow)
Hi, my comments weren't directed at you but at people who work on blender "person who actually will be working on it", and I didn't expect that you are actually working on it.
You say:
"your teoretical statements need to be followed by graphical mockups"
Seba's mockup with properties panel and icons on tabs should work fine as a one mockup. It looks good. Best I've seen so far (but just the properties panel).

@Jonathan Williamson (carter2422)
Hi, I've read the paper.
I personally strongly disagree with your opinions and some of the examples you provide even contradict what you are saying. Also you are using unfortunate style of presenting something as a fact where in fact (sorry about the pun) those are just your theories.

Let me know if you want hear more from me and if you want me to list my objections and if you are happy to discuss them.

@smallB smallC (smallb) as the many, many UI threads on BA have shown, disagreement is bound to happen. As one of the UI leads, my job is to not only contribute myself where I can but also to help make the decisions that otherwise are are hard to find a total consensus on.

If there're points in my presentation that can be more clearly worded, in particular to avoid presenting them as fact (which I try to always avoid), I'm always happy for feedback. That being said, I take exception to you implying things in my proposal are merely my theory, while at the same time you say things like "Horizontal tabs with icons have virtually every advantage (in Blender's case) over side tabs with text. And this is indisputable."

Of course they're my theories. But when able I try to back up my theories with evidence and reason.

@smallB smallC (smallb) - this isnt about ego, there has just been so much discussion on the topic already and you want to re-open the discussion a week before we do a release on a design task which was intended only to discuss how tabs look.

@Campbell Barton (campbellbarton)
Maybe then, this thread will help to make next release better/improved.

@Jonathan Williamson (carter2422)
When I say:
"Horizontal tabs with icons have virtually every advantage (in Blender's case) over side tabs with text. And this is indisputable."
This isn't my theory - this is a proven fact, heuristic used notoriously in UI/UX design. The point here is that vast majority of people find it easier and FASTER to recognize shape than to read from bottom to top (or to read, full stop). And this is a fact. And this is INDISPUTABLE. That's is one of the reasons that sign roads are using mostly shapes to conduct necessary information to road users, not text, nor text written from bottom to top. Why? Because it is easier and faster to recognize/communicate necessary minimal information via shape.

Here is just one example where you're simply wrong:
"Vertical tabs have been chosen because they work well within the space available."
Not really. If you take a look at the image you see:

  1. Red field - unnecessary used (wasted to the user) by side tabs, as well as lots of space (red) made unusable to the user
  2. Blue field - if you moved those side tabs from red field into the blue place marked as two circles connected by a line you would not only not loose any space - you would simply used unused so far space (marked by blue field)
  3. Yellow field - as you can observe those horizontal tabs DO NOT TAKE any extra space - the space had already been there created by a menu.

Side tabs will ALWAYS take and make space unusable. Horizontal tabs in most cases will simply used space which is already there and nothing is claiming it. So what they do basically they simply make a use of unused space.
On top of that you have:

  1. Hard to read vs Easy to read/recognize

Which one is the more natural choice? Yet, despite all of this, we have side tabs in Blender. Mind boggling. Truly.

Hi! Jonathan you mentioned in a discussion with Andrew that the operator panel needed some attention.
I have a quick suggestion easy to implement to
facilitate the access for beginners and general users alike.See snapshot below.

Splitting the buttons by adding a fix space (icon size darker area in picture) that can be
clicked to access the appropriate operator menu right next to the button
itself. Actually it would call the F6 function.

The advantages to this:

Beginners will learn quickly the macro F6
Actual Users who don't use shortcut Keys will have way to use the panel

This panel offers the advantage of not having to be scrolled
and it's counterpart under the tabs could be collapsed by default to
give space for the menus like Andrew does.

I kind of like Seba's tab design proposal, since it removes the slightly ugly gap between the tabs. It's how Unity does tabs.

Closing this for inactivity and no clearly needed changes against current design. If issues arise will create new task.