A Way Back

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.

Mixed-label alignment

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. —Luke Wroblewski, Web Form Design

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.

whereas

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.

Realigned form

There are two main things I have tried to fix in the realigned version:

1. Label and text alignment
2. Sign In link

Alignment

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?

References

• Web Form Design by Luke Wroblewski
• Labels on Forms [pdf] by Caroline Jarrett, author Forms that Work
• Top, Right or Left Aligned Form Labels
• Label Placement in Forms
• Label Alignment in Long Forms
• Caroline’s Corner: Label Placement in Forms
• Better Web Forms: Redesigning eBay’s Registration

7 Comments

Add your comment

• 
  # Gabri
  says on May 25

  I don`t use Basecamp but when i visited the sign up form i felt my eyes are moving in various directions, cause of the label alignment and the various sizes and alignments of the input fields.this gave me the feeling that it`s a very cluttered form.

  You did a great job fixing all of this especially with alignment of input fields which makes a huge difference in de-cluttering the sign up form.

  Well Done.

• 
  # sameer
  says on May 25

  Amrinder,

  Its not about what the book says or what you think.. but rather about what the audience does on the form. No answer is right unless its tested. The differences are minor .. I would be curious to see how much difference it really makes in a test.

  A good post overall – I enjoyed it!

• 
  # Laneth Sffarlenn
  says on May 26

  Have to agree with Gabri – your realignment of the form just makes it look…”right” – so much better for the user to just stream through at the approximated 60 seconds, rather than the probable 2 mins you’d take flipping your eyes all over the screen to know what to fill in…

• 
  # Caroline Jarrett
  says on May 26

  Hi Gabri

  It’s an interesting exercise, but I’d be surprised if it made much difference to the level of conversions.

  When 37Signals redesigned the form, they made a lot of other changes to it such as changing the marketing text that (in my mind) clearly improved the form. And they say that it’s improved conversions as well.

  These days, my recommendation on label placement is:
  1 choose any arrangement of labels and fields that seems harmonious to you
  2 test it extensively with your users
  3 make changes based on what you find
  4 test again
  5 repeat until it works.

  You’ve done step 1. Maybe 37Signals will like it and try the other steps – that would be fascinating.

  I recently did a workshop @uxlx that expands on all of this; see the slides on slideshare (available via my LinkedIn account)

  Caroline Jarrett
  Twitter: @cjforms

• 
  # Amrinder
  says on May 26

  @Gabri and @Laneth: Glad you like the revised version.

  @Caroline: I’m excited to see your comment. I agree with your points about testing before implementing. This is just my suggestion which might help 37 Signals. They know better about their product and users than I do.

  I checked your presentation and article along with few others before coming to conclusion about using right-aligned labels.

• 
  # nigel
  says on May 29

  I always enjoy these articles of yours, Amrinder. You hit the nail on the head every time.

  I’ve long been one of the naysaying minority regarding 37signals. Their products are unquestionably good, but the company seems to know nothing about visual design. Which of course isn’t a critical problem, 37signals after provide utilitarian (rather than ornamental) web-apps and are good for doing so. But it does mean the experience isn’t as pleasurable as it might be (in spite of all the simplicity)

  So I’m not surprised at the sloppy design sense in their sign-up forms. Their objective is to their own itches – in the case of design, I’m afraid the itch was caused by a pinworm and the scratching only leads away from the solution.

• 
  # Marc
  says on October 24

  So… I noticed your comment form labels… 🙂 Cheers.