GSoC 2013 Toolbar UI

Hi all,

For the Summer of Code I’m working with Ton on a manageable refresh of the current toolbar. I’ve done a few rounds of designs and people have kindly provided feedback and ideas on one of the Blender mailing lists, but I need some more help from the blenderheads here.

The current mockups can be found on the wiki here, but I’ve attached them to this post as well.

The first mockup shows the Object Mode toolbar and shows the style guide that I’ve been following. The second and third mockups show the Edit Mode toolbar and show four new features.

Firstly, there is a way to get to a panel’s buttons even if it is closed. This aims to allow you to get to not so frequently used buttons without opening the panel, increasing the cumulative height of all the panels, and having to scroll up and down.

The second new feature is a small button on the right next to a normal operator buttons that, when clicked, executes the operator, but also immediately shows the F6 redo panel. This only really makes sense for some operators and therefore you’ll only see it next to some of the buttons.

The third new feature is a more… button that is present in some panels that shows a list of operators that can be categorised as belonging to that panel. This aims to make commands more discoverable. The main issue with the toolbar is that there are simply too many operators to give them all a place. We can however make it so that they can be found in some way or another.

Finally, you’ll see that buttons automatically display the associated shortcuts if there is space for it. The idea is that the toolbar can serve as somewhat of a cheat sheet to learn shortcuts.




I would very much like to get some feedback on this. But not only that, I also need a hand with improving the layout and groupings of operators (make mockups!), getting proper icons done, and, most of all, with deciding on a style guide for the toolbar so that the rest of the modes (as well as addon panels) can follow this guide. It should aim to answer questions such as “Can a button show only an icon and a shortcut, or should it then also include a label?”, or “Where, when, and for what can I use an icon-only button?”.

Some of these ideas are implemented in the UI Replay branch so if you want to try out a prototype you can download and build it.

Let me know what you think!

Hi Ack-err.

This is a nice project. The current tool shelf has a number of issues and was never implemented very well. It could use some attention!

I like that you’ve split the tools into smaller, more smaller manageable panels. I also find it interesting that you’ve moved the mode selector to the top of the tools pane. It might also be relevant to move some other toolbar items here, such as Copy/Paste Pose, the 3D manipulator and perhaps things like Snap?

I’m not sure I think it’s a good idea to add the ‘…’ buttons next to the tools for tweaking settings - most likely that’s what you always want. You execute, say, the Subdivide tool, and then you need to somehow specify how many times you want to subdivide. You’ll never not want to be able to specify that.

In all your mockups, the ‘Redo’ panel is missing - is this intentional?

Here are some notes on the subject of the toolbar and the ‘Redo’ panel:

  • The current ‘Redo’ is often hidden and hard to distinguish from the rest of the tools pane
  • In the Painting modes, the ‘Redo’ panel is not applicable, but is still available, showing lots of garbage text. Better to just hide it in these modes.
  • When the tools pane is hidden, the ‘Redo’ panel is not visible (only through pressing F6). Perhaps add some non-modal overlay in the bottom left?

The biggest problem with the F6 redo panel is that it disappears when mouse is no more over it.
So, you have to recall it, each time after you rotate the view to re-evaluate your changes under different point of views.
I wish to have it always displayed somewhere instead of being forced to click or press F6 constantly.
I don’t care if it is in a panel of toolbar/view properties or in Properties Editor or if it becomes a new editor or a pinned floating panel.
I just want it to have it always visible in my screen whatever I do.

Exactly. The F6 panel is too modal, and too hidden.

I’d suggest to always display redo settings, but to place them in the corner when the toolbar is closed, like so:


It also has a problem that it only shows up in the 3D View. As an example, say you’re doing UVs, and Pack Islands in the UV/Image Editor. You either need to go to the 3D view panel, or know to hit F6 in order to be able to set the margin.

Anyway, I like the new toolbar buttons and stuff. If I get time tonight maybe I’ll give some mockups a shot.

I agree, and I think this is an important topic to discuss here.

AFAIK, Ack’s work removes the operator-redo panel from the sidebar… because it confuses the sidebar and forces lots of scrolling.

The goal is to find a better home for that panel info fixing/improving the F6-style panel. Personally, I would like to see the F6 panel get a permanent home in the lower-right of the 3dview, in both a “collapsed” and “uncollapsed” state. While we’re at it, we should try to find a better physical layout than the “double-wide” layout of the current F6 panel. A possible feature for the existing F6 popup-panel is to allow it to be “pinned”, so it won’t disappear and can be moved. However, so far Blender has been against floating windows/panels.


HOWEVER, If the redo panel is to be re-admitted into the sidebar…

