Developer Forum

Single Column Layout - Suggestion to have text left-aligned

Other Development Topics User Feedback
#1

Hello!

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.

single_column_current
single_column_current322×558 25.8 KB
single_column_proposal
single_column_proposal322×558 25.6 KB

If no one likes this version, I at least suggest having checkbox names inline with the rest :slight_smile:

8 Likes
Blender user interface design
Blender 2.8 UI design – hierarchy issue
Change overall relation label/value preferences proposal
#2

See this proposal, it’s other solution to the right align text

image
image.jpg1781×1176 395 KB

image
image.jpg1777×1178 419 KB

7 Likes
#3

I have to say that from Ines proposal i really appreciate the buttons being closer to the center of the screen and away from the damn slider.

#4

Interesting! Is this just a mockup or do you have a patch? I’d like to test how it feels.

I tried shuffling things around in uiItemFullR (interface_layout.c) but I don’t have a lot of time (or knowledge : ) right now unfortunately.

#5

Perhaps the lock could be represented like a driver?
2018-08-08%2013_47_15-

#6

@pablovazquez it’s a mockup, but I can look into a patch later on :slight_smile:

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.

1 Like
#7

It’s single column and I don’t see the space problem, you are the first person that told me about that.

#8

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:
right-aligned

After:
left-aligned

EDIT: Suggestion from Twitter, trying the keyframe dots in the center:
centerdots

3 Likes
#9

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

#10

Here’s a patch to test it out: https://developer.blender.org/P768

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:single_column1 Text right:single_column2

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

1 Like
#11

NICE! So much better to actually try these things in real life other than mockups.

Here is another variation disabling UI_PROP_TEXT_LEFT and UI_PROP_TEXT_LEFT on your patch.

  • Decorators on the right, since some properties have it and some don’t.
  • Checkboxes need to be aligned to the right.
  • Dropdown values could be aligned to the right as well? So it reads closer to the label.
  • Some labels might need work, like Resolution X → X Resolution

image
image.png992×918 168 KB

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.

Thanks for making the patch!

3 Likes
#12

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

#13

Exactly. Description always comes first…
So imho, this proposal would just make things much harder.

5 Likes
#14

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)

#15

I like it - it’s much easier on my eyes

1 Like
#16

Nobod uses the value at the left of the name of the properties for that reason.

I don’t see why is so problematic use the same layout rules that uses iOS and Android and 3 billion of people.

1 Like
#17

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:
2018-08-16%2013_07_15-NotificationsForm
Properties:
2018-08-16%2013_07_25-NotificationsForm

I know this is all WIP, so I’m not worried, but I do want to point it out just in case.

1 Like
#18

Is there a way to just align text to the left and use a stripped pattern similar to the outliner so our eyes don’t get lost.

#19

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.

#20

This is what I was thinking.

T
BL.DEV.T.jpg506×657 53.6 KB