Login Form Usability Problem Solved

Here’s a little usability design problem for you.

What’s wrong with this picture?

zaxaa-login-form

It’s the login popup from Zaxaa, my new favourite selling platform.

On at least one occasion, I have entered my details (which autofill using LastPass, highly recommended) and then immediately clicked the “Forgot Password” button, after which I have to click back to log in properly.

Why Is It Wrong?

There are three problems I can see…

1. Positioning / Alignment

The first is the relative positioning of the buttons, more specifically alignment.

The elements on this form are left-aligned. There’s an invisible alignment axis, which I’ve highlighted here.

zaxaa-login-form-alignment

Alignment axes are one way of indicating to your visitor that elements are related. So what this alignment is essentially doing is saying, “Here’s the Login form, and you need to do 1, 2, 3 (optional remember me), 4” where (4) is actually the wrong button.

What you actually need to do is go down the alignment axis… Login, 1, 2… and then across to the actual Login button, in a big “L” shape! And that doesn’t seem obvious.

Solution: Move the “Login” button to where the “Forgot Password?” button is now.

2. Size

The “Forgot Password?” button is more than twice as large as the “Login” button. That makes it seem more important, because size is one of the strongest noticeability factors (make sure you read Save the Pixel to discover a lot more about these, they’re essential to good graphic design).

This is a mistake, because the default use case is to hit “Login”. Forgetting your password is an edge case: it shouldn’t happen very often at all. We should always prioritise the default path.

Solution: Ensure the “Login” button is the biggest button on the form.

3. Colour

The background of the form is a dull dark green. The “Login” button is a lighter, brighter version of that same green.

The “Forgot Password?” button, on the other hand, is orange. It’s halfway round the colour wheel from green, so it’s contrasting. And that also makes it stand out, compounding the problem of its size.

Solution: I would not have “Forgot Password?” as a button, because it doesn’t really perform an action — it actually changes your state.

Logging in is an action, but all “Forgot Password?” does is bring up a new option, so I think it should be a link. That will be more appropriate to its status, making the option smaller and less noticeable.

About the author

starfire

5 comments

Leave a comment: