Rethink blur-by-default for Breeze SDDM login screen theme for Plasma 5.15
Open, Needs TriagePublic

Description

It's too late for 5.14, but for 5.15, we might want to rethink the blur-by-default for our Breeze SDDM login screen theme.

To recap: in 5.13, for the lock and login screens, we added a darkened blur over the background to ensure that the white text and un-framed UI controls always have sufficient contrast against the background.

On the lock screen, the UI controls are not visible by default, so the blur only shows up in response to any user interaction. This means that the lock screen background is visible and pretty for a while.

Lock screen default view:

Lock screen view after any user interaction:

On the login screen, the controls are visible by default, so the blur is as well. This means that the background is pretty much always blurred and obscured. This isn't the most aesthetically pleasing state of affairs, and I've encountered a quite a bit of negative user feedback about it. I'll admit that I share some of it, because the 5.13 Breeze SDDM login screen theme was a bit of a regression for me given that the background I use didn't need to be darkened and blurred to ensure contrast for the UI elements.

SDDM Login screen view:

Let's brainstorm ways to improve this situation for the Breeze SDDM login screen theme. I'll throw some ideas out there:

  • Turn off blur-by-default and put a buttonlike background behind all the buttons and a shadow and/or outline behind the white text of the clock and usernames. See also T9444.
  • Turn off blur-by-default and put everything inside an opaque or semi-translucent windowlike frame, and redo the user switcher so that the user list always fits within the frame.
  • Other options?

If we make any of these changes, we could probably turn down the strength of the blur and darkening effects, too.

We should also consider whether or not to make the same changes for the lock screen theme to maintain visual consistency.

ngraham created this task.Sep 9 2018, 3:02 PM
abetts added a subscriber: abetts.Sep 9 2018, 3:17 PM

So is the transition into blur that received some of that feedback? Or the fact that we use a darkened background?

So is the transition into blur that received some of that feedback? Or the fact that we use a darkened background?

I don't think we can separate the blur from the darkening effect; they are part and parcel of the same thing in this context.

People seem happy enough with the transition into a darkened blur on the lock screen. It's the semi-permanent darkened blur on the login screen that some people (myself included) are dissatisfied with.

abetts added a comment.Sep 9 2018, 6:13 PM

I see, and the login screen doesn't have any kind of similar application like the lock screen? Can it be sharp image > input > transition to blur ?

I see, and the login screen doesn't have any kind of similar application like the lock screen? Can it be sharp image > input > transition to blur ?

If we emulate the Lock screen's UX and make the image un-blurred before user input and a transition, then the login screen won't have the user, password field, or buttons visible until there's some user interaction. We decided that this wasn't appropriate for the Login screen, and that we needed to have the UI elements visible by default. Hence, the login screen has a semi-permanent darkened blur over the background, which hasn't proved as popular as it is on the the lock screen where it only appears after a transition.

ngraham updated the task description. (Show Details)Sep 9 2018, 6:33 PM
ngraham updated the task description. (Show Details)
ngraham renamed this task from Rethink blur-by-default for Breeze SDDM theme for Plasma 5.15 to Rethink blur-by-default for Breeze SDDM login screen theme for Plasma 5.15.
ngraham updated the task description. (Show Details)
huftis added a subscriber: huftis.Sep 16 2018, 4:11 PM

Could the image be sharp "as sddm is loading" and turn blurry when the controls appear?

The loading time isn't actually that long though. And then once it does load (which might be in as fast as half a second), you lose the pretty background image. I'm not sure that will work.

