Make the interface more compact

[marcoambrosini]

Part of #45751

There's a lot of whitespace between elements, some elements are too big and the usability of Nextcloud would improve if the UI was overall more compact.

• We've used so far a margin of 8 pixels between list items, buttons and boundaries, we could cut that down to 4 (--default-grid-baseline).
• We are using a minimum target size of 44 pixels for all clickable elements, while the actual accessibility requirement is much lower than that (24px). Ref: https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html I know that touchscreens are a concern for these elements, but we can have fallbacks in place for those, or preserve a bigger size for main action targets.

As an example, this is the range of target sizes in dropbox and google drive. They range from 17px (a link) to 74px (main actions) and a hierarchy is established. Conversely almost all our elements have a 44px minimum target size, even the table header.

TODO

📐 Main work

• [x] Add new variables https://github.com/nextcloud/server/pull/45818
• [x] Reduce --border-radius-element to 8px now that clickable elements are smaller https://github.com/nextcloud/server/pull/45819
• [x] Update component library https://github.com/nextcloud-libraries/nextcloud-vue/pull/5694
• [ ] Developer documentation with step-by-step upgrade instructions
• [ ] Update the documentation about these changes
• [ ] Add it to the App upgrade guide: https://github.com/nextcloud/documentation/blob/master/developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_30.rst
• [ ] Post on the forum in the Development category about this update. Good examples are these posts by Daphne: https://help.nextcloud.com/t/on-the-roadmap-deprecation-of-php-7-4/149848 and https://help.nextcloud.com/t/update-on-32-bit-support-decision-to-block-the-update-on-nextcloud-26-reverted/153345

[susnux]

Which parts were mentioned? Because I often read exactly the opposite, that the UI is too compact and you end up with a lot of dead space on desktop screens.

---

Reasons to stick with 44px:

1. We also satisfy WCAG AAA requirements
2. Much less error prone for wrong clicking (e.g. limited dexterity or mobile)

But if we really want to shrink everything then 32px x 32px is probably the minimum: 15px font size 1.5 + 2 4px padding = 31.5px

[marcoambrosini]

Which parts were mentioned?

Basically the size of clickable elements, which makes everything else huge. Especially lists and action groups

I often read exactly the opposite

That's more about horizontal sizing of elements (sidebar width, paragraphs width)

As per:

1. AA is considered "Strong accessibility", if we were to aim at AAA, our UI would look radically different. If we ever do it, we should include it with the high contrast theme option and call it "enhanced accessibility".
2. We have many other clickable elements that are smaller (e.g. links, buttons in multi-selects) and for some reason the 44 target size rule does not apply to them.

But if we really want to shrink everything then 32px x 32px is probably the minimum

Exactly, it would be totally fine if we had some elements like that, some 44, and maybe one main action even bigger

As an example, have a look at the range of target sizes in dropbox and google drive. They range from 17px (a link) to 74px (main actions) and a hierarchy is established. Conversely almost all our elements have a 44px minimum target size, even the table header.

Note: since I added these screenshot I'm going to remove all previous ones as outdated

[skjnldsv]

Can anyone explain the difference between :)

• https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum
• https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced

[marcoambrosini]

Can anyone explain the difference between :)

afaik It's just 2 different levels. With bibv we aim at en enhanced AA for our certification. All of our competitors also aim at AA.

[skjnldsv]

With bibv we aim at en enhanced AA for our certification

Enhanced is 44px :)

[susnux]

No we basically need WCAG AA with smaller exceptions (BITV has slighly other rules for pages like login).

[jancborchardt]

@marcoambrosini additionally what has to be done is to inform the community developers about this change so they can update their apps, just like the

• [ ] Update the documentation about these changes
• [ ] Add it to the App upgrade guide: https://github.com/nextcloud/documentation/blob/master/developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_30.rst
• [ ] Post on the forum in the Development category about this update. Good examples are these posts by Daphne: https://help.nextcloud.com/t/on-the-roadmap-deprecation-of-php-7-4/149848 and https://help.nextcloud.com/t/update-on-32-bit-support-decision-to-block-the-update-on-nextcloud-26-reverted/153345