(1) I’d like it to have more distinct visuals, so it doesn’t just confusingly blend in with the rest of the toolbar. When the redo panel is up right now, you can hardly even see the divider between the two regions! One idea I like for this is making the visual style/color of the redo panel in the sidebar just like the F6 panel (i.e. black background). This would make those two UIs for the same thing more consistent, and make use of the redo panel in the sidebar more obvious.

(2) I’d like it’s “collapsed” state to stay visible on the bottom, showing the last redo-operator, using the F6 visual style with a black background… so it’s not such a mystery widget with that tiny little “+” to expand control.


I was going to bring up the issues with the f6 panel…I never considered it the “re-do” panel…I always thought it was tool parameters panel…whatever…it is “often needed, always hidden” and that is a bad paradigm.

I have an idea:
Let’s split the tool shelf to two (or more) toolbars:
the regular toolbar with all buttons etc and the operator toolbar.
now, in the upper of the toolbar you will have a choice menu with two checkbox, one for each toolbar.
when you choose only the first it will take the whole space of the toolbar. when you choose the second it will take the whole space two (instead of the first) and when you will choose both the toolbar will split to two like it is today.
when you put the mouse on the toolbar you can press the “1” button to see only the first toolbar and press “2” for the second and press “3” for both.
you will see those shortcuts on the tooltips of the checkbox text.

sound good?

To be honest I find the tool bar to much filled with so many modeling options / tools.

But I also find it very annoying when I have like with the 3D Printer Tool Box modeling options in the tool shelf
but display options in the property shelf.

Splitting this up makes logically sense - practically it is extremely annoying.

maybe focusing on a context based menu like the pie menu might make more sense and keep the tool shelf really reduced
or only the field where add ons are displayed and tool option.

To be honest I find the tool bar to much filled with so many modeling options / tools.

Just throwing out a half-baked idea, but what if the toolbar had different sets of tools for different tasks. Like how in Maya you can choose the UI for modelling, animation, dynamics, rendering, etc…

I think if we did that, the toolbar could be a lot less cluttered with things that we don’t need at the moment.

Big fan, but anyway…Carrara does that too, so not a bad idea :smiley:

Honestly, who ever uses the grab/rotate/scale buttons in the toolbar? I manually remove them from the UI every time… same for the “mode” button, they´re already visually represented elsewhere. UI duplication is bad.

I´d also like to chime in on the F6 panel, maybe a way to “pin” or “snap” floating panels when needed?

“Same wine, new skin.”
Need a better paradigm to solve the toolbar UI.
I’m not fond of mode buttons being there, more unnecessary buttons in the toolbar.
Buttons might be bigger but it don’t cover enough ground of the most used tools.
It is better to uniformly turn all button icon (big enough selection area to click on, also same size) and group in ways more visually intuitive.
Use tooltip as the text description their functions. (don’t know how to use, hover)
Think Photoshop toolbar, logical arrangement, grouped, with depth, functional, visually pleasing, solve clutter.
But to be inclusive, the project should not only solve toolbar, but also the header and properties panels.

One way that might solve this toolbar problem is like the visual brush buttons for sculpt, weight paint, sculpting.
But with less button clicking.

And yes, F6 is too awesome to be “often needed, always hidden
@davesf’s ideas are close to a practical solution.

Yes but little buttons with icons are faster to use than the list. Like pie menus.

I agree.
I was not very enthusiast about the idea of newbie/expert modes.
But when discussion about learning blender experience and simplifying toolbar began, I made mock-ups.

So this is old mock-ups made during 2.5 period.
Don’t take attention to ugly icons.
I just want to share the idea of layers for toolbar that allows lots of tools as icons in a second header.

I like your idea to display shortcuts as a learning experience.
But for an expert, except for paint modes, buttons in toolbar are only useful like pie-menus if they correspond to operators without shortcuts.
I found the idea of a small button on the right to see the content of a closed panel, very useful in texture mode, to change brush settings.

we already have that by way of interaction modes

the toolbar changes if you are in object,edit,texture,armature,etc… mode

Or did you mean it differently?

otherwise some solid ideas here
looking forward to the results.

What about one more panel to Toolbar :slight_smile:
It allows you to show/hide all other panels on Toolbar etc. addons.
So this “ToolBar Settings” panel is always visible to control others visibility.


ack-err, here’s some feedback on your mockups:


-First new feature (ellipsis on closed panels):
This is great, having the ability to get to a function without increasing the height and scrolling is nice.

-Second new feature (ellipsis on operator buttons):
This sounds good, but if the popup appears at the mouse position, it could result in a really awkward placement of the panel. Maybe it should appear in one of the corners as others have suggested, or make it moveable…

-Third new feature (more button):
This is great. Increasing discoverability is a nice goal, it would be very helpful for intermediate users like me, without taking up massive amounts of UI space and disrupting pro workflow.

