Server: Design review / polishing items for Nextcloud 14 (overview issue)

[jancborchardt]

Had a design review session of latest master with @karlitschek today, here are the results:

General

• [ ] Font is not loading? Testing on Frank's laptop, only Helvetica showed, not Open Sans

First run wizard

• [x] Top image & logo missing https://github.com/nextcloud/firstrunwizard/pull/71
• [x] Icons on some entries missing https://github.com/nextcloud/firstrunwizard/pull/71
• [x] Next button needs more padding, to 44px min clickability https://github.com/nextcloud/firstrunwizard/pull/71
• [x] First slide should have a nice picture in content instead of text. (Like on Nextcloud flyer) - ideas are in https://github.com/nextcloud/firstrunwizard/pull/71

Files

• [x] Move or copy buttons in dialog stacked on top, should be side by side #10274

App management

• [x] Enabling app should animate the entry away (collapse), otherwise it's not visible what happens - #10103
• [x] More vertical whitespace in right sidebar between elements https://github.com/nextcloud/server/pull/10468

User management

• [x] Layout is not responsive at all. Should narrow down column widths #10283
• [x] "no more results" is not necessary, the whitespace is enough #10283
• [x] Header labels don't match up with new user input placeholders ("Full name" vs "Display name") #10283
• [x] Table headers should be lighter font color than the rest of the text https://github.com/nextcloud/server/pull/10480
• [x] "Groups" header doesn't need to be shown when there are no groups #10283
• [x] Clear button (x) on new user entry not needed, also too dangerous for misclicks to put it next to the confirm button #10283

Settings

• [x] Personal info: Vertical whitespace is a bit much. If it's cause of the region format, put time and date on one row. https://github.com/nextcloud/server/pull/10480
• [x] Security/OAuth: list headers shouldn't be shown when there are no clients added - #10094
• [x] External storages: Could use a settings-hint text like "You can mount different storage services as folders into your Nextcloud." Global credentials also needs explanation https://github.com/nextcloud/server/pull/10480
• [x] External storages: Settings menu should use 3-dot-icon, and delete action should go in there too (as last entry) https://github.com/nextcloud/server/pull/10480
• [x] Merge Server-side encryption into "Security" section? https://github.com/nextcloud/server/pull/10480
• [x] Groupware: "Calendar settings" instead of "CalDAV server", and more whitespace between settings. https://github.com/nextcloud/server/pull/10480
• [x] Workflow: Create a new tag input field should also create the tag on pressing enter https://github.com/nextcloud/server/pull/10480
• [x] Workflow: "Files automated tagging" should be renamed to "Automated tagging" https://github.com/nextcloud/files_automatedtagging/pull/57
• [x] External sites: 3-dot-menu contents are shown by default, should not be. Also, it should be in a popover amd not just below. https://github.com/nextcloud/external/pull/115
• [x] External sites: No proper confirmation when a site is saved, and does not immediately show in header https://github.com/nextcloud/external/pull/115
• [ ] External sites: settings.svg is only available in dark, and is the same as the "external" icon? https://github.com/nextcloud/external/pull/115
• [x] Talk settings: Lots of space between "Shared secret" label and input field
• [ ] Circles app settings: Should be in Groupware, left-aligned, use our checkboxes, no testing option https://github.com/nextcloud/circles/issues/217

Still to discuss

• [ ] Add nice header images for Settings sections of more obscure features like federated sharing, File access control, Workflow, Groupware, etc. Basically like on the website https://nextcloud.com/workflow with image, heading and subtitle
• [ ] Sharing: More padding for checkbox entries, 44px as usual
• [ ] Federated cloud: Could use a nice graphic? Also we should add more explanatory text from https://nextcloud.com/federation
• [ ] Padding for checkbox settings (bottom left Files settings, Files sidebar link share options, Sharing settings): every entry needs at least 44px height for clickability, and more whitespace between checkbox and text

[jancborchardt]

cc @nextcloud/designers @nextcloud/javascript lots of small tasks to pick up in there also. Good for getting friends involved too. :)

[Bournout3000]

