New Icons: Global Menus & Animation Editors #94370

New Issue

Kevin C. Burke · 2021-12-24T20:57:16+01:00

Kevin C. Burke commented

2021-12-24 20:57:16 +01:00

Big Picture
These 37 new icons provide functionality and visual feedback for menu commands primarily found in the Graph Editor, but some of the icons would be used in other parts of Blender. They adhere to the visual language of the current icons and are pixel-perfect where possible for greater UI contrast & clarity at small sizes.

Use cases

Users trying to understand text-only commands (e.g. Jump to Keyframes, Sample Keyframes)
Commands can be identified by one symbol as opposed to long strings (e.g. Bind Cameras to Markers, Revive Disabled F-Curves)
Disambiguating commands (e.g. Duplicate [Keyframe] / Duplicate Marker)
Providing Blender community & Add-On developers more icon options
With Blender-wide icons, users can quickly understand tools' functionality (e.g. Box Select, Circle Select)

Design
Here is the latest design with User Interface feedback incorporated

And here they are in context:
Graph Editor - View

Graph Editor - Select

Graph Editor - Marker

Graph Editor - Channel

Graph Editor - Key

3D Viewport - Select

Implementation patch:
https://developer.blender.org/D14662

**Big Picture** These 37 new icons provide functionality and visual feedback for menu commands primarily found in the Graph Editor, but some of the icons would be used in other parts of Blender. They adhere to the visual language of the current icons and are pixel-perfect where possible for greater UI contrast & clarity at small sizes. **Use cases** * Users trying to understand text-only commands (e.g. Jump to Keyframes, Sample Keyframes) * Commands can be identified by one symbol as opposed to long strings (e.g. Bind Cameras to Markers, Revive Disabled F-Curves) * Disambiguating commands (e.g. Duplicate [Keyframe] / Duplicate Marker) * Providing Blender community & Add-On developers more icon options * With Blender-wide icons, users can quickly understand tools' functionality (e.g. Box Select, Circle Select) **Design** Here is the latest design with User Interface feedback incorporated ![New_Icons.jpg](https://archive.blender.org/developer/F13009777/New_Icons.jpg) And here they are in context: Graph Editor - View ![Graph_Editor_View.jpg](https://archive.blender.org/developer/F13009658/Graph_Editor_View.jpg) Graph Editor - Select ![Graph_Editor_Select.jpg](https://archive.blender.org/developer/F13006512/Graph_Editor_Select.jpg) Graph Editor - Marker ![Graph_Editor_Markers.jpg](https://archive.blender.org/developer/F13006514/Graph_Editor_Markers.jpg) Graph Editor - Channel ![Graph_Editor_Channels.jpg](https://archive.blender.org/developer/F13006613/Graph_Editor_Channels.jpg) Graph Editor - Key ![Graph_Editor_Keys.jpg](https://archive.blender.org/developer/F13006518/Graph_Editor_Keys.jpg) 3D Viewport - Select ![View3D_Select.jpg](https://archive.blender.org/developer/F13006615/View3D_Select.jpg) Implementation patch: https://developer.blender.org/D14662

Kevin C. Burke commented

2021-12-24 20:57:16 +01:00

Added subscribers: @KevinCBurke, @dr.sybren

Paul Larson commented

2021-12-25 02:31:55 +01:00

Added subscriber: @GeorgiaPacific

Garek commented

2021-12-25 08:24:16 +01:00

Changed status from 'Needs Triage' to: 'Confirmed'

Andy Cuccaro commented

2021-12-27 03:14:32 +01:00

Added subscriber: @AndyCuccaro

Kevin C. Burke changed title from ~~New Icons: Global Select Menus & Graph Editor Menus-specific~~ to New Icons: Global Menus & Graph Editor Menus-specific

2022-01-03 19:11:59 +01:00

Kevin C. Burke commented

2022-01-05 23:50:33 +01:00

This comment was removed by @KevinCBurke

*This comment was removed by @KevinCBurke*

MMaker commented

2022-03-30 16:17:42 +02:00

Added subscriber: @chadking

Julian Eisel commented

2022-04-15 19:35:43 +02:00

Added subscribers: @jenkm, @jendrzych, @JulianEisel

Julian Eisel commented

2022-04-15 19:35:43 +02:00

I will have to be a bit negative here unfortunately, please don't take it personal. Of course a lot of this stuff is highly subjective.