-Fourth new feature (shortcuts on buttons):
Excellent idea, this will be extremely helpful.

-Style guide:

  1. The removal of interspersed labels in the toolbar I think detracts too much from readability (too much use of icons as well). 2) You are setting a very important new precedent with the 1.5x height buttons with large icons. I think it may be possible to achieve the visual emphasis you’re looking for in a different way (using a different precedent) which would fit better with blender’s current visual style…I will try to present some alternatives and mockups for these.

-Unsorted:

  1. The mode switches at the top of the toolbar is a nice addition, more convenient than the drop down menu. 2) How exactly does the history panel work? I was very interested to read your gsoc proposal and progress in the mailing list, but how would the operator history and branching you mentioned be displayed in the UI with this new panel? What happens when you click the history button?

I had a question concerning those ellipsis. Is there a way to activate them by way of shortcut as well? without having to aim for that space each time? something like q or w could do the trick for example.

Will ellipses also be propagated into the whole of blender? . Like the panels in properties panel? Or is it in a we’re only thinking about it stage?

To reduce the excess on the toolbar tools should consider the following

  • Make the t-panel customise, the user can add their own set of tools
  • Some addons appear in all sections, this must be corrected to clean a little the toolbar
  • The ability to minimise the toolbar as in photoshop with icons only for expert users, text, icons with text
  • The pie menu help clean the toolbar and is faster to access tools
  • Custom floating panel like the old implementation from matt ebb

[video]https://www.dropbox.com/s/j47tnipa69r75h8/toolbarwip01.mp4[/video]

    • I think the best reference is Modo is so well organized

Thanks for your ideas all! I’m traveling at the moment so my internet access is spotty.

I would say the copy/paste pose buttons belong in the toolbar because conceptually they are actions that are performed. It’s probably a good thing to keep the distinction between tools in the toolbar and settings in the header. That would mean that the manipulators settings and the snap settings would have to stay in the header, but copy pose would go in the toolbar.

Yeah, davesf is exactly right in the reasons he gives why it was removed. Others here have also given good reasons for it not to be tied to the toolbar. It sits quite uncomfortably there. The space it needs changes per every operation, and the space it has is fixed and imposes on the toolbar. Having removed it we came up with the … button to get the F6 panel to automatically pop up in cases where you would want it. You’re, however, very right in saying that in those cases you actually always want it and that therefore the … button is just a weird compromise. I do like davesf mockups where the panel sits in the view3d header and opens up into the viewport.

I like this idea. The toolbar could be a special selection of panels per activity, or there could be a panel per activity. Tools and buttons could appear not in just 1 panel, but in every panel (i.e. activity) where it’s needed. However… how would we reach a good and agreed upon set of activities? A solution could be to make a good set of default panels, but also allow users (in the future, not as part of this GSoC) to create custom panels by dragging and dropping icons from a operator browser of some sort.

Ton and I spent some time yesterday thinking about a horizontal toolbar at the top of the viewport. The requirements that we set for the toolbar are a) reduce or eliminate the need to scroll, and b) make better use of available space.

The main idea is that all tools get an icon and sit in foldable panels. This new toolbar would be 2 or 3 rows high and the subdividers between the panels could be dragged to make one panel smaller and another bigger. The icons that don’t fit in a panel are hidden and the last icon turns into a [>>] or […] button that shows a popup panel with the remaining buttons.

The current vertical toolbar would then display tool properties. In the object and edit modes this would be the pre (default) and post (redo) settings for the operators, and in the paint modes it would be the normal paint options (brush, colour, appearance). This would give lots of space for operators in the horizontal toolbar and it would always show the properties/redo panel in the left vertical bar. I know this doesn’t solve the problem of not having a redo panel in other editors…

This is a very interesting metaphor, but I have some doubts as to whether it would be easy to remember what panels are enabled in each preset. Would there be another way of visualising or hinting at the content of a layer?

Please do! :slight_smile:

There isn’t a clear design for a more advanced history panel or region at the moment. The history buttons in the mockups are the buttons that are currently also present. I did some thinking on a history editor that allows, by drag and drop, to make and save macros, but we’ve decided it’s out of the scope of the project.

The way it’s currently implemented makes this possible for any panel in any part of the interface. I’ve had to explicitly disable it in the properties panel, so it could be enabled again. Whether this should be enabled in other parts should be discussed with Ton and others I think. There is one problem with enabling this in panels that sit on the right of the viewport: it sits quite a bit further away from the content.

There isn’t a shortcut, but this would be easy to add. I’ll have a look at this!

There’s some good stuff here, thanks! I’ll need to think about this a little bit more first…