Shadow for buttons looks strange and off-style

[jancborchardt]

Check this out @nextcloud/designers:

Especially on the upload button and the dropdowns it just looks a bit strange. We do not have 3D-like effects anywhere else really, except the shadows of the app and user menus. And it separates the style even more from the one we have on the website which is definitely not something I want to do.

@skjnldsv I assume this was part of a recent SCSS overhaul? Could we keep backend changes and severe look changes separate? ;)

[jancborchardt]

Fix at https://github.com/nextcloud/server/pull/3204, please review

[ChristophWurst]

I don't think it looks that strange/bad :-)

[eppfel]

@skjnldsv I assume this was part of a recent SCSS overhaul? Could we keep backend changes and severe look changes separate? ;)

No, this was part of a separate discussion here: #3121 and the PR got in over the weekend pretty fast: #3187

And I feel because, we don't use 3D anywhere it works so good. Buttons need to be more prominent, so if we do not use shadows, I would like to find another option.

[jancborchardt]

Why do the buttons need to be more prominent? They are not the most important thing on the page. In the Mail app for example, or in Contacts, it just looks strange:

The »New contact« button is definitely too distracting with the shadow style. The prominent placement on the top left is already enough to establish it as the action. Having the 3d effect just makes it look extraordinarily out of place.

[eppfel]

I also felt it looked a bit weird and therefore I encouraged @skjnldsv to do an PR to see it more in context, but it was merged before it was properly reviewed.

Why do the buttons need to be more prominent?

The distinction between inputs and buttons was the shallow IMO. So for forms the 3D buttons work very well for me (see OP).

The »New contact« button is definitely too distracting with the shadow style.

Maybe this is an issue with buttons in the sidebar? See calendar for example:

[MariusBluem]

Maybe this is an issue with buttons in the sidebar? See calendar for example:

This is something introduced with https://github.com/nextcloud/server/pull/3150 and has nothing to do with the buttons, I think 😁 ... Good catch anyway ... Please open a new issue for that 🤔 @eppfel

[MariusBluem]

I want to add, that I ❤️ the 3D-Effect at the tags 😁 ... maybe there is a way to keep it 🤔 What do you think about that?

[eppfel]

This is something introduced with #3150 and has nothing to do with the buttons, I think 😁 ... Good catch anyway

I did not meant to show the highlight issue. I wanted to exemplify, that in the sidebar, we maybe do not need a "button" for the "new x" anyway.

[eppfel]

[jancborchardt]

This is two different topics:

1. Distinction between input fields and buttons, which I also brought up in https://github.com/nextcloud/server/issues/3121#issuecomment-273632502 – this is done via bolding and slightly darker background. The additional shadow honestly looks like a bit outdated webdesign.
2. Making the buttons / add functions in the sidebar have the proper affordance. This was brought up multiple times before when we did not have the button style and we should do it with the border so they look like other clickable buttons. This change was made on purpose already, and it should be separated from this discussion.

So for forms the 3D buttons work very well for me (see OP).

@eppfel forms area very small part of Nextcloud though. Even in the settings, mostly it’s just single fields with confirm buttons.

[skjnldsv]

For clarification, this is part of the new inputs design I rewritted from the old one: #3121 The implementation of the better hover effect is the blue border, not the 3D effect.

Concerning the 3D effect, This is exactly like @eppfel said

And I feel because, we don't use 3D anywhere it works so good. Buttons need to be more prominent, so if we do not use shadows, I would like to find another option.

I feel like the old buttons looked kinda out of place and those new ones really refresh nextcloud a little bit. 😃

[Espina2]

I agree that buttons should be different but this 3D effect...

[Espina2]

And we should decide a paradigm, if you use shadows and 3D "styles" it should reflect in the other elements. Like It are now, I dislike it and agree with @jancborchardt.

[skjnldsv]

Why is there suddenly so many people discussing this issue AFTER this has been implemented? I mean, all the designers have been notified, and coming after the talk really bothers me.

I would have loved so more reviews/opinion when I was developing this.

[Espina2]

@skjnldsv sometimes people doesn't have the time see all the notifications that they had on github.

But if we see something that we think its not good enough we should not say nothing?

If you feel bad for implementing and have "bad" feedback, just wait to people give more feedback.

[skjnldsv]

@Espina2 well no, you should obviously said something! But having a hard time to find reviewers and suddenly seeing a lot of active devs for complaining doesn't makes me feel very good.

We'll wait anyway, that's how it works.

[raimund-schluessler]

Why is there suddenly so many people discussing this issue AFTER this has been implemented? I mean, all the designers have been notified, and coming after the talk really bothers me.

Sorry, for commenting just now, but I just didn't noticed the shadow effect in https://github.com/nextcloud/server/issues/3121.

I would also vote for not using a 3D/shadow effect and use a different solution for making buttons more obvious. However, this just my personal preference.

[Espina2]

@skjnldsv Don't get me wrong, I know its frustrating to do something and listen people talk "bad" about that.

Sometimes its difficult to understand how it will look a change in the whole project just with the mockup, so when you see the big picture this can happen.