There are a few issues I see here:

The icons do not feel like following the same icon style to me, even though you tried to do just that. I have no idea really why, they just don't look right to me in the mockups. Maybe they are just a bit too small, or maybe it's something else. I still hope we can get some icon design guidelines from @jendrzych, this might help creating more consistent feeling icons.
They do look smaller than other icons. At least they look hard to read to me, perhaps there are just too many details.
On a bigger picture, I don't agree on the need for most of these icons. There are good reasons with good evidence for using icons sparingly. @jenkm did a great writeup on that , and I'd like to make that part of our design guidelines. If I look at the mockups, this is the kind of thing we should avoid IMO. What may work fine is (max) one icon per section in a menu, that can be a nice hint for quick scanning.

I will have to be a bit negative here unfortunately, please don't take it personal. Of course a lot of this stuff is highly subjective. There are a few issues I see here: - The icons do not feel like following the same icon style to me, even though you tried to do just that. I have no idea really why, they just don't look right to me in the mockups. Maybe they are just a bit too small, or maybe it's something else. I still hope we can get some icon design guidelines from @jendrzych, this might help creating more consistent feeling icons. - They do look smaller than other icons. At least they look hard to read to me, perhaps there are just too many details. - On a bigger picture, I don't agree on the need for most of these icons. There are good reasons with good evidence for using icons sparingly. @jenkm did [a great writeup on that ](https://devtalk.blender.org/t/design-resources-educational-material/18346/7?u=julianeisel), and I'd like to make that part of our design guidelines. If I look at the mockups, this is the kind of thing we should avoid IMO. What may work fine is (max) one icon per section in a menu, that can be a nice hint for quick scanning.

Julian Eisel commented

2022-04-15 19:51:19 +02:00

Also apologies for only replying to this now, I was just made aware of this. I hope you didn't put too much effort into this since making the initial proposal.

Kevin C. Burke commented

2022-04-15 20:06:28 +02:00

In #94370#1341823, @JulianEisel wrote:
I will have to be a bit negative here unfortunately, please don't take it personal. Of course a lot of this stuff is highly subjective.

There are a few issues I see here:

The icons do not feel like following the same icon style to me, even though you tried to do just that. I have no idea really why, they just don't look right to me in the mockups. Maybe they are just a bit too small, or maybe it's something else. I still hope we can get some icon design guidelines from @jendrzych, this might help creating more consistent feeling icons.

They do look smaller than other icons. At least they look hard to read to me, perhaps there are just too many details.

On a bigger picture, I don't agree on the need for most of these icons. There are good reasons with good evidence for using icons sparingly. @jenkm did a great writeup on that , and I'd like to make that part of our design guidelines. If I look at the mockups, this is the kind of thing we should avoid IMO. What may work fine is (max) one icon per section in a menu, that can be a nice hint for quick scanning.

Hi Julian, I don't take it personally however this feedback is somewhat unhelpful as it is vague, dismissive, and subjective as you said.

Which icons specifically do not feel like the same style? Almost all of the elements from the new icons come from existing icons in the blender_icons.svg file
Almost all of the icons are either 14px wide and/or 14px tall. Which icons specifically do you think have too many details?
Perhaps it is not a user experience improvement for all the suggested icons, but I feel very strongly that some of these icons provide excellent explanation for some of the menu commands (e.g. Decimate, Jump to Keyframes, Column on Current Frame, Sample Keyframes). Once we get some experience with Blender, these commands make sense, but for new/inexperienced users, these icons can be extremely valuable and inviting to use the application.
I realize that there are a lot of icons being proposed here, but I humbly request respect for the amount of work that this took by looking at each icon on a case-by-case basis, rather than a blanket rejection of all.

> In #94370#1341823, @JulianEisel wrote: > I will have to be a bit negative here unfortunately, please don't take it personal. Of course a lot of this stuff is highly subjective. > > There are a few issues I see here: > - The icons do not feel like following the same icon style to me, even though you tried to do just that. I have no idea really why, they just don't look right to me in the mockups. Maybe they are just a bit too small, or maybe it's something else. I still hope we can get some icon design guidelines from @jendrzych, this might help creating more consistent feeling icons. > - They do look smaller than other icons. At least they look hard to read to me, perhaps there are just too many details. > - On a bigger picture, I don't agree on the need for most of these icons. There are good reasons with good evidence for using icons sparingly. @jenkm did [a great writeup on that ](https://devtalk.blender.org/t/design-resources-educational-material/18346/7?u=julianeisel), and I'd like to make that part of our design guidelines. If I look at the mockups, this is the kind of thing we should avoid IMO. What may work fine is (max) one icon per section in a menu, that can be a nice hint for quick scanning. Hi Julian, I don't take it personally however this feedback is somewhat unhelpful as it is vague, dismissive, and subjective as you said. - Which icons specifically do not feel like the same style? Almost all of the elements from the new icons come from existing icons in the blender_icons.svg file - Almost all of the icons are either 14px wide and/or 14px tall. Which icons specifically do you think have too many details? - Perhaps it is not a user experience improvement for all the suggested icons, but I feel very strongly that some of these icons provide excellent explanation for some of the menu commands (e.g. Decimate, Jump to Keyframes, Column on Current Frame, Sample Keyframes). Once we get some experience with Blender, these commands make sense, but for new/inexperienced users, these icons can be extremely valuable and inviting to use the application. - I realize that there are a lot of icons being proposed here, but I humbly request respect for the amount of work that this took by looking at each icon on a case-by-case basis, rather than a blanket rejection of all.

Brad Clark commented

2022-04-15 20:21:08 +02:00

Added subscribers: @JasonSchleifer, @LucianoMunoz, @BClark

Brad Clark commented

2022-04-15 20:21:08 +02:00

@JulianEisel are your comments on the visual look from only looking at the icons here or in context of using Blender as shown in the video https://developer.blender.org/D14662 posted with the patch?

Reading over the write up on Icon vs. text, I agree that ONLY having icons that alone don't help a user understand something, icon + text, (see the changes to the outliner icons) as reference do help create context and understanding for what an ACTION is going to do when the icon is clear. There are many wording choices in Blender that do not without reading(and even with reading the help or the tool tip, often the tool tip provides better explanation) at first read convey what the end result is going to be.

For artist facing tools like sculpting and graph editing keyframes, etc.. the artists are used to/trained/expect icons to guide them for what they do and if it ONLY allows them to find the tool in the menu faster (a bullet point as described in the great document you linked) then it is a reason to have them. Improve locating and using the tool to speed up something done 100s of times or much more over time means they don't need to read and comprehend, just click and visually they locate the "land mark" icon they need.

Context, expectations, users who use the tools (@LucianoMunoz @JasonSchleifer and other animators should have feedback and input on this as they are the ones ultimately spending the largest % of time in the area of the tool.

@JulianEisel are your comments on the visual look from only looking at the icons here or in context of using Blender as shown in the video https://developer.blender.org/D14662 posted with the patch? Reading over the write up on Icon vs. text, I agree that ONLY having icons that alone don't help a user understand something, icon + text, (see the changes to the outliner icons) as reference do help create context and understanding for what an ACTION is going to do when the icon is clear. There are many wording choices in Blender that do not without reading(and even with reading the help or the tool tip, often the tool tip provides better explanation) at first read convey what the end result is going to be. For artist facing tools like sculpting and graph editing keyframes, etc.. the artists are used to/trained/expect icons to guide them for what they do and if it ONLY allows them to find the tool in the menu faster (a bullet point as described in the great document you linked) then it is a reason to have them. Improve locating and using the tool to speed up something done 100s of times or much more over time means they don't need to read and comprehend, just click and visually they locate the "land mark" icon they need. Context, expectations, users who use the tools (@LucianoMunoz @JasonSchleifer and other animators should have feedback and input on this as they are the ones ultimately spending the largest % of time in the area of the tool.

Colin Basnett commented

2022-04-15 22:59:28 +02:00

Added subscriber: @cmbasnett

Colin Basnett commented

2022-04-15 22:59:28 +02:00

I will throw my subjective opinion in the ring here. Most of these icons are very much needed and improve the readability of the menus (they help with visual grouping, something the existing menus struggle with).

However, some of the icons feel like they won't read very well at lower DPIs, and that they're trying to pack too much detail into the small canvas given. Some examples:

Ungroup Channels
Before/After Current Frame
Select All/None
Rename Marker

Most of the marker icons also have this problem, for example:

The subjecticon (marker) takes up the majority of the space, but the action icon (caret, move gizmo etc.) take up about 1/3rd the visual space. In the context of looking at that marker menu then, the majority of the icon space is largely redundant visual information, because the user cares more about the action rather than the subject when trying to visually parse the menu. Perhaps inverting or playing with the size ratios of the subject and action icons would help?

Great work, regardless!

I will throw my subjective opinion in the ring here. Most of these icons are very much needed and improve the readability of the menus (they help with visual grouping, something the existing menus struggle with). However, some of the icons feel like they won't read very well at lower DPIs, and that they're trying to pack too much detail into the small canvas given. Some examples: * Ungroup Channels * Before/After Current Frame * Select All/None * Rename Marker Most of the marker icons also have this problem, for example: ![image.png](https://archive.blender.org/developer/F13003214/image.png) The **subject**icon (marker) takes up the majority of the space, but the **action** icon (caret, move gizmo etc.) take up about 1/3rd the visual space. In the context of looking at that marker menu then, the majority of the icon space is largely redundant visual information, because the user cares more about the action rather than the subject when trying to visually parse the menu. Perhaps inverting or playing with the size ratios of the subject and action icons would help? Great work, regardless!

Kevin C. Burke commented

2022-04-15 23:25:13 +02:00

@cmbasnett That is helpful, constructive feedback, thank you, Colin. Here's a new version of the markers using the "KEY_DEHLT" icon for proportion & style reference.

@cmbasnett That is helpful, constructive feedback, thank you, Colin. Here's a new version of the markers using the "KEY_DEHLT" icon for proportion & style reference. ![markers.jpg](https://archive.blender.org/developer/F13003235/markers.jpg)

Kevin C. Burke commented

2022-04-15 23:50:51 +02:00

Here's a revisit of the Before & After Current Frame and Group/Ungroup:

Here's a revisit of the Before & After Current Frame and Group/Ungroup: ![before_after_group_ungroup.jpg](https://archive.blender.org/developer/F13003260/before_after_group_ungroup.jpg)

Hans Goudey commented

2022-04-16 00:37:08 +02:00

Added subscriber: @HooglyBoogly

Hans Goudey commented

2022-04-16 00:37:08 +02:00

I think it's important to understand that a change like this doesn't just apply to the graph editor. As proposed, it actually represents a rather radical change in Blender's UI design.
For example, the selection menu is quite similar to menus in the 3D viewport, UV editor, etc. Adding icons to every operator just in the graph editor doesn't make sense, so it would have to be done consistently.

There are few existing menus in Blender (only the "Help" menu, which we have talked about changing in the past) where every single operator has its own icon.
That's on purpose. Icons are very helpful for scanning lists, locating familiar elements, etc. But when overused, they lose their meaning.
I would suggest (and so does current UI design) that the density of icons in your proposed "Select" menu goes a ways into the territory of "visual noise".

I don't mean that they all don't make sense-- some well placed additions might be helpful, but likely for commonly used visual actions rather than every operator.

Here is some more specific feedback about the designs:

Line weight Many of the shapes are hard to read at small sizes. Examples: selection icons, channel grouping icons, bake icons
Small shapes Similar to the previous point, visual elements are often quite small, especially when nested. Examples: camera scaled down to make room for other symbol, scaled down stop-watch, scaled down chain, "Between Selected Markers"
Visual noise The square dashed line can be helpful to represent "bounds" or "selection", but too many dashes make the shapes harder to read. Examples: selection icons
Skeuomorphism I would argue that the more literal word-based representations are redundant, and not a helpful visual metaphor, taking away from the other icons by adding noise. Examples: "iron" for smoothing and Euler filter.

I hope that is helpful constructive feedback. I think the icons that fit better are the simpler shapes like some of the marker icons or the jump to keyframe icon.

I think it's important to understand that a change like this doesn't just apply to the graph editor. As proposed, it actually represents a rather radical change in Blender's UI design. For example, the selection menu is quite similar to menus in the 3D viewport, UV editor, etc. Adding icons to every operator just in the graph editor doesn't make sense, so it would have to be done consistently. There are few existing menus in Blender (only the "Help" menu, which we have talked about changing in the past) where every single operator has its own icon. That's on purpose. Icons are very helpful for scanning lists, locating familiar elements, etc. But when overused, they lose their meaning. I would suggest (and so does current UI design) that the density of icons in your proposed "Select" menu goes a ways into the territory of "visual noise". I don't mean that they all don't make sense-- some well placed additions might be helpful, but likely for commonly used visual actions rather than every operator. Here is some more specific feedback about the designs: - **Line weight** Many of the shapes are hard to read at small sizes. *Examples: selection icons, channel grouping icons, bake icons* - **Small shapes** Similar to the previous point, visual elements are often quite small, especially when nested. *Examples: camera scaled down to make room for other symbol, scaled down stop-watch, scaled down chain, "Between Selected Markers"* - **Visual noise** The square dashed line can be helpful to represent "bounds" or "selection", but too many dashes make the shapes harder to read. *Examples: selection icons* - **Skeuomorphism** I would argue that the more literal word-based representations are redundant, and not a helpful visual metaphor, taking away from the other icons by adding noise. *Examples: "iron" for smoothing and Euler filter.* I hope that is helpful constructive feedback. I think the icons that fit better are the simpler shapes like some of the marker icons or the jump to keyframe icon.

Kevin C. Burke commented

2022-04-16 00:52:27 +02:00

Thanks @HooglyBoogly ! That's great feedback. I'll take another shot at the designs with these points in mind.

Kevin C. Burke changed title from ~~New Icons: Global Menus & Graph Editor Menus-specific~~ to New Icons: Global Menus & Animation Editors

2022-04-16 11:09:13 +02:00

Christiaan Moleman commented

2022-04-16 14:44:02 +02:00

Added subscriber: @ChristiaanMoleman

RedMser commented

2022-04-16 20:38:28 +02:00

Added subscriber: @RedMser

Leon Schittek commented

2022-04-17 07:35:24 +02:00

Added subscriber: @lone_noel

Kevin C. Burke commented

2022-04-18 18:31:03 +02:00

Added subscriber: @pablovazquez

Kevin C. Burke commented

2022-04-18 18:31:03 +02:00

@JulianEisel & @pablovazquez, I made many changes to these designs over the weekend. I have spoken with @dr.sybren and he has said the decisions on these icons are yours to make. I am very willing to make changes to the icons, add new icons, or adapt their style to whatever you like. Please let me know what would need to happen for these to proceed. Thank you.

Alexey Adamitsky commented

2022-05-03 07:58:28 +02:00

Added subscriber: @AlexeyAdamitsky

beate a. commented

2022-05-16 12:40:05 +02:00

Added subscriber: @Beate-Adler

beate a. commented

2022-05-16 12:40:05 +02:00

will it be possible to put the icons of the commands in a separate palette +dock them to the interface as a tab to use them as buttons to execute the commands?(like in c4d)

Jay Edwards commented

2022-05-16 21:53:10 +02:00

Added subscriber: @Jaye.Antoni_Whyldz

Kevin C. Burke commented

2022-05-17 06:34:59 +02:00

In #94370#1359321, @Beate-Adler wrote:
will it be possible to put the icons of the commands in a separate palette +dock them to the interface as a tab to use them as buttons to execute the commands?(like in c4d)

What you are describing would be a feature request. You can submit your idea here:
https://blender.community/c/rightclickselect/

> In #94370#1359321, @Beate-Adler wrote: > will it be possible to put the icons of the commands in a separate palette +dock them to the interface as a tab to use them as buttons to execute the commands?(like in c4d) What you are describing would be a feature request. You can submit your idea here: https://blender.community/c/rightclickselect/

Kevin C. Burke commented

2022-06-08 02:15:08 +02:00

@JulianEisel , @pablovazquez, @dr.sybren

Can you let me know if there are changes that can be made to these icons to meet your team's approval, please?

I think I saw in Blender Chat that the number of the icons make the designs hard to review. Would you prefer for me to break these into separate design tasks, grouped by each Animation menu (e.g. Select, Marker, Channel, etc.)? Then you can decide which ones serve the greatest utility for each menu. Or I can submit each icon individually? Please let me know.

Thank you!

@JulianEisel , @pablovazquez, @dr.sybren Can you let me know if there are changes that can be made to these icons to meet your team's approval, please? I think I saw in Blender Chat that the number of the icons make the designs hard to review. Would you prefer for me to break these into separate design tasks, grouped by each Animation menu (e.g. Select, Marker, Channel, etc.)? Then you can decide which ones serve the greatest utility for each menu. Or I can submit each icon individually? Please let me know. Thank you!

Philipp Oeser removed the

Download

What's New

Blender Studio

Manual

Developers Blog

Documentation

Benchmark

Blender Conference

Development Fund

One-time Donations

New Icons: Global Menus & Animation Editors #94370