GSoC 2020: Outliner Discussion and Suggestions

[natecraddock]

Wow! 25 replies in less than 24 hours, collection colors must be exciting Thanks for the great feedback and mockups.

Colors

So the first thing: We need good colors to make a better decision. I tried picking less saturated and slightly more consistent colors as an experiment. I also merged #1 and #2.

In this example, I think the new colors work great for the collection icon, and poorly for the colors on the left (because the bars appear to bleed into each other). I tested with the other themes and it generally works well for the icons. There is still room for improvement, but I think that this shows the choice of color influences where it is effectively drawn.

A few mentioned user-customizable colors in the preferences; I really don’t think that is a good idea. Every similar system I tested (Krita, Gimp, Photoshop, MacOS, Google Drive) doesn’t allow that. I think it’s simpler to pick a good set of colors that work well, because they are named in the UI. It would be annoying in UI and the code itself to have Color 1, Color 2, Color 3, …

I think we could use a few additional colors for sure. But I think the 20-30 that some apps offer is quite a large number.

Placement

Again, I’m looking at other apps to determine the best way to do this. The original #3 came from Krita, and I do not want to color the full lines. MacOS colors a small dot to the side which is simple and nice. Perhaps the radio icons could be replaced with a dot which has more visual weight than a bar.

Some (like Google Drive) color the icon itself. These have the benefit of staying aligned with the hierarchy. With better colors than my original wild guesses, I think coloring the icon actually does look great. We could also color a rounded square behind it too.

A few other ideas:

6

Rounded behind the collection icon. Has the benefit of nesting alignment, and it is visible (ignore the glitch on the green).

7

If the width could stay consistent, this is a cool idea too. That would require cutting characters off of collection names though. (again, ignore the GPU draw issue on yellow… It’s just a quick hack )

Hierarchy

Many also proposed showing the color for sub-collections/objects by either drawing the bars on the left, or by coloring the small hierarchy lines that already exist (like the proposal from SaintHaven on blenderartists). I like parts of it (the hierarchy line does look nice) but I’m against coloring the triangle and checkbox. Those are different from the collections themselves.

I coded the line drawing, and like @Bobo_The_Imp i’m not convinced that they add much meaning here. I think they just add more noise. Perhaps only drawing the vertical lines might help. We’ll see.

To me, collection color tags are a quick way to organize collections and not objects. Drawing the color should be limited to the collection.

@dan2

I’m guessing the Blender Animation Studio is pitching in as well when it comes to feedback. What’s their preference?

I have not asked yet, but in the next week or so I hope to start getting feedback from them. I’ll admit I haven’t used Blender as an artist as in the 2.8x series as much as I did back in 2.5x-2.7x. That means collections aren’t something I use frequently. I totally understand the concepts, but I don’t have daily experience in organizing collections. So I’ll get back to y’all on that.

tl;dr: The overall opinion was to color a bar on the left, the collection icon, or both. Currently I think coloring the collection icon itself is the best route, but with some work coloring behind could work great too.

[natecraddock]

@ckohl_art

would a gradient be difficult?
I strongly agree on an option for custom user colors, however. Something like:

I think a gradient would be tricky (haven’t checked though). And custom colors might be tricky. For now I’m not going to add them.

@RonanDucluzeau

So, what I meant is : Could it be possible to have an automatic filtering of outliner when Modifiers Tab, in Properties Editor, is activated/displayed ? Or a Modifiers Display mode in outliner ?

This is possible, but outside the scope of this summer of code. Cool ideas here though, maybe better in a different topic or on right-click-select?

@joro

for a long time I had some ideas of reorganizing blenders interface (started this mockup back in the beginning of 2019). I will try to lay out the basics of my thoughts.

Really cool mockups here! You have certainly put lots of work into it. Again, probably a bit too much of a change, especially 4 weeks into GSoC. Probably better on a different topic or RCS again.

@slowk1d

In this case, I absolutely push your proposal of setting the active camera via the context menu.

Yes, I’ve put this aside for now. What we have works well and can easily be changed. I’ll get back to this once I get more feedback later But yes, I do agree, the options for activation should be available and consistent.

[Hadriscus]

I think the lefmost color bars are redundant : as you said, they blur into a vertical gradient and I personally can’t distinguish one from the next. I think your proposal #6 works better.

@natecraddock

A few mentioned user-customizable colors in the preferences; I really don’t think that is a good idea. Every similar system I tested (Krita, Gimp, Photoshop, MacOS, Google Drive) doesn’t allow that. I think it’s simpler to pick a good set of colors that work well, because they are named in the UI. It would be annoying in UI and the code itself to have Color 1, Color 2, Color 3, …

Bone groups work like this. There are custom colors in theme preferences that the user can set, and I think collection colors could work the same. Being limited to a few builtin colors sounds a bit “Blender 2.7” don’t you think ?

[wilBr]

@joro

Compact view

wow. so beautiful mockup. compact view for outline and properties is great, but off topic I think.

