5.16 Login screen improvements
Closed, ResolvedPublic

Description

This task tracks our design process for the 5.16 lock screen theme redesign.

We are targeting the following changes for now:

  • Improve buttons' icons
  • Improve buttons' text labels
  • Improve buttons' selected/hovered behavior
  • Modernize text field + login button layout
  • Make it more obvious on the user switcher that the centered icon is for the current/selected user
  • Refine and town down the blur effect
  • Use shadows only when the wallpaper is blurred
  • Improve appearance in software rendering mode
  • Fix the numbers in the clock getting cropped (https://bugs.kde.org/show_bug.cgi?id=404651)

Related Objects

StatusAssignedTask
OpenNone
Resolvedrooty
There are a very large number of changes, so older changes are hidden. Show Older Changes

One small suggestion that applies to any design:
In the Password text box, would displaying something like "Enter Password for <username>" insteading of just "Enter Password" be helpful to make it clear which user you're trying to log in to?

If you do not want to design for the use case "2- ~5 user shared machine", then I don't think you need any kind of user avatar row. For one user it is totally pointless and for 10+ users typing the login (with autocomplete?) is better the selecting from an endless row of avatars.

If you do not want to design for the use case "2- ~5 user shared machine", then I don't think you need any kind of user avatar row. For one user it is totally pointless and for 10+ users typing the login (with autocomplete?) is better the selecting from an endless row of avatars.

I agree that the "endless row of avatars" is not optimal with 10+ users. For this, I would suggest a combobox with a text field. It's literally what the control was invented for: autocompleting text from among a list of choices, with the option to click on a little button that shows a graphical representation of all the options.

This really feels like a visual regression to me. I vote no on the design. I think we are trying too hard to accommodate to this idea and it is not working out visually. The wallpaper choice depends on the user, if the user feels that the image doesn't accommodate to the login design, then it's their choice to change their wallpaper.

Design accommodates the user, not vice versa.

We are doing this for the users, not to show off our fancy design. If our design generates user complaints and doesn't work with the thing that is most commonly changed (the wallpaper) I think the design not a success. With the current design, we've gotten many bug reports and user complaints. First about the ugly blue background, then about the fact that contrast was poor with many wallpapers, then with the fact that the blur makes their chosen wallpaper unintelligible. When we try to solve any of these issues, it only creates new ones rather than actually solving the problem. Additionally, right now the login screen has no structure and grouping as a consequence of not putting things in a box. The elements all feel disjointed and disconnected, especially the ones jammed into the bottom corners.

As a result, our designers want to endlessly redesign it, which is a sign that it's not the right design. When the design is correct, designers spontaneously stop wanting to redesign it. I've seen this over and over again.

I just don't think the current design works. What we had before in Plasma 5.7 and earlier was better IMO--and notably, it put everything in a box to ensure contrast with arbitrary backgrounds! I wasn't around back then, so maybe you have the missing context: what were the user complaints and unsolvable problems that the Plasma 5.7 and earlier login screen presented? Why did we throw it away and replace it with the current design?

We reacted to the fact that the design was simply too convoluted and distracting. We followed a perception that enclosing or boxing up every set of controls was old-fashioned when better results, more visual focus could be achieved with different control presentation. At the same time, I think if we base visual design solely on user complaints, we will never be able to provide a good user experience. If we are only reacting and not proposing user experience, we lose to innovation.

Our earlier changes was an opportunity for us to propose a user experience. That's why I speak of not trying to be everything for everyone, because we can't. Even if we come to a good place where you feel satisfied with visual decisions, our users will find a way to complain about it and it will make you think that you didn't get it right, so you have to go back to the drawing board and address the complaint. I think that after all this discussion, we have not found consensus. Then we have to think that leaving it alone is probably better. My take has always been that we need to work more with the controls themselves to style them instead of trying to make its environment change. That way we preserve the visual direction we had.

I hope the team can see my point and not simply barge forward.

ngraham added a comment.EditedJan 14 2019, 5:32 PM

We reacted to the fact that the design was simply too convoluted and distracting. We followed a perception that enclosing or boxing up every set of controls was old-fashioned when better results, more visual focus could be achieved with different control presentation. At the same time, I think if we base visual design solely on user complaints, we will never be able to provide a good user experience. If we are only reacting and not proposing user experience, we lose to innovation.

Our earlier changes was an opportunity for us to propose a user experience. That's why I speak of not trying to be everything for everyone, because we can't. Even if we come to a good place where you feel satisfied with visual decisions, our users will find a way to complain about it and it will make you think that you didn't get it right, so you have to go back to the drawing board and address the complaint. I think that after all this discussion, we have not found consensus. Then we have to think that leaving it alone is probably better. My take has always been that we need to work more with the controls themselves to style them instead of trying to make its environment change. That way we preserve the visual direction we had.

I hope the team can see my point and not simply barge forward.

Thanks for that context. I agree that excessive frames and boxes are bad. As you're aware, I've been leading the charge to reduce this throughout our QWidgets apps!

However a balance must be struck. With excessive enclosure, a UI feels heavy and oppressive. But without enough, it feels uncomfortable, like elements want to merge into one another. from a practical perspective, when elements feel like they want to merge, it reduces each element's distinctiveness and ability to fulfill its own purpose. We successfully and attractively use frames, boxes, and windows throughout Plasma already when we want to convey depth and separation, that one element is on top of something else, not an integral part of it.

The fundamental problem we have with the current design is that it does not accommodate arbitrary user wallpapers very well. We tried a blur, but that destroys the wallpaper. In D16031, I tried to preserve the wallpaper while keeping the essence of the current design, but it just never came together. It was clear that I was fighting the design.

That's why I speak of not trying to be everything for everyone, because we can't.

While there is wisdom and truth in this statement, it must be put in its proper context. We listen to our users. We give them what they want, or else they become annoyed and use different software, and then we don't have users anymore. This doesn't mean we react to every single complaint, but when users bring up legitimate points, we must listen. The fact is, the blurred login screen is ugly. It frustrates the user who wants to have a pretty picture there and it dilutes our own branding. If we innovate but people do not like it, we should have the humility to revisit our design rather than defending it and ignoring legitimate issues.

If we can come up with way to tweak the current design to 1) display the wallpaper without visually degrading it, 2) ensure contrast with any wallpaper, and 3) retain visual cohesiveness, I'm all for it. I didn't find a way to do that, but maybe others can!

