Login designs: the 9 worst ones and where to find good examples 10
Here's a round up of bad or hard to use login designs and functions - things to avoid if you ever sort your login out. There's a collection of links to good-login resources at the end.
1 Asda: warnings of doom then page not found
Get your email address or password wrong at Asda Pharmacy and you get some doom-laden warnings: "You have 2 attempts left to enter a valid email address".
This counts down to 'your last chance'. My god, what will they do if I get it wrong again? Ah, they'll show me a page not found page. Brilliant!
Asda's log in - terrible warnings and then page not found
2 Bank of Scotland - four different URLs to visit
To log in to wealth management at Bank of Scotland, you need to press 4 login buttons and go to 4 different pages, each with another login button or link. You visit all these on your journey until you get to the final page where you can enter some details:
- You press LOG IN in here: Bankofscotland.co.uk
- Which takes you to here where you press LOGIN Bankofscotlandprivateclients.co.uk
- Which takes you here where you press 'Sign in': Bankofscotlandhalifax.co.uk
- And finally here, where you can enter a user name: Bankofscotlandhalifax-online.co.uk
I'm not kidding - you have to press login 3 times - and only on the 4th page can you enter your name and password.
Bank of Scotland - login 4 times
3 Nationwide - weird label
Nationwide Sign On. Huh?
A good idea is to put login or your account.
That's what most sites do, and it helps people find what they're looking for.
For some reason, Nationwide instruct you to 'Sign on' - which is what I thought you did when applying for unemployment benefit.
4 Trinny & Susannah and Findaproperty - use HTTPS
If you're asking people to enter their email address and a password, use a secure connection. These two sites don't.
Use HTTPS for login
5 Abbey - don't use odd words for passwords
Abbey login and its weird terms
I'm not sure what is going on with the Abbey.
Your passcode is your password.
Your Registration number is a numerical password or PIN (not some sort of account number as it sounds).
Just call things what everyone else calls them ...
6 Early Learning Centre - don't make other boxes obscure things
Early Learning Centre - box obscures login
If you click login at the Early Learning Centre, then a login panel opens up.
If you then move the mouse towards the panel, it goes over the top navigation.
A dropdown menu then appears, obscuring the login box.
Doh.
I mean, don't they test these things or use them themselves?
7 T-mobile - I said I wanted to log in didn't I?
T-mobile has a separate login and registration link.
So if I've clicked login, I want to login.
I don't need you to sell the benefits of logging in and hide the box on the right hand side.
I just want to login, please.
T-mobile login - let me login
8 Many Eyes - huh?
This one speaks for itself ...
I do love Many Eyes' data visualisation tools though! And at least the two messages explaining the insanity have a sense of homour.
Many Eyes - complicated
9 Post Office - don't have a non-clickable link
Post office login - non clickable words
I can sort of see why the Post Office has a 'My account' label.
However, it looks like the usual 'My account' clickable link.
You have to click next to it to get it to work ...
Examples of good login design
That's what not to do. Here's what to do:
- 65+ Examples of Login Form Design - this is the intro page. To see them all, click the second link in the first para.
- 36 beautiful login page / form designs - a great collection from Dzine this March.
- 21 beautiful login page/form designs - another collection from Dream CSS
- Attractive Login / Signup Interface Designs - more ideas from Greepit.com
- Designing Login Boxes: 6 examples of Good and Bad Design - thoughts from Design vs Art.
- Interface Design: Login/SignUp - collection from Web Design Ledger
- Login form designs and inspiration - some thoughts on options from OpenCrypt.
- Login Forms - a collection on Flickr (the same user, Factory Joe, has some other collections of interface designs and an interesting blog.)
- Inspriational Login in web design - another collection from Pattern Tap, a pattern library.
- Login - Interaction Design pattern Library - thoughts on good design and a collection from the Welie.com pattern library.
- Using address finders in web forms - this is about address fields in registration processes rather than login. But it was interesting, so I included it here!
If you enjoyed all this, you might enjoy my recent posts on the usability of bing and on the usabilty of taps (yes, taps) and the lessons for web design.
This is a nice little post. In the defence of Abbey, they've probably posted a letter to their customer with a code to use rather than having them choose a password.
As long as they use the same words as appear in the letter then it should be pretty obvious. However I get your point.
I remember a company who had an online system for their employees. It asked for their username when it really meant employee number. Rather than change the label, they wasted endless amounts of money trying to tell people that their username was actually their employee number.
They did ... but a triple-lock security system with its own minimum-strength password rules AND non-standard terminology is not easy to remember. And of course you're supposed to destroy the letter. Also, don't get me started on the fact that to login you press a button that opens a new window where you press another button that changes the first screen (that you can no longer see).
You didn't use to work where I did, did you?!? Our username used to be our employee number - and our password was our name. Now THAT was confusing!
What a useful post! I think you're right -- the people who design these things don't use them. Or even test them.
It's not about security of course: it's about banks' ingrained fear of transparency and customer control.
Allied Irish Banks (AIB) in Ireland is worth mentioning in this context: multiple login procedures and a "Code Card" which you have to keep to hand. Every time I check my balances online my blood pressure is forced up.
With that Halifax one, you probably wanted to use the "Sign In" beside "Internet Banking" and not "private banking" as most of the general public will not be "private banking" clients.
Another area of confusion.
Related to the username/employee number issue is a personal bug bear: sites that ask you for 'username' when they actually mean 'email address'. Even worse: when they never tell you they require 'email address', even if your login fails, so you have to end up guessing that your username is, in fact, your email address. ARGH!!
Or even better, when you finally have to get them to email you your 'username' and they email you ... your email address.
T-Mobile's site in general is one of the worst sites out there. I literally switched service providers because you can do nothing on the site... well that and I wanted an iPhone. 90% of the time you can't even pay your bill because it's down.
One of the most interesting articles I have read in a while. It just goes to show that even the big guns get it wrong.