[voxel]

Nate, actually, your 1st and 3rd test combined, could work with a small twist. I think it’s all about finding the right dimmed colors for the entire row. In the end, all we need is to spot easily that piece which we know that we tagged with a specific color and then to see easily where it begins and ends the “group”.

[Bobo_The_Imp]

Thanks for the mockups nate, the designs are solidifying, with some more deliberation I think we can reach something really good! Here are some points I wish to bring up:

@natecraddock

In this example, I think the new colors work great for the collection icon, and poorly for the colors on the left (because the bars appear to bleed into each other).

I think this a problem just from color choice at present rather than design. The pastel color scheme you have right now is actually really cute, but it might be a bit too different from the current colors in the outliner. I’m sure that there would be a set of colors that could facilitate both the colors on the left and the collections. I will try to mock some up later, I don’t have much more time today to try things out.

I also can’t tell whether I prefer a backdrop for the collection icons with color, or the icons themselves colored. It’s hard to tell without a really solid color scheme. I find the icons being colored more elegant, it’s not as intrusive, BUT I do find it a bit harsh on the eyes. Since the lines of the collection icon are thin, certain colors can fade into the background a lot without making them bright like the pastel theme. It’s not so bad though. With a backdrop you have less room for colors fading into the backdrop, but it is way more intrusive. Not sure at this point in time what is better.

Regardless I’m curious if this will be ran by the UI team when we have a more clear design of the colored collections?

All the posts here got me thinking and I mocked up another idea:

Here is the idea behind it. After showing some colleagues (who don’t use blender) the thread and all the ideas, they really liked the idea of just the colors on the left. Mostly for cleanliness vs function, but they added that an issue with it is that if you look on the left, find a color, then trail your eye to the right you can potentially lose your place in the rows. Kind of like reading the same line in a book over and over, it happens right? So, I wasn’t a huge fan of coloring the hierarchy lines, but I don’t mind @lone_noel’s idea of just coloring the vertical line. With this idea, you just have the collection with a block of color on the left, then you can trail your eye to the right and spot the corresponding hierarchy line. Spot the purple one, find the purple block, then look to the right and find the purple line. This way your eye won’t get lost, and you have the added benefit of the left lane having spaces to further define collections . Whether it’s worth having the colored lines in there or not, I’m not sure, but it’s some food for thought.

[dan2]

That’d leave us with the left bar only if a collection is collapsed, right? That disconnect is bugging me personally, it just doesn’t read like a collection color tag. The hierarchy lines are cool though.

It’d also be interesting to see what would happen to objects that belong to multiple collections.

[Bobo_The_Imp]

@dan2

That’d leave us with the left bar only if a collection is collapsed, right? That disconnect is bugging me personally, it just doesn’t read like a collection color tag

Yea I understand that, but I’ve known softwares to do it. Adobe generally does it that way for instance:

I prefer not coloring the collection icons to separate it from it’s contents more, particularly object properties. Here is an example why:

Looking at this, the contents are colorful, so if you color the collection its harder to tell where it starts.
“Was that a material or a collection?”

[dan2]

Ye, I personally don’t see a point of coloring the object data icons. If it was an option I’d just make all that stuff white. Not using colors on tabs either though, might be a personal preference.

For the photoshop example, there’s no row inbetween, no visual disconnect, so that kind of works. Blenders outliner and collection system can get a tad more complex though, like that objects in multiple collections example.

How about Nate’s #6 proposal above, with not coloring the icon but putting the color behind it? Not super consistent with Blenders UI but I prefer functionality over the visually pleasing at times.

[Bobo_The_Imp]

@dan2

might be a personal preference

Yea all this color stuff is hard because of preference haha!

@dan2

For the photoshop example, there’s no row inbetween

Yea I think it would work better if the radio icons were gone, which apparently might happen, design depending. If so, I would lean more towards just the left lane of colors.

@dan2

How about Nate’s #6 proposal

I think it’s fine. Still had the issue I mentioned, but I definitely think it is a decent option! I’m not opposed it anyways.

[dan2]

@Bobo_The_Imp

If so, I would lean more towards just the left lane of colors.

If they were closer it could work. Radio buttons as well as those collection color strips on the left could be made optional (from a dropdown like the render visibility, selection lock, etc) and the collection icon could get a colorize-able tag in the theme options, that way everyone could have it their way. Look at me, just quadrupling Nates work.

[lone_noel]

Color tags

@natecraddock

To me, collection color tags are a quick way to organize collections and not objects. Drawing the color should be limited to the collection.

I would like being able to tell to which collection an object belongs to at a glance. It might not seem like a big issue in most of the mockups but when you have twenty or more objects in a collection, the collection itself might not even be on the screen to communicate the color.

As another example, this is how Illustrator does it (I’m sorry for the german interface. That’s the layer options menu with all the predefined colors and ‘Benutzerdefiniert’ means ‘Custom’):

