Secondary menu

User registration pages - a case study

User registration pages - a case study

Written by on

Sometimes an afterthought, sometimes the only good-looking page on a site: registration pages are the heart and soul of user participation. Maximizing the completion rate and minimizing abandonment of your signup form is a crucial part of getting users talking, especially if you don't allow anonymously posted content on your site (an increasingly common thing as spam continues to flourish).

Web 2.0 ushered in a lot of changes to registration pages, the most notable concept being simplicity. This is the executive summary:

-Keep distractions to a minimum. The user is there for one reason and one reason only: to sign up. Don't give them anything that might distract them away from that purpose.

-Make it as easy to understand as possible. A 5 year old should understand the form, both in the visual way it's constructed and the questions you ask. Now isn't the time to get cute, or to feel like you have to caputre EVERY SINGLE METRIC from the user all at once. In many cases, email address and password are enough (!).

-Once they're done, take them back to what they were doing. Something prompted them to sign up, you want to send them back there. Signing up is great, but only insofar as it facilitates participation.

-Ajax/javascript stuff is cool, but keep it to a minimum. Surprisingly, it's not a super common practice across the top 100 visited websites. Personally, I like ajax username/email availability checks.

-One page! None of this multi-page registration stuff. Users HATE it!

If you take nothing else away, take those five points. If you're interested in real, empirical research like me, read a couple articles from my expert friends at Smashing Magazine.

YourTango.com

Note: these enhancements I made are currently NOT live on yourtango.com. After some weekend QA we'll be posting them up, so be sure and come back often to see the progress! Right now I'm working on YourTango.com, a great startup run by some really amazing people. YT is the place on the web for articles about love, sex, romance, and relationships. Thing is, YT's grown so fast that there hasn't been a lot of time to nail down usability in a solid way. This week I got the chance to review the registration process as part of a larger usability enhancement project and had a really good time with it. Here's what YT's registration page looked like before:

System
Uploaded with plasq's Skitch!
Login | YourTango
Uploaded with plasq's Skitch!

As you can see, there a ton going on. I found the following opportunities to bring the registration page back in line with best practices and enhance the users' experience:

-Distracting: Leaderboard ad -Distracting: Full navigation header -Distracting: Right rail with information that isn't very useful and a pretty but distracting photo -Distracting: Full site footer (not pictured) -Best practice area: Form fields inconsistent with the rest of the site -Best practice area: Field label font face inconsistent with the site -Best practice area: Option widget labels places inconsistently -Best practice area: Default select widget values inconsistent (birthday defaults to blank with a label, country defaults to United States) -Best practice area: Radio buttons handled incorrectly. W3C spec is that "At all times, exactly one of the radio buttons in a set is checked." -Best practice area: Form fields are ordered in an unintuitive way: CAPTCHA in the midle of the form, Username separated from name and password, and so forth.

My goal was to tear this thing down to its bare bones and make it clean, relaxing, and usable. The first thing I did was create a new page template and cut out everything that didn't help the user register. Right rail: gone. Header nav: gone. Footer: gone.

Second thing: kill the second page. Multipage registration is soooo 1999. Abandonment is huge, and it just annoys the user. Gone.

Next, it was time to lop off unnecessary fields and clean up the ones we're keeping. Country, ZIP, confirm email: gone. I standardized on form labels above the field. I know it's trendy to put labels on the left, but vertical labels are easier to scan with your eyeballs. I also standardized on checkboxes, dropdown selects, and text fields, killing the radios completely.

At this point the form was looking 1,000x better. I added some vital extra juice: returning the user to where they were when they clicked "Create an Account", ajax username/email/password verification (see how this is done in an earlier blog post I made here. Warning: this is an old post ported from our old site, and as such the formatting is borked!) and of course the Drupal side custom validation function.

What I ended up with was much more clean looking and usable - and as a bonus it looks great in IE6/7 as well!

Login | YourTango
Uploaded with plasq's Skitch!
Login | YourTango
Uploaded with plasq's Skitch!

(I zoomed out in Firefox here, so don't stress about the size of the form elements :)

Login | YourTango
Uploaded with plasq's Skitch!

Ajax username checker

As you can see, we've ended up with a really cool registration page that I think users are really going to dig. We'll see in the coming weeks how it performs.

So that's the scoop. I'm really happy that I got to take YourTango's user registration to the next level. They've been super cool cats to work for and I'm really enjoying the work they've been throwing at me. Now, while you're here why not register for an account yourself?

No Responses Yet
Add a Response