Earlier this week we upgraded changed our Sign-in or Create Account interface at Proper Cloth.
This is what it used to look like: 
This functionally worked fine, but a couple things always bothered me about it.
- During usability testing, we often saw users that were creating accounts first put their email address in the field on the left before realizing that the Create Account part of the form was on the right. This was not a fatal problem, it just meant that they had to reenter their information again on the right. It seems to me that folks in a hurry would just scan the page, see the field for “email address” and start typing it in without fully processing all the information.
- This design also seemed a bit visually overwhelming and intimidating. There are 2 headings, 6 fields, 2 buttons and 3 bright purple textual messages. It forces the user to think. With just a glance, it might give the impression that creating an account is a big step, requiring a lot of information. In reality, we don’t need much information at all. All we’re trying to do is enable a way for users to save a design or size and access it later.
Our new design:
In the new design we only have two text fields. Email address and password. The idea is that – whether you are signing in or creating an account you will do the same thing to start – put in your email address. I’m counting on users selective vision to see the fields and the button they are looking for and then interpret the form as being for the specific action they are looking for.
Once you enter your email address, we check to see if you have an account and then dull out the button that is not appropriate.
I like this effect – because I think it sort of surprises the user a bit with a “oh, they know me” sort of feeling.
If you don’t yet have an account, you would see the following after you entered your email address. When the buttons change, you immediately are confirmed that you are taking the right action.
Regarding account creation:
- We no longer ask for name information at this stage. We ask for the persons name later – when necessary.
- We do not ask for the password twice. This may increase the chance that the user types the password in wrong (which I don’t think will happen all that often anyways), but we also have worked to make our reset password process much faster and easier to use (if necessary.
- We also had to take a second look at all the possible failure modes and error messages that would show.
So, this is still very new, but I think it’s an interesting innovation on a pretty standard web process. We’ll be monitoring how well it works. For now, you can try it out at http://propercloth.com. Just click the “Sign In or Create Account” in the upper right.
No Trackbacks
You can leave a trackback using this URL: http://sephskerritt.com/2010/02/16/rethinking-the-sign-in-or-create-account-interface/trackback/
5 Comments
I dig this quite a bit. Have you found anyone else using a similar construct or is this twist all yours?
Looking at this makes me ask a couple of questions off the top of my head.
1) In this age of “Forgot my Password” functionality where a password reset is only a click away, do we really need a verify password box anymore? If a reset password is going to show up by email it seems like we should have a verify email box, if anything. I think you’re doing the right thing by leaving it out.
2) Does this raise any security concerns? For example, when I type s*e*p*h@propercloth.com (edited) into the email field I get a big green ding ding ding telling me that there’s an account by that name. Granted, that one is pretty obvious. But then I try messing around a bit more and I can see that Ajay has an account, but it’s his GMail account, not his school one. That being said, maybe it’s not actually an issue since it’s not really any different than the “that username is already taken” message that appears on loads of other sites. I’d be interested to see what others think about it.
Anyhow I’m looking forward to seeing how this works out. I can definitely see implementing something like it with Istobe.
Thanks doug!
Really clever, Seph — I like this new design.
Good stuff, less is truly more. I’ve been working a lot on my company’s website to reduce the amount of required fields on forms for our landing pages, and totally removing optional fields. It’s surprising how much more willing visitors are to sign up when they have less to do.
Exactly. If a visitor is new to a website, they’re going to be hesitant to give over a lot of personal information right away, so there are advantages to taking this information in stages. It’s partly about the time spent, but it’s also about establishing trust over time.