Improve login UX when using external providers

[Musealali]

Some clients are confused when seeing this UX for login. As they are not aware whether this is a button to click on or that they need to enter their credentials in the fields beneath. This is only for when external login providers are used.

[meyntony]

I think most customers who are new to this screen are confused the first time, would be nice if someone can come up with suggestions for a better UI/UX for showcasing external login providers.

[HamDerAndrew]

Do we know who these clients are?
Like, are they a technical person (a developer) or a none/less-technical person (like a manager perhaps)?

Edit:

So I had a little talk with @meyntony and I now see what the issue here is.
Let's paint the picture:

Scenario

John, an editor who works in a medium sized company and has no technical experience, wants to log into the Umbraco Backoffice to change some text content on the company's website.

Due to the company's size, they have a lot of tools, which require logins. These logins are intefrated with Azure AD.
John is therefore used to login with these credentials.

1. He navigates to the companywebsite.com/umbraco to login.
2. He is presented with the login screen seen in the picture above.
3. He is used to use his Azure AD credentials to login to the other tools they use in the company. Because the "Sign in with appstrakt Azure Active Directory" is displayed, he proceeds to type these credentials into the email and password field.
4. He gets an error when logging in and tries again a few times, but no luck. At this point he is confused and frustrated as to why his login doesn't work.
5. He pokes one of his colleagues, Jane, asking for help. She tells him that he has to click on the "Sign in with appstrakt Azure Active Directory".
6. He can now login with his Azure Active Directory credentials. He feels silly for not realizing that the blue heading was actually a login button, and not a banner.

We can try and spare dear John for this experience and maybe indicate a little better that the Azure AD is a button he can click on to login with, and that there's a difference between an Umbraco Backoffice user, and an external login provider 😄

Suggestion

Personally, I like the approach Slack has here, so I'll plug it for inspiration:

Maybe we can add that "------ OR --------" divider they have also.

[meyntony]

@HamDerAndrew I think the important difference with what Slack has done compared to Umbraco, is hide the password field, so new users don't put in their external login providers password there, thinking the button for the external login was just a banner/label.

[meyntony]

but we need to remember that Umbraco ships with and without enternal login providers, so the UX needs to address both scenarios

[Musealali]

Thank you Andre !

I think John would be happy