5 ms·

Magical Sign-up Page with jQuery and CSS.

14 points by sinu9i 17y ago

drcode 17y ago
I don't get it... if it makes you fill out name/gender/etc anyway, what's the benefit of hiding this first? To trick the user into thinking registering is easier than it really is?
- chaosprophet 17y ago
  And to top it off it doesn't even inform the user if the registration has been completed and whether the slideout is just optional data. If it's not optional, then the very act of hiding it is going to put a lot of people off.
- hailpixel 17y ago
  This is an excellent example of what is wrong with "UI Design" on the modern web. To many people are interested in the flash and rarely think through the actual user benefit imparted. Animation in interfaces is best when used as an education tool: showing where things are moving to, directing attention at important events, &c. Not slowing down obvious processes.
- ovi256 17y ago
  Yup, that is it, it makes it seem easier. Furthermore, it exploits the sunken cost fallacy ('Oh I have already filled so much can't give up now'). Seems a bit sleazy to me. But I would really like to see some A/B testing between this and a classic form, to know if it really has an influence.
  - warfangle 17y ago
    Compare this with a form that simply requires email address and password to sign up, and .. well, you're going to get a lot better result, in terms of conversion rate, on the latter. The less, and less intrusive, you ask on signup - the better your conversion rate will be.
  - hailpixel 17y ago
    Sunken cost is an interesting argument (though "fallacy" is an apt description), but I believe it does not address the design mistake made here. Given the composition of the first UI object (user / pass / submit / register) an user would click "register" thinking that the process is complete, only to gaze in horror as more fields are revealed. If those fields are required from the start (which they really shouldn't be) they should be visible. The 'verbage' is all wrong.
DanielStraight 17y ago
I found it confusing. How do you know when you're done or almost done?
bdfh42 17y ago
Annoyed me anyway - could be a great way for deciding that you don't want to sign up for a given site...
JunkDNA 17y ago
This is really frustrating. Years of filling out forms and hitting "submit" have me thinking that this is a small form, only to have my hopes dashed as new segments keep popping up. This violates the principle of not surprising your users.
swombat 17y ago
I think using this in the form presented there would be a mistake. However, if you have a two-part registration, where the first part, for example, requires an email (that needs to be confirmed), you could use something like this to request the next set of registration data while waiting for the confirmation email to be received by the user.
mseebach 17y ago
Any sufficiently advanced technology is indistinguishable from magic. This is very distinguishable from magic.
omarqureshi 17y ago
No good in terms of a UX point of view, would have preferred either a breadcrumb showing me where I am along the side or every single field being listed at once.
ashleyw 17y ago
Wow, this truly is an example of trying to fix something which isn't broken, and ending up making it multiple times worse...you'll just loose people at each stage as they get annoyed. If you want to simplify your sign-up form, remove fields!
whimsy 17y ago
It didn't seem that long to me. A lot of griping could be prevented if the "Registration" button said something else, like the number of steps left. Perhaps if it said something like... 2 steps left... 1 step left... All done!
iuguy 17y ago
Wouldn't it be better to register a user, then encourage them to fill in a profile later?
deleted 17y ago
[deleted]
mdg 17y ago
A beginners tutorial on how to overcook jquery, and how not to design a UI. I have read this guys blog before, this post is just as lackluster as the last. Everytime I click "Registration", I think that I am done, oh wait, more stuff to fill out, jeez all I wanted was [ enter some simple service you must sign up for ]. Before this guy reaches into his Jquery bag-o-tricks, he should first brush up on basic form attributes such as "tabindex" http://www.w3schools.com/tags/ref_standardattributes.asp http://www.w3schools.com/tags/ref_standardattributes.asp
- sinu9i 17y ago
  Thank you
jameskpolk 17y ago
Progressively disclosing required fields is silly. Doing it two fields at a time is asinine.

14 points by sinu9i 17y ago

I don't get it... if it makes you fill out name/gender/etc anyway, what's the benefit of hiding this first? To trick the user into thinking registering is easier than it really is?

chaosprophet 17y ago
And to top it off it doesn't even inform the user if the registration has been completed and whether the slideout is just optional data. If it's not optional, then the very act of hiding it is going to put a lot of people off.
hailpixel 17y ago
This is an excellent example of what is wrong with "UI Design" on the modern web. To many people are interested in the flash and rarely think through the actual user benefit imparted. Animation in interfaces is best when used as an education tool: showing where things are moving to, directing attention at important events, &c. Not slowing down obvious processes.
ovi256 17y ago
Yup, that is it, it makes it seem easier. Furthermore, it exploits the sunken cost fallacy ('Oh I have already filled so much can't give up now'). Seems a bit sleazy to me. But I would really like to see some A/B testing between this and a classic form, to know if it really has an influence.
- warfangle 17y ago
  Compare this with a form that simply requires email address and password to sign up, and .. well, you're going to get a lot better result, in terms of conversion rate, on the latter. The less, and less intrusive, you ask on signup - the better your conversion rate will be.
- hailpixel 17y ago
  Sunken cost is an interesting argument (though "fallacy" is an apt description), but I believe it does not address the design mistake made here. Given the composition of the first UI object (user / pass / submit / register) an user would click "register" thinking that the process is complete, only to gaze in horror as more fields are revealed. If those fields are required from the start (which they really shouldn't be) they should be visible. The 'verbage' is all wrong.

DanielStraight 17y ago

I found it confusing. How do you know when you're done or almost done?

bdfh42 17y ago

Annoyed me anyway - could be a great way for deciding that you don't want to sign up for a given site...

JunkDNA 17y ago

This is really frustrating. Years of filling out forms and hitting "submit" have me thinking that this is a small form, only to have my hopes dashed as new segments keep popping up. This violates the principle of not surprising your users.

swombat 17y ago

I think using this in the form presented there would be a mistake. However, if you have a two-part registration, where the first part, for example, requires an email (that needs to be confirmed), you could use something like this to request the next set of registration data while waiting for the confirmation email to be received by the user.

mseebach 17y ago

Any sufficiently advanced technology is indistinguishable from magic. This is very distinguishable from magic.

omarqureshi 17y ago

No good in terms of a UX point of view, would have preferred either a breadcrumb showing me where I am along the side or every single field being listed at once.

ashleyw 17y ago

Wow, this truly is an example of trying to fix something which isn't broken, and ending up making it multiple times worse...you'll just loose people at each stage as they get annoyed. If you want to simplify your sign-up form, remove fields!

whimsy 17y ago

It didn't seem that long to me. A lot of griping could be prevented if the "Registration" button said something else, like the number of steps left. Perhaps if it said something like... 2 steps left... 1 step left... All done!

iuguy 17y ago

Wouldn't it be better to register a user, then encourage them to fill in a profile later?

deleted 17y ago

[deleted]

mdg 17y ago

A beginners tutorial on how to overcook jquery, and how not to design a UI. I have read this guys blog before, this post is just as lackluster as the last. Everytime I click "Registration", I think that I am done, oh wait, more stuff to fill out, jeez all I wanted was [ enter some simple service you must sign up for ]. Before this guy reaches into his Jquery bag-o-tricks, he should first brush up on basic form attributes such as "tabindex" http://www.w3schools.com/tags/ref_standardattributes.asp http://www.w3schools.com/tags/ref_standardattributes.asp

sinu9i 17y ago
Thank you

jameskpolk 17y ago

Progressively disclosing required fields is silly. Doing it two fields at a time is asinine.