Enter your search

Redesigning the Login Screen

By
Behind the scenes: finding the balance between security and usability

Designing the new GoSquared login screen

We care about the details here at GoSquared. With the recent launch of two-factor authentication to make GoSquared accounts more secure, we took the opportunity to improve the experience of signing in to your account.

Designing a better experience for signing in is not as easy as it may seem. You want to make the process beautiful, intuitive and fast for your users, but you also need to make the process difficult and slow for non-users (hackers, thieves, and other assorted bad people).

Let’s take a look at some of the decisions we’ve made. To try the process out for yourself, please feel free to sign up for a GoSquared account and then sign in!

GoSquared login screen

Effortless

You don't go to the login form to experience the login form itself. You go there because you want to sign in to your account — the form itself is purely a means to an end. For that reason it should be as effortless as possible. Everything is reduced down to exactly what you need to accomplish the task at hand (logging in to your account) and no more.

Complicated login screen process simplified

With the addition of two-factor authentication and all the functionality that entails, the new login process is a lot more complicated than before. Rather than being a simple form with email and password that either fails or succeeds and lets you into your account, there's now a lot more steps: does the account have two-factor auth set up? What authentication method does it use? Various steps including sending to a fallback device or using an emergency backup code. We had to make sure all of these steps flowed completely effortlessly, rather than making it a burden whenever you wanted to access your account.

Placeholders and labels

The matter of whether input placeholders should be used as labels is always a tricky one. From a design standpoint, they look nice. However, they need to play nicely with accessibility and autofill. If you're using the standard placeholder attribute on HTML inputs, then that disappears as soon as the input is filled and you have no idea what the input actually means. This is made doubly bad when the input is filled in by your browser's autofill, so you never see the placeholder.

Our previous login screen got around this problem by detecting whether an input had been auto-filled, and showing labels in this case. However, if you were to just fill in the form manually, those labels would never appear. We found that people liked the assurance of being able to review the form before submitting it, so this meant the labels needed to be visible all the time when an input was filled.

We think we've come up with a pretty neat solution. Use a separate element to provide the label, and move it out of the field:

Login screen design form placeholders

Of course, on mobile devices there's not enough room to move the label out leftwards, so we move it up instead:

Login screen labels on mobile

However, making this all work nicely presented some fun challenges…

When security can get awkward

When we first wrote the code to control these labels/placeholders, it was very simple: every time an input changes, look at its value. If it's empty, the label goes inside the input as a placeholder. If not, it goes outside. We also do the same check a few times immediately after the page has loaded to check for auto-fill.

There's a problem with this though. Chrome has a security feature (called PasswordAutofillAgent::PasswordValueGatekeeper) where a password field can get autofilled, but doesn't actually have a value until the user has interacted with the page somehow, even though it's visually presented as filled (this makes sense, you don't want JavaScript on the page automatically detecting an autofilled password and posting it off automatically). This was causing our nice labels to do this:

The way around this is to detect whether the input matches the :-webkit-autofill selector, as well as checking for the presence of a value in the input. It's ugly, but it's the only way to make it work.

More fluid than ever

Redirecting your browser to a new page for every step of the login flow is so 2008. It may well be the most compatible and foolproof way to implement a flow like this, but the main part of the GoSquared application doesn't support those edge cases anyway.

The new GoSquared login process is more fluid than ever, transitioning smoothly from one state to the next. And of course, we love making sure all our animations are super-smooth, so this is no exception.

Validation and Suggestion

As highlighted in our original post on our login screen design, it's all too easy to accidentally mistype your email address. It's all the more infuriating when you don't notice until after you've submitted the form and your login attempt fails.

Mailcheck does an excellent job at finding and correcting common mistypes in email addresses. We were already using it in our previous login flow, so it made perfect sense to carry it forward to the new process.

Mailcheck validation on login form email field

The return of the login button

When we last overhauled the design of our login form we made things super-super-simple: two inputs and nothing else. It's fairly standard these days to submit a form by hitting the “return” key after you've finished typing out the inputs. However, after seeing how people actually used our login form we realised that a lot of the time people would prefer to click a button to submit the form. We've taken this feedback on-board, and the new login screen has a proper login button (that's nice and easy to tap on touch devices) on every step.

But wait! It's slow! Why is it slow?

When you hit the “Sign in” button, it's a good few seconds before you're actually signed in. There's a very good reason that it's so slow, even though we've spent a lot of time and effort optimizing all of our application performance: security. The way we check passwords for logging in requires a large amount of computation time (we won't go into the details now, but the idea is it makes it very hard for anyone to brute-force their way into your account).

Because of this slowness, we didn't want to leave you looking at a login form that's not doing anything, because that looks like it's broken. We needed to show some kind of visual feedback to indicate “you've submitted this form, everything's good, just hang on a moment”.

We considered using a progress bar to show how long we expect the login process to take, which would provide a good indication of how long you should expect to wait. However, dumb time-based progress bars can be quite annoying when they're not exactly right, so we decided to use a spinner animation instead.

Go check it out!

We hope you’ll enjoy using GoSquared even more with these improvements. If you don’t use GoSquared, then we hope you’ll be inspired by the ideas here to improve your own login experience. Please let us know in the comments if you make any changes based on reading this – we’d love to hear from you!

To try the new login process out for yourself, please feel free to sign up for a GoSquared account and then sign in. If you already use GoSquared, go here!

Check out our post on building the two-factor authentication system here.

download free analytics ebook

Written by
JT is a co-founder and the lead front-end engineer at GoSquared. He's responsible for the shiniest of the shiny projects we work on.

You May Also Like

Group 5 Created with Sketch. Group 11 Created with Sketch. CLOSE ICON Created with Sketch. icon-microphone Group 9 Created with Sketch. CLOSE ICON Created with Sketch. SEARCH ICON Created with Sketch. Group 4 Created with Sketch. Path Created with Sketch. Group 5 Created with Sketch.