The design of a translate gizmo
I love gizmos. We use them every single day in our 3D tools, and I would wager to say most clicks happen on those gizmos as we move, rotate, scale, and manipulate our objects in space. There are a lot of things you may not know that gizmos do, and I gave a talk about what Translate Gizmos can do at the the 2018 Game UX Summit in Vancouver, by showing a specific Tool UX design problem, and how I resolved it.
Below is a video, and below that is the design problem in text, so you can decide for yourself whether to watch or read.
The problem space
It all started when I was walking around the office at Io-Interactive, in Copenhagen, and noticed that users often had to move their cameras around to move an object in the right direction. Sometimes it can be impossible to grab the right gizmo arrow from your current perspective. It is annoying! Especially if it happens many times during any working day. It is not a blocker, but a time and mental energy sink, even if subconscious.
To solve it, I first researched whether this was a previously solved problem. Sometimes you can grab a solution someone else has already found, or learn from a solution that is close to what you need. Always check what other tools are doing! I have to remind myself of that too sometimes, as it is very easy to think of solutions quickly, but that does not mean any of those are any good, or have not been tried before. You also want to make sure you are not removing Chesterton’s Fence, for example.
So, back in 2018 when I did this research, I explored Unreal, Unity, Maya, 3ds Max, Blender, and CryEngine. What kind of gizmo features do they have? What do they do?
Well, for one, they all have X, Y, and Z arrows. Makes sense.
This may seem obvious to check up on, but I assure you we will come to surprises very quickly. Because next I checked out whether all apps have 2D axis planes, and sure they all do nowadays:
But back in 2018 that was not the case. Blender did not have them! Instead you had to hold shift, and then press the axis that you do not want to use, and it moved the object over two axes. Blender did a lot of strange things in the past, and I am glad they have moved to be more easier to use over time.
Some gizmos also have some kind of 'Center' to grab, that allows you to move an object relative to the camera in 2D. Honestly I have not ever seen this be useful except for when folks are working on cinematics with a particular viewpoint, where you may want to move an object in that space. Even then though, it may cause an object to float or collide with an other object from any other angle, so for videogame development I have not seen this be very useful. Here it is in Unreal:
Though again there is an odd one out here who does not show this center point by default: Unity. Instead you have to press Shift to see it, and then you can grab the center point. Considering I rarely see center point translation used anyway, I like this decision, but I am curious if anyone else feels different about it:
Resizing the gizmo is something only Maya, 3ds Max, Blender, and CryEngine allowed. It is neat! It does not really solve the problem we started out with though, as when you it bigger it will still overlap at times. I really like this feature from an accessibility standpoint though: Making things that you need to touch larger is great for those who may have trouble easily clicking on something small. Here it is in Maya:
In the case of Maya and Blender I even found options to re-size specific parts of the gizmo. Pretty neat! I really like this for accessibility purposes:
One thing that I found really neat in Unreal was that you can keep the camera relative to the object while dragging it by holding shift! It looks so nice and smooth. Very useful if you have to place many objects over small distances, and don't want to have to also manually move the camera every time:
And of course duplicate drag, a crucial gizmo feature. If you have to place many objects, in a short amount of distance, this will save folks a lot of time. Considering we will all be placing boxes, barrels and vases in videogames until the end of time, this will always be a useful feature. Unreal, Maya, and 3dsMax allowed this at that time, but back in 2018 this was not in Unity, Blender, and CryEngine. Interesting, considering how useful it is!
One thing only 3dsMax allowed was 'per-object gizmos'. I was unsure about why this existed.
But then I showed it to an animator, and he mentioned it was great to see all local rotations of selected bones. That makes sense! It is good idea to check up with just a few folks from different teams in case something is a big issue. It takes a second of their time, but can save hours and hours of trouble or reimplementing a design. Here it is in 3ds Max:
Axis locking, which Maya and Blender allowed, was this fast way of snapping something relative to something else, but on only one axis. This is nice for aligning objects quickly to other objects, even if they are not on a specific grid. Super useful if you have clutter all over the place, or are working at strange angles, and still need to align something anyway. Here in Maya:
Something else lovely about Maya was what I called 'Gestured Movement'. You hold shift and the middle mouse button, and then drag. It infers the direction of the drag onto the object, and moves it! This allows you to also drag objects off frame, and into frame. It is honestly really cool, as it almost removes the need of a visual gizmo at all.
Such an incredibly neat feature, but it does not resolve the issue we started off with, as when trying to infer when two axes are pointing the same way, it will still misinterpret sometimes.
Blender did this cool thing where you got an infinite axis line when dragging. That way, you can see where the object is going to go, even on a long distance.
'Precision Mode' was this other Blender thing I liked: If you drag something and then hold shift while dragging, it makes the movement more gentle and precise. This way you don't have to move your mouse in a pixel perfect way at short distances! I wish more editors had this, as I can think of thousands of times where I had to move somethin precisely, and that then required me either zooming in, or moving my mouse at a snails pace to get it exactly right. I have also seen many other folks having to deal with situations like that.
CryEngine had this neat thing where it would show you the amount of units something had been moved, while moving it. Very useful in the case of videogame level design, where you need to know the precise scale and measurements every single time you work. Here in CryEngine:
And lastly, I found out that Unity moves their 2D axe planes around when you move the camera around. That way, you can always easily grab any of the 2D axe planes, and move your object.
So I thought 'Well, why don't we flip all the axes?'. This was a neat idea, but what would the arrows on the gizmo do? Would they stay the same? No, that would be confusing, as the gameplay programmers mentioned to me. In this case it was gameplay programmers specifically who needed to know what is positive and negative on the gizmo. For debugging purposes they sometimes looked at the gizmo of an object to see where/how it was moving. If it would flip without negative indication, they may not know if it's moving in the right direction.
So, we have to indicate the negative direction somehow. Maybe we flip the arrows?
No, this looks confusing. Folks often instinctively grab the arrow head as it is the largest and most prominent thing to touch, and this makes it easy to accidentally grab the center instead, as well as looking very different in the blink of an eye. It takes the attention away from the object itself.
So we put the arrowheads on the end and flip them! But I noticed when squinting this still looked very similar. In the blink of an eye, you would not know this has flipped. Also, it somehow feels… off? Maybe that was just me back then, but it felt wrong. The silhouette is too different. Sometimes a gut instinct can be good to listen to.
How about retaining the silhouette, but still making clear something has changed. Maybe we make the arrows hollow when they are negative?
Yes! This looked good in the blink of an eye: Easily visible that it is different, but retaining the silhouette so it does not pull away too much attention.
So then this was implemented by some great folks from Mi’Pu’Mi into the Glacier 2 Editor at Io-Interactive. Now the arrows can always be grabbed, no matter at what angle you look at the object from:
All of this design work, and the implementation was about a week of on-and-off work. I was doing this in-between larger design work on level editor tools, collision editors, etc. For the amount of time spent, and the gain of user happiness, this was a great little feature! And we learned a lot along the way as well on what other 3D editors are doing with their translate gizmos.
But let me tell you one weird thing before we get to the conclusions: Unreal does change the axes on their rotation gizmo, so that it is always easily accessible, but they do not do this on their translate gizmo. It’s been this way for many years now. I don’t know why.
Conclusion
What are the main takeaways here?
Sometimes just walking around the office, looking at people work, will give you the data you need on what to work on.
Always look at what other tools have done already. The problem you are trying to solve may already be solved by someone else.
Nobody can decide whether these are called gizmos or manipulators. Both are used, and I like the funkiness of the word ‘gizmo’.
Small features that are used often can be a great investment for the user experience and happiness of your developers. Not only were users happy: The tool engineer who implemented this was excited the project was so small, yet so impactful. They felt great too!
None of this work was a ‘Blocker’, and I would never have been able to argue this was of a high priority on a functionality basis, but it can still be very impactful to users, and implementing it prevents UX debt.
Thank you for reading! If you enjoyed this post, you can find my talks here, and my other posts here. You can also subscribe below to get updates when a new post is published.