Design: Animation Editors UI Redesign #100051

New Issue

Kevin C. Burke · 2022-07-29T06:59:28+02:00

Kevin C. Burke commented

2022-07-29 06:59:28 +02:00

Problem
Several proposals have been made to improve the usability of the Animation Editors' (Graph Editor, Nonlinear Animation, & Dope Sheet) Headers and Menus:

The main issues outlined by these proposals are:

“View” Menu cluttered with Overlay checkboxes rather than Overlay popover as in 3D View
2D Cursor, Frame Snapping, & Proportional Editing button right-aligned location does not match other Editors. Frame Snapping full-text Enum is too wide and inconsistent with other icon-only Popovers
Frame Snapping menu only allows for one snapping option as opposed to multiple-option snapping in 3D View
Graph Editor “View” Panel has one utility/poor usage
There is a need for a separate a Timeline Editor with Graph Editor, NLA, & Dope Sheet (e.g. changing Playback options, Keying Set) however the Timeline has many redundant options to Dope Sheet and is only needed for its Header.
Full-text "Keying" dropdown is wide, inconsistent with icon-only popovers, and separate from Auto-keying popover

This design task addresses the issues brought up in these proposals and breaks them into subtasks.

Proposed Solutions

Move Markers, Curve Extrapolation, Only Selected Curves Keyframes, Show Handles, Only Selected Keyframes Handles and 2D Cursor from View to a new Overlays Menu
Center Pivot, Snapping and Proportional Editing Header buttons. Change Snapping to icon-only popover.
Create UI allowing for implementation of multi-snapping options
Move Normalize Button from Graph Editor Header to View Panel. Rename "View" Panel to "Graph".
Add Playback & Frame Range Controls to Timeline Header
Add Keying Set Controls to icon only popover near Playback Controls

Stretch Goals

Add fixed height mini-timeline element to Playback & Range footer

Implementation Patches

**Problem** Several proposals have been made to improve the usability of the Animation Editors' (Graph Editor, Nonlinear Animation, & Dope Sheet) Headers and Menus: - [Redesign Graph editor Header and Menus to 2.80 Blender UI standards ](https://developer.blender.org/T89069) - [Design: More frame snapping options ](https://developer.blender.org/T91973) The main issues outlined by these proposals are: - “View” Menu cluttered with Overlay checkboxes rather than Overlay popover as in 3D View - 2D Cursor, Frame Snapping, & Proportional Editing button right-aligned location does not match other Editors. Frame Snapping full-text Enum is too wide and inconsistent with other icon-only Popovers - Frame Snapping menu only allows for one snapping option as opposed to multiple-option snapping in 3D View - Graph Editor “View” Panel has one utility/poor usage - There is a need for a separate a Timeline Editor with Graph Editor, NLA, & Dope Sheet (e.g. changing Playback options, Keying Set) however the Timeline has many redundant options to Dope Sheet and is only needed for its Header. - Full-text "Keying" dropdown is wide, inconsistent with icon-only popovers, and separate from Auto-keying popover # Full-text "Playback" dropdown is wide, inconsistent with icon-only popovers, and separate from Playback controls This design task addresses the issues brought up in these proposals and breaks them into subtasks. **Proposed Solutions** - Move Markers, Curve Extrapolation, Only Selected Curves Keyframes, Show Handles, Only Selected Keyframes Handles and 2D Cursor from View to a new Overlays Menu - Center Pivot, Snapping and Proportional Editing Header buttons. Change Snapping to icon-only popover. - Create UI allowing for implementation of multi-snapping options - Move Normalize Button from Graph Editor Header to View Panel. Rename "View" Panel to "Graph". - Add Playback & Frame Range Controls to Timeline Header - Add Keying Set Controls to icon only popover near Playback Controls # Add Playback options to popover by Playback Controls ![Animation_Editor_Redesign_02.jpg](https://archive.blender.org/developer/F13324880/Animation_Editor_Redesign_02.jpg) **Stretch Goals** - Add fixed height mini-timeline element to Playback & Range footer **Implementation Patches** - [Playback, Keying Set, and Frame Range controls update](https://developer.blender.org/D15626) - [Center Pivot, Snap, and Proportional Editing in Animation Editor Headers ](https://developer.blender.org/D15631)