alex-l added a subscriber: alex-l.Jan 14 2019, 6:19 PM

I'm mostly with Andy on this.

In my opinion the contrast argument isn't enough for another redesign.

To improve the contrast the wallpaper should be blurred and a black semi-transparent layer should be added to make the wallpaper darker. Additionally, a shadow can be added to icons and labels.

Please notice that we allow users to add icons with labels on the desktop with their wallpaper. The contrast argument applies there too, no? If yes should we remove icons from desktop or put them into rectangles? I think no, the user shouldn't choose a wallpaper that is problematic.

rooty added a subscriber: rooty.EditedJan 15 2019, 3:58 AM

hey guys i have a relatively simple question

this is what the mac login screen becomes with many user accounts:

listing all the users that aren't in focus at the moment on the left side of the entire layout might not be a bad idea (thank you windows)?

because whatever layout we choose (boxes/no boxes etc.) we're going to have to deal with user icons, and @filipf and i have been working on a redesign but we need to be told what direction to go in in terms of icons :D

There is also the possibility of getting the current theme to work without blur & fader. Something still rough (and including some other changes) I've been playing around with:

I would be all for that if we can make it look cohesive! Your changes look great Having everything being light or dark definitely improves the cohesiveness. However how would you implement the dark/light theming? For obvious reasons SDDM deosn't have access to user configuration data, so it can't just automatically use the same theme that your user account uses.

I would be all for that if we can make it look cohesive! Your changes look great Having everything being light or dark definitely improves the cohesiveness. However how would you implement the dark/light theming? For obvious reasons SDDM deosn't have access to user configuration data, so it can't just automatically use the same theme that your user account uses.

Yeah, we'd have to add an option to set a color scheme :/

It would also probably mean adding a mechanism that copies user made color schemes into the root directory so SDDM can access it.

It's more work, but IMO in the end a more elegant solution than just making two separate light and dark themes?

I think separate dark and light schemes makes more sense IMHO because:

  • It doesn't require code changes to the SDDM KCM
  • Then a Look-And-Feel package (e.g. Breeze Dark) can apply the correct SDDM theme

