Number field alignment #37761

New Issue

William Reynish · 2013-12-10T10:32:27+01:00

William Reynish commented

2013-12-10 10:32:27 +01:00

The issue
Most text items in Blender are left-aligned. This is good for vertical eye scanning, because you can quickly scan through a vertical list of items.

However, number fields are centre-aligned. This means that both the number values and text items become difficult to scan through, and also that it's hard to visually separate the values from the text.

The yellow dotted lines represent the left and right edges of the text and values. Notice how they are not aligned:

Additionally, the centre-alignment is problematic when comparing number values, because the decimal point is not aligned.

Proposed solution: Use left-right alignment for text and values.

In the example below, notice how the text and values are are easier to read.
Also notice how the Diffuse, Glossy and Transmission values are easy to compare even though they have varied integer sizes - '100', '4' and '80' are correctly aligned.

This is a closeup of the Bounces number fields for illustration:

In summary

Makes text easier to scan
Makes it easier to compare values
Less visual noise

**The issue** Most text items in Blender are left-aligned. This is good for vertical eye scanning, because you can quickly scan through a vertical list of items. However, number fields are centre-aligned. This means that both the number values and text items become difficult to scan through, and also that it's hard to visually separate the values from the text. The yellow dotted lines represent the left and right edges of the text and values. Notice how they are not aligned: ![Number_Field_alignment_old.png](https://archive.blender.org/developer/F38168/Number_Field_alignment_old.png) Additionally, the centre-alignment is problematic when comparing number values, because the decimal point is not aligned. **Proposed solution:** Use left-right alignment for text and values. In the example below, notice how the text and values are are easier to read. Also notice how the Diffuse, Glossy and Transmission values are easy to compare even though they have varied integer sizes - '100', '4' and '80' are correctly aligned. ![Number_Field_alignment.png](https://archive.blender.org/developer/F38178/Number_Field_alignment.png) This is a closeup of the Bounces number fields for illustration: ![number_alignment.png](https://archive.blender.org/developer/F38176/number_alignment.png) **In summary** - Makes text easier to scan - Makes it easier to compare values - Less visual noise

William Reynish commented

2013-12-10 10:32:27 +01:00

Changed status to: 'Open'

William Reynish commented

2013-12-10 10:32:27 +01:00

Added subscriber: @billrey

Thomas Dinges commented

2013-12-10 11:20:42 +01:00

Added subscriber: @ThomasDinges

Thomas Dinges commented

2013-12-10 11:20:42 +01:00

Sounds reasonable, I agree with the suggestion.

Joshua Leung commented

2013-12-10 13:54:10 +01:00

Added subscriber: @JoshuaLeung

Joshua Leung commented

2013-12-10 13:54:10 +01:00

Agreed. This sounds like a reasonable solution. The main barrier here currently is probably technical/implementational I assume.

Campbell Barton commented

2013-12-10 15:07:08 +01:00

Added subscriber: @ideasman42

Campbell Barton commented

2013-12-10 15:07:08 +01:00

Heres a quick hack to test the functionality.

William Reynish commented

2013-12-10 15:43:45 +01:00

@ideasman42:

Wow, you're fast. It seems to work very well - it even puts preference on the values, meaning if there's not enough space to display the entire word+value, the word is nicely truncated before the value. Nice!

I took some before/after screenshots to see how it works in various places:

Before:

After:

It's much easier to read the words and values now

Getting pedantic:
Perhaps the tiniest bit of padding is needed on either side so that the text & values don't run into the arrows?
Also, the values are left aligned when there's no title inside the number value (e.g. Rougness in Cycles materials, or % slider in Render properties)

These are minor issues though. Nicely done.