Design is like this, trial and error, sometimes you hit sometimes you not. :)

[eppfel]

@jancborchardt @Espina2 I can see the issues with the 3D looking different, although we use depth on pop-overs.

this is done via bolding and slightly darker background.

I feel this is not enough, but we could work on this in another issue.

Making the buttons / add functions in the sidebar have the proper affordance. This was brought up multiple times before when we did not have the button style and we should do it with the border so they look like other clickable buttons. This change was made on purpose already, and it should be separated from this discussion.

Was not aware. I understand.

@skjnldsv I think you are just too fast for all the other nextclouders 😉 ❤️ Your new inputs are not even a week old. So it should not have been merged over the weekend.

[jancborchardt]

@skjnldsv I was on the issue and reviewed it, and that was before the very different 3D styles were added. I have a ton of issues in my notifications which I didn’t check over the weekend and assumed it was solved nicely. And it really was – literally my only problem with it is the strange 3D style :)

As you can see from how it looks in the different apps (here also in Calendar), it was really merged too fast:

Sorry about that, but oftentimes people only notice things off when they are in master. And while that’s frustrating sometimes, in this case it was a very fast pull request and this is something I really like in our community: We discuss stuff, but also not limitless. We trust long-term contributors with their actions.

Lots of stuff I did over the years has been changed sooner or later (just look at the log in button / icon stuff ;) so please don’t be discouraged. You do amazing work! This is just one detail.

[MorrisJobke]

Sorry about that, but oftentimes people only notice things off when they are in master. And while that’s frustrating sometimes, in this case it was a very fast pull request and this is something I really like in our community: We discuss stuff, but also not limitless. We trust long-term contributors with their actions.

Yes - we should definitely refine this - but otherwise it wouldn't have been merged and would still be open in 10 months or so ;)

[skjnldsv]

@nextcloud/designers Okay, less complaining about the shadow and more propositions now :)

We've got two issues to work on:

1. The 3D effect doesn't seems to fit your views on the nextcloud design
2. Our buttons lack of differences compared to a simple text input. What can we do to improve that?

Please make suggestion with screenshots and/or good explanations.

Again, aside from things that are slightly broken (like the calendar buttons) only take the design in consideration, whatever results from this change is irrelevant since it's normal no have to fix things after such a change.

[jancborchardt]

@skjnldsv I made a proposal with »remove button shadow effect #3204« and think that already improves it a lot over the current state.

[icewind1991]

Making button more prominent is important but I think we should be selective about which buttons we make more prominent, there are plenty of button in the interface that really don't need to be prominent

[skjnldsv]

@jancborchardt I don't think that's enough. We just roll back to the original problem, there isn't enough distinction over regular stuff we can find all over nextcloud.

What's bothering you the most about the 3d effects? Is it just because we don't use that nowhere else? I still think they aren't that big and imposing and that they fit pretty well in the overall design 😄

[jancborchardt]

• We don’t use that style or something similar anywhere else.
• They are distracting as they pull attention away. Whenever I read my emails now, the »New message« button in the Mail app just stands out like a sore thumb.
• It was not tested properly, as it breaks core apps already (Calendar, and even in Files with the shadow on the Gallery switch button). The feedback from now a lot of people confirms that.
• The style was used in websites 3–5 years ago when the inset effect was used for this 3d style. That makes it look outdated.
• The distinction with #3204 is enough via bold typeface, centering of text and different background.
• We have a way of making specific buttons more prominent, and that is via the .primary class which we do use (although should sparingly). Like for Reply/Send in the Mail app, or the file picker popup.

I can give the arguments all over again, but sorry – one of our tenets is to be pragmatic. So at some point I just have to make a decision because this detail discussion is keeping us from doing more important things. :)

[skjnldsv]

They are distracting as they pull attention away. Whenever I read my emails now, the »New message« button in the Mail app just stands out like a sore thumb.

It's to encourage you to write more mails 😆

The style was used in websites 3–5 years ago when the inset effect was used for this 3d style. That makes it look outdated.

The current grey one doesn't feel very new either! 😛

[eppfel]

we should be selective about which buttons we make more prominent

@icewind1991 🙏 amen

The distinction with #3204 is enough via bold typeface, centering of text and different background.

@jancborchardt I disagree.

We have a way of making specific buttons more prominent, and that is via the .primary class which we do use (although should sparingly). Like for Reply/Send in the Mail app, or the file picker popup.

Yes, we should definitely reevaluate, if there are other places for this one...

The style was used in websites 3–5 years ago when the inset effect was used for this 3d style. That makes it look outdated.

The current grey one doesn't feel very new either! 😛

@skjnldsv I feel the same way.

one of our tenets is to be pragmatic

But this is the important part. This issue and the corresponding PR is only about the shadow effect. All other changes @skjnldsv are not for discussion. I feel we have to acknowledge that there are too many objections and be constructive. I am confident @nextcloud/designers will find something even better. :fist: :heart:

[jancborchardt]

Yup – and one of the important learnings from this again is that pull requests should be small so that one small detail doesn’t block the whole thing. ;)