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?
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.
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.
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.
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.
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.
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.
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.
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!
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!
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 ].
19 comments
[ 293 ms ] story [ 246 ms ] threadAnimation 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.
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.
If those fields are required from the start (which they really shouldn't be) they should be visible. The 'verbage' is all wrong.
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.
If you want to simplify your sign-up form, remove fields!
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