Make ‘email already taken’ more noticeable on smaller screens

Today we shall take a trip with a user who is not sure if he already has an account at some run of the mill Discourse site.

Our journey starts out on a happy note.

It’s all green lights and we’re feeling good,

Wait. The doctor’s report is back from the hospital. I am sorry to tell the family the bad news. And sorry for getting your hopes up so high and then letting you down.

Well, think about it from the bright side. You still have an account.

Testing this out, as soon as I enter my email address and move down to enter a username the feedback pops up that the email address is already taken. This seems to be the first opportunity to provide that information so I’m not sure what you want to improve here?

Well trust me that I would not have proceeded further one single inch if any red thing appeared anywhere in my field of vision. So maybe the problem is

  • red things occur in an area already scrolled out of the small window of view, even on desktop.
  • red things occur asynchronously, not always fast enough for the user to see before he has scrolled them past the small window.

Also the moment the asynchronous check comes back with bad results, the entire form should lock up and turn red… No point in the user continuing to fill out the form when it is already doomed for failure, and the form already knows that.

Or, perhaps

  • just wait for the check to succeed before allowing the user to go on to the next question. Surely the connection between the form and the database is higher bandwidth than between the form and user, so no need to allow the user to fill in the form so fast.

Could you add some extra detail about the device you’re using (inc. screen size) as well as any zoom/text enlargement you may be applying?

Here’s a pristine 1920x1080 screenshot, taken on a Chromebook at CTRL+0 zoom

P.S., there on if you click Log in with GitHub you get 404. And odd, those three side buttons, one is Log in, the other two are Sign in.