Having the text align to the left (including for checkboxes) makes it easier to scan for languages that read left-to-right.
Additionally, it brings the clickable area closer to the center of the screen in the default layout.
I don’t see any major disadvantage, except that the space left empty for the locks bothers me a bit.
Here is a screenshot of the current single column layout and another with my suggestion to the right.
@pablovazquez it’s a mockup, but I can look into a patch later on
I believe (hope! :D) that the state of a property [disabled, keyed, interpolated, driven, linked, overriden, invalid] is mutually exclusive and the lock is not?
Currently a click will insert a key and everything else either happens (disabled, invalid, linked, interp) or is a right-click context menu action (add driver, override?). The lock would be a bit of a problem here. Maybe we can just not have the space when a property is not lockable? Currently, the panels are already not aligning perfectly.
@Alberto I think your suggestion is not single-column? It leaves some space between the prop and the value, which makes it harder to understand them as one thing.
I would love to try a patch as well if you create one! I wish I had the coding chops to try it myself, but not yet.
What I like about your solution is that all the labels line up (including checkboxes!), and they are consistent with the header labels (box on the left). It just feels much more organized.
Another example, for fun. The second is clearly more readable than the first.
Before:
After:
EDIT: Suggestion from Twitter, trying the keyframe dots in the center:
Seems like it would make it harder for users since your read from left to right and that can br a problem if you are looking for a specific option out of a large list
There are a couple of different options at the top to mix and match including if the decorator and the text should be on the left or right and how it should align (eg. UI_PROP_TEXT_LEFT).
Comment out different lines to test the variations.
The patch is not very polished, but I think it’s enough to get an idea and make decisions.
In particular, I could not easily move the locks of the transform because they are technically a different property from the transform itself (I can’t just mix 2 different properties).
Here are some examples:
Text left: Text right:
@Alberto
you’re right, I misunderstood you before. The picture on the left is similar to your proposal, except that the checkbox is aligned on the left instead of right.
It has the disadvantage that is harder to associate the name and value, as they are more distant.
Usual ways to deal with this are different colored rows and dots or lines connecting the row, but I think that adds noise.
@Notformortaleyes
Interestingly, it took me a while to understand that you meant that logically the name should be first. For me, it makes no difference as I like the logical order “actions/state - value - description”. The text is quite bright and aligned, so I find it “in its place”, but I understand that maybe I am an exception here?
What I find tiring in the current version is that I have to scan both horizontally and vertically for the names, although simply aligning the checkboxes already makes it better.
I will give it a try to see how it feels for a bit. Ideally it’d be nice if this works without changing Python code for either way, so it could be a Theme option to flip it.
I would keep decorators to the left, and the properties that dont have it should still be alinged as if they did, that way using the decorator for keyframes doesnt easily clash with the scroll bar,
though i dont like that much the left alignment for the properties visually as more of a taste thing, it feels that it could work much better given that the props would be aligned closer to the screen for most people (the ones that keep the properties panel to the right at least.)
I love the ‘Right text’ image, but I prefer the right-aligned number in the box with the fixed decimals that can be set in ‘User Preferences’. The text as ‘XYZ Euler’ centered in the drop-down box, +Y of ‘Axis Tracing’ and Z of ‘Up Axix’ are too far from the own descriptive text, IMHO. The alignment boxes on the left make the text in the Header panel very distinctive, the descriptive text is well aligned in a consistent way.Still IMHO, reading the value of the box to the left of the text is not a big problem, like most people who use the writing method from right to left (I think they are at least a third of the earth’s population)
I’m definitely a fan of having all the text justified left (regardless of the side it ends up on) so that it’s easier to scan, but whatever it ends up being, could it please be consistent? Here’s an example of where it currently flip flops:
Popovers:
Properties:
I know this is all WIP, so I’m not worried, but I do want to point it out just in case.
This a great overview of panel design. It’s clear to me that having the text on the side (whatever side may be ) is a huge waste of space. The solution may be to put it above the numbers slider, (which adds more vertical space probably to much) or inside the number slider since you don’t really need to know the name of the slider once you start changing it. for the drop down menus above I think makes more sense. Just some thoughts.
Text right:
