41

In the true spirit of better late than never...

We're on-and-off A/B testing a new UI for login and signup pages on all Q&A sites. It looks something like this:

enter image description here

The long and short of it is that we're working on a replacement login workflow aimed at making global network-wide login less painful than it is today. While we're at it, we're giving the UI a facelift and since that is a part we can test now without having to wait for the rest of the work to be finished, here it is!

It should be fairly straightforward and self-explanatory, but I (unfortunately) know far too much about the ins and outs of our current system, which makes me a terrible person to judge how intuitive anything related to it is. We are collecting usage data, so if you end up in the test group while logging in, please proceed as normal. But, if something jumps out at you as really awesome or really terrible, sound off in the answers here.

  • 11
    Couldn't resist pointing out: meta.stackexchange.com/a/61143/169611 – Mysticial Jan 6 '15 at 23:50
  • @Mysticial That it is. :) The more things change, etc. – Adam Lear Jan 6 '15 at 23:50
  • Google red, Facebook blue. Any special reason for choosing the colors? ;) – ShaWiz Jan 6 '15 at 23:59
  • 1
    @ShadowWizard Their branding guidelines, kinda/sorta, if you squint a little. Not pictured on that screenshot are custom per-site providers that are white - i.stack.imgur.com/LRfMK.png. We wanted to make the providers look distinct to minimize accidental clicks or confusion (say, if the Google button was also a shade of blue). – Adam Lear Jan 7 '15 at 0:01
  • Yup, no doubt it's better than the current design/colors so big kudos! – ShaWiz Jan 7 '15 at 0:03
  • 4
    Design credit (and blame) goes to Stéphane. – Adam Lear Jan 7 '15 at 0:06
  • 11
    I never had a problem with the current login workflow / graphics. Maybe that was just me. However, I am really curious how you are going to handle the success – Travis J Jan 7 '15 at 0:29
  • while at it please instead, just focus on the actual problem - network-wide login - without introducing changes everywhere you go. – n611x007 Jan 12 '15 at 13:12
  • I log out every time I'm done, which means that I log in at least once a day. I've seen the new login; I don't really have preference for one over the other, but I've been switched back and forth between the old one and the new one several times. Is this a bug, or status-bydesign? – Shokhet Jan 12 '15 at 19:54
  • @Shokhet We're running an A/B test, which basically means the behaviour you saw - some login requests get served the old UI, some see the new. – Adam Lear Jan 12 '15 at 20:04
  • All right, thanks for explaining that, @AnnaLear. – Shokhet Jan 12 '15 at 20:54
  • Shouldn't this be closed as dupe of this one? – ShaWiz Jul 7 '15 at 12:49
  • @ShadowWizard Not even a little bit. – Adam Lear Jul 7 '15 at 15:27
45

I don't like the email and password placeholder. Either make the placeholder "Email" and "Password", or get rid of it altogether. It doesn't really add anything useful as is. Your users don't need an example of what an email address should look like, and you certainly don't want to imply that a password might be 12345!

Otherwise it's a good clean improvement.

  • 2
    Agreed, I think Trello handle this perfectly. – Joe Jan 7 '15 at 12:01
  • 1
    agreed, no placeholder should be fine.. we can safely assume that someone that stumbles to these parts of the interwebs knows what an email and password is – ThaSaleni Jul 9 '15 at 9:45
27

That's how I would regroup log in parts:

Also, I would like to see usual top bar there:

And instead of the SE logo and "A network of 133 Q&A communities", the usual site header, footer and the background.

