Improving the Login Form Experience

Over the past few months, it seems that pretty much every site I’ve been working on has required functionality that allows users to register and then log in, either to access certain content or to interact with the site in some way. As such, I’ve been working to determine the most usable solution to provide a seamless user experience.

In this article, I would like to look at one popular technique that I tend to favour for a number of different reasons. First, we’ll look at how to achieve it using a bit of jQuery. More importantly, however, we’ll also be considering how to develop the entire thing so that it degrades gracefully for users who may have JavaScript turned off, maintaining usability and preventing a poor experience for these users.

The Concept

The basic concept is to have a single login button in the top right hand corner of the page. It could be a single button that stands on its own, as we see on something like Twitter’s post log out page (shown below). Or, it could be part of a larger menu, as we see on a site like MediaLoot.

We van see the drop down menu on Twitter after we've logged out

Either way, when the user clicks on the button a small but simple form appears directly below, allowing the user to log in.

What I like about this technique is its immediacy. The user indicates their desire to log in and is immediately presented with the interface to perform that action. There is no need to wait for another page to load. Also, with the Twitter page, focus is automatically given to the username field, meaning that the user can start typing without any additional clicks.

It’s little details like this—which work to reduce the amount of time it takes to perform a particular action—that really enrich the user experience. So, let’s look at how to do it.

The Markup

The first thing we’re going to need to make this work is a bit of HTML. Here’s what we’ll be starting with:

<ul> <li><a href="#" id="loginButton">login</a></li> </ul>

Since we’re only using a single button in this example, it would be possible to use just a single link, but I generally tend to have the login button as part of a larger menu—perhaps featuring home, register, contact or other buttons. So, I am working from a simple unordered list. This will also provide some structural hooks that will come in handy later.

Obviously, this list will also be surrounded by the additional markup which forms the rest of the document. There’s no real reason to reproduce that here though.

The CSS

Next, we need to style it up with some CSS. Again, I’m not going to reproduce all the rules that are used to style the complete list, the button and the form inputs, since those are choices that are going to be made based on the specific design of a given site. What I do want to focus on are some of the more functional styles that we’ll need for the form element itself:

ul li{ position: relative }ul li form{ position: absolute; top: 33px; right: 0px; display: none; }

First, we want to set the position of the list element to be relative. Why? Because we will actually be appending the login form into that element, right after the link itself. By setting the individual list element (the parent) to position:relative, we can then set the form element (the child) to position:absolute, allowing us to place the form relative to the button.

We can then set the top property to whatever value is required to ensure that the login form appears directly beneath the button (this is usually equal to the height of the button itself, including padding).

Lastly, we simply set the display property to none, as we only want the form to be revealed when the button his clicked.

Again, the properties I’ve listed here are only those necessary to control the behavior of our form. You will also likely want to style things like the background and text colours, or possibly even use some CSS3 properties like border-radius, box-shadow or text-shadow to really enhance the visual experience of the form (see the form button in the demo).

The jQuery

You may be wondering about this form I keep referencing. With the HTML and CSS we have thus far, there is no form. That’s also exactly what we want. We’re now going to create the form dynamically, using a bit of jQuery. Here is the code:

