Login Screen – behind the scenes(gosquared.com)
gosquared.com
Login Screen – behind the scenes
https://www.gosquared.com/blog/archives/3359
25 comments
k's thank you for this feedback! I'm on my phone at the moment but I'm going to get back with a detailed reply as soon as possible, we've made a lot of difficult decisions and your feedback covers a lot of it.
I don't like the form field labels inside the fields:
1. When I go to the login page on my PC or Nexus 7, I see a blinking caret at the beginning of the "Email address" text and I have no idea whether I need to select that text so my typing will overwrite it, or if I should just start typing.
2. When I go to the page on my Android phone, I don't see the "Email address" text at all, just a blank field with no indication of what goes there. I have to tap outside any field to see what that field is for.
I don't think labels inside fields should ever be combined with automatically putting the focus in one of the fields. That forces you to leave the label in place when the focus is on a field, which is a recipe for confusion. Conventional labels are much more friendly.
After I type in my email address (in the .to domain; see my profile here), it shows me a picture of myself as soon as I complete the address. That's cool, but when I hit Tab to go to the next field it says "Did you mean [email protected]". Huh? Perhaps if you find that you've succeeded in fetching a gravatar, you should not use the "did you mean" message. The gravatar itself is a better confirmation that I've got the right email than any possible second-guessing you could do about domain names.
Also, your blog is pretty hard to read. The text is barely more than 50% contrast, really faint and washed out. Why do modern web designers think text contrast is their enemy?
1. When I go to the login page on my PC or Nexus 7, I see a blinking caret at the beginning of the "Email address" text and I have no idea whether I need to select that text so my typing will overwrite it, or if I should just start typing.
2. When I go to the page on my Android phone, I don't see the "Email address" text at all, just a blank field with no indication of what goes there. I have to tap outside any field to see what that field is for.
I don't think labels inside fields should ever be combined with automatically putting the focus in one of the fields. That forces you to leave the label in place when the focus is on a field, which is a recipe for confusion. Conventional labels are much more friendly.
After I type in my email address (in the .to domain; see my profile here), it shows me a picture of myself as soon as I complete the address. That's cool, but when I hit Tab to go to the next field it says "Did you mean [email protected]". Huh? Perhaps if you find that you've succeeded in fetching a gravatar, you should not use the "did you mean" message. The gravatar itself is a better confirmation that I've got the right email than any possible second-guessing you could do about domain names.
Also, your blog is pretty hard to read. The text is barely more than 50% contrast, really faint and washed out. Why do modern web designers think text contrast is their enemy?
To fix points 1 & 2, they could overlay the label to the left and have the caret start to the right of the label, like in MailChimp's login page: https://login.mailchimp.com
It would still look just as nice.
It would still look just as nice.
Oh, that mailchimp page is nicely done. Very simple implementation too: they basically just gave the input element a bunch of left padding and absolutely positioned both it and the label element inside a wrapper div with position:relative.
I'm not a fan of the inline labels either. The main issue for me is when I autofill a moderately long form; once the fields are filled, there's no way for me to confirm that Chrome actually autofilled the right fields without clearing each one individually. (Of course, this is partly Chrome's fault for occasionally filling the wrong fields in the first place.)
I'm surprised to see this design used so much, even by big players that should know better. I placed an order on store.apple.com a couple of years ago, and afterwards, I realized Chrome had autofilled my email address (I think) in the street address field. Of course, I wasn't aware of this until I received the order confirmation, so I had to call Apple to fix it. Two years later, and their checkout form still has this problem.
I'm surprised to see this design used so much, even by big players that should know better. I placed an order on store.apple.com a couple of years ago, and afterwards, I realized Chrome had autofilled my email address (I think) in the street address field. Of course, I wasn't aware of this until I received the order confirmation, so I had to call Apple to fix it. Two years later, and their checkout form still has this problem.
Re #2: How old is your Android phone? Chrome supports input placeholders. They should have a shiv for placeholder support in older browsers, to be honest.
It's a Droid Charge running Gingerbread. Pretty old! I was going to get one of the Galaxy S3 developer edition phones, but those were only available for a few hours a couple of weeks ago.
BTW I hope you meant shim! :-)
(Edit: Oh, I see that "shiv" is also used to mean the same thing as "shim" in the HTML community...)
BTW I hope you meant shim! :-)
(Edit: Oh, I see that "shiv" is also used to mean the same thing as "shim" in the HTML community...)
I don't think the "Did you mean [...] ?" popup should block the password box. Maybe it should appear on the top instead? My email address uses a .io domain and it suggested the .com domain. Since it blocks the password box, it seems like it's assumed that the suggestion is correct, and that I'll click the box before continuing.
Aside from that, it looks great of course. I think that goes without saying.
EDIT: I don't think that this was really a call for feedback, but there's my two cents either way.
Aside from that, it looks great of course. I think that goes without saying.
EDIT: I don't think that this was really a call for feedback, but there's my two cents either way.
Thanks for the feedback! I need to add the .io TLD, cheers for the nudge.
I don't think adding the TLD is really what should be looked at here. Please consider just making the suggestion not overlay the password box. It should be a suggestion, not a block.
You need to rethink your approach to TLDs, in my opinion. I got suggested to switch to a .me when I entered a perfectly valid .re ending.
Add .rs too. :)
Add .dk too
> When have you ever gone to “Forgot your password” without entering an email first, or having guessed a password? Clicking on this autofills the email you had in the login form...
1) I love reading posts about UI features, but I noticed something ironic about this one: both e-mail and password fields are cleared when an authentication error occurs, so clicking "Forgot Password" will result in a blank e-mail being copied over. If a user bothers to type in their email address, they will probably also try a password and click login at least once before clicking "Forgot Password", so by then the email will be blank again.
2) Another interesting difference is how this site and Quora display user photos. Quora will tell you if your e-mail is not in the system or needs confirmation, while this site always returns an invalid password message, even if the user doesn't exist in the system.
The big UX flaw here is that a photo might frustrate a typical user into trying lots of passwords since their photo shows up when they type their e-mail address, when in fact they don't have an account or used another e-mail to register.
1) I love reading posts about UI features, but I noticed something ironic about this one: both e-mail and password fields are cleared when an authentication error occurs, so clicking "Forgot Password" will result in a blank e-mail being copied over. If a user bothers to type in their email address, they will probably also try a password and click login at least once before clicking "Forgot Password", so by then the email will be blank again.
2) Another interesting difference is how this site and Quora display user photos. Quora will tell you if your e-mail is not in the system or needs confirmation, while this site always returns an invalid password message, even if the user doesn't exist in the system.
The big UX flaw here is that a photo might frustrate a typical user into trying lots of passwords since their photo shows up when they type their e-mail address, when in fact they don't have an account or used another e-mail to register.
That's pretty neat. The suggestion tooltip in it's current form is a bit annoying though. I actually did type my email correctly, it even has a gravatar, but I can't stop the suggestion from overlaying half the password field.
Also, on a failed login attempt I usually typed my password incorrectly, not my email (especially when I can even see my gravatar). So you might want to keep the email field populated.
Also, on a failed login attempt I usually typed my password incorrectly, not my email (especially when I can even see my gravatar). So you might want to keep the email field populated.
Good points, thank you!
I'll add these to our to-do list
I'll add these to our to-do list
I entered [email protected], it pulled my gravatar, then asked me if I meant [email protected]. Not sure why it didn't like the .name TLD.
The tooltip floated over the password box and was kinda annoying.
The tooltip floated over the password box and was kinda annoying.
It would probably be a good idea to assume any email with a gravatar is correct.
Does gravatar even give you that information back? I assumed the browser requested the image directly from them.
It gives you a 404 if the image doesn't exist, so you can use that. It's all in JS, anyway, so the gosquared server does't need to know any of this.
We've got it so that the image 404's and we listen to the image error event to fade the G in or out.
Neat, good idea.
You can specify a default image URI, and possibly look at the pixels of the returned image to see if it is the specified default.
Look at the pixels?
canvas + getImageData
You sure about that? I thought canvas enforced a same-origin policy
Ah, right. Good point.
The gravatar is a nice touch, but it works even if my email is not signed up with your service, which felt a bit misleading.
I got the sense of, "this is the correct email address to login with because the system recognized me" when in fact it was the wrong email.
I got the sense of, "this is the correct email address to login with because the system recognized me" when in fact it was the wrong email.
Good point - the reason for it is we wanted it to be entirely independent of our users db for security/privacy reasons (and simplicity!)
1. Where's the Login/submit button? I wonder if many people would expect this.
2. What do people think about when you enter your email address and accidentally enter the wrong password: should the next page have whatever email address you initially entered re-displayed? Because the error message (rightfully) doesn't indicate whether the problem was actually with the password or whether you instead typo'ed the email address, would having this re-displayed allow the user to more easily recognize their mistake? (i.e., seeing that you typo'ed your email address is more helpful instead of first thought being that you've forgotten/mistaken your password)???
2. What do people think about when you enter your email address and accidentally enter the wrong password: should the next page have whatever email address you initially entered re-displayed? Because the error message (rightfully) doesn't indicate whether the problem was actually with the password or whether you instead typo'ed the email address, would having this re-displayed allow the user to more easily recognize their mistake? (i.e., seeing that you typo'ed your email address is more helpful instead of first thought being that you've forgotten/mistaken your password)???
1. Problem is, not everyone will know that they're supposed to hit Enter to submit, so you're already needlessly frustrating a percentage of your users (albeit, probably a small percentage) by hiding the submit button. Here's a bit more discussion on the topic, from a question I asked on UX StackExchange a while back: http://ux.stackexchange.com/questions/8876/usability-of-hidi...
Indeed. I've watched many friends fill in online forms, and I can't remember a single time any of them have ever used the Tab or Enter keys. They've all clicked on every field and finally on the Submit button.
I'm wondering about the /lack/ of submit button. I'm often tempted to remove it but I know from experience that so many people use the mouse to click on the button rather than pressing enter. What are your insights in this issue?
Exactly. For a login screen with a post that exalts the design, I thought it was a glaring usability mistake. Even a simple cue, 'Hit Enter to Continue' that appeared when the fields were being filled in, would up the usability. I know I won't look for it, but my mom would.
The thing I found a little jarring about this, is that if you are not registered for gosquared, it still can get a gravatar you have registered on gravatar. Despite me not being registered, entering my email, it is as if they already have information on me.
This could be a little daunting to someone who doesn't understand how this is happening.
This could be a little daunting to someone who doesn't understand how this is happening.
Don't you think if you've already signed up with gravatar you'd make the connection when your gravatar shows up?
Someones Gravatar could easily be a profile picture that they use in a lot of places no?
Nope - you have to sign up and add a picture to Gravatar, it doesn't fetch it from other services/networks.
What I mean is I may use the same picture for a number of services i.e Twitter, Facebook, and that same picture might also be my Gravatar. If I had added the Gravatar a while back, and had forgotten about it, it would look like the service had grabbed it from the other services.
This is not a huge problem by any means, it just jarred me a little.
This is not a huge problem by any means, it just jarred me a little.
To be fair though, your potential forgetfulness wouldn't be their fault. Sadly, I do see how it could be misconstrued though.
We fixed this issue giving the option to change your avatar from your CP.
Possibly, but you don't usually try to login before signing up... right?
I sometimes do that when I'm not sure whether I'm already signed up or not. Seeing my portrait (if I had a gravatar) would suggest to me that I did register an account. It's probably not an issue for a service like GoSquared though.
I did just now, just to see how they handled unregistered users.. I know what you mean tho :)
They might put a line underneath it saying, "Image provided by Gravatar"
I'd rather use Persona to login instead of creating yet another account.
Yes, this. But how the average user would respond to it and maybe a better question, on which type of websites that would make total sense?
I mean, would persona fit the e-commerce business just fine?
I mean, would persona fit the e-commerce business just fine?
I run an e-commerce business and it works great. Persona really fits in well for all websites and when it is eventually integrated directly into the browsers, it'll be even more of a non-issue.
The more sites that adopt Persona, the more that the UX design and differences between sites will become a non-issue and posts like this where the designers are inventing yet another way of doing things will stop. Persona provides a clean standard interface that everyone knows how to use and even better... a single login.
The more sites that adopt Persona, the more that the UX design and differences between sites will become a non-issue and posts like this where the designers are inventing yet another way of doing things will stop. Persona provides a clean standard interface that everyone knows how to use and even better... a single login.
No submit button?
That doesn't make me happy (especially on a touch device).
Why does the account creation screen use a completely different layout/style (stock bootstrap)? That was very jarring to me.
I'll assume you just haven't gotten around to changing that too, but it ruined the effect.
I'll assume you just haven't gotten around to changing that too, but it ruined the effect.
Sorry! We're working on improving all areas of the site at the moment.
I really hoped to see my email copied in the use case of typing email on the sign in page, and clicking sign up,
also the sign up page looks so much different, so I would say 100% score on the 50% of the job done.
also the sign up page looks so much different, so I would say 100% score on the 50% of the job done.
Do you foresee any issues pinging gravatar as fast as every 200ms (based on your source) when someone is typing in their e-mail address? Since you are checking domains and if they are correct, could you check to see if the email is valid form before pinging gravatar for an image? It seems like it'd be a little less load for all parties involved.
Bold claim, nothing to back it up. And this is an Analytics company.
Some of the features seem interesting but I'm skeptical as to whether people like the picture showing up (I certainly don't when I see it on Quora) or whether having to enter your email address is really a big deal or just a micro-optimisation.
Some of the features seem interesting but I'm skeptical as to whether people like the picture showing up (I certainly don't when I see it on Quora) or whether having to enter your email address is really a big deal or just a micro-optimisation.
Have you tested offering users Facebook oAuth? Seems to be increasingly popular, even regardless of how relevant Facebook integration would be for your user base and product. Just one less email/password combination to remember
If you're going to offer centralized auth, offer Mozilla Persona. It's easier to implement, simpler for the user, and not odious.
But not something that an overly large number of users are going to have...
It's very easy to make a Persona account, and, in my opinion, much better than having Facebook connect. I avoid FB Connect to the point that I will not sign up to a site with FBC if I can avoid it. If the site offers no other ways to log in, I will not use the site.
From what I have heard, I'm not alone in this.
From what I have heard, I'm not alone in this.
http://forrst.com/posts/Login_Form_Underground_Social_Networ...
I did this like two years ago, nothing original.
I did this like two years ago, nothing original.
A nice touch is the responsiveness that was put into moving the sign-in box from the vertical-middle of the screen on tablets and desktops, up to the very top of the screen on mobiles. Well done!
Try putting "(drop table)" in the email field. I was amused.
I'd forgotten I added that easter egg. Ha!
The real question is what happens when you submit it ;)
The UI is cool :)
That being said, it's not as cool as browserid/persona (where you click one button, and done, can't get much wrong here)
... Where's the "Login" button?
It loses your email address if you don't enter your password :(
serving users email as a GET request for reset password ?? intriguing...
A few very minor nit's to pick: Overall, the login screen is great, but omitting the submit button seems a bit too minimalist. I know what to do because the response of using the Return or Enter or Go key is by now second nature; it might not be as apparent to less geeky folks. Besides, the design choice is jarring given how prominent a button you're using for the password reset flow.
Regarding the visual flow in the sign up process: It's probably already on your list of ToDo's, but the form styling between the join and login screens is substantially different.
After installing your tracking script on both a static page and using the Wordpress plugin, and double checking the installation verification, I had to go through the dashboard introduction a second time. It would be ideal if there was button allowing me to dismiss/opt-out of the intro.
Lastly, I'd suggest experimenting with an additional tier of pricing above the $9 mark but below the custom enterprise level. My intuition is that there's a level where people want more capability but are reluctant to go through the personalized and uncertain "Enterprise" process. Also, it's possible people might be more likely to choose a paid plan if there was more than one option; that's definitely the response I personally had.
Just off the cuff, one version might be:
Free: 1 site, 1 individual
Standard: 3 Sites, 5 team members. $9/month
Premium: 10 Sites, 10 team members, exclusive premium features. $19/month
To be sure, you don't want to cannibalize your Enterprise sales, so it's worth comparing these price and usage points to what data you have in that area.
Finally, grandfathering existing Premium users in this scenario would be as simple as upgrading them to the new level and giving them a $10/month discount for the life of their account.
Good luck, and great product!