When we are looking through forms on their way of being converted to OOjs UI, there are a few recurring shortcomings / glitches so far:
- People are criticizing the space needs in contrast to the old forms
- form elements don't seem to follow a grid or a pattern in distance to each other, to their labels. We're neglecting gestalt [[ http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm | principle of proximity ]].
- usage of `oo-ui-panelLayout-padded oo-ui-panelLayout-framed` classes with it's 3D shadow disturb the connection to the rest of the forms
Related to those issues are problems with side-by-side arrangements of widgets as found often in current form layouts and,
[[ https://www.paciellogroup.com/blog/2007/11/fieldsets-legends-and-screen-readers/ | very important for accessibility ]]- problems with side-by-side arrangements of widgets as found often in current form layouts and
- currently no longer availability of `fieldset` and `legend` elements, currently no longer availability of `fieldset` and `legend` elements, see also T131823.
My proposal:which is [[ https://www.paciellogroup.com/blog/2007/11/fieldsets-legends-and-screen-readers/ | very important for accessibility ]], see T131823.
[] The current layouts aren't superior,White-space if implemented appropriately helps orientation in forms and getting tasks done quicker for users. white-space if implemented appropriately helps orientation in formsSome of the criticism might come from familiarity with the old layout and getthaving tasks done quicker for userso re-learn. Some of the criticism might come from familiarity with the old layout and having to re-learn. Listening carefully and adding side-by-side examples helps to clarify.
My proposals furthermore:
[x] To the second question, one promising way seems to be making all form elements just having applied `margin-top` / `margin-right` and override for `:first-child` instances to support back to IE 7+.
With this and clear consistent values, a bit higher for in-between elements (`1em`) and lower for in between elements of a group (`0.5em`), like CheckboxMultiselectWidget or label for inputs, the proximity issue get's solved.
[] In my opinion we should also get rid of the `oo-ui-panel-*` classes and go instead for styling `mw-htmlform-ooui-wrapper`.
[x] Replacing `padding`s with `margin`s as it's a weird use of property to create margins.
| Before {F4101540 width=460} | After (proposal) {F4101564 width=460} (I've cheated a bit in the after, the `1em` to `0.5em` rules are not perfected yet, but you see the direction).