Why to do it of so different design comparing to other pages?

  • You proposed regrouping / rearranging the elements but didn't explain why...what are you trying to achieve by rearranging that stuff? – Laura Jan 12 '15 at 19:24
  • @Laura Because of tiny "or", lacking of "Stack Exchange" label above the log in form or something else indicating that this form is for users logging in with SE, big Google and Facebook buttons, it took me quite a while to get what this form is for. I had a feeling that this form is for G or F users... – nicael Jan 12 '15 at 19:42
  • 5
    It would be better to get rid of the two big facebook & google buttons and add them to the list of identity providers, that way we only had one "-- OR --" separator. – user230564 Jan 13 '15 at 12:14
  • 2
    some rational for this, this is a step more fair with smaller OpenID providers. And with the OpenID spirit itself. f/g are "provide-only, reject-others" providers, so promoting OpenID as a free and open market and featuring some other providers is a nice thing. A difference from what I described is that this one doesn't try to uncover with the visuals that f/g are actually openID providers. Rather, it references them as entities of their own. Still, it also promotes other OpenID providers, and OpenID the idea, which is still giving space for the smaller players and OpenID market to grow – n611x007 Jan 13 '15 at 15:37
  • meta: funny 'day before yesterday' they were logins for each site. then 'yesterday' there was openid, and you thought now you can use your single login for each site. But since some unfair players like f/g reject that and just want to dominate, it failed. It actually gave you that now you can re-use your old id on some sites - the fair ones. Should something like OpenID be decentralized, distributed, something like Bitcoin, and instead identity providers be something more like wallets? – n611x007 Jan 13 '15 at 15:45
  • 1
    Regarding your version: is there a reason you've placed Sign up to the bottom? Why not to the left of the Forgot password? text? – n611x007 Jan 13 '15 at 17:32
  • @naxa Yep, didn't think about it - I left the location of this button unchanged. – nicael Jan 13 '15 at 17:56
  • For me, this specific design would benefit of the sign up box being compacted to a link left of the Forgot password? link. It would leave a single box and that would perhaps make the GUI more clear. I think it could even solve the thing about the 'number of ors'. – n611x007 Jan 13 '15 at 18:14
  • 1
    Now I realize in your design that the Login button is expressed very cleverly. It is one of the 3 dominant pieces. Balancing in itself. But, placed at the very bottom, it tells the story on some level that all of these are providers, equal "suppliers", to the same action. – n611x007 Jan 13 '15 at 18:21
  • You could just remove the second --OR-- – Tim Jul 10 '15 at 9:50
27

The new login UI promotes Google/Facebook and weakens a healthy OpenID culture. This is unfortunate.

The previous one was some iteration of this...


2015.01.12 SE login GUI


now changed into this:


2015.01.12 SE login GUI


The change is of the meta-message is essentially:

  • before: "hey did you know that with OpenID you can accept users already existing logins from other sites? Ain't it nice?"
  • after: "GOOGLE FACEBOOK (EMAIL) ((losers' entrance))"

Disclaimer: I am aware that the stackexchange openID is not an "email". However, the current new UI promotes what is essentially fooling users by letting them be the cargo-cult follower they were modelled as, to continue to think that this is the case. And never ever mind them the open part about openID.

What's essentially wrong with Gmail as Facebook as OpenID providers, making them the worst choice to be promoted?

  • google provides openID
  • google does not accept openID provided by others
  • facebook: same case

While openID providers can theoretically of course choose whether to let users use other provider's openID, this is not the dominant issue here. The dominant issue is that these two providers are massive monopolies in the openID market and their tactics seem dangerously fit in a strategy reminding one of Embrace, Extend and Extinguish. Honestly StackExchange used to be the Fair Cool Guy here, now with this move, it's slowly slipping to under the dominance of the above two monopolistic giants.

The difference about the old UI was that it visually featured all OpenID providers equally. On the meta level this constituted as an experience that allowed users to learn about what essentially is OpenID and what's great about it as a 'free market' kind of community.

The new UI radically changes this by hiding the essence of OpenID and turning the already unbalanced table to the benefit of the unfair players.