jQuery(document).ready(function(){ var formHTML = '<form id="loginform" method="post">'; formHTML += '<input type="text" name="username" id="username" value="username" />'; formHTML += '<input type="password" name="userpass" id="userpass" value="password" /> '; formHTML += '<button type="submit">Login</button>'; formHTML += '</form>'; jQuery("#loginButton").append(formHTML); }

This code assumes that you already have jQuery linked into your document. Once the document has been loaded, we declare a variable named formHTML and fill it with the simple HTML that will make up our form. Then, we use the jQuery append() method to add the form into the list element, which now looks more or less like this:

<ul> <li><a href="login.html" id="loginButton">login</a> <form id="loginform" method="post">'; <input type="text" name="username" id="username" value="username" /> <input type="password" name="userpass" id="userpass" value="password" /> <button type="submit">Login</button> </form> </li> </ul>

Of course, because of the CSS we added, you won’t actually see this form being dynamically added to the DOM, which is exactly the type of invisible behavior that we want. For the user, it will be as though the form was always there, just waiting to be revealed. Unfortunately, if you were to click the button at this point, nothing would happen. So we need to add the following code to our jQuery listener:

jQuery("#loginButton").click(function(){ jQuery("#loginform").slideDown(250,function(){ jQuery("#username").focus(); jQuery('html').click(function() {jQuery("#loginform").slideUp(500,function(){ jQuery('html').unbind('click'); jQuery("#loginform").unbind('click'); jQuery("#loginButton").toggleClass('clicked'); }); }); jQuery('#loginform').click(function(event){ event.stopPropagation(); }); }); jQuery(this).toggleClass('clicked'); });

There are a lot of nested functions in this, but what’s going on here is really simple. We’re telling jQuery that when the login button is clicked we want the login form (targeted by its ID) to slide down and become visible—with the animation taking 250 milliseconds. Once the animation is complete, we immediately add focus to the username field.

It is very common for elements like our form (or like modal or lightboxes) to close automatically whenever the user clicks anywhere else on the screen. The Twitter login form I mentioned above does this, and we’ll be emulating this behavior with the next few lines. Once the form has been revealed, we will apply another listener, which is triggered any time the document (html element) is clicked. The associated function will then slide the form back up to its hidden state, unbind the active listeners and toggle the clicked class (which we’ll get to).

There is, however, one problem with this: because the form itself is part of the DOM (obviously), if we click it for any reason, the form will close. Yes, that is bad for the user experience.

Fortunately, we can fix this using the stopPropagation() method. Basically, this stops the click listener we set for the html element from being applied to our form element, thus allowing us to click on it without also closing it. Beyond that, I’m not sure exactly how the method works. I’m just glad that it does.

Lastly, when the login button his clicked I also use the toggleClass() method to add the class of “clicked” . This allows us to apply different styles to the button when the form is open or active. This class is also toggled off when the form is closed.

The Fall Back

By this point, we should have a nice, functional drop down form that makes logging into the site a simple and easy process.

Unless, of course, the user has JavaScript disabled.

In that case, it’s not usable at all because the login form simply will not appear. In fact, it won’t even exist, because the script that we used to create it will not be executed. If we stopped here, it would be a definite UX fail.

We could use the noscript tag to inform users that JavaScript is required in order to use the site, but that doesn’t make for the best experience either. Instead, we can make a couple simple changes to our code to create a simple, usable fallback position that does not rely on JavaScript at all.

First, we’ll add an actual value to the href property in our button. This should link to a separate login page, which you will need to create (or use one that already exists). Our HTML will now look like this:

<ul> <li><a href="index.html" id="loginButton">login</a></li> </ul>

When the user clicks on the login button, they will now be taken directly to the separate login page. It’s not as elegant as having the login form drop down on the same page, but it is still a perfectly usable alternative for users who don’t have JavaScript enabled.

The only hiccup here is that this link triggers for all users, meaning that even users who do have JavaScript enabled will be forwarded to the separate page, thus rendering all our hard work on the drop down useless. Fortunately, this is easy to fix too. Just insert the following line of code directly before the block that automatically generates the form.

jQuery("#loginButton").removeAttr("href");

The logic here is simple. If JavaScript is enabled, it will execute and remove the href attribute from the login button, thereby breaking the link and preventing it from sending the user to another page. The script can then continue as intended and generate the login form, revealing it whenever the button his clicked. If JavaScript disabled, the href (and our fallback) remains completely intact.

Using this technique, we have enhanced the login experience using jQuery, while still maintaining usability in situations where the our scripts cannot be executed.

Here's a simple screenshot of what the drop down will look like (with a few more styles)

Check out the demo

(Also, don’t forget to try turning of your JavaScript)

A Pure CSS Solution

For you purists out there, it would likely be possible to create a similar effect using pure CSS. I’ve played around with this, and while it is certainly possible to make the form appear on a hover, I have not found a way to make it appear on a click. A hover-based CSS solution also has the distinct drawback of requiring the persistence of the hover state; if the user moves the mouse away, the form disappears.

In my opinion, this hurts overall usability.

There are also touch-based devices to consider, which do not support hover functionality. Without this support, using hover to reveal the login form would also seriously effect usability on these devices.

For these reasons, I feel that using a JavaScript technique—with an appropriate fallback—provides the most usable experience. If anyone knows of a pure CSS, however, I’d love to hear about it!

Also, feel free to use any of the code that was discussed in this article or that appears in the demo for your own purposes.