What do you think of my registration page?

Status
Not open for further replies.
C

CLKeenan

Banned
Jun 24, 2006
2,506
14
0
Boston, MA
Course-Notes.Org Community - Registration

I've made a lot of tweaks to it compared to your normal vbulletin registration page. I added a little introduction block at the top. I've removed the birthdate and the forum rules initial pages and just combined them into the main page to streamline the process. I've also removed some of the useless questions that might just confuse the user.

And finally, I added testimonials about my site on either side of the form.

What are your thoughts??
 


The only thing I can think of is adding an "other" option for the courses.

Other than that it looks great to me. I really like the testimonials down both sides.
 
I considered doing an other for the classes, but heres what I was thinking. It's not a required field so someone doesn't need to check a box if they aren't taking those classes. Secondly, if someone answered 'other' it really wouldn't help me much or the other students if they were looking for other students taking the same class as them.

So thats why I didn't do the other field. Does that make sense?

Thanks for your feedback! I'm glad you like the testimonials
 
Nice, but here are a couple things.

Width of content is in excess of 950px so the skyscraper banner on the right hand side either requires side scrolling or is missed by most users.

In Firefox 3.0.6 on Windows XP there are two CSS problems I notice:
The bullets in your introduction section appear outside of the box.
The text runs right up against your radio buttons and check boxes. Text boxes look fine.

It looks fine in IE.
 
Firefox 3.0.6 Under Ubuntu Linux:

Bullet points are outside of the box. Page isn't centered.

But that's it.
 
I like the testimonials as well, what I'd try maybe is making the form more compact though. Right now you start off with the box with the dark blue stripe in the header, and you expect that that's it. Then you scroll down and get a 2nd box with a red stripe on top, which only contains a couple of checkboxes and dropdowns, but all the whitespace in between makes it look huge. And then there is yet another box.

What I would think about is making it as easy as possible for them to sign up. Right now it just looks huge to me and like a bigger effort than it actually is, just because the form spans over three boxes. And the crux about the testimonials is that while they look good, actually they make it look even bigger than it has to be.

Have you thought about letting them register with only the first box, then after they verified their email, you can say "you must edit your profile before you get access", and only then you present them the other parts of the current form? I think it might make sense to test that.

***

As for the checkboxes and radio buttons, they all have ids so you can either list them all, one by one, in the css like input#cb_cpf_fieldXX_Y, or what I'd do is rather give all checkboxes a classname of e.g. "formcheck" and all radio buttons a classname of "formradio". Then you just need one line to add some margin to them: input.formradio, input.formcheck { margin:0 10px 0 0; }.

The bullets at the top - the <li> items should all be wrapped in a <ul>, then you can give that a left margin.

Another thing I noticed is the light blue background image on the boxes is too short for the height of the boxes, and it resolves to white below that. You could set the background color to the same light blue the gradient finishes off with (#E4E5F4) to make it go through to the bottom.
 
Couple things...

Introduction Area -

I think that the copy you have in the introduction is great, but you need to find a way to pull it out and make it more punchy. E.g. completely grab their attention in a few seconds. People don't read, they scan. Maybe some kind of value prop image capturing the key points really succinctly. Then, if they want to read more they can in the copy. The "Sign up" anchor text links to the same page. There's no reason for that. Something you might want to test, is doing all the value prop / preselling on a seperate page and then pushing them to the sign up form (making that as clean as possible). But that's something you would definitely test, sometimes adding more steps is worse, sometimes better...just depends on how you do it.

The Form -

If you need to gather all of this information at sign up, you need to find a way to present this in a less obtrusive way from a usability perspective. E.g. as a quick example gender, zip and date of birth take up way too much screen real estate. Also, the testimonials on both sides is too much. I would move it all to one side bar. Probably on the right. I would also move the captcha down to the bottom of the form, as this is traditionally the last thing you do to verify your submission. If you don't need to collect all of this detailed profile information for registration, I would personally move this into a user profile that they could edit later. For everyone that doesn't, you could pull all the records from your database that didn't have those fields populated, and hit them with an email (complete your profile and we'll send you some bullshit PDF or whatever). The point is to get as many people opting in as you can. The easier / less information that requires, the better your rate is going to be. Also I would throw some privacy policy stuff in there about the information never being shared with anyone, for any reason...provided that's the case.

Random Notes -

As another poster pointed out, some issues with unordered lists in FF.

I hope this was somewhat helpful.
 
bobsoap said:
I like the testimonials as well, what I'd try maybe is making the form more compact though. Right now you start off with the box with the dark blue stripe in the header, and you expect that that's it. Then you scroll down and get a 2nd box with a red stripe on top, which only contains a couple of checkboxes and dropdowns, but all the whitespace in between makes it look huge. And then there is yet another box.

What I would think about is making it as easy as possible for them to sign up. Right now it just looks huge to me and like a bigger effort than it actually is, just because the form spans over three boxes. And the crux about the testimonials is that while they look good, actually they make it look even bigger than it has to be.

Have you thought about letting them register with only the first box, then after they verified their email, you can say "you must edit your profile before you get access", and only then you present them the other parts of the current form? I think it might make sense to test that.

***

As for the checkboxes and radio buttons, they all have ids so you can either list them all, one by one, in the css like input#cb_cpf_fieldXX_Y, or what I'd do is rather give all checkboxes a classname of e.g. "formcheck" and all radio buttons a classname of "formradio". Then you just need one line to add some margin to them: input.formradio, input.formcheck { margin:0 10px 0 0; }.

The bullets at the top - the <li> items should all be wrapped in a <ul>, then you can give that a left margin.

Another thing I noticed is the light blue background image on the boxes is too short for the height of the boxes, and it resolves to white below that. You could set the background color to the same light blue the gradient finishes off with (#E4E5F4) to make it go through to the bottom.
Click to expand...

I should have read you reply before I responded
 
Here's a good example of what I'm talking about: http://www.wishbin.com/SignUp/SignUp.aspx

Value props clearly outlined on left, simple sign-up form on right, more detailed information collected optionally in profile. This is by no means perfect (yet), but we've tested the sign-up process extensively to get the maximum number of registrations.

Disclaimer: One of my sites. Not trying to get opt-ins or inbound links. Just showing an example of simplicity.
 
I think you should turn the 3 page signup form into a 1 page signup form which can then be encouraged to fill out the other 2 pages after registration - OR you just fill one page at a time and have a progress bar.

that'll make the signup process appear smaller and more interactive.
 
Safari - the password strength box is just floating. You can download safari for windows to test. Many school kiddies are mac users, so ya might wanna check this :)
 
goddfadda said:
Safari - the password strength box is just floating. You can download safari for windows to test. Many school kiddies are mac users, so ya might wanna check this :)
Click to expand...

This is a pretty good site to test that kind of stuff in (checking your page now):

Website overview for http://www.course-notes.org/forum/register.php - Browsershots

You can pick the OS, screen resolution, browsers etc and see screen caps of how it actually renders. A few of them are blank, that's just because the screen cap was taken before the page had fully rendered.
 
Lots of stuff above, didn't read, just checking to see if someone mentioned that the blue background inside the sections cuts off after about 400px or so? gifs are cheap, make that fucker big
 
Status
Not open for further replies.
Top Bottom