Please, let yourself promote a fair and healthy community of OpenID by taking providers equally and presenting them as such.

  • I'd actually like to point out that de-emphasizing the more obscure OpenId providers is not a new decision. Your first screenshot is very old; about a year ago we changed to this: i.stack.imgur.com/9ueQQ.png which makes the UI we're currently testing much less of a dramatic change. (The big change with the new one is branding it as Stack Exchange rather than exclusively as the site you're logging into/signing up for.) – Laura Jan 12 '15 at 19:22
  • @Laura thanks for img, I couldn't find one. The change SE_site>>SE, in itself, looks sane to me personally. Still more has changed however. The visualization and unintended, the meta message. The new is not expressing the equality of the 3 featured providers anymore. On a healthy, open OpenID market: so what I describe was done in multiple steps. It makes my answer's scope off-by-one. However, the relevant issue remains. New UI still a tiny-tiny step in it. Shifting balance to provide-only, reject-others providers. I see them as severe damage to OpenID. Please consider counterbalance instead. – n611x007 Jan 13 '15 at 13:06
21

I'm repeating myself (I requested that before for the old UI)…

Please make the interface less confusing and inconvenient for those of us who don't use Google, Facebook or Stack Exchange as their OpenID provider. Even knowing the problem with the old UI, the first time I saw the new login screen, I was puzzled as to where I should be entering my credentials.

It's confusing to see a login prompt which I can't actually use, and to have to click on a small link which makes the text box that I can actually use appear. The “more login options” link only makes one text box and a row of icons. Show everything from the onset, but with more vertical space between the SE login lines and the OpenID options (and it would make sense to group the external login options, instead of going Google/Facebook, then SE-own, then other external options).


As far as the styling is concerned, it took me by surprise. I have no objection to the new design, but it looks weird because it's completely unlike anything from Stack Exchange. The first time I saw it, I wondered what was going on, partly because I wasn't expecting an SE login prompt in the first place, but also because the page didn't look like something from SE (unlike the old one).


By the way, did you log people out randomly to test this? I've had to log in several times the past few days, from browser instances where I'd been logged in for ages, and only on seemingly-random sites (even ones that I'd used the day before).

  • 2
    W.r.t. to the last paragraph, I just experienced the same. I logged on here successfully. Then I wanted to upvote a post, and found that I was logged out. When logging in again, I got the new UI. – S.L. Barth Jan 7 '15 at 11:58
  • No, we didn't intentionally log anyone out. – Adam Lear Jan 7 '15 at 16:17
  • expressed some of my concerns too at meta.stackexchange.com/questions/246974/… – n611x007 Jan 12 '15 at 13:33
8

First the good: much better then the original! :-)

Then: I don't mind the email place holder, but do mind the 12345... Although it is one of the world's most popular passwords SE started out as SO, and most of us here have convinced mum to use one that's better then 12345.

My advice: Use "Email" or "User name" and "Password" as place holders. We're in the 21st century. Everyone knows what an email or user name is including people who don't even have a computer. ;-)

  • 3
    Ahem. – muru Jan 7 '15 at 15:38
  • 1
    MGM! ;-) Nice to see you too! :-) – Fabby Jan 7 '15 at 15:40
  • 2
    The good news is that you can't actually use 12345 on our sites. ;) – Adam Lear Jan 7 '15 at 16:16
  • @AnnaLear: I hope you compare the hash and not the cleartext... Do you know? – Fabby Jan 7 '15 at 16:21
  • @Fabby For better or worse, we have pretty strict password requirements. (And no, we don't store them in clear text :)) – Adam Lear Jan 7 '15 at 16:24
  • @AnnaLear: Whew! ;-) – Fabby Jan 7 '15 at 16:27
  • @AnnaLear: Good one: just read it! The fact that a mod know the difference between the two was already a relief, but as I'm using another OpenID provider (No, not FaceBook!) to connect, I never knew. Now I'm impressed! ;-) – Fabby Jan 7 '15 at 16:34
5

Beta logos don't work, just an empty blue logo:

3

FWIW, a little feedback. I found myself in the test group yesterday.

Normally, I log on to StackExchange.com, then open my pages on the other SE sites, and I'm automatically logged on to my different SE sites.
Sometimes, I have to click "log in" on one of these sites before being logged in, but after that the page loads and I'm logged in. No need to enter my password.

Yesterday, I had to enter my credentials for each SE site separately.

I suppose this was just a consequence of the system still being tested. If it is part of the new workflow, I don't like it - I prefer not to have to enter my credentials on each site separately.

  • Really? ...I didn't have to do that; it logged me in automatically on each site. (I use a Google account on Chrome, which stays logged in....that might be the difference between us, idk) – Shokhet Jan 7 '15 at 19:57
  • 1
    @Shokhet That could very well be the difference; I'm using a StackExchange account. – S.L. Barth Jan 7 '15 at 21:02
1

I think the design looks nice and clear in general.

A few words on the lines: I have a really hard time seeing the lines next to OR (the text itself too), and the lines around the input boxes.

I suggest to make them a little darker so they are better visible.

-1

This is nice and simplified and a vast improvement on the UX. From experience, it may be a good idea to show the rules for passwords even for users logging in. Many users use multiple passwords across many sites and presenting the rules for a password they created in the past may help them remember without having to go through the route of 'forgot password'.

  • 4
    Hi and Welcome to Meta. While this would be an appropriate answer to this question it is quite unlikely to be seen here by the people that can effect change (too old). Instead you should probably ask a new question and tag it with the tag feature-request. After posting a new question, please delete this answer. – MEE was the missing bracket Mar 15 at 15:04

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .