Login Page - User Interaction User Experience and User Interface for a better login

[Espina2]

So I haved time to look at the first screen of the Nextcloud the Login Page, and I see some things that should be modified.

First lets start for asking one question.

The only way to make new accounts for example to a enterprise company is to ask a sysadmin to create a new account? Why we can't have a new account here and the sysadmin just need to accept them, and if we want we can say that the emails that have "@nextcloud.com" are pre-aproved if you make a new account. So I think we should have a new account here for new users.

Second at the first look I can figure it out where I can reset my password. Actually we have a hidden button that dont are a button is a error message, but have a behaviour of a button.
We need to show the button to reset the password at first, and need to think better in our messages.

Third this is personal taste, we remove this background image from the website and I think that we should not use them here to. Why? Because this image doesn't add any value to the screen and are only visual noise that we dont want. I think we should remove them and just let the blue flat blackground do the work.

I will post some high fidelity mockups to show what my vision look. Anyway I want the opinion of all you guys. @nextcloud/accessibility @nextcloud/designers

[juliushaertl]

@Espina2 Thanks for having a look at the server design parts as well. 😃

The only way to make new accounts for example to a enterprise company is to ask a sysadmin to create a new account? Why we can't have a new account here and the sysadmin just need to accept them, and if we want we can say that the emails that have "@nextcloud.com" are pre-aproved if you make a new account. So I think we should have a new account here for new users.

As far as I now, this is already possible with the registration app. https://github.com/pellaeon/registration I guess most enterprise companies also rely on existing user management like LDAP I don't see a problem there. So for me the current situation is good enough.

Second at the first look I can figure it out where I can reset my password. Actually we have a hidden button that dont are a button is a error message, but have a behaviour of a button.
We need to show the button to reset the password at first, and need to think better in our messages.

👍 for that, we should definitely make it visible that clicking is possible here.

Third this is personal taste, we remove this background image from the website and I think that we should not use them here to. Why? Because this image doesn't add any value to the screen and are only visual noise that we dont want. I think we should remove them and just let the blue flat blackground do the work.

There is a feature request for using plain colors with the theming app #1414 - as you said, this is more a matter of personal taste, so I would keep the image and make it possible to switch to a colored background for the admin.

[eppfel]

@Espina2 You have some fair points, see #1404
About registering: I think, if we introduce this, it should be optional. Because most admins registering is an automatic approach and they don't need it.
About removing the background: I think it is good, if we have mockups for discussion. But as you stated yourself, we should use it to talk about the "bigger picture". nextcloud/nextcloud.com#140
And noise is not always bad..

[MorrisJobke]

@Espina2 Please don't use nextcloud/developers ... there are simply too many people in this group. We have several smaller teams that could be used for mentioning (like ldap, javascript, designers, ...- see https://github.com/orgs/nextcloud/teams) A rule of thumb: don't use groups with more than 20 people in it - except the designers group ;)

Second at the first look I can figure it out where I can reset my password. Actually we have a hidden button that dont are a button is a error message, but have a behaviour of a button.
We need to show the button to reset the password at first, and need to think better in our messages.

Oh yes! 👍

The only way to make new accounts for example to a enterprise company is to ask a sysadmin to create a new account? Why we can't have a new account here and the sysadmin just need to accept them, and if we want we can say that the emails that have "@nextcloud.com" are pre-aproved if you make a new account. So I think we should have a new account here for new users.

There is already a registration app for that purpose: https://github.com/pellaeon/registration But maybe we can polish the flow there too.

Third this is personal taste, we remove this background image from the website and I think that we should not use them here to. Why? Because this image doesn't add any value to the screen and are only visual noise that we dont want. I think we should remove them and just let the blue flat blackground do the work.

Go @jancborchardt! It's your baby 😉

[Espina2]

I forget one more thing we need a phisical button to in the login page, now we have an arrow and its a bit small and odd for mobile.

