Improving the usability of Unity's keyframe animation workflow

A proposal on how to improve the usability of Unity's keyframe animation workflow

Welcome to Animation hell!
I've been been working with Unity for two years now and used it for a number of big commercial projects. I slowly learned to appreciate its unique capabilities that are hidden behind an unpretentious but well thought through user interface.

But no matter how much time I spent with the animation-window – it is just horrible. Most people hate – or completely avoid – using Unity for editing animations. I often prefer writing some c# code instead of setting two keyframes. This "unusability" results from a combination of a number of failures, which this proposal tries to address:

• It is very hard to reverse engineer what attributes are animated.
• The Animation-View shows an incorrect and hard to read representation of the animated properties.
• It is impossible to review animations without accidentally changing animations or animating new properties.
• It is not self-evident how the keyframe animation system is supposed to be used.
• Animations break when objects get renamed or restructured. This is a horrible and should be fixed as soon as possible.

Motivation
I have a background in Maya and After Effects. And I have a passion for animation and syncing: in my spare-time I am an avid member of the demo-scene and directed and animated a number of award-winning animations. I also implemented the animation framework and interface of tooll.io . So I know a thing or two about timelines and keyframe animation.

Now, I am "stuck" with Unity. Although I learned to appreciate many aspects of its user interface, the animation features need to improve. My hope is that some manager or developer at Unity reads these suggestions and uses them to fix one of the worst aspects of their product.

The scope of this document

We're not talking about fonts and colors
Although I slightly touch some visual design aspects, this proposal is not about fonts, fonts-sizes, colors or other aspects of visual design. Although I personally find Unity's font size rather small and its typography leaving much room for improvement, these aspects rarely impact my workflow or performance. With one exception: the dimming of disabled objects in the Hierarchy View should be improved.

Also the distinction between dark- and light theme does not have an impact on the usability. All proposed changes would work equally well within the dark theme.

It's not about character animation
I am not a character animator and the few experiences I had with the Mecanim system were quiet pleasant. In that sense this document is more about creating new animations (e.g. for UI-elements, particle effects, etc) inside Unity than mixing animation clips for characters.

The suggestions should be feasible
I am aware of Unity's impressive capabilities to customize its user interface. That's why I refrain from too many changes on basic UI components. I try to limit my suggestions to clear and easy to implement features, using my background in user interface programming to maximize the impact of few lines of code.


Before / After
The following screen shows an typical example of an Unity window within animation mode. In the following overpaint I touched all aspect of the user-interface, thinking about which changes to the UI would have the maximum impact on the animation workflow. (High resolution versions of the screens are attached below).



Following is a detailed description of my proposed changes an the reasoning behind them.

Clarifying the animation state

The status quo:


Reflecting the "animation-mode" through colored the game-play controls is problematic because...

