UI confusion between login and alternative login (registration for instance)

[pierreozoux]

Steps to reproduce

I have 2 ways for creating account for people:

• self service with https://github.com/pellaeon/registration/
• I create account for people with the traditional xCloud account creation, and send a mail to people

In the second case, there is an issue, I'd say 80% of people don't see the login button of xCloud, and click on registration.

Here is a screenshot: https://cloud.pierre-o.fr/index.php/s/tQkgXCzA91nohMo (I now use Nextcloud)

I'm not a UI expert, but would be nice if we could fix that.

Expected behaviour

It should be easier from a UX perspective to understand the difference between login and register.

Actual behaviour

People do mistakes.

[pellaeon]

Proposed fix for Nextcloud

If alternative login method exists, then bring back the Nextcloud login button.

[nickvergessen]

@jancborchardt

[jancborchardt]

There should absolutely be no other button on that screen. The word »Alternative log in methods« (wording needs to be fixed to that) should be there solely. When clicked, the other methods can expand via slidedown.

[pierreozoux]

sounds nice.

Even though, some people already asked where is the button to login :)

Looks like sing in / register is the nice combo :)

http://uxmovement.com/buttons/why-sign-up-and-sign-in-button-labels-confuse-users/

http://ux.stackexchange.com/questions/1080/using-sign-in-vs-using-log-in

On 14-09-2016 18:24, Jan-Christoph Borchardt wrote:

There should absolutely be no other button on that screen. The word »Alternative log in methods« (wording needs to be fixed to that) should be there solely. When clicked, the other methods can expand via slidedown.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/nextcloud/server/issues/1404#issuecomment-247089961, or mute the thread https://github.com/notifications/unsubscribe-auth/ABxvHQ3o5_ElZGPSez13cZzktb9KmEz9ks5qqC3ZgaJpZM4J8iQY.

I use PGP to protect our privacy, if you want to know more, you can follow this https://emailselfdefense.fsf.org/en/

If you have further questions, please do not hesitate to ask. You can verify my public key here: https://keybase.io/pierreozoux

[melindavoo]

Codepen has a great UX for their Sign In v Sign Up and Alt OAuth logins in an all-in-one view:

Here's a breakdown of what's happening that makes this work well:

• Very clear action button on the very familiar login form: "Log In"
• Followed by the familiar "Forgot Password" link. This offers them the clear conventional login form -- easy to recognize
• The "OR" between the sections offers a true balance of priority (you can do this OR this)
• "Log in with Github", clearly stating what the button will do and giving these buttons the same size button class as the "Login" button on the form, but using brand colors for denoting the product associated with GitHub etc (clever!). This is great because it quickly and visually summarizes that these all log you in equally but makes them not all the same color, which could be confusing and make people wonder which button to click to log in. it's a good rule to have only one primary action button on any one page and make sure primary buttons have a distinct and notable style or "pop!"
• Lastly, the prompt at the bottom equal to both: "Need an account? Sign up now!" Note that this is not a button, because it's not a primary task -- it's a reminder that you might have come here accidentally. This is mirrored on the registration page "Already have an account? Log in!" because it offers the same solution to the same problem.

Very clear language and using a sentence in the prompt creates a conversational, friendly style that most users don't have trouble with.

Check it out! https://codepen.io/login

[eppfel]

@jancborchardt Is there a reason – besides hinting on return key for send – to use inline buttons. At least separate input and button like these: http://semantic-ui.com/elements/input.html#action

Because I think they don't work from an UX point of view, because they break existing patterns, e.g. #1407

@nextcloud/designers ?

Edit: added picture, because no deep link

[te-online]

I've also seen users trying to login, who are not used to submit forms by return key, being confused whether they can actually click the arrow or how they would proceed after entering their credentials.

I would agree with @eppfel that inline buttons are not a good choice for making clear how to submit the form. However, I also see the effort of making the login form as ”seamless“ and clean as possible.

Bringing back the login button might feel like a step backwards, but in my opinion it would clear any doubt of how to use the form.

---

One addition: We also have a slight problem with missing labels. While, in this form it is quite clear that the first input must be username and the second must be the password, also due to the type of input field, there are situations where it really feels like a label is missing.

E.g. the mail app uses the same pattern as the login screen, using placeholders als replacement for labels, which led to great confusion when I first set-up my account. What is the first field about? Only after I removed my username from there, I found that this is where your name goes.

So, if this pattern can only be applied to really simple forms, it's not a good pattern, because it's not universal, right? Maybe we should rethink the avoidance of labels together with the missing buttons while we're at it 😉

[pierreozoux]

The same with "forgot my password", I already received a ticket to ask me where to do that.

[jancborchardt]

So it seems that bringing back the dedicated »Log in« button is the best fix?

Btw, in the past we also had icons for the input fields (a »user« icon and a »lock« icon). We removed them first because we had a »show password« toggle icon on the right of the password field (and now the log in button) and also because it just didn’t seem necessary to support the text. We can think about introducing that again.

And yes, for more complex situations like in the Mail app we definitely need proper labels. The issue with the name and prefilling comes up a lot.

[MariusBluem]

Leave it as simple as possible! The removal of the »Log in« button is something I liked. The most guys are simply clicking on ↩ if they want to login 😁

[Espina2]

@MariusBluem Do you use mobile?

[jancborchardt]

Closing cause we brought back the log in button.