This is already quite close to what you’re proposing and the gaps between the items would help to break up the gradient quite nicely:

I do agree with @Bobo_The_Imp and I do really like his mockup combining the collection tags with the colored lines. But I think doing it like illustrator would be good, as well.

Colors
The colors should definitely be customizable via the theme. Some themes I’ve seen people use are really out there in terms of colors and I don’t think we can make one solution fit all. That simply is the blender way
As seen in the screenshot above Illustrator has almost thirty predefined colors (albeit quite bad ones…) and allows for custom colors. But i don’t think there is a need for custom colors outside the theme if there are reasonably many.

[DotBow]

Hi!
There is already quite much of opinions, but that’s what I think:

1

Nice and take very little space, but it is too hard to focus on such thin line especially if there is a chain of different colors

Screenshot

2

Doesn’t make sense for me. There is already a meaning for color of icons - white is neutral while others represents different data. Icons also not in one column when child presented.

Screenshot

3

As mentioned, it leads to a lot of color theme problems like selecting, highlighting etc. In controversial with first one it is too crowded and distracting.

Screenshot

Other solutions uses mix of first 3.

I think for colors should be used one consistent column, which never disappears depending on size of area and doesn’t represent much of the information.
Actually, there is one - restriction columns!

For me it is pretty easy to spot hierarchy (what objects in which collection)
Columns never disappear when outliner is crowded.
However, the one problem is how to approach child collections color when there is only parent have it (first two images).

I might be wrong, but thanks for reading! Great job done for outliner

[RonanDucluzeau]

I would like being able to tell to which collection an object belongs to at a glance.

Me, too.

I Like @lone_noel proposal for expanded collections.
I had an idea to improve it for nested collections.

Maybe increasing width of bar would make it better.
That would require an automatic increasing for more nested collections, anyways.

@lone_noel

The colors should definitely be customizable via the theme. Some themes I’ve seen people use are really out there in terms of colors and I don’t think we can make one solution fit all. That simply is the blender way

Why not re-using palette of random colors used in viewport and a shortcut to change random seed ?
Maybe, Ton’s idea of a custom palette reused everywhere in UI should be realized.

@joro

@joro

for a long time I had some ideas of reorganizing blenders interface (started this mockup back in the beginning of 2019). I will try to lay out the basics of my thoughts.

Really cool mockups here! You have certainly put lots of work into it. Again, probably a bit too much of a change, especially 4 weeks into GSoC. Probably better on a different topic or RCS again.

I already made a proposal on RCS about vertical tabs for outliner, last year.

Vertical Tabs for Outliner — Right-Click Select

@natecraddock

This is possible, but outside the scope of this summer of code. Cool ideas here though, maybe better in a different topic or on right-click-select?

Here is my proposal on Right Click Select.

Modifier List in Outliner — Right-Click Select

[chironamo]

Wow! Lots of great feedback and it’s fun to watch. I think the gradient one is especially great because it’s easy to see and doesn’t get in the way!

I’d like to add one idea as well. It’s a very simple rule:
“Clarifying the range of the collection at the top level”.

(1) Two rows of color bars.
By using two rows of color bars, it becomes easier to see where the topmost level begins and ends.

(2) Make a space between the two topmost levels.
Even very small spaces make it easier for the eye to see where they are separated.

Three rows of color bars might be works, but more than four will be noisy look.
Thank you!

＿＿＿＿＿＿
[postscript]
Oh… My image looks very similar to Ronan’s.
Sorry, but I didn’t notice your post when I started to write this post…

[JJL3ddnznr]

Nate, I like #2 personally. Thanks for the hardwork

[nokipaike]

This is the solution that in a similar way I proposed long time ago for a better use of the “full screen mode”, and also for a better management of the interface of the addons, in fact if I remember correctly I had proposed a similar solution in another tread or maybe on that of “the duplication of the properties panels pointed out”, I don’t remember well, and I don’t want to search. I just want to bring out the reason, and it’s because property panels, and the outliner are largely managers being part of the 3d view …
Anyway thanks for making a better summary and mokup. your comment is explain the problems and solutions very well.

[nokipaike]

this is my proposal to your mokup, not to give too much trouble with the colors, but at the same time to make the various objects in the various collections and sub-collections quickly identifiable to the eyes … the colors are identical but with an overlay, for do not bother the colors of the icons, and opacity at 15%

[Hadriscus]

How do you reconcile that with the hover/selected/active colors ? They also tint the entire line… the idea is not bad but it ends up looking a bit like a messy rainbow… the colored lines work really well though… maybe we could have them thicker, but keep the background consistent and solely used for hover/selection/active coloring ?

[nokipaike]

I think we need to find a good compromise of colors and opacities at the right point in order not to appear a colorful mess, and at the same time take the obvious advantage of easily identifying which objects belong to the various collections … believe me it is a great advantage when we have to eye deal quickly with large quantities of objects and collections … I think therefore it is at this point a question of refinement and polishing of the idea.