• It implies an effect on the starting of the game (which it has not).
• It implies that the animation-state could be disabled with these controls.
• It implies that creating animation clips is somehow related to game playback (which isn't the case).
• It suggests that the "Animation-play-button" (in the Animation View) and the "Play Game" button (which use the same icons and colors) are related. Which they are not.
• I guess the idea behind this design is that of a warning-sign showing that all modifications to properties will be added to the animation clip. Sadly, it's too far away from either the Inspector or the Scene view. So people frequently forget that animation-mode is active and fall into that trap.
  
• I personally find the red color too intimidating because it suggests some form of error. I will use a red orange for all animated properties within this document.
  

Proposal 1 - Add a new animation-state button




This will...

• Allow to exit the animation mode more easily.
• Better separate game playback controls from animation
  

Proposal 2 – Clarify what can be animated in the hierarchy

1. We highlight the GameObject with the active Animator and the sub-region of the scene-graph potentially affected by its animation.
2. Indicator that this object has an "Animator"-component.
3. A filled keyframe indicates animated properties on this object.
4. An outline keyframe indicates animated properties within children of this object.
5. Gray background visualizes the selected object (shown in inspector).
6. As in (4) this indicates that animated properties are somewhere within the children. Clicking the icon would open the tree to reveal the animated objects and select them.
7. While in "animation mode" working with prefabs is limited. So it might be feasible to remove the blue font-colors for prefabs in this state.

Disable auto keyframing (as default)
"Auto-Keyframing" (automatically adding all modified properties to an animation clip) should be avoided, because...

• No other mainstream animation tool does this (at least I didn't find any).
• It is potentially harmful in that users accidentally add animated properties (e.g. if they toggle "active" to find the correct object).
• It's cumbersome to intentionally animate properties and setting a keyframe with the current value: in the Inspector you have to change a value and then set its original value again.
  

Proposal - Add button to input-field



We suggest a dedicated control on mouse over. Additionally, this functionality could also be added to the already existing context-menu for properties (currently only offering "Revert to prefab").

How this proposal can be applied to other inputs like checkboxes, drop-down-lists, etc. remains to be clarified.


Improving the Animation View

1. The list of animation clips is not sorted (with makes working with many clips a painful experience)
2. This space could be used to clarify which Object we are actually animating.
3. The indentation gives a completely incorrect impression of the structure as it suggests that "stroke-down" is a child of "focus". Also the sort order of the properties does not reflect the order inside the hierarchy. To find an animated property in this list is very hard indeed.
4. Mixing sample units and time-scale in seconds is confusing and unnecessary.
5. Adjusting the length of the animation can be better achieved within the timeline component.
6. Again, mixing samples and seconds is weird, esp. when using 30 fps animations it requires converting numbers in your head.
7. I find the format and alignment of these labels hard to read.
8. On macOS with retina-display the active time marker becomes too thin.
9. The lock-indicator is too far away and hard to read.
10. The background-colors seems arbitrary (zebra-on the left and some kind of object/property on the right side).
11. This icon can be clarified.
12. Having two scrollbars seems like a waste of space and makes the view harder to read.
13. Scaling the timeline with the side-handles is actually a nice feature that is really hard to discover.
    

Suggested redesign

1. Use the space to indicate the GameObject with Animator-component.
2. List the complete path of the animated properties, use ellipsis if not enough space.
3. Use consistent background colors
4. Highlight broken animation links as errors.
5. This function (which needs a better icon) would enable the "auto keyframing". See above.
6. Clarified meaning of icon. (Also the tool tip should name the keyboard shortcuts for these functions.)
7. Lock-icon becomes part of pannel-tab and clearly indicates if locked.
8. Current time shown in a readable timestamp format. Dragging left/right could scrub through time, click could enter edit-mode (similar to Adobe After Effects). The format of this number needs to be customizable and many animators prefer frame-numbers.
9. Improve alignment of Labels and markers (if you need a Timeline component that does a slightly better job with labels, you might want to check out the tooll.io source code . It's MIT license.)
10. I personally think, that placing the drag-handles beside the content is too imprecise. I would prefer a placement with the time lime. This is a subjective matter of taste.
11. Scrubbing the timeline is frequent, so we should give it more height.
12. see (3)
13. Clarify the functionality by using "keyframe checkboxes".
14. I personally find "arrow-keys" in scrollbars to be awkward, imprecise and generally hard to hit and cumbersome to use. So I left them out.

After thoughts
Obviously I had a lot of fun doing this sketch. I like interaction design (Even in my day to day job) and I learned a lot looking at all UI elements and thinking about their purpose. If this post motivates some people of Unity to invest just a little bit time on improving the animation features, then this exercise was time well spent.

I am curious to hear your thoughts and feedback. Please leave a comment below or on twitter: @pixtur


ps. Please apologize my poor English.

 

Oh dear, I am constantly signed out of the forums (with tons of java-script errors in the console). No matter which browser I am using – I cannot fix the broken links in the original post. Perfect timing, indeed. I'm really sorry for the missing images. But well, "Welcome to Unity", I guess.

This will teach you criticizing!

 

It looks like this forum-software is in even worse shape than the animation view. ;-)

I am not sure if the servers are compromised, all admins are on vacation, or I just don't get it.

I tried for 60 minutes to edit, fix, or even delete this thread. With 3 different browsers, with or without AdBlock, ad-tracking, or 3rd-party cookies enabled. In the process I got so many different javascript errors, broken links, API-breaks, plain JSON-responses even a request from Firefox to use Flash (WTF?!). Does Unity actually has a Q&A team? I keep wondering. Do I have to use Internet Explorer to use this forum?

I'm giving up for now.

Sorry for rambling, but this frustrating.

 

I am also having issues doing anything on your thread. I was able to like other threads, but something about yours is messing things up. First time I have seen this happen.

I disabled javascript in google chrome and was able to like your post. Lets see if this post goes through =).
Hopefully someone can look into this. Ill tag @hippocoder who is a mod on the forums.

Edit- woo, seems my post went through. Hopefully all my previous attempts dont just come flying in later ^^.
For anyone who wants to post here, but keeps getting logged out, try disabling javascript!

Maybe this is a blessing. Such a forum bug might get the attention of the people at unity, which would let them see your post ^_~

Edit- It seems disabling Flash in chrome seems to fix it as well, so maybe its just Flash.

 

Hi HiddenMonk,

Thanks for your comment. Your suggestion to switch off JavaScript indeed did the trick!

 

Actually, now it seems I am no longer getting the issues even with javascript and flash enabled

I did confirm before that turning javascript off and then it back on returned the issues, but after turning flash off and back on and javascript on, the issues didnt come back.

Do you still have the issue if you enable javascript again?

Edit - Actually, you probably removed the bug when you edited your original post just now. So I guess we will never know the issue XD

I see all your images now.

 

Hi Pixi2!

Thanks for this thread and your examples for improvement; a very interesting read! (And I agree with you on a number of your points!)

I have forwarded this thread to our UX and Product Management teams as feedback. Also, I have raised the forum logging-in-and-out issue (which I am experiencing aswell so I doubt its an issue locally to you) with our Community Team for them to look into.

 

Don't hold your breath. This issue is almost as old as Unity's Terrain system.

 

Don't be silly.

Nothing is as old as Unity's Terrain system.

 

I will hold my breath; Web Team are going to look into it. And I don't remember the logging-in-and-out behaviour being a long-term issue!

 

#1 improvement that could be incorporated for the benefit of all - who use the animation window.

 

Thanks @pixi2 for this post. As a member of the animation team, I salute you, this kind of feedbacks is pure gold for us. Thanks a lot!

As you might know, we are already working on improving the animation window, and we agree with quite a few points you've mentioned. You've given us a lot of insight that we will gladly use to improve even more our animation workflow.

 

Some great points and nicely articulate!

I spend a lot of time with animations/timeline, and I have basically become used to it. There is definitely room to improve, and you have provided some great suggestions.

Though minor, I would like to add that it would be nice to see some visual feedback in the nodes as to what the tangent type is. It is obvious in curves view, but when editing nodes, sometimes removing or changing a node, the tangent will yield unexpected results. Again, minor, but would be nice.

Also, the ability either through code or editor to add deeper hotkey bindings.

 

Some users are affected by it, it gets fixed, and then an entirely different selection of users become affected by it.

 

https://forum.unity3d.com/threads/make-it-so-i-dont-have-to-hit-the-login.432965/

I log in about a dozen times a day.

 

Hello.

@RomainFailliot, @Andy-Touch: Thanks for your kind words. It's always a nice feeling to contribute something.

Another feature that would greatly improve my workflow is to update the current time-marker and time-value during game playback. The currently played animation clip should be shown accordingly (I don't know what to do about the fringe case, when two clips are blended).

@theANMATOR2b: Totally agree. My personal low hanging fruit would be to sort the animation-clip-list alphanumerically (ignoring cases).

 

The log-in issues are due to our switching to a new user accounts back-end system for logging in (id.unity.com) back in Spring/Summer last year. Our team working with the accounts system are still trying to reproduce the issue locally in order to fix it, but they haven't found the cause yet. I have the same issue, where sometimes while I'm in the middle of a reply it logs me out so it doesn't save the entire draft (I've learned to always copy and paste the entire message I'm writing before proceeding.)

 

Excellent post! I never touch the animation window myself because of how unwieldy it is, to see it brought up to 2017 UX would be amazing.

 

Fantastic post!

- droid/hjb

 

Spoiler: About log out bug me and pixi2 had

Keep in mind that the logging in and out issue me and pixi2 were experiencing is not related to the normal login issue where after x amount of time of inactivity or something youll be logged out.
Something in his original post caused some kind of bug only in this thread where if you tried to like, reply, or really anything, it would not work, and that was due to you being forced logged out or something. I couldnt even click on OPs avatar image.
Once the OP disabled javascript and edited his original post to fix the images that were not displaying, the bug was fixed.
If you cant see his original post before his edit, you might not be able to reproduce the bug. Should be a rare bug though, id assume, so not that big of a deal.

He also made a post about it here https://forum.unity3d.com/threads/failing-to-edit-a-post.456037/
I dont want to derail the thread off topic about it, but just wanted to make it clear that this log out bug was not the log out bug we all know and love today =)

I think it would be really nice to be able to edit an animationclip, without needing to click on a gameobject with an animation component that has said animationclip on it.

 

Awww, I saw the first screenshot and thought it was from Unity 5.6 or something. I've only ever used the dark interface and I thought this was what the light one looked like now and I was immediately going to switch, until I saw that it was just a mockup you made.

Great work and motivating to see such a warm official response to it.

 

Being able to input the length of the animation, and having the timeline scale to match would be awesome too. It's annoying doing the mousewheel dance to get enough room to input your animation.

 

If you don't consider a couple of years long term, then no, it's not long term.

I do exactly the same. Before hitting post, I always hit select all and copy.

I am logged out of the site many times a day, the editor as well. I have just accepted it as the norm.

 

@oidberg: WTF, haujobb is using unity!? This news goes straight to pouet!
@TwiiK: haha, now that is a compliment.

@AFrisby: That's an excellent point. I would love to pan time by dragging the TimelineArea with the right mouse button left/right and zoom in/out when dragging up/down. Ableton Live does a wonderful job with that interaction.

 

@AFrisby @pixi2 I'm not sure I understand your points. You can focus on the entire animation or just a selection with the 'F' key. Also Option+Command+LeftMouse (I guess Command is replaced by Control in Windows) allows to pan in the curve window.

But as I said, maybe I didn't understand exactly your points

 

There used to be an issue a odd issue where you couldn't scroll beyond the last key. If you wanted to place an "end" key very late in the timeline, you would have scroll bit by bit (or drag small bits at a time) to get farther down the timeline. That may be what @pixi2 is referring to? I don't remember when it changed, but it used to be pain.

 

The issue started somewhere around the time of lithium disaster. It was not present before that.

 

On topic, I always have trouble finding the right animation bits to get started. It's a weird workflow to create a brand new animation in the editor. It's further confused by a bunch of legacy components still hanging around.

Once I have one I can get by fine. But getting that far can be a pain.

 

In the ui button, there is an option to use animation for the different states. When you select that it will create the animator, attach it, generate four anim clips, hook them up and even nest them in the controller. Literally a couple of clicks and you are ready to go. I would love for this to leveraged elsewhere. It could just be a button that pops up a wizard that is displayed on a animator when a controller is empty. I totally agree, the setup is more steps than it needs to be, especially when there already exists a nicer flow in the editor.

 

Well, there is only one Legacy component for the Animation system (Called 'Animation') and that is kept to support backwards compatibility with users/projects that still use the old system.

Its not that weird of a workflow; mostly creating Assets then placing them where they need to be. The most simplified workflow:
- Create an AnimationController Asset (This is your State Machine for the object; that controls which animation clip plays when)
- Assign it to a GameObject's Animator Component
- Open the Animator Window
- Drag and drop in Animation Clips (Made in Unity or imported from an animated model)
- Open Animation Window
- Animate!
- Hook up transitions/parameters in Animator Window
- Create Script to handle what transition plays when (EX: Push SpaceBar and the Player Jumps)

 

This last step is not needed -

 

Perhaps it's just lack of practice. But it doesn't seem to flow as smoothly go me as the rest of Unity's workflow. I frequently end up with an Animation window that refuses to show me anything useful.

 

It is needed if you make something that doesn't have input that relies on the UI/Event System. Like a third-person character controller where Keyboard Keys and GamePad are used to control the input (Spacebar to Jump, etc).

I even say in that post you quoted 'if your input is Event Trigger based'!

 

TIL: You can do this.

May I suggest that's a feature that shouldn't require a obscure set of modifier keys?

I've been using Unity a long while and I didn't know this. My current solution was just using the mousewheel to zoom out until the timeline expanded, then zooming back in to get to a "fresh" set of animation track area; because that seemed like the only way to do it. Adding the ability to click somewhere and numerically input the timeline length would probably do the job I think (maybe show the animation duration and then make that turn into a input field when clicked?).

 

Yeh when you click on a .controller.. and you see in the [Animation] window a bunch of keyframes for a thing.. but ohh yeah...now to go find where a thing is actually being effing used so I can actually visually see playback changes...I'm sure that couldn't be made alot easier with better interfaces or ways to manage things like that better.

or how to disable/mute a key and play/scrub the animation without that particular key being played back..oh delete it.. gj

even small things like when an animation(or even the editor itself) is playing.. shouldn't the play icon should change to a stop icon graphic?... nah actually I don't really care about that one.

tbh I really don't use the animation stuff in unity, haven't done much so far anyway, don't look forward to using it either.. where I have used it so far is in ugui, but that's also got plenty of problems and shortfalls for another topic I guess... though my first encounter with [Animator] tab was instantly why can I not zoom out to see more.

I'm sure given more time spent in these areas one could come up with countless more things that could be improved on, it's just another one of those things..

However I will say that Unity's ui graphics are still pretty good I like the both the light and dark themes, good compact design and decent use of gradients.. I mean its based off the Snow leopard desktop gui to me seems like it? I never used Mac never want too either, but I can appreciate some good gui design... sure some things might not scale with high density screens or look more pixaleted scaled up. Gotta be kinda silly to buy one of those and not get the screen dimensions right for the distance at which you sit it infront of it, so that you can actually utilize the screen space and not require scaled up dpi to see things better.. that's why most gui's have all gone to S*** to cater for this audience with subpar gui's made of out of rather lame vector graphics and flat coloring in most cases...its ugly, and I kinda imagine Unity messing it up should they ever do an actual gui update.. honestly little faith here

I'm sure Unity could improve those things without tossing out what is still a pretty decent GUI. It's just lacking in improving the UX and overall functionality some more.

 

It always amazes me to see how extremely personal tastes can differ.

 

@Christine_R thanks for your great and detailed answer. I am super excited to learn that you are already working on improving the animation workflow. Please don't hesitate to contact me (e.g. via twitter) if you need early feedback on designs / prototypes / beta-versions of if you want to use me for usability-tests.

I don't mind signing NDAs either.

 

Six years later, we could use another round of Animation Window improvements and bug fixes.

 

When did we get the first round?