Good point. The only problem I'm seeing is that the password and login box cannot be assigned custom colors. The color is determined by the color scheme, which for root is always Breeze, which in turn means the boxes would always be white, even in the dark theme.

rooty added a comment.EditedJan 17 2019, 3:30 AM

We do have our own style though. How do you guys feel about just improving on the current design, because unlike any other OS or desktop environment I've used so far (including Windows that requires an extra swipe, macOS that has its date and time tucked away, gdm that don't seem to entertain the notion of a big clock at all, deepin that tucks it away in its bottom left corner), our current login screen doubles as a lock screen already (because of the clock, and hence there's no need for the wallpaperfader either). Something along the lines of:

Maybe just a dash of blur (like in this picture) to smooth out the potential literal rough patches of a wallpaper a user may choose.

I think a tiny bit of blur would almost be more frustrating than the current amount. It would look like a visual glitch rather than a deliberate effect.

rooty added a comment.EditedJan 22 2019, 4:54 AM

Since seeing Alex's improvements to Kwin's blur effect, I've abandoned the idea of implementing blur because it suffers from the same side effects Kwin used to (or... still does, until the diff's approved). In addition, I've noticed it makes people feel as though they suffer from nearsightedness.

How do you feel about this? No blur whatsoever.
It's basically your old proposal (ditch the blur and add shaded action buttons and user icons) except

  • I'm not sure if the fonts are slightly larger than your version, but they're definitely larger than master
  • no more WallpaperFader.qml seeing as we're not going to be needing it
  • without a footer (a footer is a great idea actually, but it makes things look kind of asymmetrical)
  • the "log in" button's gone and replaced with a button with an arrowhead (the lock screen would have to be changed as well, for the sake of consistency, but it's such a minor change I don't think it'd be a problem)
  • no border around the user icons (I think it looks better this way because it doesn't infringe on the user avatars + the actionbutton icons don't have them either)
  • the buttons use title capitalization unlike my older slightly shabbier mockups
  • the Different User button label's been replaced with Other

