New Icons: Global Menus & Animation Editors #94370

Open
opened 1 year ago by KevinCBurke · 30 comments

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

And here they are in context:
Graph Editor - View
Graph_Editor_View.jpg

Graph Editor - Select
Graph_Editor_Select.jpg

Graph Editor - Marker
Graph_Editor_Markers.jpg

Graph Editor - Channel
Graph_Editor_Channels.jpg

Graph Editor - Key
Graph_Editor_Keys.jpg

3D Viewport - Select
View3D_Select.jpg

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
Poster

Added subscribers: @KevinCBurke, @dr.sybren

Added subscribers: @KevinCBurke, @dr.sybren

Added subscriber: @GeorgiaPacific

Added subscriber: @GeorgiaPacific
Garek commented 1 year ago

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

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

Added subscriber: @AndyCuccaro

Added subscriber: @AndyCuccaro
KevinCBurke changed title from New Icons: Global Select Menus & Graph Editor Menus-specific to New Icons: Global Menus & Graph Editor Menus-specific 1 year ago
Poster

This comment was removed by @KevinCBurke

*This comment was removed by @KevinCBurke*

Added subscriber: @chadking

Added subscriber: @chadking
Collaborator

Added subscribers: @jenkm, @jendrzych, @JulianEisel

Added subscribers: @jenkm, @jendrzych, @JulianEisel
Collaborator

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.
Collaborator

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.

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.
Poster

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.

Added subscribers: @JasonSchleifer, @LucianoMunoz, @BClark

Added subscribers: @JasonSchleifer, @LucianoMunoz, @BClark

@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.
Collaborator

Added subscriber: @cmbasnett

Added subscriber: @cmbasnett
Collaborator

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

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!
Poster

@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

@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)
Poster

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

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)
Collaborator

Added subscriber: @HooglyBoogly

Added subscriber: @HooglyBoogly
Collaborator

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.
Poster

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

Thanks @HooglyBoogly ! That's great feedback. I'll take another shot at the designs with these points in mind.
KevinCBurke changed title from New Icons: Global Menus & Graph Editor Menus-specific to New Icons: Global Menus & Animation Editors 10 months ago

Added subscriber: @ChristiaanMoleman

Added subscriber: @ChristiaanMoleman

Added subscriber: @RedMser

Added subscriber: @RedMser
Collaborator

Added subscriber: @lone_noel

Added subscriber: @lone_noel
Poster

Added subscriber: @pablovazquez

Added subscriber: @pablovazquez
Poster

@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.

@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.

Added subscriber: @AlexeyAdamitsky

Added subscriber: @AlexeyAdamitsky

Added subscriber: @Beate-Adler

Added subscriber: @Beate-Adler

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)

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)

Added subscriber: @Jaye.Antoni_Whyldz

Added subscriber: @Jaye.Antoni_Whyldz
Poster

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/
Poster

@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!
lichtwerk removed the
legacy module/Animation & Rigging
label 21 hours ago
lichtwerk removed the
Interest/Animation & Rigging
label 21 hours ago
Sign in to join this conversation.
No Label
Interest/Alembic
Interest/Animation & Rigging
Interest/Asset Browser
Interest/Asset Browser Project Overview
Interest/Audio
Interest/Automated Testing
Interest/Blender Asset Bundle
Interest/Collada
Interest/Compositing
Interest/Core
Interest/Cycles
Interest/Dependency Graph
Interest/Development Management
Interest/Eevee & Viewport
Interest/Freestyle
Interest/Geometry Nodes
Interest/Grease Pencil
Interest/ID Management
Interest/Images & Movies
Interest/Import/Export
Interest/Line Art
Interest/Masking
Interest/Modeling
Interest/Modifiers
Interest/Motion Tracking
Interest/Nodes & Physics
Interest/Overrides
Interest/Performance
Interest/Performance
Interest/Physics
Interest/Pipeline, Assets & I/O
Interest/Platforms, Builds, Tests & Devices
Interest/Python API
Interest/Render & Cycles
Interest/Render Pipeline
Interest/Sculpt, Paint & Texture
Interest/Text Editor
Interest/Translations
Interest/Triaging
Interest/Undo
Interest/USD
Interest/User Interface
Interest/UV Editing
Interest/VFX & Video
Interest/Video Sequencer
Interest/Virtual Reality
legacy module/Animation & Rigging
legacy module/Core
legacy module/Development Management
legacy module/Eevee & Viewport
legacy module/Grease Pencil
legacy module/Modeling
legacy module/Nodes & Physics
legacy module/Pipeline, Assets & IO
legacy module/Platforms, Builds, Tests & Devices
legacy module/Python API
legacy module/Rendering & Cycles
legacy module/Sculpt, Paint & Texture
legacy module/Triaging
legacy module/User Interface
legacy module/VFX & Video
legacy project/1.0.0-beta.2
legacy project/Asset Browser (Archived)
legacy project/BF Blender: 2.8
legacy project/BF Blender: After Release
legacy project/BF Blender: Next
legacy project/BF Blender: Regressions
legacy project/BF Blender: Unconfirmed
legacy project/Blender 2.70
legacy project/Code Quest
legacy project/Datablocks and Libraries
legacy project/Eevee
legacy project/Game Animation
legacy project/Game Audio
legacy project/Game Data Conversion
legacy project/Game Engine
legacy project/Game Logic
legacy project/Game Physics
legacy project/Game Python
legacy project/Game Rendering
legacy project/Game UI
legacy project/GPU / Viewport
legacy project/GSoC
legacy project/Infrastructure: Websites
legacy project/LibOverrides - Usability and UX
legacy project/Milestone 1: Basic, Local Asset Browser
legacy project/Nodes
legacy project/OpenGL Error
legacy project/Papercut
legacy project/Pose Library Basics
legacy project/Retrospective
legacy project/Tracker Curfew
legacy project/Wintab High Frequency
Meta/Good First Issue
Meta/Papercut
migration/requires-manual-verification
Module › Animation & Rigging
Module › Core
Module › Development Management
Module › Eevee & Viewport
Module › Grease Pencil
Module › Modeling
Module › Nodes & Physics
Module › Pipeline, Assets & IO
Module › Platforms, Builds, Tests & Devices
Module › Python API
Module › Render & Cycles
Module › Sculpt, Paint & Texture
Module › Triaging
Module › User Interface
Module › VFX & Video
Platform/FreeBSD
Platform/Linux
Platform/macOS
Platform/Windows
Priority › High
Priority › Low
Priority › Normal
Priority › Unbreak Now!
Status › Archived
Status › Confirmed
Status › Duplicate
Status › Needs Information from Developers
Status › Needs Information from User
Status › Needs Triage
Status › Resolved
Type › Bug
Type › Design
Type › Known Issue
Type › Patch
Type › Report
Type › To Do
No Milestone
No project
No Assignees
15 Participants
Notifications
Due Date

No due date set.

Dependencies

No dependencies set.

Reference: blender/blender#94370
Loading…
There is no content yet.