@juliushaertl @eppfel

The new user should be fast direct and easy. Of course it would be optional you can still go to your sisadmin and say to make you an account. But takes far more steps and you have to give a value password to another person or you need to write a new password make a login and after that change the password. This is not good User experience thinking, this should be more easy.

For the second point I disagree again we need to show a link always in the front page and dont have "content" hidden. I will make it more simpler and easy to understand when I publish the design mocks.

@eppfel @juliushaertl

The background thing, Design is like coding everything have to make sense, and now I dont see any sense in use an image that doesnt add anything to the actual content. Visual Noise in applications is always bad. But we can have different visions in what is visual noise. :)

@MorrisJobke

I already know that I can't do that. :)
Its more or less that what Im saying but we need this "app" to run in the login page. :)

[Espina2]

Some rough visual examples that Im talking about. Need some polishing in that. I use the same UI visual from the website so some things can be wrong to.

[jancborchardt]

Let me chime in on the points: :)

• Registration: As people said above there’s a registration app. Sure we could integrate this more if the use-case arises. Currently it’s mostly companies/organizations or private instances. Organizations usually use LDAP or some other systems, and on private instances you don’t just want people signing up. Everyone else can install the registration app. :)
• Password reset: We deliberately went with the »Reset password« function only showing up when you type it in wrongly. That saves a non-essential element on that page and helps you contextually. I do agree with the element not looking clickable enough, so we should change that. 👍
• Log in button: Yeah, we had a »Log in« button before, next to the »Stay logged in« checkbox. The new simpler design was inspired a lot by iCloud. We can reevaluate that, also because that was mentioned multiple times as point of confusion. 👍
• Background: We had a simpler blue background in the past and it was very bland and boring. That’s also what UX is about: Having something nice to look at. It’s like a background picture on your computer or mobile phone. Something people can personalize to make the software their own without going overboard tuning everything.

Regarding the new mockups, I’d like to see more text and reasoning in addition to the images. Currently a few things aren’t clear:

• Why the text »Log in« with the additional »in order to continue …« text above? It’s pretty obviously a log in page as people are used to that. The button already says »Log in«. It’s not needed and more distracting.
• How does the extra white container add to this screen? In general we keep the amount of elements and especially containers low.
• Similar for the fields: They are separated from each other even though they belong together. This creates more lines.
• The logo is quite small, and has the additional text. You know you’re on a Nextcloud already.
• The message about the entered password not being correct is very far away from the actual password field due to the other elements being on screen.

---

To conclude, it would be good to make the »Forgot password« text appear more clickable, and also to make the log in arrow seem more clickable or even bring the dedicated button back. However I don’t think that it necessitates a complete overhaul of the whole log in page. Especially because it was designed to be very simple and streamlined, not distracting people from actually logging in.

[Espina2]

@jancborchardt

Registration: As people said above there’s a registration app. Sure we could integrate this more if the use-case arises. Currently it’s mostly companies/organizations or private instances. Organizations usually use LDAP or some other systems, and on private instances you don’t just want people signing up. Everyone else can install the registration app. :)

The app creation mean that more than one people need to have that, this is lack of User Experience in my point of view. You have to see the things for another perspective and not only focus on the enterprise that prefer like these? The others doesnt matter? I dont want to argue with you for that you have the power of decision. :)

Password reset: We deliberately went with the »Reset password« function only showing up when you type it in wrongly. That saves a non-essential element on that page and helps you contextually. I do agree with the element not looking clickable enough, so we should change that.

If you make some research in all login field you can find I have 100% sure that they have the lost password visible? And why? Simple if the user doesnt know where it is we are going to write some random password to have this error message that magically have a lost password. One more thing you are miss judging people, not all people have the same know how in computer that we have. Just like the other you have to power of decision I don't agree with your thoughts in this. :)

