Checkboxes alignment tweaks #65965
Labels
No Label
Interest
Alembic
Interest
Animation & Rigging
Interest
Asset Browser
Interest
Asset Browser Project Overview
Interest
Audio
Interest
Automated Testing
Interest
Blender Asset Bundle
Interest
BlendFile
Interest
Collada
Interest
Compatibility
Interest
Compositing
Interest
Core
Interest
Cycles
Interest
Dependency Graph
Interest
Development Management
Interest
EEVEE & Viewport
Interest
Freestyle
Interest
Geometry Nodes
Interest
Grease Pencil
Interest
ID Management
Interest
Images & Movies
Interest
Import Export
Interest
Line Art
Interest
Masking
Interest
Metal
Interest
Modeling
Interest
Modifiers
Interest
Motion Tracking
Interest
Nodes & Physics
Interest
OpenGL
Interest
Overrides
Interest
Performance
Interest
Physics
Interest
Pipeline, Assets & IO
Interest
Platforms, Builds & Tests
Interest
Python API
Interest
Render & Cycles
Interest
Render Pipeline
Interest
Sculpt, Paint & Texture
Interest
Text Editor
Interest
Translations
Interest
Triaging
Interest
Undo
Interest
USD
Interest
User Interface
Interest
UV Editing
Interest
VFX & Video
Interest
Video Sequencer
Interest
Virtual Reality
Interest
Vulkan
Interest: Wayland
Legacy
Blender 2.8 Project
Legacy
Milestone 1: Basic, Local Asset Browser
Legacy
OpenGL Error
Meta
Good First Issue
Meta
Papercut
Meta
Retrospective
Meta
Security
Module
Animation & Rigging
Module
Core
Module
Development Management
Module
EEVEE & Viewport
Module
Grease Pencil
Module
Modeling
Module
Nodes & Physics
Module
Pipeline, Assets & IO
Module
Platforms, Builds & Tests
Module
Python API
Module
Render & Cycles
Module
Sculpt, Paint & Texture
Module
Triaging
Module
User Interface
Module
VFX & Video
Platform
FreeBSD
Platform
Linux
Platform
macOS
Platform
Windows
Priority
High
Priority
Low
Priority
Normal
Priority
Unbreak Now!
Status
Archived
Status
Confirmed
Status
Duplicate
Status
Needs Info from Developers
Status
Needs Information from User
Status
Needs Triage
Status
Resolved
Type
Bug
Type
Design
Type
Known Issue
Type
Patch
Type
Report
Type
To Do
No Milestone
No project
No Assignees
16 Participants
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: blender/blender#65965
Loading…
Reference in New Issue
There is no content yet.
Delete Branch "%!s(<nil>)"
Deleting a branch is permanent. Although the deleted branch may exist for a short time before cleaning up, in most cases it CANNOT be undone. Continue?
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 :
{F7370312, size=full}
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:
{F7370734, size=full}
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.
Added subscribers: @WilliamReynish, @BartekMoniewski, @LucianoMunoz, @DuarteRamos, @zebus3dream, @A.Lex_3D, @CharlieJolly, @schweppie, @Hexbob6, @freemind, @PierreSchiller, @SteffenD, @remotecrab131, @Thane5, @orvb, @brezdo, @iss, @0o00o0oo, @ideasman42, @RamiroCantu, @Regnas
Added subscriber: @Blendify
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?
Added subscriber: @AlbertoVelazquez
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_EXCEPTIONininterface_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.
Added subscriber: @Harley
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:
Added subscriber: @ThinkingPolygons
@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.
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.
Added subscriber: @merlinstail
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 @merlinstail
Added subscriber: @SecuoyaEx
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 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
Added subscriber: @vademenev
Overall this is great. One small issue that needs to be addressed imho. Placement of checkboxes that are not related to a group might suggest they belong to them.
I think rows of grouped items should be aligned, maybe separators would help too.
@BartekMoniewski
You are right. A little bit of spacing helps here:
I will add this spacer here once this is committed to master.
This issue was referenced by
219049bb3bThis issue was referenced by blender/cycles@849cf27664
This issue was referenced by
7fc60bff14Added subscriber: @JulianEisel
Changed status from 'Confirmed' to: 'Resolved'
All changes explained in the task description should be addressed with
219049bb3band7fc60bff14.I'm personally quite happy about the result, it seems like a great improvement. The UI team members involved agreed that this design is the way forward, at least for now.
Added subscriber: @unimbox
@WilliamReynish wrote:
I just wanna add my two cents here.
When i took a first look at the checkbox columns i immediately assumed that on the left-hand side is a main category and on the-right hand side are subcategories. Seems logical to me. You have the word "Show" on the left and then everything you wanna show is on the right. Since "Render Region" is a separate category of itself, why not just to align the text on the left-hand side?
Like this:
Removed subscriber: @Thane5
Removed subscriber: @brezdo