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

• Top image & logo missing UI polishing firstrunwizard#71
• Icons on some entries missing UI polishing firstrunwizard#71
• Next button needs more padding, to 44px min clickability UI polishing firstrunwizard#71
• First slide should have a nice picture in content instead of text. (Like on Nextcloud flyer) - ideas are in UI polishing firstrunwizard#71

Files

• Move or copy buttons in dialog stacked on top, should be side by side Fix filepicker button layout on safari #10274

App management

• Enabling app should animate the entry away (collapse), otherwise it's not visible what happens - Fix remaining apps management issues #10103
• More vertical whitespace in right sidebar between elements Add more spacing to the apps management sidebar #10468

User management

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

Settings

• Personal info: Vertical whitespace is a bit much. If it's cause of the region format, put time and date on one row. Settings design polishing #10480
• Security/OAuth: list headers shouldn't be shown when there are no clients added - Design review / polishing items for Nextcloud 14 (overview issue) #10094
• 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 Settings design polishing #10480
• External storages: Settings menu should use 3-dot-icon, and delete action should go in there too (as last entry) Settings design polishing #10480
• Merge Server-side encryption into "Security" section? Settings design polishing #10480
• Groupware: "Calendar settings" instead of "CalDAV server", and more whitespace between settings. Settings design polishing #10480
• Workflow: Create a new tag input field should also create the tag on pressing enter Settings design polishing #10480
• Workflow: "Files automated tagging" should be renamed to "Automated tagging" Rename settings section to "Automated tagging" files_automatedtagging#57
• External sites: 3-dot-menu contents are shown by default, should not be. Also, it should be in a popover amd not just below. Fix settings papercuts external#115
• External sites: No proper confirmation when a site is saved, and does not immediately show in header Fix settings papercuts external#115
• External sites: settings.svg is only available in dark, and is the same as the "external" icon? Fix settings papercuts external#115
• 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 Settings design improvements circles#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. :)

[juliusknorr]

 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 #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

[juliusknorr]

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?

[juliusknorr]

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

[juliusknorr]

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

[juliusknorr]

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

• Increase checkbox spacing to have a 44px click handler Increase checkbox spacing to have a 44px click handler #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.