I have a fairly trivial patch that removes the darkened blur and state change (which will also fix https://bugs.kde.org/show_bug.cgi?id=398115). As a result, the login screen looks fantastic again due to the gorgeous new 5.14 wallpaper used as the background image. But the real issue here is improving the contrast with everything else to avoid the issue that prompted us to add the darkened blur in the first place. T9444 will address the buttons on the bottom (as well as fix https://bugs.kde.org/show_bug.cgi?id=393048). After that, we would just need to add drop shadows to the remaining white text and the user avatars and I think we could consider the contrast problem solved.

Also of note: drop shadows don't appear when using software rendering (see https://bugs.kde.org/show_bug.cgi?id=398317). For that case, we should fall back to using plain outlines instead.

The loading time isn't actually that long though. And then once it does load (which might be in as fast as half a second), you lose the pretty background image. I'm not sure that will work.

I have a fairly trivial patch that removes the darkened blur and state change (which will also fix https://bugs.kde.org/show_bug.cgi?id=398115). As a result, the login screen looks fantastic again due to the gorgeous new 5.14 wallpaper used as the background image. But the real issue here is improving the contrast with everything else to avoid the issue that prompted us to add the darkened blur in the first place. T9444 will address the buttons on the bottom (as well as fix https://bugs.kde.org/show_bug.cgi?id=393048). After that, we would just need to add drop shadows to the remaining white text and the user avatars and I think we could consider the contrast problem solved.

Also of note: drop shadows don't appear when using software rendering (see https://bugs.kde.org/show_bug.cgi?id=398317). For that case, we should fall back to using plain outlines instead.

It seems we are limited by our tech here. I say, let's give the change a try and get feedback. But let's avoid bouncing between one or the other with every release. I know that there could be people in both sides of this idea, but part of being a good designer is sticking to your vision. There will always be people thinking that it is not the best approach, we can change, but when we change too much, it becomes unsustainable.

But let's avoid bouncing between one or the other with every release. I know that there could be people in both sides of this idea, but part of being a good designer is sticking to your vision. There will always be people thinking that it is not the best approach, we can change, but when we change too much, it becomes unsustainable.

I agree.

Thing is, I'm not sure always-blur-the-login-screen actually was our vision. If I recall, we all loved the state change and sharp-by-default-blur-when-the-controls-become-visible effect for the Lock screen, but were more ambivalent about always-blur-the-background effect for the Login screen (see D11928#241045). But we ran out of time to come up with something clever for 5.13 so we shipped it that way despite wanting something better. This is the discussion regarding something better. :)

I think the Lock screen is just about perfect, and I haven't heard any user complaints about it. All the complaints center on the login screen: people miss being able to see the pretty image used for the background because it's all blurry and dark right now.

Let's go for it then :)

I'm working on patches that:

  • Add shadows behind the buttons' text
  • Add a blurred circle background behind the buttons' icons when the icons themselves have a semi-transparent circular background
  • Remove the blur

I believe @pstefan is working on the new Plasma Breeze theme icons that would be compatible with the blurred circle effect, which has been designed to result in no changes when using icons that do not have a semi-transparent circle background.

Any update on the icon front, re: different background color? Right now my stylesheet class attribute in the icons is "ColorScheme-ViewBackground", which is a light color in the normal breeze color scheme. My thinking was that it would use the breeze dark color scheme on the login screen. Is that assumption correct or do I need to change that?

rooty added a subscriber: rooty.Mon, Oct 8, 1:03 PM

I see, and the login screen doesn't have any kind of similar application like the lock screen? Can it be sharp image > input > transition to blur ?

If we emulate the Lock screen's UX and make the image un-blurred before user input and a transition, then the login screen won't have the user, password field, or buttons visible until there's some user interaction. We decided that this wasn't appropriate for the Login screen, and that we needed to have the UI elements visible by default. Hence, the login screen has a semi-permanent darkened blur over the background, which hasn't proved as popular as it is on the the lock screen where it only appears after a transition.

what about blur that's not darkened by default? too much glare?

rooty added a comment.Mon, Oct 8, 1:07 PM

regarding D15999, it's less of a stopgap measure to deal with the icons and their thickness (they're too thin? especially compared to icons in other themes such as Adapta) and shadows (might require more contrast) than to add a semi-transparent background that makes them look 2D, as mentioned in D16031 by broulik

while i agree that the (current) blur requires rethinking and the contrast on the lettering does too, the icons might call for a different tack

RE: D16031 I think the background circle for the avatar should either be dropped or flush with the white border.

  • First, the white border is already that, a border. It's independent of the avatar used
  • It's a low information area. Even if the contrast with a particular background is bad, there is no important information in the picture that gets lost
  • A User might expect the transparent parts of their avatar to be shown as such, and not obstructed by another background.

For the fonts; They need to be much more close to the text they are protecting. The clock gets this right IMO. Especially on the last screenshot in D16031, the shadow behind the username looks like a cloud. Without knowing how it's done technically, I looks to me like it's just a diffuse oval. However, the shodow of the clock seems to actually follow the contour of the digits/characters. Maybe we can look into how they did that.

rooty added a comment.Mon, Oct 8, 5:43 PM

@pstefan What's your opinion on the lock screen font shadows?

alexde added a subscriber: alexde.Mon, Oct 8, 6:29 PM
filipf added a subscriber: filipf.EditedMon, Oct 8, 9:21 PM

Okay so I suppose this is the place (as opposed to D16031 and D15999) to lay out all the summative thoughts after seeing the first implementation. I will break it down into elements:

Turning blur off

  • opinion: sorry @rooty but if users are complaining about wanting to see their wallpapers, it's preferable to have no blur by default because it is something added that you impose on someone's wallpaper; those who like it can use a forked 5.14 Breeze SDDM theme or the Chili theme.

New icons (circles)

  • suggestion: scale down the icon itself within the circle, a bit
  • a big aesthetic desire: make the Breeze desktop theme icons thicker
  • a mention: perhaps the circles do not need an extra border, no matter how faint it is

New SDDM theme modifications

  • suggestion: do not add any sort of background behind the user icon
  • suggestion: rethink the shadows behind the action buttons text
  • suggestion pending visual testing: add blur behind circles

The Logout screen

  • opinion: we should have automatic switching of icons -> white circles when using dark color schemes because the effect dims the screen (wheras with light schemes it brightens it)

For more on this (@pstefan), you can see an example solution for dark color schemes and the solution for light color schemes

Ruminations on SDDM theming

  • a very passionate opinion: It's not KDE per se, but SDDM is the most anti-KDE thing about KDE right now -> It's completely uncustomizable, even to the point of needing to add (!) code to change something as simple as the desired font
  • a shy suggestion for outlier cases: I realize there is no desire to address this, but what can at least be helpful is to provide a new Breeze Dark (?) variant in which all the elements are dark

Breaking it down to the simplest level:

State 1: a plain white background -> What do you want your SDDM theme to look like? = Pretty much that ALL your elements are black, including the circles.
State 2: a plain black background -> What do you want your SDDM theme to look like? = You want all the elements to be white, including the circles.

We currently do not offer this definitive solution for state 1 and are instead focusing on making a jack-of-all-trades one. To be sure, real life and wallpapers are more complex than these simple scenarios and usually black text looks ugly, however you do possibly address the most extreme of cases if you provide a new all-dark SDDM theme.

EDIT: Quick visual proof of the feasibility of a dark theme:

ngraham added a comment.EditedTue, Oct 9, 6:45 PM

Re: full-screen blur
I'm not open to keeping it in any capacity for aesthetic and promo reasons. People (myself included) quite understandably want to be able to see the background image, not a smudgy version of it. This is the first thing you see after installing Plasma and booting up the computer, and it's important to make a great first impression here.

Re: heavier line weights for Breeze icons
I rather agree, but such a change would need to be done for all icons simultaneously to avoid the theme looking weird and inconsistent. Not a bad idea, but out of scope for this project.

Re: Scaling down the icons in the circles
No opinion; I will defer to @pstefan for that.

Re: Background circle on the avatar
Non-negotiable, or else the default icon disappears against many backgrounds. I will reduce the thickness of the border though to 1 or 2px; see D16031#339559

Re: More options needed for Breeze SDDM theme
Don't necessarily disagree, but I don't feel like fighting that battle. Would prefer to take the path of least resistance with this project. I do think it would be feasible for the text and icons' colors to follow the active theme though. It's a bit odd how the text field and Login button switch their coloration dynamically in response to this, but the other elements do not.

filipf added a comment.Tue, Oct 9, 9:46 PM

Thanks for the reply, Nate, and sorry if I've digressed too much during the course of this whole topic - my mind gets racy when I see things that can potentially be changed and then I want to type it all out.

What I added about the thickness of Breeze monochrome icons and improving the customizability of SDDM is just something to consider in the future maybe, right now what's important is to turn off blur for 5.15 and provide a visual solution that will satisfy most users. I think you're pretty close.

ngraham moved this task from To Do to Work in Progress on the Plasma board.Thu, Oct 11, 11:02 PM