About a month ago, 37signals (the creators of products such as Basecamp) posted an interesting case study on the redesign of its own signup form. In their own analysis of the two designs, 37signals said:
The new signup form design pulls from the look, feel, and language of the new marketing sites. The previous form, which pulled more from the previous generation’s site design, was dated and too long.
The new design, without question, is a vast improvement in many ways. It is immediately friendlier and more intuitive to use. And, impressively enough, they claim this new form has just as many form fields, in the same order as the old one.
Here are some of the key principles that 37Signals’ designer followed:
- Shorter forms convert better. This is a simple one, really: the more people have to scroll, the more difficult the task at hand can seem. This new form does a good job of keeping the instructional copy on the form clear, but brief. Yes, it’s important for the user to have that copy, but can it be done in 1 line instead of 3?
- Emphasize what’s important. Typography, color, and placement can help to create useful hierarchy. For example, the new design is significantly cleaner simply through text alignment. The form field labels and all other important information are aligned to the left-side of the page, while the sidebar does a good job of emphasizing the purpose of the form (as opposed to distracting you with a paragraph of possibly unnecessary content). Note, if you will, the “30-day Free Trial” callout. The little green arrow is pointing toward the billing section, reducing anxiety by saying “Hey pal, I know you don’t like entering your billing info but it’s ok, you get a free trial!”
- Numbered steps make the process simpler. Numbering is one of the most basic methods of organization that we all use in our daily lives. Adding numbers to the different “steps” in this form gives the user a sense of the beginning-to-end process that signing up entails. And, once they see there are only 3 steps, hopefully that will ease their anxiety about filling out this form.
- The call to action should be easy to find. Looking at the shrunken version of the “before” form, can you quickly find the call to action? I couldn’t. However, the bright green, free-standing button on the “after” form couldn’t be easier to find. A call to action should almost never (1) be the same color as the page background, or (2) be contained within a box, unless the entire form itself is within that same box.
- NEXT STEPS: I’d be interested to see this form tested with multiple pages (one per numbered step). In general, the shorter a form is, the more likely a customer is to fill it out. It’s very possible it could even be designed so that no scrolling at all is required!
So, what do you think? How would YOU rate the redesign of 37Signals.com’s sign up form?