@ideasman42: Wow, you're fast. It seems to work very well - it even puts preference on the values, meaning if there's not enough space to display the entire word+value, the word is nicely truncated before the value. Nice! I took some before/after screenshots to see how it works in various places: Before: ![Number_alignment_before.png](https://archive.blender.org/developer/F38229/Number_alignment_before.png) After: ![Number_alignment_after.png](https://archive.blender.org/developer/F38231/Number_alignment_after.png) It's much easier to read the words and values now Getting pedantic: Perhaps the tiniest bit of padding is needed on either side so that the text & values don't run into the arrows? Also, the values are left aligned when there's no title inside the number value (e.g. Rougness in Cycles materials, or % slider in Render properties) These are minor issues though. Nicely done.

Brecht Van Lommel commented

2013-12-10 16:43:28 +01:00

Added subscribers: @brecht, @JonathanWilliamson

Brecht Van Lommel commented

2013-12-10 16:46:59 +01:00

I think this is a great idea.

Thomas Dinges commented

2013-12-10 16:55:16 +01:00

Just tested Campbells patch and I agree with William here.

Add a bit more padding so we have some space for the arrows.
Fix percentage % sliders etc..

Apart from that it's indeed a nice improvement. Particle buttons suddenly look so "clean" and organised....I never thought that such a change would increase the readability that much.

Just tested Campbells patch and I agree with William here. * Add a bit more padding so we have some space for the arrows. * Fix percentage % sliders etc.. Apart from that it's indeed a nice improvement. Particle buttons suddenly look so "clean" and organised....I never thought that such a change would increase the readability that much.

Jonathan Williamson commented

2013-12-10 18:39:02 +01:00

This is a great improvement. The readability improvement is shocking.

xrg commented

2013-12-10 18:43:50 +01:00

Added subscriber: @xrg

Campbell Barton commented

2013-12-11 05:19:30 +01:00

Uploaded patch D93 (not a test this time)

Silly error where numbers that have no label were left aligned is fixed since previous patch too.

Screenshot:
http://www.graphicall.org/ftp/ideasman42/text_align.png

(btw any docs on how to embed images? - {F123} supposed to do this but how/where to upload the file?)
(btw2 - can I delete the attached patches?)

Uploaded patch [D93](https://archive.blender.org/developer/D93) (not a test this time) Silly error where numbers that have no label were left aligned is fixed since previous patch too. Screenshot: http://www.graphicall.org/ftp/ideasman42/text_align.png (btw any docs on how to embed images? - {F123} supposed to do this but how/where to upload the file?) (btw2 - can I delete the attached patches?)

Campbell Barton self-assigned this 2013-12-11 05:31:02 +01:00

Campbell Barton commented

2013-12-11 11:13:26 +01:00

Made some unrelated improvements widget_draw_text so the patch is less of a kludge.

See D93 for patch.

Noticed a slight drawback/confusion - That the text shows on the right but edits on the left, with wide layouts its a little odd.

Made some unrelated improvements `widget_draw_text` so the patch is less of a kludge. See [D93](https://archive.blender.org/developer/D93) for patch. Noticed a slight drawback/confusion - That the text shows on the right but edits on the left, with wide layouts its a little odd.

Campbell Barton commented

2013-12-11 11:29:57 +01:00

Changed status from 'Open' to: 'Resolved'

Campbell Barton closed this issue

2013-12-11 11:29:57 +01:00

Campbell Barton commented

2013-12-11 11:29:57 +01:00

Committed to master, closing.

bassam kurdali commented

2013-12-11 21:11:53 +01:00

Added subscriber: @BassamKurdali

bassam kurdali commented

2013-12-11 21:11:53 +01:00

noticed some potential drawbacks to this having tried it:
It really works well in consistent 2 column layouts of numeric buttons. The only examples in this thread are from that type. On IRC jensverwiebe brings up two issues:

It is a bit confusing when you have single buttons spanning a layout: e.g.: Font Size: in Stamp settings, because the number is now very far apart from the button.
In the timeline header Start and End buttons, the number for each button is physically closer to the previous one (this could happen in any aligned row) leading to some visual confusion because there is no visible break

the lux render panel looks worse in the new layout (mix of vertical layouts and really wide buttons)

I think 1 and 3 can be solved with some layout guidelines for making panels, and perhaps 2 can be solved by:

more padding on buttons for aligned rows to be clearer (Bilrey already brings up extra padding, this could also get shrunk down if the width gets narrower, so the text/number doesn't get obscured too quickly on narrow layouts)
optional centering useful for single row things (I doubt vertical alignment matters much on isolated headers like the timeline, or indeed, if it is even aligning at all)

noticed some potential drawbacks to this having tried it: It really works well in consistent 2 column layouts of numeric buttons. The only examples in this thread are from that type. On IRC jensverwiebe brings up two issues: - It is a bit confusing when you have single buttons spanning a layout: e.g.: Font Size: in Stamp settings, because the number is now very far apart from the button. - In the timeline header Start and End buttons, the number for each button is physically closer to the previous one (this could happen in any aligned row) leading to some visual confusion because there is no visible break # the lux render panel looks worse in the new layout (mix of vertical layouts and really wide buttons) I think 1 and 3 can be solved with some layout guidelines for making panels, and perhaps 2 can be solved by: - more padding on buttons for aligned rows to be clearer (Bilrey already brings up extra padding, this could also get shrunk down if the width gets narrower, so the text/number doesn't get obscured too quickly on narrow layouts) - optional centering useful for single row things (I doubt vertical alignment matters much on isolated headers like the timeline, or indeed, if it is even aligning at all)

jens verwiebe commented

2013-12-11 21:20:34 +01:00

Added subscriber: @jensverwiebe

jens verwiebe commented

2013-12-11 21:20:34 +01:00

I would like to add that when shrinking the layout, the "label" should be preserved not as it is now the value.
Seeing just the values says nothing, but seeing still the label makes me know what i will edit when clicking on
the numberfield.

As bassam said i felt imediately that single row layout seperates label and value way to much as is. In the examples
only dual row layout was judged, which shows the disruption less prominent.

All in all there are a lot of places where noncentered value is just ugly and looks just misaligned ( for example if no label is used 'inside'), sorry to say this.

Here just an example from Lux addon: http://www.jensverwiebe.de/Other/blender_gui_new.jpg

Jens

I would like to add that when shrinking the layout, the "label" should be preserved not as it is now the value. Seeing just the values says nothing, but seeing still the label makes me know what i will edit when clicking on the numberfield. As bassam said i felt imediately that single row layout seperates label and value way to much as is. In the examples only dual row layout was judged, which shows the disruption less prominent. All in all there are a lot of places where noncentered value is just ugly and looks just misaligned ( for example if no label is used 'inside'), sorry to say this. Here just an example from Lux addon: http://www.jensverwiebe.de/Other/blender_gui_new.jpg Jens

William Reynish commented

2013-12-11 23:11:27 +01:00

As I see it, there are a number of ways to lay out data.

The issue with the Lux panels is that it is done as a single-column layout, while the rest of the Properties area is designed for two columns.

The advantage of multi-collumn design is that you can get a lot of data on the screen at the same time.

However, the issues with multi-column layouts is

Layouts often become convoluted (what if the two columns don't logically have roughly the same number of items?)
No good way to split the columns up in two
Hard to visually separate values from titles
Takes up a lot of screen space

Notice how Cycles Materials already uses a single column for its data. The Properties editor can be made much slimmer when viewing the Cycles materials, and it still works fine.
This is much cleaner than the confusing mess of the BI Materials with all the many check marks, number fields and sliders spread across the two columns.

In the long run I think we could make some nicer, cleaner layouts with a single column. This way we could have a single, unified way to lay out all the data in Blender, rather than the current mess of multiple layout styles.

As I see it, there are a number of ways to lay out data. The issue with the Lux panels is that it is done as a single-column layout, while the rest of the Properties area is designed for two columns. The advantage of multi-collumn design is that you can get a lot of data on the screen at the same time. However, the issues with multi-column layouts is - Layouts often become convoluted (what if the two columns don't logically have roughly the same number of items?) - No good way to split the columns up in two - Hard to visually separate values from titles - Takes up a lot of screen space ![Number_field_layouts.png](https://archive.blender.org/developer/F38478/Number_field_layouts.png) Notice how Cycles Materials already uses a single column for its data. The Properties editor can be made much slimmer when viewing the Cycles materials, and it still works fine. This is much cleaner than the confusing mess of the BI Materials with all the many check marks, number fields and sliders spread across the two columns. In the long run I think we could make some nicer, cleaner layouts with a single column. This way we could have a single, unified way to lay out all the data in Blender, rather than the current mess of multiple layout styles.

Brecht Van Lommel commented

2013-12-11 23:51:57 +01:00

I think we can change the alignment for buttons in headers to use the old style in some or all cases.

For the properties editor, the Luxrender panel already looked quite confusing with labels being a mix of left and center aligned as you scan along the material properties. In some ways it's more consistent now as the labels are now all on the left. But neither looks particularly good to me, it will look better if the label is moved out of the button similar to Cycles panels.

I think we can change the alignment for buttons in headers to use the old style in some or all cases. For the properties editor, the Luxrender panel already looked quite confusing with labels being a mix of left and center aligned as you scan along the material properties. In some ways it's more consistent now as the labels are now all on the left. But neither looks particularly good to me, it will look better if the label is moved out of the button similar to Cycles panels.

William Reynish commented

2013-12-12 00:32:47 +01:00

@brecht: Agreed, that'd be nicer.

In fact, here's a mock of how that might look:

Quite a bit easier to read and understand this way.

@brecht: Agreed, that'd be nicer. In fact, here's a mock of how that might look: ![Lux_UI.png](https://archive.blender.org/developer/F38511/Lux_UI.png) Quite a bit easier to read and understand this way.

William Reynish commented

2013-12-12 14:16:11 +01:00

@BassamKurdali:

I think for controls such as the Font Size in Stamp, this is a good candidate for putting the controls in a single column, with the titles on the left and the values on the right, like so:

Again, like the Cycles materials

@BassamKurdali: I think for controls such as the Font Size in Stamp, this is a good candidate for putting the controls in a single column, with the titles on the left and the values on the right, like so: ![Stamp_UI_Layout.png](https://archive.blender.org/developer/F38656/Stamp_UI_Layout.png) Again, like the Cycles materials

jens verwiebe commented

2013-12-12 18:25:26 +01:00

For the Lux example:
You miss some points here:
Asymmetry is a float_vector, so no easy to do in seperate lines.
Here also shows up an difference in handling: a float gets 'name': 'name' inside the field,
a float_vector gets an outside label.

This all should be carefully tweaked + a bit more space between arrows and values/names.

I will wait for the result coming out of gui refresh. Not in the mood again running after blender changes
for our addon, as we now have to do every 3 months it seems.

BTW: i saw a mockup with tabs vertical !!! I tested a lot with this earlier in Lux gui and just can say: avoid this, make them horizontal !

Jens

For the Lux example: You miss some points here: Asymmetry is a float_vector, so no easy to do in seperate lines. Here also shows up an difference in handling: a float gets 'name': 'name' inside the field, a float_vector gets an outside label. This all should be carefully tweaked + a bit more space between arrows and values/names. I will wait for the result coming out of gui refresh. Not in the mood again running after blender changes for our addon, as we now have to do every 3 months it seems. BTW: i saw a mockup with tabs vertical !!! I tested a lot with this earlier in Lux gui and just can say: avoid this, make them horizontal ! Jens

bassam kurdali commented

2013-12-12 18:53:28 +01:00

@billrey and @brecht
Nice Ideas! will clean up a lot of layout issues
@jensverweibe I too don't like vertical text much but I struggle to see another way that could function and not be too bulky.

@billrey and @brecht Nice Ideas! will clean up a lot of layout issues @jensverweibe I too don't like vertical text much but I struggle to see another way that could function and not be too bulky.

William Reynish commented

2013-12-12 20:47:07 +01:00

@jensverwiebe:

Ok, the Asymmetry values I see are actually RGB, not XYZ. Here's an update:

This is a good example of why we probably need some better way to divide panels into sections, so that sections such as IOR, Absorption and Scattering can better be separated. In the current UI they all round together and it's difficult to see that the IOR presets refers to IOR and not other settings.

On a positive note, already in Lux, things do get a quite nice single column design when using node tree materials. If/when Lux goes that route completely, the layout issue is more or less already solved.

Here is a screenshot from Lux using node materials. It's not too bad:

Cheers

William

@jensverwiebe: Ok, the Asymmetry values I see are actually RGB, not XYZ. Here's an update: ![Lux_Volumes_ui.png](https://archive.blender.org/developer/F38983/Lux_Volumes_ui.png) This is a good example of why we probably need some better way to divide panels into sections, so that sections such as IOR, Absorption and Scattering can better be separated. In the current UI they all round together and it's difficult to see that the IOR presets refers to IOR and not other settings. On a positive note, already in Lux, things do get a quite nice single column design when using node tree materials. If/when Lux goes that route completely, the layout issue is more or less already solved. Here is a screenshot from Lux using node materials. It's not too bad: ![Lux_nodes_ui.png](https://archive.blender.org/developer/F38940/Lux_nodes_ui.png) Cheers William

Aditia A. Pratama commented

2013-12-18 14:05:28 +01:00

Added subscriber: @AditiaA.Pratama

Dolf Veenvliet commented

2013-12-18 14:08:40 +01:00

Added subscriber: @macouno-3

Dolf Veenvliet commented

2013-12-18 14:08:40 +01:00

Hmm ok... only just now saw this change...

I completely understand how scanning vertically is easier if things align... but

If you have the definition separate from the value, it's a bit messy to have it inside the input... but... having it outside effectively makes the input smaller. Having a large input makes it easier to click/change the value.

In a way, I have to say that perhaps I really like having the definition/name right next to the value. That makes it easy to see that relationship, which may be more important than the relationship between inputs below each other... So... if the name is outside the numeric input... what would it look like with the number aligning on the left?

Something I would definitely do... if the name is outside the input, have it light up slightly on hover, and make it clickable to compensate for the input becoming smaller?

Nice work guys... and what a hard thing to find a nice solution to! ;)

PS: I think my main issue with this initially is that I really like having the definition next to the value (but maybe I'm just old and not used to it yet)

Hmm ok... only just now saw this change... I completely understand how scanning vertically is easier if things align... but If you have the definition separate from the value, it's a bit messy to have it inside the input... but... having it outside effectively makes the input smaller. Having a large input makes it easier to click/change the value. In a way, I have to say that perhaps I really like having the definition/name right next to the value. That makes it easy to see that relationship, which may be more important than the relationship between inputs below each other... So... if the name is outside the numeric input... what would it look like with the number aligning on the left? Something I would definitely do... if the name is outside the input, have it light up slightly on hover, and make it clickable to compensate for the input becoming smaller? Nice work guys... and what a hard thing to find a nice solution to! ;) PS: I think my main issue with this initially is that I really like having the definition next to the value (but maybe I'm just old and not used to it yet)

William Reynish commented

2013-12-20 14:36:19 +01:00

@macouno-3: Nicely summarised.

Here are the four variations that I can think of for this:

This is how we used to do it. The nice thing about it is that the clickable/draggable area is very large. The negative is that numbers and text fields aren't aligned, and the fact that the words are inside the fields makes it look like you are changing the title, not just the value
Current situation. Adds alignment for text+values
Text outside. Advantage is that it's clear the you are editing the value, not the title. And it's clear that titles are on one side, values on the other.
Right-aligned titles. This makes it clearer which titles refer to what values.

@macouno-3: Nicely summarised. Here are the four variations that I can think of for this: ![titles_values.png](https://archive.blender.org/developer/F46903/titles_values.png) - This is how we used to do it. The nice thing about it is that the clickable/draggable area is very large. The negative is that numbers and text fields aren't aligned, and the fact that the words are inside the fields makes it look like you are changing the title, not just the value - Current situation. Adds alignment for text+values - Text outside. Advantage is that it's clear the you are editing the *value*, not the *title*. And it's clear that titles are on one side, values on the other. - Right-aligned titles. This makes it clearer which titles refer to what values.

Dolf Veenvliet commented

2013-12-20 16:37:25 +01:00

Or...

Or... ![5.jpg](https://archive.blender.org/developer/F46933/5.jpg)

jens verwiebe commented

2013-12-20 18:01:50 +01:00

Regarding "outside" labeling mockup, i'am for '3.
This would be consequently in line also with existing float_vector presentation.

Jens

Regarding "outside" labeling mockup, i'am for '3. This would be consequently in line also with existing float_vector presentation. Jens

William Reynish commented

2013-12-20 20:06:19 +01:00

@macouno-3: IMO that's a bit strange with left-to right languages. Titles with colons usually refer to what'd about to come, what's to the right on the title.

When having a single column of data, such as the Cycles material settings, I think it's cleanest and clearest to have the titles all on the left and the values all to the right. It's very simple this way, easy to read and understand. Trouble is with the multi-column layouts, when you have text outside the control that can get a bit confusing, because values may be surrounded with titles, like so:

What does 'Mysterious Boats' refer to? It becomes a but muddy in this case. That's why I think it's related to the way we design layouts in general.

When using a single column layout, it becomes clear:

The nice thing about the right-aligned titles is that the titles are close to the values and you can do things like type 'Resolution X' and then type 'Y' underneath and have it still be clear. 'Resolution' is then both a title and a category label at the same time.

@macouno-3: IMO that's a bit strange with left-to right languages. Titles with colons usually refer to what'd about to come, what's to the right on the title. When having a single column of data, such as the Cycles material settings, I think it's cleanest and clearest to have the titles all on the left and the values all to the right. It's very simple this way, easy to read and understand. Trouble is with the multi-column layouts, when you have text outside the control that can get a bit confusing, because values may be surrounded with titles, like so: ![multicolumn_label_outside.png](https://archive.blender.org/developer/F46969/multicolumn_label_outside.png) What does 'Mysterious Boats' refer to? It becomes a but muddy in this case. That's why I think it's related to the way we design layouts in general. When using a single column layout, it becomes clear: ![Screen_Shot_2013-12-20_at_20.10.46.png](https://archive.blender.org/developer/F46971/Screen_Shot_2013-12-20_at_20.10.46.png) The nice thing about the right-aligned titles is that the titles are close to the values and you can do things like type 'Resolution X' and then type 'Y' underneath and have it still be clear. 'Resolution' is then both a title and a category label at the same time.

Sign in to join this conversation.

No Label

Download

What's New

Blender Studio

Manual

Developers Blog

Documentation

Benchmark

Blender Conference

Development Fund

One-time Donations

Number field alignment #37761

the lux render panel looks worse in the new layout (mix of vertical layouts and really wide buttons)