Will there be AMP support anytime soon?

[ykcab]

Hello team,
I see that issue #6965 was closed, how can we track this in next release and do we have the beta ready to test?

[MorrisJobke]

Hello team,
I see that issue #6965 was closed, how can we track this in next release and do we have the beta ready to test?

@ykcab This has nothing to do with this ticket. #6965 will be included in Nextcloud 14 and the first beta for this is planned to be released end of next week.

Will there be AMP support anytime soon?

Has nothing to do with this ticket and there is also nothing planned, because there is no real benefit seen from this. If you want to discuss this, please open a new ticket, but it's likely to be closed again if there is no real benefit for the Nextcloud project to be seen.

[ykcab]

Thanks @MorrisJobke

[juliushaertl]

 Font is not loading? Testing on Frank's laptop, only Helvetica showed, not Open Sans

Move or copy buttons in dialog stacked on top, should be side by side

I cannot reproduce those. What browser did you use when testing?

 Padding for checkbox settings (bottom left Files settings, Files sidebar link share options, Sharing settings): every entry needs at least 44px height for clickability, and more whitespace between checkbox and text

Increasing the padding here will make the whole layout look a bit out of place in my opinion:

@jancborchardt Having 44px height makes sense for the share options and the first checkbox to toggle the link share, but I would keep the small height for the link share options. I think an increased click target to 44px doesn't work well here, since you cannot clearly separate between the two lines.

[jancborchardt]

Increasing the padding here will make the whole layout look a bit out of place in my opinion:

Right, also true. We should really put all these things in a proper popover like started in https://github.com/nextcloud/server/pull/7010, but I need help with that. ;)
And then we will also have a proper whitespace between radio/checkbox and the text.

 Font is not loading? Testing on Frank's laptop, only Helvetica showed, not Open Sans

Move or copy buttons in dialog stacked on top, should be side by side

I cannot reproduce those. What browser did you use when testing?

Yes, the font issue I can not reproduce either, and others couldn’t either? Might be specific to @karlitschek’s setup?

The move or copy buttons seem to only be broken in Safari, just tested with @MorrisJobke

[karlitschek]

@jancborchardt @MorrisJobke @juliushaertl possible that the font loading issue is triggered by my ad blocker or something else. I will investigate.

[MariusBluem]

• [ ] Adding icons as done in Talk (or is it only a bug that they are not shown)

[MorrisJobke]

Adding icons as done in Talk (or is it only a bug that they are not shown)

There are none - planned in the sidebar overview ticket: #10289

[juliushaertl]

Federated cloud: Could use a nice graphic? Also we should add more explanatory text from https://nextcloud.com/federation

@jancborchardt Do you have any specific graphic in mind for that?

[juliushaertl]

Add nice header images for Settings sections of more obscure features like federated sharing, File access control, Workflow, Groupware, etc. Basically like on the website nextcloud.com/workflow with image, heading and subtitle

@jancborchardt I don't like adding big images to the UI. I think they add to much visual distraction from the settings and don't provide any value regarding the content. We should keep it simple there and focus on providing a simple description and a link to possible extended documentation there.

cc @nextcloud/designers

[juliushaertl]

Padding for checkbox settings (bottom left Files settings, Files sidebar link share options, Sharing settings): every entry needs at least 44px height for clickability, and more whitespace between checkbox and text

We could add a padding to all checkboxes with their labels in the global input css, but I would suggest to do this for 15, since i would expect this might cause quite some bugs all over the places where the checkboxes are used.

[ykcab]

Hi team,
I was curious if there is a work around on this issue "Content-Security-Policy" with CloudFlare. I just installed the beta version and this issue persists on 14 beta.

[rullzer]

@ykcab please open an issue for this so we can discuss it

[juliushaertl]

Should be all fixed now, besides those I moved to separate issues for further discussion:

• Increase checkbox spacing to have a 44px click handler https://github.com/nextcloud/server/issues/10617
• No feedback so far on my questions regarding the graphics for settings @jancborchardt Please open a new issue regarding that with some more details, so we can discuss it for 15.