I've replaced the label "Different User" with Other for two reasons:

  • it's a better description (even if a little vague) of what the button does - namely it opens up a dialog with which you can log into any user's account (including the ones that were selected or listed but unselected, hence the word different doesn't really apply)
  • the label "Different User" is relatively long (14 characters), and the labels look fairly out of balance (tipped/tilted in the direction of Different User), the label "Other" makes the action button levels far more balanced in my opinion

vs

There's an issue however: poor visibility of the users that aren't selected/being logged into.

Other things to put forth for consideration:
I've noticed that certain people simply prefer having a username and password dialog as their default login screen over icon/avatar selection (Corporate setting? Tons of users?). So I think we should consider:

  • implementing settings that remember/retain whether a user prefers the username-password dialog, and that
  • we should hence replace the label "Back" (as well as its icon) with something more like "User Selection" (I haven't worked that part out yet)

In my mockup, I've also done away with the label "Log in as different user" because to be fair, the label's slightly misleading (Different from what? Also, I can log in as any user so it's not always a different user?)


This still needs a lot of work (as you can see). I'm not sure about the labels but I'd like for this to be a viable alternative (or a viable alternative default). The shadowing stands to be improved, and I haven't yet added shadows or an outline, or anything really to highlight the footer bar (in my case "Keyboard Layout" in the screenshots) which isn't that easy to read on top of a bright background.

P.S. This is what the lock screen would look like with the arrowhead button, font changes, and no border around the user avatar:

Admittedly, the spacing/padding/anchors are still a work in progress :D

filipf added a comment.EditedJan 22 2019, 10:57 AM

Current user delegate behavior wouldn't cut it. Leaving the footer as is poses even greater issues for legibility. There's three options:

  • use a panel -> simple hack; asymmetry gets solved by subtracting the footer height
  • expose the frames around footer text -> would look extremely ugly
  • use a darkening gradient at the very bottom -> we would be altering the user's wallpaper again

Example of the latter:

AFAIK adding shadows to the footer text isn't possible since it's all buttons.

Here's an idea for the inline login button issue:

  • On the page with the graphical user switcher, center the text field and put the login button on the right side
  • On the page with the username field, slightly reduce the width of the password field so the combined password field + login button are exactly the same width as the username field above them
rooty added a comment.Jan 29 2019, 6:19 PM

Is this okay?

GB_2 added a subscriber: GB_2.EditedJan 29 2019, 7:05 PM

How about this: we put the username input box where the "Enter User" label is.

rooty added a comment.Jan 30 2019, 2:00 AM
In T10325#174775, @GB_2 wrote:

How about this: we put the username input box where the "Enter User" label is.

Hey I like that idea

Good (plus @GB_2's idea, which I like)

For this representation, I think it might look nicer if the password field itself is centered, and the login button is off on the right side.

Are you sure though? It seems like it kinda sticks out too far beyond/to the right of "Other"

vs

rooty added a comment.EditedJan 30 2019, 10:45 AM
In T10325#174775, @GB_2 wrote:

How about this: we put the username input box where the "Enter User" label is.

Something like this?
How do you feel about the spacing? it doesn't seem even to me

rooty added a comment.EditedJan 30 2019, 12:00 PM

By the way guys it's been pointed out to me that the login button is off by a single pixel


But if I align it or anchor it, it's off by single pixel on top and at the bottom:
which seems to make matters worse (it looks too big).

There is a dirty solution to this problem:

implicitHeight: passwordBox.height - 2
Layout.rightMargin: 1

With this change, it looks pixel perfect no matter the font family or size, but is this an acceptable solution?

why i have to type the username when i can choose it

why i have to type the username when i can choose it

You don't; there are multiple views. This is the "choose a user by typing their username" view.

ngraham renamed this task from 5.16 Login screen redesign to 5.16 Login screen improvements.Feb 19 2019, 12:19 PM
ngraham updated the task description. (Show Details)
ngraham updated the task description. (Show Details)
ngraham reassigned this task from ngraham to rooty.Feb 19 2019, 12:38 PM
ngraham updated the task description. (Show Details)Mar 2 2019, 11:02 AM
rooty updated the task description. (Show Details)Mar 3 2019, 10:24 PM
ngraham updated the task description. (Show Details)Mar 3 2019, 10:27 PM
filipf moved this task from Backlog/Planned to Work in Progress on the VDG board.Mar 7 2019, 9:39 PM
filipf updated the task description. (Show Details)Mar 7 2019, 11:30 PM
rooty updated the task description. (Show Details)Mar 8 2019, 2:56 AM
rooty updated the task description. (Show Details)Mar 8 2019, 1:47 PM
filipf updated the task description. (Show Details)Mar 8 2019, 9:40 PM
ngraham updated the task description. (Show Details)Mar 8 2019, 10:05 PM
rooty updated the task description. (Show Details)Mar 9 2019, 6:52 AM
filipf updated the task description. (Show Details)Mar 9 2019, 8:34 PM
filipf added a comment.Mar 9 2019, 8:36 PM

We still have a little bit of polishing left to do.

Fixing the numbers in the clock getting cropped (https://bugs.kde.org/show_bug.cgi?id=404651) is a must. We could port to QQC2, probably implement QtRendering (again) or, what would be the best, fix it in Components.

Some ideas we could look into:
https://bugs.kde.org/show_bug.cgi?id=336369
https://bugs.kde.org/show_bug.cgi?id=391168

Another thing I've been thinking off is to somehow have the login button's appearance change after text gets typed in.

Not the login screen, but since we've been touching all of them up: "Oh by the way, and I know I should write a bug report about that, but when switching users, there is this giant PLUS icon above a "new session" label, and under all that a "Start a new session" button. It bugs my significant other that the PLUS icon is non-clickable. :-)" - user opinion

I agree that this could be done better.

That drives me bananas too! It looks so tantalizingly clickable. +1 for replacing it with something that doesn't look like a button. Also, I'd like to make this screen not even appear at all when there's only one existing session; instead just go straight to SDDM: https://bugs.kde.org/show_bug.cgi?id=386361

rooty added a comment.Mar 11 2019, 3:18 AM

Oh one more thing - should we push the entire clock + stack a little bit further down to make it more (or entirely) vertically centered?

It's not centered at all at the moment.

ngraham closed this task as Resolved.Mar 20 2019, 5:52 PM

Congratulations everyone! Now let's never touch it again lol

rooty added a comment.Mar 20 2019, 7:29 PM

Congratulations everyone! Now let's never touch it again lol

Hear, hear :D