Log in button: Yeah, we had a »Log in« button before, next to the »Stay logged in« checkbox. The new simpler design was inspired a lot by iCloud. We can reevaluate that, also because that was mentioned multiple times as point of confusion.

I think we should see better examples, iCloud doesnt work good in mobiles in this for me is more than a reason for not be a good example...

Background: We had a simpler blue background in the past and it was very bland and boring. That’s also what UX is about: Having something nice to look at. It’s like a background picture on your computer or mobile phone. Something people can personalize to make the software their own without going overboard tuning everything.

I can live with that but in addition to my personal taste if you make some research in login see that 99% doesnt have images, and I think is because the same things that I said on top.

For the mocks feedback, they all are rough and just made them quickly to make the people visualise what I am talking about. Can still be improved a lot. :)

[te-online]

I really like the effort on this one, here is another thought: Just recently, I had this strange idea 😉 – what if we would fade in the ”lost password“ link after someone didn't enter a username after n seconds. I figured that if you'd want to login and knew how to do it, you'd enter your username straight away. If not, we might assume that you're facing some kind of problem.

(I've seen this in a software where you are able to send a message by hitting return. Once you've entered a reasonable amount of text and didn't do anything for a while, it would show the hint that you could send the message by hitting return. I think that was my inspiration for this suggestion, also because the tone of the message was nice.)

If well executed, it could perfectly bring together a streamlined design and a helpful UI.

[tyrylu]

I agree, but you would probably want something like an aria live region for the faded password reset link, because this kind of interaction could in other cases make screen reader users wonder where it is. But i am not against it, i only wanted to point the unusuality out a little.

[skjnldsv]

@te-online Nice Idea!

I like @Espina2's idea a lot!
Here's my opinion:

• The blue background is indeed boring, like @jancborchardt said
• I like the login button
• The registration form should indeed be related to the app. I don't want anyone registering on my nextcloud instance. It's mine (my preciouuuus)!
• I like the white box around the form. I don't like the transparency we currently have
• I don't like the autologin when I paste my password. I would prefer having to type enter or click a login button

[Espina2]

@skjnldsv

The blue background is indeed boring, like @jancborchardt said

You can add at your own at your settings anyway, its more annoying when you inflict your taste to other people.

The registration form should indeed be related to the app. I don't want anyone registering on my nextcloud instance. It's mine (my preciouuuus)!

You have to aprove the new sign up or have something related in the settings (so this is not a problem). I think you can do that in the settings.

And I forget that we should verify automatically the email and give some feedback.

I suggest to see this prototype its a bit old but its very similar.

https://projects.invisionapp.com/d/main#/console/5246288/113054466/preview

[rullzer]

Just to add my €0,02

I don't think we should add registration on the login page. If you have a slightly bigger instance you want to use LDAP anyway and we can't automatically register new users with LDAP (nor do we want to open that can of worms).

What maybe would make sense is to allow apps to inject a link/content on the login page. So the registration page could add a 'register now!' type of link.

But please let this be an app thing as it sounds like something that can mess up things big time and we don't want to maintain that all in the main repo.

[oparoz]

The login button is back! Yes, please! ;) But I would not make it look like a field, I think a shorter button would work better.
Since the background is less than a 100Kb, I don't think it's much of an issue, especially since we can easily remove it. What I'd like to see though is support for patterns. Those are even smaller and often sufficient to add some depth to an otherwise bland login page.

[jancborchardt]

Please review the brought back log in button: #1641

[ChristophWurst]

There are some minor styling issues with the new login button on bright themes:

1. The transparent button background can make it unnecessarily difficult to read the button text. We should remove that.
2. The button's text and its arrow should have the same color. Having black text and a white arrow looks odd.

[jancborchardt]

@ChristophWurst good points! Actually the default button has no opacity. Removing it from theming at #1903 – just need some help adjusting the icon to black depending on the color. :)

[jancborchardt]

Both now fixed at #1903