Page MenuHome

Checkboxes alignment tweaks
Open, NormalPublic

Tokens
"Love" token, awarded by lcs_cavalheiro."Love" token, awarded by manitwo."Love" token, awarded by monio."Love" token, awarded by jonathanl."Love" token, awarded by pablovazquez."Like" token, awarded by wevon."Like" token, awarded by jenkm."Like" token, awarded by 0o00o0oo."Like" token, awarded by tintwotin."Like" token, awarded by duarteframos.
Assigned To
None
Authored By

Description

Alignment

For the Properties in Blender 2.8, we moved to a more simple and structured approach for the lists of buttons and controls, which aim to be aligned around a center-line.

However, checkmark toggles currently do not follow this alignment principle:

There are many cases where it would make sense to align the checkboxes along this center line.

Take this before & after example from the Sequencer :

The 'Cache' text on the left side represents a heading, and is used as a visual anchor to guide the eye down the list.

Here are some more before/after examples:

Checkmark + value

In addition, there are many cases where we have configurations where we have a checkmark followed by a value. Currently, we tend to use sub-panels to show this nested relationship:


It works, and communicates the hierarchy, but can often be simplified like so:

Currently there's no good way to do this while ensuring proper alignment with other items. A built-in way to do the above would help in many cases where all we need is a simple checkbox+value arrangement.

Other examples:

Implications

Different alignments have different tradeoffs. The center-line alignment here has the advantage that it's more aligned with other properties, and is easier to scan. It also adds overall more consistency because the checkbox is then to the left of the text.

The downside is that there can be some scenarios where there is less space for the text strings, although it is mitigated by adding header text on the left side, as with the above examples.

This may prompt us to want to change the split %. Currently it's 50/50 but could become 40/60 for eg.

Details

Type
To Do

Event Timeline

William Reynish (billreynish) triaged this task as Normal priority.

With, Checkmark + value it looks a bit awkward when using number buttons (like in the example below) should the text in the bottom be shift left slightly to be alingned with the other numbers?

I want to remember this proposal in RCS with a lot of community support


https://blender.community/c/rightclickselect/Jkcbbc/

This is what we had originally, to try this out, comment UI_PROP_SEP_ICON_WIDTH_EXCEPTION in interface_layout.c.

Maybe I'm wrong. But commenting

#define UI_PROP_SEP_ICON_WIDTH_EXCEPTION

I only obtain that checkbox move to the center. But the proposal is about text left aligned (an old request from community) basically, and a few changes in the checkbox to make it better.

Just for completeness, my own (unpopular) opinion on this checkbox alignment issue is to treat checkboxes more like other items. Think of them like toggle buttons we already use all over. Or consider them like sliders with only two positions. The alignment issue goes away, they become all more consistent, and the hit area is much larger:

@Harley Acheson (harley) To me it looks more like a color slot property. lol

It DOES. LOL. I was too lazy to add what it probably needs, which is an "unchecked checkmark" in the middle of it.

Just for completeness, my own (unpopular) opinion on this checkbox alignment issue is to treat checkboxes more like other items. Think of them like toggle buttons we already use all over. Or consider them like sliders with only two positions. The alignment issue goes away, they become all more consistent, and the hit area is much larger:

The problem with that is that user lost a good reference point in the menus that is the difference between controls and checkbox. If all that basic shapes are the same user only can identify things with the text. So muscle memory have a hard work with that.

I certainly agree in a way. But then you could use the same argument to say that the difference in alignment also helps as a reference point. I personally don't need difference in appearance for reference points since each grouping we have is quite small in a section. But that might just be a preference.

Just to throw my tequila into the punchbowl, a variation on harley's proposal

3rd time lucky

I'm really fine with the center aligned checkboxes proposal in the task description. The ´heading' text to the left and the description to the right really improve readability with minor downsides; but if we are going with any "wider" solution that's meant to make checkboxes as wide as other UI buttons and sliders, than I'd go with some sort of iOS style toggle buttons, that could stretch to fill the same width without looking too out of place.

Something along the lines of this GIF:

I still think it would be a step back compared to a simple center aligned checkbox.

This comment was removed by gbayliss (gbayliss).

The checkmark + value proposal esentially puts two things in one row, going against the new philosophy for animated properties. What would the keyframe icon on the right do, would it animate the checkmark or the value? Center alignment looks good otherwise, and addressing excesive nesting is something that could be tackled in the future in another design task.

@SecuoyaEx (SecuoyaEx) it would show the state for the value, which you are more likely to want to animate.

You can still animate any property of course, if you really want to.

I realized I had split these, thought I would update with all controls shown for contrast