AJAX Design Pattern: Login Panel

I’ve noticed another new AJAX convention cropping up in a few places that I though I’d share. It solves a real problem in an elegant fashion: how to handle registration of new users.
Every site that requires a login needs to provide a way for new users to register. The tradeoff between supporting new users and existing users is always tricky: for example, most brokerage sites are oriented towards marketing to new users, and have a little link in the corner where existing clients can log in. Other sites orient towards existing users, and new users are shunted off to a registration page.
Ideally, we’d keep the user on the same page. With a little bit of Javascript trickery, this is possible. The best example of this I’ve seen so far is in ZohoCRM.
The login widget starts out oriented towards existing users.
zohocrm1.gif


But clicking on “New User Registration” doesn’t take you to a new page. Instead, the panel expands to show the fields required for registration.
zohocrm2.gif
Once the user has filled out the registration form completely, the panel displays a button that allows you to submit your data. This serves as a de-facto form validation: forms with incomplete data can’t get submitted.
zohocrm3.gif
Is this rocket science? Not at all. This stuff isn’t even really “AJAX”, in a technical sense (there’s no interaction with the server, just javascript wizardry). This effect could even be achieved with zero design talent, simply by using an accordion widget like the one that is part of OpenRico.
It’s all about using the tools that are available to us to create a less jarring user experience. We’re just getting started with what we can do with javascript, so lots of “low-hanging fruit” is still available. We haven’t even seen a decent AJAX-based product configurator, for goodness sakes! These are still early days.
Further reading:
Ajaxian wrote a great post about the login panel for treehouse magazine.

5 thoughts on “AJAX Design Pattern: Login Panel

  1. Jason Landry January 25, 2006 / 4:38 pm

    That is quite a nice implementation, but it would be even better if they had accounted for users that don’t have Javascript turned on.
    It shouldn’t be that hard to do either: make the new user registration button a link to a new page by default and then, if the user has Javascript turned on, use it to skip the link and slide out the form.
    Now that would be slick.

  2. brandon ellis January 25, 2006 / 6:41 pm

    We used something similar to that but ours actually was AJAX .. remote scripting… whatever.
    For a user signup form, as an input box lost focus, we checked to see if a specified username or password was available or to tie an email address to a valid domain name. That way, we were able to let the user know if there was a problem before they ever posted the info.
    Yeah that’s just DHTML, which I’m thinking should be called EXLAX everytime someone uses javascript and tries to pass it off as AJAX.

  3. John January 27, 2006 / 4:18 am

    Very nice. A minor caveat is that the register button that only appears when the fields are filled in might be an issue – it probably needs some feedback as to what’s incomplete. Particularly if anyone takes it and makes it more complex.

Comments are closed.