Brian Peacock

The Ins & Outs of the Login Box

July 2013
The Ins & Outs of the Login Box

Its the little things that make or break a web application. The basic Sign In and Sign Up process are perhaps the most devilish details. It seems like something that should just work—to both the user and to the designer. How hard can it be?

Good interface design and good software architecture share one thing in common: good organization. I originally had the Sign In and Sign Up processes in two different pages on the site, with two different sets of code. To make matters worse, they were accessed from totally different places. Sign In was always in the upper right corner, but Sign Up was accessible on the home page and on the Sign In page. Even the labels “Login” and “Sign Up” were inconsistent.

The DRY (Do Not Repeat Yourself) principle can be applied just as well to user interfaces as it can to code. It ensures that things stay consistent and that’s huge for usability. With that in mind I merged the Sign In and Sign Up pages into one and separated them with tags so that users could quickly switch to the other if they had somehow ended up in the wrong place. I put both Sign In and Sign Up in the upper right corner while leaving links to Sign Up on the home page. Already this was a huge improvement.

Often, the Sign Up form has too many fields, so I narrowed it down to four: First Name, Last Name, Email and Password. Because Sign In and Sign Up are on the same page, they could now share the same form and simply hide some form elements not used for Sign In. That way, if a user realized half way through signing in that they didn’t have an account, the form fields would retain their values when the Sign Up fields were added. By adding nifty CSS transitions to hide the first name and last name fields the form seemed to morph when switching between Sign In and Sign Up. One great thing about well-organized designs is that it often simplifies the code. Now, the code for AJAX form submission could be the same for Sign In and Sign Up and just switch API endpoints. Error handling code could also be shared between the two!

Both Sign In and Sign Up had social options so I put them at the bottom with a horizontal break with the word Or. This way, it would require very little design work to add social options in the future and their placement would again stay consistent between Sign Up and Sign In.

The Sign In box could still be simpler. Instead of showing both email and password to at the start, I hid the password field until the user started typing their email, an idea that my friend Charlie gave me. This made the form visually simple and it felt very responsive when the password slid down out of the email.

I stuck with blue for all of the buttons on the form, including a “Forget?”” link that pulled the email from the form and sent an email through AJAX. Blue is the classic action color for the web so there was no sense deviating from established convention.

I added a few more visual queues to the form fields. When the field was empty I gave it a little inset shadow, as if its waiting for something to go there. Once it was field out successfully it turned a light yellow and removed the inset shadow. It now appeared solidified. If the user made a mistake, the field turned pink with a red border to indicate strongly that there was a problem and a light blue error message slid out. I went with light blue to make the message look friendlier. After all its not really the user’s fault that they made a mistake (see this article about positive emotions in Android OS design). These subtle visual clues made filling out the form easy and satisfying.

For the Sign Up process, there was still a problem: there was no explanation for why the user should sign up in the first place. We had to rely upon the fact that they came to the page knowing full well they wanted to sign up. So I added a quick paragraph titled Why Sign Up? to the right of the Sign Up box that linked back to the features page if they wanted more information. When switching between Sign Up and Sign In the paragraph and the form slid together since existing users don’t usually need too much convincing on why they should sign in.

Overall the design changes improved sign up conversions drastically and made it much smoother for existing users to sign in again.

Live Demo