❤️ 1

Kevin C. Burke commented

2022-07-29 06:59:28 +02:00

Added subscriber: @KevinCBurke

RedMser commented

2022-07-29 12:36:50 +02:00

Added subscriber: @RedMser

Andy Cuccaro commented

2022-07-29 14:37:13 +02:00

Added subscriber: @AndyCuccaro

Adam Earle commented

2022-07-29 15:13:54 +02:00

Added subscriber: @AdamEarle

Adam Earle commented

2022-07-29 15:13:54 +02:00

Parts of the system that we are working on at the moment spills over into timeline controls. There are a few buttons in here that need to be added after our internal meeting this week.

These buttons largely had to do with the "media viewer" template Blender studio setup and how it could be tweaked to be a "reviewer" not just a viewer (Because that's what we really are doing). Along with a few other nobs and dials.

Basically, this means notes can travel with the blend file and people would be able to comment, do draw overs, and leave audio feedback.

Projects spend a lot of time in review. So it's good to have tools in software where you can quickly take notes or send a file across the web and get draw overs.

Here are our latest updates of the mockup. We are still thinking about the needs for real-time compositors, simulations, and character animators.

Parts of the system that we are working on at the moment spills over into timeline controls. There are a few buttons in here that need to be added after our internal meeting this week. These buttons largely had to do with the "media viewer" template Blender studio setup and how it could be tweaked to be a "reviewer" not just a viewer (Because that's what we really are doing). Along with a few other nobs and dials. Basically, this means notes can travel with the blend file and people would be able to comment, do draw overs, and leave audio feedback. Projects spend a lot of time in review. So it's good to have tools in software where you can quickly take notes or send a file across the web and get draw overs. Here are our latest updates of the mockup. We are still thinking about the needs for real-time compositors, simulations, and character animators. ![Edit Mode.jpg](https://archive.blender.org/developer/F13325383/Edit_Mode.jpg) ![Edit Mode Notes.jpg](https://archive.blender.org/developer/F13325387/Edit_Mode_Notes.jpg)

Luciano Muñoz Sessarego commented

2022-07-29 16:20:35 +02:00

Added subscriber: @LucianoMunoz

hamza.SMA commented

2022-07-29 20:52:28 +02:00

Added subscriber: @hamza-el-barmaki

Luciano Muñoz Sessarego commented

2022-08-01 18:18:21 +02:00

@KevinCBurke hey man, i'm really digging the proposed changes all across the UI, I think the floating playback/timeline buttons make a ton of sense considering they may be needed in several different contexts.
Moving the buttons you moved to the overlay panels works well, and unifying the snapping to something more consistent with what we see in 3d View, seems pretty darn good to me.

Great job

@AdamEarle also i'm liking where you're going with the annotation tool tuned up for review, super nice ideas in there

@KevinCBurke hey man, i'm really digging the proposed changes all across the UI, I think the floating playback/timeline buttons make a ton of sense considering they may be needed in several different contexts. Moving the buttons you moved to the overlay panels works well, and unifying the snapping to something more consistent with what we see in 3d View, seems pretty darn good to me. Great job @AdamEarle also i'm liking where you're going with the annotation tool tuned up for review, super nice ideas in there

Pablo Vazquez commented

2022-08-04 16:36:45 +02:00

Added subscribers: @JulianEisel, @pablovazquez

Pablo Vazquez commented

2022-08-04 16:36:45 +02:00

Hey, this isn't a properly written review, but since you're investing a lot of time already, we want to get this to you ASAP (before the animation meeting too). Review by me and @Severin.

Nice one!
Also good!
If it works, go ahead. Please remove icons until there are dedicated ones.
2D Cursor coordinates should be in its own panel, to match other editors such as 3D Viewport, VSE, Image Editors (use it as reference, rename Cursor X/Y to Location X/Y). The option to toggle the 2D Cursor should be in the Overlays popover only, not as a button. The checkbox in the panel title is a cool idea but if agreed it should be done to the other editors as well (all in a separate patch). The operators to snap/align can go there for now.
The footer element was initially designed to hold information such as stats in the Spreadsheet, file path in the Text Editor, or add-ons to do their own thing. Also, essentially duplicating an entire UI region for convenient access seems like weak design. We have that for the tool settings, and people often point that out as weird/weak - and they are right. On top of the overall weird impression it gives, it can be confusing and disorienting. There is a dedicated editor, plus shortcuts for fast (& hopefully convenient) access. Add-ons are always welcome to add more convenient ways to access functionality.
Sounds good.
Also sounds good. The only option that's not relevant to the Playback popover per se is Show Subframes, which belongs in the View menu.

Hey, this isn't a properly written review, but since you're investing a lot of time already, we want to get this to you ASAP (before the animation meeting too). Review by me and @Severin. 1. Nice one! 2. Also good! 3. If it works, go ahead. Please remove icons until there are dedicated ones. 4. 2D Cursor coordinates should be in its own panel, to match other editors such as 3D Viewport, VSE, Image Editors (use it as reference, rename Cursor X/Y to Location X/Y). The option to toggle the 2D Cursor should be in the Overlays popover only, not as a button. The checkbox in the panel title is a cool idea but if agreed it should be done to the other editors as well (all in a separate patch). The operators to snap/align can go there for now. 5. The footer element was initially designed to hold information such as stats in the Spreadsheet, file path in the Text Editor, or add-ons to do their own thing. Also, essentially duplicating an entire UI region for convenient access seems like weak design. We have that for the tool settings, and people often point that out as weird/weak - and they are right. On top of the overall weird impression it gives, it can be confusing and disorienting. There is a dedicated editor, plus shortcuts for fast (& hopefully convenient) access. Add-ons are always welcome to add more convenient ways to access functionality. 6. Sounds good. 7. Also sounds good. The only option that's not relevant to the Playback popover per se is Show Subframes, which belongs in the View menu.

Beorn Leonard commented

2022-08-04 18:36:04 +02:00

Added subscriber: @BeornLeonard

Beorn Leonard commented

2022-08-04 18:45:57 +02:00

For what it's worth, from the perspective of a long time Blender animator, these changes would be very welcome.

Kevin C. Burke commented

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

@JulianEisel & @pablovazquez ,

The design changes to the Playback & Frame Range controls have been removed from the footer and now are solely in the Timeline:
https://developer.blender.org/D15626

@JulianEisel & @pablovazquez , The design changes to the Playback & Frame Range controls have been removed from the footer and now are solely in the Timeline: https://developer.blender.org/D15626

Beorn Leonard commented

2022-08-05 05:41:17 +02:00

Well that's a genuine shame. This makes no sense to me.
@pablovazquez : "essentially duplicating an entire UI region for convenient access seems like weak design". It's to counter the already weak design of the timeline/dopesheet. Convenient access is a GOOD thing.
I guess I'll continue using my 12 year old addon which, clunky and ugly though it is, allows me to work much faster.
Thanks for trying, Kevin.

Well that's a genuine shame. This makes no sense to me. @pablovazquez : "essentially duplicating an entire UI region for convenient access seems like weak design". It's to counter the already weak design of the timeline/dopesheet. Convenient access is a GOOD thing. I guess I'll continue using my 12 year old addon which, clunky and ugly though it is, allows me to work much faster. Thanks for trying, Kevin.

Adam Earle commented

2022-08-05 07:09:54 +02:00

Hiya Handsome @pablovazquez,

1. Please explain
I think number 5 is not the main window footer of Blender, rather the area of the timelines. I might be wrong?

The footer element was initially designed to hold information such as stats in the Spreadsheet, file path in the Text Editor, or add-ons to do their own thing.

2. Please explain
Always appreciate what you have to say, could you elaborate more on "weak design". I kinda feel that the direction of this project is to remove the timeline from Blender

....... . Also, essentially duplicating an entire UI region for convenient access seems like weak design.

3. Please explain
I am not too sure what you are referring to here could you go into more detail, if that's ok? Perhaps you could make a small recording describing your thoughts? I think it would be really worthwhile.

....... . On top of the overall weird impression it gives, it can be confusing and disorienting. There is a dedicated editor, plus shortcuts for fast (& hopefully convenient) access. Add-ons are always welcome to add more convenient ways to access functionality.

Thanks

Hiya Handsome @pablovazquez, **1. Please explain** I think number 5 is not the main window footer of Blender, rather the area of the timeline**s**. I might be wrong? >> 5. The footer element was initially designed to hold information such as stats in the Spreadsheet, file path in the Text Editor, or add-ons to do their own thing. **2. Please explain** Always appreciate what you have to say, could you elaborate more on **"weak design"**. I kinda feel that the direction of this project is to remove the timeline from Blender >>5. ....... . Also, essentially duplicating an entire UI region for convenient access seems like weak design. **3. Please explain** I am not too sure what you are referring to here could you go into more detail, if that's ok? Perhaps you could make a small recording describing your thoughts? I think it would be really worthwhile. >> 5. ....... . On top of the overall weird impression it gives, it can be confusing and disorienting. There is a dedicated editor, plus shortcuts for fast (& hopefully convenient) access. Add-ons are always welcome to add more convenient ways to access functionality. Thanks

Adam Earle commented

2022-08-05 07:22:03 +02:00

This is another option to access the timeline controls

This is another option to access the timeline controls ![image.png](https://archive.blender.org/developer/F13337183/image.png)

Adam Earle commented

2022-08-05 07:26:30 +02:00

Added subscriber: @pablo-33

Sybren A. Stüvel commented

2022-08-05 10:44:23 +02:00

Added subscriber: @dr.sybren

Sybren A. Stüvel commented

2022-08-05 11:25:12 +02:00

Thanks for the review @pablovazquez . Most of your feedback is clear & actionable, so I won't reply to those points.

In #100051#1400027, @pablovazquez wrote:
4. [...] The checkbox in the panel title is a cool idea but if agreed it should be done to the other editors as well (all in a separate patch).

I don't see which checkbox in panel title you mean in F13324880. Am I missing something?

The footer element was initially designed to hold information such as stats in the Spreadsheet, file path in the Text Editor, or add-ons to do their own thing.

This raises some questions:

Is this documented somewhere? If so, please provide a link.
Does this mean that the footer element is off limits for other uses, even when there is a clear benefit to & desire from the module that owns those editors?

Also, essentially duplicating an entire UI region for convenient access seems like weak design. We have that for the tool settings, and people often point that out as weird/weak - and they are right. On top of the overall weird impression it gives, it can be confusing and disorienting. There is a dedicated editor, plus shortcuts for fast (& hopefully convenient) access. Add-ons are always welcome to add more convenient ways to access functionality.

IMO people shouldn't have to install extra add-ons just to work around long-standing design issues of Blender.

Animators have complained for years about the weird overlaps between the Dopesheet and Timeline editors. Because of these overlaps the Timeline is basically useless, except that it's the only place that gives you certain controls. So, you're forced to always have yet another editor in your view. Since it cannot be easily toggled, if you need quick access to it, you need to split the current editor, switch it over to the Timeline, do what you need to do, then merge the split editors back together again. Also not everything exposed in the Timeline editor is available as shortcuts. The result is that animators face a clunky interface and basically a bad user experience.

I don't see how exposing time-related controls in time-related editors is "weird", "confusing", or "disorienting". Especially in the light of the current issues with the animation UX, which could be described in exactly the same words.

If the duplication of the UI region is a blocking issue, I would propose:

Move those UI elements from the Timeline header into the footer, so it's consistent with the other animation editors.
Make the Timeline drawing more dynamic, so that when there is not enough height to show both the editor and the footer, they are collapsed into one handy row.

This will make the UI consistent, and still allows for a thin Timeline editor to sit wherever users want.

Thanks for the review @pablovazquez . Most of your feedback is clear & actionable, so I won't reply to those points. > In #100051#1400027, @pablovazquez wrote: > 4. [...] The checkbox in the panel title is a cool idea but if agreed it should be done to the other editors as well (all in a separate patch). I don't see which checkbox in panel title you mean in [F13324880](https://archive.blender.org/developer/F13324880/Animation_Editor_Redesign_02.jpg). Am I missing something? > 5. The footer element was initially designed to hold information such as stats in the Spreadsheet, file path in the Text Editor, or add-ons to do their own thing. This raises some questions: - Is this documented somewhere? If so, please provide a link. - Does this mean that the footer element is off limits for other uses, even when there is a clear benefit to & desire from the module that owns those editors? > Also, essentially duplicating an entire UI region for convenient access seems like weak design. We have that for the tool settings, and people often point that out as weird/weak - and they are right. On top of the overall weird impression it gives, it can be confusing and disorienting. There is a dedicated editor, plus shortcuts for fast (& hopefully convenient) access. Add-ons are always welcome to add more convenient ways to access functionality. IMO people shouldn't have to install extra add-ons just to work around long-standing design issues of Blender. Animators have complained for years about the weird overlaps between the Dopesheet and Timeline editors. Because of these overlaps the Timeline is basically useless, except that it's the only place that gives you certain controls. So, you're forced to always have yet another editor in your view. Since it cannot be easily toggled, if you need quick access to it, you need to split the current editor, switch it over to the Timeline, do what you need to do, then merge the split editors back together again. Also not everything exposed in the Timeline editor is available as shortcuts. The result is that animators face a clunky interface and basically a bad user experience. I don't see how exposing time-related controls in time-related editors is "weird", "confusing", or "disorienting". Especially in the light of the current issues with the animation UX, which could be described in exactly the same words. If the duplication of the UI region is a blocking issue, I would propose: - Move those UI elements from the Timeline header into the footer, so it's consistent with the other animation editors. - Make the Timeline drawing more dynamic, so that when there is not enough height to show both the editor and the footer, they are collapsed into one handy row. This will make the UI consistent, and still allows for a thin Timeline editor to sit wherever users want.

Fani Pandi/ Graphic designer commented

2022-08-24 14:16:21 +02:00

Added subscriber: @ArtisticBee

Trung Phạm commented

2022-09-05 18:23:46 +02:00

Added subscriber: @zNight

johan tri handoyo commented

2022-09-06 00:36:54 +02:00

Added subscriber: @JohanTriHandoyo

Rick Astley commented

2022-09-16 01:30:19 +02:00

Added subscriber: @mrbimax

ManBlender commented

2022-11-25 18:33:38 +01:00

Added subscriber: @ManBlender

ManBlender commented

2022-11-25 18:33:38 +01:00

Regarding point 3, I think that should exist icon, and only combolist with icon if no place on belt or if in options "label next to icon".
https://blender.community/c/rightclickselect/rmME/?sorting=hot

Regarding point 3, I think that should exist icon, and only combolist with icon if no place on belt or if in options "label next to icon". https://blender.community/c/rightclickselect/rmME/?sorting=hot

Philipp Oeser removed the

Download

What's New

Blender Studio

Manual

Developers Blog

Documentation

Benchmark

Blender Conference

Development Fund

One-time Donations

Design: Animation Editors UI Redesign #100051

Full-text "Playback" dropdown is wide, inconsistent with icon-only popovers, and separate from Playback controls

Add Playback options to popover by Playback Controls