Realigning Basecamp Sign Up Form
I love 37signals. I’ve read both of their books, Getting Real and Rework, and tried all of their web-based apps. Basecamp—a web-based project collaboration tool, is what I use almost daily. Last year, while signing up for Basecamp, I noticed that the sign up page required some alignment.
Since the beginning of 2010, I’ve been working with forms in various projects, but the Basecamp-sign-up-form-realignment-idea was still there. So I am onto it now.
The Basecamp sign up form consists of two different label alignments: top and left. I am not in favor of using two different label alignments in a same form and so is Luke Wroblewski.
Different label alignments in a single form will disrupt a clear path to completion and may confuse people. —
Before writing this article I checked Jason Fried’s post about the announcement of redesigned sign up form. There is a comment under the post asking the same question:
I’m curious as to why you guys decided to stack the label above the form field for the only username and password fields. Was there some research that you found that this layout works better for those fields?
to which Jason replied:
Apparently, fields people know without thinking about (name, email, company, etc) perform best with left side labels (left aligned). Fields that people need to think about (user name, password, password repeat) perform best with field labels at the top. This is what some data from a trusted source suggests, so we’re giving it a try.
I am not satisfied with this explanation. Because what I have read in Web Form Design is almost opposite. For “fields that people need to think about”, Luke W. writes:
If you want people to slow down and consider each input in a form more carefully, left-aligned labels may be a good way to go.
Top-aligned labels tend to reduce completion times (how long it takes to complete a form) the most for familiar data (i.e. address, credit card, etc.) because they only require a single eye fixation to take in both input label & field.
Based on the above discussion and quotes, I thought of realigning the form using single form label alignment.
There are two main things I have tried to fix in the realigned version:
- Label and text alignment
- Sign In link
Top aligned labels are the best available option, but here we need to save the vertical space. So, I have chosen right-aligned labels after reading a few articles. Matteo Penzo’s article on UX Matters helps choosing between left or right-aligned labels:
When placing labels to the left of input fields, using left-aligned labels imposes a heavy cognitive workload on users. Placing labels above input fields is preferable, but if you choose to place them to the left of input fields, at least make them right aligned.
Sign In Link
The problem with the sign-in link is that it is way down in the middle of the form. Before reaching that link user might have filled up the details in 5 preceding input boxes. When user login using the sign in link the data in the first 3 fields (First name, Last name and Email) is no more required and the rest of 2 fields (Company and Time zone) have to be refilled.
Here is the default Basecamp sign-up form with top 5 fields filled in.
The following pop-up screen appears after clicking the sign-in link.
Logged in screen with Company and Time zone input fields with default values.
37 signals might have different idea behind the placement of this link. But it should be the first thing user should see. So I have put it on the top of the form.
After making all these changes I’ve come up with a revised version of Basecamp sign up form which I think might help new users to sign up in somewhat less than 60 seconds ;) What do you guys think?