Wednesday, October 31, 2012

Login Screen – behind the scenes

Login Screen – behind the scenes

We wanted the login screen to feel personal and for our customers to feel comfortable and familiar with signing in. It's something that our most loyal customers see very regularly too, so it had to be streamlined and quick to understand and submit. At the end of the day, people don't want to stay staring at a login form – they want to use GoSquared – they want to find out more about their website.

Getting personal

Login Screen – behind the scenes

We decided to use Gravatar to show an image relating to the users email – which updates every time the email changes. The initial design was already cleaner and had a nicer feel than the old form.

Quick fades between the GoSquared logo and the Gravatar, depending on whether a Gravatar is found or not, make the transition natural. Users without a Gravatar can't tell that one should be there – there's no lost usability.

BREAKING! People forget their passwords. A lot.

Login Screen – behind the scenes

When have you ever gone to "Forgot your password" without entering an email first, or having guessed a password? Clicking on this autofills the email you had in the login form, again with your Gravatar, so you can reset your password in just two quick clicks.

25+% of customers use Gmail. Not Gmaol. Or Gkail. Or Gmaik...

Login Screen – behind the scenes

Mistyping your email address is easy and infuriating. We don't like our customers getting infuriated. The new login screen uses Kicksend's Mailcheck jQuery plugin which is a fantastic tool for suggesting email addresses – reducing the number of misspellings and annoyed customers.

And then there's the final touch, as soon as you submit the form, the box shrinks away into the background, leaving a loading spinner. The same spinner is then shown while the GoSquared Home area loads, making the login feel quick, easy and seamless.